/* ASGT Command Center Design System v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
  --bg-primary: #0C0B0F; --bg-surface: #161519; --bg-surface-hover: #1E1D22;
  --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.12);
  --text-primary: #E8E6ED; --text-secondary: #8A8693; --text-muted: #5C5869;
  --accent-green: #22c55e; --accent-red: #ef4444; --accent-yellow: #eab308;
  --accent-blue: #3b82f6; --accent-orange: #f97316; --accent-purple: #a855f6; --accent-teal: #14b8a6;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; --text-3xl: 36px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px;
}
/* REMOVED 2026-08-11 — this rule blocked the design-system migration.
   It was:
     body, html { font-family: … !important; background: … !important;
                  color: … !important; }
   Three !important declarations on a bare element selector. body.asgt in
   asgt-ui.v2.css is (0,1,1) and loads last, and still lost every one of them —
   !important beats specificity and order both. The whole page font and canvas
   were unreachable by the design system while this line existed, which is the
   concrete form of "adding asgt-ui.v2.css as a fourth stylesheet recreates the
   breakage".
   The rest of this file stays until its screens migrate. It is the next thing
   to delete, and it is full of the same pattern: !important on .main, .page,
   .sidebar, .nav-item and on bare input/table/th/td. */
* { font-family: inherit; }

/* REMOVED 2026-08-11 — .main and .page.
   They were:
     .main { overflow-y: auto !important; height: 100vh !important;
             background: var(--bg-primary) !important; scrollbar-width: thin; … }
     .main::-webkit-scrollbar { … }   (three rules)
     .page { display: none !important; }
     .page.active { display: block !important; }

   Same shape as the body, html rule above. .page.active's `display: block
   !important` beat the *inline* display the shell writes, which is the
   ordering bug in miniature — a stylesheet overruling a decision the running
   code had already made.

   Nothing was lost:
     · .main height/overflow/margin/width/padding — tokens-v2.css already
       counter-overrode all five inside the shell, with !important of its own.
       That counter-override is now the only declaration, not the second of two.
     · .main background — .shell-root and .shell-workspace both paint
       var(--bg-primary), so the same canvas shows through.
     · .main scrollbar-* — inert. .workspace-body is the scroll container.
     · .page visibility — index.html:270 declares the same two rules without
       !important, and the showPage wrapper at index.html:800 sets inline
       display on every .page explicitly. Both paths still work; inline now
       wins, which is what it should always have done. */

