/* ═══════════════════════════════════════════════════════════════
   PG DASH — DESIGN SYSTEM
   New visual language: Inter body · Newsreader display
   Primary brand: teal #1a5f6e · warm neutral surfaces
   Replaces top-nav with left sidebar shell.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap');

/* ─── TOKENS: LIGHT ─────────────────────────────────────────── */
:root, [data-theme="light"] {
  --color-bg:              #f5f4f0;
  --color-surface:         #fafaf8;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #eeecea;
  --color-surface-dynamic: #e3e0db;
  --color-divider:         #d8d5d0;
  --color-border:          #ccc9c3;

  --color-text:            #1e1c17;
  --color-text-muted:      #6b6a65;
  --color-text-faint:      #aeada8;
  --color-text-inverse:    #f9f8f4;

  --color-primary:         #1a5f6e;
  --color-primary-hover:   #134c59;
  --color-primary-light:   #e0eff2;

  --color-success:         #3a6e1e;
  --color-success-light:   #dff0d3;
  --color-warning:         #8f5200;
  --color-warning-light:   #fdefd8;
  --color-error:           #991b3a;
  --color-error-light:     #fde0e8;
  --color-gold:            #b38200;
  --color-gold-light:      #fdf3d0;
  --color-blue:            #0b5a8c;
  --color-blue-light:      #d6eaf8;

  /* department accent passthroughs — keep existing --pg-* values working */
  --color-ops:   var(--pg-red,   #D41A2A);
  --color-fin:   #1a5f6e;
  --color-mkt:   var(--pg-gold,  #D4A843);
  --color-dsa:   var(--dept-dsa, #1a6fc4);

  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(30,28,23,0.06);
  --shadow-md: 0 4px 12px rgba(30,28,23,0.09);
  --shadow-lg: 0 12px 32px rgba(30,28,23,0.13);

  --sidebar-w: 220px;
  --topbar-h:  56px;
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);
}

/* ─── TOKENS: DARK ──────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:              #141312;
  --color-surface:         #1a1918;
  --color-surface-2:       #201f1d;
  --color-surface-offset:  #1d1c1a;
  --color-surface-dynamic: #2a2927;
  --color-divider:         #242321;
  --color-border:          #363432;

  --color-text:            #cccbc8;
  --color-text-muted:      #76756f;
  --color-text-faint:      #504e4b;
  --color-text-inverse:    #1e1c17;

  --color-primary:         #4d96a6;
  --color-primary-hover:   #3a7d8c;
  --color-primary-light:   #1e3540;

  --color-success:         #68a83e;
  --color-success-light:   #243320;
  --color-warning:         #f4a030;
  --color-warning-light:   #3d2e14;
  --color-error:           #e05070;
  --color-error-light:     #3d1828;
  --color-gold:            #e8b840;
  --color-gold-light:      #3a2e10;
  --color-blue:            #5592c8;
  --color-blue-light:      #1a2e42;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.32);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.42);
}

/* ─── LEGACY TOKEN BRIDGE ───────────────────────────────────
   Remap old --pg-* neutral tokens onto the new --color-* system.
   Accent colours (--pg-red, --pg-gold, dept-*) stay intentional.
   design-system.css loads AFTER styles.css so these win in :root.
   ─────────────────────────────────────────────────────────── */
:root {
  --pg-bg:     var(--color-bg);
  --pg-card:   var(--color-surface-2);
  --pg-border: var(--color-border);
  --pg-text:   var(--color-text);
  --pg-muted:  var(--color-text-muted);
  /* Finance dept accent → teal primary (was green) */
  --dept-fin:      var(--color-primary);
  --dept-fin-bg:   var(--color-primary-light);
  --dept-fin-dark: var(--color-primary-hover);
}
[data-theme="dark"] {
  --pg-bg:     var(--color-bg);
  --pg-card:   var(--color-surface-2);
  --pg-border: var(--color-border);
  --pg-text:   var(--color-text);
  --pg-muted:  var(--color-text-muted);
  --dept-fin:      var(--color-primary);
  --dept-fin-bg:   var(--color-primary-light);
  --dept-fin-dark: var(--color-primary-hover);
}

/* ─── BASE OVERRIDES ────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════
   APP SHELL — sidebar + main two-column layout
   ═══════════════════════════════════════════════════════════════ */
#app {
  display: flex;
  height: 100dvh;       /* exact viewport height — no overflow, no scroll at body level */
  overflow: hidden;
}

/* ─── SIDEBAR ───────────────────────────────────────────────── */
.pg-sidebar {
  transition: width 0.16s ease;
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  height: 100%;         /* fills #app exactly — never taller, never shorter */
  overflow-y: auto;     /* only scrolls if nav items overflow (rare) */
  z-index: 50;
  scrollbar-width: thin;
  scrollbar-color: var(--color-divider) transparent;
}
#app.pg-sidebar-collapsed .pg-sidebar { width: 0; min-width: 0; border-right: none; overflow: hidden; }

.pg-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
}
.pg-sidebar-logo:hover { background: var(--color-surface-offset); }

.pg-logo-mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
}
.pg-logo-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.pg-logo-text { line-height: 1.15; }
.pg-logo-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.pg-logo-sub {
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: 1px;
}

/* sidebar section label */
.pg-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  padding: var(--space-5) var(--space-4) var(--space-2);
}

/* sidebar nav list */
.pg-sidebar-nav {
  list-style: none;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.pg-sidebar-nav li { margin: 1px 0; }

.pg-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  line-height: 1.4;
}
.pg-nav-item svg, .pg-nav-item .pg-nav-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition);
}
.pg-nav-item:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.pg-nav-item:hover svg,
.pg-nav-item:hover .pg-nav-icon { opacity: 1; }

.pg-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}
.pg-nav-item.active svg,
.pg-nav-item.active .pg-nav-icon { opacity: 1; }

/* dept-specific active accent */
.pg-nav-item.active[data-dept="ops"] { background: #fde8ea; color: var(--color-ops); }
.pg-nav-item.active[data-dept="fin"] { background: var(--color-primary-light); color: var(--color-primary); }
.pg-nav-item.active[data-dept="mkt"] { background: #fdf5e0; color: var(--color-mkt); }
.pg-nav-item.active[data-dept="dsa"] { background: #e8f1fb; color: var(--color-dsa); }

/* ─── Sidebar user button + menu popup ───────────────────────── */
.pg-sidebar-user {
  margin-top: auto;
  border-top: 1px solid var(--color-divider);
  position: relative;
}
.pg-user-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s;
}
.pg-user-btn:hover { background: var(--color-surface-offset); }
.pg-user-btn.spinning { opacity: .6; pointer-events: none; }
.pg-user-btn.spinning .pg-user-sync-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
}
.pg-user-avatar {
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.pg-user-info { flex: 1; min-width: 0; }
.pg-user-name  { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; color: var(--color-text); }
.pg-user-role  { font-size: 10px; color: var(--color-text-faint); }
.pg-user-chevron {
  color: var(--color-text-faint);
  flex-shrink: 0;
  transition: transform .2s;
}
.pg-sidebar-user.open .pg-user-chevron { transform: rotate(180deg); }
/* Popup menu — rises above the user button */
.pg-user-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: var(--space-4);
  right: var(--space-4);
  background: var(--pg-card, var(--color-surface));
  border: 0.5px solid var(--pg-border, var(--color-border));
  border-radius: 8px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  padding: 6px;
  z-index: 300;
}
.pg-user-menu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 4px 8px 2px;
}
.pg-user-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #c0392b;
  text-align: left;
  transition: background .15s;
}
.pg-user-signout:hover { background: #fdf0ee; }

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

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.pg-topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 40;
}
.pg-topbar-left  { display: flex; align-items: center; gap: var(--space-3); }
.pg-topbar-right { display: flex; align-items: center; gap: var(--space-3); }

.pg-topbar-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.pg-topbar-breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.pg-topbar-sep {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0 2px;
}

