/* ============================================================
   POD Governance — Shared Design System (AiDE Loop)
   ============================================================
   Single source of truth for design tokens, self-hosted Inter
   font-faces, and base components. Previously this block was
   duplicated inline in every page (7 drifted copies); it now
   lives here once. Link this file, then put only page-specific
   overrides in a small inline <style> AFTER the link.
   ============================================================ */

/* Inter — self-hosted for offline / restricted-network environments
   Source: Google Fonts (Inter v20, latin subset, woff2)
   Weights: 400, 500, 600, 700, 800
   ---------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800.woff2') format('woff2');
}

/* ============================================================
   AiDE Loop — Design System & Global Styles
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --brand-primary:   #6c63ff;
  --brand-dark:      #4b44cc;
  --brand-light:     #ede9ff;
  --accent-green:    #22c55e;
  --accent-red:      #ef4444;
  --accent-yellow:   #f59e0b;
  --accent-blue:     #3b82f6;
  --accent-purple:   #a855f7;

  --bg-body:   #f4f5f9;
  --bg-card:       #ffffff;
  --bg-sidebar:      #1e1e2e;
  --bg-sidebar-hover:#2a2a3d;
  --bg-topbar:  #ffffff;

  --text-primary:    #1a1a2e;
  --text-secondary:  #576475;
  --text-muted:      #576475;
  --text-inverse:    #ffffff;
  --text-sidebar:    #c4c4d4;

  --border:       #e2e8f0;
  --border-strong:   #cbd5e1;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.12);

  --sidebar-width:   240px;
  --topbar-height:   60px;
  --font:        'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg-body); color: var(--text-primary); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── App Shell ────────────────────────────────────────────── */
