/* ============================================================================
   home.smilak.com — smilak design system
   ----------------------------------------------------------------------------
   Adopted from Kevin's Mission Control / sclaw "smilak" tokens (MUI v7,
   Material Design 3 "Expressive", dark canonical). Loaded LAST in base.html so
   it re-skins the existing MDC + app variables. No markup/JS logic depends on
   it. Source of truth: sclaw/docs/design/smilak-tokens.css.

   Fonts are VENDORED (offline, no CDN): IBM Plex Sans (UI body), IBM Plex Mono
   (code / ids / coordinates / logs), Anta (display headings). woff2 under
   static/fonts/ — same set sclaw uses.

   Token mapping:
     :root             -> smilak LIGHT parity  (the app's "day" mode)
     body.dark-theme   -> smilak DARK canonical (the app's "night" mode)
   The existing theme toggle (adds/removes .dark-theme) keeps working unchanged.
   ========================================================================== */

/* ---- Vendored fonts (offline) --------------------------------------------*/
/* Plex Sans ships as one variable woff2 covering 400-700. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/plex-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "Anta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/anta-400.woff2") format("woff2");
}

/* ---- Tokens: DAY (smilak light parity) -----------------------------------*/
:root {
  /* smilak palette — light parity */
  --bg:            #f4f7fb;
  --surface:       #ffffff;
  --surface-high:  #eef2f7;
  --raised:        #ffffff;
  --ink:           rgba(0,0,0,0.87);
  --muted:         rgba(0,0,0,0.60);
  --faint:         rgba(0,0,0,0.45);
  --line:          rgba(0,0,0,0.12);
  --line-hi:       rgba(0,0,0,0.23);
  --accent:        #255fb8;
  --accent-strong: #1c4c97;
  --accent-tint:   rgba(37, 95, 184, 0.10);
  --secondary:     #1e8f83;
  --ok:            #2e8b57;
  --warn:          #c98021;
  --danger:        #b4452e;
  --on-accent:     #ffffff;
  /* Favourite heart. The outline/filled glyph carries the state on its own, so
     colour is only a redundant cue — but it's picked to survive red-green
     colour blindness anyway. Separation here is carried by LIGHTNESS (the one
     channel dichromats keep), not hue: a deep red against a mid grey. Verified
     by Vienot-1999 simulation — worst-case dE across normal/protan/deutan is
     48.7, vs 43.2 for the old #ccc/#ff4444 pair, and the "on" state goes from
     3.4:1 to 8.2:1 contrast on white, which is what made it feel faint. */
  --fav:           #a01010;
  --fav-off:       #a0a0a0;

  /* Type */
  --font-display: "Anta", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-ui:      "IBM Plex Sans", "Inter", "Segoe UI", "Roboto", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", "Menlo", "Monaco", monospace;

  /* Shape (smilak shapeTokens) — flat, tone-layered, translucent borders */
  --radius:      12px;  /* panels / cards default */
  --radius-card: 14px;  /* MuiCard */
  --radius-sm:   8px;   /* buttons, inputs, chips */
  --radius-pill: 9999px;
  /* MC prefers tone surfaces over shadow; real shadow reserved for overlays */
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(2,8,23,0.18);
  --ring: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);

  /* Re-map Material Components Web theme ----------------------------------- */
  --mdc-theme-primary: var(--accent);
  --mdc-theme-secondary: var(--secondary);
  --mdc-theme-error: var(--danger);
  --mdc-theme-surface: var(--surface);
  --mdc-theme-background: var(--bg);
  --mdc-theme-on-primary: var(--on-accent);
  --mdc-theme-on-secondary: #ffffff;
  --mdc-theme-on-surface: var(--ink);
  --mdc-typography-font-family: var(--font-ui);
}

