/* =====================================================================
   portal_theme.css  —  Student-selectable Science Portal themes
   ---------------------------------------------------------------------
   Load AFTER developer-style.css, from chem_mobile_header.php only:
       <link rel="stylesheet" href="/css/portal_theme.css">
       <script src="/javascript/portal_theme.js"></script>
   The script adds a "Theme" button so students can cycle looks.
   Only pages that load the chemistry header get this look. The portal
   course page (portalCourses.php) keeps its black-and-gold theme.

   SCREEN ONLY. Printing is unchanged (same fonts, sizes, spacing, and
   page count), since handouts are copied in black and white.

   Colors = chem deck "Whiteboard" tokens. To change the course color,
   edit --cp-accent (and --cp-tint, a pale version of it).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {                 /* Classic (default): black and gold */
  --cp-ink:    #1a1a1a;
  --cp-muted:  #5b5b5b;
  --cp-card:   #ffffff;
  --cp-canvas: #eef1f5;   /* original page background */
  --cp-pale:   #efe6c8;
  --cp-line:   #d4c48a;   /* original card border */
  --cp-accent: #8a6d1b;   /* original header gold */
  --cp-tint:   #f5eecb;   /* original menu hover */
  --cp-gold:   #d4af37;
  --cp-lime:   #3d7a0f;
  --cp-answer: #eef5e8;
  --cp-answer-line: #b9d3a6;
  --cp-onaccent: #ffffff;
}
html[data-theme="teal"] {   /* chem deck "Whiteboard" colors */
  --cp-ink:#1b2333; --cp-muted:#55617a; --cp-canvas:#f4f6fa; --cp-pale:#e9edf3;
  --cp-line:#c3cad8; --cp-accent:#0a8a7b; --cp-tint:#e3f3f1;
}

/* ---------- Theme choices (student button cycles these) ----------
   classic = default; the original black and gold, in the same card layout
   teal    = matches the chem decks
   blue    = the portal's existing link/notes blue
   amber / violet = the decks' other section colors
   night   = the decks' dark "Night Lab" look (screen only)
   Every theme uses the same layout; only the colors change.           */