/* Native UI (form controls, scrollbars, spinners, autofill) follows the theme. */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; overflow-y: auto; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-logo .logo-icon { width: 34px; height: 34px; background: var(--brand-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-weight: 700; position: relative; overflow: visible; }
.pg-env-icon { position: relative; overflow: visible; }
.sidebar-logo .logo-text { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.sidebar-logo .logo-text span { color: #7eb6ef; }
.sidebar-logo .logo-sub { font-size: 11px; color: #94a3b8; }
.sidebar-section { padding: 16px 12px 8px; }
.sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; padding: 0 8px 6px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-sidebar); font-size: 13.5px; transition: background .15s, color .15s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--bg-sidebar-hover); color: #fff; }
.sidebar-nav a.active { color: #7eb6ef; }
.sidebar-nav a .nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background .15s; }
.sidebar-user:hover { background: var(--bg-sidebar-hover); cursor: pointer; }
.sidebar-user .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sidebar-user .user-info { flex: 1; min-width: 0; }
.sidebar-user .user-name { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .user-role { font-size: 10.5px; color: #94a3b8; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar { height: var(--topbar-height); background: var(--bg-sidebar, #1a1a2e); border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; padding: 0 20px; gap: 16px; position: fixed; top: 0; left: var(--sidebar-width); right: 0; z-index: 90; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.topbar-title { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; }
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-primary, #2563a8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.topbar-role-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
.topbar-action-btn { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.85); font-size: 12px; text-decoration: none; padding: 5px 10px; border: 1px solid rgba(255,255,255,0.25); border-radius: 7px; font-weight: 600; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.topbar-action-btn:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.topbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-hamburger { display: none; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; flex-shrink: 0; border-radius: 5px; }
.topbar-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 900px) { .topbar-hamburger { display: inline-flex; align-items: center; justify-content: center; } }

/* ── Main Content ─────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); flex: 1; padding: 28px 28px 48px; min-height: calc(100vh - var(--topbar-height)); }

/* ── Page Header ──────────────────────────────────────────── */
.page-header { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-left { flex: 1; }

/* ── Cards ────────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card-body { padding: 20px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { font-size: 14.5px; font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; border: none; transition: all .15s; white-space: nowrap; }
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-body); border-color: var(--brand-primary); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #c53030; }
button:not([class]) { color: inherit; }
.btn-success { background: #15803d; color: #fff; }
.btn-success:hover { background: #16a34a; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--bg-body); border-color: var(--border); }
.btn-link { background: transparent; border: none; color: var(--tint-info-fg); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ── Badge ────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }

/* ── Tables ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { background: var(--bg-body); padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-subtle, #fafbfd); }
/* Wide tables scroll inside their card instead of being clipped (html/body hide overflow-x) */
.table-scroll { overflow-x: auto; }
.card-body:has(> table) { overflow-x: auto; }
/* Cards must be allowed to shrink inside grid/flex parents (min-width:auto would
   otherwise propagate a wide table's min-content width and overflow the page) */
.card { min-width: 0; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.form-control { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-primary); background: var(--bg-card); outline: none; transition: border-color .15s, box-shadow .15s; }
.form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-light); }
.form-hint { font-size: 11.5px; color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* ── Toggle Switch ────────────────────────────────────────── */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px; transition: background 0.2s; }
.toggle-slider:before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* ── Avatar ───────────────────────────────────────────────── */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ── Alert ────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.alert-info    { background: var(--tint-info-bg-strong, #dbeafe); color: var(--tint-info-fg-strong, #1e40af); border-left: 4px solid #3b82f6; }
.alert-success { background: var(--tint-success-bg-strong, #dcfce7); color: var(--tint-success-fg-strong, #166534); border-left: 4px solid #22c55e; }
.alert-warning { background: var(--tint-warning-bg-strong, #fef9c3); color: var(--tint-warning-fg, #854d0e); border-left: 4px solid #f59e0b; }

/* ── Comment text (used in audit diff entries) ────────────── */
.comment-text { font-size: 13.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.5; }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state { padding: 48px 24px; text-align: center; color: var(--text-muted); }

/* ── Audit Row ────────────────────────────────────────────── */
.audit-action { font-family: 'Courier New', monospace; font-size: 12px; background: var(--bg-body); padding: 2px 6px; border-radius: 4px; }

/* ── Modal (fallback — overridden by admin.css) ──────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; display: flex; align-items: center; justify-content: center; }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 18px; color: var(--text-muted); width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.modal-close:hover { background: var(--bg-body); }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Mobile nav drawer (hamburger) ────────────────────────── */
/* Hamburger lives in the topbar; hidden on desktop, shown ≤900px.
   Mirrors the Admin Portal drawer pattern. */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
}
.mobile-nav-toggle:hover { background: var(--bg-body); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 290;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 300;                       /* above the backdrop (290) */
    box-shadow: 2px 0 18px rgba(0,0,0,.35);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }
  .mobile-nav-toggle { display: inline-flex; }
  .main-content { margin-left: 0; }
  .topbar { left: 0; }
}

/* ── Utility ──────────────────────────────────────────────── */
.w-full { width: 100%; }

/* ============================================================
   POD Governance — Override & Extension Layer
   ============================================================
   Loaded AFTER assets/fonts/inter.css and assets/css/style.css.
   Uses AiDELoop CSS variables throughout.
   Adds POD-specific components not in the AiDELoop base:
     · Workflow items (ups / downs)
     · Audit trail sidebar
     · Approval chain stepper
     · Review diff legend
     · Member tabs
     · Account header (cycle header bar)
     · Role-switcher demo strip
   ============================================================ */

/* ── Full-page layout reset ──────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* App shell must fill the full viewport width */
.app-shell {
  width: 100%;
  min-height: 100vh;
}

/* Login overlay must always be full-screen */
#login-overlay {
  width: 100vw;
  min-height: 100vh;
}

/* ── POD Governance brand overrides ──────────────────────────────────────── */
:root {
  /* Override AiDELoop primary to POD Navy */
  --brand-primary:  #2563a8;
  --brand-dark:     #1a3c5e;
  --brand-light:    #dbeafe;

  /* POD-specific semantic tokens */
  --up-color:   #16a34a;
  --up-bg:      #f0fdf4;
  --down-color: #dc2626;
  --down-bg:    #fef2f2;
  --accent:     #e8a020;

  /* Implementation aliases (--primary = --brand-primary, etc.) */
  --primary:        #2563a8;
  --primary-dark:   #1a3c5e;
  --primary-light:  #dbeafe;
  --bg:             #f4f5f9;
  --surface:        #ffffff;
  --text:           #1a1a2e;
  --radius:         6px;
  --shadow:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --success:        #16a34a;
  --danger:         #dc2626;
  --warning:        #f59e0b;
  --info:           #3b82f6;

  /* Surfaces / text scale (parity with web src/web/src/styles/custom.css) */
  --surface-subtle: #f8fafc;   /* subtle panels: table footers, inset rows */
  --warn-bg:        #fffbeb;    /* amber tint behind warnings / modified items */
  --danger-bg:      #fff5f5;    /* red tint behind down items / destructive zones */
  --text-muted:     #576475;
  --text-faint:     #576475;

  /* Semantic tint scale — paired panel/badge colours legible in BOTH themes.
   * Mirrors web custom.css; re-toned in the [data-theme="dark"] block below so
   * tinted surfaces don't trap theme-coloured text on a light fill in dark mode. */
  --tint-info-bg:        #eff6ff;
  --tint-info-bg-strong: #dbeafe;
  --tint-info-border:    #bfdbfe;
  --tint-info-fg:        #1d4ed8;
  --tint-info-fg-strong: #1e40af;

  --tint-success-bg:        #f0fdf4;
  --tint-success-bg-strong: #dcfce7;
  --tint-success-border:    #bbf7d0;
  --tint-success-fg:        #15803d;
  --tint-success-fg-strong: #065f46;

  --tint-warning-bg:        #fffbeb;
  --tint-warning-bg-strong: #fef3c7;
  --tint-warning-border:    #fde68a;
  --tint-warning-fg:        #92400e;
  --tint-warning-fg-strong: #78350f;

  --tint-danger-bg:        #fef2f2;
  --tint-danger-bg-strong: #fee2e2;
  --tint-danger-border:    #fecaca;
  --tint-danger-fg:        #b91c1c;
  --tint-danger-fg-strong: #991b1b;

  --tint-neutral-bg:        #f8fafc;
  --tint-neutral-bg-strong: #f1f5f9;
  --tint-neutral-border:    #e2e8f0;
  --tint-neutral-fg:        #64748b;
  --tint-neutral-fg-strong: #475569;

  --tint-purple-bg:        #f5f3ff;
  --tint-purple-bg-strong: #ede9fe;
  --tint-purple-border:    #ddd6fe;
  --tint-purple-fg:        #6d28d9;
  --tint-purple-fg-strong: #5b21b6;

  /* Keep AiDELoop sidebar dark */
  --bg-sidebar: #1e1e2e;
}

/* ── Dark mode (opt-in) ────────────────────────────────────────────────────
 * Applied via <html data-theme="dark"> by assets/js/theme.js. Mirrors the React
 * app (src/web/src/utils/theme.ts + custom.css): the chrome (sidebar/topbar) is
 * already dark, so dark mode mainly re-tones the content surfaces by flipping the
 * shared design tokens below. */
[data-theme="dark"] {
  --bg-body:         #0f172a;
  --bg-card:         #1e293b;
  --bg-topbar:       #1e293b;

  --text-primary:    #e2e8f0;
  --text-secondary:  #94a3b8;
  --text-muted:      #94a3b8;

  --border:          #334155;
  --border-strong:   #475569;

  --shadow-sm:       0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:       0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:       0 8px 24px rgba(0,0,0,.6);

  /* Implementation aliases */
  --bg:              #0f172a;
  --surface:         #1e293b;
  --text:            #e2e8f0;
  --shadow:          0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --brand-light:     #1e3a5f;
  --primary-light:   #1e3a5f;

  /* Ups / Downs tints on dark */
  --up-bg:           #102a1c;
  --down-bg:         #2a1518;

  /* Surfaces / text scale — dark re-tone (parity with web custom.css). */
  --surface-subtle:  #172033;
  --warn-bg:         #2a2410;
  --danger-bg:       #2a1518;
  --text-muted:      #94a3b8;
  --text-faint:      #94a3b8;

  /* Semantic tint scale — dark fills with light, legible text. */
  --tint-info-bg:        #172c52;
  --tint-info-bg-strong: #1e3a5f;
  --tint-info-border:    #2c4a6e;
  --tint-info-fg:        #93c5fd;
  --tint-info-fg-strong: #bfdbfe;

  --tint-success-bg:        #14301a;
  --tint-success-bg-strong: #14532d;
  --tint-success-border:    #225235;
  --tint-success-fg:        #86efac;
  --tint-success-fg-strong: #bbf7d0;

  --tint-warning-bg:        #2a1f0a;
  --tint-warning-bg-strong: #3a2c0a;
  --tint-warning-border:    #5a4410;
  --tint-warning-fg:        #fcd34d;
  --tint-warning-fg-strong: #fde68a;

  --tint-danger-bg:        #2a1518;
  --tint-danger-bg-strong: #3a1d20;
  --tint-danger-border:    #5a2a2e;
  --tint-danger-fg:        #fca5a5;
  --tint-danger-fg-strong: #fecaca;

  --tint-neutral-bg:        #172033;
  --tint-neutral-bg-strong: #1e293b;
  --tint-neutral-border:    #334155;
  --tint-neutral-fg:        #94a3b8;
  --tint-neutral-fg-strong: #cbd5e1;

  --tint-purple-bg:        #251a3d;
  --tint-purple-bg-strong: #2e2150;
  --tint-purple-border:    #432c6e;
  --tint-purple-fg:        #c4b5fd;
  --tint-purple-fg-strong: #ddd6fe;
}

/* ── Dark-mode component overrides ───────────────────────────────────────────
 * Shared, single-source dark styling for form controls, the rich-text composer
 * and outline buttons so content-area inputs follow the theme instead of
 * defaulting to a bright white box. Scoped to content (not the translucent
 * topbar search) and given [data-theme="dark"] specificity so it wins over the
 * page-level component styles. Light mode is untouched. */
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .rt-input,
[data-theme="dark"] .tl-search,
[data-theme="dark"] .search-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .ev-card,
[data-theme="dark"] .card input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
/* Dark-mode dropdown arrow — swap light-grey chevron for a near-white one */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
[data-theme="dark"] .rt-toolbar,
[data-theme="dark"] .cap-chip,
[data-theme="dark"] .visibility-toggle {
  background: var(--surface-subtle);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .composer {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .btn-outline {
  background: transparent;
  color: var(--text);
}

/* ── Page layout tweaks for POD Governance content width ─────────────────── */
.main-content {
  max-width: none;        /* let each screen control its own width */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Fluid content with a readability cap (AzDO/GitHub-style): the page wrapper
   right after the topbar placeholder stretches to fill the viewport but caps
   at 1520px on very wide monitors. Pages with their own tighter inline
   max-width (e.g. notifications 760px) keep it — inline styles win. */
.main-content > #topbar-placeholder + div {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
}

/* Full-bleed screens (module picker, login-style splash screens) remove padding + chrome margins */
.main-content.no-padding {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  min-height: 100vh;
}

/* Screens container and active screens always fill 100% of available space */
#screens-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.screen {
  display: none;
  flex: 1;
  min-height: 100%;
}

.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Screens with their own full-bleed background must fill all available height */
.screen.active > div:first-child {
  flex: 1;
}

.role-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--bg-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.role-btn:hover,
.role-btn.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}



/* ── Module tabs (Ups & Downs | Priorities & Achievements) ─────────────────────────────────────── */
.mode-tab-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--bg-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mode-tab-btn.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

/* ── Account / Cycle header ───────────────────────────────────────────────── */
.account-header {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.account-info h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.account-info p {
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  margin: 0;
}
.account-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.acct-id {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.15);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Workflow status badges ───────────────────────────────────────────────── */
.badge-draft    { background: var(--bg-body); color: var(--tint-neutral-fg-strong, #475569); border: 1px solid var(--border-strong); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-pending  { background: var(--tint-info-bg-strong, #dbeafe); color: var(--tint-info-fg-strong, #1e40af); border: 1px solid var(--tint-info-border, #93c5fd); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-submitted{ background: var(--tint-success-bg-strong, #dcfce7); color: var(--tint-success-fg, #15803d); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-approved { background: var(--tint-success-bg-strong, #dcfce7); color: var(--tint-success-fg, #15803d); border: 1px solid var(--tint-success-border, #86efac); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-final    { background: var(--tint-success-bg-strong, #dcfce7); color: var(--tint-success-fg, #15803d); border: 1px solid var(--tint-success-border, #86efac); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-returned { background: var(--tint-warning-bg-strong, #fef3c7); color: var(--tint-warning-fg, #92400e); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* ── Workflow stepper ─────────────────────────────────────────────────────── */
.workflow-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 0 0 4px;
  margin-bottom: 20px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}
.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-body);
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  transition: background .2s, border-color .2s;
}
.step.active   .step-circle { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.step-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}
.step.active .step-label { color: var(--brand-primary); }
.step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 20px;
  margin-bottom: 14px;
}

/* ── Page layout: main + right sidebar ───────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; }

  /* Account/cycle banner: wrap instead of clipping its text on narrow screens.
     The banner is a non-wrapping flex row sized for desktop; let it stack. */
  .account-header { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .account-info   { min-width: 0; }
  .account-info h2 { word-break: break-word; }

  /* Allow the flex layout chain to shrink below content width so wide content
     (e.g. token tables) scrolls within its own container instead of forcing
     the whole page wider than the viewport. (flex default min-width:auto) */
  .main-content, #screens-container, .screen, .screen.active,
  .screen.active > div:first-child { min-width: 0; }
}

/* ── Ups & Downs items ───────────────────────────────────────────────────── */
.ud-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 8px;
  transition: box-shadow .15s;
}
.ud-item:hover { box-shadow: var(--shadow-sm); }
.up-item   { border-left: 3px solid var(--up-color);   background: var(--up-bg); }
.down-item { border-left: 3px solid var(--down-color);  background: var(--down-bg); }
.ud-item.modified      { border-left-color: var(--accent-yellow) !important; background: var(--warn-bg, #fffbeb) !important; }
.ud-item.added-at-level{ border-left-color: var(--accent-blue)   !important; background: var(--tint-info-bg, #eff6ff) !important; }
.ud-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ud-content { flex: 1; min-width: 0; }
.ud-text textarea,
.ud-text p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  resize: vertical;
  background: var(--bg-card);
  outline: none;
}
.ud-text p { border: none; padding: 0; background: transparent; }
.ud-text textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-light); }
.ud-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}
.ud-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.btn-delete {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.btn-delete:hover { color: var(--accent-red); background: var(--tint-danger-bg-strong, #fee2e2); }
.modifier-tag {
  font-size: 11px;
  background: var(--tint-warning-bg-strong, #fef9c3);
  color: var(--tint-warning-fg, #854d0e);
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Add-item row ─────────────────────────────────────────────────────────── */
.add-item-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-body);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  margin-top: 10px;
}
.add-item-row textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  resize: vertical;
  min-height: 56px;
  outline: none;
  font-family: var(--font);
}
.add-item-row textarea:focus { border-color: var(--brand-primary); }

/* ── Audit trail sidebar ─────────────────────────────────────────────────── */
.audit-panel { display: flex; flex-direction: column; }
.audit-entry {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.audit-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
}
.audit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.audit-dot.submitted { background: var(--brand-primary); }
.audit-dot.approved  { background: var(--accent-green); }
.audit-dot.modified  { background: var(--accent-yellow); }
.audit-dot.returned  { background: var(--accent-red); }
.audit-line {
  flex: 1;
  width: 2px;
  background: var(--border);
  margin: 4px 0;
  min-height: 16px;
}
.audit-body { flex: 1; min-width: 0; }
.audit-who {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.audit-action {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.audit-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.audit-change-item {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  border-left: 3px solid var(--border-strong);
}
.change-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.change-label.added    { color: var(--accent-green); }
.change-label.modified { color: var(--accent-yellow); }
.change-label.deleted  { color: var(--accent-red); }
.change-label.commented{ color: var(--brand-primary); }
.change-label.submitted{ color: var(--brand-primary); }
.old-text { color: var(--accent-red);   font-size: 12px; }
.new-text { color: var(--accent-green); font-size: 12px; }
.comment-text { color: var(--text-secondary); font-size: 12px; font-style: italic; }

/* ── Role tag (audit trail) ────────────────────────────────────────────────── */
.role-tag {
  font-size: 10px;
  font-weight: 600;
  background: var(--brand-light);
  color: var(--brand-primary);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* ── Role badge (screens / login) ─────────────────────────────────────────── */
.role-badge {
  display: inline-block;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--tint-success-bg-strong, #dcfce7);
  color: var(--tint-success-fg, #15803d);
  border-color: var(--tint-success-border, #bbf7d0);
}

/* Per-role color modifiers — same palette as admin.css .rb-* */
.rb-clusterHead,     .role-tag.rb-clusterHead     { background: var(--tint-danger-bg-strong, #fee2e2); color: var(--tint-danger-fg, #b91c1c); border-color: var(--tint-danger-border, #fecaca); }
.rb-podOwner,        .role-tag.rb-podOwner         { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.rb-deliverySpoc,    .role-tag.rb-deliverySpoc     { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.rb-salesSpoc,       .role-tag.rb-salesSpoc        { background: var(--tint-info-bg-strong, #dbeafe); color: var(--tint-info-fg, #1d4ed8); border-color: var(--tint-info-border, #bfdbfe); }
.rb-esoSpoc,         .role-tag.rb-esoSpoc          { background: var(--tint-purple-bg-strong, #ede9fe); color: var(--tint-purple-fg, #6d28d9); border-color: var(--tint-purple-border, #ddd6fe); }
.rb-recruitmentSpoc, .role-tag.rb-recruitmentSpoc  { background: #fce7f3; color: #be185d; border-color: #fbcfe8; }
.rb-pm,              .role-tag.rb-pm               { background: var(--tint-warning-bg-strong, #fef3c7); color: var(--tint-warning-fg-strong, #b45309); border-color: var(--tint-warning-border, #fde68a); }
.rb-projectLead,     .role-tag.rb-projectLead      { background: var(--tint-success-bg-strong, #dcfce7); color: var(--tint-success-fg, #15803d); border-color: var(--tint-success-border, #bbf7d0); }
.rb-pmoAssociate,    .role-tag.rb-pmoAssociate     { background: var(--tint-neutral-bg-strong, #f1f5f9); color: var(--tint-neutral-fg-strong, #475569); border-color: var(--border-strong, #cbd5e1); }
.rb-admin,           .role-tag.rb-admin            { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }

/* ── Review diff legend ──────────────────────────────────────────────────── */
.review-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Member tabs ─────────────────────────────────────────────────────────── */
.member-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--bg-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.member-tab:hover { background: var(--brand-light); border-color: var(--brand-primary); color: var(--brand-primary); }
.member-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.member-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-tab.active .member-avatar { background: rgba(255,255,255,.25); }

/* ── Comparison table (PL/PM submissions side-by-side) ───────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparison-table th {
  background: var(--bg-body);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.comparison-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--bg-body); }

/* ── Summary / stat cards grid ───────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.stat-card {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-body);
  border: 1px solid var(--border);
  text-align: center;
}
.stat-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Comment box ─────────────────────────────────────────────────────────── */
.comment-box {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.comment-box-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.comment-box textarea {
  width: 100%;
  padding: 10px 14px;
  border: none;
  font-size: 13.5px;
  resize: vertical;
  min-height: 70px;
  outline: none;
  background: var(--bg-body);
  font-family: var(--font);
  color: var(--text-primary);
}

/* ── Action bar (bottom of cards) ────────────────────────────────────────── */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-wrap: wrap;
}

/* ── Priorities chain step ────────────────────────────────────────────────── */
.pri-chain-step {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}
.pri-chain-step.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.pri-chain-step.done   { background: var(--accent-green);  color: #fff; border-color: var(--accent-green); }
.pri-chain-arrow { text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.2; }

/* ── Priorities week inline badge ────────────────────────────────────────── */
.priorities-week-inline {
  font-weight: 700;
  color: #fff;
}

/* ── Count pill ──────────────────────────────────────────────────────────── */
.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}
.count-pill.up   { background: var(--up-color);   color: #fff; }
.count-pill.down { background: var(--down-color); color: #fff; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.empty-state-icon  { font-size: 32px; margin-bottom: 8px; }
.empty-state-title { font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }

/* ── Micro-interactions ────────────────────────────────────────────────────── */
.ud-item { transition: box-shadow .15s, transform .15s; }
.ud-item:hover:not(.readonly) { transform: translateY(-1px); }
.card    { transition: box-shadow .2s; }
.card:hover { box-shadow: var(--shadow-md); }
.btn     { transition: all .15s; }
.btn:active { transform: scale(0.97); }
.toast   { animation: toast-in .25s ease, toast-out .3s ease 2.7s forwards; }
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

/* ── Focus visible ring for keyboard accessibility ─────────────────────────── */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Skip-to-content link (a11y: first focusable, visible on keyboard focus) ── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 10000;
  background: var(--brand-primary);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* ── Respect the user's reduced-motion preference (WCAG 2.3.3) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cycle navigator bar ─────────────────────────────────────────────────── */
.cycle-nav-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  position: sticky;
  top: 60px;  /* below topbar */
  z-index: 80;
  box-shadow: var(--shadow-sm);
}
.cycle-nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.cycle-nav-btn {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .15s;
}
.cycle-nav-btn:hover { background: var(--border); }
.cycle-nav-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
.cycle-nav-label { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cycle-nav-select {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-body);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  min-width: 160px;
}
.cycle-nav-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* ── Logo icon badge (used in project selector, module picker) ──────────── */
.login-logo-icon {
  width: 42px;
  height: 42px;
  background: var(--brand-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}
.toast {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  animation: toast-in .25s ease;
}
.toast.success { background: var(--accent-green); }
.toast.warning { background: var(--accent-yellow); color: #1c1917; }
.toast.danger  { background: var(--accent-red); }
.toast.info    { background: var(--brand-primary); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Return / amber reason banner ───────────────────────────────────────── */
.return-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--tint-warning-bg-strong, #fef3c7);
  border: 1px solid var(--tint-warning-border, #fde68a);
  border-left: 4px solid var(--accent-yellow);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--tint-warning-fg, #92400e);
  margin-bottom: 16px;
}

/* ── ID badges (project IDs, cycle IDs) ─────────────────────────────────── */
.id-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg-body);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}

/* ── WYSIWYG Editor ───────────────────────────────────────────────────── */


.wysiwyg-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface, #fff);
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.wysiwyg-wrapper:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.wysiwyg-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--surface-subtle, #f9fafb);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wysiwyg-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: background .15s, color .15s;
}
.wysiwyg-toolbar button:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}

.wysiwyg-editor {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  outline: none;
  background: var(--surface, #fff);
  cursor: text;
  width: 100%;
  box-sizing: border-box;
}
.wysiwyg-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.wysiwyg-editor.empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.wysiwyg-inline-wrapper {
  display: flex;
  flex-direction: column;
}
.wysiwyg-editor.wysiwyg-inline {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  transition: border-color .15s, background .15s;
}
.wysiwyg-editor.wysiwyg-inline:focus {
  border-color: var(--brand-primary);
  background: var(--surface, #fff);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.08);
}

.add-item-row .wysiwyg-wrapper {
  flex: 1;
}
.add-item-row .wysiwyg-editor {
  min-height: 4.5em;
}

/* ── File Upload Zone ──────────────────────────────────────────────────── */

.file-upload-zone {
  margin-top: 12px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  background: var(--bg-body);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
  border-color: var(--brand-primary);
  background: var(--tint-info-bg, #eff6ff);
}
.file-upload-drop {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.file-upload-icon {
  font-size: 18px;
}
.file-upload-list {
  margin-top: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.file-upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.file-upload-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.file-upload-size {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 11px;
}
.file-upload-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.file-upload-remove:hover {
  color: var(--danger);
}

/* ── Spinner animation (auth screens + loading states) ──────────────────────── */
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-spinner {
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--brand-light);
  border-top-color: var(--brand-primary);
  animation: pg-spin 0.8s linear infinite;
}
.pg-spinner-sm {
  width: 20px; height: 20px;
  border-width: 2px;
}

/* ── Notification Bell (topbar) ──────────────────────────────────────────────
   Synced from src/web/src/styles/custom.css — same class names, same panel
   layout; color tokens remapped to mockup design system vars.
   ──────────────────────────────────────────────────────────────────────────── */
.notif-bell { position: relative; display: inline-flex; }

.notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: none;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background .15s;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.22); }
.notif-bell-icon { filter: grayscale(0.1); }

.notif-bell-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--brand-dark);
  box-sizing: content-box;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--surface, #fff);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-body);
}
.notif-panel-title { font-weight: 700; font-size: 13px; }

.notif-markall-btn {
  border: none; background: none;
  color: var(--brand-primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0;
}
.notif-markall-btn:hover { text-decoration: underline; }

.notif-panel-body { max-height: 380px; overflow-y: auto; }

.notif-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px; text-align: center;
}

.notif-item {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: none;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 14px;
  cursor: default;
  font: inherit; color: inherit;
  transition: background .12s;
}
.notif-item.has-link { cursor: pointer; }
.notif-item:hover            { background: var(--bg-body); }
.notif-item.is-unread        { background: rgba(37,99,168,.06); }
.notif-item.is-unread:hover  { background: rgba(37,99,168,.10); }

.notif-item-dot {
  flex-shrink: 0;
  width: 8px; height: 8px; margin-top: 5px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.notif-item-spacer { flex-shrink: 0; width: 8px; }
.notif-item-content { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 2px;
}
.notif-item-body {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

@media (max-width: 575px) {
  .notif-panel { right: -48px; width: 320px; }
}
/* -- Implementation-aligned additions ---------------------------------------- */

/* Page screen shell (matches src/web custom.css .page-screen) */
.page-screen {
  background: var(--bg-body);
  min-height: calc(100vh - 60px);
  padding: 24px 20px 40px;
}

/* Summary stat aliases (CEO/PMO screens, mirrors .stat-card pattern) */
.summary-stat  { padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-body); border: 1px solid var(--border); text-align: center; }
.summary-value { font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.summary-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* stat-card colour variants */
.stat-card.ups   { background: var(--tint-success-bg, #f0fdf4); border-color: var(--tint-success-border, #86efac); }
.stat-card.ups .stat-num { color: var(--up-color); }
.stat-card.downs { background: var(--danger-bg, #fff5f5); border-color: var(--tint-danger-border, #fca5a5); }
.stat-card.downs .stat-num { color: var(--down-color); }

/* AiDE amber add-row variant */
.add-item-row.aide-add { border: 2px dashed var(--tint-warning-border, #fde68a); background: var(--warn-bg, #fffbeb); }

/* Cycle history stats bar */
.history-stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }

/* Implementation stepper class names (podgov-stepper-*) */
.podgov-stepper-bar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 14px 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.podgov-stepper-inner { display: flex; align-items: flex-start; max-width: 1100px; margin: 0 auto; }
.podgov-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; cursor: default; min-width: 60px; }
.podgov-step-connector { position: absolute; top: 15px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--border); z-index: 0; }
.podgov-step-connector.completed { background: var(--up-color); }
.podgov-step-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-muted); position: relative; z-index: 1; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.podgov-step.completed .podgov-step-circle { background: var(--up-color); border-color: var(--up-color); color: #fff; }
.podgov-step.active .podgov-step-circle { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 0 0 4px rgba(37,99,168,.15); }
.podgov-step-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: center; white-space: nowrap; font-weight: 500; }
.podgov-step.active .podgov-step-label { color: var(--brand-primary); font-weight: 700; }
.podgov-step.completed .podgov-step-label { color: var(--up-color); }

/* PL member tab bar aliases (implementation uses .pl-member-tab* prefix) */
.pl-member-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-member-tab  { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--border); border-radius: 40px; background: var(--surface-subtle, #f8fafc); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); transition: border-color .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.pl-member-tab:hover  { border-color: var(--brand-primary); background: var(--brand-light); }
.pl-member-tab.active { border-color: var(--brand-primary); background: var(--brand-light); color: var(--brand-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   INDUSTRY BEST PRACTICE PATTERNS  (v253 — Jun 2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton / shimmer loading state ──────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 37%, #f0f4f8 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.skeleton-line  { height: 12px; width: 100%; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.xshort { width: 35%; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row   { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-body  { flex: 1; }

/* ── Sortable table header ──────────────────────────────────────────────── */
.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sortable:hover { color: var(--text-primary); }
.sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: .35;
  font-size: 8px;
  line-height: 1;
}
.th-sortable:hover .sort-icon,
.th-sortable[aria-sort] .sort-icon { opacity: .75; }
.th-sortable[aria-sort="ascending"]  .sort-icon::before { content: '▲'; opacity: 1; }
.th-sortable[aria-sort="ascending"]  .sort-icon::after  { content: '▽'; opacity: .3; }
.th-sortable[aria-sort="descending"] .sort-icon::before { content: '△'; opacity: .3; }
.th-sortable[aria-sort="descending"] .sort-icon::after  { content: '▼'; opacity: 1; }
.th-sortable:not([aria-sort]) .sort-icon::before { content: '△'; }
.th-sortable:not([aria-sort]) .sort-icon::after  { content: '▽'; }

/* ── Empty state — enhanced with CTA support ────────────────────────────── */
.empty-state { padding: 48px 24px; text-align: center; color: var(--text-muted); }
.empty-state-icon  { font-size: 40px; margin-bottom: 12px; line-height: 1; }
.empty-state-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.empty-state-desc  { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; max-width: 360px; margin-left: auto; margin-right: auto; }
.empty-state-action { display: inline-flex; align-items: center; gap: 6px; }

/* ── No-results state (inline inside a card, lighter than full empty-state) */
.no-results {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.no-results-icon { font-size: 28px; margin-bottom: 8px; display: block; }
.no-results-title { font-weight: 700; color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }

/* ── Inline validation feedback ─────────────────────────────────────────── */
.field-error {
  font-size: 11.5px;
  color: var(--danger, #dc2626);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-error::before { content: '⚠'; font-size: 10px; }
.char-count {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
}
.char-count.warn { color: var(--warning, #f59e0b); font-weight: 600; }
.char-count.over { color: var(--danger, #dc2626); font-weight: 700; }
.form-control.invalid, textarea.invalid { border-color: var(--danger, #dc2626); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }

/* ── Undo snackbar (action feedback with undo link) ─────────────────────── */
.undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 280px;
  max-width: 480px;
  animation: toast-in .2s ease;
}
.undo-bar-msg { flex: 1; }
.undo-bar-action { color: #93c5fd; font-weight: 700; cursor: pointer; white-space: nowrap; background: none; border: none; font-size: 13px; padding: 0; }
.undo-bar-action:hover { color: #bfdbfe; }




/* ── WCAG 2.5.8: minimum touch-target size for clustered icon controls ── */
.rt-btn { min-width: 24px; min-height: 24px; }
.cat-chip, .ev-tag { min-height: 24px; }

/* ── Print: drop the app chrome, keep the content readable ── */
@media print {
  .sidebar, .topbar, #main-topbar, #app-version-badge, .skip-link,
  .notif-bell, .pg-cmdk-trigger, .topbar-hamburger { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ── Small-viewport units ──────────────────────────────────────────────────
   dvh tracks the *dynamic* mobile viewport (URL bar shown/hidden), fixing the
   classic 100vh bug where drawer/footer content hides behind browser chrome.
   Older engines ignore this block and keep the 100vh declarations above. */
@supports (height: 100dvh) {
  .app-shell { min-height: 100dvh; }
  .sidebar { height: 100dvh; }
  .main-content { min-height: calc(100dvh - var(--topbar-height)); }
  #login-overlay { min-height: 100dvh; }
  .main-content.no-padding { min-height: 100dvh; }
  .page-screen { min-height: calc(100dvh - 60px); }
}

/* ── PWA-shell polish (audit Phase D) ─────────────────────────────────────
   Safe-area insets for notched devices (viewport-fit=cover), scroll
   containment on overlays, iOS input-zoom prevention, touch target sizing. */
.topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
.toast-container { bottom: max(24px, env(safe-area-inset-bottom)); }
.modal-overlay { overscroll-behavior: contain; }
.sidebar, .modal-overlay > * { overscroll-behavior: contain; }
@media (max-width: 900px) {
  /* 16px floor stops iOS Safari from auto-zooming focused fields */
  input, select, textarea, .form-control, .search-input, .filter-select { font-size: 16px; }
}
@media (pointer: coarse) {
  .btn-sm, .topbar-action-btn { min-height: 40px; }
  .btn-icon { min-width: 40px; min-height: 40px; }
  .sidebar-nav a { padding-top: 11px; padding-bottom: 11px; }
}