/* ============================================================
   PERENNIAL EMPIRE OS  —  Design System v5.2
   Brand: Orange #F25A00 · Obsidian Slate · Glass Morphism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─────────────────────────────────────────
   DESIGN TOKENS — HoistOS v1.0 (locked 2026-04-22)
   Signal over surface. One spark per view.
───────────────────────────────────────── */
:root {
  /* ── HoistOS Brand Tokens (semantic — use these going forward) ── */
  --ink:           #111827;   /* Structure: body text, default logo fill */
  --signal:        #F25A00;   /* Accent: crossbar, CTAs, live indicators, highlights */
  --signal-dark:   #D04E00;   /* Hover / pressed on Signal */
  --paper:         #FFFFFF;   /* Ground: default surface */
  --concrete:      #F2F4F7;   /* Surface: cards, light UI, inverse logo fill */
  --steel:         #6B8090;   /* Muted: secondary text, borders, metadata */
  --obsidian:      #0B0F14;   /* Depth: deep dark surfaces, hero */

  /* Brand Fonts — DM Serif Display (editorial) · Space Grotesk (brand/wordmark) · Inter (UI/body) */
  --font-display:  'DM Serif Display', Georgia, serif;
  --font-brand:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-ui:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── Legacy aliases (keep existing UI working during migration) ── */
  --orange:        var(--signal);
  --orange-dark:   var(--signal-dark);
  --orange-dim:    rgba(242, 90, 0, 0.08);
  --orange-glow:   rgba(242, 90, 0, 0.15);
  --orange-subtle: rgba(242, 90, 0, 0.03);
  --gold:          #F86800;
  --gold-dim:      rgba(248, 104, 0, 0.08);

  /* Backgrounds — Light Theme (default) */
  --bg:            #f4f4f5;
  --sidebar-bg:    #ffffff;
  --card:          rgba(255, 255, 255, 0.95);
  --card-solid:    #ffffff;
  --card-hover:    rgba(244, 244, 245, 1);
  --card-elevated: rgba(255, 255, 255, 1);
  --input-bg:      #fafafa;

  /* Glass Morphism */
  --glass:         rgba(255, 255, 255, 0.8);
  --glass-light:   rgba(0, 0, 0, 0.02);
  --glass-border:  rgba(0, 0, 0, 0.06);
  --glass-blur:    blur(20px);

  /* Borders */
  --border:        rgba(0, 0, 0, 0.08);
  --border-hi:     rgba(0, 0, 0, 0.12);
  --border-glow:   rgba(242, 90, 0, 0.15);

  /* Text */
  --text:          #18181b;
  --text-mid:      #52525b;
  --text-dim:      #a1a1aa;
  --text-xs:       #d4d4d8;

  /* Semantic */
  --success:       #16a34a;
  --success-dim:   rgba(22, 163, 74, 0.08);
  --danger:        #dc2626;
  --danger-dim:    rgba(220, 38, 38, 0.08);
  --warning:       #eab308;

  /* Layout */
  --sidebar-w:     268px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadow — light theme */
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.08), 0 20px 50px rgba(0,0,0,.06);
  --shadow-glow: 0 0 30px rgba(242, 90, 0, 0.06);

  /* Motion */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:  0.2s;
  --duration-slow: 0.4s;
}

/* ─────────────────────────────────────────
   THEME: Midnight Steel — Dark + Blue
───────────────────────────────────────── */
[data-theme="midnight"] {
  --orange: #3b82f6; --orange-dark: #2563eb; --orange-dim: rgba(59,130,246,0.10);
  --orange-glow: rgba(59,130,246,0.25); --orange-subtle: rgba(59,130,246,0.04);
  --gold: #60a5fa; --gold-dim: rgba(96,165,250,0.10);
  --bg: #070b14; --sidebar-bg: #0a0f1a; --card: rgba(15,23,42,0.85);
  --card-solid: #0f172a; --card-hover: rgba(30,41,59,0.9); --card-elevated: rgba(30,41,59,0.9);
  --input-bg: #0b1120; --glass: rgba(15,23,42,0.6); --glass-light: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.07); --border: rgba(30,41,59,0.8); --border-hi: rgba(51,65,85,0.8);
  --border-glow: rgba(59,130,246,0.18);
}

/* THEME: Blueprint — Dark + Cyan */
[data-theme="blueprint"] {
  --orange: #06b6d4; --orange-dark: #0891b2; --orange-dim: rgba(6,182,212,0.10);
  --orange-glow: rgba(6,182,212,0.25); --orange-subtle: rgba(6,182,212,0.04);
  --gold: #22d3ee; --gold-dim: rgba(34,211,238,0.10);
  --bg: #040d12; --sidebar-bg: #061218; --card: rgba(12,25,33,0.85);
  --card-solid: #0c1921; --card-hover: rgba(22,38,50,0.9); --card-elevated: rgba(22,38,50,0.9);
  --input-bg: #071016; --glass: rgba(12,25,33,0.6); --border: rgba(22,38,50,0.8);
  --border-hi: rgba(35,55,72,0.8); --border-glow: rgba(6,182,212,0.18);
}

/* THEME: Dark (Obsidian Slate) — optional, apply with data-theme="dark" */
html[data-theme="dark"] { background: #09090b; color: #ededef; }
[data-theme="dark"] {
  --orange: #F25A00; --orange-dark: #D04E00; --orange-dim: rgba(242,90,0,0.10);
  --orange-glow: rgba(242,90,0,0.25); --orange-subtle: rgba(242,90,0,0.04);
  --gold: #F86800; --gold-dim: rgba(248,104,0,0.10);
  --bg: #09090b; --sidebar-bg: #0c0c0e; --card: rgba(22,22,26,0.85);
  --card-solid: #16161a; --card-hover: rgba(30,30,36,0.9); --card-elevated: rgba(36,36,42,0.9);
  --input-bg: #0e0e11; --glass: rgba(22,22,26,0.6); --glass-light: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.07); --border: rgba(45,45,55,0.7); --border-hi: rgba(65,65,78,0.8);
  --border-glow: rgba(242,90,0,0.18);
  --text: #ededef; --text-mid: #a1a1aa; --text-dim: #52525b; --text-xs: #3f3f46;
  --success: #34d399; --success-dim: rgba(52,211,153,0.10); --danger: #f87171; --danger-dim: rgba(248,113,113,0.10);
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.45);
}

/* THEME: Safety Orange — High Contrast */
[data-theme="safety"] {
  --orange: #ff6b00; --orange-dark: #e65c00; --orange-dim: rgba(255,107,0,0.12);
  --orange-glow: rgba(255,107,0,0.30); --orange-subtle: rgba(255,107,0,0.05);
  --gold: #ffb800; --gold-dim: rgba(255,184,0,0.12);
  --bg: #000000; --sidebar-bg: #0a0a0a; --card: rgba(18,18,18,0.9);
  --card-solid: #121212; --card-hover: rgba(28,28,28,0.95); --card-elevated: rgba(35,35,35,0.95);
  --input-bg: #0a0a0a; --border: rgba(50,50,50,0.8); --border-hi: rgba(70,70,70,0.8);
  --border-glow: rgba(255,107,0,0.22);
  --text: #ffffff; --text-mid: #b0b0b0; --text-dim: #666666;
}

/* ─────────────────────────────────────────
   THEME TOGGLE
───────────────────────────────────────── */
#theme-toggle-btn:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
body, .sidebar, .card, .modal, input, textarea, select, .nav-item, .btn {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  /* HoistOS: Inter is the UI/body font. DM Sans kept as fallback during migration. */
  font-family: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter variants for legibility */
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: 'DM Serif Display', Georgia, serif; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Scrollbar — ultra-thin premium */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ─────────────────────────────────────────
   APP SHELL
───────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-layout > main,
.app-layout > .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
  transition: width var(--duration-slow) var(--ease),
              min-width var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease);
  backdrop-filter: blur(10px);
}

/* Desktop sidebar collapse */
@media (min-width: 961px) {
  .sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    opacity: 0;
    pointer-events: none;
  }
}

/* Logo */
.sidebar-logo {
  padding: 24px 22px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 13px;
}

.logo-icon-wrap {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}

.logo-text-block { line-height: 1; }

.logo-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.logo-empire {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.logo-sub {
  font-size: 8.5px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 0;
}

.nav-section { margin-bottom: 6px; }

.nav-section-label {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 12px 22px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 1px 10px;
  color: var(--text-mid);
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
  border-radius: var(--r-sm);
  letter-spacing: 0.2px;
  position: relative;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: var(--orange);
  font-weight: 700;
  background: var(--orange-dim);
  box-shadow: inset 0 0 0 1px rgba(242,90,0,0.15);
  letter-spacing: 0.3px;
}

.nav-item .nav-icon {
  transition: color var(--duration) var(--ease);
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  color: var(--orange);
}

.nav-icon {
  font-size: 14px;
  width: 18px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.sidebar-version {
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.4;
  letter-spacing: 1px;
  padding-top: 8px;
}

.sidebar-date {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--orange-dim);
  border: 1px solid rgba(242,90,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--orange);
}

.user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
}

.user-role {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────
   VIEWPORT / MAIN AREA
───────────────────────────────────────── */
.viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Page Header — HoistOS: Ink structure with a Signal crossbar accent.
   "Signal over surface" — orange is a load-bearing crossbar, not a flood. */
.page-header {
  padding: 17px 36px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper, #FFFFFF);
  flex-shrink: 0;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  color: var(--ink, #111827);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  position: relative;
}
/* Signal crossbar — thin orange beam under the header (structural accent, not decoration) */
.page-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--signal, #F25A00) 0%, var(--signal, #F25A00) 60px, transparent 60px);
}
body[data-theme="dark"] .page-header {
  background: var(--obsidian, #0B0F14);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #F2F4F7;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-breadcrumb {
  font-size: 10px;
  color: var(--steel, #6B8090);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
body[data-theme="dark"] .page-breadcrumb { color: rgba(242, 244, 247, 0.65); }

.page-title {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink, #111827);
  margin: 0;
}
body[data-theme="dark"] .page-title { color: #F2F4F7; }

.page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 36px;
}

/* ─────────────────────────────────────────
   STAT CARDS
───────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all var(--duration) var(--ease);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-light), transparent);
  pointer-events: none;
}

.stat-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow), var(--shadow-glow);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, var(--orange-dim), rgba(242,90,0,0.18));
  border: 1px solid rgba(242,90,0,0.2);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(242,90,0,0.08);
}

.stat-icon.gold  { background: linear-gradient(135deg, var(--gold-dim), rgba(245,166,35,0.18)); border-color: rgba(245,166,35,0.2); box-shadow: 0 4px 12px rgba(245,166,35,0.08); }
.stat-icon.green { background: linear-gradient(135deg, rgba(62,207,142,0.08), rgba(62,207,142,0.18)); border-color: rgba(62,207,142,0.2); box-shadow: 0 4px 12px rgba(62,207,142,0.08); }
.stat-icon.blue  { background: linear-gradient(135deg, rgba(80,130,255,0.08), rgba(80,130,255,0.18)); border-color: rgba(80,130,255,0.2); box-shadow: 0 4px 12px rgba(80,130,255,0.08); }

.stat-label {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.stat-value {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.stat-sub {
  font-size: 10.5px;
  color: var(--orange);
  margin-top: 3px;
}

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */
.card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 26px;
  position: relative;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration-slow) var(--ease),
              transform var(--duration) var(--ease);
}

.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow), 0 0 0 1px var(--glass-border);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}

.card-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--orange);
}

.card-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ─────────────────────────────────────────
   FORMS
───────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 7px;
}

.form-control {
  width: 100%;
  padding: 11px 13px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration-slow) var(--ease);
  outline: none;
  -webkit-appearance: none;
}

.form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242,90,0,0.1), 0 0 20px rgba(242,90,0,0.06);
}

.form-control::placeholder { color: var(--text-dim); }

select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%233e4a62' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 34px;
}

select.form-control option { background: var(--card-solid); }

.form-grid   { display: grid; gap: 14px; }
.fg-2        { grid-template-columns: 1fr 1fr; }
.fg-3        { grid-template-columns: 1fr 1fr 1fr; }

/* File picker */
.file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--input-bg);
  border: 1px dashed var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text-mid);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.file-label:hover { border-color: var(--orange); color: var(--orange); }
.file-label input[type=file] { display: none; }
.file-name { font-size: 11.5px; color: var(--success); margin-top: 5px; }

/* Preview pane */
.preview-pane {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin: 2px 0 14px;
}

.preview-label {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.preview-value {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-mid);
  word-break: break-all;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  border: 1px solid transparent;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  position: relative;
}

.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 2px 8px rgba(242,90,0,0.2);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(242,90,0,0.4), 0 0 40px rgba(242,90,0,0.1);
  transform: translateY(-1px) scale(1.02);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(242,90,0,0.25);
}

.btn-outline {
  background: transparent;
  color: var(--orange);
  border-color: rgba(242,90,0,0.4);
}
.btn-outline:hover {
  background: var(--orange-dim);
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(242,90,0,0.08);
}

.btn-ghost {
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-mid);
  border-color: var(--glass-border);
}
.btn-ghost:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--card-hover);
}

.btn-danger {
  background: rgba(255,77,77,0.08);
  color: var(--danger);
  border-color: rgba(255,77,77,0.2);
}
.btn-danger:hover {
  background: rgba(255,77,77,0.18);
  box-shadow: 0 0 20px rgba(255,77,77,0.08);
}