/* SIDEBAR */
.sidebar, nav.sidebar { background: var(--bg-surface) !important; border-right: 1px solid var(--border) !important; font-family: var(--font-primary) !important; width: 240px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; }
.sidebar-header, .sidebar .logo { padding: 20px 16px 16px !important; border-bottom: 1px solid var(--border) !important; font-size: var(--text-lg) !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.nav-item { padding: 10px 16px !important; margin: 2px 8px !important; border-radius: var(--radius-sm) !important; cursor: pointer !important; transition: background 0.15s ease !important; font-size: var(--text-base) !important; color: var(--text-secondary) !important; border-left: 3px solid transparent !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.nav-item:hover { background: var(--bg-surface-hover) !important; color: var(--text-primary) !important; }
.nav-item.active, .nav-item[class*="active"] { background: rgba(59,130,246,0.08) !important; border-left-color: var(--accent-blue) !important; color: var(--text-primary) !important; font-weight: 500 !important; }
.sidebar-footer { margin-top: auto !important; padding: 12px 16px !important; border-top: 1px solid var(--border) !important; font-size: var(--text-sm) !important; color: var(--text-muted) !important; }

/* CARDS */
.card, .issue-card, .debate-card, .kb-entry, .approval-card, .detail-panel, .stat-card { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 20px !important; transition: border-color 0.15s ease !important; color: var(--text-primary) !important; }
.card:hover, .issue-card:hover, .debate-card:hover, .kb-entry:hover { border-color: var(--border-hover) !important; }

/* KPI CARDS */
.kpi-card, .stat-box, .stat { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 20px 24px !important; }
.kpi-card .label, .stat-box label, .stat-label { font-size: var(--text-sm) !important; color: var(--text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 8px !important; display: block !important; }
.kpi-card .value, .stat-box .value, .kpi-value { font-size: var(--text-3xl) !important; font-weight: 700 !important; font-family: var(--font-mono) !important; color: var(--text-primary) !important; line-height: 1.1 !important; }
.kpi-card .subtext, .stat-box .sub { font-size: var(--text-xs) !important; color: var(--text-muted) !important; margin-top: 4px !important; }

/* STATUS DOTS */
.status-dot, .live-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; display: inline-block !important; }
.status-dot.online, .status-online { background: var(--accent-green) !important; }
.status-dot.warning, .status-warning { background: var(--accent-yellow) !important; }
.status-dot.error, .status-error { background: var(--accent-red) !important; }
.status-dot.idle, .status-idle { background: var(--text-muted) !important; }

/* TOP BAR */
.top-bar, .kpi-bar { background: rgba(22,21,25,0.95) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(8px) !important; padding: 8px 16px !important; font-family: var(--font-mono) !important; }

/* KANBAN (Bug 3 fix) */
#sp-kanban { display: flex !important; overflow-x: auto !important; gap: 12px !important; padding-bottom: 12px !important; scroll-behavior: smooth !important; }
#sp-kanban > div { min-width: 220px !important; flex-shrink: 0 !important; max-height: 600px !important; overflow-y: auto !important; }
#sp-kanban::-webkit-scrollbar { height: 6px; } #sp-kanban::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; } #sp-kanban::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* SP Detail Panel */
#sp-detail-panel { background: var(--bg-surface) !important; border-left: 1px solid var(--border) !important; color: var(--text-primary) !important; }

/* ISSUES */
#page-issues .issue-card { border-left: 4px solid var(--accent-red) !important; margin-bottom: 12px !important; }

/* DEBATES */
.debate-sides, .debate-arguments { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 !important; }

/* ACTIVITY FEED */
#page-activity .feed-entry, #page-activity .activity-item { border-left: 3px solid var(--accent-blue) !important; margin-bottom: 12px !important; }
.feed-entry .timestamp, .activity-time { font-family: var(--font-mono) !important; font-size: var(--text-xs) !important; color: var(--text-muted) !important; }
.feed-entry .author, .activity-author { font-weight: 600 !important; color: var(--text-primary) !important; }

/* VO LOADING STATE */
.vo-loading { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 70vh !important; color: var(--text-secondary) !important; }
.vo-loading .spinner { width: 40px !important; height: 40px !important; border: 3px solid var(--border) !important; border-top-color: var(--accent-blue) !important; border-radius: 50% !important; animation: vo-spin 0.8s linear infinite !important; margin-bottom: 16px !important; }
@keyframes vo-spin { to { transform: rotate(360deg); } }
.vo-loading .text { font-size: var(--text-lg) !important; font-weight: 500 !important; }

/* REMOVED 2026-08-11 — bare input/textarea/select and bare table/th/td.
   They were:
     input, textarea, select { background/border/radius/color/padding/font
                               — six !important }
     input:focus, … { border-color/outline/box-shadow !important }
     table { width/border-collapse !important }
     th { font-size/weight/color/transform/spacing/padding/border/align
          — eight !important }
     td { padding/border-bottom/color !important }
     tr:hover td { background !important }

   These are what body, html was for the shell: element selectors carrying
   !important, so .asgt-table th (0,2,0) and .asgt-input (0,1,0) lost every
   declaration they share. Measured on the live page before removal:

     .asgt-search .asgt-input resolved to padding-inline-start 12px instead of
     48px, so the magnifier sat on top of the placeholder text; border-radius
     came out 6px instead of the pill.
     .asgt-select computed background-image: none — appearance:none had already
     removed the native arrow, and the system's chevron could not be drawn, so
     every select rendered as a plain rectangle with no affordance at all.
     th { text-align: left !important } beat .asgt-table .num, so numeric
     columns were left-aligned.

   The screens that were relying on them:
     · WhatsApp and Finance — migrated to .asgt-table / .asgt-input.
     · sales-pipeline.js, knowledge-base.js, team-knowledge.js — every table
       and input in all three is styled inline by its own renderer. Those
       inline styles were being overruled BY these rules; deleting them hands
       each screen back the styling its author wrote.
     · index.html's Dashboard and Activity — migrated in c8ff83e; they render
       .asgt-panel bodies and contain no bare table or input. */

/* UTILITY */
.mono, .number { font-family: var(--font-mono) !important; }
#kpi-revenue, #kpi-cash, .revenue-value, .cash-value { color: var(--accent-green) !important; }
#kpi-issues, .issues-value { color: var(--accent-red) !important; }
#kpi-agents, .agents-value { color: var(--accent-blue) !important; }

/* SCROLLBAR GLOBAL */
*::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }