/* ================================================================
   DESIGN TOKENS — matches Chrono AI master design system
   ================================================================ */
:root {
  /* Backgrounds — DARK (default) */
  --page-bg:       #0E0E12;
  --surface:        #141417;   /* sidebar */
  --topbar-bg:      #0E0E12;
  --card-bg:        #1A1A1F;
  --dropdown-bg:    #1E1E25;
  --tile-bg:        rgba(255,255,255,0.04);
  --input-bg:       #1A1A1F;

  /* Borders */
  --border:         rgba(255,255,255,0.07);
  --border-sidebar: rgba(255,255,255,0.07);
  --border-topbar:  rgba(255,255,255,0.06);
  --border-divider: rgba(255,255,255,0.05);
  --border-strong:  rgba(255,255,255,0.10);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #9090A8;
  --text-muted:     #555566;
  --nav-inactive:   #888899;

  /* Ring track */
  --ring-track: rgba(255,255,255,0.06);

  /* Glass card borders (KPI/stat/section cards) — driven by the
     Appearance > Theme Intensity slider (settings.js applyIntensity()),
     which rewrites these as inline root styles. */
  --glass-border:       rgba(255,255,255,0.11);
  --glass-border-top:   rgba(255,255,255,0.20);
  --glass-border-hover: rgba(255,255,255,0.18);

  /* Accent + status (fixed across themes) */
  --accent:   #E55027;
  --accent-a18: rgba(229,80,39,0.16);
  /* Dynamic accent helpers — JS rewrites these whenever accent changes */
  --accent-rgb:    229,80,39;
  --accent-glow:   rgba(229,80,39,0.35);
  --accent-border: rgba(229,80,39,0.30);
  --accent-kpi-bg: rgba(229,80,39,0.16);
  --accent-kpi-bd: rgba(229,80,39,0.18);
  --accent-kpi-sh: rgba(229,80,39,0.10);
  --accent-btn-sh: rgba(229,80,39,0.30);
  --accent-focus:  rgba(229,80,39,0.18);
  --accent-emp:    rgba(229,80,39,0.28);
  --accent-role:   rgba(229,80,39,0.28);
  --accent-grad:   #ff7a3d;
  --blue:     #2B7FFF;
  --blue-a18: rgba(43,127,255,0.16);
  --green:    #10B981;
  --green-a18: rgba(16,185,129,0.16);
  --purple:   #8B5CF6;
  --purple-a18: rgba(139,92,246,0.16);
  --amber:    #F59E0B;
  --red:      #EF4444;

  /* Radius scale */
  --r-card: 16px;   /* rounded-2xl */
  --r-md:   12px;   /* rounded-xl  */
  --r-sm:   8px;    /* rounded-lg  */
  --r-full: 999px;

  --font: 'Inter', -apple-system, sans-serif;

  /* Tells the browser which native-control palette to use for things
     CSS can't fully restyle — most importantly the OPEN <select>
     options popup, which otherwise renders with the OS's default
     (usually white) list regardless of how dark the closed control
     looks. This was the real cause of "white dropdowns" on the client
     portal (and anywhere else a plain <select> is used). */
  color-scheme: dark;
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
a, button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
input  { outline: none; border: none; background: none; }
ul     { list-style: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 6px; }

/* ================================================================
   APP LAYOUT
   ================================================================ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ================================================================
   SIDEBAR — 222px fixed
   ================================================================ */
.sidebar {
  width: 222px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border-sidebar);
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  transition: background .3s, border-color .3s;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 24px; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.brand-logo-img { width: 100%; height: 100%; object-fit: contain; display: none; border-radius: var(--r-md); }
.brand-logo-dark  { display: block; }
.brand-name { display: flex; align-items: baseline; gap: 0; line-height: 1; flex-wrap: nowrap; }
.brand-name-chrono { font-size: 16px;  font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.brand-name-ai     { font-size: 16px;  font-weight: 800; color: var(--accent);       letter-spacing: -0.02em; }
.brand-name-os     { font-size: 10.5px; font-weight: 900; color: var(--text-muted);    letter-spacing: 0.12em;  text-transform: uppercase; margin-left: 6px; align-self: center; padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 4px; }

.nav-group-label {
  padding: 0 12px; margin-bottom: 8px; margin-top: 18px;
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-muted);
}
.nav-group-label:first-child { margin-top: 0; }
.nav { flex: 1; overflow-y: auto; }
.nav::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500;
  color: var(--nav-inactive);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-item.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.nav-item:not(.active):hover { background: var(--tile-bg); color: var(--text-primary); }
.nav-icon { width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-item.active .nav-icon svg { stroke-width: 2.2; }

.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.profile-card {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  text-align: left;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  transition: background .15s, border-color .15s;
}
.profile-card { box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.profile-card:hover { border-color: var(--border-strong); filter: brightness(1.05); }
.profile-card-text { flex: 1; min-width: 0; }
.profile-card-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-card-email { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chevron { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* Profile popup menu */
.profile-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  overflow: hidden;
  display: none;
  z-index: 200;
}
.profile-menu { box-shadow: 0 8px 32px rgba(0,0,0,0.50); }
.profile-menu.open { display: block; }
.profile-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none; cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.profile-menu-item:hover { background: var(--tile-bg); }
.profile-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-secondary); }
.profile-menu-item.danger { color: var(--red); }
.profile-menu-item.danger svg { color: var(--red); }
.profile-menu-divider { height: 1px; background: var(--border); margin: 2px 0; }
.sidebar-bottom { position: relative; }

/* ================================================================
   MAIN WRAP
   ================================================================ */
.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-topbar);
  transition: background .3s, border-color .3s;
}
.topbar-search {
  position: relative; flex: 1; max-width: 480px;
  display: flex; align-items: center;
}
.topbar-search input {
  width: 100%;
  padding: 10px 60px 10px 40px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-size: 13.5px;
  color: var(--text-primary);
  transition: border-color .15s;
}
.topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a18); }
.topbar-search input::placeholder { color: var(--text-secondary); }
.topbar-search .search-icon-svg {
  position: absolute; left: 14px;
  width: 15px; height: 15px; stroke-width: 2; color: var(--text-secondary);
}
.kbd-hint { position: absolute; right: 12px; display: flex; gap: 4px; }
.kbd-hint kbd {
  padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700;
  background: var(--card-bg); color: var(--text-secondary);
  border: 1px solid var(--border);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--accent);
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--accent-a18); border-color: var(--accent-border); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 2; }

.avatar-wrap { position: relative; cursor: pointer; }
.avatar-wrap:hover .avatar-sm { box-shadow: 0 0 0 3px var(--accent-a18), 0 0 0 2px var(--accent); }
.avatar-wrap .avatar-sm { transition: box-shadow .18s; }
.avatar-sm {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.online-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--topbar-bg);
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main { flex: 1; overflow-y: auto; height: 0; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 20px; }

/* Page header (greeting) */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.welcome-label {
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent);
}
.greeting-hello {
  font-size: 32px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1;
  margin-top: 4px; color: var(--text-primary);
}
.greeting-date { font-size: 13px; margin-top: 6px; color: var(--text-secondary); }

.btn-secondary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  transition: border-color .15s, background .15s;
}
.btn-secondary:hover { background: var(--tile-bg); }
.btn-secondary svg { width: 15px; height: 15px; stroke-width: 2; }

/* ================================================================
   KPI CARDS
   ================================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(var(--kpi-cols, 4), 1fr); gap: 16px; }

.kpi-card {
  border-radius: var(--r-card);
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.07) 100%
  );
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.30),
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
  position: relative;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--r-card) var(--r-card) 0 0;
  pointer-events: none;
}
.kpi-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.10) 100%
  );
  border-color: var(--glass-border-hover);
  border-top-color: rgba(255,255,255,0.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
}
/* Light mode KPI cards */

.kpi-icon-box {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  background: linear-gradient(145deg, var(--accent-kpi-bg), rgba(var(--accent-rgb),0.06));
  border: 1px solid var(--accent-kpi-bd);
  box-shadow: 0 2px 8px var(--accent-kpi-sh), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.kpi-icon-box svg { width: 19px; height: 19px; stroke-width: 2.2; color: var(--accent); }
.kpi-icon-orange, .kpi-icon-blue, .kpi-icon-green, .kpi-icon-purple {
  background: linear-gradient(145deg, var(--accent-kpi-bg), rgba(var(--accent-rgb),0.06));
  border-color: var(--accent-kpi-bd);
}
.kpi-icon-orange svg, .kpi-icon-blue svg, .kpi-icon-green svg, .kpi-icon-purple svg { color: var(--accent); }

.kpi-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-secondary); margin-bottom: 6px;
}
.kpi-value { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 14px; }

.kpi-bottom { display: flex; align-items: center; justify-content: space-between; }
.kpi-sub { font-size: 11.5px; color: var(--text-muted); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
}
.pill svg { width: 11px; height: 11px; stroke-width: 2.4; }
.pill-up   { color: var(--green); background: rgba(16,185,129,0.12); }
.pill-down { color: var(--accent); background: var(--accent-a18); }

/* ================================================================
   SECTION CARD (universal wrapper)
   ================================================================ */
.section-card {
  border-radius: var(--r-card);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.07) 100%
  );
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  overflow: hidden;
  display: flex; flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
/* Glossy sheen on top edge */
/* Light mode — glossy glass clearly visible against page bg */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-divider);
}
.section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.section-sub   { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.section-body  { padding: 20px; flex: 1; }
.calendar-card .section-body { padding: 10px 14px 12px; display: flex; flex-direction: column; }
.calendar-card .cal-days { flex: 1; align-content: space-evenly; }
.revenue-card .section-body { padding: 8px 14px 10px; display: flex; flex-direction: column; }
.analytics-body { padding: 10px 20px 10px; display: flex; flex-direction: column; overflow: hidden; }
.analytics-card { }
.chart-area { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ================================================================
   MID GRID — Analytics (narrowed from right) | Calendar + Revenue
   ================================================================ */
.mid-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.right-col { display: contents; }

/* Analytics controls */
.analytics-controls { display: flex; align-items: center; gap: 8px; }
.seg-btn {
  padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.seg-btn.active { background: var(--accent); color: #fff; }
.seg-btn:hover:not(.active) { background: var(--tile-bg); color: var(--text-primary); }

.dropdown { position: relative; }
.dropdown-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--tile-bg);
  color: var(--text-primary);
}
.chev-icon { width: 13px; height: 13px; stroke-width: 2; transition: transform .2s; }
.dropdown.open .chev-icon { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card); padding: 6px;
  min-width: 140px; display: none; z-index: 30;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu li {
  padding: 9px 12px; font-size: 12.5px; font-weight: 500;
  border-radius: var(--r-sm); color: var(--text-secondary); cursor: pointer;
  transition: background .12s, color .12s;
}
.dropdown-menu li:hover { background: var(--tile-bg); color: var(--text-primary); }

/* BAR CHART */
.chart-wrap { display: flex; gap: 10px; height: 130px; flex: 1; min-height: 130px; }
.chart-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
  padding-bottom: 4px; min-width: 30px;
}
.chart-bars {
  flex: 1;
  display: flex; align-items: flex-end;
  gap: 10px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-left: 8px;
}
.bar-col {
  flex: 1; max-width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; position: relative; cursor: pointer;
}
.bar {
  width: 100%;
  border-radius: 8px 8px 3px 3px;
  background: var(--tile-bg);
  border: 1px solid var(--border);
  transition: filter .18s, background .25s;
}
.bar-col:hover .bar { filter: brightness(1.4); }
.bar-col.highlight .bar {
  background: linear-gradient(180deg, #FFD34A 0%, var(--accent) 100%);
  border-color: transparent;
}
.bar-tooltip {
  position: absolute; top: -36px;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--r-sm);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s; z-index: 5;
}
.bar-col.highlight .bar-tooltip,
.bar-col:hover .bar-tooltip { opacity: 1; }

.chart-xaxis { display: flex; gap: 10px; padding-left: 40px; padding-bottom: 14px; margin-top: 4px; }
.chart-xaxis span { flex: 1; max-width: 44px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.chart-xaxis span.highlight { color: var(--text-primary); font-weight: 700; }

/* ================================================================
   CALENDAR CARD
   ================================================================ */
.cal-nav-group { display: flex; align-items: center; gap: 8px; }
.icon-btn-sm {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--tile-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: background .15s, color .15s;
}
.icon-btn-sm:hover { background: var(--border); color: var(--text-primary); }
.icon-btn-sm svg { width: 13px; height: 13px; stroke-width: 2.2; }
.cal-month-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); min-width: 84px; text-align: center; }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-weekdays span {
  text-align: center; font-size: 9.5px; font-weight: 700;
  color: var(--text-muted); padding: 2px 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 28px;
  transition: background .14s, color .14s;
}
.cal-day:hover { background: var(--tile-bg); color: var(--text-primary); }
.cal-day.other-month { color: var(--text-muted); opacity: 0.4; }
.cal-day.today {
  background: var(--accent); color: #fff; font-weight: 700;
}
.cal-day.has-event::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

/* ================================================================
   REVENUE CARD
   ================================================================ */
.more-icon { width: 17px; height: 17px; stroke-width: 1.8; color: var(--text-muted); cursor: pointer; }
.revenue-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; overflow: hidden; padding: 12px 16px; }
.revenue-legend { display: flex; gap: 14px; }
.legend-item { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-income  { background: var(--accent); }
.dot-expenses{ background: var(--green); }
.revenue-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.ring-svg { width: 140px; max-width: 140px; }
.ring-center { position: absolute; text-align: center; }
.ring-value { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); }
.ring-label { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }

/* ================================================================
   DEALS TABLE
   ================================================================ */
.deals-search {
  flex: 1; max-width: 320px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-md);
  background: var(--input-bg); border: 1px solid var(--border);
}
.deals-search input { flex: 1; font-size: 13px; color: var(--text-primary); }
.deals-search input::placeholder { color: var(--text-muted); }
.deals-search .search-icon-svg { width: 14px; height: 14px; stroke-width: 2; opacity: .6; color: var(--text-secondary); flex-shrink: 0; }

.table-wrap { overflow-x: auto; padding: 8px 12px 12px; }
.deals-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.deals-table thead th {
  text-align: left; font-size: 11px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-divider);
  white-space: nowrap;
}
.deals-table tbody td {
  padding: 14px 12px; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-divider);
  white-space: nowrap;
}
.deals-table .empty-row td {
  text-align: center; padding: 32px; color: var(--text-muted);
  font-size: 13px; font-weight: 500; border-bottom: none;
}
.deals-table tbody tr { transition: background .14s; cursor: pointer; }
.deals-table tbody tr:hover { background: var(--tile-bg); }
.deals-table tbody td.title-cell { color: var(--text-primary); font-weight: 700; }

/* Billing table — Airtable-style inline-editable grid (projects billing modal + portal read-only view) */
.billing-table tbody tr { cursor: default; }
.billing-table tbody td { padding: 6px 8px; }
.billing-table .billing-cell-input {
  width: 100%; border: 1px solid transparent; background: transparent;
  color: var(--text-primary); font-size: 13px; font-weight: 500;
  padding: 7px 8px; border-radius: 7px; font-family: inherit;
}
.billing-table .billing-cell-input:hover { border-color: var(--border-strong); }
.billing-table .billing-cell-input:focus { outline: none; border-color: var(--accent); background: var(--tile-bg); }
.billing-table select.billing-cell-input { cursor: pointer; }
/* Name field is a textarea now (not a single-line input) so a long
   title wraps and stays fully visible instead of being clipped at a
   fixed width — see autosizeBillingTextarea in projects.js/portal.js. */
.billing-table textarea.billing-name-input {
  resize: none; overflow: hidden; min-height: 34px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
}
/* Log-a-payment mini form — standalone inputs (not inside a table row),
   so unlike .billing-cell-input they need a visible border/background
   by default, not just on hover/focus, or they're invisible against
   the page and impossible to find. */
.billing-payment-field { display: flex; flex-direction: column; gap: 4px; }
.billing-payment-field label {
  font-size: 11px; color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-payment-input {
  border: 1px solid var(--border-strong); background: var(--tile-bg);
  color: var(--text-primary); font-size: 13px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; font-family: inherit;
}
.billing-payment-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a18); }
/* Small "who built what" KPI chips above the billing tables — one per
   assigned team member, this month's total across their billed items.
   Deliberately smaller than the 4 main stat cards (billed/paid/
   outstanding/status) since these are a supplementary breakdown, not
   headline numbers. */
.billing-kpi-card {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--tile-bg); border: 1px solid var(--border-divider);
}
.billing-kpi-name { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.billing-kpi-amount { font-size: 12.5px; font-weight: 800; color: var(--text-primary); }

/* Project icon picker (Add/Edit Project modal) — a trigger button
   showing the current pick, opening a scrollable grid of icon
   choices (emoji-picker-style) below it. */
.icon-picker-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--border); background: var(--input-bg, var(--tile-bg));
  border-radius: var(--r-md); padding: 8px 12px; cursor: pointer;
  font-family: inherit;
}
.icon-picker-trigger:hover { border-color: var(--border-strong); }
.icon-picker-preview {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
}
.icon-picker-preview svg { width: 17px; height: 17px; stroke-width: 2.1; }
.icon-picker-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--card-bg, var(--bg-secondary)); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.28);
  padding: 10px; max-height: 220px; overflow-y: auto;
}
.icon-picker-panel.open { display: block; }
.icon-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icon-picker-option {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent;
  background: var(--tile-bg); color: var(--text-secondary); cursor: pointer;
}
.icon-picker-option svg { width: 16px; height: 16px; stroke-width: 2; }
.icon-picker-option:hover { border-color: var(--accent); color: var(--accent); }
.icon-picker-option.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Divider between the in-flight projects (active/on-hold/overdue) and
   the completed section below it — see renderProjects' notCompleted/
   completed split (projects.js + portal.js, via groupByOwnerCountDesc
   in project-shared.js). Spans the full grid width. Colored (not
   plain gray) so it actually reads as a section break at a glance. */
.proj-section-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 10px 0 2px;
}
.proj-section-divider::before, .proj-section-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--red-border, rgba(239,68,68,0.35));
}
.proj-section-divider-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--red); white-space: nowrap;
  padding: 4px 12px; border-radius: var(--r-full);
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.30);
}

/* Image lightbox — click any thumbnail with a data-full attribute
   (project update photos) to open it here at full size. Delegated
   click handling lives in common.js (admin) / portal.js (portal); this
   is just the overlay markup + styling, shared by both. */
.img-lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
  padding: 40px; cursor: zoom-out;
}
.img-lightbox.open { display: flex; }
.img-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: default; }
.img-lightbox-close {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.img-lightbox-close svg { width: 18px; height: 18px; }

/* Notification toast — top-right pop-up on a new notification arriving
   live (see startNotificationWatcher in router.js). Auto-dismisses
   after 5s; click to jump to the Notifications page. */
.notif-toast-wrap {
  position: fixed; top: 18px; right: 18px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 320px;
}
.notif-toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  cursor: pointer;
  animation: notifToastIn .22s ease-out;
}
.notif-toast.leaving { animation: notifToastOut .25s ease-in forwards; }
@keyframes notifToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes notifToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
.notif-toast-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent-a18); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.notif-toast-icon svg { width: 14px; height: 14px; }
.notif-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-toast-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.notif-toast-msg { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Premium themed dropdowns for Billing — client picker, month/year picker,
   and per-row status. Rounded, custom chevron, soft focus glow instead of
   the browser's default flat select look. */
.billing-select {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 34px 10px 14px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.billing-select:hover { border-color: var(--accent); }
.billing-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a18); }
.billing-table select.billing-cell-input {
  -webkit-appearance: none; appearance: none;
  border-radius: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  padding-right: 26px;
}

.tag {
  display: inline-block; padding: 4px 12px; font-size: 11.5px; font-weight: 600;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--tile-bg);
}

.stage { display: inline-flex; align-items: center; padding: 4px 13px; font-size: 11.5px; font-weight: 700; border-radius: var(--r-full); }
.stage-won       { color: var(--green);  background: rgba(16,185,129,0.12); }
.stage-qualified { color: var(--amber);  background: rgba(245,158,11,0.12); }
.stage-lost      { color: var(--red);    background: rgba(239,68,68,0.12); }

.created-cell { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.created-cell svg { width: 13px; height: 13px; stroke-width: 1.8; }

.empty-row td {
  text-align: center; padding: 44px; color: var(--text-muted);
  font-size: 12.5px; font-weight: 500;
}
.empty-chart-msg { color: var(--text-muted); font-size: 12.5px; font-weight: 500; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 20px; text-align: center;
}
.empty-state svg { width: 34px; height: 34px; stroke-width: 1.5; color: var(--border-strong); }
.empty-msg { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.empty-sub { font-size: 12px; color: var(--text-muted); max-width: 320px; }



/* KPI-style stat row for full pages (Revenue/Invoices) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  border-radius: var(--r-card);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.07) 100%
  );
  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.22);
  padding: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.30),
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
  transition: border-color .15s, box-shadow .15s, background .15s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--r-card) var(--r-card) 0 0;
  pointer-events: none;
}
.stat-card:hover {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.10) 100%
  );
  border-color: rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
}
.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-secondary); margin-bottom: 8px; }
.stat-value { font-size: 26px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.02em; }

/* Primary button (matches accent) */
.btn-primary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad) 100%);
  box-shadow: 0 4px 14px var(--accent-btn-sh);
  transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary svg { width: 15px; height: 15px; stroke-width: 2.2; }

/* Calendar app (full page) — bigger version of dashboard calendar */
.calendar-app-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .calendar-app-grid { grid-template-columns: 1fr; } }
.calendar-app-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-app-day {
  aspect-ratio: 1; border-radius: var(--r-sm);
  background: var(--tile-bg); border: 1px solid var(--border);
  padding: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; gap: 4px;
}
.calendar-app-day:hover { border-color: var(--accent); }
.calendar-app-day.other-month { opacity: 0.35; }
.calendar-app-day.today { border-color: var(--accent); background: var(--accent-a18); color: var(--accent); }
.calendar-app-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.calendar-app-weekdays span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.appt-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--tile-bg); border: 1px solid var(--border); }
.appt-time { font-size: 11px; font-weight: 700; color: var(--accent); min-width: 56px; }
.appt-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.appt-sub { font-size: 11.5px; color: var(--text-secondary); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1200px) {
  .mid-grid { grid-template-columns: 1fr; }
  .right-col { display: flex; flex-direction: row; gap: 16px; }
  .kpi-grid  { grid-template-columns: repeat(2, 1fr); }
}
/* ================================================================
   MOBILE NAV — hamburger + slide-in drawer (mobile/tablet only;
   desktop sidebar/topbar behavior is untouched above 900px)
   ================================================================ */
.mobile-menu-btn { display: none; flex-shrink: 0; }

@media (max-width: 900px) {
  .mid-grid { grid-template-columns: 1fr; }
  .topbar-search { max-width: none; }

  .greeting-hello { font-size: 24px; }

  .mobile-menu-btn { display: flex; }

  /* KPI cards (900px and below): match Revenue's .stat-card exactly —
     same 18px padding, same compact stack of label -> value -> one
     single line of context, same overall footprint. Icon box and the
     trend pill are hidden on mobile (Revenue's cards have neither),
     leaving just the sub-label as the one line under the value, same
     as Revenue's "Paid invoices" / "Pending + overdue" style subtext. */
  /* body-prefixed + grid-scoped so these beat the body.density-* rules */
  body .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  body .kpi-grid .kpi-card { padding: 18px; }
  body .kpi-grid .kpi-icon-box { display: none; }
  body .kpi-grid .kpi-label { font-size: 11px; margin-bottom: 8px; }
  body .kpi-grid .kpi-value { font-size: 22px; margin-bottom: 4px; overflow-wrap: anywhere; }
  body .kpi-grid .kpi-bottom { display: block; }
  body .kpi-grid .kpi-sub { font-size: 11.5px; }
  body .kpi-grid .kpi-bottom .pill { display: none; }

  /* Sidebar becomes an off-canvas drawer instead of disappearing */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    width: 260px;
    max-width: 84vw;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.35);
  }

  .mobile-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 290;
  }
  .mobile-sidebar-backdrop.open { display: block; }
}

@media (min-width: 901px) {
  .mobile-sidebar-backdrop { display: none !important; }
}
@media (max-width: 560px) {
  .main { padding: 16px 14px 32px; }

  /* Dashboard: header/actions and deals-card header stack cleanly */
  .page-header { align-items: stretch; }
  .page-header .btn-secondary { width: 100%; justify-content: center; }
  .deals-card .section-head { flex-direction: column; align-items: stretch; }
  .deals-search { width: 100%; }

  /* Analytics chart: keep readable height, allow x-axis labels to wrap less cramped */
  .chart-wrap { height: 160px; min-height: 160px; }
  .chart-xaxis { font-size: 10px; }
}

/* ================================================================
   MODAL / OVERLAY (employees, settings, any page)
   ================================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }

.modal,
.modal-card {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  transform: translateY(16px) scale(0.98);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.modal-backdrop.open .modal,
.modal-backdrop.open .modal-card { transform: translateY(0) scale(1); }

.modal-lg { max-width: 680px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border-divider);
}
.modal-title { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.modal-close {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--border); color: var(--text-primary); }
.modal-close svg { width: 14px; height: 14px; stroke-width: 2.2; }

.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.modal-footer, .modal-foot {
  padding: 16px 22px;
  border-top: 1px solid var(--border-divider);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ----------------------------------------------------------------
   FORM FIELD (modal / settings)
   ---------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-secondary);
}
.form-input {
  width: 100%; padding: 11px 14px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 13.5px; font-weight: 500;
  color: var(--text-primary); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus); }

/* Native <select> popup list — color-scheme (set at :root) handles most
   browsers, but Chrome specifically still needs background/color set
   directly on <option> or the open list renders with the OS default
   (white) regardless of how dark the closed control looks. This was
   the actual "dropdowns are white" bug on the client portal. Applies
   everywhere a plain <select> is used, portal and CRM alike. */
select { color-scheme: dark; }
select option {
  background-color: var(--dropdown-bg);
  color: var(--text-primary);
}

/* File inputs — the browser's default "Choose File" button ignores our
   dark theme entirely (stays white), used on the CRM dashboard/project
   update composer and the client portal's message box. Style the
   button part via ::file-selector-button (and the older WebKit alias)
   so it matches every other button in the app. */
.form-input[type="file"] { padding: 7px 10px; }
.form-input[type="file"]::file-selector-button,
.form-input[type="file"]::-webkit-file-upload-button {
  font: inherit; font-weight: 600; font-size: 12.5px;
  color: var(--text-primary); background: var(--tile-bg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm, 6px);
  padding: 6px 12px; margin-right: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.form-input[type="file"]:hover::file-selector-button,
.form-input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--accent); background: var(--accent-a18);
}

/* ================================================================
   CUSTOM DATE PICKER — see date-picker.js. Replaces the browser's
   native <input type=date> calendar popup with a themed one.
   ================================================================ */
.cz-dp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 38px;
}
.cz-datepicker {
  position: fixed;
  z-index: 2000;
  width: 260px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  padding: 12px;
  font-size: 13px;
  animation: cz-dp-in .12s ease;
}
@keyframes cz-dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cz-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cz-dp-title { font-weight: 700; color: var(--text-primary); font-size: 13px; }
.cz-dp-nav {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--tile-bg);
  color: var(--text-secondary); cursor: pointer;
}
.cz-dp-nav:hover { color: var(--text-primary); border-color: var(--accent); }
.cz-dp-nav svg { width: 13px; height: 13px; }
.cz-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.cz-dp-weekdays span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding: 4px 0; }
.cz-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cz-dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer;
}
.cz-dp-day:hover { background: var(--tile-bg); }
.cz-dp-day.muted { color: var(--text-muted); opacity: 0.5; }
.cz-dp-day.today { color: var(--accent); font-weight: 700; }
.cz-dp-day.selected { background: var(--accent); color: #fff; font-weight: 700; }
.cz-dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-divider); }
.cz-dp-foot button {
  border: none; background: none; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 6px;
}
.cz-dp-foot button:hover { text-decoration: underline; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239090A8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ----------------------------------------------------------------
   EMPLOYEE CARDS
   ---------------------------------------------------------------- */

/* Any section-card that's a DIRECT child of .main (the page's single
   scroll container — .main{overflow-y:auto}) can otherwise get shrunk
   below its content height by flexbox's default sizing, and since
   .section-card has overflow:hidden that silently clips content with
   no scrollbar at all (this is what previously forced #teamDirectoryCard
   and the accountability page's "By Employee" table into their own
   separate inner scrollbars instead of scrolling with the rest of the
   page). flex-shrink:0 stops that collapse so every top-level card
   grows to fit its content and the whole page scrolls as one — no card
   gets its own scrollbar. Scoped to direct children only, so cards
   nested inside grids (mid-grid, proj-top-row, etc.) that intentionally
   fit a fixed row height are unaffected. */
.main > .section-card {
  flex-shrink: 0;
}

/* "Per-section scroll" mode (opt-in via Settings → Scroll Behavior):
   restores the old behavior where the Employees directory and the
   Accountability "By Employee" table scroll in their own contained box
   instead of the whole page. */
body.scroll-classic #teamDirectoryCard {
  flex-shrink: 0;
  max-height: calc(100vh - 340px);
  min-height: 320px;
  overflow: hidden;
}
body.scroll-classic #empGridView { overflow-y: auto; min-height: 0; }
body.scroll-classic #empListView { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
body.scroll-classic #empListView .emp-list { overflow-y: auto; }
body.scroll-classic #acctTable_scrollbox,
body.scroll-classic .section-card:has(#acctTableBody) .table-wrap {
  max-height: calc(100vh - 460px);
  min-height: 220px;
  overflow-y: auto;
}

.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.emp-card {
  border-radius: var(--r-card);
  background: var(--card-bg); border: 1px solid var(--border);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.emp-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

.emp-card-banner {
  height: 64px;
  background: linear-gradient(135deg, #1A1A2E, #16213E, #0F3460);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.emp-card-banner-pattern {
  position: absolute; inset: 0; opacity: 0.10; z-index: 1;
  background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
  background-size: 22px 22px;
}
.emp-card-body { padding: 0 18px 18px; }
.emp-card-avatar-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -22px; margin-bottom: 12px; position: relative; z-index: 3; }
.emp-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #fff;
  border: 3px solid var(--card-bg);
  flex-shrink: 0;
  position: relative; z-index: 3;
}
.emp-card-actions { display: flex; gap: 6px; position: relative; z-index: 3; }
.emp-action-btn {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #1E1E24; border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.emp-action-btn:hover { background: var(--accent-a18); border-color: var(--accent-emp); color: var(--accent); }
.emp-action-btn svg { width: 13px; height: 13px; stroke-width: 2.1; }
.emp-action-btn.danger:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: var(--red); }

.emp-name { font-size: 14px; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.emp-role { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }

.emp-meta { display: flex; flex-direction: column; gap: 5px; }
.emp-meta-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-secondary); }
.emp-meta-row svg { width: 12px; height: 12px; stroke-width: 2; color: var(--text-muted); flex-shrink: 0; }

.emp-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-divider); }

/* Employee status */
.emp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); }
.emp-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.emp-status-active   { color: var(--green); background: rgba(16,185,129,0.12); }
.emp-status-active .emp-status-dot { background: var(--green); }
.emp-status-leave    { color: var(--amber); background: rgba(245,158,11,0.12); }
.emp-status-leave .emp-status-dot { background: var(--amber); }
.emp-status-inactive { color: var(--text-muted); background: var(--tile-bg); }
.emp-status-inactive .emp-status-dot { background: var(--text-muted); }

/* Employee list view */
.emp-list { display: flex; flex-direction: column; }
.emp-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-divider);
  transition: background .14s; cursor: pointer;
}
.emp-list-row:last-child { border-bottom: none; }
.emp-list-row:hover { background: var(--tile-bg); }
.emp-list-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-grad)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0; }
.emp-list-info { flex: 1; min-width: 0; }
.emp-list-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.emp-list-role { font-size: 12px; color: var(--text-secondary); }
.emp-list-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* My Projects widget (dashboard) */
.my-proj-list { display: flex; flex-direction: column; }
.my-proj-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-divider);
}
.my-proj-row:last-child { border-bottom: none; }
.my-proj-info { flex: 1; min-width: 0; }
.my-proj-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-proj-client { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.my-proj-progress-wrap { width: 140px; flex-shrink: 0; }
.my-proj-progress-wrap .proj-progress-track { height: 6px; }
.my-proj-deadline { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; text-align: right; flex-shrink: 0; width: 90px; }

/* ================================================================
   EMPLOYEE TOOLBAR ROW (above Team Directory card)
   ================================================================ */
.dir-title { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); }

.emp-toolbar-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.emp-toolbar-row .emp-search-box {
  flex: 1; min-width: 220px; max-width: 380px;
}
.emp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* Filter dropdown */
.emp-filter-dropdown { position: relative; }
.emp-filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 600;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.emp-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.emp-filter-dropdown.open .emp-filter-btn { border-color: var(--accent); color: var(--accent); }
.emp-filter-dropdown.open .chev-icon { transform: rotate(180deg); }
.chev-icon { transition: transform .2s; }
.emp-filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 6px;
  min-width: 160px; z-index: 40;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: none;
}
.emp-filter-dropdown.open .emp-filter-menu { display: block; }
.emp-filter-menu li {
  padding: 9px 12px; font-size: 12.5px; font-weight: 500;
  border-radius: var(--r-sm); color: var(--text-secondary);
  cursor: pointer; list-style: none;
  transition: background .12s, color .12s;
}
.emp-filter-menu li:hover { background: var(--tile-bg); color: var(--text-primary); }

.proj-daterange-panel {
  min-width: 240px;
  flex-direction: column; gap: 10px;
  padding: 12px;
}
.emp-filter-dropdown.open .proj-daterange-panel { display: flex; }

.emp-count-badge {
  font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary);
  padding: 9px 14px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Employee filters / toolbar (legacy kept for view toggles) */
.emp-view-btns { display: flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.emp-view-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--tile-bg); cursor: pointer; transition: background .15s, color .15s; }
.emp-view-btn:hover { color: var(--text-primary); }
.emp-view-btn.active { background: var(--accent); color: #fff; }
.emp-view-btn svg { width: 14px; height: 14px; stroke-width: 2; }

/* ================================================================
   EMPLOYEE TABLE (list view with column headers)
   ================================================================ */
.emp-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 80px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-divider);
  gap: 12px;
}
.emp-th {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
}
.emp-th-actions { text-align: right; }
.emp-list-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 80px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-divider);
  gap: 12px;
  transition: background .14s;
  cursor: default;
}
.emp-list-row:last-child { border-bottom: none; }
.emp-list-row:hover { background: var(--tile-bg); }
.emp-td { display: flex; align-items: center; }
.emp-td-user { gap: 12px; }
.emp-td-muted { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.emp-td-actions { justify-content: flex-end; gap: 6px; }
.emp-list-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-grad)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0; }
.emp-list-info { min-width: 0; }
.emp-list-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-list-role { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   SEARCH BARS — glassmorphism
   ================================================================ */
/* Topbar search input */
.topbar-search input {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.05) 100%
  );
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset;
}
.topbar-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a18), 0 2px 12px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset;
}

/* Deals search */
.deals-search {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.05) 100%
  );
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset;
}

/* Employee search box inside team directory */
.emp-search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  width: 100%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset;
  transition: border-color .15s, box-shadow .15s;
}
.emp-search-box input {
  flex: 1;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  min-width: 0;
}
.emp-search-box input::placeholder { color: var(--text-secondary); }
.emp-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a18), 0 2px 12px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset;
}

/* ================================================================
   SETTINGS PAGE
   ================================================================ */
.settings-wrap { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.settings-header { padding: 24px 24px 16px; flex-shrink: 0; }
.settings-header h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); }
.settings-header p { font-size: 13px; margin-top: 4px; color: var(--text-secondary); }

.settings-tab-bar { padding: 0 24px 18px; flex-shrink: 0; }
.settings-tabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px; border-radius: var(--r-card);
  background: var(--tile-bg);
  border: 1px solid var(--border);
}
.settings-tab {
  padding: 7px 16px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap;
}
.settings-tab.active {
  background: var(--card-bg); color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
}
.settings-tab:not(.active):hover { color: var(--text-primary); }

.settings-content { padding: 0 24px 40px; flex: 1; }
.settings-panel { display: none; flex-direction: column; gap: 20px; max-width: 780px; }
.settings-panel.active { display: flex; }

/* Settings card */
.s-card {
  border-radius: var(--r-card);
  background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.s-card-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-divider);
}
.s-card-head-row { display: flex; align-items: center; gap: 12px; }
.s-icon-box {
  width: 36px; height: 36px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.s-icon-box svg { width: 17px; height: 17px; stroke-width: 2.1; color: #fff; }
.s-card-title { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.s-card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.s-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.s-card-body.no-gap { gap: 0; padding: 0; }

/* Settings row (label left, action right) */
.s-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 22px;
  border-bottom: 1px solid var(--border-divider);
}
.s-row:last-child { border-bottom: none; }
.s-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s-row-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-a18); flex-shrink: 0; }
.s-row-icon svg { width: 15px; height: 15px; stroke-width: 2.1; color: var(--accent); }
.s-row-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.s-row-desc  { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.s-row-action { font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: var(--r-md); background: var(--tile-bg); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; transition: border-color .15s; flex-shrink: 0; }
.s-row-action:hover { border-color: var(--accent); color: var(--accent); }
.s-row-action.danger { color: var(--red); }
.s-row-action.danger:hover { border-color: var(--red); background: rgba(239,68,68,0.08); }

/* Toggle switch */
.s-toggle {
  position: relative; width: 44px; height: 24px; border-radius: var(--r-full);
  background: var(--border-strong); cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.s-toggle.on { background: var(--accent); }
.s-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: left .2s cubic-bezier(.16,1,.3,1);
}
.s-toggle.on::after { left: 22px; }

/* Profile banner card */
.s-profile-banner {
  height: 100px; position: relative;
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
  overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.s-profile-banner-dots {
  position: absolute; inset: 0; opacity: 0.10; z-index: 1;
  background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
  background-size: 26px 26px;
}
/* Avatar row — only avatar, pulled up to overlap banner bottom */
.s-profile-avatar-row {
  padding: 0 22px 0;
  margin-top: -32px;
  position: relative; z-index: 3;
}
.s-profile-avatar {
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-grad));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff;
  border: 3px solid var(--card-bg); flex-shrink: 0;
  position: relative; z-index: 3;
}
/* Name + badge row — sits fully below avatar, never touches banner */
.s-profile-name-row {
  padding: 10px 22px 20px;
  position: relative; z-index: 3;
}
/* Name is always in the white/dark card area — use theme text color */
.s-profile-name { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 6px; }
.s-role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  background: var(--accent-a18); color: var(--accent);
  border: 1px solid var(--accent-role); margin-top: 4px;
}
.s-role-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Accent swatch grid */
.accent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.accent-swatch {
  aspect-ratio: 1; border-radius: var(--r-md); cursor: pointer;
  position: relative; transition: transform .15s;
  border: 2px solid transparent;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.active { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px currentColor; }
.accent-swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.accent-swatch-check svg { width: 16px; height: 16px; stroke-width: 3; color: #fff; }

/* Info row (read-only) */
.s-info-row { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border-divider); }
.s-info-row:last-child { border-bottom: none; }
.s-info-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--tile-bg); flex-shrink: 0; }
.s-info-icon svg { width: 13px; height: 13px; stroke-width: 2; color: var(--text-muted); }
.s-info-label { width: 100px; font-size: 12px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.s-info-value { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* Save button */
.s-save-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 14px var(--accent-btn-sh);
  transition: filter .15s;
}
.s-save-btn:hover { filter: brightness(1.08); }
.s-save-btn:disabled { opacity: 0.45; pointer-events: none; }
.s-save-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* ================================================================
   BOOT SPLASH — full-page branded loader shown until the first tab's
   data has actually rendered (not just the markup fetched), so login
   never lands on a visibly empty shell for that first second.
   ================================================================ */
.boot-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--page-bg);
  transition: opacity .35s ease, visibility .35s ease;
}
.boot-splash[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-splash-ring {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.boot-splash-ring::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 24px;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: boot-spin 1s linear infinite;
}
.boot-splash-ring::after {
  content: '';
  position: absolute; inset: -18px;
  border-radius: 32px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  opacity: .5;
  animation: boot-pulse 2s ease-in-out infinite;
  z-index: -1;
}
.boot-splash-logo { width: 38px; height: 38px; border-radius: 9px; }
.boot-splash-name { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.01em; }
.boot-splash-dots { display: flex; gap: 6px; }
.boot-splash-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: boot-dot 1.2s ease-in-out infinite;
}
.boot-splash-dots span:nth-child(2) { animation-delay: .15s; }
.boot-splash-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-pulse { 0%,100% { opacity: .35; transform: scale(0.92); } 50% { opacity: .6; transform: scale(1.05); } }
@keyframes boot-dot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* ================================================================
   SPA ROUTER — page loading skeleton & error state
   ================================================================ */
