/* Core: Variables, Reset, Accessibility, Layout, Forms, Buttons, Utilities */
/* ============================================================
   Reddit Cowork Space – Dark Premium Design System
   v35 – Design token refactor
   - Spacing scale (4px base, --space-1 to --space-7)
   - Motion tokens (--duration-fast/normal/slow, --ease-out)
   - Semantic surface colors (--bg-error/warning/info/success)
   - Improved layer contrast (~6-8% steps)
   - Unified card hover behavior
   - WCAG AA contrast preserved
   ============================================================ */

/* Font loaded via <link> in base.html for non-blocking render */

:root {
  /* ── Surface layers (improved contrast: ~6-8% step between levels) ── */
  --bg: #0d0f13;
  --bg-elevated: #14161e;
  --panel: #1a1d27;
  --panel-2: #232630;
  --panel-hover: #2c2f3b;
  /* ── Text ── */
  --text: #e2e4ea;
  --text-secondary: #9498ad; /* WCAG AA 4.5:1 on --bg */
  --muted: #7d81a0;          /* WCAG AA 4.5:1+ on --panel */
  --accent-light: #7aa2ff;
  /* ── Borders ── */
  --line: rgba(255,255,255,0.06);
  --line-strong: rgba(255,255,255,0.10);
  /* ── Brand / accent ── */
  --accent: #5e6ad2;
  --accent-hover: #4f5bc4;
  --accent-glow: rgba(94,106,210,0.12);
  /* ── Semantic status ── */
  --green: #4ade80;
  --green-dim: rgba(74,222,128,0.10);
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.10);
  --yellow: #facc15;
  --yellow-dim: rgba(250,204,21,0.10);
  --orange: #fb923c;
  --cyan: #5e6ad2;
  --violet: #a78bfa;
  /* ── Semantic surface colors (replacing hardcoded hex) ── */
  --bg-error: #3a1a1a;
  --bg-warning: #2a1f0e;
  --bg-info: #0e1d24;
  --bg-success: #0e2418;
  --bg-import: #13182a;
  --border-admin: #222836;
  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  /* ── Radius ── */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* ── Motion ── */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* ── Typography ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  /* ── Glass ── */
  --glass: rgba(28,30,40,0.90);
  --glass-border: rgba(255,255,255,0.06);
}

/* ── 亮色主题:覆盖核心色板(agency + portal 都加载 core.css,一处生效全站) ── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f8;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f2f6;
  --panel-hover: #e8eaf1;
  --text: #1b1e28;
  --text-secondary: #565c74;   /* AA on light bg */
  --muted: #6b7189;
  --accent-light: #4f5bc4;
  --line: rgba(18,22,38,0.10);
  --line-strong: rgba(18,22,38,0.16);
  --accent: #5e6ad2;
  --accent-hover: #4f5bc4;
  --accent-glow: rgba(94,106,210,0.16);
  --green: #16a34a;  --green-dim: rgba(22,163,74,0.12);
  --red: #dc2626;    --red-dim: rgba(220,38,38,0.10);
  --yellow: #b45309; --yellow-dim: rgba(180,83,9,0.12);
  --orange: #ea580c;
  --cyan: #5e6ad2;
  --violet: #7c3aed;
  --bg-error: #fdeaea;
  --bg-warning: #fbf2df;
  --bg-info: #e8f3f9;
  --bg-success: #e7f6ee;
  --bg-import: #eef0fb;
  --border-admin: #e1e4ec;
  --shadow-sm: 0 1px 2px rgba(18,22,38,0.06);
  --shadow: 0 2px 8px rgba(18,22,38,0.08);
  --shadow-lg: 0 8px 24px rgba(18,22,38,0.12);
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(18,22,38,0.08);
}

