/*!
 * MedPrep UI layer — dark mode + focus mode
 * Pair with medprep-ui.js. Load AFTER the Tailwind CDN script.
 *
 * How dark mode works here:
 *  1. Existing pages (hard-coded bg-white, border-brand-100, text-ink ...) are re-themed
 *     by the "compat layer" below, so you do NOT have to touch every class.
 *  2. New components use real Tailwind `dark:` variants (needs  darkMode: 'class'  in tailwind.config).
 *     The compat layer skips any element that already declares a matching `dark:bg-` / `dark:text-` /
 *     `dark:border-` utility, so the two never fight.
 */

/* ---------- 1. Design tokens ---------- */
:root {
  --mp-bg: #F3F7FB;
  --mp-surface: #FFFFFF;
  --mp-surface-2: #EEF5FC;
  --mp-border: #DCEBF8;
  --mp-text: #0B2540;
  --mp-muted: #64748B;
  --mp-link: #0F5CA8;
}
html.dark {
  --mp-bg: #0A1120;
  --mp-surface: #101A2E;
  --mp-surface-2: #16223A;
  --mp-border: #22314D;
  --mp-text: #E5ECF6;
  --mp-muted: #93A4BD;
  --mp-link: #7DB8F5;
  color-scheme: dark;
}

/* ---------- 2. Smooth theme switch (class is added for ~350ms only, so it never slows normal UI) ---------- */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ---------- 3. Compat layer: re-theme legacy light-only classes ---------- */
html.dark body { background: var(--mp-bg); color: var(--mp-text); }

/* surfaces */
html.dark :is(.bg-white, .bg-white\/95, .bg-white\/90):not([class*="dark:bg-"]) { background-color: var(--mp-surface); }
html.dark :is(.bg-surface, .bg-brand-50, .bg-blue-50, .bg-slate-50, .hover\:bg-brand-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-white:hover):not([class*="dark:bg-"]) { background-color: var(--mp-surface-2); }
html.dark :is(.bg-brand-100, .bg-slate-100, .bg-slate-200):not([class*="dark:bg-"]) { background-color: #22314D; }
html.dark .bg-teal-soft:not([class*="dark:bg-"]) { background-color: rgba(14, 159, 154, .18); }
html.dark :is(.bg-emerald-50, .bg-emerald-100):not([class*="dark:bg-"]) { background-color: rgba(16, 185, 129, .14); }
html.dark :is(.bg-rose-50, .bg-rose-100, .hover\:bg-rose-50:hover):not([class*="dark:bg-"]) { background-color: rgba(244, 63, 94, .14); }
html.dark :is(.bg-amber-50, .bg-amber-100):not([class*="dark:bg-"]) { background-color: rgba(245, 158, 11, .16); }

/* borders & rings */
html.dark :is(.border-brand-100, .border-slate-100, .border-slate-200):not([class*="dark:border-"]) { border-color: var(--mp-border); }
html.dark :is(.border-brand-200, .border-slate-300):not([class*="dark:border-"]) { border-color: #2F4468; }
html.dark .border-emerald-300:not([class*="dark:border-"]) { border-color: rgba(52, 211, 153, .45); }
html.dark .border-rose-300:not([class*="dark:border-"]) { border-color: rgba(251, 113, 133, .45); }
html.dark .ring-brand-100:not([class*="dark:ring-"]) { --tw-ring-color: var(--mp-border); }

/* text */
html.dark :is(.text-ink, .text-slate-900, .text-slate-800, .hover\:text-slate-900:hover):not([class*="dark:text-"]) { color: var(--mp-text); }
html.dark :is(.text-slate-700, .text-slate-600):not([class*="dark:text-"]) { color: #B7C3D6; }
html.dark :is(.text-slate-500, .text-slate-400):not([class*="dark:text-"]) { color: var(--mp-muted); }
html.dark :is(.text-brand-600, .text-brand-700, .text-blue-600, .hover\:text-brand-600:hover):not([class*="dark:text-"]) { color: var(--mp-link); }
html.dark .text-brand-900:not([class*="dark:text-"]) { color: #DCEBF8; }
html.dark :is(.text-emerald-600, .text-emerald-700, .text-emerald-800):not([class*="dark:text-"]) { color: #6EE7B7; }
html.dark :is(.text-rose-600, .text-rose-700, .text-rose-800):not([class*="dark:text-"]) { color: #FDA4AF; }
html.dark :is(.text-amber-700, .text-amber-800, .text-amber-900):not([class*="dark:text-"]) { color: #FCD34D; }

/* form controls and native dialogs */
html.dark :is(input, select, textarea, .field):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--mp-surface-2); color: var(--mp-text); border-color: var(--mp-border);
}
html.dark dialog { background: var(--mp-surface); color: var(--mp-text); }
html.dark ::placeholder { color: #6E7F99; }

/* ---------- 4. Toggle buttons (injected by medprep-ui.js, or add [data-theme-toggle] / [data-focus-toggle] yourself) ---------- */
.mp-tools { display: inline-flex; align-items: center; gap: .25rem; }
.mp-icon-btn {
  display: inline-grid; place-items: center; height: 2.25rem; min-width: 2.25rem; padding: 0 .5rem; gap: .4rem;
  grid-auto-flow: column; border-radius: .5rem; color: #475569; background: transparent; font: 600 .8125rem/1 inherit;
  cursor: pointer; border: 0; transition: background-color .15s, color .15s;
}
.mp-icon-btn:hover { background: var(--mp-surface-2); color: var(--mp-text); }
.mp-icon-btn[aria-pressed="true"][data-focus-toggle] { background: var(--mp-surface-2); color: var(--mp-link); }
.mp-icon-btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
html.dark .mp-icon-btn { color: #B7C3D6; }
html.dark .mp-icon-btn:hover { color: var(--mp-text); }
.mp-icon-btn .mp-label { display: none; }
@media (min-width: 640px) { .mp-icon-btn[data-focus-toggle] .mp-label { display: inline; } }

/* sun / moon swap with a little spin */
.mp-icon-btn .mp-sun, .mp-icon-btn .mp-moon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.mp-icon-btn .mp-moon { display: none; }
html.dark .mp-icon-btn .mp-sun { display: none; }
html.dark .mp-icon-btn .mp-moon { display: block; }
.mp-icon-btn:active .mp-sun, .mp-icon-btn:active .mp-moon { transform: rotate(40deg) scale(.9); }

/* floating fallback when a page has no <header> */
.mp-float { position: fixed; right: 1rem; bottom: 5.5rem; z-index: 45; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 999px; padding: .25rem; box-shadow: 0 6px 20px rgba(11, 37, 64, .15); }

/* ---------- 5. Focus mode ---------- */
html.focus-mode body > header:not([data-focus-keep]),
html.focus-mode #sidebar,
html.focus-mode #appSidebar,
html.focus-mode #navOverlay,
html.focus-mode #overlay,
html.focus-mode [data-focus-hide] { display: none !important; }

/* content reclaims the space nav.js reserved for the sidebar (and re-centres if the page uses mx-auto) */
html.focus-mode .lg\:ml-64 { margin-left: auto !important; }

/* gentle entrance so the layout change does not feel like a jump */
html.focus-mode main { animation: mp-focus-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes mp-focus-in { from { opacity: .4; transform: scale(.992); } to { opacity: 1; transform: none; } }

.mp-focus-pill {
  position: fixed; top: .75rem; right: .75rem; z-index: 60; display: none; align-items: center; gap: .6rem;
  padding: .35rem .4rem .35rem .85rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
  background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border);
  box-shadow: 0 6px 24px rgba(11, 37, 64, .14); opacity: .55; transition: opacity .2s;
}
.mp-focus-pill:hover, .mp-focus-pill:focus-within { opacity: 1; }
html.focus-mode .mp-focus-pill { display: inline-flex; }
.mp-focus-pill [data-hud]:empty { display: none; }
.mp-focus-pill [data-hud] { font-variant-numeric: tabular-nums; color: var(--mp-muted); }
.mp-focus-pill button {
  border: 0; cursor: pointer; border-radius: 999px; padding: .4rem .75rem; font: inherit;
  background: var(--mp-surface-2); color: var(--mp-link);
}
.mp-focus-pill button:hover { filter: brightness(.96); }
.mp-focus-pill kbd { margin-left: .35rem; padding: 0 .3rem; border-radius: .25rem; border: 1px solid var(--mp-border); font-size: .7rem; }

@media (prefers-reduced-motion: reduce) {
  html.focus-mode main { animation: none; }
  html.theme-anim, html.theme-anim * { transition: none !important; }
  .mp-icon-btn .mp-sun, .mp-icon-btn .mp-moon { transition: none; }
}

/* ---------- 6. Responsive hardening (phones, tablets, laptops, large / ultra-wide screens) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; overflow-wrap: break-word; min-width: 0; }
img, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* grid/flex children may shrink below their content width (stops one wide child stretching the whole page) */
.grid > * { min-width: 0; }
.shrink-0, [class*="shrink-0"] { min-width: auto; }

/* never let a flex/grid child force sideways scrolling */
main, main > *, [data-nav-content] { min-width: 0; }

/* dialogs and toasts always fit the screen */
dialog { max-width: calc(100vw - 1rem); max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
html #toast { max-width: calc(100vw - 2rem); text-align: center; }

/* touch screens: comfortable tap targets, no hover-stuck states */
@media (pointer: coarse) {
  [role="tab"], .tab, .mp-icon-btn, nav a, aside a { min-height: 2.5rem; }
  .mp-icon-btn { min-width: 2.5rem; }
}

/* phones: inputs at 16px stop iOS auto-zoom; tighter gaps in dense grids */
@media (max-width: 639px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  main { padding-left: .875rem; padding-right: .875rem; }
  [aria-label="Countdown"] { gap: .375rem; }
  #palette { gap: .5rem; }
  h1 { overflow-wrap: anywhere; }
  .mp-float { right: .75rem; }
}

/* very small phones (<= 360px, e.g. older Android / iPhone SE) */
@media (max-width: 360px) {
  main { padding-left: .625rem; padding-right: .625rem; }
  html { font-size: 15px; }
}

/* short landscape phones: keep sticky bars from eating the screen */
@media (max-height: 480px) and (orientation: landscape) {
  dialog { max-height: 96vh; max-height: 96dvh; }
}

/* large desktops and TVs: gently scale up so content does not look tiny */
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 19px; } }

/* print: clean pages without navigation */
@media print {
  header, aside, #sidebar, #appSidebar, #overlay, #navOverlay, #toast, .mp-tools, .mp-float, #actionBar { display: none !important; }
  .lg\:ml-64 { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ---------- 7. Mobile tabs, headers and buttons ---------- */
/* every tab bar scrolls sideways (no cut-off tabs), hides its scrollbar and snaps */
[role="tablist"]:not(.grid) { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; max-width: 100%; }
[role="tablist"]::-webkit-scrollbar { display: none; }
[role="tablist"]:not(.grid) > [role="tab"], [role="tablist"]:not(.grid) > .tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; }
#tabs, #deckTabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#tabs::-webkit-scrollbar, #deckTabs::-webkit-scrollbar { display: none; }
#tabs > *, #deckTabs > * { flex-shrink: 0; white-space: nowrap; }

/* header logo/brand text and small action buttons never break into pieces */
header a, header .text-lg, header .text-xl, header button { white-space: nowrap; }
header h1, header .truncate { white-space: nowrap; }
#profileActions button, #startEdit, #cancelEdit { white-space: nowrap; flex-shrink: 0; }
#profileActions { flex-shrink: 0; }

@media (max-width: 639px) {
  .mp-tools { flex-shrink: 0; }
}

/* edge fade: tells the user a tab bar scrolls sideways (class toggled by medprep-ui.js) */
.mp-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
.mp-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); }
.mp-fade-l.mp-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }

/* very narrow phones: tighter header chrome so nothing is pushed off-screen */
@media (max-width: 360px) {
  header.px-4 { padding-left: .625rem; padding-right: .625rem; }
  header .mp-icon-btn, header .mp-logout { min-width: 2rem; padding: 0 .25rem; }
}


/* ---------- 8. Visual polish (all pages) ---------- */
html { scroll-behavior: smooth; }
::selection { background: #B9D6F1; color: #082F57; }
html.dark ::selection { background: #2F4468; color: #E5ECF6; }

/* sticky headers: soft glass instead of a flat white slab */
header.sticky { -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); }
header.sticky.bg-white { background-color: rgba(255, 255, 255, .86); }
html.dark header.sticky.bg-white { background-color: rgba(16, 26, 46, .86); }

/* buttons feel pressable */
button:not(:disabled), a[class*="bg-brand-"], [role="tab"] { transition: transform .12s ease, background-color .15s, box-shadow .15s, color .15s, border-color .15s; }
button:not(:disabled):active, a[class*="bg-brand-600"]:active { transform: scale(.97); }
button.bg-brand-600:not(:disabled), a.bg-brand-600 { box-shadow: 0 1px 2px rgba(11, 74, 138, .25), 0 4px 12px -4px rgba(15, 92, 168, .35); }
button.bg-brand-600:not(:disabled):hover { box-shadow: 0 2px 4px rgba(11, 74, 138, .25), 0 8px 18px -6px rgba(15, 92, 168, .45); }

/* cards: a little depth, lift on hover (mouse only) */
main :is(.rounded-2xl, .rounded-3xl).border { box-shadow: 0 1px 2px rgba(11, 37, 64, .04); }
html.dark main :is(.rounded-2xl, .rounded-3xl).border { box-shadow: none; }
@media (hover: hover) {
  #picker li, a.rounded-2xl.border { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
  #picker li:hover, a.rounded-2xl.border:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(11, 37, 64, .22); border-color: #B9D6F1; }
  html.dark #picker li:hover, html.dark a.rounded-2xl.border:hover { box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6); border-color: #2F4468; }
}

/* sidebar links: clearer active state with an accent bar */
#appSidebar a[aria-current="page"] { box-shadow: inset 3px 0 0 #0F5CA8; }
html.dark #appSidebar a[aria-current="page"] { box-shadow: inset 3px 0 0 #7DB8F5; }

/* page content eases in */
@keyframes mp-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: mp-page-in .4s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { main { animation: none; } html { scroll-behavior: auto; } }

/* slim, themed scrollbars on desktop */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #B9D6F1 transparent; }
  html.dark * { scrollbar-color: #2F4468 transparent; }
}