/* ---- Tokens: NIGHT (smilak dark — canonical) -----------------------------*/
body.dark-theme {
  --bg:            #0f141c;  /* app background */
  --surface:       #141b24;  /* resting card/panel */
  --surface-high:  #1b2430;  /* raised / nested tone */
  --raised:        #1b2430;
  --ink:           #e6ebf2;  /* slightly softened white for comfort */
  --muted:         rgba(255,255,255,0.70);
  --faint:         rgba(255,255,255,0.50);
  --line:          rgba(255,255,255,0.12);
  --line-hi:       rgba(255,255,255,0.23);
  --accent:        #6fa8ff;
  --accent-strong: #8cbcff;
  --accent-tint:   rgba(111, 168, 255, 0.14);
  --secondary:     #71d7c7;
  --ok:            #55c27c;
  --warn:          #f6c768;
  --danger:        #ef8f89;
  --on-accent:     #0b0f15;
  /* Same idea inverted for the dark ground: "on" is the BRIGHT one, "off" a
     dimmer grey. Worst-case dE 38.9, contrast 8.6:1 (see :root note). */
  --fav:           #ff9e80;
  --fav-off:       #6b7280;

  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(2,8,23,0.45);

  /* re-assert the app's mapped vars at .dark-theme specificity so they beat
     style.css's body.dark-theme block */
  --bg-color: var(--bg);
  --background-color: var(--surface);
  --text-color: var(--ink);
  --secondary-text-color: var(--muted);
  --border-color: var(--line);
  --item-hover-bg: var(--accent-tint);
  --admin-bg: var(--surface);
  --secondary-bg-color: var(--surface-high);
  --thumbnail-placeholder-bg: var(--surface-high);
  --scrubber-bg: var(--line);
  --item-playing-bg: var(--accent-tint);
  --item-playing-border: var(--accent);
}

/* ---- Base -----------------------------------------------------------------*/
/* style.css sets the app's --bg-color etc. at `body` level, which beats a
   :root remap. We re-map them here at `body` level (this file loads later) so
   the smilak tokens drive style.css. */
body {
  --bg-color: var(--bg);
  --background-color: var(--surface);
  --text-color: var(--ink);
  --secondary-text-color: var(--muted);
  --border-color: var(--line);
  --item-hover-bg: var(--accent-tint);
  --admin-bg: var(--surface-high);
  --secondary-bg-color: var(--surface-high);
  --thumbnail-placeholder-bg: var(--surface-high);
  --scrubber-bg: var(--line);
  --item-playing-bg: var(--accent-tint);
  --item-playing-border: var(--accent);

  font-family: var(--font-ui);
  background-color: var(--bg);
  color: var(--ink);
  background-image: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use Anta display; tight MD3 tracking. */
h1, h2, h3, h4,
.mdc-typography--headline4, .mdc-typography--headline5, .mdc-typography--headline6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

::selection { background: var(--accent-tint); }

/* Mono is reserved for code / ids / coordinates / timestamps / filenames.
   style.css already sets monospace on those; align them to the Plex mono. */
.video-title, .video-filename, .video-filesize, .video-timestamp,
.person-coordinates, .motion-timestamp, .date-display,
#video-time-display, .file-list a {
  font-family: var(--font-mono);
}

/* ---- Header / top bar -----------------------------------------------------*/
.admin-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.admin-controls { gap: 6px; align-items: center; }

/* Brand wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 10px 4px 4px;
  margin-right: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.brand:hover { text-decoration: none; }
.brand .brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--on-accent);
  background: var(--accent);
}
.brand .brand-mark .material-icons { font-size: 19px; }
.brand b { color: var(--accent); font-weight: 400; }

/* ---- Primary navigation ---------------------------------------------------*/
.main-navigation { gap: 2px; }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: normal;
  transition: color .16s var(--ease, ease), background-color .16s ease;
}
.nav-item span { text-transform: none; letter-spacing: normal; font-weight: 600; }
.nav-item:hover { color: var(--ink); background: var(--accent-tint); }
.nav-item.active { color: var(--accent); background: var(--accent-tint); }
.nav-item.active::after { display: none; }
.nav-item.active .material-icons { color: var(--accent); }
.nav-item .material-icons { font-size: 20px; }

