/* theme.css — day/night overrides.
   Default (no class) = night, matches existing inline CSS.
   body.day = light palette via higher-specificity overrides. */

/* Theme toggle button (both modes) */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #ccc;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1000;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.theme-toggle:hover {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
body.day .theme-toggle {
  border-color: rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  color: #444;
}
body.day .theme-toggle:hover {
  border-color: rgba(0,0,0,0.3);
  color: #000;
}

/* Weather line (index only, but class lives here) */
.weather-line {
  font-size: 10px;
  color: #888;
  font-weight: 300;
  letter-spacing: 0.12em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
body.day .weather-line { color: #666; }

/* ============ DAY MODE OVERRIDES ============ */

body.day { background: #f4f4f4; color: #1a1a1a; }

/* --- Header / general text --- */
body.day .header h1 { color: #333; }
body.day .header .bar { background: #bbb; }
body.day .header .time { color: #666; }
body.day .header .eyebrow { color: #666; }
body.day .header .sub { color: #666; }
body.day .back-link { color: #666; }
body.day .back-link:hover { color: #222; }
body.day .back { color: #666; }
body.day .back:hover { color: #222; }

/* --- Tile --- */
body.day .tile {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
}
body.day .tile:hover { border-color: rgba(0,0,0,0.18); }
body.day .tile-name { color: #555; }
body.day .tile-link:hover .tile-name,
body.day .tile-header-link:hover .tile-name { color: #000; }
body.day .status-dot { background: #ccc; }

/* --- Metric / unit / range --- */
body.day .metric { color: #111; }
body.day .unit { color: #666; }
body.day .range-line { color: #111; }
body.day .range-line .range-sep { color: #aaa; }
body.day .range-line .range-full { color: #666; }
body.day .range-line .range-unit { color: #666; }
body.day .range-sub { color: #666; }

/* --- Details / stats --- */
body.day .details { border-top-color: rgba(0,0,0,0.08); }
body.day .detail-item .val { color: #222; }
body.day .detail-item .lbl { color: #666; }
body.day .stat-label { color: #666; }
body.day .stat-value { color: #111; }
body.day .stat-value .dim { color: #999; }

/* --- Mini chart / bars --- */
body.day .mini-chart .bar { background: rgba(0,0,0,0.08); }
body.day .tile:hover .mini-chart .bar { background: rgba(0,0,0,0.14); }

/* --- Tile charts / sparklines --- */
body.day .tile-charts { border-top-color: rgba(0,0,0,0.08); }
body.day .time-btn {
  border-color: rgba(0,0,0,0.1);
  color: #666;
}
body.day .time-btn:hover { color: #222; border-color: rgba(0,0,0,0.25); }
body.day .chart-block .chart-label { color: #666; }
body.day .chart-block .chart-meta { color: #666; }
body.day .sparkline line.grid { stroke: rgba(0,0,0,0.18); }
body.day .chart-overlay .pt-label {
  color: #111;
  background: rgba(255,255,255,0.85);
}
body.day .chart-overlay .pt-label.faded { color: #666; }
body.day .chart-overlay .grid-tick { color: #666; }

/* --- Teaching tile / page --- */
body.day .teaching-summary-inline { color: #666; }
body.day .teaching-course-head .name { color: #222; }
body.day .teaching-course-head .name .weekday { color: #888; }
body.day .teaching-course-head .stats { color: #888; }
body.day .week-cell {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
  color: #888;
}
body.day .week-cell:hover { background: rgba(0,0,0,0.06); }
body.day .week-cell .w-date { color: #888; }
body.day .week-cell.taught-with-slide {
  background: rgba(90,173,122,0.14);
  border-color: rgba(90,173,122,0.35);
  color: #2e6b48;
}
body.day .week-cell.taught-with-slide .w-date { color: #3e7e56; }
body.day .week-cell.taught-no-slide {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
  color: #555;
}
body.day .week-cell.taught-no-slide .w-date { color: #777; }
body.day .week-cell.special {
  background: rgba(180,140,80,0.14);
  border-color: rgba(180,140,80,0.35);
  color: #6b5025;
}
body.day .week-cell.special .w-date { color: #8a6b3a; }
body.day .legend { color: #666; }
body.day .legend-swatch { border-color: rgba(0,0,0,0.1); }
body.day .legend-swatch.no-slide { background: rgba(0,0,0,0.08); }
body.day .legend-swatch.future { background: rgba(0,0,0,0.02); }
body.day .course-block { border-top-color: rgba(0,0,0,0.1); }

/* --- Tire schematic --- */
body.day .tire-schematic .label-pos { fill: #888; }
body.day .tire-schematic .label-psi { fill: #222; }
body.day .tire-schematic .label-mark { fill: #bbb; }
body.day .tire-schematic .body-outline {
  fill: rgba(0,0,0,0.025);
  stroke: rgba(0,0,0,0.32);
}
body.day .tire-schematic .glass {
  fill: rgba(0,0,0,0.05);
  stroke: rgba(0,0,0,0.18);
}
body.day .tire-schematic .accent { fill: rgba(0,0,0,0.12); }
body.day .tire-schematic .body-line { stroke: rgba(0,0,0,0.18); }

/* --- Trips / tables --- */
body.day .trips-section { border-top-color: rgba(0,0,0,0.08); }
body.day .trips-select {
  border-color: rgba(0,0,0,0.12);
  color: #666;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
}
body.day .trip-group-header { border-bottom-color: rgba(0,0,0,0.08); }
body.day .trip-group-header .dest { color: #333; }
body.day .trip-group-header .meta { color: #888; }
body.day a.trip-row:hover { background: rgba(0,0,0,0.03); }
body.day .trip-row .date { color: #666; }
body.day .trip-row .stats { color: #666; }
body.day .trip-row .bar-cell { background: rgba(0,0,0,0.06); }
body.day .trip-row .wh { color: #222; }

/* --- PSI corr --- */
body.day .corr-r-inline { color: #666; }

/* --- Umi stat page / tile --- */
body.day .umi-spark-wrap { border-top-color: rgba(0,0,0,0.08); }
body.day .umi-spark-label { color: #666; }
body.day .umi-spark-bars .spark-bar { background: #3b8a5e; }
body.day .stat-cell .stat-val { color: #111; }
body.day .stat-cell .stat-sub { color: #666; }
body.day .header h1 .h1-model { color: #666; }
body.day .plan-big-row .label { color: #666; }
body.day .plan-big-row .track { background: rgba(0,0,0,0.06); }
body.day .plan-big-row .meta { color: #444; }
body.day .plan-big-row .meta .pct { color: #111; }
body.day .daily-chart { border-bottom-color: rgba(0,0,0,0.1); }
body.day .daily-col .day-tick { color: #888; }
body.day .daily-col .tooltip {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.1);
  color: #222;
}
body.day .daily-col .tooltip strong { color: #000; }
body.day .heat-cell { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }
body.day .heat-cell.level-0 { background: rgba(59,138,94,0.1); border-color: rgba(59,138,94,0.15); }
body.day .heat-cell.level-1 { background: rgba(59,138,94,0.3); border-color: rgba(59,138,94,0.4); }
body.day .heat-cell.level-2 { background: rgba(59,138,94,0.55); border-color: rgba(59,138,94,0.65); }
body.day .heat-cell.level-3 { background: rgba(59,138,94,0.8); border-color: rgba(59,138,94,0.9); }
body.day .heat-cell.level-4 { background: #2e6b48; border-color: #3b8a5e; }
body.day .heat-cell .tooltip {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.1);
  color: #222;
}
body.day .heatmap-days span { color: #888; }

/* --- Conn status --- */
body.day .conn-status { color: #666; }

/* --- Sat-fest table --- */
body.day table { color: #1a1a1a; }
body.day table th, body.day table td {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* --- Teaching standalone page --- */
body.day .legend { color: #555; }
body.day .tab-bar { border-bottom-color: rgba(0,0,0,0.1); }
body.day .tab-btn { color: #666; }
body.day .tab-btn:hover { color: #222; }
body.day .tab-btn.active { color: #111; border-bottom-color: #5aad7a; }
body.day .tab-btn .tab-sem { color: #888; }
body.day .tab-btn.active .tab-sem { color: #555; }
body.day .course-title { color: #000; font-weight: 500; }
body.day .course-weekday { color: #888; }
body.day .course-stats { color: #444; }
body.day .course-stats strong { color: #000; }
body.day .week-list { border-top-color: rgba(0,0,0,0.1); }
body.day .week-row { border-bottom-color: rgba(0,0,0,0.06); }
body.day .wk-n { color: #333; }
body.day .week-row.current .wk-n { color: #2e6b48; }
body.day .wk-date { color: #555; }
body.day .wk-topic { color: #000; font-weight: 400; }
body.day .wk-note { color: #555; }
body.day .week-row.future { opacity: 0.6; }
body.day .week-row.future .wk-topic { color: #222; }
body.day .wk-slide a { color: #2e6b48; border-color: rgba(46,107,72,0.3); }
body.day .wk-slide a:hover { background: rgba(90,173,122,0.1); border-color: rgba(46,107,72,0.5); }
body.day .wk-slide .no-slide { color: #888; }
body.day .week-cell.future { opacity: 0.55; }

/* --- Todo tile (homepage) --- */
body.day .todo-summary-inline { color: #555; }
body.day .todo-row { color: #444; }
body.day .todo-row:hover { background: rgba(0,0,0,0.04); color: #000; }
body.day .todo-row .check { border-color: rgba(0,0,0,0.25); }
body.day .todo-row:hover .check { border-color: rgba(46,107,72,0.7); background: rgba(90,173,122,0.18); }
body.day .todo-row .pri.pri-high { color: #a04545; border-color: rgba(160,69,69,0.4); }
body.day .todo-row .pri.pri-medium { color: #8a6b3a; border-color: rgba(138,107,58,0.4); }
body.day .todo-row .pri.pri-low { color: #666; border-color: rgba(0,0,0,0.18); }
body.day .todo-row .due { color: #666; }
body.day .todo-row .due.overdue { color: #a04545; }
body.day .todo-row .due.today { color: #2e6b48; }
body.day .todo-row .title { color: #222; }
body.day .todo-see-all { color: #666; }
body.day .todo-see-all:hover { color: #000; }

/* --- Todo standalone page --- */
body.day .summary { color: #555; }
body.day .summary .stat strong { color: #111; }
body.day .filters { border-bottom-color: rgba(0,0,0,0.08); }
body.day .filter-btn { color: #555; border-color: rgba(0,0,0,0.12); }
body.day .filter-btn:hover { color: #111; border-color: rgba(0,0,0,0.25); }
body.day .filter-btn.active { color: #2e6b48; background: rgba(90,173,122,0.12); border-color: rgba(46,107,72,0.4); }
body.day .group-head { color: #666; }
body.day .todo-row .check { border-color: rgba(0,0,0,0.25); }
body.day .todo-row.done .check { background: rgba(90,173,122,0.3); border-color: rgba(46,107,72,0.6); }
body.day .todo-row.done .check::after { color: #2e6b48; }
body.day .pri.pri-high { color: #a04545; border-color: rgba(160,69,69,0.4); }
body.day .pri.pri-medium { color: #8a6b3a; border-color: rgba(138,107,58,0.4); }
body.day .pri.pri-low { color: #666; border-color: rgba(0,0,0,0.18); }
body.day .due, body.day .created { color: #666; }
body.day .due.overdue { color: #a04545; }
body.day .due.today { color: #2e6b48; }
body.day .title-line { color: #1a1a1a; }
body.day .body-line { color: #555; }
body.day .empty { color: #999; }

/* --- Todo confirm modal (both pages) --- */
body.day .todo-modal-backdrop, body.day .modal-backdrop { background: rgba(0,0,0,0.4); }
body.day .todo-modal, body.day .modal {
  background: #ffffff; border-color: rgba(0,0,0,0.1); color: #1a1a1a;
}
body.day .todo-modal h3, body.day .modal h3 { color: #222; }
body.day .todo-modal .diff-label, body.day .modal .diff-label { color: #666; }
body.day .todo-modal .diff-line, body.day .modal .diff-line {
  background: rgba(0,0,0,0.04); color: #222;
}
body.day .todo-modal textarea, body.day .modal textarea {
  background: #fafafa; color: #1a1a1a; border-color: rgba(0,0,0,0.15);
}
body.day .todo-modal textarea:focus, body.day .modal textarea:focus { border-color: rgba(46,107,72,0.5); }
body.day .todo-modal button, body.day .modal button {
  border-color: rgba(0,0,0,0.15); color: #444;
}
body.day .todo-modal button:hover, body.day .modal button:hover { background: rgba(0,0,0,0.05); color: #000; }
body.day .todo-modal button.primary, body.day .modal button.primary {
  background: rgba(90,173,122,0.18); border-color: rgba(46,107,72,0.5); color: #2e6b48;
}
body.day .todo-modal button.primary:hover, body.day .modal button.primary:hover {
  background: rgba(90,173,122,0.3); color: #000;
}

/* --- QR page (/qr.html) ---
   Scoped under .qr: the generic class names here (.chip, .preview, .readout)
   also exist in console.css on the gen-2 sketch pages, which load this file. */
body.day .qr .field-label { color: #666; }
body.day .qr textarea#url {
  background: #fafafa; color: #1a1a1a; border-color: rgba(0,0,0,0.15);
}
body.day .qr textarea#url:focus { border-color: rgba(46,107,72,0.5); }
body.day .qr .chip { color: #555; border-color: rgba(0,0,0,0.12); }
body.day .qr .chip:hover { color: #111; border-color: rgba(0,0,0,0.25); }
body.day .qr .chip.on { color: #2e6b48; background: rgba(90,173,122,0.12); border-color: rgba(46,107,72,0.4); }
body.day .qr .chip-note { color: #888; }
body.day .qr .swatch-label { color: #555; }
body.day .qr input[type=number] {
  background: #fafafa; color: #1a1a1a; border-color: rgba(0,0,0,0.15);
}
body.day .qr input[type=color] { border-color: rgba(0,0,0,0.2); }
body.day .qr .preview {
  border-color: rgba(0,0,0,0.1);
  background-color: rgba(0,0,0,0.015);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%);
}
body.day .qr .readout { color: #555; }
body.day .qr .readout .k { color: #999; }
body.day .qr .hint { color: #666; }
body.day .qr .hint code { color: #444; background: rgba(0,0,0,0.05); }
body.day .qr .err { color: #a04545; }