/* 亮色主题:修正少数硬编码深色 chrome(变量无法覆盖的) */
html[data-theme="light"] #authBox h3,
html[data-theme="light"] .sb-brand-link,
html[data-theme="light"] .sb-brand-link:hover { color: var(--text); }
html[data-theme="light"] #authBox input[type="text"],
html[data-theme="light"] #authBox input[type="password"] { background: #fff; color: var(--text); }
html[data-theme="light"] .sb-nav-item.active,
html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .admin-tab.active,
html[data-theme="light"] .pd-tabs-bar button.active { color: var(--accent) !important; }
html[data-theme="light"] .sb-lang-toggle { background: rgba(18,22,38,.05); }
/* 悬停/激活叠加层:深色主题用白色叠加,亮色下需改成深色叠加才看得见 */
html[data-theme="light"] .sb-nav-item:hover,
html[data-theme="light"] .tab-btn:hover,
html[data-theme="light"] .admin-tab:hover,
html[data-theme="light"] .pd-tabs-bar button:hover,
html[data-theme="light"] .portal-tab:hover,
html[data-theme="light"] .portal-subtab:hover { background: rgba(18,22,38,.05); }
/* pd 区毛玻璃 tab 条:深色背景改成浅色 */
html[data-theme="light"] .pd-tabs-bar { background: rgba(255,255,255,.85) !important; border-color: var(--line) !important; }
html[data-theme="light"] ::selection { background: rgba(94,106,210,.22); color: var(--text); }
/* 标题 / KPI 数值 / 卡片强调文字:深色主题硬编码了 #fff,亮色下改回正文色 */
html[data-theme="light"] .page-title,
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .notes-stat-num,
html[data-theme="light"] .proj-name,
html[data-theme="light"] .proj-stat-num,
html[data-theme="light"] .portal-kpi-value,
html[data-theme="light"] .portal-row-title,
html[data-theme="light"] .notif-title,
html[data-theme="light"] .audit-actor,
html[data-theme="light"] .inbox-status-title,
html[data-theme="light"] .inbox-status-btn,
html[data-theme="light"] .inbox-summary-value,
html[data-theme="light"] .ib-actor,
html[data-theme="light"] .dash-h,
html[data-theme="light"] .portal-status-title,
html[data-theme="light"] .portal-status-btn,
html[data-theme="light"] .portal-inbox-title,
html[data-theme="light"] .portal-empty-tab h3,
html[data-theme="light"] .portal-tab.is-active,
html[data-theme="light"] .portal-subtab.is-active,
html[data-theme="light"] .hub-logo-text,
html[data-theme="light"] .hub-h1,
html[data-theme="light"] .hub-qs-n,
html[data-theme="light"] .hub-status-title,
html[data-theme="light"] .hub-status-btn,
html[data-theme="light"] .hub-activity-title,
html[data-theme="light"] .hub-activity-actor,
html[data-theme="light"] .hub-card-name,
html[data-theme="light"] .hub-card-stat-n,
html[data-theme="light"] .hub-ws-title,
html[data-theme="light"] .hub-ws-value,
html[data-theme="light"] .hub-queue-title,
html[data-theme="light"] .hub-queue-item-title,
html[data-theme="light"] .hub-avatar-menu-name,
html[data-theme="light"] .card-h h3,
html[data-theme="light"] .pd-activity-who,
html[data-theme="light"] .pd-activity-item-title,
html[data-theme="light"] .note-category-select { color: var(--text) !important; }
/* 强调色文字芯片(在浅紫底上,#d7ddff 在白底太淡)→ 用强调色 */
html[data-theme="light"] .ib-status-pill,
html[data-theme="light"] .hub-activity-badge,
html[data-theme="light"] .pd-activity-status,
html[data-theme="light"] .hub-tabs button.active { color: var(--accent) !important; }

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;font-size:14px;line-height:1.6;letter-spacing:-0.011em;display:flex}
a{color:var(--accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--accent-light);text-decoration:none}
::selection{background:rgba(91,138,245,0.3);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

/* === Accessibility: Focus-visible === */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* === Accessibility: Skip-to-main === */
.skip-link{position:absolute;top:-100%;left:var(--space-4);z-index:10000;padding:var(--space-2) var(--space-4);background:var(--accent);color:#fff;border-radius:var(--radius-xs);font-weight:600;font-size:14px;transition:top var(--duration-normal) var(--ease-out)}
.skip-link:focus{top:8px}
/* === Accessibility: Screen-reader only === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* === Layout === */
.wrap{max-width:1600px;margin:0 auto}
.hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);margin-bottom:var(--space-5)}
.hero::before{display:none}
.hero h2{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-0.02em;color:#fff}
.hero p{margin:0;color:var(--text-secondary);font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4);transition:border-color var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow)}
.card:active{transform:translateY(0);box-shadow:var(--shadow-sm);transition-duration:var(--duration-fast)}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-5);gap:var(--space-4);flex-wrap:wrap}
.dash-h{font-size:32px;font-weight:800;margin:0;letter-spacing:-0.035em;color:#fff}
.dash-sub{font-size:14px;color:var(--text-secondary);margin:4px 0 0}
.dash-head-actions{display:flex;gap:8px}
/* === Forms === */
input,select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-xs);padding:10px 14px;font:inherit;font-size:14px;outline:none;transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out),background var(--duration-normal) var(--ease-out)}
input[type="checkbox"],input[type="radio"]{width:auto;margin:0;accent-color:var(--accent);vertical-align:middle;cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--panel-2)}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{cursor:pointer}
button{cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font)}
button:active{transform:scale(.97)}
select option{background:var(--panel);color:var(--text)}
label{display:flex;align-items:center;gap:6px;cursor:pointer}
.chk{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);cursor:pointer;font-size:14px}
.chk input{width:auto;accent-color:var(--accent)}