.page-loading {
  width: 100%;
  min-height: 60vh;
  background: linear-gradient(90deg,
    var(--card-bg) 25%,
    rgba(255,255,255,0.04) 50%,
    var(--card-bg) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
  border-radius: var(--r-card);
  margin: 24px 0;
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
/* Thin top-of-content progress bar shown while a tab's data is loading
   (fragment markup is usually cached and instant — this covers the gap
   while the page module's init() fetches/renders its Firestore data). */
.tab-load-bar {
  position: fixed; top: 0; left: 0; height: 2.5px; z-index: 500;
  background: var(--accent);
  width: 0%;
  opacity: 0;
  transition: width .3s ease, opacity .2s ease;
  box-shadow: 0 0 8px var(--accent-glow);
}
.tab-load-bar.active { opacity: 1; width: 70%; }
.tab-load-bar.done { opacity: 0; width: 100%; transition: width .2s ease, opacity .3s ease .1s; }
.page-error {
  padding: 48px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}
.page-error a { color: var(--accent); }

/* ================================================================
   PROJECTS SECTION — additive only, no existing rules touched
   ================================================================ */

/* #projListView / #projDetailView are single-child wrappers inside .main,
   so they break .main's flex `gap` chain — its own section-cards (header,
   client portal, tasks, updates) would otherwise stack with zero gap
   between them despite each having its own border. */
#projListView,
#projDetailView {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Top row: chart card + grid card side by side */
.proj-top-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .proj-top-row { grid-template-columns: 1fr; }
}

.proj-chart-card { min-width: 0; }
.proj-grid-card  { min-width: 0; }

/* Donut center label */
.proj-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.proj-donut-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.proj-donut-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Donut legend */
.proj-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 4px;
}
.proj-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.proj-legend-item strong {
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}
.proj-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Projects grid */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Project card */
.proj-card {
  background: var(--tile-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .14s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proj-card:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

.proj-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.proj-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
/* Wraps the name (+ client label, on the admin side) next to the icon.
   Fixed min-height here — not on the name text itself — is what lets a
   1-line name and a 2-line name reserve identical space (so cards line
   up in a grid) while the text still sits vertically centered against
   the icon instead of pinned to the top of that reserved space. */
.proj-card-name-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 36px;
}
.proj-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Card-grid variant — shows the FULL project name (wraps up to 2 lines)
   instead of truncating with an ellipsis. The reserved height lives on
   the .proj-card-name-wrap parent, not here, so short 1-line names
   still center correctly instead of sitting at the top of a tall box. */
.proj-card-name--clamp {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.proj-card-client {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.proj-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.25em; /* reserves 2 lines even when short/empty, so cards with less text don't shift everything below upward */
}

/* Status badge (shared: projects + tasks) */
.proj-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--badge-color, var(--border));
  color: var(--badge-color, var(--text-secondary));
  background: color-mix(in srgb, var(--badge-color, transparent) 12%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Priority badge */
.proj-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* Progress track + fill */
.proj-progress-track {
  width: 100%;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--border);
  overflow: hidden;
}
.proj-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transition: width .4s ease;
}
.proj-progress-wrap { display: flex; flex-direction: column; }

/* Adjustable progress slider (manual-progress projects) — a draggable
   line styled to match the read-only track/fill bar above it. The
   filled portion is painted via an inline background-image gradient
   kept in sync with the value by JS (see updateProgressSliderFill()). */
.progress-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: var(--r-full);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 0%, var(--border) 0%, var(--border) 100%);
  outline: none; cursor: pointer; margin: 0;
}
.progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--page-bg);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer; transition: transform .12s;
}
.progress-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.progress-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--page-bg);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.progress-slider::-moz-range-track { height: 5px; border-radius: var(--r-full); background: transparent; }

/* Recurring check-off strip (progressMode 'checklist') — 7 pips, one per
   period (day/week/month). Team side: clickable, including past periods
   (retroactive edits). Portal side reuses the same classes but adds
   .readonly so clients can see it without being able to toggle it. */
.checklist-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.checklist-pip {
  flex: 1; min-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--tile-bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.checklist-pip:hover { border-color: var(--accent); }
.checklist-pip.readonly { cursor: default; }
.checklist-pip.readonly:hover { border-color: var(--border); }
.checklist-pip-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.checklist-pip.current .checklist-pip-label { color: var(--text-secondary); }
.checklist-pip-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.checklist-pip-dot svg { width: 12px; height: 12px; }
.checklist-pip.done .checklist-pip-dot { background: var(--green); border-color: var(--green); color: #fff; }
.checklist-pip.current .checklist-pip-dot { border-color: var(--accent); }

/* Small "Done / Not done" pill shown on a project CARD (not the full
   7-period strip — that's the detail page) for progressMode 'checklist'
   projects, replacing the percentage that a checklist mode doesn't have. */
.proj-checklist-pill {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-full);
  color: var(--text-muted); background: var(--border); border: 1px solid var(--border-strong);
}
.proj-checklist-pill.done { color: var(--green); background: var(--green-a18); border-color: var(--green); }

/* Card footer: avatars + deadline */
.proj-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.proj-avatar-stack {
  display: flex;
  flex-direction: row-reverse;
}
.proj-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin-left: -6px;
  flex-shrink: 0;
}
.proj-avatar:last-child { margin-left: 0; }
.proj-avatar-more {
  background: var(--border-strong);
  color: var(--text-secondary);
}

/* Assignee checklist (project modal) — matches .form-input styling */
.proj-assignee-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--tile-bg); padding: 6px;
}
.proj-assignee-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.proj-assignee-row:hover { background: var(--border-divider); }
.proj-assignee-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.proj-assignee-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.proj-assignee-name { font-size: 12.5px; color: var(--text-primary); font-weight: 600; }
.proj-assignee-empty { font-size: 12px; color: var(--text-muted); padding: 8px; text-align: center; }
.proj-assignee-owner-star {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: none; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: color .12s, background .12s;
}
.proj-assignee-owner-star svg { width: 15px; height: 15px; }
.proj-assignee-owner-star:hover { color: var(--amber); background: rgba(245,158,11,0.12); }
.proj-assignee-owner-star.active { color: var(--amber); }

/* Project updates feed (detail view) */
.proj-update-feed { display: flex; flex-direction: column; gap: 12px; }
.proj-update-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--tile-bg); }
.proj-update-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.proj-update-body { flex: 1; min-width: 0; }
.proj-update-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.proj-update-author { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.proj-update-time { font-size: 11.5px; color: var(--text-muted); }
.proj-update-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.proj-update-edit-btn {
  width: 20px; height: 20px; border-radius: 6px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}
.proj-update-edit-btn:hover { background: var(--tile-bg); color: var(--text-secondary); }
.proj-update-edit-textarea { width: 100%; resize: vertical; font-size: 13px; }
.proj-update-pct { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(229,80,39,0.12); border-radius: 999px; padding: 2px 9px; margin-top: 6px; }
.proj-update-photo { max-width: 260px; border-radius: 10px; margin-top: 8px; display: block; cursor: pointer; }
.proj-mention { color: var(--accent); font-weight: 700; background: rgba(229,80,39,0.12); border-radius: 4px; padding: 0 3px; }

/* Detail view */
.proj-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.proj-detail-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.proj-detail-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.proj-detail-client {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
}
.proj-detail-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.55;
}
.proj-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
  align-items: flex-end;
  flex-shrink: 0;
}
.proj-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Deadline gets its own, more prominent treatment — it's the one date on
   this page a manager needs to spot at a glance, not just another meta
   row. Severity classes are added/removed in JS based on how close (or
   past) the deadline is. */
.proj-meta-item.proj-deadline {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.proj-meta-item.proj-deadline svg { color: var(--text-primary); }
.proj-meta-item.proj-deadline.proj-deadline-soon {
  color: var(--amber);
}
.proj-meta-item.proj-deadline.proj-deadline-soon svg { color: var(--amber); }
.proj-meta-item.proj-deadline.proj-deadline-overdue {
  color: var(--red);
}
.proj-meta-item.proj-deadline.proj-deadline-overdue svg { color: var(--red); }

/* ================================================================
   Task "done" toggle button — originally shared with the now-removed
   Milestones feature, kept here since tasks still use it (see
   renderTasks in projects.js: data-task-toggle).
   ================================================================ */
.milestone-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent; cursor: pointer; flex-shrink: 0;
  color: transparent; transition: all .15s;
}
.milestone-toggle:hover { border-color: var(--accent); }
.milestone-toggle.done { background: var(--green); border-color: var(--green); color: #fff; }
.milestone-toggle svg { width: 13px; height: 13px; }
.task-row-done { opacity: .65; }

/* Icon action buttons in task table */
.proj-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.proj-icon-btn:hover { background: var(--tile-bg); color: var(--text-primary); border-color: var(--border-strong); }
.proj-icon-btn--danger:hover { background: rgba(239,68,68,0.12); color: var(--red); border-color: var(--red); }

/* form-row used in project/task modals */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Employees "list view": the 6-col grid (2fr 1fr 1fr 1fr 1fr 80px)
     squeezes to unreadable slivers on phones. Header labels lose their
     meaning once columns wrap, so hide them and let each row become a
     compact card: user block full-width on its own line, the muted
     detail columns wrap below it, actions pinned to the row's end. */
  .emp-table-head { display: none; }
  .emp-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
  .emp-td-user { flex: 1 1 100%; }
  .emp-td-actions { margin-left: auto; }

  .emp-toolbar-row .emp-search-box { max-width: none; flex: 1 1 100%; }
  .emp-filters { margin-left: 0; width: 100%; }
}

@media (max-width: 700px) {
  /* Project detail header: right-aligned meta column looks broken once
     it wraps under the title block on narrow screens — go full-width
     and left-align instead. */
  .proj-detail-meta { margin-left: 0; align-items: flex-start; width: 100%; }
  .proj-detail-header { gap: 12px; }
}

@media (max-width: 560px) {
  /* Modal 2-col grids (new/edit project, task, client, case-study
     forms) — these use inline styles for the 1fr 1fr layout, tagged
     with .modal-grid-2 so they can still collapse on small screens
     without editing every inline style attribute. */
  .modal-grid-2 { grid-template-columns: 1fr !important; }

  .modal-body { padding: 16px; }
  .modal-foot, .modal-footer { padding: 12px 16px; }
  .modal-head { padding: 14px 16px; }
}

@media (max-width: 700px) {
  /* Settings: tighter padding to give form fields more usable width;
     s-row (account rows with an action button on the right) wraps
     instead of squeezing icon+title+action into one tight line. */
  .settings-header { padding: 18px 16px 12px; }
  .settings-tab-bar { padding: 0 16px 14px; }
  .settings-content { padding: 0 16px 32px; }
  .s-row { padding: 12px 16px; flex-wrap: wrap; }
  .s-row-action { margin-left: auto; }
}

/* ================================================================
   CUSTOMIZE TAB — Settings
================================================================ */
.cz-panel { max-width: 900px !important; }
.cz-subnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 16px 20px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--r-card);
  flex-shrink: 0;
}
.cz-subnav-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-md);
  border: 1px solid transparent; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; transition: all .14s;
}
.cz-subnav-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.cz-subnav-btn:hover { background: var(--tile-bg); color: var(--text-primary); border-color: var(--border); }
.cz-subnav-btn.active { background: var(--accent-a18); color: var(--accent); border-color: var(--accent); }

/* Pill list editor */
.cz-pill-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: 999px;
  background: var(--tile-bg); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
}
.cz-pill-del {
  width: 16px; height: 16px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .13s; padding: 0;
}
.cz-pill-del:hover { background: rgba(239,68,68,0.15); color: var(--red); }
.cz-pill-del svg { width: 10px; height: 10px; stroke-width: 2.5; }
.cz-pill-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: none; border: 1px dashed var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: all .13s;
}
.cz-pill-add:hover { border-color: var(--accent); color: var(--accent); }
.cz-pill-add svg { width: 11px; height: 11px; }

/* Color-row editor (for statuses, priorities etc.) */
.cz-row-list { display: flex; flex-direction: column; gap: 8px; }
.cz-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--tile-bg); border: 1px solid var(--border);
}
.cz-item-color {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; flex-shrink: 0;
  -webkit-appearance: none; appearance: none;
  padding: 0; overflow: hidden;
  position: relative;
}
.cz-item-color::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.cz-item-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.cz-item-color::-moz-color-swatch { border: none; border-radius: 50%; }
.cz-item-label {
  flex: 1; background: none; border: none; outline: none;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  min-width: 0;
}
.cz-item-label:focus { color: var(--accent); }
.cz-item-del {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: none; border: 1px solid transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .13s; flex-shrink: 0;
}
.cz-item-del:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,.3); color: var(--red); }
.cz-item-del svg { width: 13px; height: 13px; stroke-width: 2.2; }
.cz-add-row-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-md);
  background: none; border: 1px dashed var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: all .13s; width: 100%;
}
.cz-add-row-btn:hover { border-color: var(--accent); color: var(--accent); }
.cz-add-row-btn svg { width: 13px; height: 13px; }

/* Toggle row for show/hide features */
.cz-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-toggle-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--tile-bg); border: 1px solid var(--border);
}
.cz-toggle-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* Save button for customize sections */
.cz-save-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--r-md);
  background: var(--accent); border: none; color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: filter .15s; align-self: flex-start;
}
.cz-save-btn:hover { filter: brightness(1.08); }
.cz-save-btn:disabled { opacity: .45; pointer-events: none; }
.cz-save-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }

.cz-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

/* ================================================================
   DISPLAY DENSITY
   body.density-compact  → tighter padding, smaller text
   body.density-comfortable → default (loose) spacing
   ================================================================ */

/* ── Compact mode ── */
body.density-compact .kpi-card        { padding: 14px 16px; }
body.density-compact .kpi-value       { font-size: 24px; margin-bottom: 8px; }
body.density-compact .kpi-icon-box    { width: 32px; height: 32px; margin-bottom: 10px; }
body.density-compact .kpi-icon-box svg{ width: 15px; height: 15px; }
body.density-compact .section-card    { padding: 0; }
body.density-compact .section-head    { padding: 12px 16px 10px; }
body.density-compact .section-body    { padding: 0 16px 12px; }
body.density-compact .nav-item        { padding: 7px 12px; font-size: 13px; }
body.density-compact .nav-group-label { margin-top: 12px; margin-bottom: 5px; }
body.density-compact .topbar          { min-height: 52px; padding: 0 20px; }
body.density-compact .page-header     { padding: 14px 0; }
body.density-compact .greeting-hello  { font-size: 22px; }
body.density-compact table td, body.density-compact table th { padding: 8px 12px; }
body.density-compact .proj-card       { padding: 14px; }
body.density-compact .emp-card        { padding: 14px 16px; }
body.density-compact .rev-kpi-card    { padding: 14px 16px; }
body.density-compact .s-card          { padding: 0; }
body.density-compact .s-card-head     { padding: 14px 18px 10px; }
body.density-compact .s-card-body     { padding: 10px 18px 14px; }

/* ── Comfortable mode (default — explicit reset so toggling back works) ── */
body.density-comfortable .kpi-card        { padding: 20px; }
body.density-comfortable .kpi-value       { font-size: 32px; margin-bottom: 14px; }
body.density-comfortable .kpi-icon-box    { width: 40px; height: 40px; margin-bottom: 14px; }
body.density-comfortable .kpi-icon-box svg{ width: 19px; height: 19px; }
body.density-comfortable .nav-item        { padding: 10px 12px; font-size: 13.5px; }
body.density-comfortable .nav-group-label { margin-top: 18px; margin-bottom: 8px; }

/* ================================================================
   CHRONO ASSISTANT — floating AI chatbot widget (assets/js/chatbot.js)
   Injected once per session into document.body, so it floats above
   every page rather than living in one page's fragment.
   ================================================================ */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#chatbotRoot { position: fixed; z-index: 9000; }

/* ── Launcher ── */
#chatbotLauncher {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 100%, white 12%), var(--accent) 55%, color-mix(in srgb, var(--accent) 100%, black 18%));
  color: #fff; border: none; cursor: pointer; z-index: 9001;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#chatbotLauncher svg { width: 24px; height: 24px; }
#chatbotLauncher:hover { transform: scale(1.06); }
#chatbotLauncher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#chatbotRoot.open #chatbotLauncher { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ── Panel (desktop floating) ── */
.chatbot-panel {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 400px; max-width: calc(100vw - 40px);
  height: min(704px, calc(100dvh - 40px)); min-height: 360px;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 100%, white 3%), var(--card-bg) 40%);
  border: 1px solid var(--glass-border-top);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin: bottom right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.96) translateY(8px);
  transition: opacity .16s cubic-bezier(.3,0,.8,.15), transform .16s cubic-bezier(.3,0,.8,.15), visibility 0s linear .16s, width .22s ease, height .22s ease;
}
#chatbotRoot.open .chatbot-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .22s cubic-bezier(.05,.7,.1,1), transform .22s cubic-bezier(.05,.7,.1,1), visibility 0s, width .22s ease, height .22s ease;
}
.chatbot-panel.is-expanded { width: min(760px, calc(100vw - 40px)); height: calc(100dvh - 40px); }

/* ── Header ── */
.chatbot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 64px; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}
.chatbot-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chatbot-title {
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 0; outline: none;
  background: linear-gradient(120deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 75%, var(--accent) 40%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chatbot-status { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 11.5px; color: var(--text-secondary); }
.chatbot-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.chatbot-panel.is-busy .chatbot-status-dot { background: var(--accent); animation: chatPulse 1.2s ease-in-out infinite; }
.chatbot-head-actions { display: flex; align-items: center; gap: 2px; }

.chatbot-icon-btn {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md); flex-shrink: 0;
  transition: color .15s ease, background .15s ease;
}
.chatbot-icon-btn svg { width: 17px; height: 17px; }
.chatbot-icon-btn:hover { color: var(--text-primary); background: var(--tile-bg); }
.chatbot-icon-btn:focus-visible, .chatbot-send-btn:focus-visible, .chat-chip:focus-visible, .chat-msg-action:focus-visible, .chat-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chatbot-icon-btn.active, .chatbot-icon-btn[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ── Avatars ── */
.chat-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.chat-avatar svg { width: 15px; height: 15px; }
.chat-avatar--head { width: 34px; height: 34px; }
.chat-avatar--head svg { width: 18px; height: 18px; }

/* ── Messages ── */
.chatbot-messages {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.chatbot-messages::-webkit-scrollbar { width: 8px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.chatbot-messages::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

.chat-welcome { text-align: center; padding: 24px 8px 8px; margin: auto 0; }
.chat-welcome[hidden] { display: none; }
.chat-welcome-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 100%, white 12%), var(--accent));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-welcome-icon svg { width: 26px; height: 26px; }
.chat-welcome-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; }
.chat-welcome-text { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0 auto; max-width: 320px; }

.chat-msg { display: flex; gap: 10px; animation: chatIn .18s ease-out both; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg--assistant { align-items: flex-start; }
.chat-msg-body { min-width: 0; display: flex; flex-direction: column; }
.chat-msg--user .chat-msg-body { max-width: 80%; align-items: flex-end; }
.chat-msg--assistant .chat-msg-body { flex: 1; max-width: 48rem; }

.chat-bubble-text { font-size: 14px; font-weight: 500; line-height: 1.55; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.chat-bubble-text strong { font-weight: 700; }
.chat-msg--user .chat-bubble-text {
  padding: 10px 14px; border-radius: 18px 18px 6px 18px; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 100%, white 12%), var(--accent));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.chat-msg--assistant .chat-bubble-text { color: var(--text-primary); padding-top: 3px; }

.chat-msg-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--text-muted); min-height: 22px; }
.chat-msg-action {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 6px;
  opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.chat-msg-action svg { width: 12px; height: 12px; }
.chat-msg:hover .chat-msg-action, .chat-msg-action:focus-visible { opacity: 1; }
.chat-msg-action:hover { color: var(--text-primary); background: var(--tile-bg); }
@media (hover: none) { .chat-msg-action { opacity: 1; } }

.chat-typing { display: inline-flex; gap: 5px; padding: 9px 2px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); animation: chatDot 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

.chat-msg--confirm { padding-left: 36px; }

.chat-error {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background: rgba(239,68,68,.08); animation: chatIn .18s ease-out both;
}
.chat-error p { margin: 0; font-size: 12.5px; color: var(--text-primary); }
.chat-error button { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-md); border: 1px solid var(--red); background: transparent; color: var(--red); cursor: pointer; }
.chat-error button:hover { background: rgba(239,68,68,.12); }

/* Inline write-action confirmation card */
.chat-confirm-card {
  background: linear-gradient(165deg, color-mix(in srgb, var(--tile-bg) 100%, white 3%), var(--tile-bg));
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--r-md); padding: 12px 13px; max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.chat-confirm-card--danger { border-color: color-mix(in srgb, var(--red) 45%, var(--glass-border)); box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 12%, rgba(0,0,0,.25)), inset 0 1px 0 rgba(255,255,255,.05); }
.chat-confirm-text { font-size: 12.5px; color: var(--text-primary); margin: 0 0 11px; line-height: 1.55; white-space: pre-wrap; }
.chat-confirm-actions { display: flex; gap: 8px; }
.chat-confirm-btn {
  flex: 1; font-size: 12px; font-weight: 700; padding: 7px 10px;
  border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--border);
  transition: opacity .15s ease, transform .1s ease, background .15s ease;
}
.chat-confirm-btn:active { transform: scale(.97); }
.chat-confirm-btn--cancel { background: transparent; color: var(--text-secondary); }
.chat-confirm-btn--cancel:hover { background: var(--tile-bg); color: var(--text-primary); }
.chat-confirm-btn--confirm {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 100%, white 15%), var(--accent));
  color: #fff; border-color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-confirm-btn--confirm:hover { opacity: .92; }
.chat-confirm-card--danger .chat-confirm-btn--confirm {
  background: linear-gradient(155deg, color-mix(in srgb, var(--red) 100%, white 15%), var(--red));
  border-color: var(--red);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--red) 35%, transparent);
}
.chat-confirm-btn:disabled { opacity: .5; cursor: default; transform: none; }
.chat-confirm-result { font-size: 11px; color: var(--text-secondary); margin: 8px 0 0; font-style: italic; }

/* ── Footer: jump pill, chips, composer ── */
.chatbot-footer { position: relative; flex-shrink: 0; padding: 8px 12px 12px; border-top: 1px solid var(--glass-border); background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent); }
.chat-jump {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  font-size: 12px; font-weight: 700; border-radius: 999px; cursor: pointer;
  background: var(--dropdown-bg, var(--card-bg)); color: var(--text-primary);
  border: 1px solid var(--border-strong); box-shadow: 0 6px 20px rgba(0,0,0,.35);
  animation: chatIn .18s ease-out both;
}
.chat-jump[hidden] { display: none; }
.chat-jump svg { width: 13px; height: 13px; color: var(--accent); }

.chat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips[hidden] { display: none; }
.chat-chip {
  flex-shrink: 0; white-space: nowrap; cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: var(--tile-bg); color: var(--text-primary); border: 1px solid var(--border);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chat-chip:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.chatbot-composer {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 6px 6px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chatbot-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chatbot-composer textarea {
  flex: 1; min-width: 0; resize: none; border: none; outline: none; background: transparent;
  color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.5;
  padding: 7px 0; max-height: 144px; overflow-y: auto;
  field-sizing: content; min-height: 1.5em;
}
.chatbot-composer textarea::placeholder { color: var(--text-secondary); }
.chatbot-composer-actions { display: flex; align-items: center; gap: 4px; }
.chatbot-mic-btn { width: 36px; height: 36px; border-radius: 50%; }
.chatbot-mic-btn.listening { color: #fff; background: var(--red); animation: chatMicPulse 1.2s ease-in-out infinite; }
.chatbot-send-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 100%, white 15%), var(--accent));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .12s ease, opacity .15s ease, box-shadow .15s ease;
}
.chatbot-send-btn svg { width: 17px; height: 17px; }
.chatbot-send-btn:hover:not(:disabled) { transform: scale(1.05); }
.chatbot-send-btn:active:not(:disabled) { transform: scale(.94); }
.chatbot-send-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.chatbot-hint { margin: 7px 0 0; text-align: center; font-size: 11px; color: var(--text-muted); }

@keyframes chatIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes chatDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes chatPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes chatMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* Body lock used while the mobile full-screen chat is open (iOS-safe). */
body.chatbot-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ── Mobile: full-screen takeover; dashboard fully hidden ── */
@media (max-width: 640px) {
  .chatbot-desktop-only { display: none !important; }

  body.chatbot-open .app { visibility: hidden; }

  .chatbot-panel, .chatbot-panel.is-expanded {
    top: var(--vvtop, 0px); left: 0; right: 0; bottom: auto;
    width: 100%; max-width: 100%;
    height: var(--vvh, 100dvh); min-height: 0;
    border: none; border-radius: 0; box-shadow: none;
    background: var(--card-bg);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    transform-origin: bottom center;
    transform: translateY(100%);
  }
  #chatbotRoot.open .chatbot-panel { transform: none; transition-duration: .28s; }
  .chatbot-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .chatbot-head { min-height: 58px; }
  .chatbot-icon-btn { width: 44px; height: 44px; }
  .chatbot-send-btn, .chatbot-mic-btn { width: 40px; height: 40px; }

  /* 16px+ stops iOS auto-zoom on focus */
  .chatbot-composer textarea { font-size: 16px; }
  .chat-bubble-text { font-size: 15px; }
  .chat-msg--user .chat-msg-body { max-width: 85%; }

  #chatbotLauncher { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-panel, #chatbotLauncher, .chat-msg, .chat-error, .chat-jump { transition: none !important; animation: none !important; }
  .chat-typing span, .chatbot-status-dot { animation: none !important; }
}