/* ============================================================================
   LIQUI DASH — CORE STYLES
   
   Shared styles used across every portal page. Page-specific styles remain
   in each HTML file's own <style> block.
   
   Include via: <link rel="stylesheet" href="core.css?v=1">  (before any
   page-specific <style> block so per-page rules can override these defaults)
   
   Last updated: v1 — initial extraction from per-page styles.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ─── Design tokens — DARK (default) ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:       #161616;
  --surface:  #1e1e1e;
  --surface2: #2a2a2a;
  --surface-hover: #2a2a2a;

  /* Borders */
  --border:   rgba(255,255,255,0.10);
  --border2:  rgba(255,255,255,0.18);

  /* Text */
  --text:     #f0f0f0;
  --muted:    #888;
  --faint:    #444;

  /* Department & status colours (canonical) */
  --green:    #4caf50;   /* Design       */
  --red:      #e05252;   /* Contracts    */
  --blue:     #4d9de0;   /* Briggs & Co  */
  --yellow:   #f0b429;   /* Crate47      */
  --purple:   #b07eea;   /* Management   */

  /* Accent — used for highlights, active states, submit buttons */
  --accent:   #a0c4ff;

  /* Status pills — background + foreground pairs */
  --on-track-bg:   rgba(76,175,80,0.12);    --on-track-fg:   #5dca62;
  --at-risk-bg:    rgba(240,180,41,0.12);   --at-risk-fg:    #f0b429;
  --overdue-bg:    rgba(224,82,82,0.12);    --overdue-fg:    #e05252;
  --inprog-bg:     rgba(77,157,224,0.12);   --inprog-fg:     #4d9de0;
  --complete-bg:   rgba(180,180,180,0.10);  --complete-fg:   #aaa;
  --initiation-bg: rgba(160,100,220,0.12);  --initiation-fg: #b07eea;
  --today-bg:      rgba(224,82,82,0.18);    --today-fg:      #e05252;

  color-scheme: dark;
}


/* ─── Design tokens — LIGHT (activate with <html data-theme="light">) ────── */
[data-theme="light"] {
  --bg:       #f4f4f2;
  --surface:  #ffffff;
  --surface2: #eeeeec;
  --surface-hover: #e8e8e4;

  --border:   rgba(0,0,0,0.10);
  --border2:  rgba(0,0,0,0.20);

  --text:     #1a1a1a;
  --muted:    #6a6a6a;
  --faint:    #b0b0b0;

  /* Accent — deeper for contrast on light backgrounds */
  --accent:   #4d7fd4;

  /* Status pills rebalanced for light backgrounds (deeper fg, slightly stronger bg) */
  --on-track-bg:   rgba(76,175,80,0.18);    --on-track-fg:   #2e7d32;
  --at-risk-bg:    rgba(240,180,41,0.22);   --at-risk-fg:    #8a5f00;
  --overdue-bg:    rgba(224,82,82,0.16);    --overdue-fg:    #c62828;
  --inprog-bg:     rgba(77,157,224,0.16);   --inprog-fg:     #1565c0;
  --complete-bg:   rgba(120,120,120,0.14);  --complete-fg:   #666;
  --initiation-bg: rgba(160,100,220,0.16);  --initiation-fg: #6a3fbe;
  --today-bg:      rgba(224,82,82,0.20);    --today-fg:      #b71c1c;

  color-scheme: light;
}


/* ─── Design tokens — MID / SLATE (activate with <html data-theme="mid">) ── */
/* A neutral slate palette — bluish-grey mid-tone. Because it's still darker
   than pure light, the dark-mode rgba(255,255,255, low-alpha) overlays keep
   working naturally, so no broad polish block is needed here. */
[data-theme="mid"] {
  --bg:       #3a3f47;
  --surface:  #474d57;
  --surface2: #363a42;
  --surface-hover: #525964;

  --border:   rgba(255,255,255,0.12);
  --border2:  rgba(255,255,255,0.22);

  --text:     #f0f0f0;
  --muted:    #b0b5bc;
  --faint:    #7a8088;

  /* Slightly brighter accent for contrast against the slate */
  --accent:   #7ca5e8;

  /* Status pills — reuse dark values (they work fine on slate) */
  color-scheme: dark;
}


/* ─── Base ───────────────────────────────────────────────────────────────── */
html, body {
  min-height: 100vh;
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
}


/* ─── Layout primitives ──────────────────────────────────────────────────── */
.topbar      { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.topbar-left { display: flex; align-items: center; gap: 12px; }

.back        { font-size: 12px; color: var(--muted); text-decoration: none; }
.back:hover  { color: var(--text); }


/* ─── NAS status indicator ───────────────────────────────────────────────── */
.nas-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.nas-dot    { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }
.nas-dot.ok  { background: var(--green); }
.nas-dot.err { background: var(--red); }


/* ─── Spinner ────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
[data-theme="light"] .spinner {
  border-color: rgba(0,0,0,0.10);
  border-top-color: #333;
}


/* ─── User bar (injected by user_bar.js) ─────────────────────────────────── */
#__user_bar {
  position: fixed;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  user-select: none;
}
#__user_bar.has-banner { top: 32px; }  /* sit below staging banner */
#__user_bar:not(.has-banner) { top: 12px; }
#__ub_name { color: var(--text); font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#__ub_theme {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 24px; height: 24px; padding: 0;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
#__ub_theme:hover { background: var(--surface-hover); border-color: var(--border2); }


/* ─── Light-mode polish for common patterns ──────────────────────────────── */
/* Class-level hover backgrounds that used rgba(255,255,255, low-alpha) become
   invisible on light backgrounds. Flip them to dark-alpha in light mode. */
[data-theme="light"] .staff-row:hover,
[data-theme="light"] .project-row:hover,
[data-theme="light"] .log-row:hover,
[data-theme="light"] .list-row:hover,
[data-theme="light"] .dp-row:hover,
[data-theme="light"] .drop-zone:hover,
[data-theme="light"] .dept-head:hover,
[data-theme="light"] .wg-head:hover,
[data-theme="light"] .crate-toggle:hover,
[data-theme="light"] .mg-cell.has-entries:hover,
[data-theme="light"] .project:not(.proj-type-blob):hover,
[data-theme="light"] tbody tr:hover {
  background: rgba(0,0,0,0.04) !important;
}

/* Subtle card backgrounds used across many pages */
[data-theme="light"] .project:not(.proj-type-blob),
[data-theme="light"] .project.completed:not(.proj-type-blob),
[data-theme="light"] .monthly-target,
[data-theme="light"] .pp-milestone,
[data-theme="light"] .pp-log-entry {
  background: rgba(0,0,0,0.03) !important;
  border-color: var(--border) !important;
}

/* Scrollbar thumbs that used rgba-white */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 2px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }
