/* ══════════════════════════════════════════════════════
   OSPELIA · app.ospelia.com · Shared Styles
   Loaded by admin.html and client.html.
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── LIGHT THEME (default) ────────────────────────── */
:root {
  /* Warm editorial canvas — one world with the marketing brand (ospelia.com). */
  --bg:      #f1efe9;   /* warm paper */
  --bg2:     #ffffff;
  --bg3:     #f6f4ee;
  --bg4:     #eae7de;
  --glass:   rgba(255,255,255,.75);
  --glass2:  rgba(26,31,27,.035);
  --glass3:  rgba(26,31,27,.065);
  --border:  rgba(26,31,27,.10);
  --border2: rgba(26,31,27,.16);
  --bord:    #c6cdc2;
  --bordA:   rgba(87,161,95,.35);
  --green:   #57a15f;
  --greenL:  #4d8f54;
  --gold:    #b8892f;   /* editorial gold accent (from the marketing memo) */
  --goldL:   #caa04d;
  --blue:    #2f6690;
  --blueL:   #4d7ea8;
  --amber:   #c98a00;
  --red:     #c23934;
  --cyan:    #0891b2;
  --t1:      #1a1f1b;   /* warm ink */
  --t2:      #4d564f;
  --t3:      #7d857e;
  --grad:    linear-gradient(135deg,#1c2b21 0%,#2f6e3c 100%);
  --shadow-xs: 0 1px 2px rgba(26,31,27,.05);
  --shadow-sm: 0 1px 2px rgba(26,31,27,.06), 0 6px 20px rgba(26,31,27,.07);
  --shadow:    0 2px 8px rgba(26,31,27,.07), 0 10px 28px rgba(26,31,27,.08);
  --shadow-lg: 0 6px 16px rgba(26,31,27,.10), 0 18px 48px rgba(26,31,27,.12);
  --sidebar-w:  248px;
  --topbar-h:   62px;
  --topbar-bg:  #f1efe9;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  /* Brand display serif (matches the marketing site). */
  --serif: "Fraunces", "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Figures. Fraunces is a display serif — lovely in a headline, hard work in a
     dense column of numbers. Numerals use the brand sans with tabular lining
     figures so digits line up column to column. Swap this one line to change
     every number in the product. */
  --num: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── DARK THEME ───────────────────────────────────── */
[data-theme="dark"] {
  --bg:      #070a12;
  --bg2:     #0c1019;
  --bg3:     #111827;
  --bg4:     #161d2e;
  --glass:   rgba(255,255,255,.04);
  --glass2:  rgba(255,255,255,.06);
  --glass3:  rgba(255,255,255,.10);
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.12);
  --bord:    rgba(255,255,255,.18);
  --bordA:   rgba(87,161,95,.4);
  --green:   #57a15f;
  --greenL:  #7eb984;
  --gold:    #d8ad5a;
  --goldL:   #e5c37e;
  --t1:      #f0f4f8;
  --t2:      #8ea8c0;
  --t3:      #57708a;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --shadow:    0 2px 8px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.5), 0 20px 60px rgba(0,0,0,.4);
  --topbar-bg:  #070a12;
}

html, body { height: 100%; }
body {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--t1);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

/* ══ SIDEBAR ══════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
  transition: background .25s, border-color .25s;
}

.sidebar-logo {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo-img {
  height: 32px;
  max-width: 160px;
  width: auto;
  display: block;
  opacity: .92;
  object-fit: contain;
}
.sidebar-logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-logo-name {
  font-size: .85rem;
  font-weight: 800;
  color: var(--t1);
  line-height: 1;
}
.sidebar-logo-sub {
  font-size: .65rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sidebar-section {
  padding: 16px 14px 4px;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--t3);
}

.sidebar-nav { padding: 6px 10px; flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .81rem;
  font-weight: 500;
  color: var(--t2);
  transition: background .15s, color .12s;
  margin-bottom: 2px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  letter-spacing: -.005em;
}
.sidebar-link:hover { background: var(--glass2); color: var(--t1); }
.sidebar-link.active {
  background: rgba(87,161,95,.12);
  color: var(--greenL);
  border-left: 2px solid var(--greenL);
  padding-left: 8px;
  font-weight: 600;
}
.sidebar-link svg { flex-shrink: 0; opacity: .65; }
.sidebar-link:hover svg { opacity: .9; }
.sidebar-link.active svg { opacity: 1; }

/* ── Condensed sidebar (Tasks mode) ──────────────────── */
.sidebar.condensed { width: 52px; }
.sidebar.condensed .sidebar-logo {
  padding: 13px 0; justify-content: center; align-items: center; flex-direction: row;
}
.sidebar.condensed .sidebar-logo-img { height: 24px; max-width: 24px; object-fit: cover; object-position: left; }
.sidebar.condensed .sidebar-logo-sub { display: none; }
.sidebar.condensed .sidebar-section { display: none; }
.sidebar.condensed .sidebar-nav { padding: 6px 5px; }
.sidebar.condensed .sidebar-link {
  justify-content: center; padding: 9px 6px !important;
  gap: 0; font-size: 0;
  border-left: none !important;
}
.sidebar.condensed .sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .6; }
.sidebar.condensed .sidebar-link:hover svg { opacity: .9; }
.sidebar.condensed .sidebar-link.active { background: rgba(87,161,95,.14); }
.sidebar.condensed .sidebar-link.active svg { opacity: 1; }
.sidebar.condensed .sidebar-badge { display: none; }
.sidebar.condensed .sidebar-bottom { display: none; }

.sidebar-badge {
  margin-left: auto;
  background: var(--green);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Client name in sidebar (client view) */
.sidebar-client {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-client-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-client-label {
  font-size: .65rem;
  color: var(--t3);
  margin-bottom: 4px;
}

.sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: 12px 10px;
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--glass);
}
.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: .78rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--t1);
}
.sidebar-user-email {
  font-size: .65rem; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logout-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--t3); font-size: .76rem; font-family: inherit;
  width: 100%; margin-top: 6px;
  transition: color .15s, background .15s;
}
.logout-btn:hover { color: var(--red); background: rgba(239,68,68,.08); }

/* ══ MAIN LAYOUT ════════════════════════════════════════ */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0; /* allow shrinking so wide content can't push .main past the viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main.tasks-mode { margin-left: calc(52px + 210px); }

/* ══ TOPBAR ═════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(0,0,0,.04);
  position: sticky;
  top: 0; z-index: 50;
  flex-shrink: 0;
  gap: 12px;
}
.topbar-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.01em;
  flex: 1;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Admin banner when admin is viewing a client */
.admin-banner {
  background: rgba(59,130,246,.08);
  border-bottom: 1px solid rgba(59,130,246,.2);
  padding: 8px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--blueL);
  flex-shrink: 0;
}
.admin-banner a {
  color: var(--blueL);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.admin-banner a:hover { text-decoration: underline; }
.admin-banner-sep { color: var(--t3); }

/* ══ PAGE CONTENT ════════════════════════════════════════ */
.page-content {
  padding: 30px 32px;
  flex: 1;
}

/* ══ BUTTONS ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: box-shadow .18s, transform .12s, background .15s, opacity .15s;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: .92; }

.btn-primary {
  background: linear-gradient(135deg, #62ae6a 0%, #4d9155 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(87,161,95,.35), 0 1px 2px rgba(87,161,95,.2);
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(87,161,95,.45), 0 2px 6px rgba(87,161,95,.25);
}
.btn-secondary {
  background: var(--bg2);
  color: var(--t2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  color: var(--t1);
  border-color: var(--border2);
  box-shadow: var(--shadow-sm);
}
.btn-danger {
  background: rgba(239,68,68,.10);
  color: #e05252;
  border: 1px solid rgba(239,68,68,.2);
}
.btn-danger:hover {
  background: rgba(239,68,68,.16);
  box-shadow: 0 4px 12px rgba(239,68,68,.15);
}
.btn-sm {
  padding: 5px 12px;
  font-size: .76rem;
}
.btn-icon {
  padding: 7px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  color: var(--t2);
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.btn-icon:hover { color: var(--t1); background: var(--bg3); box-shadow: var(--shadow-sm); }

/* ══ CARDS ══════════════════════════════════════════════ */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.card-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.01em;
}
.card-subtitle {
  font-size: .76rem;
  color: var(--t3);
  margin-top: 3px;
}

/* ══ CLIENT GRID (admin home) ═══════════════════════════ */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.client-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .18s ease;
  cursor: pointer;
  text-decoration: none;
}
.client-card:hover {
  border-color: var(--bordA);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.client-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-avatar {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.client-avatar img { width: 100%; height: 100%; object-fit: cover; }
.client-card-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.01em;
}
.client-card-date {
  font-size: .71rem;
  color: var(--t3);
  margin-top: 3px;
}
.client-card-modules {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.client-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* ══ MODULE BADGES ═══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 600;
}
.badge-green  { background: rgba(87,161,95,.12);   color: var(--greenL); }
.badge-blue   { background: rgba(59,130,246,.12); color: var(--blueL); }
.badge-amber  { background: rgba(245,158,11,.12); color: #fbbf24; }
.badge-red    { background: rgba(239,68,68,.12);  color: #f87171; }
.badge-cyan   { background: rgba(6,182,212,.12);  color: #22d3ee; }
.badge-gray   { background: var(--glass3);         color: var(--t2); }

/* ══ STATUS PILL ════════════════════════════════════════ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-planned    { background: var(--glass2); color: var(--t2); }
.status-active     { background: rgba(87,161,95,.12);  color: var(--greenL); }
.status-paused     { background: rgba(245,158,11,.12); color: #fbbf24; }
.status-completed  { background: rgba(59,130,246,.12); color: var(--blueL); }
.status-pending    { background: var(--glass2); color: var(--t2); }
.status-in_progress { background: rgba(245,158,11,.12); color: #fbbf24; }

/* ══ TABLE ══════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--bg2);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--radius-lg) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg3); }
tbody td {
  padding: 13px 16px;
  color: var(--t1);
  vertical-align: middle;
}
.td-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══ SECTION TABS ═══════════════════════════════════════ */
.section { display: none; }
.section.active { display: block; }

/* ══ EMPTY STATE ════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--t3);
  gap: 10px;
}
.empty-state svg { opacity: .3; }
.empty-state p { font-size: .85rem; }

/* ══ OVERVIEW STATS ═════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--border));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.stat-icon {
  font-size: 1.3rem;
  margin-bottom: 12px;
  display: block;
  line-height: 1;
}
.stat-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
  margin-bottom: 7px;
}
.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--t1);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat-sub {
  font-size: .69rem;
  color: var(--t3);
  margin-top: 8px;
  line-height: 1.4;
}
/* KPI accent color variants — top border only, numbers stay default */
.kpi-green  { --kpi-accent: #57a15f; }
.kpi-red    { --kpi-accent: #dc2626; }
.kpi-amber  { --kpi-accent: #d97706; }
.kpi-blue   { --kpi-accent: #3b82f6; }
.kpi-cyan   { --kpi-accent: #0891b2; }
.kpi-teal   { --kpi-accent: #06b6d4; }
.kpi-purple { --kpi-accent: #a78bfa; }
.kpi-indigo { --kpi-accent: #8b5cf6; }
.kpi-rose   { --kpi-accent: #f43f5e; }

/* Overview dashboard — service snapshot cards */
.ov-snap-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  flex: 1;
  min-width: 220px;
}
.ov-snap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ov-snap-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
}
.ov-snap-link {
  font-size: .75rem;
  color: var(--green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.ov-snap-link:hover { text-decoration: underline; }
.ov-snap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ov-snap-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--t3);
  margin-bottom: 3px;
}
.ov-snap-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
}
.ov-snap-meta {
  font-size: .7rem;
  color: var(--t3);
  margin-top: 10px;
}

/* Overview main panels hover lift */
#ov-actions-panel,
#ov-reports-panel,
#overview-main-grid > div {
  transition: box-shadow .2s;
}
#ov-actions-panel:hover,
#ov-reports-panel:hover,
#overview-main-grid > div:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
}

@media (max-width: 700px) {
  #overview-main-grid { grid-template-columns: 1fr !important; }
  #overview-welcome > div { flex-direction: column; align-items: flex-start !important; }
}

/* ══ ACTION ITEMS ════════════════════════════════════════ */
.action-group { margin-bottom: 26px; }
.action-group-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
  margin-bottom: 10px;
  padding-left: 2px;
}
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s, box-shadow .18s;
}
.action-item:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }
.action-item.completed-item {
  opacity: .55;
}
.action-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
  margin-top: 1px;
}
.action-check:hover { border-color: var(--green); }
.action-check.checked { background: var(--green); border-color: var(--green); }
.action-check.checked::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
  display: block;
}
.action-body { flex: 1; min-width: 0; }
.action-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.3;
}
.action-desc {
  font-size: .78rem;
  color: var(--t2);
  margin-top: 3px;
  line-height: 1.4;
}
.action-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.action-due {
  font-size: .72rem;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-due.overdue { color: var(--red); }
.action-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ══ REPORTS LIST ═══════════════════════════════════════ */
.report-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s, box-shadow .18s;
}
.report-item:hover { border-color: var(--bordA); box-shadow: var(--shadow-sm); }
.report-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--blueL);
}
.report-body { flex: 1; min-width: 0; }
.report-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--t1);
}
.report-desc {
  font-size: .76rem;
  color: var(--t2);
  margin-top: 2px;
}
.report-date {
  font-size: .72rem;
  color: var(--t3);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.report-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* ══ MODAL ══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,15,28,.72);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