/* === Buttons === */
button,.btn{border:1px solid var(--line-strong);background:var(--panel-2);color:var(--text);padding:var(--space-2) 18px;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;font:inherit;font-size:14px;font-weight:500}
button:hover,.btn:hover{background:var(--panel-hover);border-color:rgba(255,255,255,0.14);box-shadow:var(--shadow-sm)}
button:active,.btn:active{transform:scale(0.97)}
button:disabled,.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{color:var(--red);border-color:rgba(248,113,113,0.25);background:var(--red-dim)}
.btn-danger:hover{background:rgba(248,113,113,0.18);border-color:rgba(248,113,113,0.35)}
.btn-good{color:var(--green);border-color:rgba(52,211,153,0.25);background:var(--green-dim)}
.btn-good:hover{background:rgba(52,211,153,0.18)}
.btn-warn{color:var(--yellow);border-color:rgba(251,191,36,0.25);background:var(--yellow-dim)}
.btn-warn:hover{background:rgba(251,191,36,0.18)}
/* === Responsive === */
@media(max-width:767px){
  .wrap{padding:0 16px 92px}
  .hero{padding:20px 22px;margin-bottom:14px}
  .card{padding:18px 20px;margin-bottom:12px}
  .h5-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .h5-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
  .h5-card-title{font-weight:600;font-size:15px;flex:1;margin-right:8px;color:#fff}
  .h5-card-meta{font-size:12px;color:var(--text-secondary);text-align:right}
  .h5-card-content{font-size:14px;color:var(--text-secondary);margin-bottom:12px;line-height:1.5}
  .h5-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
  .h5-card-actions .h5-card-status.status{flex-shrink:0;text-align:center}
  .h5-card-actions-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-left:auto}
  .h5-card-actions button,.h5-card-actions-btns button{font-size:13px;min-height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
  .h5-card-actions a.h5-open-link,.h5-card-actions-btns a.h5-open-link{font-size:13px;min-height:38px;padding:0 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .wrap button,.wrap .btn{min-height:38px}
  .form-grid{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr}
  /* FIXED: KPI grid for small screens */
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .kpi{padding:14px 16px}
  .kpi-value{font-size:26px}
  /* Dialog safe on mobile */
  dialog{padding:20px;width:94vw;max-height:85vh}
  /* Sidebar mobile: hidden by default, shown as drawer overlay */
  .sidebar{width:260px;transform:translateX(-100%);transition:transform var(--duration-slow) var(--ease-out);z-index:300}
  .sidebar.sb-mobile-open{transform:translateX(0)}
  .sb-collapse-btn{display:none}
  .sb-mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:299}
  .sb-mobile-backdrop.active{display:block}
  .sb-mobile-toggle{display:flex;position:fixed;top:var(--space-3);left:var(--space-3);z-index:250;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--radius-xs);background:var(--panel);border:1px solid var(--line);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}
  .sb-mobile-toggle:hover{border-color:var(--accent);color:var(--accent)}
  /* Show all labels when drawer is open */
  .sidebar.sb-mobile-open .sb-brand span,
  .sidebar.sb-mobile-open .sb-section-label,
  .sidebar.sb-mobile-open .sb-user-info,
  .sidebar.sb-mobile-open .sb-lang-toggle,
  .sidebar.sb-mobile-open .sb-user button{display:initial}
  .sidebar.sb-mobile-open .sb-nav-item{justify-content:flex-start;padding:7px 10px}
  .sidebar.sb-mobile-open .sb-nav-item span{display:initial}
  .sidebar.sb-mobile-open .sb-projects .sb-nav-item{justify-content:flex-start;padding:6px 14px}
  .main-content{margin-left:0;padding:16px;padding-top:56px}
  .main-content.mc-collapsed{margin-left:0!important}
  .page-header{flex-direction:column}
}
@media(min-width:768px){.md\:hidden{display:none}}
/* Hide mobile-only elements on desktop */
@media(min-width:768px){.sb-mobile-toggle,.sb-mobile-backdrop{display:none!important}}
@media(max-width:767px){.md\:table{display:none}}
/* === Utilities === */
.hidden{display:none}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.overflow-x-auto{overflow-x:auto}
.text-muted{color:var(--text-secondary)}
.text-cyan{color:var(--accent)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-yellow{color:var(--yellow)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-xs{font-size:12px}
.text-sm{font-size:13px}
.ml-2{margin-left:8px}
.mb-3{margin-bottom:12px}
.pb-20{padding-bottom:80px}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px}
.gap-2{gap:8px}
.gap-4{gap:16px}
.space-y-3>*+*{margin-top:12px}
.break-all{overflow-wrap:break-word}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-5{width:20px}
.h-5{height:20px}
@media(max-width:767px){.md\:block{display:none}}
@media(min-width:768px){.md\:block{display:block}}
[x-cloak]{display:none!important}
/* === Reduced motion === */
@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}
  .skeleton{animation:none;background:var(--panel-hover)}
  .kpi:hover{transform:none}
  .proj-card:hover{transform:none}
}

