/* Each person's look: Light (white), Classic (gray) or Dark, on <html data-appearance>
   (set by views/layout.ejs). This file sets the page planes, the header and a few
   widgets the theme script can't read (other-site stylesheets); public/js/appearance.js
   remaps every page's own colors. Screen only, so prints and PDFs come out as designed. */

@media screen {
  /* Light: crisp, plain white with neutral lines and near-black text. */
  html[data-appearance="white"] {
    --ap-page: #ffffff;
    --ap-surface: #ffffff;
    --ap-surface-2: #f6f6f6;
    --ap-header: #ffffff;
    --ap-line: #e4e4e7;
    --ap-text: #111111;
    --ap-muted: #3f3f46;
  }
  /* Classic: warm-white cards (#fdfbf6) on a cream work area (#f2eee1), ivory panels and header (#f8f6ef),
     crisp neutral lines and near-black text. */
  html[data-appearance="gray"] {
    --ap-page: #f2eee1;
    --ap-surface: #fdfbf6;
    --ap-surface-2: #f8f6ef;
    --ap-header: #f8f6ef;
    --ap-line: #d5d5d5;
    --ap-text: #161616;
    --ap-muted: #3d3d3d;
  }
  /* The header: frosted (a light blur of the page behind it), a fine line and a soft shadow. */
  html[data-appearance="white"] header#top-header {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px) !important;
    backdrop-filter: saturate(1.6) blur(14px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08), 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  }
  html[data-appearance="gray"] header#top-header {
    background: rgba(248, 246, 239, 0.92) !important;
    -webkit-backdrop-filter: saturate(1.3) blur(12px) !important;
    backdrop-filter: saturate(1.3) blur(12px) !important;
    box-shadow: 0 1px 0 #d5d5d5, 0 2px 10px rgba(22, 22, 22, 0.04) !important;
  }
  html[data-appearance="dark"] {
    --ap-page: oklch(0.185 0.006 255);
    --ap-surface: oklch(0.255 0.008 255);
    --ap-surface-2: oklch(0.29 0.008 255);
    --ap-line: oklch(0.37 0.008 255);
    --ap-text: oklch(0.93 0.004 255);
    --ap-muted: oklch(0.75 0.008 255);
    color-scheme: dark;
    /* Brand tints are mixed with the dark surface instead of white. */
    --org-primary-soft: color-mix(in srgb, var(--org-primary-color) 18%, var(--ap-surface));
    --org-primary-soft-strong: color-mix(in srgb, var(--org-primary-color) 26%, var(--ap-surface));
    --org-primary-soft-border: color-mix(in srgb, var(--org-primary-color) 45%, var(--ap-surface));
    --org-primary-hover-fill: color-mix(in srgb, var(--org-primary-color) 80%, white);
  }

  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]),
  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]) body {
    background: var(--ap-page) !important;
    color: var(--ap-text);
  }
  /* Page planes take the page color; cards sit on top of them. */
  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]) :is(#app-scale-root, main) {
    background: transparent !important;
  }

  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]) body.student-portal,
  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]) body.student-portal :is(#app-scale-root, main) {
    background: #ffffff !important;
    color: #1f2937;
  }
  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]) body.student-portal header#top-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Hold the first paint until the colors are in place (never more than 1.2s). */
  html:is([data-appearance="white"], [data-appearance="gray"], [data-appearance="dark"]):not(.ap-ready) body {
    opacity: 0;
    animation: ap-reveal 0s linear 1.2s forwards;
  }
  @keyframes ap-reveal { to { opacity: 1; } }
  /* Set for a moment while the theme script reads colors. */
  html.ap-still *, html.ap-still *::before, html.ap-still *::after { transition: none !important; }

  html[data-appearance="dark"] .page-loading-overlay { background: color-mix(in srgb, var(--ap-page) 60%, transparent) !important; }
  html[data-appearance="dark"] .spinner { border-color: var(--ap-line) !important; border-top-color: var(--ap-text) !important; }

  /* Rich text editor (its stylesheet comes from another site). */
  html[data-appearance="dark"] :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) { border-color: var(--ap-line) !important; }
  html[data-appearance="dark"] .ql-toolbar.ql-snow { background: var(--ap-surface-2); }
  html[data-appearance="dark"] .ql-editor { color: var(--ap-text); }
  html[data-appearance="dark"] .ql-editor.ql-blank::before { color: var(--ap-muted) !important; }
  html[data-appearance="dark"] .ql-snow .ql-stroke { stroke: var(--ap-text) !important; }
  html[data-appearance="dark"] .ql-snow .ql-fill { fill: var(--ap-text) !important; }
  html[data-appearance="dark"] .ql-snow .ql-picker { color: var(--ap-text) !important; }
  html[data-appearance="dark"] .ql-snow .ql-picker-options { background: var(--ap-surface) !important; border-color: var(--ap-line) !important; }
  html[data-appearance="dark"] .ql-snow .ql-tooltip { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-line) !important; box-shadow: none !important; }

  /* Signatures are dark ink, so they keep a white paper behind them. */
  html[data-appearance="dark"] :is(.sig-paper, .sig-canvas-wrapper, .sig-canvas) { background: #fff !important; border-color: var(--ap-line) !important; }
  html[data-appearance="dark"] :is(.signature-info img, .t-signature-img, img[alt="Signature" i]) { background: #fff !important; border-radius: 6px; padding: 4px; box-sizing: content-box; }
  html[data-appearance="dark"] ::placeholder { color: var(--ap-muted) !important; opacity: 1; }
  html[data-appearance="dark"] img { color-scheme: normal; }
}

/* ---------- The picker (settings pages) and the header menu switch ---------- */
.ap-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; max-width: 520px; }
.ap-choice { position: relative; display: grid; gap: 8px; margin: 0; padding: 8px 8px 10px; border: 1px solid var(--ap-line, #d5d9e0); color: inherit; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .9rem; text-align: center; transition: border-color .15s ease; }

.ap-choice:has(input:checked) { border-color: var(--org-primary-color, #01535b); box-shadow: inset 0 0 0 1px var(--org-primary-color, #01535b); }
.ap-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ap-choice__preview { display: grid; grid-template-columns: 26% 1fr; gap: 5px; height: 64px; padding: 6px; border-radius: 8px; border: 1px solid rgba(15, 23, 42, .12); }
.ap-choice__preview i { display: block; border-radius: 4px; }
.ap-choice--light .ap-choice__preview { background: #ffffff !important; }
.ap-choice--light .ap-choice__preview i { background: #ffffff !important; box-shadow: 0 0 0 1px #e4e4e7; }
.ap-choice--classic .ap-choice__preview { background: #f2eee1 !important; }
.ap-choice--classic .ap-choice__preview i { background: #fdfbf6 !important; box-shadow: 0 0 0 1px #d5d5d5; }
.ap-choice--classic .ap-choice__preview i:first-child { background: #f8f6ef !important; }
.ap-choice--dark .ap-choice__preview { background: #16181c !important; border-color: #16181c; }
.ap-choice--dark .ap-choice__preview i { background: #25282e !important; box-shadow: 0 0 0 1px #33373e; }
.ap-choice__name { display: grid; gap: 1px; }
.ap-choice__name small { font-size: .74rem; font-weight: 500; color: #64748b; }
.ap-choice__check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; background: var(--org-primary-color, #01535b); color: #fff; font-size: 10px; }
.ap-choice:has(input:checked) .ap-choice__check { display: grid; }
.ap-status:empty { display: none; }
.ap-status { margin: 10px 0 0; font-size: .84rem; color: #64748b; }

.ap-menu-item { list-style: none; }
/* Header menu: Appearance as a row of three color dots (Light, Classic, Dark). No hover colors. */
.ap-dots-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
/* The label reads like the menu's other items: the school's color, an icon, normal case. */
.ap-dots-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--org-primary-color, #01535b); font-size: .88rem; font-weight: 600; line-height: 1.3; }
.ap-dots-label svg { width: 14px; height: 14px; flex: none; opacity: .92; }
.ap-dots { display: inline-flex; align-items: center; gap: 10px; }
/* Header menus style their links (padding, colors, hover); the dots keep their own. */
.ap-dots .ap-dot {
  display: inline-block !important; flex: none; width: 20px !important; height: 20px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(0, 0, 0, 0.18) !important;
  cursor: pointer; text-decoration: none !important; transition: box-shadow .15s ease;
}
.ap-dots .ap-dot--light { background: #ffffff !important; }
.ap-dots .ap-dot--classic { background: #f2eee1 !important; }
.ap-dots .ap-dot--dark { background: #1f2329 !important; border-color: #1f2329 !important; }
.ap-dots .ap-dot:hover { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); }
.ap-dots .ap-dot[aria-checked="true"] { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--org-primary-color, #01535b) !important; }
/* Touch screens: bigger dots, easy to tap. */
@media (pointer: coarse) {
  .ap-dots { gap: 14px; }
  .ap-dots .ap-dot { width: 26px !important; height: 26px !important; }
}
.ap-dots .ap-dot:focus-visible { outline: 2px solid var(--org-primary-color, #01535b); outline-offset: 3px; }
html[data-appearance="dark"] .ap-dots .ap-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ap-surface), 0 0 0 4px var(--org-primary-color, #2aa7b2) !important; }
@media (max-width: 520px) {
  /* Phone menus are narrow: smaller dots so all three fit; the invisible
     margin around each keeps it easy to tap. */
  .ap-dots-row { gap: 8px; padding: 8px 10px; }
  .ap-dots-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-dots { flex: none; gap: 12px; }
  .ap-dots .ap-dot { position: relative; width: 18px !important; height: 18px !important; }
  .ap-dots .ap-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .ap-dots .ap-dot[aria-checked="true"] { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--org-primary-color, #01535b) !important; }
  html[data-appearance="dark"] .ap-dots .ap-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ap-surface), 0 0 0 3.5px var(--org-primary-color, #2aa7b2) !important; }
  .ap-picker { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .ap-choice__preview { height: 48px; }
}

.ap-card { padding: 18px 20px; }
.ap-card__title { margin: 0; font-size: 1rem; font-weight: 700; }
.ap-card__sub { margin: 2px 0 0; font-size: .86rem; color: #64748b; }