/* LTR theme: colour tokens (light + dark), font and the top bar. Loaded before app.css on every app page and by
   the admin (web/admin.css), so both look the same. html[data-theme="light"] too: the admin's own light colours
   (a yellow --accent) are set on it, and would otherwise win over these (contrast check 2026-10-28). */
:root, html[data-theme="light"] {
  --bg: #f5f6f8; --surface: #fff; --text: #1d2330; --muted: #667085; --line: #e3e6eb;
  --brand: #1f3a5f; --brand-text: #fff; --accent: #2563eb; --accent-soft: #e8efff;
  --danger: #b42318; --ok: #067647; --warn: #b54708; --flag: #fff4d6; --flag-mine: #ffd34d;
  --ok-soft: #e3f6ec; --warn-soft: #fef0c7; --danger-soft: #fde8e8; --grey-soft: #eceff3; --on-accent: #fff; --purple-soft: #efe7ff; --purple: #5b21b6; --void-red: #dc2626;
  /* charts (docs/rules/reports.md rule 16): categorical slots in fixed order, validated on #fff and #1b1f27 */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4;
  --series-6: #008300; --series-7: #6250d6; --series-other: #a3a7ae; --chart-grid: #e8eaee; --chart-axis: #c3c7cf;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px;
}
/* Text size by screen. Every other size is in rem, so it all follows this one number. Laptop screens are
   physically small for their width, so 14px reads tiny there: they get 15px; big monitors keep 14px. */
@media (max-width: 1599px) { :root { font-size: 15px; } }
/* Dark: when the device is dark (unless light was chosen with the top bar's button), or when dark was chosen. The
   choice is the admin's own ("theme" in the browser: auto / light / dark), so the app and the admin always match. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #12151b; --surface: #1b1f27; --text: #e6e8ec; --muted: #9aa3b2; --line: #2c323d;
          --brand: #0f1e33; --accent: #7aa2ff; --accent-soft: #22304d; --flag: #3a321c; --flag-mine: #8a6a00;
          --danger: #f97066; --ok: #47cd89; --warn: #fdb022;
          --ok-soft: #12352a; --warn-soft: #3a2d10; --danger-soft: #3d1a17; --grey-soft: #262b34; --on-accent: #0b1220; --purple-soft: #2e2346; --purple: #c4b5fd; --void-red: #dc2626;
          --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
          --series-6: #008300; --series-7: #9085e9; --series-other: #6b7280; --chart-grid: #262b34; --chart-axis: #3a414d; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #12151b; --surface: #1b1f27; --text: #e6e8ec; --muted: #9aa3b2; --line: #2c323d;
          --brand: #0f1e33; --accent: #7aa2ff; --accent-soft: #22304d; --flag: #3a321c; --flag-mine: #8a6a00;
          --danger: #f97066; --ok: #47cd89; --warn: #fdb022;
          --ok-soft: #12352a; --warn-soft: #3a2d10; --danger-soft: #3d1a17; --grey-soft: #262b34; --on-accent: #0b1220; --purple-soft: #2e2346; --purple: #c4b5fd; --void-red: #dc2626;
          --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
          --series-6: #008300; --series-7: #9085e9; --series-other: #6b7280; --chart-grid: #262b34; --chart-axis: #3a414d; }

/* The light / dark button in the top bar */
.topbar .theme-toggle { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 6px; }
.topbar .theme-toggle:hover { background: rgba(255,255,255,.12); }
.topbar .about-button { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 6px; color: inherit; }
.topbar .about-button:hover { background: rgba(255,255,255,.12); }
.theme-toggle .moon { display: inline; }  /* over the admin's .theme-toggle svg { display: none } */
.theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: inline; }
                                      :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

.topbar button.link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.topbar { display: flex; align-items: center; gap: 24px; padding: 0 16px; height: 3.4rem; background: var(--brand); color: var(--brand-text); }
.topbar a, .topbar button.link { color: var(--brand-text); }
.topbar .brand { font-weight: 700; letter-spacing: .5px; }
.topbar nav { display: flex; gap: 16px; flex: 1; }
.topbar nav a { opacity: .8; padding: 1rem 0; }
.topbar nav a.active { opacity: 1; border-bottom: 2px solid #fff; }
.topbar .who { display: flex; gap: 12px; align-items: center; font-size: .93rem; }
.topbar .who form { margin: 0; }


/* Money input boxes: "$" in front (app/core/money.py MoneyInput), in the app and the admin. */
.money-input { display: inline-flex; align-items: center; gap: 4px; }
.money-input .money-symbol { color: var(--muted); font-weight: 500; }

/* Change history (docs/rules/change-history.md), on the job's History tab and in the admin. */
table.history td { vertical-align: top; }
.change-fields { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.change-fields li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 0; }
.change-label { color: var(--muted); font-size: .875rem; min-width: 9em; }
.change-old { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.change-deleted .change-old { text-decoration: none; }
.change-new { color: var(--text); font-weight: 500; }
.change-action { font-weight: 600; }
.change-created .change-action { color: var(--ok); }
.change-deleted .change-action { color: var(--danger); }
.put-back { display: inline; margin: 0; }
.put-back button { font-size: .875rem; }

/* Phones and narrow tablets: the menu scrolls sideways (fading at the edge) instead of pushing the page wider;
   the person's name is hidden, Sign out stays. */
@media (max-width: 900px) {
  .topbar { gap: 12px; padding: 0 12px; }
  .topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .topbar nav.more { mask-image: linear-gradient(to right, #000 85%, transparent); }  /* app.js: more to the right */
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; flex-shrink: 0; }
  .topbar .who > span { display: none; }
}

/* Notification bell (docs/rules/status-and-notifications.md rule 7a): open flags for you or your teams. */
.topbar .bell { position: relative; }
.topbar .bell > summary { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; background: none;
  color: var(--brand-text); border-radius: 6px; }
.topbar .bell > summary:hover, .topbar .bell[open] > summary { background: rgba(255,255,255,.12); }
.bell-count { min-width: 1.4em; padding: 0 5px; border-radius: 9px; background: #f04438; color: #fff; font-size: .75rem;
  line-height: 1.4em; text-align: center; }
.topbar .bell-menu { right: 0; left: auto; width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; padding: 0; gap: 0;
  color: var(--text); background: var(--surface); }
.bell-head { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bell-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.bell-item form { margin: 0; }
.bell-item button.link { color: var(--accent); }
.topbar .bell-menu a.bell-link { flex: 1; display: grid; gap: 2px; color: var(--text); }
.topbar .bell-menu a.bell-link:hover { text-decoration: none; }
.bell-item:hover { background: var(--accent-soft); }
.bell-note { font-size: .875rem; }
.bell-meta { font-size: .8rem; color: var(--muted); }
.bell-empty { padding: 12px; margin: 0; }
.bell-head form { margin: 0; }
.bell-head button.link { color: var(--accent); }
.bell-item.unread { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.bell-item.unread .bell-job { font-weight: 600; }
.bell-item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px;
  vertical-align: middle; }
.flag-mark { color: var(--warn); }
.topbar .bell-menu a.bell-all { display: block; padding: 10px 12px; text-align: center; color: var(--accent); }