/* =====================================================================
   Breezy Tips dark mode. Active when <html> has the class bt-dark
   (set before the page draws from the device's saved choice, or the phone's own setting).
   Loaded after theme.css; every rule starts with html.bt-dark so it wins over the light theme.
   ===================================================================== */

/* ---------- the light/dark switch (both modes) ---------- */
.bt-theme {
  width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--bt-line, #e2e8f0); background: var(--bt-soft, #f1f5f9); color: #475569; box-shadow: none;
  -webkit-tap-highlight-color: transparent; transition: transform .08s, background .15s;
}
.bt-app .bt-theme { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: var(--bt-soft); color: #475569; border: 1px solid var(--bt-line); box-shadow: none; }
.bt-theme:active { transform: scale(.94); }
.bt-theme .bt-sun { display: none; }
html.bt-dark .bt-theme .bt-sun { display: block; }
html.bt-dark .bt-theme .bt-moon { display: none; }
html.bt-dark .bt-app .bt-theme { background: #1e293b; color: #fbbf24; border-color: #334155; }

/* ---------- palette ---------- */
html.bt-dark {
  color-scheme: dark;   /* dark date pickers, scrollbars, checkboxes */
  --bt-ink: #e6ebf3;
  --bt-ink-2: #c3cbd9;
  --bt-mute: #8d99ae;
  --bt-line: #283449;
  --bt-soft: #1a2436;
  --bt-card: #111a2b;
  --bt-ok-bg: rgba(34, 197, 94, .14);  --bt-ok: #86efac;
  --bt-err-bg: rgba(239, 68, 68, .16); --bt-err: #fca5a5;
  --bt-warn-bg: rgba(245, 158, 11, .15); --bt-warn: #fcd34d;
  --bt-info-bg: rgba(14, 165, 233, .15); --bt-info: #7dd3fc;
  --bt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
  --bt-focus: 0 0 0 3px rgba(96, 165, 250, .35);
  --tp-ink: #e6ebf3; --tp-mute: #8d99ae; --tp-line: #283449; --tp-bg: #0b1220;
  --dk-bg: #0b1220; --dk-card: #111a2b; --dk-raise: #162133; --dk-soft: #1a2436; --dk-line: #283449; --dk-line-2: #1f2a3d;
  --dk-blue-bg: rgba(59, 130, 246, .14); --dk-blue-line: rgba(96, 165, 250, .35); --dk-blue-ink: #93c5fd;
  --dk-amber-bg: rgba(245, 158, 11, .13); --dk-amber-line: rgba(251, 191, 36, .35); --dk-amber-ink: #fcd34d;
  --dk-red-bg: rgba(239, 68, 68, .14); --dk-red-line: rgba(248, 113, 113, .38); --dk-red-ink: #fca5a5;
  --dk-green-bg: rgba(34, 197, 94, .13); --dk-green-line: rgba(74, 222, 128, .35); --dk-green-ink: #86efac;
  --dk-violet-bg: rgba(139, 92, 246, .16); --dk-violet-ink: #c4b5fd;
  background: #0b1220;
}

/* ---------- page + top bar ---------- */
html.bt-dark body.bt-app, html.bt-dark body.tp-page, html.bt-dark body {
  color: var(--bt-ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(14, 165, 233, .10), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(79, 70, 229, .12), transparent 60%),
    #0b1220;
  background-attachment: fixed;
}
html.bt-dark .bt-topbar { background: rgba(11, 18, 32, .82); border-bottom-color: rgba(40, 52, 73, .9); }
html.bt-dark .bt-topnav a { background: #1a2436; color: #c3cbd9; }
html.bt-dark .bt-topnav a:hover { background: #24314a; }
html.bt-dark .bt-back { color: #93c5fd; }
html.bt-dark .bt-back:hover, html.bt-dark .bt-back:active { background: #1a2436; }

/* ---------- containers + type ---------- */
html.bt-dark .bt-app .card, html.bt-dark .bt-app .tp-card { background: var(--dk-card); border-color: var(--dk-line); }
html.bt-dark .bt-app .card .card { background: var(--dk-raise); }
html.bt-dark .bt-app .section, html.bt-dark .bt-app .box, html.bt-dark .bt-app .panel, html.bt-dark .bt-app details, html.bt-dark .bt-app fieldset { background-color: transparent; border-color: var(--dk-line); }
html.bt-dark .bt-app .section { background: rgba(255, 255, 255, .02); }
html.bt-dark .bt-app h1, html.bt-dark .bt-app h2, html.bt-dark .bt-app h3, html.bt-dark .bt-app h4,
html.bt-dark .bt-app label, html.bt-dark .bt-app strong, html.bt-dark .bt-app b, html.bt-dark .bt-app td, html.bt-dark .bt-app li, html.bt-dark .bt-app p,
html.bt-dark .bt-app summary, html.bt-dark .bt-app dt, html.bt-dark .bt-app dd { color: inherit; }
html.bt-dark .bt-app h1, html.bt-dark .bt-app h2 { color: var(--bt-ink); }
html.bt-dark .bt-app .tp-card h2, html.bt-dark .bt-app .section-title { color: var(--bt-mute); }
html.bt-dark a { color: #7fb2ff; }   /* low priority on purpose: button-style links keep their own colours */
html.bt-dark .bt-brand { color: var(--bt-ink); }
html.bt-dark .bt-app .muted, html.bt-dark .bt-app .help, html.bt-dark .bt-app .hint, html.bt-dark .bt-app small, html.bt-dark .bt-app .subtitle,
html.bt-dark .bt-app .tp-sub, html.bt-dark .bt-app .date-label, html.bt-dark .bt-app .note { color: var(--bt-mute); }
html.bt-dark .bt-app hr { border-color: var(--dk-line); }
html.bt-dark .bt-app code { background: var(--dk-soft); color: var(--bt-ink); }

/* ---------- messages ---------- */
html.bt-dark .bt-app .msg-ok, html.bt-dark .bt-app .tp-ok { background: var(--dk-green-bg); color: var(--dk-green-ink); border-color: var(--dk-green-line); }
html.bt-dark .bt-app .msg-err, html.bt-dark .bt-app .error, html.bt-dark .bt-app .tp-err { background: var(--dk-red-bg); color: var(--dk-red-ink); border-color: var(--dk-red-line); }
html.bt-dark .bt-app .msg-warn { background: var(--dk-amber-bg); color: var(--dk-amber-ink); border-color: var(--dk-amber-line); }
html.bt-dark .bt-app .msg-info, html.bt-dark .bt-app .notice, html.bt-dark .bt-app .bt-msg-info { background: var(--dk-blue-bg); color: var(--dk-blue-ink); border-color: var(--dk-blue-line); }

/* ---------- form fields ---------- */
html.bt-dark .bt-app input[type=text], html.bt-dark .bt-app input[type=email], html.bt-dark .bt-app input[type=password], html.bt-dark .bt-app input[type=number],
html.bt-dark .bt-app input[type=date], html.bt-dark .bt-app input[type=time], html.bt-dark .bt-app input[type=datetime-local], html.bt-dark .bt-app input[type=tel],
html.bt-dark .bt-app input[type=search], html.bt-dark .bt-app input:not([type]), html.bt-dark .bt-app select, html.bt-dark .bt-app textarea {
  background-color: #0f1828; color: var(--bt-ink); border-color: #2c3a52;
}
html.bt-dark .bt-app input::placeholder, html.bt-dark .bt-app textarea::placeholder { color: #66748c; }
html.bt-dark .bt-app input:disabled, html.bt-dark .bt-app select:disabled { background-color: #151f31; color: #7b879c; }
html.bt-dark .bt-app select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
html.bt-dark .bt-app input[type=file] { background: #0f1828; border-color: #3b4a6b; color: var(--bt-ink-2); }
html.bt-dark .bt-app .tp-field input, html.bt-dark .bt-app .tp-field select { background-color: #0f1828; color: var(--bt-ink); border-color: #2c3a52; }

/* ---------- buttons ---------- */
html.bt-dark .bt-app button.secondary, html.bt-dark .bt-app .btn.secondary, html.bt-dark .bt-app .tp-secondary, html.bt-dark .bt-app a.secondary {
  background: var(--dk-soft); color: var(--bt-ink); border-color: var(--dk-line);
}
html.bt-dark .bt-app .tp-link, html.bt-dark .bt-app button.link { background: none; color: #7fb2ff; border: 0; }
html.bt-dark .bt-app .tp-danger-link { color: #fca5a5; }
html.bt-dark .bt-app .action-grid a.secondary { background: var(--dk-raise); color: var(--bt-ink); border-color: var(--dk-line); box-shadow: none; }
html.bt-dark .bt-app .action-grid a.secondary:hover { background: #1b2840; border-color: #3b4a6b; }
html.bt-dark .bt-app .bt-switch-hot { border-color: var(--dk-blue-line) !important; background: linear-gradient(180deg, rgba(59, 130, 246, .16), var(--dk-raise)) !important; }
html.bt-dark .bt-app .footer-link a, html.bt-dark .bt-app .links a, html.bt-dark .bt-app .bt-links a { background: var(--dk-soft); color: var(--bt-ink); border-color: var(--dk-line); }
html.bt-dark .bt-app .tp-chip span { background: #0f1828; border-color: #2c3a52; color: var(--bt-ink-2); }
html.bt-dark .bt-app .tp-chip input:checked + span { background: var(--dk-blue-bg); border-color: #60a5fa; color: #bfdbfe; }

/* ---------- tables ---------- */
html.bt-dark .bt-app table { background: transparent; color: var(--bt-ink); }
html.bt-dark .bt-app .bt-scroll, html.bt-dark .bt-app .table-wrap { background: var(--dk-card); border-color: var(--dk-line); }
html.bt-dark .bt-app th { background: #152033; color: var(--bt-mute); border-color: var(--dk-line); }
html.bt-dark .bt-app td { border-bottom-color: var(--dk-line-2); }
html.bt-dark .bt-app tbody tr:hover td { background: rgba(255, 255, 255, .025); }
html.bt-dark .bt-app tr:has(td) > th { background: transparent; color: var(--bt-ink-2); }
html.bt-dark .bt-app tfoot td, html.bt-dark .bt-app tr.total td, html.bt-dark .bt-app tr.totals td { background: #152033; }
html.bt-dark .bt-app .stat-row { border-bottom-color: var(--dk-line-2); }

/* ---------- pills / badges ---------- */
html.bt-dark .bt-app .badge { background: rgba(99, 102, 241, .2); color: #c7d2fe; }
html.bt-dark .bt-app .pill-red, html.bt-dark .bt-app .pill.todo { background: var(--dk-red-bg); color: var(--dk-red-ink); }
html.bt-dark .bt-app .pill.wait { background: var(--dk-amber-bg); color: var(--dk-amber-ink); }
html.bt-dark .bt-app .pill.ok, html.bt-dark .bt-app .pill-green { background: var(--dk-green-bg); color: var(--dk-green-ink); }
html.bt-dark .bt-app .pill-optout { background: var(--dk-amber-bg); color: var(--dk-amber-ink); }

/* ---------- keypad, switches, misc controls ---------- */
html.bt-dark .bt-app .bt-keypad button, html.bt-dark .bt-app .pin-keypad button, html.bt-dark .bt-app .keypad button {
  background: var(--dk-raise); color: var(--bt-ink); border-color: var(--dk-line); box-shadow: 0 2px 0 #0a1120;
}
html.bt-dark .bt-app .bt-keypad button:active, html.bt-dark .bt-app .pin-keypad button:active, html.bt-dark .bt-app .keypad button:active { background: #1e2a44; }
html.bt-dark .bt-app .switch { background: #24314a; color: var(--bt-ink-2); }
html.bt-dark .bt-app .switch .switch-thumb { background: #e6ebf3; }
html.bt-dark .bt-app .bt-passkey-row { border-bottom-color: var(--dk-line-2); }
html.bt-dark .bt-music.off { background: #1a2436 !important; color: #94a3b8 !important; border-color: #334155 !important; }

/* ---------- Start/End Shift, tips ---------- */
html.bt-dark .tp-modal { background: var(--dk-card); color: var(--bt-ink); border: 1px solid var(--dk-line); }
html.bt-dark .tp-modal-backdrop:not(.tp-inline) { background: rgba(2, 6, 15, .65); }
html.bt-dark .tp-clock .tp-time, html.bt-dark .tp-time { background: var(--dk-blue-bg); color: #dbeafe; }
html.bt-dark .bt-app .tp-step { background: var(--dk-raise); color: var(--bt-ink-2); border-color: var(--dk-line); }
html.bt-dark .bt-app .tp-close { background: var(--dk-soft); color: #cbd5e1; }
html.bt-dark .bt-app .tipfield { background: var(--dk-raise); border-color: var(--dk-line); }
html.bt-dark .bt-app .tipfield:nth-child(n+3) { background: #141e30; }
html.bt-dark .bt-app .signbtn { background: var(--dk-green-bg); border-color: var(--dk-green-line); color: #86efac; }
html.bt-dark .bt-app .signbtn.neg { background: var(--dk-red-bg); border-color: var(--dk-red-line); color: #fca5a5; }
html.bt-dark .tp-sched-hint, html.bt-dark .bt-app .tp-sched-hint { background: var(--dk-blue-bg); color: #bfdbfe; }

/* ---------- feature boxes ---------- */
html.bt-dark .bt-app .bt-song, html.bt-dark .bt-app .bt-ga, html.bt-dark .bt-app .bt-sw-card, html.bt-dark .bt-app .bt-ms-day { background: var(--dk-raise); border-color: var(--dk-line); }
html.bt-dark .bt-overdue p { background: var(--dk-amber-bg); border-color: var(--dk-amber-line); color: #fde68a; }
html.bt-dark .bt-overdue p.bt-overdue-me { background: var(--dk-red-bg); border-color: var(--dk-red-line); color: #fecaca; }
html.bt-dark .bt-overdue a { color: #fbcfe8; }
html.bt-dark .bt-overdue p span { color: #fdba74; }
html.bt-dark .bt-app .bt-buyout, html.bt-dark .bt-app .bt-buyout-box { background: rgba(99, 102, 241, .12); border-color: rgba(129, 140, 248, .35); }
html.bt-dark .bt-app .bt-sw-remind, html.bt-dark .bt-app .bt-optout, html.bt-dark .bt-app .bt-sw-six { background: var(--dk-amber-bg); border-color: var(--dk-amber-line); color: #fde68a; }
html.bt-dark .bt-app .bt-sw-pending { background: var(--dk-blue-bg); border-color: var(--dk-blue-line); }
html.bt-dark .bt-app .bt-sw-done { background: var(--dk-green-bg); border-color: var(--dk-green-line); }
html.bt-dark .bt-app .bt-sw-trade { background: var(--dk-violet-bg); color: var(--dk-violet-ink); }
html.bt-dark .bt-app button.bt-sw-pick { background: #0f1828; border-color: #2c3a52; color: var(--bt-ink-2); }
html.bt-dark .bt-app button.bt-sw-pick.on { background: var(--dk-blue-bg); border-color: #60a5fa; color: #bfdbfe; }
/* schedule reader */
html.bt-dark .bt-app .bt-sch-need td { background: var(--dk-red-bg); }
html.bt-dark .bt-app .bt-sch-unsure td, html.bt-dark .bt-app .bt-sch-six td { background: var(--dk-amber-bg); }
html.bt-dark .bt-app .bt-sch-needtxt { color: #fca5a5; }
html.bt-dark .bt-app .bt-sch-unsuretxt { color: #fcd34d; }
html.bt-dark .bt-app .bt-sch-busy { background: var(--dk-blue-bg); color: #bfdbfe; }
html.bt-dark .bt-app .bt-sch-who { background: var(--dk-red-bg); border-color: var(--dk-red-line); }
html.bt-dark .bt-app .bt-sch-who h2 { color: #fca5a5; }
html.bt-dark .bt-app .bt-sch-ask { border-top-color: var(--dk-red-line); }
html.bt-dark .bt-app .bt-sch-del { color: #fca5a5; }
/* My Schedule */
html.bt-dark .bt-app .bt-ms-tabs { background: var(--dk-soft); }
html.bt-dark .bt-app .bt-ms-tabs a { color: var(--bt-mute); }
html.bt-dark .bt-app .bt-ms-tabs a.on { background: var(--dk-raise); color: #93c5fd; box-shadow: none; }
html.bt-dark .bt-app .bt-ms-day.bt-ms-mine { background: #13203a; border-color: var(--dk-blue-line); }
html.bt-dark .bt-app .bt-ms-day.bt-ms-today { box-shadow: 0 0 0 2px rgba(96, 165, 250, .55) inset; }
html.bt-dark .bt-app .bt-ms-date { background: var(--dk-blue-bg); color: #bfdbfe; }
html.bt-dark .bt-app .bt-ms-off { background: var(--dk-soft); color: var(--bt-mute); }
html.bt-dark .bt-app .bt-ms-person { background: var(--dk-soft); color: var(--bt-ink); }
html.bt-dark .bt-app .bt-ms-person.me { background: var(--dk-blue-bg); color: #bfdbfe; }
html.bt-dark .bt-app .bt-ms-person small { color: var(--bt-mute); }
/* seasons / users badges */
html.bt-dark .bt-app .badge.on { background: var(--dk-green-bg); color: var(--dk-green-ink); }
html.bt-dark .bt-app .badge.ongoing, html.bt-dark .bt-app .badge-admin { background: var(--dk-blue-bg); color: #bfdbfe; }
html.bt-dark .bt-app .badge-owner { background: var(--dk-violet-bg); color: var(--dk-violet-ink); }
html.bt-dark .bt-app .badge-disabled { background: var(--dk-soft); color: var(--bt-mute); }
html.bt-dark .bt-app .season-endbox { background: var(--dk-blue-bg); border-color: var(--dk-blue-line); }
html.bt-dark .bt-app .season-endrow label { color: var(--bt-ink-2); }

@media print { html.bt-dark body.bt-app { background: #fff; color: #000; } }

/* ---------- from the first dark-mode sweep ---------- */
html.bt-dark .bt-app .bt-ga-tag { background: var(--dk-blue-bg); color: #bfdbfe; }
html.bt-dark .bt-app .bt-ga-ico { color: #93c5fd; }
html.bt-dark .tp-time span, html.bt-dark .bt-app .tp-time span { color: #93c5fd; }
html.bt-dark .bt-app .tp-tabs { background: var(--dk-soft); }
html.bt-dark .bt-app .tp-tabs a { color: var(--bt-mute); }
html.bt-dark .bt-app .tp-tabs a.on { background: var(--dk-raise); color: #93c5fd; box-shadow: none; }
html.bt-dark .bt-app .totals { color: var(--bt-ink-2); }
html.bt-dark .bt-app .tp-appcard { background: linear-gradient(135deg, rgba(59, 130, 246, .14), rgba(139, 92, 246, .12)); border-color: var(--dk-blue-line); color: var(--bt-ink); }
html.bt-dark .bt-app .tp-pay { background: var(--dk-raise); border-color: var(--dk-line); }
html.bt-dark .bt-app .tp-pay.done { background: var(--dk-green-bg); border-color: var(--dk-green-line); }
html.bt-dark .bt-app .tp-night { background: rgba(255, 255, 255, .02); border-color: var(--dk-line); }
html.bt-dark .bt-app .tiplabel { color: var(--bt-ink-2); }
html.bt-dark .bt-app .tiptotal { color: #fff; }
html.bt-dark .bt-app input[type=checkbox], html.bt-dark .bt-app input[type=radio] { background-color: transparent; }
html.bt-dark .bt-app .bt-sch-dayoff td { background: #131c2b; }
html.bt-dark .bt-app .bt-sch-offtag, html.bt-dark .bt-app .bt-ms-offlabel { background: #243248; color: #cbd5e1; }
html.bt-dark .bt-app .bt-sch-offline, html.bt-dark .bt-app .bt-ms-offlist { color: #9fb0c8; }