/* === i18n / route loading overlay === */
html[data-i18n-loading] body{overflow:hidden}
.ui-loading-overlay{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,9,14,.46);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity 180ms var(--ease-out)}
.ui-loading-overlay.is-visible{opacity:1;pointer-events:auto}
.ui-loading-card{min-width:min(280px,92vw);padding:24px 22px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(28,31,42,.94),rgba(18,20,28,.96));box-shadow:0 22px 80px rgba(0,0,0,.38);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ui-loading-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle at 35% 35%,rgba(122,162,255,.42),rgba(94,106,210,.12));border:1px solid rgba(122,162,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ui-loading-spinner{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent-light);animation:ui-spin 1s linear infinite}
.ui-loading-title{font-size:15px;font-weight:700;color:#f3f5fb;letter-spacing:-.01em}
.ui-loading-desc{font-size:13px;line-height:1.6;color:var(--text-secondary)}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* === Print styles === */
@media print {
  body{background:#fff;color:#000;font-size:12px}
  .sidebar,.mobile-nav,.sb-collapse-btn,.notif-container,.skip-link,.dash-head-actions,.ops,.btn,.btn-primary,.btn-danger{display:none!important}
  .main-content{margin-left:0!important;padding:0!important}
  .card,.kpi,.proj-card{border:1px solid #ddd;box-shadow:none;break-inside:avoid}
  .kpi-value,.dash-h,.page-title{color:#000}
  a{color:#000;text-decoration:underline}
  .status{border:1px solid #999}
  table{font-size:11px}
  thead th{background:#f5f5f5!important;color:#333!important}
  dialog{display:none!important}
  .tab-bar{border-bottom:2px solid #ccc}
  .tab-btn{color:#666}
  .tab-btn.active{color:#000;border-bottom-color:#000}
}
.input-compact{padding:3px;background:var(--bg);border:1px solid var(--line-strong);color:var(--text);border-radius:var(--radius-xs);font:inherit;font-size:13px}
.input-compact:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}

/* Auth dialog (replaces inline styles in base.html) */
.auth-title{margin:0 0 4px;font-size:20px;font-weight:700;color:#fff}
.auth-subtitle{margin:0 0 20px;color:var(--text-secondary);font-size:13px}
.auth-input-gap{margin-bottom:8px}
.auth-input-gap-lg{margin-bottom:12px}
.auth-submit{width:100%;padding:10px}
.mn-item-rel{position:relative}