html[data-theme="teal"], html[data-theme="blue"], html[data-theme="amber"], html[data-theme="violet"] {
  --cp-ink:#1b2333; --cp-muted:#55617a; --cp-canvas:#f4f6fa; --cp-pale:#e9edf3; --cp-line:#c3cad8;
}
html[data-theme="blue"]   { --cp-accent:#2e6fb7; --cp-tint:#e8f0fa; }
html[data-theme="amber"]  { --cp-accent:#b35f00; --cp-tint:#fbefe3; }
html[data-theme="violet"] { --cp-accent:#6a45d1; --cp-tint:#efeafc; }
html[data-theme="night"]  {
  color-scheme: dark;
  --cp-ink:#e8ecf4; --cp-muted:#a9b3c7; --cp-card:#0f1626; --cp-canvas:#0a0f1b;
  --cp-pale:#1c2538; --cp-line:#2b3650; --cp-accent:#3dd6c4; --cp-tint:#12332f;
  --cp-lime:#a9e26f; --cp-answer:#14240b; --cp-answer-line:#3a5a22; --cp-onaccent:#0a0f1b;
}

@media screen {

  /* ---------- Page ---------- */
  html body {
    background: var(--cp-canvas) !important;
    color: var(--cp-ink);
    font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  }

  /* ---------- Top bar ---------- */
  html body #topbar {
    background: var(--cp-card) !important;
    border-top: 6px solid var(--cp-accent);
    border-bottom: 1px solid var(--cp-line);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    min-height: 44px;
  }
  html body #title {
    color: var(--cp-ink) !important;
    text-shadow: none !important;
    font-family: Fraunces, Georgia, serif;
    font-weight: 600;
    line-height: 44px;
    height: 44px;
  }
  html body #leftnav, html body #rightnav { top: 8px; }
  html body #leftnav a,  html body #leftnav button,
  html body #rightnav a, html body #rightnav button {
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: var(--cp-onaccent) !important;
    text-shadow: none !important;
    background: var(--cp-accent) !important;
    border: 1px solid var(--cp-accent) !important;
    border-radius: 6px;
    padding: 4px 12px;
  }
  html body #leftnav a, html body #leftnav button {      /* Back / Home = outline */
    color: var(--cp-accent) !important;
    background: var(--cp-card) !important;
  }
  html body #leftnav a:hover,  html body #leftnav button:hover,
  html body #rightnav a:hover, html body #rightnav button:hover { filter: brightness(.93); }

  /* ---------- Button bar under the top bar (was gold) ---------- */
  html body #tributton, html body #duobutton {
    background: var(--cp-accent) !important;
  }
  html body #tributton a, html body #duobutton a {
    color: #fff !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    font-family: inherit;
    font-weight: bold;
  }
  html body #tributton a:hover, html body #duobutton a:hover {
    background: rgba(255,255,255,.28) !important;
    color: #fff !important;
  }

  /* ---------- Section label (graytitle) = mono kicker ---------- */
  html body .graytitle {
    display: block;
    max-width: 960px;
    margin: 16px auto 6px;
    padding: 0 4px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cp-accent);
  }

  /* ---------- Cards ---------- */
  html body .pageitem {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--cp-card);
    border: 1px solid var(--cp-line);
    border-top: 5px solid var(--cp-accent);
    border-radius: 8px;
    box-shadow: none;
  }
  html body .textbox {
    padding: 14px 22px;
    border-top: 1px solid var(--cp-pale);
  }
  html body .textbox p {
    color: var(--cp-ink);
    line-height: 1.5;
    text-align: left;
  }
  html body .header {
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--cp-ink);
    margin: 2px 0 10px;
  }
  html body .header a { color: var(--cp-accent); }
  html body .textbox hr {
    border: 0;
    border-top: 1px solid var(--cp-line);
    margin: 14px 0;
  }
  html body .textbox table[border] th { background: var(--cp-canvas); color: var(--cp-ink); }

  /* ---------- Menu rows (chapter and lesson lists) ---------- */
  html body .menu {
    border-top: 1px solid var(--cp-pale);
    border-left: 4px solid transparent;
  }
  html body .menu:hover {
    background: var(--cp-tint) !important;
    border-left-color: var(--cp-accent);
  }
  html body .menu .name {
    font-family: inherit;
    font-weight: 600;
    color: var(--cp-ink);
  }
  html body .menu a:hover .name { color: var(--cp-ink); }
  html body .menu .comment, html body .menu a:hover .comment { color: var(--cp-muted); }

  /* Collapsible lesson drops on chapter pages */
  html body details.lesson-drop > summary { color: var(--cp-ink); font-family: inherit; }
  html body details.lesson-drop > summary small { color: var(--cp-muted); }
  html body .lesson-links a { color: var(--cp-ink); border-top-color: var(--cp-pale); }
  html body .lesson-links a:hover { background: var(--cp-tint); }

  /* ---------- Inline answers on practice pages ---------- */
  /* Only answers inside a question card. The teacher-only resource
     blocks (a .solution wrapped around whole cards) are left alone. */
  html body .textbox .solution {
    margin: 8px 0 12px;
    padding: 10px 14px;
    background: var(--cp-answer);
    border: 1px solid var(--cp-answer-line);
    border-left: 4px solid var(--cp-lime);
    border-radius: 4px;
    font-size: 15px;
    color: var(--cp-ink);
  }
  html body .textbox .solution::before {
    content: "Solution";
    display: block;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cp-lime);
    margin-bottom: 4px;
  }

  /* ---------- Footer quote ---------- */
  html body #footer, html body #footer p, html body #footer a {
    font-family: Fraunces, Georgia, serif;
    font-style: italic;
    color: var(--cp-muted);
    text-shadow: none;
  }
}