/* ---- Hamburger + dropdown menu -------------------------------------------*/
.hamburger-button { color: var(--ink) !important; }
.menu-content {
  background: var(--surface-high) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 8px;
  overflow: hidden;
}
.menu-content a, .menu-item-with-icon {
  border-radius: var(--radius-sm);
  color: var(--ink);
  gap: 12px;
  padding: 10px 12px;
  transition: background-color .14s ease;
}
.menu-content a:hover, .menu-item-with-icon:hover { background: var(--accent-tint) !important; }
.menu-item-with-icon .material-icons { color: var(--muted); }
.menu-item-with-icon:hover .material-icons { color: var(--accent); }
.menu-separator { background: var(--line) !important; }
.user-info {
  background: var(--accent-tint) !important;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 10px;
}
.user-info .material-icons { color: var(--accent) !important; }
.admin-badge {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none !important;
}

/* process / motion status chip (mono = data) */
.process-status-container {
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
#process-status {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--font-mono);
  margin: 0;
}
#process-status, #process-thread-status, #motion-thread-status { color: var(--muted); }

/* ---- Cards / surfaces -----------------------------------------------------*/
.login-container,
.sidebar-section,
.chat-container,
.register-container,
.change-password-container,
.video-details,
.mdc-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

/* ---- Buttons (flat, radius 8, no text-transform, sans 600) ---------------*/
.mdc-button--raised, .mdc-button--unelevated,
button, .button, input[type="submit"], input[type="button"] {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: filter .15s ease, background-color .15s ease;
}
.mdc-button--raised:hover, .mdc-button--unelevated:hover,
button:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover {
  filter: brightness(1.08);
  box-shadow: none !important;
}
.mdc-button--raised:active, .mdc-button--unelevated:active { filter: brightness(.95); }

/* Text / outlined MDC buttons -> accent text, flat */
.mdc-button:not(.mdc-button--raised):not(.mdc-button--unelevated) {
  background: transparent !important;
  color: var(--accent) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* generic custom buttons used across pages */
.auth-btn, .send-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
  box-shadow: none !important;
}
.auth-btn:hover, .send-btn:hover { filter: brightness(1.08); }