.btn-sm  { padding: 6px 13px; font-size: 10.5px; }
.btn-lg  { padding: 14px 28px; font-size: 13px; }
.btn-full { width: 100%; }

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: all var(--duration) var(--ease);
  flex-shrink: 0;
}
.icon-btn:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--card-hover);
}
.icon-btn-xs { width: 24px; height: 24px; }

/* ─────────────────────────────────────────
   BADGES
───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.badge-orange  { color: var(--orange); background: var(--orange-dim); border-color: rgba(242,90,0,0.25); }
.badge-success { color: var(--success); background: rgba(62,207,142,0.1); border-color: rgba(62,207,142,0.25); }
.badge-danger  { color: var(--danger); background: rgba(255,77,77,0.1); border-color: rgba(255,77,77,0.25); }
.badge-gold    { color: var(--gold); background: var(--gold-dim); border-color: rgba(245,166,35,0.25); }
.badge-muted   { color: var(--text-mid); background: rgba(255,255,255,0.04); border-color: var(--border); }

/* Status dot */
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.pulse { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.65); }
}

/* ─────────────────────────────────────────
   DATA LIST
───────────────────────────────────────── */
.data-list { display: flex; flex-direction: column; }

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  transition: background 0.15s;
}
.data-item:last-child { border-bottom: none; }
.data-item:hover { background: rgba(255,255,255,0.015); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--r-xs); border-bottom: 1px solid var(--border); }

.data-id {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.5px;
  font-family: 'Courier New', monospace;
}

.data-name { font-size: 13px; color: var(--text); font-weight: 500; }
.data-sub  { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.data-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ─────────────────────────────────────────
   ALERTS
───────────────────────────────────────── */
.alert {
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  border: 1px solid;
}

.alert-success {
  background: rgba(62,207,142,0.08);
  border-color: rgba(62,207,142,0.22);
  border-left: 3px solid var(--success);
  color: #7ff0bc;
}
.alert-danger {
  background: rgba(255,77,77,0.08);
  border-color: rgba(255,77,77,0.22);
  border-left: 3px solid var(--danger);
  color: #ff9999;
}
.alert-info {
  background: var(--orange-dim);
  border-color: rgba(242,90,0,0.22);
  border-left: 3px solid var(--orange);
  color: #f5a480;
}

/* ─────────────────────────────────────────
   TOAST
───────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  animation: toast-in 0.28s var(--ease-out);
}

.toast-success { border-left: 3px solid var(--success); }
.toast-danger  { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--orange); }

@keyframes toast-in  { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { to   { opacity:0; transform:translateX(18px); } }

/* ─────────────────────────────────────────
   GRID HELPERS
───────────────────────────────────────── */
.grid-main   { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 22px; align-items: start; }
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

/* ─────────────────────────────────────────
   DIVIDER
───────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* ─────────────────────────────────────────
   ANIMATION
───────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-in {
  animation: fade-up 0.4s var(--ease-out) forwards;
  opacity: 0;
}
.animate-in:nth-child(1) { animation-delay: 0s; }
.animate-in:nth-child(2) { animation-delay: 0.06s; }
.animate-in:nth-child(3) { animation-delay: 0.08s; }
.animate-in:nth-child(4) { animation-delay: 0.12s; }
.animate-in:nth-child(5) { animation-delay: 0.16s; }
.animate-in:nth-child(6) { animation-delay: 0.20s; }

/* Page content entrance */
.page-content {
  animation: fade-in 0.3s var(--ease-out);
}

/* ─────────────────────────────────────────
   UTILITIES
───────────────────────────────────────── */
.text-orange  { color: var(--orange); }
.text-gold    { color: var(--gold); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-dim     { color: var(--text-dim); }
.text-mid     { color: var(--text-mid); }
.text-mono    { font-family: 'Courier New', monospace; }

.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

.caps { text-transform: uppercase; letter-spacing: 1px; }

.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-1  { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden  { display: none; }
.gap-4   { gap: 4px; }
.gap-6   { gap: 6px; }
.gap-8   { gap: 8px; }
.gap-10  { gap: 10px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.gap-18  { gap: 18px; }
.gap-24  { gap: 24px; }
.mb-4    { margin-bottom: 4px; }
.mb-8    { margin-bottom: 8px; }
.mb-16   { margin-bottom: 16px; }
.mb-24   { margin-bottom: 24px; }
.mb-32   { margin-bottom: 32px; }
.mr-4    { margin-right: 4px; }
.mt-16   { margin-top: 16px; }
.p-20    { padding: 20px; }
.w-full  { width: 100%; }

/* Section header pattern */
.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.section-desc {
  font-size: 13px;
  color: var(--text-mid);
}

/* Dashboard 2-col layout */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}

/* Button alignment helpers */
.btn-start { justify-content: flex-start; }

/* Stat value size variant */
.stat-value-sm {
  font-size: 14px;
  margin-top: 3px;
}

/* Placeholder / empty state */
.empty-state {
  text-align: center;
  padding: 28px 0;
  color: var(--text-dim);
  font-size: 12.5px;
}

/* Status row in system cards */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.status-row-label { color: var(--text-mid); }
.status-row-note { font-size: 10.5px; color: var(--text-dim); }
.status-row-badge { padding: 2px 7px; }

/* Small badge variants for inline use */
.badge-xs { font-size: 8px; padding: 1px 5px; }
.badge-btn { font-size: 9px; padding: 2px 6px; }

/* Quick action buttons list */
.action-stack { display: flex; flex-direction: column; gap: 8px; }

/* Card new project sub text */
.project-card-new-sub {
  font-size: 11px;
  color: inherit;
  opacity: 0.6;
}

/* ─────────────────────────────────────────
   INLINE-STYLE CLEANUP — Shared Classes
───────────────────────────────────────── */

/* Empty-state hero (large centered placeholder) */
.empty-hero { text-align: center; padding: 70px 20px; }
.empty-hero-icon { font-size: 52px; margin-bottom: 18px; }
.empty-hero-title { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 10px; }
.empty-hero-desc { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 28px; }

/* Empty-state compact (card-level) */
.empty-card { text-align: center; padding: 48px; color: var(--text-dim); font-size: 13px; }
.empty-card-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }

/* Delete / confirm modal body */
.modal-body-center { align-items: center; text-align: center; padding: 32px 26px; }
.modal-confirm-icon { font-size: 42px; margin-bottom: 14px; }
.modal-confirm-text { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.modal-confirm-warn { font-size: 11.5px; color: var(--text-dim); }

/* Vendor tag muted */
.vcard-tag-muted { opacity: .5; }

/* Margin-top utilities */
.mt-36 { margin-top: 36px; }
.mt-8  { margin-top: 8px; }
.mt-6  { margin-top: 6px; }
.mt-5  { margin-top: 5px; }

/* Form grid full span */
.fg-full { grid-column: 1 / -1; }

/* Toggle row helpers */
.mb-2 { margin-bottom: 2px; }
.toggle-desc { font-size: 11.5px; color: var(--text-dim); }

/* Audit log item classes */
.audit-item { align-items: flex-start; }
.audit-icon { font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.audit-body { flex: 1; min-width: 0; }
.audit-user-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.audit-user-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.audit-action-badge { font-size: 7.5px; padding: 1px 5px; }
.audit-entity { font-size: 11.5px; color: var(--text-mid); }
.audit-details { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.audit-time { font-size: 10px; color: var(--text-dim); flex-shrink: 0; white-space: nowrap; }

/* Legal page helpers */
.stats-row-3 { grid-template-columns: repeat(3, 1fr); }
.td-text { color: var(--text); font-weight: 500; }
.td-dim { color: var(--text-dim); }
.flex-col-gap-18 { display: flex; flex-direction: column; gap: 18px; }
.card-highlight { background: var(--orange-dim); border-color: rgba(242,90,0,0.2); }
.card-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; }
.mb-12 { margin-bottom: 12px; }
.code-inline { font-size: 11px; background: rgba(242,90,0,0.1); padding: 2px 6px; border-radius: 3px; color: var(--orange); }

/* Settings page alerts */
.set-alert-ok { background: #052e16; border: 1px solid #166534; color: #4ade80; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; }
.set-alert-err { background: #3f0000; border: 1px solid #7f1d1d; color: #fca5a5; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; }
.set-note { color: #334155; font-size: 11px; margin-left: auto; }
.set-code { background: #1e2235; padding: 1px 6px; border-radius: 4px; color: #94a3b8; }
.set-optional { color: #475569; font-size: 11px; }

/* Users page helpers */
.user-avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--orange-dim); border: 1px solid rgba(242,90,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--orange); flex-shrink: 0;
}
.inline-form { display: inline; }
.btn-xs { padding: 3px 8px; font-size: 9px; }
.badge-you { font-size: 8px; padding: 2px 6px; }

/* Drive loading icon */
.drive-loading-icon { font-size: 28px; margin-bottom: 12px; }

/* ─────────────────────────────────────────
   HR PAGE
───────────────────────────────────────── */
.hr-empty-card { text-align: center; padding: 48px 32px; }
.hr-empty-icon { font-size: 48px; margin-bottom: 16px; }
.hr-empty-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.hr-empty-desc { font-size: 13px; color: var(--text-mid); max-width: 420px; margin: 0 auto; line-height: 1.7; }

.hr-filter-select { width: auto; min-width: 140px; }
.hr-filter-select-wide { width: auto; min-width: 160px; }

.hr-directory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hr-directory-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hr-view-toggles { display: flex; gap: 6px; }
.hr-view-btn { padding: 5px 10px; }

.hr-phone { font-size: 11.5px; color: var(--text-mid); margin-top: 6px; }
.hr-phone a { color: var(--text-mid); text-decoration: none; }

.hr-email { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; word-break: break-all; }
.hr-email a { color: var(--text-dim); text-decoration: none; }

.hr-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

.hr-project-label { font-size: 9px; color: var(--text-dim); margin-top: 6px; text-align: center; }

.hr-td-id { font-family: monospace; font-size: 11px; color: var(--text-dim); }
.hr-td-name { color: var(--text); font-weight: 600; }
.hr-td-email { font-size: 11px; }
.hr-td-project { font-size: 11px; color: var(--text-dim); }
.hr-td-link { color: var(--text-mid); text-decoration: none; }

.hr-no-results { display: none; text-align: center; padding: 32px; color: var(--text-dim); font-size: 13px; }

.hr-crew-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.hr-crew-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hr-crew-count { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.hr-crew-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge-xxs { font-size: 9px; }

/* ─────────────────────────────────────────
   ADMIN & PROJECT DETAIL UTILITIES
───────────────────────────────────────── */
.stats-col-3 { grid-template-columns: repeat(3, 1fr); }

.filter-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

.inline { display: inline; }

.justify-end { justify-content: flex-end; }

.mb-12 { margin-bottom: 12px; }
.mb-18 { margin-bottom: 18px; }

.data-name-cell { color: var(--text); font-weight: 500; }

.form-hint {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
}

.card-orange {
  background: var(--orange-dim);
  border-color: rgba(242, 90, 0, 0.2);
}

.info-list-text {
  font-size: 12.5px;
  color: var(--text-mid);
  line-height: 2;
}

.breadcrumb-link { color: #fff; text-decoration: none; font-weight: 700; }
.breadcrumb-link:hover { color: #fff; text-decoration: underline; }

.badge-sm { font-size: 10px; padding: 2px 8px; }

.cat-upload-link {
  margin-left: auto;
  font-size: 10px;
  color: var(--orange);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity .15s;
}
.cat-upload-link:hover { opacity: 1; }

.data-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.empty-state-lg {
  text-align: center;
  padding: 48px 0;
  color: var(--text-dim);
  font-size: 13px;
}

/* ─────────────────────────────────────────
   INSIGHTS PAGE
───────────────────────────────────────── */

/* Bar chart rows */
.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.bar-label {
  width: 90px;
  color: var(--text-mid);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  flex: 1;
  height: 22px;
  background: var(--input-bg);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
  transition: width .5s ease;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  min-width: 24px;
}
.bar-fill.gold { background: var(--gold); }
.bar-fill.green { background: var(--success); }

/* File type grid */
.type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.type-card {
  text-align: center;
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.type-icon { font-size: 22px; margin-bottom: 6px; }
.type-val  { font-size: 18px; font-weight: 800; color: var(--text); }
.type-label {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .type-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Empty state icon (large faded emoji) */
.empty-state-icon {
  font-size: 28px;
  margin-bottom: 12px;
  opacity: 0.3;
}

/* Empty state text */
.empty-state-text {
  font-size: 13px;
}

/* Data name small variant */
.data-name-sm { font-size: 12px; }

/* Timestamp small */
.text-xs-dim {
  font-size: 10px;
  color: var(--text-dim);
}

/* Pipeline item row */
.pipeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* Pipeline icon */
.pipeline-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Pipeline name */
.pipeline-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Pipeline description */
.pipeline-desc {
  font-size: 11px;
  color: var(--text-mid);
  margin-top: 2px;
}

/* Pipeline model tag */
.pipeline-model {
  font-size: 10px;
  color: var(--orange);
  margin-top: 4px;
  font-weight: 600;
}

/* Pipeline badge (auto-right) */
.badge-auto-right {
  flex-shrink: 0;
  margin-left: auto;
}

/* Pipeline footer note */
.pipeline-footer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* CTA card variant */
.card-cta {
  background: var(--orange-dim);
  border-color: rgba(242, 90, 0, 0.2);
}
.card-cta .card-header {
  border-color: rgba(242, 90, 0, 0.15);
}

/* CTA body text */
.cta-body {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Health check button small */
.btn-health {
  font-size: 10px;
  padding: 3px 8px;
}

/* Enforcer — status dot orange override */
.status-dot-orange { color: var(--orange); }

/* Enforcer — optional label hint */
.label-hint { color: var(--text-dim); font-weight: 400; }

/* Enforcer — upload icon opacity */
.opacity-60 { opacity: 0.6; }

/* Enforcer — drop zone file name */
.drop-file-name { color: var(--text); font-weight: 600; }

/* Enforcer — remove button tiny */
.btn-xs { font-size: 10px; }

/* Enforcer — progress wrapper */
.progress-wrap { margin-top: 14px; }

/* Enforcer — progress header row */
.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-mid);
  margin-bottom: 4px;
}

/* Enforcer — progress track */
.progress-track {
  height: 6px;
  background: var(--input-bg);
  border-radius: 3px;
  overflow: hidden;
}

/* Enforcer — progress bar fill */
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.3s;
}

/* Enforcer — progress size hint */
.progress-size {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Enforcer — upload status message */
.upload-status {
  margin-top: 14px;
  font-size: 13px;
}

/* Enforcer — right column layout */
.enforcer-sidebar { display: flex; flex-direction: column; gap: 18px; }

/* Enforcer — inline status spans in JS */
.upload-msg-success { color: var(--success); }
.upload-msg-danger  { color: var(--danger); }
.upload-msg-warning { color: var(--gold); }

/* Processing dashboard helpers */
.text-sm   { font-size: 12px; }
.text-xxs  { font-size: 10px; }
.mt-2      { margin-top: 2px; }
.mb-6      { margin-bottom: 6px; }
.error-hint { font-size: 10px; color: var(--danger); margin-top: 2px; }
.text-date { font-size: 10px; color: var(--text-dim); }
.card-failed { border-color: rgba(255,77,77,0.3); }
.badge-xxs { font-size: 7px; padding: 1px 4px; }
.pipeline-flow { font-size: 12.5px; color: var(--text-mid); line-height: 2; }
.pipeline-step { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pipeline-step:last-child { margin-bottom: 0; }
.badge-pipeline { font-size: 9px; padding: 2px 6px; min-width: 70px; text-align: center; }
.chart-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 11.5px; }
.chart-label { width: 90px; color: var(--text-mid); font-weight: 600; text-transform: capitalize; }
.chart-bar-track { flex: 1; height: 18px; background: var(--input-bg); border-radius: 3px; overflow: hidden; }
.chart-bar-fill { height: 100%; background: var(--orange); border-radius: 3px; display: flex; align-items: center; padding-left: 6px; font-size: 9px; color: #fff; font-weight: 700; min-width: 20px; }
.card-body-text { font-size: 12.5px; color: var(--text-mid); line-height: 1.8; }

/* ─────────────────────────────────────────
   SIDEBAR OVERLAY BACKDROP
───────────────────────────────────────── */
#pe-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 199;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#pe-sidebar-overlay.active { display: block; }
@media (min-width: 961px) { #pe-sidebar-overlay { display: none !important; } }

/* ─────────────────────────────────────────
   HAMBURGER — always visible, desktop dims
───────────────────────────────────────── */
.icon-btn#hamburger-btn {
  display: flex;
  opacity: 0.5;
  transition: opacity .15s;
}
.icon-btn#hamburger-btn:hover { opacity: 1; }
@media (max-width: 960px) {
  .icon-btn#hamburger-btn { opacity: 1; }
}

/* ─────────────────────────────────────────
   RESPONSIVE — TABLET (≤ 960px)
───────────────────────────────────────── */
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: none;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.28s;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 48px rgba(0,0,0,.7);
  }

  .page-content  { padding: 20px 18px; }
  .page-header   { padding: 14px 18px; gap: 10px; flex-wrap: wrap; }
  .page-header-right { gap: 8px; }
  .stats-row     { grid-template-columns: 1fr 1fr; }
  .grid-main     { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .fg-2, .fg-3   { grid-template-columns: 1fr; }

  /* Dashboard main 2-col layout → single col */
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — PHONE (≤ 600px)
───────────────────────────────────────── */
@media (max-width: 600px) {
  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { font-size: 18px; width: 34px; height: 34px; }
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 9px; }
  .stat-sub   { font-size: 10px; }

  .page-title     { font-size: 15px; }
  .page-breadcrumb { font-size: 8px; }
  .page-content   { padding: 14px 14px 30px; }
  .page-header    { padding: 12px 14px; }

  /* Hide secondary header badges on very small screens */
  .page-header-right .badge { display: none; }

  .card { padding: 16px; }
  .card-title { font-size: 13px; }

  .btn-sm { padding: 6px 12px; font-size: 11px; }

  /* projects grid single col on phone */
  .projects-grid { grid-template-columns: 1fr !important; }
  .proj-cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .stats-row { grid-template-columns: 1fr; }
  .proj-cats { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────
   SIDEBAR LOGO (real image)
───────────────────────────────────────── */
.sidebar-logo-wrap {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-logo-img {
  width: 100%;
  max-width: 140px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

.sidebar-os-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Sidebar export row */
.sidebar-export-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding: 0 4px;
}
.sidebar-export-btn {
  flex: 1;
  font-size: 9px;
  padding: 4px;
  justify-content: center;
}
.sidebar-logout-btn {
  color: var(--text-dim);
  transition: color 0.15s;
  padding: 4px;
}
.sidebar-logout-btn:hover { color: var(--danger); }

.sidebar-date-str {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────
   PROJECT CARDS — Dashboard
───────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.project-card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration-slow) var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease);
}

.project-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--shadow-glow);
}
.project-card:hover::after { opacity: 1; }

.project-card-new {
  border-style: dashed;
  border-color: var(--border-hi);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-dim);
  transition: all 0.22s;
}

.project-card-new:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
  transform: translateY(-3px);
}

.project-card-new-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px dashed currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

.project-card-new-text {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Card Header */
.proj-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.proj-id {
  font-size: 11px;
  font-weight: 800;
  color: var(--orange);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.proj-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.proj-loc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* Category grid — 4 cols for 12 folders */
.proj-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.proj-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
}

.proj-cat:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

.proj-cat-icon { font-size: 16px; }
.proj-cat-label { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Card footer actions */
.proj-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: auto;
}

.proj-action {
  flex: 1;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.proj-action:hover { border-color: var(--border-hi); color: var(--text); }
.proj-action.primary { background: var(--orange-dim); border-color: rgba(242,90,0,0.3); color: var(--orange); }
.proj-action.primary:hover { background: rgba(242,90,0,0.18); }

/* ─────────────────────────────────────────
   ACTIVITY FEED
───────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: 0; }

.activity-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(242,90,0,0.5);
}

.activity-text { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.activity-text strong { color: var(--text); font-weight: 600; }
.activity-time { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* Activity dot colors by type */
.activity-dot-doc { background: var(--orange); box-shadow: 0 0 6px rgba(242,90,0,0.4); }
.activity-dot-chat { background: var(--gold); box-shadow: 0 0 6px rgba(245,166,35,0.4); }

/* ─────────────────────────────────────────
   MODULE STUB PAGE
───────────────────────────────────────── */
.module-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.module-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold), transparent);
}

.module-hero-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--orange-dim);
  border: 1px solid rgba(242,90,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.module-hero-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.module-hero-sub   { font-size: 13px; color: var(--text-mid); max-width: 500px; line-height: 1.6; }

/* Placeholder table */
.ph-table { width: 100%; border-collapse: collapse; }
.ph-table th {
  font-size: 9px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 2px;
  padding: 0 14px 12px 0; text-align: left;
  border-bottom: 1px solid var(--border);
}
.ph-table td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-mid);
  vertical-align: middle;
}
.ph-table tr:last-child td { border-bottom: none; }
.ph-table tr:hover td { color: var(--text); }

/* Employee / Vendor cards */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.people-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.people-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }

.people-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--orange-dim);
  border: 2px solid rgba(242,90,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--orange);
  margin: 0 auto 12px;
}

.people-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.people-role { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.people-contact { font-size: 11.5px; color: var(--text-mid); margin-top: 8px; }

/* ─────────────────────────────────────────
   DRIVE FILE BROWSER
───────────────────────────────────────── */
.file-browser { display: flex; flex-direction: column; gap: 2px; }

.file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.file-row:hover { background: var(--card-hover); }

.file-row-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.file-row-name { font-size: 13px; color: var(--text); font-weight: 500; flex: 1; }
.file-row-meta { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.file-row-size { font-size: 11px; color: var(--text-dim); width: 60px; text-align: right; flex-shrink: 0; }

/* Breadcrumb trail */
.drive-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 18px; flex-wrap: wrap;
}
.drive-breadcrumb span { color: var(--text-mid); cursor: pointer; transition: color 0.15s; }
.drive-breadcrumb span:hover { color: var(--orange); }
.drive-breadcrumb .sep { color: var(--text-dim); }
.drive-breadcrumb .current { color: var(--text); font-weight: 600; cursor: default; }

/* Insights chart bar */
.chart-bar-wrap { display: flex; flex-direction: column; gap: 10px; }
.chart-bar-row { display: flex; align-items: center; gap: 12px; }
.chart-bar-label { font-size: 11px; color: var(--text-mid); width: 100px; flex-shrink: 0; }
.chart-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.chart-bar-fill  { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width 0.8s ease; }
.chart-bar-val   { font-size: 11px; color: var(--text-mid); width: 36px; text-align: right; flex-shrink: 0; }

@media (max-width: 960px) {
  .projects-grid { grid-template-columns: 1fr; }
  .people-grid   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .people-grid { grid-template-columns: 1fr; }
  .proj-cats   { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────
   MODAL SYSTEM
───────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  width: 100%; max-width: 620px;
  max-height: 92vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.03);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s var(--ease-out);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 800; color: var(--text); }
.modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--border); border: none; cursor: pointer;
  color: var(--text-dim); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(220,60,60,.2); color: #ff6b6b; }

.modal-body {
  padding: 24px 26px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1;
}
.modal-footer {
  padding: 16px 26px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  flex-shrink: 0;
}

/* Modal form field groups */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-dim);
}