/* ---------- Night theme fixes for older page content ---------- */
@media screen {
  html[data-theme="night"] body .textbox p,
  html[data-theme="night"] body .textbox li,
  html[data-theme="night"] body .textbox td,
  html[data-theme="night"] body .textbox th { color: var(--cp-ink); }
  /* Images drawn on transparent backgrounds stay readable */
  html[data-theme="night"] body .textbox img { background: #fff; border-radius: 4px; }
  /* Table cells with a light inline background keep dark text */
  html[data-theme="night"] body .textbox [bgcolor],
  html[data-theme="night"] body .textbox [bgcolor] * { color: #1b2333 !important; }
  html[data-theme="night"] body .textbox a { color: var(--cp-accent); }
  html[data-theme="night"] body .menu a img { background: #fff; border-radius: 4px; }
  /* Typed text in boxes (login fields, quiz answers) was black on dark */
  html[data-theme="night"] body input[type="text"],
  html[data-theme="night"] body input[type="password"],
  html[data-theme="night"] body input[type="email"],
  html[data-theme="night"] body input:not([type]),
  html[data-theme="night"] body textarea,
  html[data-theme="night"] body select {
    color: var(--cp-ink);
    background-color: var(--cp-card);
    caret-color: var(--cp-ink);
    -webkit-text-fill-color: var(--cp-ink);
  }
  /* Browser/password-manager autofill forces black text and a pale box */
  html[data-theme="night"] body input:-webkit-autofill,
  html[data-theme="night"] body input:-webkit-autofill:hover,
  html[data-theme="night"] body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cp-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cp-card) inset !important;
    box-shadow: 0 0 0 1000px var(--cp-card) inset !important;
    caret-color: var(--cp-ink);
  }
  html[data-theme="night"] body input::placeholder,
  html[data-theme="night"] body textarea::placeholder { color: var(--cp-muted); -webkit-text-fill-color: var(--cp-muted); opacity: 1; }
}

/* ---------- The "Theme" button (works in every theme, screen only) ---------- */
#theme-cycle {
  position: fixed; right: 14px; bottom: 14px; z-index: 10000;
  font: bold 13px "IBM Plex Sans", Arial, Helvetica, sans-serif;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  color: #fff; background: #1b2333; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#theme-cycle:hover { filter: brightness(1.15); }
#theme-cycle .swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; border: 1px solid #fff;
}
@media print { #theme-cycle { display: none !important; } }

/* Night: dark text on the bright teal button bar */
@media screen {
  html[data-theme="night"] body #tributton a,
  html[data-theme="night"] body #duobutton a {
    color: var(--cp-onaccent) !important;
    border-color: rgba(10,15,27,.35) !important;
    background: rgba(255,255,255,.25) !important;
  }
}

/* ---------- Classic: black top bar and gold button bar ---------- */
@media screen {
  html[data-theme="classic"] body #topbar {
    background: linear-gradient(180deg, #2b2b2b, #000000) !important;
    border-top: 6px solid var(--cp-gold);
    border-bottom: 0;
  }
  html[data-theme="classic"] body #title { color: #ffffff !important; }
  html[data-theme="classic"] body #leftnav a, html[data-theme="classic"] body #leftnav button {
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.6) !important;
  }
  html[data-theme="classic"] body #rightnav a, html[data-theme="classic"] body #rightnav button {
    color: #1a1a1a !important;
    background: var(--cp-gold) !important;
    border: 1px solid var(--cp-gold) !important;
  }
  html[data-theme="classic"] body #tributton, html[data-theme="classic"] body #duobutton {
    background: linear-gradient(180deg, #d4af37, #a8841c) !important;
  }
  html[data-theme="classic"] body #tributton a, html[data-theme="classic"] body #duobutton a {
    color: #1a1a1a !important;
    background: rgba(0,0,0,.08) !important;
    border: 1px solid rgba(0,0,0,.3) !important;
  }
  html[data-theme="classic"] body #tributton a:hover, html[data-theme="classic"] body #duobutton a:hover {
    background: rgba(0,0,0,.18) !important;
    color: #000 !important;
  }
}

/* ---------- Top-bar buttons on the login/home pages ----------
   (#leftbutton / #rightbutton instead of #leftnav / #rightnav).
   They were white text on the white top bar in every theme but Classic.
   Now a solid button in the theme color, so they stand out on white. */
@media screen {
  html body #leftbutton a,  html body #leftbutton button,
  html body #blueleftbutton a, html body #blueleftbutton button,
  html body #rightbutton a, html body #rightbutton button,
  html body #bluerightbutton a, html body #bluerightbutton button {
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none !important;
    border-radius: 6px;
    padding: 4px 12px;
    color: var(--cp-onaccent) !important;
    background: var(--cp-accent) !important;
    border: 1px solid var(--cp-accent) !important;
  }
  html body #leftbutton a:hover,  html body #leftbutton button:hover,
  html body #rightbutton a:hover, html body #rightbutton button:hover,
  html body #blueleftbutton a:hover, html body #bluerightbutton a:hover { filter: brightness(.93); }

  html[data-theme="classic"] body #leftbutton a, html[data-theme="classic"] body #leftbutton button,
  html[data-theme="classic"] body #blueleftbutton a, html[data-theme="classic"] body #blueleftbutton button {
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.6) !important;
  }
  html[data-theme="classic"] body #rightbutton a, html[data-theme="classic"] body #rightbutton button,
  html[data-theme="classic"] body #bluerightbutton a, html[data-theme="classic"] body #bluerightbutton button {
    color: #1a1a1a !important;
    background: var(--cp-gold) !important;
    border: 1px solid var(--cp-gold) !important;
  }
}