/* small ghost-style controls (date nav, day-thumbs, calendar, seek) */
.date-navigation button,
.day-thumbs-btn,
#date-filter-btn,
.seek-button {
  background: var(--surface-high) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.date-navigation button:hover,
.day-thumbs-btn:hover,
#date-filter-btn:hover { filter: brightness(1.1); }
.seek-button { background: var(--accent) !important; color: var(--on-accent) !important; border-color: transparent !important; }

/* ---- Forms / inputs -------------------------------------------------------*/
.form-group input, .chat-input,
input[type="text"], input[type="password"], input[type="email"],
textarea, select {
  background: var(--raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus, .chat-input:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  border-width: 1px !important;
  box-shadow: var(--ring);
}
.form-group label { color: var(--muted); font-weight: 600; }
.mdc-text-field--outlined .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline__notch,
.mdc-text-field--outlined .mdc-notched-outline__trailing { border-color: var(--line) !important; }
.mdc-text-field__input { color: var(--ink) !important; caret-color: var(--accent); }
.mdc-floating-label, .mdc-text-field__icon { color: var(--muted) !important; }

/* ---- Toggles / switches (accent when on) ---------------------------------*/
input:checked + .theme-toggle-slider,
input:checked + .menu-toggle-slider { background-color: var(--accent-tint) !important; }
input:checked + .theme-toggle-slider:before,
input:checked + .menu-toggle-slider:before { background-color: var(--accent) !important; }
/* --fav, not --danger: a favourite isn't an error, and --danger is a muted
   brick that reads as "off" under red-green colour blindness. */
.heart-toggle input:checked + .heart-filter-icon { color: var(--fav); }
.motion-toggle input:checked + .motion-filter-icon { color: var(--accent); }

/* ---- Status / accents that were hardcoded green/red ----------------------*/
.heart-icon.favorite,
.details-actions .heart-icon.favorite { color: var(--fav) !important; }
.heart-icon { color: var(--fav-off) !important; }
.heart-icon:hover { color: var(--fav) !important; }   /* preview the toggle */
.refresh-icon:hover { color: var(--accent) !important; }
.details-actions .motion-icon:hover { color: var(--accent) !important; }
.source-post { background-color: var(--ok) !important; box-shadow: 0 0 2px var(--ok) !important; }
.source-import { background-color: var(--warn) !important; box-shadow: 0 0 2px var(--warn) !important; }
.location-live-toggle.active { background-color: var(--accent) !important; color: var(--on-accent) !important; }
#scrubber-progress, .progress-bar { background-color: var(--accent) !important; }
.time-slider::-webkit-slider-thumb { background: var(--accent) !important; }
.time-slider::-moz-range-thumb { background: var(--accent) !important; }
.calendar-date.has-videos:after { color: var(--accent) !important; }
.calendar-date.selected { background-color: var(--accent) !important; color: var(--on-accent) !important; }
.video-thumbnail.animated { border-left-color: var(--accent) !important; }
.file-list li.playing { border-left-color: var(--accent) !important; }
#motion-progress-bar { --mdc-theme-primary: var(--accent); }

/* video chrome reads as a translucent dark surface regardless of mode */
.video-controls button:hover { background: rgba(0,0,0,0.9); }

/* ---- Flash messages (override base.html inline styles) -------------------*/
.flash-message { border-radius: var(--radius-sm); border: 1px solid var(--line); font-weight: 600; box-shadow: none !important; }
.flash-success { background: color-mix(in srgb, var(--ok) 18%, var(--surface)) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 40%, transparent) !important; }
.flash-error   { background: color-mix(in srgb, var(--danger) 16%, var(--surface)) !important; color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; }
.flash-info    { background: var(--accent-tint) !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }

/* ---- Snackbar -------------------------------------------------------------*/
.mdc-snackbar__surface { background: var(--surface-high) !important; border: 1px solid var(--line); border-radius: var(--radius-sm) !important; }
.mdc-snackbar__label { color: var(--ink) !important; font-family: var(--font-ui); }

/* ---- FAB ------------------------------------------------------------------*/
.mdc-fab { box-shadow: var(--shadow-2) !important; }
#video-actions-fab { background-color: var(--accent) !important; color: var(--on-accent) !important; }
#add-favorite-fab { background-color: var(--accent) !important; color: var(--on-accent) !important; }

/* ---- Home: agent chat + empty states -------------------------------------*/
.chat-header { border-bottom: 1px solid var(--line); }
.chat-header h2 { font-family: var(--font-display); margin: 0; }
.chat-header .material-icons,
.message-avatar .material-icons,
.sidebar-section h3 .material-icons { color: var(--accent); }
.chat-subtitle { color: var(--muted); }
.login-prompt, .sidebar-placeholder { color: var(--muted); }
.login-prompt h2 { font-family: var(--font-display); color: var(--ink); }
.login-prompt .material-icons {
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 50%;
  padding: 18px;
}
.auth-links a { color: var(--accent); }
.error-message { color: var(--danger); }

/* ---- People list (location) ----------------------------------------------*/
.person-entry { background-color: var(--surface-high) !important; border-radius: var(--radius-sm); }
.person-entry:hover { background-color: var(--surface-high) !important; filter: brightness(1.08); }
.person-coordinates { font-family: var(--font-mono); }

/* ---- Page-load motion: one orchestrated reveal ---------------------------*/
@keyframes sk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .content-container > * { animation: sk-rise .4s cubic-bezier(0.2,0,0,1) both; }
  .content-container > *:nth-child(2) { animation-delay: .05s; }
  .content-container > *:nth-child(3) { animation-delay: .10s; }
}