/* Checkbox category grid */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px;
}
.check-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11.5px; color: var(--text-mid);
  transition: all 0.15s;
  user-select: none;
}
.check-item:hover { border-color: var(--border-hi); color: var(--text); }
.check-item input[type="checkbox"] { accent-color: var(--orange); }
.check-item.selected { border-color: rgba(242,90,0,0.5); background: rgba(242,90,0,0.08); color: var(--text); }

/* Toggle switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-label { font-size: 13px; color: var(--text-mid); }
.toggle-switch { position: relative; width: 42px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 22px; cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider:before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--orange); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Delete confirm modal */
.modal-danger .modal { max-width: 420px; }
.modal-danger-icon { font-size: 36px; text-align: center; margin-bottom: 8px; }
.modal-danger-msg  { font-size: 14px; color: var(--text-mid); text-align: center; line-height: 1.6; }
.modal-danger-name { color: var(--text); font-weight: 700; }

/* ─────────────────────────────────────────
   VENDOR REGISTRY PAGE
───────────────────────────────────────── */
.vendor-toolbar {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 20px;
}
.vendor-search-wrap {
  position: relative; flex: 1; min-width: 200px;
}
.vendor-search-wrap svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); color: var(--text-dim); pointer-events: none;
}
.vendor-search {
  width: 100%; padding: 9px 12px 9px 36px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color 0.15s;
}
.vendor-search:focus { outline: none; border-color: var(--orange); }
.vendor-search::placeholder { color: var(--text-dim); }

.view-toggle {
  display: flex; border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0;
}
.view-toggle-btn {
  padding: 7px 11px; border: none;
  background: transparent; color: var(--text-dim);
  cursor: pointer; transition: all 0.15s;
}
.view-toggle-btn.active { background: var(--border); color: var(--text); }
.view-toggle-btn svg { display: block; }

/* Filter chips */
.filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 4px;
}
.filter-chip {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  color: var(--text-dim); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  background: transparent;
}
.filter-chip:hover { border-color: var(--border-hi); color: var(--text); }
.filter-chip.active {
  border-color: var(--orange);
  background: rgba(242,90,0,0.1);
  color: var(--orange);
}

/* Vendor card grid */
.vnd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.vnd-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  display: flex; flex-direction: column;
}
.vnd-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.vnd-card[data-tier="secondary"] { opacity: 0.75; }
.vnd-card[data-tier="secondary"]:hover { opacity: 1; }

.vnd-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.vnd-tier-badge {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 2px; color: var(--text-dim);
}
.vnd-preferred { color: var(--gold); font-size: 14px; }
.vnd-name { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.3; }

.vnd-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.vnd-cat {
  padding: 2px 8px;
  background: rgba(242,90,0,0.08);
  border: 1px solid rgba(242,90,0,0.18);
  border-radius: 3px;
  font-size: 9px; font-weight: 700;
  color: var(--orange); text-transform: uppercase; letter-spacing: 0.5px;
}

.vnd-info { font-size: 12px; color: var(--text-dim); line-height: 2; flex: 1; }
.vnd-info-row { display: flex; align-items: flex-start; gap: 6px; }
.vnd-info-row svg { flex-shrink: 0; margin-top: 3px; color: var(--text-dim); }
.vnd-info a { color: var(--orange); text-decoration: none; }
.vnd-info a:hover { text-decoration: underline; }