/* topbar freshness dot */
.pg-fresh-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-dynamic);
  flex-shrink: 0;
  transition: background 0.3s;
}
.pg-fresh-dot[data-state="fresh"] { background: #4ADE80; }
.pg-fresh-dot[data-state="aging"] { background: #FACC15; }
.pg-fresh-dot[data-state="stale"] { background: #F87171; }

/* ─── PAGE CONTENT ───────────────────────────────────────────── */
.pg-page-content {
  flex: 1;
  overflow-y: auto;
}

/* existing .landing and .section-page fit inside pg-page-content */
.pg-page-content .landing,
.pg-page-content .section-page { min-height: calc(100dvh - var(--topbar-h)); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ds-btn svg { width: 14px; height: 14px; }

.ds-btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.ds-btn-primary:hover { background: var(--color-primary-hover); }

.ds-btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.ds-btn-ghost:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.ds-btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

.ds-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ds-icon-btn:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border-color: var(--color-border);
}
.ds-icon-btn.spinning { opacity: 0.6; pointer-events: none; }
.ds-icon-btn.spinning svg { animation: ds-spin 1s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.ds-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.ds-card-body { padding: var(--space-4) var(--space-5); }

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════ */
.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ds-kpi-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ds-kpi-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ds-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.ds-kpi-delta {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-faint);
}
.ds-kpi-delta.up   { color: var(--color-success); }
.ds-kpi-delta.down { color: var(--color-error); }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ds-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
  background: transparent;
}
.ds-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--color-surface-offset); }
.ds-table .num { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.ds-badge-success { background: var(--color-success-light); color: var(--color-success); }
.ds-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.ds-badge-error   { background: var(--color-error-light);   color: var(--color-error);   }
.ds-badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.ds-badge-blue    { background: var(--color-blue-light);    color: var(--color-blue);    }
.ds-badge-gold    { background: var(--color-gold-light);    color: var(--color-gold);    }
.ds-badge-neutral { background: var(--color-surface-dynamic); color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.ds-progress {
  height: 6px;
  background: var(--color-surface-dynamic);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ds-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.6s ease;
}
.ds-progress-fill.ok       { background: var(--color-success); }
.ds-progress-fill.watch    { background: var(--color-warning); }
.ds-progress-fill.critical { background: var(--color-error);   }

/* ═══════════════════════════════════════════════════════════════
   SECTION LABEL (replaces .sec-label)
   ═══════════════════════════════════════════════════════════════ */
.ds-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ds-section-label::before {
  content: '';
  display: inline-block;
  width: 3px; height: 12px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.ds-section-label.ops    { color: var(--color-ops); }
.ds-section-label.fin    { color: var(--color-fin); }
.ds-section-label.mkt    { color: var(--color-mkt); }
.ds-section-label.dsa    { color: var(--color-dsa); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR REFRESH MENU (new styling over existing .trm-* classes)
   ═══════════════════════════════════════════════════════════════ */
.pg-refresh-wrap { position: relative; }
.pg-refresh-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   HIDE OLD TOP NAV — sidebar replaces it
   ═══════════════════════════════════════════════════════════════ */
.top-nav { display: none !important; }

/* ─── EXISTING PAGE BODY — remove top padding since topbar handles spacing ─── */
.page-body {
  padding-top: var(--space-6) !important;
}

/* ─── SECTION PAGES — hide redundant section headers (topbar handles breadcrumb) ─── */
.section-header { display: none !important; }

/* ─── SUB-NAV TABS — update sticky top offset now that there's no top-nav ─── */
.dsa-subnav,
.mkt-subnav,
#opsTabs { top: 0 !important; }

/* ─── LANDING PAGE — remove top padding that was for the nav ─── */
.landing { padding-top: 0 !important; }
.landing-hero { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — collapse sidebar below 768px
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.pg-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  flex-shrink: 0;
  transition: background var(--transition);
}
.pg-burger:hover { background: var(--color-surface-offset); }
.pg-burger svg { display: block; }

/* Overlay behind mobile sidebar */
.pg-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.pg-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .pg-burger { display: flex; }
  .pg-main { width: 100%; }

  /* Sidebar becomes a slide-in drawer */
  .pg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .pg-sidebar.mobile-open {
    transform: translateX(0);
  }
  .pg-sidebar-overlay {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR GROUPS
   ═══════════════════════════════════════════════════════════════ */
.pg-sidebar-group { margin-bottom: 2px; }

.pg-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-4) var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  text-align: left;
  transition: color var(--transition);
}
.pg-group-toggle:hover { color: var(--color-text-muted); }

.pg-chevron {
  width: 10px; height: 6px;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.pg-group-collapsed .pg-chevron { transform: rotate(-90deg); }

.pg-group-nav {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.22s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease;
  opacity: 1;
}
.pg-group-collapsed .pg-group-nav {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ─── Deployment table: sticky inspector col + mobile column hiding ─────── */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface, #fff);
}
thead .sticky-col {
  z-index: 3;
}
@media (max-width: 640px) {
  .col-hide-mobile { display: none; }
  #todayTable { width: 100%; }
}