/* VE email modal: show whether the JS uses inline display, .open, or .active
   (guards against the historical class-name mismatch that hid the Edit modal). */
#ve-email-modal.open, #ve-email-modal.active { display: flex !important; }
.modal-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 490px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px;
  width: 100%;
  max-width: 490px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--t1);
}
.modal-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--glass2);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--t2);
  transition: color .15s, background .15s;
}
.modal-close:hover { color: var(--t1); background: var(--glass3); }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* ── Settings subtabs ──────────────────────────────────── */
.settings-subtabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.settings-subtab {
  background: none; border: none; cursor: pointer;
  padding: 7px 14px; font-size: .82rem; font-weight: 500;
  color: var(--t3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: 0; transition: color .15s;
}
.settings-subtab:hover { color: var(--t1); }
.settings-subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.settings-tab-panel { padding-top: 4px; }

/* ══ TASK DRAWER ════════════════════════════════════════ */
.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 33.333%;
  min-width: 360px;
  height: 100vh;
  background: var(--bg2);
  border-left: 1.5px solid var(--border);
  box-shadow: -6px 0 28px rgba(0,0,0,.1);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-drawer.open {
  transform: translateX(0);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.task-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.task-drawer-title {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--t3);
}
.task-drawer-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  line-height: 1;
}
.task-drawer-close:hover { color: var(--t1); background: var(--glass3); }
.task-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}
.task-drawer-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg2);
}


/* ── Task Detail Panel ─────────────────────────────────── */
.task-detail-panel {
  position: fixed; top: 0; right: 0;
  width: 380px; height: 100vh;
  background: var(--bg2);
  border-left: 1.5px solid var(--border);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.task-detail-panel.open {
  transform: translateX(0);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.tdp-header {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tdp-title {
  flex: 1; font-size: .95rem; font-weight: 700; color: var(--t1);
  line-height: 1.35; min-width: 0; word-break: break-word;
}
.tdp-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tdp-meta {
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0;
}
.tdp-meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 500; color: var(--t2);
  background: var(--glass2); border-radius: 6px; padding: 3px 8px;
}
.tdp-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.tdp-section { padding: 13px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tdp-section-label {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t3); margin-bottom: 9px;
}
.tdp-link-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.tdp-link-item:last-child { border-bottom: none; }
.tdp-link-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--glass2); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--t3);
}
.tdp-link-text {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-size: .78rem; color: var(--green); text-decoration: none;
}
.tdp-link-text:hover { text-decoration: underline; }
.tdp-link-add { display: flex; gap: 6px; margin-top: 10px; }
.tdp-link-add input {
  flex: 1; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-size: .74rem;
  color: var(--t1); outline: none; transition: border .15s; font-family: inherit;
}
.tdp-link-add input:focus { border-color: var(--green); }
.tdp-chat {
  flex: 1; padding: 12px 18px 8px;
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 100px;
}
.tdp-comment { display: flex; gap: 9px; margin-bottom: 14px; }
.tdp-comment-avatar {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--green); color: #fff;
  font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-transform: uppercase;
}
.tdp-comment-body { flex: 1; min-width: 0; }
.tdp-comment-header { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
.tdp-comment-author { font-size: .72rem; font-weight: 700; color: var(--t1); }
.tdp-comment-time { font-size: .64rem; color: var(--t3); }
.tdp-comment-text {
  font-size: .78rem; color: var(--t2); line-height: 1.55;
  background: var(--glass2); border-radius: 8px;
  padding: 7px 10px; word-break: break-word;
}
.tdp-empty {
  font-size: .78rem; color: var(--t3); text-align: center;
  padding: 18px 0; width: 100%;
}
.tdp-footer {
  border-top: 1px solid var(--border); padding: 11px 14px 13px;
  flex-shrink: 0; background: var(--bg2);
  display: flex; gap: 8px; align-items: flex-end;
}
.tdp-comment-input {
  flex: 1; background: var(--glass2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; font-size: .78rem;
  color: var(--t1); resize: none; outline: none;
  min-height: 38px; max-height: 120px; font-family: inherit;
  transition: border .15s; line-height: 1.45;
}
.tdp-comment-input:focus { border-color: var(--green); }
.tdp-comment-input::placeholder { color: var(--t3); }
.tdp-send-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--green); border: none; color: #fff;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: opacity .15s;
}
.tdp-send-btn:hover { opacity: .82; }
.task-title-link { cursor: pointer; }
.task-title-link:hover { color: var(--green); }

/* ── Redesigned Task Drawer ──────────────────────────────── */
.drw-title-input {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t1);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  line-height: 1.45;
  font-family: inherit;
  overflow: hidden;
  display: block;
}
.drw-title-input::placeholder { color: var(--t3); font-weight: 600; }

.drw-section-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0 16px;
}

.drw-field-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 7px;
  display: block;
}

.drw-pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.drw-pill {
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.drw-pill:hover { border-color: var(--t2); color: var(--t1); }

/* Status pill active states */
[data-target="task-status-input"] .drw-pill.drw-pill-active[data-val="pending"] {
  border-color: var(--t2); background: var(--glass2); color: var(--t1);
}
[data-target="task-status-input"] .drw-pill.drw-pill-active[data-val="in_progress"] {
  border-color: #d97706; background: rgba(217,119,6,.1); color: #d97706;
}
[data-target="task-status-input"] .drw-pill.drw-pill-active[data-val="done"] {
  border-color: var(--green); background: rgba(87,161,95,.1); color: var(--green);
}

/* Priority pill active states */
[data-target="task-priority-input"] .drw-pill.drw-pill-active[data-val="urgent"] {
  border-color: #ef4444; background: rgba(239,68,68,.1); color: #ef4444;
}
[data-target="task-priority-input"] .drw-pill.drw-pill-active[data-val="high"] {
  border-color: #f97316; background: rgba(249,115,22,.1); color: #f97316;
}
[data-target="task-priority-input"] .drw-pill.drw-pill-active[data-val="medium"] {
  border-color: #3b82f6; background: rgba(59,130,246,.1); color: #3b82f6;
}
[data-target="task-priority-input"] .drw-pill.drw-pill-active[data-val="low"] {
  border-color: var(--green); background: rgba(87,161,95,.1); color: var(--green);
}

/* Advanced options disclosure */
.drw-advanced {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.drw-advanced-toggle {
  font-size: .75rem;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0 6px;
  user-select: none;
  transition: color .15s;
}
.drw-advanced-toggle::-webkit-details-marker { display: none; }
.drw-advanced-toggle::before {
  content: '›';
  font-size: .9rem;
  display: inline-block;
  transition: transform .18s;
  line-height: 1;
}
details.drw-advanced[open] > .drw-advanced-toggle::before { transform: rotate(90deg); }
.drw-advanced-toggle:hover { color: var(--t1); }
.drw-advanced-body { padding-bottom: 4px; }

/* ── Chips row (compact inline status + priority) ────────── */
.drw-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.drw-chips-row .drw-pill-group {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.drw-chips-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}
/* priority dot */
.drw-pri-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.drw-pri-urgent { background: #ef4444; }
.drw-pri-high   { background: #f97316; }
.drw-pri-medium { background: #3b82f6; }
.drw-pri-low    { background: var(--green); }

/* ── Property rows ───────────────────────────────────────── */
.drw-props {
  margin-bottom: 14px;
  border-top: 1px solid var(--border);
}
.drw-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  min-height: 34px;
}
.drw-prop-icon {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  flex-shrink: 0;
}
.drw-prop-name {
  font-size: .72rem;
  color: var(--t2);
  width: 76px;
  flex-shrink: 0;
  white-space: nowrap;
}
.drw-prop-val {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drw-prop-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .8rem;
  color: var(--t1);
  font-family: inherit;
  outline: none;
  padding: 0;
  min-width: 0;
}
.drw-prop-input::placeholder { color: var(--t3); }
.drw-prop-select {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .8rem;
  color: var(--t1);
  font-family: inherit;
  outline: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  min-width: 0;
}
.drw-prop-sep { color: var(--t3); font-size: .8rem; flex-shrink: 0; }

/* ── Notes ───────────────────────────────────────────────── */
.drw-notes-wrap { margin: 0 0 16px; }
.drw-notes-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--glass);
  padding: 10px 12px;
  font-size: .8rem;
  color: var(--t1);
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 72px;
  max-height: 70vh;
  box-sizing: border-box;
  transition: border-color .15s;
  line-height: 1.5;
}
.drw-notes-input:focus { border-color: var(--green); }
.drw-notes-input::placeholder { color: var(--t3); }

/* ── Subtasks section ────────────────────────────────────── */
.drw-subtasks-wrap { margin-bottom: 14px; }
.drw-section-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 8px;
}

/* Chat/comments icon button on task rows */
.btn-icon-chat {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.btn-icon-chat:hover { color: var(--green); background: rgba(87,161,95,.1); }

/* ── Form elements ── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--t1);
  font-family: inherit;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s, box-shadow .18s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(87,161,95,.14), var(--shadow-xs);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--t3); }
.form-select { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 90px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Module toggles */
.module-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.module-toggle { display: none; }
.module-toggle-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--glass);
  font-size: .8rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.module-toggle:checked + .module-toggle-label {
  border-color: var(--green);
  background: rgba(87,161,95,.1);
  color: var(--greenL);
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ══ TOAST ══════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 20px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--t1);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  animation: slideUp .22s cubic-bezier(.2,.8,.4,1);
}
.toast.show { display: flex; }
.toast.toast-success { border-color: rgba(87,161,95,.45); }
.toast.toast-error { border-color: rgba(239,68,68,.35); }
.toast-icon { flex-shrink: 0; }
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══ THEME TOGGLE ═══════════════════════════════════════ */
.theme-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--glass2);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.theme-btn:hover { color: var(--t1); }

/* ══ LOADING OVERLAY ════════════════════════════════════ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--glass3);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ FILTER BAR ═════════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chip {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--t2);
  background: var(--glass2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
}
.filter-chip:hover { color: var(--t1); }
.filter-chip.active {
  background: rgba(87,161,95,.12);
  border-color: var(--bordA);
  color: var(--greenL);
}

/* ══ SECTION HEADING ════════════════════════════════════ */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.section-heading-text h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -.02em;
}
.section-heading-text p {
  font-size: .77rem;
  color: var(--t3);
  margin-top: 3px;
}

/* ══ KARA BRAND — LIGHT MODE NAVY SIDEBAR ══════════════ */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #0e1b2c 0%, #0a1622 60%, #081320 100%);
  border-right-color: rgba(255,255,255,.07);
  box-shadow: 2px 0 20px rgba(0,0,0,.15);
}
[data-theme="light"] .sidebar-logo { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="light"] .sidebar-logo-name { color: #f1f5f9; }
[data-theme="light"] .sidebar-logo-sub { color: rgba(255,255,255,.45); }
[data-theme="light"] .sidebar-client { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="light"] .sidebar-client-label { color: rgba(255,255,255,.4); }
[data-theme="light"] .sidebar-client-name { color: #f1f5f9; }
[data-theme="light"] .sidebar-link { color: rgba(255,255,255,.55); }
[data-theme="light"] .sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
[data-theme="light"] .sidebar-link.active {
  background: rgba(87,161,95,.18);
  color: #89c28f;
  border-left-color: #89c28f;
}
[data-theme="light"] .sidebar-link svg { opacity: .6; }
[data-theme="light"] .sidebar-link.active svg { opacity: 1; }
[data-theme="light"] .sidebar-bottom { border-top-color: rgba(255,255,255,.08); }
[data-theme="light"] .sidebar-user { background: rgba(255,255,255,.05); }
[data-theme="light"] .sidebar-user-name { color: #f1f5f9; }
[data-theme="light"] .sidebar-user-email { color: rgba(255,255,255,.4); }
[data-theme="light"] .logout-btn { color: rgba(255,255,255,.45); }
[data-theme="light"] .logout-btn:hover { color: #f87171; background: rgba(239,68,68,.1); }
[data-theme="light"] .admin-banner { background: rgba(87,161,95,.08); border-color: rgba(87,161,95,.25); }

/* ══ RESPONSIVE ════════════════════════════════════════ */
/* Mobile nav trigger + off-canvas backdrop (hidden on desktop) */
.mobile-menu-btn { display: none; }
#sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); z-index: 1001; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .main.tasks-mode { margin-left: 0; }
  .mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--glass2); color: var(--t1); cursor: pointer; flex-shrink: 0; margin-right: 10px;
  }
  #sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; }
  .page-content { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Project Detail ──────────────────────────────────────── */
.proj-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bord);
}
.proj-item:last-child { border-bottom: none; padding-bottom: 0; }
.proj-item-done .proj-item-title { text-decoration: line-through; color: var(--t3); }
.proj-item-done .proj-item-check { background: var(--green); border-color: var(--green); }
.proj-item-done .proj-item-check svg { stroke: white; }
.proj-item-check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--bord); background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; margin-top: 1px; transition: all .15s;
}
.proj-item-check:hover { border-color: var(--green); }
.proj-item-check svg { opacity: 0; transition: opacity .15s; }
.proj-item-done .proj-item-check svg { opacity: 1; }
.proj-item-title { font-size: .84rem; font-weight: 600; color: var(--t1); margin-bottom: 3px; }
.proj-item-meta { font-size: .74rem; color: var(--t3); display: flex; gap: 10px; flex-wrap: wrap; }
.proj-item-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.proj-item:hover .proj-item-actions { opacity: 1; }

.proj-note { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.proj-note:last-child { border-bottom: none; }
.proj-note-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.proj-note-author { font-size: .74rem; font-weight: 700; color: var(--t2); }
.proj-note-time { font-size: .72rem; color: var(--t3); }
.proj-note-del { margin-left: auto; opacity: 0; transition: opacity .15s; }
.proj-note:hover .proj-note-del { opacity: 1; }
.proj-note-body { font-size: .82rem; color: var(--t1); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.proj-file-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.proj-file-row:last-child { border-bottom: none; }
.proj-file-icon { font-size: 1rem; flex-shrink: 0; }
.proj-file-label { font-size: .82rem; color: var(--t1); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.proj-file-label:hover { color: var(--green); text-decoration: underline; }
.proj-file-row .proj-item-actions { opacity: 0; }
.proj-file-row:hover .proj-item-actions { opacity: 1; }
.proj-prog-bar-wrap { height: 6px; background: var(--bg3); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.proj-prog-bar { height: 100%; width: 100%; background: var(--green); border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform .3s; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM THEME — shared building blocks (admin.html + client.html)
   Hero · eyebrows · KPI tiles · panels — light + dark
   (admin.html home also defines dk-* inline; values here are identical)
   ═══════════════════════════════════════════════════════════════ */
:root { --dk-glow: 87,161,95; }

@keyframes dkFade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes dkRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.dk-anim { animation: dkRise .5s cubic-bezier(.22,.61,.36,1) both; }
.dk-anim:nth-child(1){animation-delay:.02s} .dk-anim:nth-child(2){animation-delay:.06s}
.dk-anim:nth-child(3){animation-delay:.10s} .dk-anim:nth-child(4){animation-delay:.14s}
.dk-anim:nth-child(5){animation-delay:.18s} .dk-anim:nth-child(6){animation-delay:.22s}

/* ── HERO ─────────────────────────────────────────────── */
.dk-hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 26px 30px; margin-bottom: 24px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(87,161,95,.28) 0%, rgba(87,161,95,0) 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(45,84,140,.30) 0%, rgba(45,84,140,0) 60%),
    linear-gradient(135deg, #0f1c2e 0%, #15263b 55%, #102132 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px -22px rgba(10,30,25,.55);
}
.dk-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 90% at 88% -10%, rgba(126,185,132,.22), transparent 60%);
  mix-blend-mode: screen;
}
.dk-hero-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.dk-hero-greet {
  font-size: 1.7rem; font-weight: 800; letter-spacing:-.025em; line-height:1.05; color:#fff;
}
.dk-hero-greet .dk-hero-accent { color: #7eb984; }
.dk-hero-date { font-size:.82rem; color:rgba(220,232,228,.72); margin-top:5px; font-weight:500; }
.dk-hero-stats { display:flex; gap:8px; flex-wrap:wrap; align-items:center; position:relative; z-index:1; }
.dk-hero-stat {
  text-align:center; padding:9px 16px; border-radius:13px; min-width:64px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.dk-hero-stat-num { font-size:1.4rem; font-weight:800; line-height:1; letter-spacing:-.03em; color:#fff; }
.dk-hero-stat-lbl { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(220,232,228,.65); margin-top:4px; }
.dk-pill {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size:.78rem; font-weight:600; color:#eef6ef; white-space:nowrap;
}

/* ── EYEBROW SECTION LABELS ───────────────────────────── */
.dk-eyebrow {
  display:flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--t3); margin:26px 2px 13px;
}
.dk-eyebrow:first-child { margin-top:4px; }
.dk-eyebrow::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
.dk-eyebrow .dk-eyebrow-ic { color:var(--green); display:flex; }

/* ── KPI TILES ────────────────────────────────────────── */
.dk-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.dk-kpi {
  position:relative; overflow:hidden;
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  padding:18px 18px 16px; box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s;
}
.dk-kpi::before {
  content:''; position:absolute; top:0; left:0; right:0; height:100%;
  background:linear-gradient(180deg, rgba(var(--kpi-rgb,var(--dk-glow)),.10) 0%, transparent 42%);
  pointer-events:none;
}
.dk-kpi::after {
  content:''; position:absolute; right:-30px; top:-30px; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--kpi-rgb,var(--dk-glow)),.20), transparent 70%);
  pointer-events:none;
}
.dk-kpi:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 34px -14px rgba(var(--kpi-rgb,var(--dk-glow)),.5), var(--shadow);
  border-color:rgba(var(--kpi-rgb,var(--dk-glow)),.4);
}
.dk-kpi-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dk-kpi-ic {
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:rgb(var(--kpi-rgb,var(--dk-glow)));
  background:rgba(var(--kpi-rgb,var(--dk-glow)),.13);
  border:1px solid rgba(var(--kpi-rgb,var(--dk-glow)),.22);
}
.dk-kpi-ic svg { width:19px; height:19px; }
.dk-kpi-trend { font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:99px; background:var(--glass2); color:var(--t3); letter-spacing:.02em; }
.dk-kpi-trend.up   { color:var(--green); background:rgba(87,161,95,.12); }
.dk-kpi-trend.down { color:var(--red);   background:rgba(220,38,38,.10); }
.dk-kpi-label { position:relative; z-index:1; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--t3); }
.dk-kpi-value { position:relative; z-index:1; font-size:2.1rem; font-weight:800; color:var(--t1); line-height:1.05; letter-spacing:-.035em; margin-top:5px; }
.dk-kpi-value .dk-frac { font-size:1.05rem; font-weight:600; color:var(--t3); letter-spacing:0; }
.dk-kpi-sub { position:relative; z-index:1; font-size:.69rem; color:var(--t3); margin-top:7px; line-height:1.35; }

/* ── Brand display serif in-product (matches ospelia.com) ───────────── */
/* Only true display/sentence-case titles — NOT the uppercase eyebrow labels
   (.ci-card-title / .dk-panel-title), where a tracked serif reads wrong. */
.dk-hero-greet,
.card-title { font-family: var(--serif); letter-spacing: -0.012em; }
/* Big KPI numbers in the brand serif with tabular, lining figures — fixes the
   loose monospace comma tracking and reads editorial. */
.dk-kpi-value { font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; font-weight: 700; letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums lining-nums; }
.dk-kpi-value .dk-frac { font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; }

/* ── PREMIUM PANEL ────────────────────────────────────── */
.dk-panel {
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.dk-panel:hover { box-shadow:0 16px 40px -20px rgba(26,31,27,.34), var(--shadow); border-color:var(--border2); transform:translateY(-2px); }
.dk-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.dk-panel-title { font-size:.71rem; font-weight:800; letter-spacing:.1em; color:var(--t2); text-transform:uppercase; display:flex; align-items:center; gap:8px; margin:0; }
.dk-panel-title::before { content:''; width:4px; height:14px; border-radius:3px; background:linear-gradient(180deg,var(--green),var(--greenL)); flex-shrink:0; }
.dk-panel-title .dk-panel-ic { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; }

/* ── BENTO GRIDS ──────────────────────────────────────── */
.dk-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dk-grid-charts { display:grid; grid-template-columns:.85fr 1.1fr 1.1fr; gap:16px; }
.dk-stack { display:flex; flex-direction:column; gap:16px; }
@media (max-width:980px){ .dk-grid-2, .dk-grid-charts { grid-template-columns:1fr; } }
.dk-chartcard { background:linear-gradient(180deg,var(--bg2),var(--bg3)); }

[data-theme="dark"] .dk-hero { border-color:rgba(255,255,255,.10); box-shadow:0 22px 60px -24px rgba(0,0,0,.7); }
[data-theme="dark"] .dk-panel:hover { box-shadow:0 18px 44px -20px rgba(0,0,0,.6); }

/* ── GLOBAL .stat-card UPGRADE (premium glow) ─────────── */
.stat-card { border-radius: 18px; }
.stat-card::before {
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-accent, transparent) 9%, transparent) 0%, transparent 42%);
  border-radius: 18px 18px 0 0;
}
.stat-card::after {
  content:''; position:absolute; right:-30px; top:-30px; width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kpi-accent, transparent) 18%, transparent), transparent 70%);
  pointer-events:none;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--kpi-accent, #25405a) 45%, transparent), var(--shadow);
  border-color: color-mix(in srgb, var(--kpi-accent, var(--border2)) 40%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   KHG V2 SKIN — client portal only (body.skin-khg, set in client.html)
   Approved 2026-07-10 · deep green sidebar · warm paper canvas ·
   serif display accents · brand #57a15f. Scoped so admin.html and
   non-KHG (white-label) agency portals are untouched: client.html
   removes .skin-khg when the client belongs to a non-KHG agency.
   Light mode gets the full treatment; dark mode keeps existing
   dark tokens with green-tinted chrome only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (light mode only — dark theme keeps its own) ── */
[data-theme="light"] body.skin-khg,
html:not([data-theme]) body.skin-khg {
  --bg:      #f1efe9;                    /* warm paper canvas */
  --bg2:     #ffffff;
  --bg3:     #f6f4ee;
  --bg4:     #eae7de;
  --glass:   rgba(255,255,255,.75);
  --glass2:  rgba(26,31,27,.035);
  --glass3:  rgba(26,31,27,.065);
  --border:  rgba(26,31,27,.10);
  --border2: rgba(26,31,27,.16);
  --bord:    #c6cdc2;
  --bordA:   rgba(87,161,95,.4);
  --t1:      #1a1f1b;
  --t2:      #4d564f;
  --t3:      #7d857e;
  --grad:    linear-gradient(135deg,#57a15f 0%,#2f6e3c 100%);
  --topbar-bg: #f1efe9;
  --shadow-xs: 0 1px 2px rgba(26,31,27,.05);
  --shadow-sm: 0 1px 2px rgba(26,31,27,.06), 0 6px 20px rgba(26,31,27,.07);
  --shadow:    0 2px 8px rgba(26,31,27,.07), 0 10px 28px rgba(26,31,27,.07);
  --shadow-lg: 0 6px 16px rgba(26,31,27,.10), 0 18px 48px rgba(26,31,27,.12);
}
body.skin-khg { --khg-serif: var(--serif); }

/* ── Sidebar: deep forest green (light mode; overrides navy) ── */
[data-theme="light"] .skin-khg .sidebar {
  background: linear-gradient(180deg, #1c2b21 0%, #182619 55%, #15211a 100%);
  border-right-color: rgba(255,255,255,.07);
  box-shadow: 2px 0 20px rgba(10,20,12,.18);
}
[data-theme="light"] .skin-khg .sidebar-link { color: #c9d4ca; }
[data-theme="light"] .skin-khg .sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-theme="light"] .skin-khg .sidebar-link.active {
  background: rgba(87,161,95,.22);
  color: #fff;
  border-left-color: #6cb173;
}
[data-theme="light"] .skin-khg .sidebar-section { color: #7e8f81; opacity: 1; }
[data-theme="light"] .skin-khg .sidebar-client-label { color: #7e8f81; }
[data-theme="light"] .skin-khg .sidebar-client-name { color: #eef0e9; }
[data-theme="light"] .skin-khg .sidebar-logo-sub { color: #7e8f81; }
[data-theme="light"] .skin-khg .sidebar-user { background: rgba(255,255,255,.05); }
[data-theme="light"] .skin-khg .sidebar-user-name { color: #eef0e9; }
[data-theme="light"] .skin-khg .sidebar-user-email { color: #7e8f81; }

/* ── Topbar: paper, hairline, serif page title ── */
.skin-khg .topbar { border-bottom: 1px solid var(--border); }
.skin-khg .topbar-title {
  font-family: var(--khg-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

/* ── Hero: deep green gradient + serif greeting ── */
.skin-khg .dk-hero {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(87,161,95,.32) 0%, rgba(87,161,95,0) 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(200,155,60,.16) 0%, rgba(200,155,60,0) 60%),
    linear-gradient(135deg, #1c2b21 0%, #26522f 62%, #15211a 100%);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 50px -22px rgba(16,33,20,.6);
}
.skin-khg .dk-hero::after {
  background: radial-gradient(60% 90% at 88% -10%, rgba(143,196,150,.24), transparent 60%);
}
.skin-khg .dk-hero-greet {
  font-family: var(--khg-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}
.skin-khg .dk-hero-greet .dk-hero-accent { color: #8fc496; }

/* ── Cards & panels: white on paper, warm hairlines ── */
.skin-khg .dk-panel,
.skin-khg .dk-kpi,
.skin-khg .stat-card { border-radius: 16px; }
[data-theme="light"] .skin-khg .dk-panel:hover {
  box-shadow: 0 16px 40px -20px rgba(38,82,47,.35), var(--shadow);
}
[data-theme="light"] .skin-khg .dk-chartcard { background: var(--bg2); }

/* ── Section headings: serif on the H2 only (subtitles stay sans) ── */
.skin-khg .section-heading-text h2 {
  font-family: var(--khg-serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.skin-khg .section-heading-text p { font-family: var(--sans, Inter, system-ui, sans-serif); }

/* ── Status/trend chips: solid, confident ── */
.skin-khg .dk-kpi-trend.up   { color: #fff; background: #3f8a4c; }
.skin-khg .dk-kpi-trend.down { color: #fff; background: #c23934; }

/* ── Buttons: green gradient comes from --grad token; sharpen focus ── */
.skin-khg .btn-primary { box-shadow: 0 1px 2px rgba(26,31,27,.25), inset 0 1px 0 rgba(255,255,255,.12); }
[data-theme="light"] .skin-khg .form-input:focus,
[data-theme="light"] .skin-khg .form-select:focus,
[data-theme="light"] .skin-khg .form-textarea:focus {
  border-color: #57a15f;
  box-shadow: 0 0 0 3px rgba(87,161,95,.18);
}

/* ── Dark mode: keep dark tokens, tint chrome green ── */
[data-theme="dark"] .skin-khg .sidebar {
  background: linear-gradient(180deg, #0b120d 0%, #070a08 100%);
}
[data-theme="dark"] .skin-khg .dk-hero {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(87,161,95,.25) 0%, rgba(87,161,95,0) 55%),
    linear-gradient(135deg, #101a12 0%, #1c2b21 60%, #0b120d 100%);
}

/* ── KHG V2 · NAV PASS (2026-07-13) ─────────────────────────
   Modern navigation treatment: inset pill rows with an accent
   notch, refined group labels, pill tab bar. Scoped to .skin-khg
   so classic/white-label navs are untouched. */

/* Sidebar nav: inset rounded pill rows */
.skin-khg .sidebar-nav { padding: 8px 12px; }
.skin-khg .sidebar-link {
  gap: 11px;
  padding: 8.5px 12px;
  border-radius: 9px;
  font-size: .855rem;
  letter-spacing: 0;
  margin-bottom: 1px;
  position: relative;
}
.skin-khg .sidebar-link.active {
  border-left: none;
  padding-left: 12px;
  font-weight: 600;
}
.skin-khg .sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #6cb173;
}
.skin-khg .sidebar-link svg { opacity: .55; }
.skin-khg .sidebar-link:hover svg,
.skin-khg .sidebar-link.active svg { opacity: 1; }

/* Group labels: micro-caps, quieter chevron */
.skin-khg .sidebar-section {
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .1em;
  padding: 16px 12px 6px;
}
body.skin-khg #khg-nav .knav-head {
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .1em;
  padding: 14px 12px 6px;
  border-radius: 7px;
  transition: color .12s;
}
body.skin-khg #khg-nav .knav-head .knav-chev { font-size: .72rem; opacity: .55; }
[data-theme="light"] .skin-khg #khg-nav .knav-head { color: #7e8f81; }
[data-theme="light"] .skin-khg #khg-nav .knav-head:hover { color: #c9d4ca; }
[data-theme="dark"] .skin-khg #khg-nav .knav-head:hover { color: var(--t2); }
body.skin-khg #khg-nav .knav-group { margin-bottom: 2px; }

/* Client/account blocks in the sidebar */
.skin-khg .sidebar-user { border-radius: 10px; }

/* KHG tab bar: quiet text tabs, solid deep-green active pill */
body.skin-khg #khg-tabs {
  gap: 12px;
  padding: 12px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
body.skin-khg #khg-tabs .khg-tab {
  font-size: .85rem;
  font-weight: 600;
  color: var(--t2);
  padding: 8px 15px;
  border-radius: 99px;
}
body.skin-khg #khg-tabs .khg-tab:hover { background: rgba(26,31,27,.05); color: var(--t1); }
[data-theme="dark"] body.skin-khg #khg-tabs .khg-tab:hover { background: rgba(255,255,255,.06); }
body.skin-khg #khg-tabs .khg-tab.active {
  background: #26522f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(38,82,47,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="dark"] body.skin-khg #khg-tabs .khg-tab.active { background: #3f8a4c; }

/* ═══════════════════════════════════════════════════════════════
   KHG V2 · COMPONENT OVERHAUL (2026-07-13)
   Full editorial pass: Fraunces display serif, disciplined type
   scale, modern tables, flat confident buttons, calm hero, clean
   KPI tiles, refined forms/modals/toasts. Scoped to .skin-khg.
   ═══════════════════════════════════════════════════════════════ */

body.skin-khg { --khg-serif: 'Fraunces', "Iowan Old Style", Georgia, "Times New Roman", serif; }

/* ── TABLES: airy editorial rows, no boxy chrome ── */
.skin-khg .table-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
}
.skin-khg table { font-size: .84rem; }
.skin-khg thead th {
  background: transparent;
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .09em;
  color: var(--t3);
  padding: 12px 16px 9px;
  border-bottom: 1px solid var(--border);
}
.skin-khg thead th:first-child { padding-left: 20px; }
.skin-khg tbody td { padding: 13.5px 16px; }
.skin-khg tbody td:first-child { padding-left: 20px; }
.skin-khg tbody tr { border-bottom: 1px solid var(--hairline-2, rgba(26,31,27,.06)); transition: background .1s; }
[data-theme="light"] .skin-khg tbody tr { border-bottom-color: rgba(26,31,27,.06); }
[data-theme="light"] .skin-khg tbody tr:hover { background: rgba(26,31,27,.025); }
.skin-khg .sort-th { color: var(--t3); }

/* ── BUTTONS: flat, confident, no glow ── */
.skin-khg .btn { border-radius: 10px; font-size: .83rem; letter-spacing: 0; padding: 9px 17px; }
.skin-khg .btn:hover { transform: none; }
.skin-khg .btn:active { transform: translateY(1px); }
.skin-khg .btn-primary {
  background: #2f6e3c;
  box-shadow: 0 1px 2px rgba(26,31,27,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.skin-khg .btn-primary:hover { background: #26522f; box-shadow: 0 2px 8px rgba(38,82,47,.3), inset 0 1px 0 rgba(255,255,255,.12); }
[data-theme="dark"] .skin-khg .btn-primary { background: #3f8a4c; }
[data-theme="dark"] .skin-khg .btn-primary:hover { background: #57a15f; }
.skin-khg .btn-secondary { box-shadow: none; }
.skin-khg .btn-secondary:hover { box-shadow: var(--shadow-xs); }
.skin-khg .btn-danger { background: transparent; color: #c23934; border: 1px solid rgba(194,57,52,.35); }
.skin-khg .btn-danger:hover { background: rgba(194,57,52,.08); box-shadow: none; }
.skin-khg .btn-icon { border-radius: 9px; box-shadow: none; }
.skin-khg .btn:focus-visible, .skin-khg .btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(87,161,95,.3); }

/* ── HERO: calm editorial panel (no glass, no blend tricks) ── */
.skin-khg .dk-hero {
  border-radius: 18px;
  padding: 28px 32px;
  background: linear-gradient(150deg, #24402c 0%, #1c2b21 70%, #182619 100%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 40px -20px rgba(16,33,20,.55);
}
.skin-khg .dk-hero::after { content: none; }
.skin-khg .dk-hero-greet {
  font-family: var(--khg-serif);
  font-size: 1.9rem;
  font-weight: 550;
  letter-spacing: -.01em;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #f4f7f4;
  color: #f4f7f4;
}
.skin-khg .dk-hero-greet .dk-hero-accent { -webkit-text-fill-color: #8fc496; color: #8fc496; font-style: italic; }
.skin-khg .dk-hero-date { color: rgba(201,212,202,.75); margin-top: 7px; }
.skin-khg .dk-hero-stats { gap: 0; }
.skin-khg .dk-hero-stat {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 4px 22px;
  text-align: left;
  min-width: 0;
}
.skin-khg .dk-hero-stat:first-child { border-left: none; padding-left: 0; }
.skin-khg .dk-hero-stat-num { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.skin-khg .dk-hero-stat-lbl { color: rgba(201,212,202,.6); margin-top: 3px; }
.skin-khg .dk-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font-weight: 550;
}

/* ── KPI TILES & STAT CARDS: clean, no radial glow ── */
.skin-khg .dk-kpi::before, .skin-khg .dk-kpi::after,
.skin-khg .stat-card::before, .skin-khg .stat-card::after { content: none; }
.skin-khg .dk-kpi, .skin-khg .stat-card {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.skin-khg .dk-kpi:hover, .skin-khg .stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.skin-khg .dk-kpi-ic {
  background: var(--bg3);
  border: none;
  border-radius: 10px;
  color: #2f6e3c;
}
[data-theme="dark"] .skin-khg .dk-kpi-ic { color: #8fc496; }
.skin-khg .dk-kpi-value { font-weight: 750; letter-spacing: -.03em; }
.skin-khg .dk-kpi-label { font-weight: 650; letter-spacing: .08em; }

/* ── PANELS: serif titles for section headings, calm hover ── */
.skin-khg .dk-panel { border-radius: 16px; }
.skin-khg .dk-panel:hover { transform: none; }
.skin-khg .card { border-radius: 16px; box-shadow: var(--shadow-sm); }
.skin-khg .card-title { font-size: .92rem; letter-spacing: -.01em; }
.skin-khg .dk-eyebrow { font-weight: 650; letter-spacing: .12em; }
.skin-khg .dk-eyebrow::after { background: var(--border); }

/* ── FORMS: quiet fields, strong focus ── */
.skin-khg .form-label { font-size: .76rem; font-weight: 600; color: var(--t2); letter-spacing: .01em; }
.skin-khg .form-input, .skin-khg .form-select, .skin-khg .form-textarea {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .88rem;
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="light"] .skin-khg .form-input:hover,
[data-theme="light"] .skin-khg .form-select:hover,
[data-theme="light"] .skin-khg .form-textarea:hover { border-color: rgba(26,31,27,.22); }

/* ── MODALS: soft backdrop, serif title ── */
.skin-khg .modal-overlay { background: rgba(16,24,18,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.skin-khg .modal, .skin-khg .modal-card { border-radius: 18px; }
.skin-khg .modal { padding: 28px; }
.skin-khg .modal-title { font-family: var(--khg-serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.skin-khg .modal-close { border-radius: 9px; }

/* ── TOASTS: dark green, self-assured ── */
.skin-khg .toast {
  background: #15211a;
  border: 1px solid rgba(255,255,255,.1);
  color: #eef0e9;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(16,33,20,.4);
}
.skin-khg .toast.toast-success { border-color: rgba(87,161,95,.5); }
.skin-khg .toast.toast-error { border-color: rgba(224,116,112,.5); }

/* ── EMPTY STATES & LOADING ── */
.skin-khg .empty-state { padding: 56px 20px; }
.skin-khg .empty-state svg { opacity: .22; }
.skin-khg .empty-state p { font-size: .86rem; color: var(--t3); }
.skin-khg .spinner { border-width: 2.5px; }

/* ── SCROLLBARS: thin & quiet ── */
body.skin-khg ::-webkit-scrollbar { width: 10px; height: 10px; }
body.skin-khg ::-webkit-scrollbar-track { background: transparent; }
body.skin-khg ::-webkit-scrollbar-thumb { background: rgba(26,31,27,.16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
body.skin-khg ::-webkit-scrollbar-thumb:hover { background: rgba(26,31,27,.28); border: 3px solid transparent; background-clip: content-box; }
[data-theme="dark"] body.skin-khg ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border: 3px solid transparent; background-clip: content-box; }
body.skin-khg .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border: 3px solid transparent; background-clip: content-box; }

/* ── SETTINGS SUBTABS & FILTER BAR ── */
.skin-khg .settings-subtab { border-radius: 99px; font-weight: 600; }


/* ── KHG V2 · SCREENSHOT-DRIVEN POLISH (2026-07-13, round 1) ──
   Values wear ink, not data colors (dataviz rule): neutralize the
   inline-colored email KPO numbers/subtexts. Identity/status stays
   on chips and labels. */
.skin-khg .email-kpi-val { color: var(--t1) !important; }
.skin-khg .email-kpi-sub { color: var(--t3) !important; }

/* ═══════════════════════════════════════════════════════════════
   KHG V2 · ROUND 2 (2026-07-13)
   Dark mode retune · mobile/touch pass · empty states · motion ·
   skeleton loading · command palette. Scoped to .skin-khg.
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK MODE: warm espresso-green, same editorial system ── */
[data-theme="dark"] body.skin-khg {
  --bg:      #101411;
  --bg2:     #171c18;
  --bg3:     #1d231e;
  --bg4:     #242b25;
  --glass:   rgba(255,255,255,.045);
  --glass2:  rgba(255,255,255,.06);
  --glass3:  rgba(255,255,255,.10);
  --border:  rgba(255,255,255,.09);
  --border2: rgba(255,255,255,.14);
  --bord:    rgba(255,255,255,.2);
  --bordA:   rgba(108,177,115,.45);
  --green:   #6cb173;
  --greenL:  #8fc496;
  --t1:      #eef1ec;
  --t2:      #a8b3a9;
  --t3:      #78827a;
  --grad:    linear-gradient(135deg,#57a15f 0%,#2f6e3c 100%);
  --topbar-bg: #101411;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
  --shadow:    0 2px 8px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45);
}
[data-theme="dark"] .skin-khg tbody tr { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .skin-khg tbody tr:hover { background: rgba(255,255,255,.03); }
[data-theme="dark"] .skin-khg .dk-kpi-ic { background: rgba(143,196,150,.1); }
[data-theme="dark"] .skin-khg .modal-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .skin-khg .toast { background: #1d231e; }
[data-theme="dark"] .skin-khg .dk-kpi-trend.up { background: #2f6e3c; }
[data-theme="dark"] .skin-khg .sidebar-link.active { background: rgba(108,177,115,.16); }

/* ── EMPTY STATES: warm, actionable ── */
.skin-khg .empty-state { gap: 14px; }
.skin-khg .empty-state svg {
  opacity: 1;
  color: var(--brand-700, #2f6e3c);
  background: var(--bg3);
  border-radius: 50%;
  padding: 18px;
  width: 64px; height: 64px;
  box-sizing: content-box;
  stroke-width: 1.4;
  opacity: .8;
}
[data-theme="dark"] .skin-khg .empty-state svg { color: #8fc496; }
.skin-khg .empty-state p { max-width: 420px; line-height: 1.55; }

/* ── MOTION: one easing, section entrances, reduced-motion guard ── */
body.skin-khg { --ease: cubic-bezier(.22,.61,.36,1); }
@keyframes khgSectionIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.skin-khg .section.active { animation: khgSectionIn .28s var(--ease) both; }
.skin-khg .btn, .skin-khg .card, .skin-khg .dk-panel, .skin-khg .dk-kpi,
.skin-khg .stat-card, .skin-khg .sidebar-link, .skin-khg .khg-tab { transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .skin-khg .section.active, .skin-khg .dk-anim { animation: none !important; }
  body.skin-khg * { transition-duration: .01ms !important; }
}

/* ── SKELETON LOADING (replaces the spinner while data loads) ── */
@keyframes khgShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skin-khg .loading-overlay { align-items: stretch; justify-content: flex-start; padding: 0; }
.skin-khg .loading-overlay .spinner { display: none; }
.khg-skel-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 34px 36px; }
.khg-skel {
  border-radius: 12px;
  background: linear-gradient(100deg, var(--bg3) 40%, var(--bg4) 50%, var(--bg3) 60%);
  background-size: 200% 100%;
  animation: khgShimmer 1.4s linear infinite;
}
.khg-skel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.khg-skel-hero { height: 120px; border-radius: 18px; }
.khg-skel-tile { height: 120px; border-radius: 16px; }
.khg-skel-panel { height: 260px; border-radius: 16px; }
.khg-skel-line { height: 14px; width: 220px; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .khg-skel { animation: none; } }

/* ── COMMAND PALETTE (Cmd+K) ── */
.khg-cmdk-overlay {
  position: fixed; inset: 0; z-index: 7000;
  background: rgba(16,24,18,.5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.khg-cmdk-overlay.open { display: flex; }
.khg-cmdk {
  width: 100%; max-width: 560px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: khgSectionIn .18s var(--ease) both;
}
.khg-cmdk input {
  width: 100%; border: none; outline: none; background: transparent;
  font: 600 1rem/1 inherit; font-family: inherit; color: var(--t1);
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.khg-cmdk input::placeholder { color: var(--t3); font-weight: 500; }
.khg-cmdk-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.khg-cmdk-group {
  font-size: .62rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3); padding: 10px 12px 4px;
}
.khg-cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: .88rem; font-weight: 550; color: var(--t1);
}
.khg-cmdk-item .khg-cmdk-ic {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--green); font-size: .72rem; font-weight: 700;
}
.khg-cmdk-item .khg-cmdk-sub { margin-left: auto; font-size: .72rem; color: var(--t3); font-weight: 500; }
.khg-cmdk-item.sel { background: rgba(87,161,95,.13); }
[data-theme="dark"] .khg-cmdk-item.sel { background: rgba(108,177,115,.15); }
.khg-cmdk-foot {
  display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: .7rem; color: var(--t3);
}
.khg-cmdk-foot b { font-weight: 650; color: var(--t2); background: var(--bg3); border-radius: 5px; padding: 1px 6px; }

/* ── MOBILE / TOUCH PASS ── */
@media (max-width: 1024px) {
  .skin-khg .dk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .skin-khg .main, .skin-khg .page-content { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 768px) {
  body.skin-khg #khg-tabs { padding: 10px 14px; gap: 8px; }
  body.skin-khg #khg-tabs-list { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  body.skin-khg #khg-tabs .khg-tab { scroll-snap-align: start; padding: 9px 16px; font-size: .88rem; }
  .skin-khg .sidebar-link { padding: 12px 14px; font-size: .95rem; }
  .skin-khg .btn { padding: 11px 18px; font-size: .88rem; }
  .skin-khg .btn-icon { width: 40px; height: 40px; }
  .skin-khg tbody td { padding: 14px 12px; }
  .skin-khg .dk-hero { padding: 22px 20px; }
  .skin-khg .dk-hero-greet { font-size: 1.5rem; }
  .skin-khg .dk-hero-stats { width: 100%; overflow-x: auto; }
  .skin-khg .modal { padding: 20px; border-radius: 16px; }
  .skin-khg .form-input, .skin-khg .form-select, .skin-khg .form-textarea { font-size: 16px; } /* prevents iOS zoom */
  .skin-khg .table-wrap { border-radius: 12px; }
  .khg-skel-row { grid-template-columns: 1fr 1fr; }
  .khg-cmdk-overlay { padding-top: 8vh; }
}
@media (max-width: 560px) {
  .skin-khg .dk-kpi-grid { grid-template-columns: 1fr; }
  .khg-skel-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   OPS MODERN — Inventory · Checklists · Recipes
   Cleaner cards, KPI tiles, stock bars, hover states.
   ══════════════════════════════════════════════════════ */

/* KPI tile row (Inventory / Checklists / Recipes summaries) */
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ops-kpi {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 13px 15px; box-shadow: var(--shadow-xs); display: flex; align-items: center; gap: 12px;
  transition: box-shadow .18s, border-color .18s;
}
.ops-kpi:hover { box-shadow: var(--shadow-sm); }
.ops-kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ops-kpi-ic svg { width: 19px; height: 19px; }
.ops-kpi-v { font-size: 1.35rem; font-weight: 800; color: var(--t1); line-height: 1.05; letter-spacing: -.02em; }
.ops-kpi-l { font-size: .66rem; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 3px; }

/* Inventory table */
.inv-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.inv-tbl thead th {
  padding: 11px 10px; text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--t3); background: var(--bg3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.inv-tbl tbody td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.inv-tbl tbody tr { transition: background .12s; }
.inv-tbl tbody tr:hover { background: var(--glass2); }
.inv-tbl tbody tr:last-child td { border-bottom: none; }
.inv-bar { height: 5px; border-radius: 4px; background: var(--glass3); overflow: hidden; margin-top: 6px; width: 74px; margin-left: auto; }
.inv-bar > span { display: block; height: 100%; width: 100%; border-radius: 4px; transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
.inv-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .67rem; font-weight: 700; }
.inv-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.inv-adjust { font-size: .73rem; padding: 5px 11px; border-radius: 8px; }

/* Checklist cards */
.chk-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 17px;
  box-shadow: var(--shadow-xs); transition: box-shadow .18s, border-color .18s, transform .12s; display: flex; flex-direction: column;
}
.chk-card:hover { box-shadow: var(--shadow-sm); }
.chk-card.done { border-color: var(--bordA); box-shadow: inset 0 0 0 1px var(--bordA), var(--shadow-xs); }
.chk-tag { padding: 2px 9px; border-radius: 20px; font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.chk-ring { width: 44px; height: 44px; flex-shrink: 0; position: relative; }
.chk-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 800; color: var(--t1); }
.chk-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.chk-item:hover { background: var(--glass2); }
.chk-item + .chk-item { border-top: 1px solid var(--border); }

/* Recipe cards */
.rcard {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-xs); transition: box-shadow .18s, transform .12s, border-color .18s; display: flex; flex-direction: column;
}
.rcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.rcard-strip { height: 4px; width: 100%; }
.rcard-body { padding: 16px; display: flex; flex-direction: column; }
.rcard-chip { padding: 2px 9px; border-radius: 20px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rcard-metric { flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; background: var(--glass2); }
.rcard-metric-v { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.rcard-metric-l { font-size: .6rem; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; font-weight: 700; }
.rcard-marginbar { display: flex; height: 7px; border-radius: 5px; overflow: hidden; background: var(--glass3); margin: 12px 0 4px; }
.rcard-ing { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .8rem; }
.rcard-ing + .rcard-ing { border-top: 1px dashed var(--border); }

/* ══ Integration provider logos + connect flow ══ */
.integ-logo { position: relative; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.integ-logo.has-img { background: #fff; border: 1px solid var(--border); }
.integ-logo img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 76%; object-fit: contain; opacity: 0; z-index: 1; }
.integ-logo.has-img img { opacity: 1; }
.il-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1rem; border-radius: 9px; }
.integ-logo.has-img .il-mono { display: none; }
.integ-scope-opt { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--t1); cursor: pointer; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; flex: 1; transition: border-color .15s, background .15s; }
.integ-scope-opt:hover { border-color: var(--bord); }
.integ-scope-opt.sel { border-color: var(--green); background: rgba(87,161,95,.07); }
.integ-test-note { font-size: .82rem; border-radius: 9px; padding: 9px 12px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.integ-test-ok { background: rgba(87,161,95,.12); color: #3f8f52; }
.integ-test-warn { background: rgba(217,119,6,.13); color: #a5771a; }
.integ-test-err { background: rgba(220,38,38,.12); color: #c23934; }
.integ-map-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.integ-map-row select, .integ-map-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg2); color: var(--t1); font-size: .82rem; font-family: inherit; outline: none; }

/* ══════════════════════════════════════════════════════
   TOP-NAV MODE — groups on top, page tabs in-canvas.
   Green scheme (current tokens) + Instrument Sans / IBM Plex Mono.
   ══════════════════════════════════════════════════════ */
:root { --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; }
body.topnav-mode { --khg-serif: 'Instrument Sans', system-ui, sans-serif; } /* fusion: no serif headings */

body.topnav-mode .sidebar { display: none; }
body.topnav-mode .main { margin-left: 0; }
body.topnav-mode .main.tasks-mode { margin-left: 0; }
/* Let .main grow with its content instead of being stretched to exactly 100vh —
   otherwise the margin-top:auto footer floats at the 100vh mark and long pages
   overflow underneath it. align-items:flex-start sizes .main to its content;
   .main's own min-height:100vh still pins the footer to the bottom on short pages. */
body.topnav-mode { align-items: flex-start; }
/* Top-nav chrome is 56px (top bar) + 46px (sub-nav) = 102px. Full-bleed sections
   (Team Chat, Tasks) size to calc(100vh - var(--topbar-h)); point the variable at
   the real chrome height so they fit the viewport instead of overflowing by 40px. */
body.topnav-mode { --topbar-h: 102px; }
body.topnav-mode .mobile-menu-btn { display: none; }

/* ── Top bar ── */
#topnav { display: none; }
body.topnav-mode #topnav { display: block; position: sticky; top: 0; z-index: 60; background: var(--bg2); border-bottom: 1px solid var(--border); }
.tn-in { max-width: none; height: 56px; display: flex; align-items: stretch; gap: 18px; padding: 0 24px; }
.tn-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--t1); text-decoration: none; flex: 0 0 auto; }
.tn-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; }
.tn-groups { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; flex-wrap: nowrap; }
.tn-g { display: inline-flex; align-items: center; height: 100%; padding: 0 12px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--t2); font-weight: 500; font-size: .86rem; cursor: pointer; white-space: nowrap; font-family: inherit; }
.tn-g:hover { color: var(--t1); }
.tn-g.on { color: var(--t1); font-weight: 600; border-bottom-color: var(--green); }
.tn-more-wrap { display: inline-flex; align-items: stretch; height: 100%; position: relative; }
.tn-more { position: absolute; top: calc(100% + 8px); left: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; min-width: 190px; display: none; z-index: 70; }
.tn-more.open { display: block; }
.tn-more button { display: block; width: 100%; text-align: left; padding: 8px 11px; border: none; background: none; border-radius: 7px; font-size: .85rem; font-weight: 500; color: var(--t2); cursor: pointer; font-family: inherit; }
.tn-more button:hover { background: var(--glass2); color: var(--t1); }
.tn-more button.on { color: var(--greenL); font-weight: 600; }
.tn-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tn-icon { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--t2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.tn-icon:hover { color: var(--t1); background: var(--glass2); }
.tn-user { position: relative; display: flex; align-items: center; }
.tn-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: .8rem; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tn-user-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 13px; min-width: 210px; display: none; z-index: 70; }
.tn-user-menu.open { display: block; }
.tn-user-name { font-weight: 700; font-size: .85rem; color: var(--t1); }
.tn-user-email { font-size: .74rem; color: var(--t3); margin: 2px 0 11px; word-break: break-all; }
.tn-signout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--t2); font-size: .8rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.tn-signout:hover { color: var(--red); border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }

/* ── Page-tab bar → centered underline tabs ── */
body.topnav-mode #khg-tabs { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 56px; z-index: 40; padding: 0; box-shadow: none; }
body.topnav-mode .khg-tabs-in { max-width: none; height: 46px; display: flex; align-items: stretch; gap: 8px; padding: 0 24px; }
body.topnav-mode #khg-tabs-list { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
body.topnav-mode #khg-tabs-list::-webkit-scrollbar { display: none; }
body.topnav-mode #khg-tabs .khg-tab { display: inline-flex; align-items: center; height: 100%; background: none; border: none; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--t2); font-weight: 500; padding: 0 12px; font-family: inherit; font-size: .85rem; white-space: nowrap; cursor: pointer; }
body.topnav-mode #khg-tabs .khg-tab:hover { background: none; color: var(--t1); }
body.topnav-mode #khg-tabs .khg-tab.active { background: none; box-shadow: none; color: var(--t1); border-bottom-color: var(--green); font-weight: 600; }
body.topnav-mode #khg-tabs-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body.topnav-mode #khg-tabs-actions .theme-btn { display: none; } /* theme lives in the top bar */

/* ── Full-width content + left overview rail ── */
body.topnav-mode #tn-layout { display: flex; align-items: flex-start; gap: 0; min-height: calc(100vh - 102px); }
body.topnav-mode .page-content { flex: 1; min-width: 0; max-width: none; margin: 0; width: auto; }
body.topnav-mode #ov-rail { flex: 0 0 258px; width: 258px; border-right: 1px solid var(--border); background: var(--bg2); position: sticky; top: 102px; height: calc(100vh - 102px); overflow-y: auto; padding: 16px 14px 40px; }
#ov-rail { display: none; }
body.topnav-mode #ov-rail { display: block; }
.ovr-head { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); margin-bottom: 12px; padding: 0 2px; display: flex; justify-content: space-between; align-items: baseline; }
#ovr-date { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t3); }
/* Each module is a distinct card so sections read as separate blocks. */
.ovr-sec { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px 11px; margin: 0 0 11px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ovr-sec:last-child { margin-bottom: 0; }
.ovr-sec-h { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); padding: 9px 0 8px; margin: 0 0 4px; border-bottom: 1px solid var(--border); }
.ovr-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ovr-sec .ovr-stat:last-of-type { border-bottom: none; padding-bottom: 2px; }
.ovr-stat .l { font-size: .8rem; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.ovr-stat .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--t1); font-size: .92rem; letter-spacing: -.03em; }
.ovr-stat .v.warn { color: #dc2626; }
.ovr-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ovr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: .8rem; min-width: 0; }
.ovr-row .nm { color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ovr-row .meta { color: var(--t3); font-size: .72rem; flex: 0 0 auto; }
.ovr-row .q { font-family: var(--mono); font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.ovr-empty { font-size: .78rem; color: var(--t3); padding: 6px 0; }
.ovr-link { display: block; margin-top: 8px; font-size: .74rem; color: var(--green); font-weight: 700; cursor: pointer; }
.ovr-link:hover { text-decoration: underline; }
@media (max-width: 1000px) { body.topnav-mode #ov-rail { display: none; } }

/* ── Tasks: spaces sidebar re-homed under the top bar ── */
body.topnav-mode #task-client-sidebar {
  top: 102px; left: 0; height: calc(100vh - 102px);
  z-index: 35; box-shadow: 1px 0 0 var(--border);
}
/* In tasks mode the spaces sidebar takes the left rail; hide the overview rail
   and give the page room so nothing overlaps. */
body.topnav-mode .main.tasks-mode #ov-rail { display: none; }
body.topnav-mode .main.tasks-mode #tn-layout { min-height: calc(100vh - 102px); }
@media (min-width: 1001px) {
  body.topnav-mode .main.tasks-mode .page-content { margin-left: 210px; }
}
@media (max-width: 1000px) {
  body.topnav-mode #task-client-sidebar { z-index: 55; box-shadow: 2px 0 16px rgba(0,0,0,.14); }
}

/* ── Settings: full-width + modern segmented subtabs ── */
body.topnav-mode #section-settings .settings-wrap,
body.topnav-mode #section-settings .settings-tab-panel { max-width: none; }
body.topnav-mode #settings-tab-general {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 18px; align-items: start;
}
body.topnav-mode #settings-tab-general .ci-card { margin-top: 0 !important; }
body.topnav-mode .settings-subtabs {
  border-bottom: none; gap: 5px; display: inline-flex; width: auto;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 5px; border-radius: 12px; margin-bottom: 22px;
}
body.topnav-mode .settings-subtab {
  border-radius: 8px; padding: 7px 16px; font-weight: 600;
  border-bottom: 2px solid transparent; color: var(--t2); margin-bottom: 0;
}
body.topnav-mode .settings-subtab:hover { color: var(--t1); background: var(--glass2); }
body.topnav-mode .settings-subtab.active {
  background: var(--green); color: #fff; border-bottom-color: transparent;
}

/* ── Mono numerals on KPI/stat figures (crafted feel) ── */
body.topnav-mode .dk-kpi-value, body.topnav-mode .stat-value, body.topnav-mode .ops-kpi-v,
body.topnav-mode .sum-kpi .v { font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
body.topnav-mode .rcard-metric-v { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sum-kpi .v { font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.sum-kpi.is-zero .v { color: var(--t3); }

@media (max-width: 640px) {
  .tn-in, body.topnav-mode .khg-tabs-in, body.topnav-mode .page-content { padding-left: 16px; padding-right: 16px; }
  .tn-logo span:last-child { display: none; } /* mark only on small screens */
}

/* ══ MOBILE + PWA NAVIGATION (topnav-mode) ═══════════════════════════
   The horizontal group nav can't fit a phone, so below 768px we switch
   to an off-canvas DRAWER — reusing the existing left rail and its
   grouped nav — opened by a hamburger in the top bar. We also honor PWA
   safe-area insets so nothing hides under the notch / status bar. */
.tn-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 2px 0 -6px; padding: 0;
  border: none; background: none; cursor: pointer;
  color: rgba(255,255,255,.92); /* lives on the dark-green top bar */
  align-self: center;           /* bar children stretch; center the fixed-height button */
  border-radius: 9px; -webkit-tap-highlight-color: transparent; flex: 0 0 auto;
}
.tn-hamburger:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Safe-area: pad the sticky top bar below the notch; keep sub-tabs pinned right under it. */
body.topnav-mode #topnav { padding-top: env(safe-area-inset-top); }
body.topnav-mode #khg-tabs { top: calc(56px + env(safe-area-inset-top)); }

@media (max-width: 768px) {
  /* Hamburger replaces the (too-wide) horizontal group list */
  body.topnav-mode .tn-hamburger { display: inline-flex; }
  body.topnav-mode .tn-groups { display: none; }
  body.topnav-mode .tn-in { gap: 8px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body.topnav-mode .tn-logo { margin-right: auto; }

  /* Left rail → slide-in drawer with the full grouped nav (position:fixed = out of flow, so content stays full width) */
  body.topnav-mode .sidebar {
    display: flex; position: fixed; top: 0; left: 0; height: 100%;
    width: min(86vw, 300px); transform: translateX(-100%);
    z-index: 1001; box-shadow: 0 0 48px rgba(0,0,0,.45);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    transition: transform .24s ease;
  }
  body.topnav-mode .sidebar.open { transform: translateX(0); }
  #sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; }

  /* Sub-tab bar: stack into two FULL-WIDTH rows so the brand switcher / add
     button no longer overlap or crush the sub-tabs. Row 1 = actions, Row 2 =
     scrollable sub-tabs (each spans the full width). */
  body.topnav-mode #khg-tabs { height: auto; }
  body.topnav-mode .khg-tabs-in {
    flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0;
  }
  body.topnav-mode #khg-tabs-actions {
    order: 1; width: 100%; box-sizing: border-box; justify-content: flex-start;
    gap: 8px; padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.topnav-mode #khg-tabs-actions::-webkit-scrollbar { height: 0; }
  body.topnav-mode #khg-tabs-actions .brand-switcher { flex: 0 0 auto; }
  body.topnav-mode #khg-tabs-actions .brand-switcher select { max-width: 44vw; }
  body.topnav-mode #khg-tabs-actions .topbar-actions { gap: 8px; flex: 0 0 auto; }
  body.topnav-mode #khg-tabs-actions .btn { flex: 0 0 auto; white-space: nowrap; }
  body.topnav-mode #khg-tabs-list {
    order: 2; width: 100%; box-sizing: border-box; height: 46px;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 4px;
  }

  /* Full-width content; single-column layout (overview rail already hidden ≤1000px) */
  body.topnav-mode #tn-layout { display: block; min-height: 0; }
  body.topnav-mode .page-content {
    padding: 16px max(14px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    max-width: none; width: auto;
  }
  body.topnav-mode .af-in { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ── Top-nav logo (theme-aware) ── */
.tn-logo img { height: 26px; width: auto; display: block; }
.tn-logo .tn-logo-dark { display: none; }
[data-theme="dark"] .tn-logo .tn-logo-light { display: none; }
[data-theme="dark"] .tn-logo .tn-logo-dark { display: block; }

/* ── App footer (topnav-mode) ── */
#app-footer { display: none; }
body.topnav-mode #app-footer { display: block; border-top: 1px solid var(--border); background: var(--bg2); margin-top: auto; }
.af-in { max-width: none; padding: 16px 24px; display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--t3); flex-wrap: wrap; }
.af-brand { font-weight: 700; color: var(--t2); }
.af-sep { color: var(--t3); opacity: .6; }
.af-spacer { flex: 1; min-width: 20px; }
.af-in a { color: var(--t2); text-decoration: none; font-weight: 500; }
.af-in a:hover { color: var(--green); }
.af-copy { color: var(--t3); }
@media (max-width: 640px) { .af-in { padding-left: 16px; padding-right: 16px; } }

/* ══ Nav restyle: dark-green top bar, white sub-nav, centered ══ */
:root { --topnav-green: #2f5d3a; --topnav-green-b: #274e31; }
[data-theme="dark"] { --topnav-green: #21402a; --topnav-green-b: #18301f; }

body.topnav-mode #topnav { background: var(--topnav-green); border-bottom: 1px solid var(--topnav-green-b); }
.tn-groups { justify-content: center; overflow: hidden; }
.tn-g { color: rgba(255,255,255,.82); }
.tn-g:hover { color: #fff; }
.tn-g.on { color: #fff; font-weight: 600; border-bottom-color: #fff; }
/* logo always the white lockup on the green bar */
.tn-logo .tn-logo-light { display: none !important; }
.tn-logo .tn-logo-dark { display: block !important; }
/* right-side controls on green */
.tn-icon { border-color: rgba(255,255,255,.28); background: transparent; color: rgba(255,255,255,.85); }
.tn-icon:hover { color: #fff; background: rgba(255,255,255,.14); }
.tn-ava { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
/* More dropdown stays a readable white popover */
.tn-more { background: var(--bg2); }
.tn-more button { color: var(--t2); }
.tn-more button:hover { background: var(--glass2); color: var(--t1); }

/* Sub-nav: white surface, tabs centered, actions pinned right */
body.topnav-mode #khg-tabs { background: var(--bg2); display: block; }
body.topnav-mode .khg-tabs-in { position: relative; justify-content: center; width: 100%; }
body.topnav-mode #khg-tabs-list { flex: 0 1 auto; justify-content: center; }
body.topnav-mode #khg-tabs-actions { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }

/* ══ MOBILE SUB-NAV OVERRIDES ═══════════════════════════════════════════════
   Must come AFTER the centered "nav restyle" above. On desktop the sub-tabs
   are centered and the actions (brand switcher + add button) are absolutely
   pinned to the right — on a phone that overlaps and crushes the sub-tabs and
   pushes the page past full width. Below 768px we un-center, un-absolute, and
   stack the bar into two full-width rows: actions on top, scrollable tabs below. */
@media (max-width: 768px) {
  /* Kill sideways scroll from off-canvas drawers parked off-screen. `clip`
     (not hidden) doesn't create a scroll container, so sticky headers and the
     fixed-position nav drawer keep working. */
  html, body { overflow-x: clip; max-width: 100%; }
  /* .skin-khg .main adds 18px side padding ≤1024px, which insets the whole
     header/nav bars — on a phone that reads as "not full width". Let the bars
     go edge-to-edge; content keeps its own padding via .page-content. */
  body.topnav-mode .main { padding-left: 0; padding-right: 0; }
  body.topnav-mode #khg-tabs { display: block; height: auto; }
  body.topnav-mode .khg-tabs-in {
    position: static; flex-direction: column; align-items: stretch;
    justify-content: flex-start; width: 100%; height: auto; gap: 0; padding: 0;
  }
  body.topnav-mode #khg-tabs-actions {
    position: static; order: 1; right: auto; top: auto; transform: none;
    width: 100%; box-sizing: border-box; justify-content: flex-start;
    gap: 8px; padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.topnav-mode #khg-tabs-actions::-webkit-scrollbar { height: 0; }
  body.topnav-mode #khg-tabs-actions .brand-switcher { flex: 0 0 auto; }
  body.topnav-mode #khg-tabs-actions .brand-switcher select { max-width: 40vw; }
  body.topnav-mode #khg-tabs-actions .topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; margin: 0; }
  body.topnav-mode #khg-tabs-actions .btn { flex: 0 0 auto; white-space: nowrap; }
  body.topnav-mode #khg-tabs-list {
    position: static; order: 2; width: 100%; box-sizing: border-box;
    flex: 0 0 auto; justify-content: flex-start; height: 46px;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.topnav-mode #khg-tabs-list::-webkit-scrollbar { height: 0; }
  /* Comfortable tap targets for the sub-tabs */
  body.topnav-mode #khg-tabs .khg-tab { padding: 0 14px; font-size: .9rem; }
}

/* ══ MOBILE: brand switcher relocates next to the logo in the top bar ══
   JS (placeBrandSwitcher) moves .brand-switcher into #tn-brand-slot below 768px;
   here we reveal the slot and restyle the pill for the dark-green header. */
.tn-brand-slot { display: none; align-items: center; min-width: 0; }
@media (max-width: 768px) {
  body.topnav-mode .tn-brand-slot { display: flex; flex: 0 1 auto; min-width: 0; }
  body.topnav-mode .tn-logo { margin-right: 0; flex: 0 0 auto; }
  body.topnav-mode .tn-right { margin-left: auto; flex: 0 0 auto; }
  body.topnav-mode .tn-brand-slot .brand-switcher {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30);
    color: #fff; padding: 5px 9px; min-width: 0; gap: 6px;
  }
  body.topnav-mode .tn-brand-slot .brand-switcher svg { color: rgba(255,255,255,.85); }
  body.topnav-mode .tn-brand-slot .brand-switcher select {
    color: #fff; font-weight: 650; max-width: 34vw; min-width: 0; text-overflow: ellipsis;
  }
  body.topnav-mode .tn-brand-slot .brand-switcher select option { color: #111; }
}

/* Collapse the sub-nav actions row on mobile when it holds no visible add
   button (brand switcher now lives in the top bar). */
@media (max-width: 768px) {
  body.topnav-mode #khg-tabs-actions.actions-empty { display: none; }
}

/* ══ MOBILE CONTENT SAFETY (audit pass) ═══════════════════════════════════════
   Wide content must scroll inside its own container, never force the page wide. */
@media (max-width: 768px) {
  /* Known table wrappers scroll horizontally */
  body.topnav-mode .table-wrap,
  body.topnav-mode .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Media can't force overflow */
  body.topnav-mode .page-content img,
  body.topnav-mode .page-content video,
  body.topnav-mode .page-content canvas { max-width: 100%; }
  body.topnav-mode .page-content pre { max-width: 100%; overflow-x: auto; }

  /* Team Chat: the fixed 300px + thread two-pane can't fit a phone — stack it
     (conversation list on top, thread below). Inline styles need !important. */
  #section-messages { margin: 0 !important; height: auto !important; min-height: 60vh; overflow: visible !important; }
  #section-messages > div { flex-direction: column !important; height: auto !important; }
  #section-messages > div > div:first-child { width: 100% !important; max-height: 42vh; border-right: none !important; border-bottom: 1px solid var(--border); }
  #section-messages > div > div:nth-child(2) { min-height: 52vh; }
  #section-messages .chat-nm { white-space: normal; }
}

/* :has() isolated so browsers without support drop only this rule. Makes the
   direct parent of any wide table scroll — covers bare .data-table injections
   and any table with an inline min-width, current or future. */
@media (max-width: 768px) {
  body.topnav-mode :is(div, section, td, th):has(> table.data-table),
  body.topnav-mode :is(div, section, td, th):has(> table[style*="min-width"]) {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
}

/* Analytics / Search Console drill-down embed: taller on mobile so the stacked
   report needs less nested scrolling. */
@media (max-width: 768px) {
  body.topnav-mode .wa-embed-frame { height: calc(100dvh - 150px) !important; min-height: 78vh !important; }
}

/* ══ MOBILE: Ops Overview decluttered (≤768px) ═══════════════════════════════
   On a phone this section stacked: 5 header buttons (3 duplicating app chrome),
   a 7-button range row, two labelled selects and an 8-tab wall. Now: Sync/Add
   side by side, one swipeable tab strip, and a tidy label+select filter grid. */
@media (max-width: 768px) {
  body.topnav-mode #section-ops .ops-top { flex-direction: column; align-items: stretch; gap: 10px; }
  body.topnav-mode #section-ops .ops-actions { display: flex; gap: 8px; }
  body.topnav-mode #section-ops .ops-actions .ops-btn { flex: 1; text-align: center; }
  /* hide duplicates of app chrome: self-link to the dashboard, theme, sign-out */
  body.topnav-mode #section-ops #full-dash-link,
  body.topnav-mode #section-ops .ops-actions button[title="Theme"],
  body.topnav-mode #section-ops .ops-actions button:last-child { display: none; }

  /* one swipeable row of tabs instead of a wrapped wall */
  body.topnav-mode #section-ops .tabbar { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 6px; }
  body.topnav-mode #section-ops .tabbar::-webkit-scrollbar { height: 0; }
  body.topnav-mode #section-ops .tabbar .tabbtn { flex: 0 0 auto; white-space: nowrap; }

  /* filter bar → date-range strip on top (swipeable), then aligned label+select rows */
  body.topnav-mode #section-ops .ctrl-bar { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
  body.topnav-mode #section-ops .ctrl-bar > span[style*="flex:1"] { display: none; }
  body.topnav-mode #section-ops #range-seg { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.topnav-mode #section-ops #range-seg::-webkit-scrollbar { height: 0; }
  body.topnav-mode #section-ops #range-seg button { flex: 0 0 auto; }
  body.topnav-mode #section-ops #custom-dates,
  body.topnav-mode #section-ops #cmp-custom-global { grid-column: 1 / -1; }
  body.topnav-mode #section-ops .ctrl-sel { width: 100%; min-width: 0; }

  /* chip rows inside panels (chart type / granularity / etc.) scroll, not wrap */
  body.topnav-mode #section-ops .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ══ POLISH PACK (2026-07-17): skeletons · empty states · KPI pop ·
   brand accent · bottom nav · pull-to-refresh ═══════════════════ */

/* Skeleton shimmer loaders */
@keyframes oskSheen { from { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } }
.osk { border-radius: 9px; background: var(--glass2);
  background-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(255,255,255,.35) 40px, rgba(0,0,0,0) 80px);
  background-size: 200px 100%; background-repeat: no-repeat;
  animation: oskSheen 1.1s ease-in-out infinite; }
[data-theme="dark"] .osk { background-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(255,255,255,.07) 40px, rgba(0,0,0,0) 80px); }
.osk-row { height: 52px; margin-bottom: 10px; }
.osk-card { height: 96px; margin-bottom: 12px; border-radius: 13px; }
.osk-line { height: 14px; margin-bottom: 8px; max-width: 70%; }
@media (prefers-reduced-motion: reduce) { .osk { animation: none; } }

/* Empty states — friendlier everywhere .empty-state is used */
.empty-state { padding: 46px 20px !important; }
.empty-state svg { opacity: .35; width: 44px; height: 44px; margin-bottom: 4px; }
.empty-state p { font-size: .9rem; color: var(--t2); max-width: 380px; margin: 10px auto 0; line-height: 1.55; }

/* KPI pop-in — stats feel alive on render */
.stat-value, .dk-kpi-value, .ops-kpi-v, .sum-kpi .v { animation: dkRise .45s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .stat-value, .dk-kpi-value, .ops-kpi-v, .sum-kpi .v { animation: none; } }

/* Brand accent — set by JS when a brand is focused */
:root { --brand-accent: #57a15f; }
body.topnav-mode #khg-tabs .khg-tab.active { border-bottom-color: var(--brand-accent); }
.brand-switcher.brand-focused { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
body.topnav-mode .tn-brand-slot .brand-switcher.brand-focused { background: rgba(255,255,255,.22); }

/* ══ Bottom tab bar (mobile PWA) ══ */
#bnav { display: none; }
@media (max-width: 768px) {
  body.topnav-mode #bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    box-shadow: 0 -4px 18px rgba(0,0,0,.07);
    /* Promote to its own compositor layer so it stays pinned during scroll on
       iOS (body is the scroll container, and a plain fixed bar lags/sticks). */
    -webkit-transform: translateZ(0); transform: translateZ(0);
    will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  body.topnav-mode #bnav .bnav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; padding: 6px 2px 4px; cursor: pointer;
    color: var(--t3); font-family: inherit; font-size: .6rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent; position: relative; border-radius: 10px;
  }
  body.topnav-mode #bnav .bnav-btn svg { width: 21px; height: 21px; }
  body.topnav-mode #bnav .bnav-btn.active { color: var(--brand-accent); }
  body.topnav-mode #bnav .bnav-badge {
    position: absolute; top: 1px; left: calc(50% + 6px); min-width: 16px; height: 16px;
    background: #ef4444; color: #fff; border-radius: 99px; font-size: .6rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
  }
  /* keep content + footer clear of the bar */
  body.topnav-mode.has-bnav .page-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  body.topnav-mode.has-bnav #app-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Redundant on phones — bottom nav + pull-to-refresh cover it, and it overlaps cards. */
  body.topnav-mode.has-bnav #kp-pwa-refresh { display: none; }
}

/* Schedule: the 7-column week grid is unreadable on a phone (horizontal scroll),
   so stack it into a single full-width day-by-day column. */
@media (max-width: 640px) {
  #sched-grid { grid-template-columns: 1fr !important; overflow-x: visible !important; }
}

/* Pull-to-refresh spinner */
#ptr-spin { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%) scale(0);
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); z-index: 1200; display: flex; align-items: center; justify-content: center;
  transition: transform .18s; pointer-events: none; }
#ptr-spin.show { transform: translateX(-50%) scale(1); }
#ptr-spin::after { content: ''; width: 16px; height: 16px; border: 2.5px solid var(--border); border-top-color: var(--brand-accent);
  border-radius: 50%; animation: spin .7s linear infinite; }

/* Long labels (e.g. Spanish) stay tidy on the narrow bottom tabs */
@media (max-width: 768px) {
  body.topnav-mode #bnav .bnav-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* Refresh FAB sets its position inline — lift it above the bottom bar */
@media (max-width: 768px) {
  body.topnav-mode.has-bnav #kp-pwa-refresh { display: none !important; }
}

/* ══ Mobile fixes (2026-07-17b) ══ */
@media (max-width: 768px) {
  /* bottom bar replaces the footer on phones */
  body.topnav-mode.has-bnav #app-footer { display: none; }
  /* Inventory table: keep Item / On hand / Status / actions; the rest lives in the editor */
  body.topnav-mode #section-ops-inventory #inv-table th:nth-child(3),
  body.topnav-mode #section-ops-inventory #inv-table td:nth-child(3),
  body.topnav-mode #section-ops-inventory #inv-table th:nth-child(4),
  body.topnav-mode #section-ops-inventory #inv-table td:nth-child(4),
  body.topnav-mode #section-ops-inventory #inv-table th:nth-child(6),
  body.topnav-mode #section-ops-inventory #inv-table td:nth-child(6),
  body.topnav-mode #section-ops-inventory #inv-table th:nth-child(7),
  body.topnav-mode #section-ops-inventory #inv-table td:nth-child(7),
  body.topnav-mode #section-ops-inventory #inv-table th:nth-child(8),
  body.topnav-mode #section-ops-inventory #inv-table td:nth-child(8) { display: none; }
  body.topnav-mode .inv-desktop { display: none; }
}

/* Scanner torch toggle active state */
#scan-torch.on { background: #57a15f !important; color: #fff; }

/* ── Card edit buttons (menus, recipes): comfortable tap target on mobile ── */
.kp-edit-btn { background:none; border:none; color:var(--t3); cursor:pointer; padding:5px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; flex:0 0 auto; }
.kp-edit-btn:hover { color:var(--t1); background:var(--glass2); }
@media (max-width:768px){
  .kp-edit-btn { width:40px; height:40px; font-size:1.2rem; color:var(--t2); }
  /* Modals: trim padding so more of the small screen is usable, keep buttons reachable. */
  .modal, .skin-khg .modal { padding:20px 17px; }
  .modal-overlay { padding:12px; }
  .modal-actions { flex-wrap:wrap; gap:8px; }
  .modal-actions .btn { flex:1 1 auto; white-space:nowrap; }
}

/* ── Training admin toolbar: keep New course to the right of the tabs on mobile ── */
.tr-admin-bar { flex-wrap: nowrap; }
@media (max-width:768px){
  .tr-admin-bar .tr-tabs { flex: 0 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tr-admin-bar .tr-tabs::-webkit-scrollbar { display: none; }
  .tr-admin-bar .tr-tab { padding: 7px 12px; white-space: nowrap; }
  .tr-admin-bar > .btn { flex: 0 0 auto; }
}

/* ── Mobile: the global "All brands" switcher lives in the header, so hide the
   redundant per-section brand filters under the sub-tabs. Sections fall back to
   opsBrandIds() (which honours the header switcher) when their select is empty. ── */
@media (max-width:768px){
  body.topnav-mode .ops-brand-sel { display: none !important; }
}