.vnd-actions {
  display: flex; gap: 6px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.vnd-btn {
  flex: 1; padding: 7px 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.15s; font-family: inherit;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.vnd-btn:hover { border-color: var(--border-hi); color: var(--text); }
.vnd-btn.edit:hover { border-color: rgba(242,90,0,0.4); color: var(--orange); background: rgba(242,90,0,0.06); }
.vnd-btn.del:hover  { border-color: rgba(220,60,60,0.4);  color: #ff6b6b;   background: rgba(220,60,60,0.06); }

/* Vendor TABLE view */
.vnd-table-wrap { overflow-x: auto; }
.vnd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vnd-table th {
  text-align: left; padding: 10px 14px;
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.vnd-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid); vertical-align: middle;
}
.vnd-table tr:last-child td { border-bottom: none; }
.vnd-table tr:hover td { background: rgba(255,255,255,.02); color: var(--text); }
.vnd-table .tbl-name { font-weight: 700; color: var(--text); }
.vnd-table .tbl-cats { display: flex; flex-wrap: wrap; gap: 3px; }
.vnd-table .tbl-actions { display: flex; gap: 6px; }
.vnd-table .icon-btn { width: 28px; height: 28px; }

/* Status check indicators */
.status-live  { color: #4ade80; }
.status-fail  { color: #f87171; }
.status-check { color: var(--gold); }
.status-pulse { animation: pulse-glow 1.5s infinite; }

/* Section divider */
.section-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 18px;
}
.section-divider-line { flex: 1; height: 1px; background: var(--border); }
.section-divider-text {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim); white-space: nowrap;
}

/* Responsive vendor */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .vnd-grid  { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .vendor-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 540px) {
  .filter-chips { gap: 4px; }
  .filter-chip  { font-size: 10px; padding: 4px 10px; }
}

/* ─────────────────────────────────────────
   VENDOR FLIP CARDS
───────────────────────────────────────── */
.vnd-flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.flip-card {
  height: 268px;
  perspective: 1200px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* ── FRONT ── */
.flip-card-front {
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 20px 36px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.flip-card:hover .flip-card-front {
  border-color: var(--border-hi);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.vcard-top-row {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.vcard-tier-lbl {
  font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim);
}
.vcard-star { color: var(--gold); line-height: 1; }

.vcard-initial {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--orange-dim);
  border: 2px solid rgba(242,90,0,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: var(--orange);
  margin-bottom: 14px; flex-shrink: 0;
}

.vcard-name {
  font-size: 14px; font-weight: 800;
  color: var(--text); line-height: 1.3;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard-cats {
  display: flex; flex-wrap: wrap;
  gap: 4px; justify-content: center;
  overflow: hidden;
  max-height: 52px;
}

.vcard-flip-hint {
  position: absolute;
  bottom: 13px;
  font-size: 9.5px; font-weight: 600;
  color: var(--text-dim); letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 5px;
  opacity: 0.55; transition: opacity 0.2s, color 0.2s;
}
.flip-card:hover .vcard-flip-hint { opacity: 1; color: var(--orange); }

/* ── BACK ── */
.flip-card-back {
  background: linear-gradient(145deg, var(--card-solid) 0%, rgba(36,36,42,0.95) 100%);
  border: 1px solid rgba(242,90,0,0.25);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
}

.vcard-back-name {
  font-size: 12.5px; font-weight: 800;
  color: var(--orange);
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}

.vcard-info-list {
  display: flex; flex-direction: column;
  gap: 7px; flex: 1; overflow: hidden;
}

.vcard-info-row {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px; color: var(--text-mid); line-height: 1.35;
}
.vcard-info-row svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }
.vcard-info-row a   { color: var(--text-mid); text-decoration: none; }
.vcard-info-row a:hover { color: var(--orange); }
.vcard-info-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vcard-back-cats {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-bottom: 10px; flex-shrink: 0;
  max-height: 38px; overflow: hidden;
}

.vcard-back-actions {
  display: flex; gap: 6px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.vcard-act-btn {
  flex: 1; padding: 6px 8px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  cursor: pointer; font-family: inherit;
  text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.15s;
}
.vcard-act-btn.edit:hover { border-color: rgba(242,90,0,0.4); color: var(--orange); background: rgba(242,90,0,0.06); }
.vcard-act-btn.del:hover  { border-color: rgba(220,60,60,0.4);  color: #f87171;     background: rgba(220,60,60,0.06); }

@media (max-width: 768px) {
  .vnd-flip-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .flip-card     { height: 250px; }
  .vcard-initial { width: 54px; height: 54px; font-size: 22px; }
}
@media (max-width: 480px) {
  .vnd-flip-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .flip-card     { height: 240px; }
}

/* ─────────────────────────────────────────
   PROJECT TABLE (admin.php registry)
───────────────────────────────────────── */
.project-table { width: 100%; border-collapse: collapse; }
.project-table th {
  font-size: 9px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 2px;
  padding: 0 12px 12px 0; text-align: left;
  border-bottom: 1px solid var(--border);
}
.project-table td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle; font-size: 13px;
}
.project-table tr:last-child td { border-bottom: none; }
.project-table tr:hover td { color: var(--text); }

.year-pill {
  padding: 3px 8px;
  background: var(--gold-dim); color: var(--gold);
  border-radius: 4px; font-size: 10px; font-weight: 700;
}

.search-input {
  flex: 1; max-width: 280px;
  padding: 7px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text); font-size: 13px;
  font-family: inherit; outline: none;
  transition: border-color .2s;
}
.search-input:focus { border-color: var(--orange); }
.search-input::placeholder { color: var(--text-dim); }

.filter-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-mid); font-size: 11.5px;
  font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

/* ─────────────────────────────────────────
   MOBILE RESPONSIVE POLISH (Phase 7)
───────────────────────────────────────── */

/* -- Dashboard main grid stacks on tablet -- */
@media (max-width: 960px) {
  .grid-main, .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* -- Touch-friendly tap targets -- */
@media (max-width: 960px) {
  .btn, .btn-sm { min-height: 42px; display: inline-flex; align-items: center; }
  .nav-item { min-height: 42px; display: flex; align-items: center; }
  .icon-btn { min-width: 42px; min-height: 42px; }
  .proj-action { min-height: 38px; padding: 8px 12px; }
  .data-item { min-height: 44px; }
}

/* -- Index dashboard: right column after projects -- */
@media (max-width: 768px) {
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-header-left { flex: 1; min-width: 0; }
  .page-header-right { flex-wrap: wrap; gap: 6px; }

  /* Project card categories: 4 cols on tablet */
  .proj-cats { grid-template-columns: repeat(4, 1fr) !important; }

  /* Table scroll wrapper */
  .project-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* -- Phone: stack everything -- */
@media (max-width: 600px) {
  /* Dashboard grid override */
  div[style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Form grid stacks */
  .fg-2, .fg-3 { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .check-grid { grid-template-columns: 1fr !important; }

  /* Drive folder grid smaller */
  .drive-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }

  /* Search bar stacks */
  .search-bar { flex-direction: column; }
  .search-bar input, .search-bar button { width: 100%; }

  /* Hide non-essential elements */
  .proj-loc { display: none; }
  .activity-time .badge { display: none; }

  /* Vendor flip cards */
  .vnd-flip-grid { grid-template-columns: 1fr !important; }

  /* Modal full-width */
  .modal { max-width: 95vw !important; margin: 10px; }
}

/* -- Very small phones -- */
@media (max-width: 400px) {
  .page-title { font-size: 14px !important; }
  .stat-card { flex-direction: column; text-align: center; }
  .stat-icon { margin: 0 auto; }
  .proj-cats { grid-template-columns: repeat(3, 1fr) !important; }
  .proj-actions { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────
   v4.0 — DRAG & DROP ZONE
───────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border-hi);
  border-radius: var(--r-md);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--input-bg);
}
.drop-zone:hover,
.drop-zone.drop-hover {
  border-color: var(--orange);
  background: var(--orange-dim);
  box-shadow: 0 0 24px rgba(242, 90, 0, 0.08);
}
.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.drop-zone-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mid);
}
.drop-zone-hint {
  font-size: 11px;
  color: var(--text-dim);
}
.drop-zone-active {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

/* ─────────────────────────────────────────
   v4.0 — CHAT FILE UPLOAD & VOICE
───────────────────────────────────────── */
.icon-btn-mini {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.icon-btn-mini:hover {
  color: var(--orange);
  background: var(--orange-dim);
}

.chat-file-preview {
  padding: 0 0 8px;
}
.chat-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
}
.chat-file-name { font-size: 11.5px; color: var(--text); font-weight: 600; }
.chat-file-size { font-size: 10px; color: var(--text-dim); }
.chat-file-remove {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 14px; padding: 2px 4px;
  transition: color 0.15s;
}
.chat-file-remove:hover { color: var(--danger); }

.voice-recording {
  animation: voice-pulse 1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Chat drag-over state */
.chat-drag-over {
  outline: 2px dashed var(--orange) !important;
  outline-offset: -4px;
  background: rgba(242, 90, 0, 0.03) !important;
}

/* ─────────────────────────────────────────
   v4.0 — NOTIFICATION SYSTEM
───────────────────────────────────────── */
.notif-bell-wrap {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
  margin-top: 8px;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.notif-panel-list {
  max-height: 340px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.notif-item:hover {
  background: var(--card-hover);
}
.notif-item.notif-unread {
  background: rgba(242, 90, 0, 0.04);
  border-left: 2px solid var(--orange);
}
.notif-icon { font-size: 14px; flex-shrink: 0; }
.notif-title { font-size: 11.5px; font-weight: 600; color: var(--text); }
.notif-msg { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.notif-time { font-size: 9px; color: var(--text-dim); flex-shrink: 0; }

/* ─────────────────────────────────────────
   v4.0 — AI SUMMARY CARD
───────────────────────────────────────── */
.ai-summary-card {
  background: linear-gradient(135deg, rgba(242,90,0,0.08) 0%, rgba(245,166,35,0.06) 100%);
  border: 1px solid rgba(242,90,0,0.2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.ai-summary-card .summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-summary-card .summary-header span {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ai-summary-card .summary-text {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
}
.ai-summary-card .summary-meta {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(242,90,0,0.12);
}
.ai-summary-card .summary-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-summary-card .summary-meta-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ai-summary-card .summary-meta-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* ─────────────────────────────────────────
   CHAT PAGE — The Vault (v5.0 Glass)
───────────────────────────────────────── */

/* Chat page: full viewport, no scroll on body */
.chat-page-body { overflow: hidden; height: 100%; }
.chat-page-body .app-layout { height: 100dvh; height: -webkit-fill-available; }

/* Chat layout */
.chat-window { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; max-height: 100dvh; max-height: -webkit-fill-available; }
#chat_output { flex: 1; overflow-y: auto; padding: 32px 40px; display: flex; flex-direction: column; gap: 26px; scroll-behavior: smooth; }

/* Welcome banner */
.welcome-banner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 32px 36px; gap: 16px;
  animation: fade-up 0.5s var(--ease-out);
}
.welcome-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--orange-dim), rgba(242,90,0,0.15));
  border: 1px solid rgba(242,90,0,0.3);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 0 60px rgba(242,90,0,0.15), 0 8px 32px rgba(0,0,0,0.2);
}
.welcome-title {
  font-size: 26px; font-weight: 800; color: var(--text);
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--text) 0%, var(--orange) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-sub { font-size: 14px; color: var(--text-mid); max-width: 460px; line-height: 1.8; }

/* Quick-action chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.chip {
  padding: 9px 18px;
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  font-size: 12.5px; color: var(--text-mid);
  cursor: pointer; font-family: inherit;
  transition: all var(--duration) var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.chip:hover {
  border-color: var(--orange); color: var(--orange);
  background: var(--orange-dim);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242,90,0,0.15);
}

/* Message rows */
.msg-row {
  display: flex; gap: 13px; align-items: flex-start;
  animation: fade-up 0.25s var(--ease-out);
}
.msg-row.user { flex-direction: row-reverse; }

/* Avatars */
.msg-av {
  width: 33px; height: 33px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.msg-av.ai {
  background: linear-gradient(135deg, var(--orange-dim), rgba(242,90,0,0.15));
  border: 1px solid rgba(242,90,0,0.25);
  color: var(--orange);
  box-shadow: 0 2px 8px rgba(242,90,0,0.1);
}
.msg-av.user {
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.18);
  color: #818cf8;
}

/* Message column + bubbles */
.msg-col { max-width: 72%; display: flex; flex-direction: column; gap: 4px; }
.msg-row.user .msg-col { align-items: flex-end; }
.msg-sender {
  font-size: 9px; color: var(--text-dim); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 0 2px;
}

.msg-bubble {
  padding: 14px 18px; border-radius: var(--r-md);
  line-height: 1.75; font-size: 14px;
}

/* User bubble — minimal, right-aligned */
.msg-row.user .msg-bubble {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  color: var(--text);
}

/* AI bubble — proper card with structure */
.msg-row.ai .msg-bubble {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  color: var(--text-mid);
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.msg-row.ai .msg-bubble::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--orange), rgba(242,90,0,0.2));
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* AI streaming cursor — blinking caret while response loads */
.msg-bubble.streaming::after {
  content: '▊';
  color: var(--orange);
  animation: blink-cursor 0.8s step-end infinite;
  font-weight: 400;
  margin-left: 2px;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* AI text formatting */
.msg-bubble strong { color: var(--orange); font-weight: 700; }
.msg-bubble em { color: var(--text); font-style: italic; }
.msg-bubble code {
  background: rgba(242,90,0,0.08); border: 1px solid rgba(242,90,0,0.15);
  padding: 2px 7px; border-radius: 4px; font-size: 12px;
  color: var(--orange); font-family: 'Courier New', monospace;
}
.msg-bubble hr {
  border: none; border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* AI headings */
.msg-bubble h2 {
  color: var(--text); font-size: 15px; margin: 16px 0 8px 0;
  font-weight: 800; letter-spacing: -0.3px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(242,90,0,0.15);
}
.msg-bubble h2:first-child { margin-top: 0; }
.msg-bubble h3 {
  color: var(--text); font-size: 14px; margin: 14px 0 6px 0;
  font-weight: 700; letter-spacing: -0.2px;
}
.msg-bubble h3:first-child { margin-top: 0; }
.msg-bubble h4 {
  color: var(--text-mid); font-size: 12.5px; margin: 10px 0 4px 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

/* AI paragraphs */
.msg-bubble p { margin-bottom: 10px; }
.msg-bubble p:last-child { margin-bottom: 0; }

/* AI lists — polished bullets */
.msg-bubble ul, .msg-bubble ol {
  padding-left: 0; margin: 10px 0; list-style: none;
}
.msg-bubble li {
  color: var(--text); margin-bottom: 6px;
  padding: 6px 12px 6px 28px;
  position: relative;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  border-left: 2px solid rgba(242,90,0,0.25);
  font-size: 13.5px; line-height: 1.6;
}
.msg-bubble li::before {
  content: '›';
  position: absolute; left: 10px; top: 6px;
  color: var(--orange); font-weight: 800; font-size: 14px;
}
.msg-bubble ol { counter-reset: ai-list; }
.msg-bubble ol li { counter-increment: ai-list; }
.msg-bubble ol li::before {
  content: counter(ai-list);
  font-size: 11px; font-weight: 800;
  color: var(--orange);
  background: rgba(242,90,0,0.10);
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; top: 7px; left: 5px;
}
.msg-bubble li strong { color: var(--orange); }

/* AI code blocks */
.msg-bubble .code-block {
  position: relative; margin: 12px 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
}
.msg-bubble .code-block .code-lang {
  position: absolute; top: 0; right: 0;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  padding: 3px 8px; border-radius: 0 0 0 6px;
}
.msg-bubble .code-block pre {
  margin: 0; padding: 14px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.msg-bubble .code-block code {
  background: none; border: none; padding: 0;
  color: var(--text-mid); font-size: 12px;
  line-height: 1.6; white-space: pre;
}

/* AI tables — clean data display */
.msg-bubble .table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 12px 0; border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.msg-bubble table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.msg-bubble th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--orange); border-bottom: 1px solid var(--border);
  background: rgba(242,90,0,0.04);
}
.msg-bubble td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-mid);
}
.msg-bubble tr:last-child td { border-bottom: none; }
.msg-bubble tr:hover td { color: var(--text); background: rgba(255,255,255,0.02); }

/* Message actions (copy etc) */
.msg-acts { display: flex; gap: 5px; opacity: 0; transition: opacity var(--duration) var(--ease); }
.msg-row:hover .msg-acts { opacity: 1; }
.msg-act {
  padding: 3px 9px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 4px; font-size: 10px; color: var(--text-dim);
  cursor: pointer; font-family: inherit;
  transition: all var(--duration) var(--ease);
}
.msg-act:hover { border-color: var(--border-hi); color: var(--text); }

/* Source card */
.source-card {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-left: 2px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: 11.5px; color: var(--text-dim); text-decoration: none;
  transition: all var(--duration) var(--ease); margin-top: 4px;
}
.source-card:hover { border-color: var(--orange); color: var(--text); background: var(--orange-dim); }
.source-card span { color: var(--orange); }

.no-docs {
  font-size: 11px; color: var(--text-dim);
  padding: 5px 10px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 5px; margin-top: 4px; display: inline-block;
}

/* Source citation pills */
.source-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.source-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  font-size: 10.5px; color: var(--text-dim); text-decoration: none;
  transition: all var(--duration) var(--ease);
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.source-pill:hover {
  border-color: var(--orange); color: var(--text);
  background: var(--orange-dim);
  box-shadow: 0 0 12px rgba(242,90,0,0.08);
}
.source-pill .sp-icon { color: var(--orange); flex-shrink: 0; }
.source-pill .sp-ai {
  font-size: 9px; color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px; border-radius: 3px;
  margin-left: auto; flex-shrink: 0;
}

/* Source Citation Cards */
.source-citations { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.source-cite {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: 11px; color: var(--text-dim); text-decoration: none;
  transition: all var(--duration) var(--ease);
  max-width: 320px; min-width: 180px;
}
.source-cite:hover {
  border-color: var(--orange); color: var(--text);
  background: var(--orange-dim);
  box-shadow: 0 0 16px rgba(242,90,0,0.10);
  transform: translateY(-1px);
}
.source-cite .sc-icon {
  font-size: 20px; flex-shrink: 0; line-height: 1;
}
.source-cite .sc-body { flex: 1; min-width: 0; }
.source-cite .sc-name {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-cite .sc-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.source-cite .sc-type {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--orange); background: rgba(242,90,0,0.12);
  padding: 1px 5px; border-radius: 3px;
}
.source-cite .sc-tab {
  font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.source-cite .sc-arrow {
  font-size: 13px; color: var(--orange); opacity: 0;
  transition: opacity var(--duration) var(--ease);
  flex-shrink: 0;
}
.source-cite:hover .sc-arrow { opacity: 1; }

/* Feedback buttons (thumbs up/down) */
.feedback-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fb-btn {
  background: none; border: 1px solid var(--glass-border);
  border-radius: 6px; padding: 4px 10px;
  cursor: pointer; font-size: 12px; color: var(--text-dim);
  transition: all var(--duration) var(--ease);
  display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.fb-btn:hover { border-color: var(--border-hi); color: var(--text); }
.fb-btn.voted { pointer-events: none; }
.fb-btn.voted.up { border-color: rgba(46,125,50,0.4); color: #2E7D32; background: rgba(46,125,50,0.06); }
.fb-btn.voted.down { border-color: rgba(198,40,40,0.4); color: #C62828; background: rgba(198,40,40,0.06); }

/* Thinking dots animation */
.think-row { display: flex; gap: 13px; align-items: flex-start; animation: fade-up 0.25s var(--ease-out); }
.think-dots { display: flex; align-items: center; gap: 5px; padding: 13px 17px; }
.think-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); opacity: 0.3;
  animation: think-bounce 1.3s var(--ease) infinite;
}
.think-dot:nth-child(2) { animation-delay: 0.22s; }
.think-dot:nth-child(3) { animation-delay: 0.44s; }
@keyframes think-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
  30% { transform: translateY(-8px) scale(1.15); opacity: 1; }
}

/* ── Agentic RAG Steps ── */
.agent-steps { padding: 4px 0; }
.agent-step {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; color: #a1a1aa; font-size: .82rem;
  animation: fade-up 0.2s var(--ease-out);
}
.agent-icon { color: var(--orange); font-size: .9rem; }
.agent-thinking {
  color: #71717a; font-size: .78rem; margin-top: 6px;
  animation: agent-pulse 1.5s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.agent-trail {
  border-left: 2px solid var(--orange);
  padding: 6px 0 8px 12px; margin-bottom: 12px;
  font-size: .78rem; color: #71717a;
}
.agent-trail-step { padding: 2px 0; }
.agent-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(242,90,0,.08); border: 1px solid rgba(242,90,0,.2);
  border-radius: 6px; padding: 3px 10px; font-size: .72rem;
  color: var(--orange); margin-bottom: 8px;
}

/* Input zone */
.input-zone {
  padding: 16px 40px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  flex-shrink: 0;
}
.input-box {
  background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 12px 14px;
  display: flex; align-items: flex-end; gap: 11px;
  transition: border-color var(--duration-slow) var(--ease),
              box-shadow var(--duration-slow) var(--ease);
  box-shadow: 0 6px 32px rgba(0,0,0,0.35);
}
.input-box:focus-within {
  border-color: rgba(242,90,0,0.45);
  box-shadow: 0 6px 36px rgba(242,90,0,0.1), 0 0 0 1px rgba(242,90,0,0.1), 0 0 60px rgba(242,90,0,0.04);
}

#user_input {
  flex: 1; background: transparent; border: none;
  color: var(--text); font-size: 14.5px; font-family: inherit;
  outline: none; resize: none;
  min-height: 26px; max-height: 150px;
  line-height: 1.6; overflow-y: auto;
}
#user_input::placeholder { color: var(--text-dim); }

.send-btn {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff; border: none;
  width: 38px; height: 38px; border-radius: 9px;
  cursor: pointer; display: flex; justify-content: center; align-items: center;
  transition: all var(--duration) var(--ease); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(242,90,0,0.2);
}
.send-btn:hover {
  box-shadow: 0 0 18px rgba(242,90,0,0.4);
  transform: scale(1.06);
}
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }

.input-hint { font-size: 10.5px; color: var(--text-dim); margin-top: 7px; padding: 0 4px; }

/* Scope / project selector — Ink on Paper header (HoistOS brand) */
.scope-select {
  background: var(--concrete, #F2F4F7);
  border: 1px solid rgba(17, 24, 39, 0.12);
  color: var(--ink, #111827); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; outline: none;
  transition: all var(--duration) var(--ease); max-width: 220px;
}
.scope-select option { color: #1a1a2e; background: #fff; }
.scope-select:hover { border-color: var(--signal, #F25A00); background: rgba(242, 90, 0, 0.08); }
.scope-select:focus { border-color: var(--signal, #F25A00); box-shadow: 0 0 0 3px rgba(242, 90, 0, 0.15); }
/* Header controls — HoistOS: Ink text on Paper header (was white-on-orange-gradient) */
.page-header .icon-btn {
  color: var(--steel, #6B8090);
  border-color: rgba(17, 24, 39, 0.12);
  background: var(--concrete, #F2F4F7);
}
.page-header .icon-btn:hover {
  color: var(--ink, #111827);
  border-color: var(--signal, #F25A00);
  background: rgba(242, 90, 0, 0.08);
}
/* Badges inside page-header — stand out via Signal color on white, not white-on-white */
.page-header .badge {
  color: var(--ink, #111827);
  background: var(--concrete, #F2F4F7);
  border-color: rgba(17, 24, 39, 0.08);
}
.page-header .badge-orange {
  color: var(--signal, #F25A00);
  background: rgba(242, 90, 0, 0.10);
  border-color: rgba(242, 90, 0, 0.25);
}
.page-header .badge-gold {
  color: #b45309;
  background: rgba(248, 104, 0, 0.10);
  border-color: rgba(248, 104, 0, 0.25);
}
/* Dark mode: keep the inverse treatment */
body[data-theme="dark"] .page-header .icon-btn {
  color: rgba(242, 244, 247, 0.8);
  border-color: rgba(242, 244, 247, 0.15);
  background: rgba(242, 244, 247, 0.05);
}
body[data-theme="dark"] .page-header .icon-btn:hover {
  color: #fff; border-color: var(--signal); background: rgba(242, 90, 0, 0.15);
}
body[data-theme="dark"] .page-header .badge {
  color: #F2F4F7; background: rgba(242, 244, 247, 0.08); border-color: rgba(242, 244, 247, 0.12);
}
body[data-theme="dark"] .page-header .badge-orange {
  color: var(--signal, #F25A00); background: rgba(242, 90, 0, 0.15); border-color: rgba(242, 90, 0, 0.35);
}
body[data-theme="dark"] .scope-select {
  color: #F2F4F7; background: rgba(242, 244, 247, 0.05); border-color: rgba(242, 244, 247, 0.15);
}
body[data-theme="dark"] .scope-select:hover { border-color: var(--signal, #F25A00); background: rgba(242, 90, 0, 0.15); }
body[data-theme="dark"] .scope-select:focus { border-color: var(--signal, #F25A00); box-shadow: 0 0 0 3px rgba(242, 90, 0, 0.25); }
.scope-badge {
  font-size: 10px; color: var(--orange); font-weight: 700;
  background: var(--orange-dim); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px;
}

/* Session History Panel */
.history-panel {
  width: 260px; background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
  transition: width var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.history-panel.collapsed { width: 0; opacity: 0; border: none; }
.history-header {
  padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.history-header-title { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.history-list { flex: 1; overflow-y: auto; padding: 8px; }
.history-header-actions { display: flex; align-items: center; gap: 4px; }
.history-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: all var(--duration) var(--ease);
  margin-bottom: 4px; border: 1px solid transparent;
  display: flex; align-items: flex-start; gap: 4px; position: relative;
}
.history-item:hover { background: var(--orange-dim); border-color: rgba(242,90,0,0.15); }
.history-item.active { background: var(--orange-dim); border-color: rgba(242,90,0,0.3); }
.history-item-content { flex: 1; min-width: 0; cursor: pointer; }
.history-item-preview {
  font-size: 12px; color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}
.history-item-meta { font-size: 10px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.history-item-meta .badge { font-size: 8px; padding: 1px 5px; }
.history-delete-btn {
  flex-shrink: 0; width: 20px; height: 20px; border: none; background: none;
  color: var(--text-dim); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.15s ease; margin-top: 2px;
}
.history-item:hover .history-delete-btn { opacity: 0.6; }
.history-delete-btn:hover { opacity: 1 !important; background: rgba(239,68,68,0.15); color: #ef4444; }
.history-empty { text-align: center; padding: 32px 16px; color: var(--text-dim); font-size: 11.5px; line-height: 1.7; }
.history-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer; border-radius: 6px;
  transition: all var(--duration) var(--ease);
}
.history-toggle:hover { background: rgba(242,90,0,0.1); }

/* ─────────────────────────────────────────
   CHAT RESPONSIVE — Tablet (iPad ~768-1024px)
───────────────────────────────────────── */
@media (max-width: 1024px) {
  /* History panel: slimmer on tablet */
  .history-panel { width: 220px; }
  .history-panel.collapsed { width: 0; }

  #chat_output { padding: 24px 24px; gap: 22px; }
  .input-zone { padding: 14px 24px 20px; }

  .msg-col { max-width: 85%; }

  /* AI bubble: ensure card style stays intact */
  .msg-row.ai .msg-bubble {
    padding: 16px 18px;
    font-size: 13.5px;
    line-height: 1.75;
  }

  .msg-row.user .msg-bubble {
    padding: 12px 16px;
    font-size: 13.5px;
  }

  /* Source pills: scroll horizontally on smaller screens */
  .source-pills { gap: 4px; }
  .source-pill { font-size: 9.5px; padding: 3px 8px; max-width: 220px; }

  .welcome-banner { padding: 40px 24px 28px; }
  .welcome-title { font-size: 22px; }
  .welcome-sub { font-size: 13px; max-width: 380px; }
  .welcome-icon { width: 60px; height: 60px; font-size: 28px; }

  .chips { gap: 6px; }
  .chip { padding: 8px 14px; font-size: 11.5px; }

  /* Scope select */
  .scope-select { max-width: 180px; font-size: 11px; }

  /* Page header: tighter on tablet */
  .chat-window .page-header { padding: 12px 20px; }
  .page-header-right .badge { font-size: 8px; padding: 2px 7px; }
}

/* ─────────────────────────────────────────
   CHAT RESPONSIVE — Phone (≤760px)
───────────────────────────────────────── */
@media (max-width: 760px) {
  /* Hide history on phone completely */
  .history-panel { display: none; }

  #chat_output { padding: 16px 14px; gap: 18px; }
  .input-zone { padding: 10px 14px 16px; }
  .input-box { padding: 10px 12px; border-radius: 14px; gap: 8px; }
  .input-hint { font-size: 9px; }

  .msg-col { max-width: 92%; }
  .msg-av { width: 28px; height: 28px; font-size: 10px; border-radius: 7px; }
  .msg-row { gap: 8px; }

  /* AI bubble: full width card on mobile */
  .msg-row.ai .msg-bubble {
    padding: 14px 14px;
    font-size: 13px;
    line-height: 1.7;
    border-radius: var(--r-sm);
  }

  .msg-row.user .msg-bubble {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: var(--r-sm) var(--r-sm) 3px var(--r-sm);
  }

  .msg-sender { font-size: 8px; letter-spacing: 0.8px; }

  /* Tables in chat: scroll horizontally on phone */
  .msg-bubble table { display: block; overflow-x: auto; white-space: nowrap; }
  .msg-bubble th { font-size: 9px; padding: 6px 8px; }
  .msg-bubble td { font-size: 11px; padding: 6px 8px; }

  /* Source pills: compact on mobile */
  .source-pills { gap: 4px; }
  .source-pill { font-size: 9px; padding: 3px 7px; max-width: 180px; border-radius: 10px; }

  .welcome-banner { padding: 32px 16px 24px; }
  .welcome-title { font-size: 20px; }
  .welcome-sub { font-size: 12px; max-width: 300px; line-height: 1.6; }
  .welcome-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }

  /* Chips: wrap properly on phone */
  .chips { gap: 5px; flex-wrap: wrap; justify-content: center; }
  .chip { padding: 7px 12px; font-size: 11px; white-space: nowrap; }

  /* Header: flex-wrap so right side drops below on tiny screens */
  .chat-window .page-header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .page-header-left { min-width: 0; flex: 1; }
  .page-header-right { gap: 6px; flex-wrap: nowrap; }
  .page-header-right .badge { display: none; }

  /* Scope select: smaller on phone */
  .scope-select { max-width: 110px; font-size: 10px; padding: 5px 8px; }

  /* Hide breadcrumb on phone — save space */
  .page-breadcrumb { display: none; }

  /* Page title: slightly smaller */
  .chat-window .page-title { font-size: 15px; }

  /* Feedback row: smaller */
  .fb-btn { padding: 3px 8px; font-size: 11px; }
  .feedback-row { gap: 4px; margin-top: 4px; }

  /* Send button: keep 44px min tap target */
  .send-btn { width: 38px; height: 38px; border-radius: 10px; }
  .icon-btn-mini { min-width: 38px; min-height: 38px; }
  #user_input { font-size: 14px; }

  /* File preview: tighter on mobile */
  .file-preview { padding: 8px 10px; }
  .chat-file-name { font-size: 11px; }
  .chat-file-size { font-size: 9px; }
}

/* ─────────────────────────────────────────
   CHAT RESPONSIVE — Small phone (≤480px)
───────────────────────────────────────── */
@media (max-width: 480px) {
  /* Scope select: hide the text, show icon only */
  .scope-select { max-width: 100px; font-size: 9px; padding: 4px 6px; }

  .chips { gap: 4px; }
  .chip { padding: 6px 10px; font-size: 10px; max-width: calc(50% - 4px); overflow: hidden; text-overflow: ellipsis; }

  .welcome-banner { padding: 28px 14px 20px; }
  .welcome-title { font-size: 18px; }
  .welcome-sub { font-size: 11.5px; max-width: 260px; }
  .welcome-icon { width: 44px; height: 44px; font-size: 20px; }
}

/* ─────────────────────────────────────────
   CHAT RESPONSIVE — Tiny phone (≤400px)
───────────────────────────────────────── */
@media (max-width: 400px) {
  #chat_output { padding: 12px 10px; gap: 14px; }
  .input-zone { padding: 8px 10px 14px; }
  .msg-col { max-width: 95%; }
  .msg-av { width: 24px; height: 24px; font-size: 9px; }
  .msg-row.ai .msg-bubble { padding: 12px; font-size: 12.5px; }
  .welcome-banner { padding: 24px 12px 20px; }
  .welcome-title { font-size: 17px; }
  .chip { padding: 5px 8px; font-size: 9.5px; }
  .source-pill { max-width: 140px; font-size: 8.5px; }

  /* New chat button: icon only */
  .chat-window .page-header-right .icon-btn span { display: none; }
}

/* ─────────────────────────────────────────
   EMOJI STATE ICONS (drive, empty states)
───────────────────────────────────────── */
.emoji-icon-lg { font-size: 32px; margin-bottom: 12px; }
.emoji-icon-xl { font-size: 48px; margin-bottom: 16px; }
.emoji-icon-md { font-size: 28px; margin-bottom: 12px; }

/* ─────────────────────────────────────────
   ACCESS DENIED PAGE (auth.php)
───────────────────────────────────────── */
.access-denied-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.access-denied-wrap { text-align: center; color: var(--text-mid); }
.access-denied-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.access-denied-msg { font-size: 13px; margin-bottom: 24px; }

/* ─────────────────────────────────────────
   PEOPLE AVATAR INACTIVE STATE
───────────────────────────────────────── */
.people-avatar-inactive { opacity: 0.4; border-color: var(--border); }

/* ─────────────────────────────────────────
   APEXCHARTS — Dark Theme & Containers
───────────────────────────────────────── */
.chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.chart-wrap { width: 100%; min-height: 240px; }
.chart-wrap-sm { min-height: 200px; }

/* ApexCharts dark overrides */
.apexcharts-canvas { background: transparent !important; }
.apexcharts-tooltip { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }
.apexcharts-tooltip-title { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; font-size: 12px !important; }
.apexcharts-tooltip-text { color: var(--text) !important; }
.apexcharts-tooltip-series-group { padding: 4px 8px !important; }
.apexcharts-xaxistooltip { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text-mid) !important; }
.apexcharts-xaxistooltip-bottom::before,
.apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--border) !important; }
.apexcharts-legend-text { color: var(--text-mid) !important; }
.apexcharts-datalabel { fill: var(--text) !important; }
.apexcharts-pie-label { fill: #fff !important; filter: none !important; }
.apexcharts-gridline { stroke: rgba(255,255,255,0.06) !important; }

/* Chart row responsive */
@media (max-width: 960px) {
    .chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .chart-wrap { min-height: 200px; }
    .chart-wrap-sm { min-height: 180px; }
}

/* ─────────────────────────────────────────
   ESTIMATING PAGE — Benchmarks, Sanity Check
───────────────────────────────────────── */
.benchmark-table { display: flex; flex-direction: column; gap: 0; }
.benchmark-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.benchmark-row:last-child { border-bottom: none; }
.benchmark-label { font-size: 12px; color: var(--text-mid); }
.benchmark-val { font-size: 13px; font-weight: 700; color: var(--text); }

.sanity-result { margin-top: 14px; padding: 14px; border-radius: 10px; background: rgba(242,90,0,0.08); border: 1px solid rgba(242,90,0,0.2); font-size: 12.5px; color: var(--text); line-height: 1.7; }
.sanity-result ul { margin: 6px 0; padding-left: 18px; }
.sanity-result li { margin-bottom: 4px; }
.sanity-title { font-size: 13px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }

/* ─────────────────────────────────────────
   PROPOSAL PAGE — Cards, Signature, Modal, Preview
───────────────────────────────────────── */
.proposal-card { padding: 18px; }
.sig-canvas-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: rgba(255,255,255,0.02); }
.sig-canvas { width: 100%; height: 120px; border-radius: 6px; cursor: crosshair; }
.sig-preview-img { max-height: 60px; margin-top: 8px; border-radius: 4px; }

.proposal-preview { max-height: 70vh; overflow-y: auto; padding: 20px; }
.proposal-preview-inner { color: var(--text); }
.proposal-preview-title { font-size: 20px; font-weight: 800; color: var(--orange); margin-bottom: 8px; }
.proposal-total { font-size: 18px; font-weight: 800; color: var(--orange); text-align: right; margin: 16px 0; padding-top: 10px; border-top: 2px solid var(--border); }
.proposal-notes { margin-top: 16px; font-size: 12px; color: var(--text-mid); line-height: 1.6; }

.data-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.data-table th { background: rgba(255,255,255,0.06); color: var(--text-mid); padding: 8px 10px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.text-right { text-align: right; }

/* Modal system — v6 pages (proposals, punchlist, schedule, dailylog) */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-wrap.hidden { display: none !important; }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 520px; padding: 24px; box-shadow: 0 24px 48px rgba(0,0,0,0.5); z-index: 1001; }
.modal-box-lg { max-width: 700px; }
.modal-box-xl { max-width: 960px; max-height: 90vh; overflow-y: auto; }

/* ── Proposal Creation Grid ── */
.proposal-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .proposal-create-grid { grid-template-columns: 1fr; } }
.proposal-create-left { min-width: 0; }
.proposal-create-right { min-width: 0; display: flex; flex-direction: column; }
.proposal-items-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.proposal-items-summary { padding: 8px 12px; background: rgba(242,90,0,0.1); border-radius: 8px; font-size: 12px; color: var(--orange); margin-bottom: 10px; }
.proposal-items-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.proposal-section-head { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px 4px; margin-top: 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.proposal-item-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.proposal-item-row:hover { background: rgba(255,255,255,0.04); }
.proposal-item-row.selected { background: rgba(242,90,0,0.08); }
.proposal-item-cb { flex-shrink: 0; accent-color: var(--orange); width: 16px; height: 16px; }
.proposal-item-info { flex: 1; min-width: 0; }
.proposal-item-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proposal-item-meta { font-size: 10px; color: var(--text-dim); }
.proposal-item-price { font-size: 12px; font-weight: 700; color: var(--orange); white-space: nowrap; }

/* ── Proposal Mode Toggle ── */
.proposal-mode-toggle { display: flex; gap: 0; margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--input-bg); }
.proposal-mode-btn { flex: 1; padding: 11px 16px; background: transparent; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; letter-spacing: 0.2px; }
.proposal-mode-btn.active { background: var(--orange); color: #fff; box-shadow: 0 2px 8px rgba(242,90,0,0.3); }
.proposal-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); }

/* ── Manual Line Items ── */
.manual-items-wrap { max-height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.manual-item-labels {
  display: grid; grid-template-columns: 140px 1fr 60px 100px 32px; gap: 8px;
  padding: 8px 12px 6px; font-size: 9px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.manual-item-row {
  display: grid; grid-template-columns: 140px 1fr 60px 100px 32px; gap: 8px;
  align-items: start; padding: 10px 12px; margin-bottom: 4px;
  background: rgba(255,255,255,0.02); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04); transition: border-color 0.15s;
}
.manual-item-row:hover { border-color: rgba(255,255,255,0.08); }
.manual-item-row:focus-within { border-color: rgba(242,90,0,0.3); background: rgba(242,90,0,0.03); }
.manual-item-row input,
.manual-item-row input[type="text"],
.manual-item-row input[type="number"],
.manual-item-row textarea {
  width: 100%; padding: 8px 10px; background: var(--input-bg) !important;
  border: 1px solid var(--border) !important; border-radius: 6px;
  color: var(--text) !important; font-size: 12px; font-family: inherit;
  -webkit-appearance: none; -moz-appearance: textfield;
}
.manual-item-row textarea { resize: vertical; min-height: 36px; font-size: 11px; line-height: 1.5; }
.manual-item-row input:focus,
.manual-item-row input[type="text"]:focus,
.manual-item-row input[type="number"]:focus,
.manual-item-row textarea:focus { outline: none; border-color: var(--orange) !important; box-shadow: 0 0 0 2px rgba(242,90,0,0.15); }
.manual-item-row input::placeholder, .manual-item-row textarea::placeholder { color: var(--text-dim); opacity: 0.5; }
/* Hide number spinner */
.manual-item-row input[type="number"]::-webkit-inner-spin-button,
.manual-item-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.manual-remove-btn {
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(255,80,80,0.2);
  background: rgba(255,80,80,0.06); color: #ff5050; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.manual-remove-btn:hover { background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.4); }
.manual-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px; margin-top: 8px;
  border: 1px dashed rgba(242,90,0,0.3); border-radius: 8px;
  background: rgba(242,90,0,0.03); color: var(--orange);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.manual-add-btn:hover { background: rgba(242,90,0,0.08); border-color: var(--orange); }
@media (max-width: 768px) {
  .manual-item-row { grid-template-columns: 1fr 1fr 32px; gap: 6px; padding: 8px; }
  .manual-item-labels { display: none; }
  .manual-item-row textarea { grid-column: 1 / -1; }
  .manual-item-row input[data-field="location"] { grid-column: 1 / 3; }
  .manual-item-row .manual-remove-btn { grid-row: 1; grid-column: 3; }
}

/* ── Display Options ── */
.display-options { display: flex; gap: 8px; flex-wrap: wrap; }
.display-opt-btn {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--input-bg); color: var(--text-dim); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap;
}
.display-opt-btn.active { border-color: var(--orange); background: rgba(242,90,0,0.15); color: var(--orange); }
.display-opt-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text); }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-mid); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-family: inherit; }
.form-input:focus { outline: none; border-color: var(--orange); }
select.form-input { cursor: pointer; }
select.form-input option { background: var(--card-solid); color: var(--text); padding: 8px; }
select.form-input option:checked { background: var(--orange); color: #fff; }
textarea.form-input { resize: vertical; min-height: 60px; }

/* ─────────────────────────────────────────
   DAILY LOG — Form, Cards, Photos
───────────────────────────────────────── */
.daily-form-card { max-width: 680px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.photo-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.daily-log-card { padding: 18px; }
.daily-log-body { margin-top: 12px; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.daily-log-section { margin-bottom: 10px; }
.daily-log-section strong { font-size: 11px; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.5px; }
.daily-log-section p { margin-top: 4px; }
.daily-log-issues { padding: 10px; background: rgba(234,179,8,0.06); border-radius: 8px; border-left: 3px solid var(--warning); }
.daily-log-footer { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ─────────────────────────────────────────
   MERMAID.JS — Dark theme overrides in chat
───────────────────────────────────────── */
.mermaid { background: transparent; max-width: 100%; overflow-x: auto; margin: 12px 0; border-radius: 10px; padding: 12px; border: 1px solid var(--border); min-height: 60px; }
.mermaid svg { max-width: 100%; height: auto; overflow: hidden; }
.mermaid > style, .mermaid svg > style { display: none !important; }
.mermaid:not([data-processed="true"]):not(:has(svg)) { font-size: 0; color: transparent; min-height: 80px; background: rgba(242,90,0,0.04); }
.mermaid .node rect, .mermaid .node circle, .mermaid .node polygon { fill: rgba(242,90,0,0.15) !important; stroke: var(--orange) !important; }
.mermaid .nodeLabel, .mermaid .label { color: var(--text) !important; fill: var(--text) !important; }
.mermaid .edgePath .path { stroke: var(--gold) !important; }
.mermaid .edgeLabel { color: var(--text-mid) !important; fill: var(--text-mid) !important; }

/* Gantt chart — brand overrides */
.mermaid .mermaid-main-font { font-family: 'Inter', 'DM Sans', system-ui, sans-serif !important; }
.mermaid .titleText { fill: var(--text) !important; font-size: 15px !important; font-weight: 700 !important; }
.mermaid .grid .tick text { font-size: 10px !important; fill: var(--text-mid) !important; }
.mermaid .grid .tick line { stroke: rgba(242,90,0,0.10) !important; }
.mermaid .section0 { fill: rgba(242,90,0,0.06) !important; }
.mermaid .section1 { fill: rgba(255,255,255,0.02) !important; }
.mermaid .section2 { fill: rgba(242,90,0,0.06) !important; }
.mermaid .section3 { fill: rgba(255,255,255,0.02) !important; }
.mermaid .sectionTitle, .mermaid .sectionTitle0, .mermaid .sectionTitle1,
.mermaid .sectionTitle2, .mermaid .sectionTitle3 { fill: var(--text) !important; font-size: 13px !important; font-weight: 600 !important; }
.mermaid .task { stroke-width: 1px !important; }
.mermaid .task0, .mermaid .task2 { fill: var(--orange) !important; stroke: #D04E00 !important; }
.mermaid .task1, .mermaid .task3 { fill: #d4571f !important; stroke: #b34518 !important; }
.mermaid .taskText, .mermaid .taskTextOutsideRight, .mermaid .taskTextOutsideLeft { fill: #fff !important; font-size: 11px !important; font-weight: 500 !important; }
.mermaid .taskTextOutsideRight, .mermaid .taskTextOutsideLeft { fill: var(--text) !important; }
.mermaid .done0, .mermaid .done1, .mermaid .done2, .mermaid .done3 { fill: #34d399 !important; stroke: #059669 !important; }
.mermaid .active0, .mermaid .active1, .mermaid .active2, .mermaid .active3 { fill: var(--gold) !important; stroke: #d4911a !important; }
.mermaid .crit0, .mermaid .crit1, .mermaid .crit2, .mermaid .crit3 { fill: #f87171 !important; stroke: #dc2626 !important; }
.mermaid .todayMarker { stroke: #f87171 !important; stroke-width: 2px !important; }
.mermaid .milestone { transform: rotate(45deg); }
.mermaid { padding-bottom: 20px; position: relative; }
.diagram-dl-btn {
    position: absolute; top: 8px; right: 8px; z-index: 10;
    background: linear-gradient(135deg, #F25A00 0%, #D04E00 100%);
    color: #fff; border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: 'Inter', 'DM Sans', sans-serif;
    opacity: 0.85; transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(242,90,0,0.3);
}
.diagram-dl-btn:hover { opacity: 1; transform: translateY(-1px); }
.diagram-dl-btn:disabled { opacity: 0.5; cursor: wait; }

/* ─────────────────────────────────────────
   KANBAN BOARD — Punch List
───────────────────────────────────────── */
.kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; min-height: 400px; }
@media (max-width: 960px) { .kanban-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kanban-board { grid-template-columns: 1fr; } }

.kanban-column { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.kanban-header { display: flex; align-items: center; gap: 8px; padding: 6px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.kanban-header-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-header-label { font-size: 12px; font-weight: 700; color: var(--text); flex: 1; }

.kanban-items { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; transition: background 0.15s; }
.kanban-items.kanban-drop-target { background: rgba(242,90,0,0.08); }

.kanban-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: grab; position: relative; transition: transform 0.12s, box-shadow 0.12s; }
.kanban-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.kanban-item.kanban-dragging { opacity: 0.4; }
.kanban-item-priority { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.kanban-item-desc { font-size: 12px; color: var(--text); line-height: 1.5; margin-left: 8px; margin-bottom: 6px; }
.kanban-item-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.kanban-empty { font-size: 11px; color: var(--text-dim); text-align: center; padding: 20px 10px; }

.btn-danger { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { opacity: 0.9; }

/* ─────────────────────────────────────────
   FULLCALENDAR — Dark Theme Overrides
───────────────────────────────────────── */
.fc-dark { --fc-border-color: var(--border); --fc-button-bg-color: var(--card); --fc-button-border-color: var(--border); --fc-button-text-color: var(--text); --fc-button-hover-bg-color: rgba(242,90,0,0.2); --fc-button-hover-border-color: var(--orange); --fc-button-active-bg-color: var(--orange); --fc-button-active-border-color: var(--orange); --fc-today-bg-color: rgba(242,90,0,0.08); --fc-neutral-bg-color: var(--card); --fc-page-bg-color: transparent; --fc-event-bg-color: var(--orange); --fc-event-border-color: transparent; }
.fc-dark .fc-toolbar-title { color: var(--text); font-family: 'Inter', 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; }
.fc-dark .fc-col-header-cell-cushion { color: var(--text-mid); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.fc-dark .fc-daygrid-day-number { color: var(--text-mid); font-size: 12px; }
.fc-dark .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: var(--orange); font-weight: 700; }
.fc-dark .fc-event { border-radius: 4px; font-size: 11px; padding: 2px 4px; }
.fc-dark .fc-button { font-size: 11px; border-radius: 6px; font-family: 'Inter', 'DM Sans', system-ui, sans-serif; }
.fc-dark .fc-list-event-title a { color: var(--text); }
.fc-dark .fc-list-day-cushion { background: rgba(255,255,255,0.03); }
.fc-dark th { border-color: var(--border); }
.fc-dark td { border-color: var(--border); }

/* ─────────────────────────────────────────
   GANTT CHART — CSS-based timeline
───────────────────────────────────────── */
.gantt-chart { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.gantt-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.gantt-row:last-child { border-bottom: none; }
.gantt-label { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-type-icon { margin-right: 4px; }
.gantt-track { position: relative; height: 24px; background: rgba(255,255,255,0.03); border-radius: 4px; overflow: hidden; }
.gantt-bar { position: absolute; top: 2px; height: 20px; border-radius: 3px; min-width: 8px; opacity: 0.85; }
.gantt-bar:hover { opacity: 1; }

@media (max-width: 760px) {
    .gantt-row { grid-template-columns: 140px 1fr; }
    .gantt-label { font-size: 11px; }
}

/* ─────────────────────────────────────────
   BID PIPELINE BOARD (CEO Dashboard)
───────────────────────────────────────── */
.pipeline-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 4px 0; }
@media (max-width: 1100px) { .pipeline-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .pipeline-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .pipeline-board { grid-template-columns: 1fr; } }

.pipeline-col { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; min-height: 120px; }
.pipeline-col-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.pipeline-col-title { font-size: 12px; font-weight: 700; color: var(--text); }
.pipeline-col-count { font-size: 18px; font-weight: 800; }
.pipeline-col-total { font-size: 11px; color: var(--text-mid); margin-bottom: 10px; font-weight: 600; }

.pipeline-col-items { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.pipeline-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.15s; }
.pipeline-card:hover { border-color: var(--orange); background: var(--card-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.pipeline-card-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.pipeline-card-client { font-size: 11px; color: var(--text-mid); margin-bottom: 6px; }
.pipeline-card-amount { font-size: 14px; font-weight: 800; color: var(--orange); }
.pipeline-card-followup { font-size: 10px; color: var(--gold); margin-top: 6px; font-weight: 600; }

.pipeline-empty { font-size: 11px; color: var(--text-dim); text-align: center; padding: 20px 8px; font-style: italic; }

/* ─────────────────────────────────────────
   VIEW TOGGLE (Calendar/Gantt)
───────────────────────────────────────── */
.view-toggle { display: flex; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-btn { padding: 6px 14px; font-size: 12px; font-weight: 600; font-family: inherit; background: transparent; border: none; color: var(--text-dim); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.view-btn.active { background: var(--orange); color: #fff; }
.view-btn:hover:not(.active) { color: var(--text); }

/* ─────────────────────────────────────────
   COLOR PICKER (Schedule Modal)
───────────────────────────────────────── */
.color-picker-row { display: flex; gap: 8px; margin-top: 4px; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.15s; padding: 0; }
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.3); transform: scale(1.15); }

/* ─────────────────────────────────────────
   FULLCALENDAR — Dark Theme Overrides
───────────────────────────────────────── */
.fc { font-family: 'Inter', 'DM Sans', system-ui, sans-serif; }
.fc .fc-toolbar-title { font-size: 16px; font-weight: 800; color: var(--text); }
.fc .fc-button { background: var(--card-solid); border: 1px solid var(--border); color: var(--text-mid); font-size: 12px; font-weight: 600; font-family: inherit; padding: 6px 12px; border-radius: 8px; text-transform: capitalize; }
.fc .fc-button:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-hi); }
.fc .fc-button-active, .fc .fc-button:active { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.fc .fc-button:focus { box-shadow: 0 0 0 2px rgba(242,90,0,0.3); }
.fc .fc-today-button:disabled { opacity: 0.3; }

.fc .fc-col-header-cell { background: rgba(255,255,255,0.02); border-color: var(--border); }
.fc .fc-col-header-cell-cushion { color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 8px 4px; text-decoration: none; }
.fc .fc-daygrid-day { border-color: var(--border); }
.fc .fc-daygrid-day-number { color: var(--text-mid); font-size: 12px; font-weight: 600; text-decoration: none; padding: 6px 8px; }
.fc .fc-day-today { background: rgba(242,90,0,0.06) !important; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--orange); font-weight: 800; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--text-xs); }

.fc .fc-daygrid-event { border-radius: 4px; font-size: 11px; font-weight: 600; padding: 2px 4px; border: none; cursor: pointer; }
.fc .fc-daygrid-event:hover { filter: brightness(1.15); }
.fc .fc-daygrid-dot-event .fc-event-title { font-weight: 600; }
.fc .fc-event-time { font-size: 10px; }

.fc .fc-scrollgrid { border-color: var(--border); }
.fc .fc-scrollgrid td, .fc .fc-scrollgrid th { border-color: var(--border); }
.fc .fc-timegrid-slot { border-color: var(--border); }
.fc .fc-timegrid-slot-label-cushion { color: var(--text-dim); font-size: 10px; }
.fc .fc-list-event:hover td { background: var(--card-hover); }
.fc .fc-list-day-cushion { background: rgba(255,255,255,0.03); }
.fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--text); font-weight: 700; text-decoration: none; }
.fc .fc-list-event-time { color: var(--text-dim); }
.fc .fc-list-event-title a { color: var(--text); text-decoration: none; }
.fc .fc-list-empty-cushion { color: var(--text-dim); }

.fc .fc-highlight { background: rgba(242,90,0,0.12); }
.fc .fc-daygrid-body, .fc .fc-scrollgrid-section > td { background: transparent; }
.fc table { background: transparent; }

/* Time grid (week view) — force dark backgrounds */
.fc .fc-timegrid-col { background: transparent !important; }
.fc .fc-timegrid-col.fc-day-today { background: rgba(242,90,0,0.06) !important; }
.fc .fc-timegrid-slot { height: 36px; }
.fc .fc-timegrid-slot-label { background: transparent !important; }
.fc .fc-timegrid-axis { background: transparent !important; border-color: var(--border); }
.fc .fc-timegrid-divider { display: none; }
.fc .fc-timegrid-event { border-radius: 4px; border: none; font-size: 11px; }
.fc td, .fc th { background: transparent !important; }
.fc .fc-scrollgrid { background: transparent !important; }
.fc .fc-day-sat, .fc .fc-day-sun { background: rgba(255,255,255,0.015) !important; }
.fc .fc-day-today { background: rgba(242,90,0,0.06) !important; }
.fc .fc-timegrid-now-indicator-line { border-color: var(--orange); }
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--orange); color: var(--orange); }
.fc .fc-timegrid-col-frame { background: transparent !important; }
.fc .fc-timegrid-bg-harness { background: transparent !important; }
.fc .fc-non-business { background: transparent !important; }
.fc .fc-bg-event { background: transparent !important; }

/* List view dark */
.fc .fc-list { border-color: var(--border); }
.fc .fc-list-table td { border-color: var(--border); }
.fc .fc-list-day-cushion { background: rgba(255,255,255,0.03) !important; }

/* Popover / more link */
.fc .fc-more-link { color: var(--orange); font-weight: 700; font-size: 11px; }
.fc .fc-popover { background: var(--card-solid); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.fc .fc-popover-header { background: rgba(255,255,255,0.03); color: var(--text); font-weight: 700; font-size: 12px; }
.fc .fc-popover-body { background: var(--card-solid); }

/* ============================================================
   FLATPICKR — Dark Theme Overrides
   ============================================================ */
.flatpickr-calendar {
  background: var(--card-solid) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif !important;
  width: 280px !important;
}
.flatpickr-months { background: rgba(242,90,0,0.06); border-radius: 12px 12px 0 0; padding: 6px 0; }
.flatpickr-months .flatpickr-month { color: var(--text) !important; fill: var(--text) !important; height: 34px !important; }
.flatpickr-current-month { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; }
.flatpickr-current-month .numInputWrapper span { display: none; }
.flatpickr-current-month input.cur-year { color: var(--text) !important; font-weight: 700 !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--orange) !important; color: var(--orange) !important; padding: 8px !important; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: #fff !important; fill: #fff !important; }
span.flatpickr-weekday { color: var(--orange) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px; }
.flatpickr-day {
  color: var(--text-mid) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  margin: 1px !important;
  border: none !important;
}
.flatpickr-day:hover { background: rgba(242,90,0,0.15) !important; color: #fff !important; }
.flatpickr-day.today { background: rgba(242,90,0,0.12) !important; color: var(--orange) !important; font-weight: 800 !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--orange) !important; color: #fff !important; font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(242,90,0,0.35) !important;
}
.flatpickr-day.inRange { background: rgba(242,90,0,0.12) !important; color: var(--text) !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-dim) !important; opacity: 0.4; }
.flatpickr-day.flatpickr-disabled { color: var(--text-dim) !important; opacity: 0.2 !important; }
.flatpickr-innerContainer { border-bottom: none !important; }
.flatpickr-rContainer { padding: 4px 8px 8px; }
.flatpickr-calendar::before, .flatpickr-calendar::after { border-bottom-color: var(--card-solid) !important; }
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border) !important; }

/* Flatpickr input style */
input.flatpickr-input { cursor: pointer !important; }

/* ============================================================
   KEYBOARD SHORTCUTS HELP MODAL
   ============================================================ */
.shortcut-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.shortcut-overlay.open { opacity: 1; visibility: visible; }
.shortcut-modal {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  width: 420px; max-width: 90vw;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.shortcut-modal h3 {
  font-size: 15px; font-weight: 800;
  color: var(--orange); margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.shortcut-modal .shortcut-sub {
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 20px;
}
.shortcut-group-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-dim); margin: 16px 0 8px;
}
.shortcut-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-label { font-size: 13px; color: var(--text-mid); }
.shortcut-keys { display: flex; gap: 4px; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 7px;
  font-size: 11px; font-weight: 700; font-family: 'DM Sans', monospace;
  color: var(--text); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE v2.0 — Comprehensive Phone/Tablet Support
   Breakpoints: 960 (tablet), 768, 600 (phone), 480, 400 (tiny)
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL: Prevent horizontal overflow ────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* ── TABLET (≤960px): Sidebar overlay + stack grids ─────────── */
@media (max-width: 960px) {
  /* Main content takes full width when sidebar is overlay */
  .app-layout { width: 100vw; }

  /* Settings page: full width cards */
  .set-grid { grid-template-columns: 1fr !important; }
  .set-card { max-width: 100%; }

  /* Estimating dashboard grids */
  .est-grid { grid-template-columns: 1fr !important; }

  /* Tables: horizontal scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr { display: table; width: 100%; table-layout: fixed; }

  /* Charts/ApexCharts responsive */
  .apexcharts-canvas { max-width: 100% !important; }

  /* Source citation cards: scroll horizontally */
  .source-citations { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .source-cite { flex-shrink: 0; min-width: 180px; }

  /* Modal positioning */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100vw !important; border-radius: 16px 16px 0 0; max-height: 90vh; overflow-y: auto; margin: 0; }

  /* Hide keyboard shortcuts on touch devices */
  .shortcut-overlay { display: none !important; }
}

/* ── PHONE (≤768px): Tighter spacing ────────────────────────── */
@media (max-width: 768px) {
  /* Page header: wrap properly */
  .page-header { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .page-header-left { flex: 1 1 100%; }
  .page-header-right { flex: 1 1 100%; justify-content: flex-start; }

  /* Stats row: 2 columns */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* All grids single col */
  .grid-main, .grid-2, .grid-3, .dash-grid { grid-template-columns: 1fr !important; }

  /* Source citations: wrap on phone for readability */
  .source-citations { flex-wrap: wrap; overflow-x: visible; }
  .source-cite { min-width: 0; flex: 1 1 calc(50% - 4px); max-width: none; }

  /* Settings page specific */
  .set-grid { gap: 16px !important; }
  .set-row { flex-direction: column !important; gap: 12px; }
  .set-label { width: 100% !important; min-width: 0 !important; }
  .set-control { width: 100% !important; }

  /* Theme picker: scroll if needed */
  .theme-picker { flex-wrap: wrap !important; gap: 8px; }
  .theme-opt { min-width: 80px; }

  /* Version card changelog */
  .changelog-grid { grid-template-columns: 1fr !important; }

  /* Plugin grid */
  .plugin-grid { grid-template-columns: 1fr !important; }

  /* Processing tiles */
  .proc-tiles { grid-template-columns: 1fr 1fr !important; }

  /* Enforcer layout */
  .enf-layout { grid-template-columns: 1fr !important; }
  .enf-sidebar { display: none; }

  /* Insights charts */
  .insights-grid { grid-template-columns: 1fr !important; }

  /* Users table: scroll */
  .users-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* HR/Legal/Vendor grids */
  .hr-grid, .legal-grid, .vendor-grid { grid-template-columns: 1fr !important; }

  /* Schedule: hide gantt, show calendar only */
  .gantt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Export row in sidebar */
  .sidebar-export-row { flex-direction: column; gap: 6px; }
  .sidebar-export-btn { width: 100%; text-align: center; }
}

/* ── PHONE (≤600px): Maximum compression ────────────────────── */
@media (max-width: 600px) {
  /* Page content: tight padding */
  .page-content { padding: 12px 12px 24px !important; }
  .page-header { padding: 10px 12px !important; }

  /* Page title: smaller */
  .page-title { font-size: 16px !important; }
  .page-breadcrumb { font-size: 8px; display: none; }

  /* Cards: tighter */
  .card { padding: 14px !important; border-radius: 10px; }
  .card-header { flex-wrap: wrap; gap: 6px; }
  .card-title { font-size: 13px; }

  /* Stats: compact */
  .stat-card { padding: 12px 14px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; font-size: 16px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 8.5px; }

  /* Buttons: touch-friendly */
  .btn { min-height: 40px; font-size: 12px; padding: 8px 14px; }
  .btn-sm { min-height: 36px; font-size: 11px; padding: 6px 12px; }

  /* Badges */
  .badge { font-size: 8px; padding: 2px 6px; }

  /* Tables: smaller text */
  th { font-size: 9px !important; padding: 6px 8px !important; white-space: nowrap; }
  td { font-size: 11px !important; padding: 6px 8px !important; }

  /* Section titles */
  .section-title { font-size: 14px; }
  .section-desc { font-size: 11px; }

  /* Modals: full screen on phone */
  .modal { max-width: 100vw !important; max-height: 95vh; border-radius: 12px 12px 0 0; }
  .modal-body { padding: 16px !important; }

  /* Status rows */
  .status-row { font-size: 11px; flex-wrap: wrap; gap: 4px; }

  /* Data lists */
  .data-item { padding: 10px 12px; font-size: 12px; }
  .data-label { font-size: 10px; }

  /* Activity feed */
  .activity-item { padding: 10px; font-size: 11px; }

  /* Proposals */
  .proposal-create-grid { grid-template-columns: 1fr !important; }

  /* Drag & drop zone: tighter */
  .drop-zone { padding: 24px 16px; }
  .drop-zone-title { font-size: 14px; }
  .drop-zone-sub { font-size: 11px; }

  /* Source cite cards */
  .source-cite { flex: 1 1 100%; }
  .source-cite .sc-name { font-size: 10px; }
  .source-cite .sc-meta { font-size: 8px; }

  /* No-docs message */
  .no-docs { font-size: 11px; padding: 8px 10px; }

  /* Hide non-essential on phone */
  .sidebar-version { font-size: 8px; }
  .sidebar-date-str { font-size: 9px; }
}

/* ── SMALL PHONE (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  /* Stats: single column */
  .stats-row { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { flex-direction: row; text-align: left; }

  /* Processing tiles */
  .proc-tiles { grid-template-columns: 1fr !important; }

  /* Kanban: single column */
  .kanban-board { grid-template-columns: 1fr !important; }
  .kanban-column { margin-bottom: 12px; }

  /* Pipeline board */
  .pipeline-board { grid-template-columns: 1fr !important; }

  /* Form inputs: full width */
  .form-input { font-size: 16px !important; } /* Prevents iOS zoom */

  /* Calendar */
  .fc { font-size: 11px; }
  .fc-toolbar { flex-direction: column; gap: 8px; }
  .fc-toolbar-title { font-size: 14px !important; }

  /* Page header */
  .page-header-right { gap: 4px; }
  .page-header-right .badge { display: none; }

  /* Sidebar logo */
  .sidebar-logo-wrap { padding: 16px 14px 12px; }
  .sidebar-logo-img { max-width: 120px; }
  .sidebar-os-label { font-size: 7px; }
}

/* ── TINY PHONE (≤400px) ───────────────────────────────────── */
@media (max-width: 400px) {
  .page-content { padding: 10px 8px 20px !important; }
  .page-header { padding: 8px 10px !important; }
  .page-title { font-size: 14px !important; }
  .card { padding: 12px !important; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 8px; }
  .btn { font-size: 11px; padding: 6px 10px; min-height: 36px; }
}

/* ── iOS SAFE AREAS ────────────────────────────────────────── */
@supports (padding: max(0px)) {
  .input-zone { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .sidebar { padding-top: max(0px, env(safe-area-inset-top)); }
  .page-content { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that don't work on touch */
  .stat-card:hover { transform: none; box-shadow: var(--shadow); }
  .card:hover { transform: none; }
  .nav-item:hover { background: transparent; }
  .chip:hover { transform: none; }
  .kanban-item:hover { transform: none; }

  /* Larger tap targets */
  .nav-item { padding: 10px 16px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .fb-btn { min-width: 40px; min-height: 40px; }

  /* Smooth scrolling everywhere */
  * { -webkit-overflow-scrolling: touch; }

  /* Disable text selection on interactive elements */
  .btn, .chip, .nav-item, .icon-btn, .send-btn { -webkit-user-select: none; user-select: none; }
}

/* ── LANDSCAPE PHONE ───────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar { height: 100vh; overflow-y: auto; }
  .welcome-banner { padding: 16px 12px !important; }
  .welcome-icon { width: 36px; height: 36px; font-size: 18px; }
  .welcome-title { font-size: 16px; }
  .chips { gap: 4px; }
  .chip { padding: 5px 10px; font-size: 10px; }
  #chat_output { padding: 10px 12px !important; gap: 12px; }
  .input-zone { padding: 6px 12px 8px !important; }
}

/* ── PRINT STYLES ──────────────────────────────────────────── */
@media print {
  .sidebar, .page-header, .input-zone, .feedback-row, .msg-acts,
  .icon-btn, .send-btn, .nav-item, .hamburger-btn { display: none !important; }
  .app-layout { display: block; }
  .page-content { padding: 0; overflow: visible; }
  .chat-window { height: auto; max-height: none; overflow: visible; }
  #chat_output { height: auto; max-height: none; overflow: visible; padding: 0; }
  .msg-bubble { box-shadow: none; border: 1px solid #ddd; }
  body { background: #fff; color: #000; }
}