/* ===== /css/tokens.css?v=6 ===== */
/* Nexora v4 design tokens — Confident Editorial with Vibrant Soul.
Linear-meets-Stripe direction: electric indigo brand, sophisticated
accent palette, restored subtle shadows, hover micro-motion ready. */
:root {
/* ── Typography ──────────────────────────────────────────────── */
--font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ── Spacing — 4-pt scale ────────────────────────────────────── */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ── Radii ───────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-full: 9999px;
/* ── Shadow — RESTORED (subtle but present for depth) ────────── */
--shadow-none: none;
--shadow-subtle: 0 1px 2px rgba(15,15,30,.04);
--shadow-card: 0 1px 2px rgba(15,15,30,.04), 0 2px 4px rgba(15,15,30,.04);
--shadow-elevated: 0 4px 12px -2px rgba(15,15,30,.08), 0 2px 6px rgba(15,15,30,.05);
--shadow-modal: 0 24px 48px -12px rgba(15,15,30,.20), 0 8px 16px rgba(15,15,30,.06);
--shadow-focus: 0 0 0 3px rgba(80,70,229,0.30);
--shadow-glow: 0 0 0 4px rgba(80,70,229,0.16), 0 4px 12px -2px rgba(80,70,229,0.30);
--shadow-glow-soft: 0 4px 24px -8px rgba(80,70,229,0.30);
/* ── Focus ring — unified. All interactive elements read from these
tokens (button, form, card, link). The halo is composed of an inner
surface-colored spacer + an outer brand halo, so the ring visually
"floats" above the border regardless of surface color. Overridable
per component via `--ring-color` if a tone-specific ring is needed. */
--ring-width: 3px;
--ring-offset: 2px;
--ring-color: var(--brand-glow);
/* ── Motion — material standard ──────────────────────────────── */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--d-instant: 100ms;
--d-fast: 150ms;
--d: 240ms;
--d-slow: 320ms;
/* ── Brand — ELECTRIC INDIGO (vibrant, alive, sophisticated) ─── */
--brand: #5046E5;
--brand-hover: #4338CA;
--brand-active: #3730A3;
--brand-fade: rgba(80,70,229,0.10);
--brand-strong: rgba(80,70,229,0.22);
--brand-glow: rgba(80,70,229,0.30);
--brand-soft: #EEF0FE;
--brand-gradient: linear-gradient(135deg, #5046E5 0%, #7C3AED 100%);
/* ── Secondary accent — WARM CORAL (sparingly, for delight) ──── */
--accent-coral: #F97316;
--accent-coral-fade: rgba(249,115,22,0.10);
--accent-coral-soft: #FFF3EA;
/* ── Canvas — cleaner warm white ─────────────────────────────── */
--bg: #FBFBFA;
--surface: #FFFFFF;
--surface-soft: #F4F4F2;
--surface-2: #FFFFFF;
--bg-hover: #F0F0EE;
/* ── Text — confident deep neutral ───────────────────────────── */
--text: #18181B;
--text-2: #52525B;
--muted: #A1A1AA;
/* ── Border — clean gray ─────────────────────────────────────── */
--border: #E4E4E7;
--border-strong: #D4D4D8;
--border-soft: #F4F4F5;
/* ── Semantic — VIBRANT (not muted, but considered) ──────────── */
--success: #16A34A;
--success-bg: rgba(22,163,74,0.10);
--warning: #EA580C;
--warning-bg: rgba(234,88,12,0.10);
--danger: #DC2626;
--danger-bg: rgba(220,38,38,0.10);
--info: #2563EB;
--info-bg: rgba(37,99,235,0.10);
/* ── Legacy aliases (preserved for backward compat) ──────────── */
--accent: var(--brand);
--accent-hover: var(--brand-hover);
--accent2: var(--info);
--accent2-light: var(--info-bg);
--green: var(--success);
--green-light: var(--success-bg);
--red: var(--danger);
--red-light: var(--danger-bg);
--yellow: var(--warning);
--yellow-light: var(--warning-bg);
--orange: var(--accent-coral);
--purple: #7C3AED;
--teal: #0D9488;
--card: var(--surface);
--intent-success: var(--success);
--intent-danger: var(--danger);
--intent-warning: var(--warning);
--intent-info: var(--info);
--intent-neutral: var(--muted);
/* ── A6 (Wave/Agent 4): Colorblind-safe badge ICONS ─────────────────
Status badges that rely on green + orange + yellow simultaneously
fail deuteranopia (red-green colour vision deficiency). These
custom properties document the suggested Feather / Lucide icon
name to PAIR WITH each colour so the meaning is conveyed by both
hue AND shape. Consumers (badge components) should read these
values via getComputedStyle or apply them via content/attr().
Purely additive — no existing colour token is touched. */
--badge-icon-green: "check-circle"; /* success / on-track / done */
--badge-icon-orange: "zap"; /* initiative / attention */
--badge-icon-yellow: "alert-triangle"; /* warning / problem-solving */
--badge-icon-red: "x-octagon"; /* failure / blocker / overdue */
color-scheme: light;
}
/* ══════════════════════════════════════════════════════════════════
DARK MODE — SINGLE SOURCE OF TRUTH
------------------------------------------------------------------
Merged with the former [data-theme="dark"] block from
css/nexora-theme.css (Consolidation Sprint / Day 4). Where the two
files disagreed the more considered nexora-theme values won:
canvas & surfaces get a subtle purple/indigo tint, borders and
hovers use rgba-white for cheaper compositing.
════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
html.dark,
.dark-theme {
--brand: #818CF8;
--brand-hover: #A5B4FC;
--brand-active: #C7D2FE;
--brand-fade: rgba(129,140,248,0.14);
--brand-strong: rgba(129,140,248,0.26);
--brand-glow: rgba(129,140,248,0.36);
--brand-soft: rgba(129,140,248,0.08);
--accent-coral: #FB923C;
--accent-coral-fade: rgba(251,146,60,0.14);
/* Canvas — kept nexora-theme's purple-tinted deep values. */
--bg: #0A0A0F;
--surface: #111118;
--surface-soft: #16161F;
--surface-2: #16161F;
--card: #16161F;
--bg-hover: rgba(255,255,255,0.04);
--bg-input: #1C1C28;
--bg-overlay: rgba(0,0,0,.7);
/* Sidebar-scoped surfaces (dark also carries a brand-tinted border). */
--sidebar-bg: #0E0E14;
--sidebar-border: rgba(99,102,241,.25);
/* Neutrals — nexora-theme's softer set for readability on tinted bg. */
--text: #F0F0F5;
--text-2: #C0C0D0;
--muted: #8888A0;
--muted-light: #55556A;
/* Borders — rgba-white so they inherit the surface tint. */
--border: rgba(255,255,255,0.06);
--border-strong: rgba(255,255,255,0.14);
--border-soft: rgba(255,255,255,0.03);
--border-light: rgba(255,255,255,0.03);
/* Legacy semantic aliases used by v2 and app.css component rules. */
--accent: var(--brand);
--accent-light: rgba(129,140,248,0.10);
--accent-hover: var(--brand-hover);
--accent2: #22D3EE;
--accent2-light: rgba(34,211,238,0.10);
--green: #4ADE80; --green-light: rgba(74,222,128,0.10);
--yellow: #FDE68A; --yellow-light: rgba(253,230,138,0.08);
--red: #FCA5A5; --red-light: rgba(252,165,165,0.08);
--purple: #C4B5FD; --purple-light: rgba(196,181,253,0.08);
--orange: #FDBA74; --orange-light: rgba(253,186,116,0.08);
--teal: #5EEAD4; --teal-light: rgba(94,234,212,0.08);
--pink: #F9A8D4; --pink-light: rgba(249,168,212,0.08);
--shadow-xs: 0 1px 3px rgba(0,0,0,.40);
--shadow-sm: 0 2px 8px rgba(0,0,0,.40);
--shadow-md: 0 4px 16px rgba(0,0,0,.45);
--shadow-lg: 0 10px 40px rgba(0,0,0,.50);
--shadow-xl: 0 20px 60px rgba(0,0,0,.60);
--shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.30);
--shadow-elevated: 0 4px 12px -2px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.30);
--shadow-modal: 0 24px 48px -12px rgba(0,0,0,.70), 0 8px 16px rgba(0,0,0,.40);
--shadow-focus: 0 0 0 3px rgba(129,140,248,0.40);
--shadow-glow: 0 0 0 4px rgba(129,140,248,0.20), 0 4px 12px -2px rgba(129,140,248,0.40);
color-scheme: dark;
}
/* ===== /css/v2/system_tokens.css?v=1 ===== */
/* DEPRECATED: see ./tokens_unified.css for canonical design tokens.
All z-index, motion, duration, easing, and transition tokens previously
defined here have moved to tokens_unified.css (single source of truth).
This file is kept only so existing tags do not 404.
Safe to delete once index.html no longer references it. */
/* @import stripped by build-assets */
/* ===== /css/app.css?v=57 ===== */
/* ═══════════════════════════════════════════════
PM COMMAND CENTER — Design System v8
═══════════════════════════════════════════════ */
/* ── SVG Icon Utilities ─────────────────────── */
.icon{display:inline-block;vertical-align:middle;flex-shrink:0;}
.icon-10{width:10px;height:10px;}
.icon-11{width:11px;height:11px;}
.icon-12{width:12px;height:12px;}
.icon-13{width:13px;height:13px;}
.icon-14{width:14px;height:14px;}
.icon-15{width:15px;height:15px;}
.icon-16{width:16px;height:16px;}
.icon-17{width:17px;height:17px;}
.icon-20{width:20px;height:20px;}
.icon-21{width:21px;height:21px;}
.icon-22{width:22px;height:22px;}
.icon-28{width:28px;height:28px;}
.icon-30{width:30px;height:30px;}
:root{
/* Core palette — warm off-white base, calm zinc tones, Notion/Asana-inspired */
--bg:#fafaf9; /* warm off-white (stone-50) */
--surface:#ffffff;
--card:#ffffff;
--border:#e7e5e4; /* stone-200 — softer than slate */
--border-light:#f5f5f4; /* stone-100 */
--bg-input:#fafaf9;
--bg-hover:#f5f5f4;
--bg-overlay:rgba(28,25,23,.35); /* warm overlay, less harsh */
--sidebar-bg:#fafaf9; /* light-on-light sidebar */
--sidebar-border:#e7e5e4;
/* Brand — softer indigo-violet */
--accent:#6366f1; /* indigo-500 — slightly softer than 4f46e5 */
--accent-hover:#4f46e5;
--accent-light:#eef2ff; /* indigo-50 */
--accent2:#0ea5e9;
--accent2-light:#e0f2fe;
/* Semantic — same hue but tuned for pastel-bg pattern */
--green:#059669; --green-light:#ecfdf5;
--yellow:#d97706; --yellow-light:#fffbeb;
--red:#dc2626; --red-light:#fef2f2;
--purple:#7c3aed; --purple-light:#f5f3ff;
--orange:#ea580c; --orange-light:#fff7ed;
--teal:#0d9488; --teal-light:#f0fdfa;
--pink:#db2777; --pink-light:#fdf2f8;
/* Text — warm zinc instead of cool slate */
--text:#18181b; /* zinc-900 */
--text-2:#3f3f46; /* zinc-700 */
--muted:#71717a; /* zinc-500 */
--muted-light:#a1a1aa; /* zinc-400 */
/* Elevation — softer, less contrasty */
--shadow-xs:0 1px 2px rgba(28,25,23,.04);
--shadow-sm:0 1px 3px rgba(28,25,23,.06),0 1px 2px rgba(28,25,23,.03);
--shadow-md:0 4px 12px rgba(28,25,23,.06),0 2px 4px rgba(28,25,23,.03);
--shadow-lg:0 10px 28px rgba(28,25,23,.08),0 4px 8px rgba(28,25,23,.04);
--shadow-xl:0 20px 56px rgba(28,25,23,.12),0 8px 16px rgba(28,25,23,.05);
/* Typography */
--font:'Inter',system-ui,-apple-system,sans-serif;
--mono:'JetBrains Mono','Fira Code',monospace;
/* Radius — slightly larger, more modern */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
}
/* ── Dark Theme — warm zinc/stone instead of cool slate ── */
[data-theme="dark"]{
--bg:#18181b; /* zinc-900 */
--surface:#27272a; /* zinc-800 */
--card:#27272a;
--border:#3f3f46; /* zinc-700 */
--border-light:#27272a;
--bg-input:#18181b;
--bg-hover:rgba(255,255,255,.05);
--bg-overlay:rgba(0,0,0,.55);
--sidebar-bg:#18181b;
--sidebar-border:rgba(255,255,255,.08);
/* Softer accent for dark */
--accent:#a5b4fc;
--accent-hover:#c7d2fe;
--accent-light:rgba(165,180,252,.14);
--accent2:#67e8f9;
--accent2-light:rgba(103,232,249,.12);
/* Semantic — pastel saturation on warm bg */
--green:#6ee7b7; --green-light:rgba(110,231,183,.14);
--yellow:#fcd34d; --yellow-light:rgba(252,211,77,.12);
--red:#fca5a5; --red-light:rgba(252,165,165,.12);
--purple:#c4b5fd; --purple-light:rgba(196,181,253,.12);
--orange:#fdba74; --orange-light:rgba(253,186,116,.12);
--teal:#5eead4; --teal-light:rgba(94,234,212,.12);
--pink:#f9a8d4; --pink-light:rgba(249,168,212,.12);
/* Warm text — zinc instead of slate */
--text:#fafaf9; /* stone-50 */
--text-2:#e7e5e4; /* stone-200 */
--muted:#a1a1aa; /* zinc-400 */
--muted-light:#71717a; /* zinc-500 */
--shadow-xs:0 1px 3px rgba(0,0,0,.3);
--shadow-sm:0 2px 6px rgba(0,0,0,.3);
--shadow-md:0 4px 16px rgba(0,0,0,.35);
--shadow-lg:0 10px 40px rgba(0,0,0,.45);
--shadow-xl:0 24px 64px rgba(0,0,0,.55);
}
/* ── Reset & Base ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-size:14px;line-height:1.5;}
/* ── Loading ── */
.loading{position:fixed;inset:0;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:999;}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:13px;color:var(--muted);font-family:var(--mono);letter-spacing:.03em;}
.nav-hidden{display:none!important;}
.spinner-sm{width:16px;height:16px;border-width:2px;}
/* ══════════════════════════════════════════════
LOGIN PAGE — Track-C calm/friendly aesthetic
═══════════════════════════════════════════════ */
#loginScreen{display:none;min-height:100vh;background:var(--bg);align-items:center;justify-content:center;position:relative;overflow:hidden;}
/* Two soft radial glows behind the card — gentle brand presence without heavy chrome */
#loginScreen::before{content:'';position:absolute;top:-180px;left:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.16),transparent 65%);filter:blur(40px);pointer-events:none;}
#loginScreen::after{content:'';position:absolute;bottom:-160px;right:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 65%);filter:blur(40px);pointer-events:none;}
.login-wrap{width:420px;max-width:92vw;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;z-index:1;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.login-brand{text-align:center;margin-bottom:32px;}
.login-logo{width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;filter:drop-shadow(0 8px 24px rgba(99,102,241,.22));}
.login-logo svg{width:56px;height:56px;}
.login-title{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.6px;}
.login-sub{font-size:13px;color:var(--muted);margin-top:6px;font-weight:500;}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-md);}
.login-card-title{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.1px;margin-bottom:22px;}
.login-error{background:var(--red-light);border:1px solid rgba(220,38,38,.2);border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;color:var(--red);margin-bottom:16px;display:none;align-items:center;gap:8px;}
.login-error.show{display:flex;}
.login-card .btn-primary{margin-top:6px;}
[data-theme="dark"] #loginScreen{background:var(--bg);}
[data-theme="dark"] #loginScreen::before{background:radial-gradient(circle,rgba(99,102,241,.22),transparent 65%);}
[data-theme="dark"] #loginScreen::after{background:radial-gradient(circle,rgba(139,92,246,.20),transparent 65%);}
/* ══════════════════════════════════════════════
FORMS
═══════════════════════════════════════════════ */
.form-group{margin-bottom:18px;}
.form-label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.1px;margin-bottom:7px;display:block;}
.form-input,.form-select,.form-textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13.5px;padding:10px 14px;outline:none;transition:all .15s;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-light);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted-light);}
.form-select option{background:var(--card);}
.form-textarea{min-height:80px;resize:vertical;}
/* ══ MULTI-SELECT ASSIGNEE ═══════════════════════════════════ */
.assignee-multi-wrap{position:relative;}
.assignee-tags{min-height:38px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:pointer;transition:all .2s;}
.assignee-tags:focus-within,.assignee-tags.open{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.assignee-tag{display:inline-flex;align-items:center;gap:4px;background:var(--purple-light);color:var(--purple);border:1px solid #c4b5fd;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;}
.assignee-tag .tag-remove{cursor:pointer;color:var(--purple);line-height:1;font-size:13px;background:none;border:none;padding:0;}
.assignee-tag .tag-remove:hover{color:var(--purple);}
.assignee-placeholder{font-size:13px;color:var(--muted-light);}
.assignee-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;max-height:260px;overflow:hidden;display:none;flex-direction:column;}
.assignee-dropdown.open{display:flex;}
.assignee-dropdown-search{padding:8px 8px 6px;border-bottom:1px solid var(--border-light);background:var(--surface);position:sticky;top:0;z-index:1;}
.assignee-search-input{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);background:var(--surface);outline:none;box-sizing:border-box;}
.assignee-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.12);}
.assignee-dropdown-list{overflow-y:auto;max-height:210px;-webkit-overflow-scrolling:touch;}
.assignee-dropdown-empty{padding:14px 12px;font-size:12px;color:var(--muted);text-align:center;}
.assignee-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;transition:background .12s;}
.assignee-dropdown-item:hover{background:var(--purple-light);}
.assignee-dropdown-item.selected{background:var(--purple-light);color:var(--purple);font-weight:600;}
.assignee-dropdown-item .item-check{width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.assignee-dropdown-item.selected .item-check{background:var(--accent);border-color:var(--accent);color:var(--surface);}
/* ══ DATE INPUT STYLING ══════════════════════════════════════ */
.date-wrap{position:relative;display:block;}
.date-wrap .form-input[type="date"]{padding-left:36px;cursor:pointer;color:var(--text);}
.date-wrap .form-input[type="date"]::-webkit-calendar-picker-indicator{
opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;}
.date-wrap .date-icon{
position:absolute;left:11px;top:50%;transform:translateY(-50%);
color:var(--muted);pointer-events:none;display:flex;align-items:center;}
.form-input[type="date"]:not(.date-wrap .form-input){
appearance:none;-webkit-appearance:none;cursor:pointer;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-hint{font-size:10.5px;color:var(--muted);margin-top:4px;}
.input-wrap{position:relative;}
.input-wrap .form-input{padding-left:40px;}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none;}
/* ══════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════ */
.btn{padding:9px 16px;border-radius:var(--r-sm);border:1px solid transparent;font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.01em;line-height:1;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:var(--surface);box-shadow:0 1px 2px rgba(99,102,241,.18);}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 8px rgba(99,102,241,.25);}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--muted-light);background:var(--bg-hover);}
.btn-secondary{background:var(--bg-hover);color:var(--text);border-color:var(--border);}
.btn-secondary:hover{background:var(--border-light);}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red-light);}
.btn-danger:hover{background:var(--red-light);}
.btn-warning{background:transparent;color:var(--yellow);border-color:var(--yellow-light);}
.btn-warning:hover{background:var(--yellow-light);}
.btn-teal{background:transparent;color:var(--teal);border-color:var(--teal-light);}
.btn-teal:hover{background:var(--teal-light);}
.btn-purple{background:transparent;color:var(--purple);border-color:var(--purple-light);}
.btn-purple:hover{background:var(--purple-light);}
.btn-sm{padding:6px 11px;font-size:11.5px;border-radius:7px;}
.btn-full{width:100%;padding:12px;}
/* ══════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════ */
.app{display:flex;height:100vh;overflow:hidden;}
/* ── Sidebar — light-on-light, calm ── */
.sidebar{width:236px;background:var(--sidebar-bg);display:flex;flex-direction:column;padding:0;flex-shrink:0;position:relative;border-right:1px solid var(--sidebar-border);transition:width .3s cubic-bezier(.4,0,.2,1);}
.logo{padding:22px 20px 18px;border-bottom:1px solid var(--border-light);}
.logo-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;filter:drop-shadow(0 2px 8px rgba(80,70,229,.22));}
.logo-text{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.3px;}
.logo-sub{font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:2px;}
.nav{padding:14px 10px;flex:1;overflow-y:auto;}
.nav-group{margin-bottom:2px;}
.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;border-radius:8px;transition:background .15s;user-select:none;}
.nav-group-toggle:hover{background:var(--bg-hover);}
.nav-group-toggle span{font-size:10px;font-weight:700;color:var(--muted-light);text-transform:uppercase;letter-spacing:1px;}
.nav-chevron{color:var(--muted-light);transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;}
.nav-group.open .nav-chevron{transform:rotate(180deg);}
.nav-group-items{overflow:hidden;max-height:0;transition:max-height .28s cubic-bezier(.4,0,.2,1);}
.nav-group.open .nav-group-items{max-height:600px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;color:var(--text-2);font-size:13px;font-weight:500;transition:all .15s;border-radius:8px;margin-bottom:2px;position:relative;}
.nav-item:hover{color:var(--text);background:var(--bg-hover);}
.nav-item.active{color:var(--accent);background:var(--accent-light);font-weight:600;}
.nav-item.active::before{content:none;}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;color:var(--muted);}
.nav-item:hover .nav-icon{color:var(--text);}
.nav-item.active .nav-icon{color:var(--accent);}
.nav-badge{margin-left:auto;background:var(--red);color:var(--surface);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;}
.sidebar-user{padding:14px 16px;border-top:1px solid var(--border-light);display:flex;gap:10px;align-items:center;background:transparent;}
.s-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--surface);flex-shrink:0;box-shadow:0 2px 6px rgba(99,102,241,.25);}
.s-info{flex:1;min-width:0;}
.s-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.s-role{font-size:10.5px;color:var(--muted);margin-top:1px;}
.logout-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:15px;padding:6px;border-radius:8px;transition:all .15s;flex-shrink:0;}
.logout-btn:hover{color:var(--red);background:var(--red-light);}
/* ── Topbar icon buttons (shared) ── */
.topbar-icon-btn,.sidebar-toggle,.lang-toggle,.theme-toggle{border-radius:8px;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;color:var(--muted);padding:6px 9px;flex-shrink:0;}
.topbar-icon-btn:hover,.sidebar-toggle:hover,.lang-toggle:hover,.theme-toggle:hover{color:var(--accent);background:var(--accent-light);}
.topbar-icon-btn svg,.sidebar-toggle svg,.lang-toggle svg,.theme-toggle svg{width:15px;height:15px;}
/* ── Sidebar collapsed ── */
.sidebar.collapsed{width:60px;}
.sidebar.collapsed .logo{padding:16px 0;display:flex;flex-direction:column;align-items:center;}
.sidebar.collapsed .logo-icon{margin-bottom:0;}
.sidebar.collapsed .logo-text,.sidebar.collapsed .logo-sub{display:none;}
.sidebar.collapsed .nav{padding:8px 6px;}
.sidebar.collapsed .nav-group-toggle{justify-content:center;padding:8px 0;}
.sidebar.collapsed .nav-group-toggle span,.sidebar.collapsed .nav-chevron{display:none;}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-badge{display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:9px 0;gap:0;}
.sidebar.collapsed .nav-icon{margin:0;width:auto;}
.sidebar.collapsed .sidebar-user{justify-content:center;padding:12px 6px;}
.sidebar.collapsed .s-info,.sidebar.collapsed .logout-btn{display:none;}
.sidebar.collapsed .s-avatar{width:32px;height:32px;font-size:12px;}
.sidebar.collapsed .nav-item[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--text);color:var(--card);padding:6px 11px;border-radius:8px;font-size:12px;font-weight:500;white-space:nowrap;z-index:1000;pointer-events:none;box-shadow:var(--shadow-md);}
/* ── Language toggle ── */
.lang-icon-id{display:none;}
[data-lang="id"] .lang-icon-en{display:none;}
[data-lang="id"] .lang-icon-id{display:block;}
/* ── Main area ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
.topbar{background:var(--card);border-bottom:1px solid var(--border-light);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.topbar-left{display:flex;align-items:center;gap:14px;}
.page-title{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.4px;}
.sub-tabs-bar{background:var(--card);border-bottom:1px solid var(--border-light);padding:10px 28px;flex-shrink:0;}
.sub-tabs{display:flex;flex-direction:column;gap:6px;}
.sub-tabs-row{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:thin;}
.sub-tabs-row-inner{padding-top:2px;}
.sub-tab-cluster{font-weight:700;letter-spacing:.2px;}
.sub-tabs::-webkit-scrollbar{height:4px;}
.sub-tabs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px;}
.sub-tab{border:none;background:transparent;padding:7px 14px;font-size:13px;font-weight:500;font-family:var(--font);color:var(--muted);cursor:pointer;border-radius:8px;transition:all .15s;white-space:nowrap;}
.sub-tab:hover{color:var(--text);background:var(--bg-hover);}
.sub-tab.sub-tab-active{background:var(--accent-light);color:var(--accent);font-weight:600;}
[data-theme="dark"] .sub-tabs-bar{background:var(--card);border-color:var(--border-light);}
[data-theme="dark"] .sub-tab{color:var(--muted);}
[data-theme="dark"] .sub-tab:hover{color:var(--text);background:var(--bg-hover);}
[data-theme="dark"] .sub-tab.sub-tab-active{background:var(--accent-light);color:var(--accent);}
.page-sub{font-size:12px;color:var(--muted);border-left:1px solid var(--border);padding-left:12px;display:none;}
.topbar-right{display:flex;gap:6px;align-items:center;}
.topbar-date{font-size:11.5px;color:var(--muted);background:var(--bg);padding:5px 11px;border-radius:20px;border:1px solid var(--border);margin-right:6px;}
.content{flex:1;overflow-y:auto;padding:28px 32px;}
.content::-webkit-scrollbar{width:6px;}
.content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.content::-webkit-scrollbar-track{background:transparent;}
.page{display:none;}
/* AI page fills full content height */
.content.ai-active{overflow:hidden;padding:0;display:flex;flex-direction:column;}
.content.ai-active #page-ai{display:flex;flex-direction:column;flex:1;min-height:0;padding:20px;}
.content.ai-active #page-ai .ai-panel{flex:1;min-height:0;}
.page.active{display:block;animation:pageIn .2s ease both;}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ── Section header ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.section-heading{font-size:14px;font-weight:700;color:var(--text);}
.section-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.section-title{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.section-title::after{content:'';flex:1;height:1px;background:var(--border);}
/* ══════════════════════════════════════════════
TOOLBAR / FILTERS
═══════════════════════════════════════════════ */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.search-box{position:relative;flex:1;min-width:200px;}
.search-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:9px 12px 9px 36px;outline:none;transition:all .15s;}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.search-input::placeholder{color:var(--muted-light);}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none;}
.filter-select{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:12.5px;padding:9px 12px;outline:none;cursor:pointer;transition:border-color .15s;}
.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.filter-select option{background:var(--card);}
.result-count{font-size:11.5px;color:var(--muted);white-space:nowrap;background:var(--bg);padding:5px 11px;border-radius:20px;border:1px solid var(--border);}
/* ══════════════════════════════════════════════
KPI CARDS — calm, minimal, generous whitespace
═══════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border);}
.kpi-card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:16px;flex-shrink:0;}
.kpi-card.blue .kpi-card-icon{background:var(--accent-light);color:var(--accent);}
.kpi-card.green .kpi-card-icon{background:var(--green-light);color:var(--green);}
.kpi-card.yellow .kpi-card-icon{background:var(--yellow-light);color:var(--yellow);}
.kpi-card.red .kpi-card-icon{background:var(--red-light);color:var(--red);}
.kpi-card.purple .kpi-card-icon{background:var(--purple-light);color:var(--purple);}
.kpi-label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.2px;margin-bottom:6px;}
.kpi-val{font-size:30px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:6px;letter-spacing:-.5px;}
.kpi-sub{font-size:12px;color:var(--muted);}
.kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;margin-top:6px;}
.kpi-trend.up{background:var(--green-light);color:var(--green);}
.kpi-trend.down{background:var(--red-light);color:var(--red);}
.kpi-trend.neutral{background:var(--bg);color:var(--muted);}
/* removed bottom gradient bar — calm look prefers no extra chrome */
.kpi-bar{display:none;}
/* ══════════════════════════════════════════════
DASHBOARD LAYOUT
═══════════════════════════════════════════════ */
.dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;}
.dash-grid-70-30{display:grid;grid-template-columns:7fr 3fr;gap:18px;margin-bottom:20px;}
.dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px;}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:box-shadow .2s;}
.chart-card:hover{box-shadow:var(--shadow-sm);}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.chart-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px;}
.chart-subtitle{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px;}
.chart-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.deadline-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-light);}
.deadline-item:last-child{border-bottom:none;}
.deadline-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.deadline-name{font-size:12.5px;font-weight:500;flex:1;}
.deadline-pm{font-size:10.5px;color:var(--muted);}
.deadline-days{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
/* ── Summary strip ── */
.summary-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px;}
.strip-item{background:var(--card);padding:16px 20px;text-align:center;}
.strip-val{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.3px;}
.strip-label{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px;}
/* ══════════════════════════════════════════════
TABLES — calm, hover-only stripe, no chrome
═══════════════════════════════════════════════ */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:var(--bg);padding:12px 16px;text-align:left;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.3px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:12px 16px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:var(--bg-hover);}
.empty-row td{text-align:center;color:var(--muted);padding:40px;font-size:13px;}
.table-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--muted);font-size:13px;}
.td-primary{font-size:13px;font-weight:500;color:var(--text);line-height:1.4;}
.td-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.td-meta{font-size:12px;color:var(--text-2);}
.row-muted td{opacity:.55;}
.text-red{color:var(--red);font-weight:600;}
/* ══════════════════════════════════════════════
BADGES & CHIPS — pastel-bg + saturated-text
═══════════════════════════════════════════════ */
.badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.1px;display:inline-block;white-space:nowrap;}
.badge-green{background:var(--green-light);color:var(--green);}
.badge-blue{background:var(--accent-light);color:var(--accent);}
.badge-yellow{background:var(--yellow-light);color:var(--yellow);}
.badge-red{background:var(--red-light);color:var(--red);}
.badge-purple{background:var(--purple-light);color:var(--purple);}
.badge-gray{background:var(--bg-hover);color:var(--muted);}
.badge-teal{background:var(--teal-light);color:var(--teal);}
.badge-orange{background:var(--orange-light);color:var(--orange);}
.person-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap;}
.person-chip.pm{background:var(--purple-light);color:var(--purple);}
.person-chip.pmo{background:var(--teal-light);color:var(--teal);}
.chip-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.65;}
.skill-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;background:var(--accent2-light);color:var(--accent2);border:1px solid var(--accent2);margin:2px;}
.skill-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.action-cell{display:flex;gap:4px;flex-wrap:nowrap;}
.result-count-inline{font-size:11px;color:var(--muted);font-family:var(--mono);}
/* ══════════════════════════════════════════════
PROGRESS
═══════════════════════════════════════════════ */
.progress-row{display:flex;align-items:center;gap:8px;}
.progress-bar{background:var(--border);border-radius:4px;height:6px;overflow:hidden;flex:1;min-width:70px;}
.progress-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.progress-pct{font-size:11px;font-family:var(--mono);color:var(--muted);width:32px;text-align:right;font-weight:600;}
/* ══════════════════════════════════════════════
ACCESS BANNER
═══════════════════════════════════════════════ */
.access-banner{border-radius:var(--r-md);padding:11px 16px;font-size:12.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.access-banner.full{background:var(--green-light);border:1px solid var(--green);color:var(--green);}
.access-banner.limited{background:var(--yellow-light);border:1px solid var(--yellow);color:var(--yellow);}
/* ══════════════════════════════════════════════
KANBAN
═══════════════════════════════════════════════ */
.kanban-controls{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap;}
.kanban{display:flex;flex-direction:column;gap:0;margin-bottom:22px;}
.kanban-project-block{margin-bottom:26px;}
.kanban-project-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--border-light);padding:18px 22px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.kanban-project-card-main{flex:1;min-width:0;}
.kanban-project-card-title{font-size:14px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;}
.kanban-project-card-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;color:var(--muted);}
.kanban-project-card-meta span{display:flex;align-items:center;gap:4px;}
.kanban-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:120px;padding-top:2px;}
.kanban-progress-bar{width:120px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.kanban-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--info),var(--teal));}
.kanban-cols{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:14px;background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);padding:16px;}
.kanban-col{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--r-md);padding:14px;min-height:200px;}
.kanban-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-light);}
.kanban-title{font-size:12.5px;font-weight:700;}
.kanban-count{background:var(--card);color:var(--muted);font-size:12px;padding:2px 9px;border-radius:10px;border:1px solid var(--border);font-weight:600;}
.task-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;transition:all .15s cubic-bezier(.4,0,.2,1);}
.task-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
/* Overdue task card — static red border-left as a11y fallback when motion is reduced */
.task-card.task-card-overdue{border-color:#fca5a5;border-left:3px solid var(--danger,#dc2626);background:linear-gradient(135deg,var(--red-light),var(--surface));box-shadow:0 0 0 1px rgba(239,68,68,.1),var(--shadow-xs);}
.task-card.task-card-overdue:hover{border-color:var(--danger);box-shadow:0 0 0 2px rgba(239,68,68,.15),var(--shadow-md);}
.overdue-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--danger);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);padding:1px 7px;border-radius:10px;white-space:nowrap;}
@media (prefers-reduced-motion: no-preference){.overdue-badge{animation:overduePulse 2s ease-in-out infinite;}}
@keyframes overduePulse{0%,100%{opacity:1}50%{opacity:.7}}
.task-dates.overdue-date{color:var(--danger);}
.task-dates.overdue-date svg{color:var(--danger);}
.overdue-days{font-weight:600;color:var(--danger);}
[data-theme="dark"] .task-card.task-card-overdue{background:linear-gradient(135deg,rgba(239,68,68,.08),var(--card));border-color:rgba(252,165,165,.3);}
[data-theme="dark"] .task-card.task-card-overdue:hover{border-color:rgba(252,165,165,.5);}
[data-theme="dark"] .overdue-badge{color:#fca5a5;background:rgba(239,68,68,.15);border-color:rgba(252,165,165,.3);}
[data-theme="dark"] .task-dates.overdue-date{color:#fca5a5;}
[data-theme="dark"] .task-dates.overdue-date svg{color:#fca5a5;}
[data-theme="dark"] .overdue-days{color:#fca5a5;}
.task-title{font-size:12.5px;font-weight:600;margin-bottom:8px;line-height:1.4;color:var(--text);}
.task-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.task-proj{font-size:10.5px;color:var(--accent2);font-weight:500;}
.task-dates{font-size:12px;line-height:1.35;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:4px;}
.task-actions{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;}
.task-assignee{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border-light);}
.task-avatar{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--surface);flex-shrink:0;}
.task-assignee-name{font-size:11px;font-weight:500;color:var(--text-2);}
/* ══════════════════════════════════════════════
TEAM
═══════════════════════════════════════════════ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);}
.team-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.team-card-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;}
.team-avatar{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--surface);flex-shrink:0;box-shadow:0 3px 10px rgba(79,70,229,.25);}
.team-name{font-size:14px;font-weight:700;color:var(--text);}
.team-role{font-size:11.5px;color:var(--muted);margin-top:2px;}
.team-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);}
.team-stat{text-align:center;padding:8px 4px;background:var(--bg);border-radius:8px;}
.team-stat-val{font-size:20px;font-weight:700;font-family:var(--mono);}
.team-stat-label{font-size:12px;line-height:1.3;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px;}
.team-cap-bar{margin-top:12px;}
.team-cap-label{font-size:11px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;font-weight:500;}
.team-score-row{display:flex;align-items:center;gap:7px;margin-top:10px;}
.team-score-stars{display:flex;gap:2px;}
.team-score-val{font-size:12px;font-weight:700;font-family:var(--mono);}
.team-score-label{font-size:10.5px;color:var(--muted);}
/* ══════════════════════════════════════════════
STARS & SCORES
═══════════════════════════════════════════════ */
.stars{display:inline-flex;gap:2px;}
.star{font-size:13px;}
.star.on{color:var(--yellow);}
.star.off{color:var(--border);}
.score-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.score-pill.s5{background:var(--green-light);color:var(--success);}
.score-pill.s4{background:var(--accent-light);color:var(--info);}
.score-pill.s3{background:var(--yellow-light);color:var(--yellow);}
.score-pill.s2{background:var(--orange-light);color:var(--warning);}
.score-pill.s1{background:var(--red-light);color:var(--danger);}
/* ══════════════════════════════════════════════
EVAL CARDS
═══════════════════════════════════════════════ */
.eval-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-xs);}
.eval-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px;}
.eval-category{font-size:12.5px;font-weight:700;color:var(--text);}
.eval-meta{font-size:10.5px;color:var(--muted);margin-top:4px;font-family:var(--mono);}
.eval-notes{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;font-style:italic;border-top:1px solid var(--border-light);padding-top:6px;}
.eval-actions{display:flex;gap:4px;margin-top:8px;justify-content:flex-end;}
.appraisal-summary{background:linear-gradient(135deg,var(--bg),var(--bg-hover));border:1px solid var(--border);border-radius:var(--r-md);padding:16px;margin-bottom:16px;}
.appraisal-title{font-size:12.5px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
.appraisal-avg{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--accent);}
.cat-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.cat-bar-label{font-size:11px;color:var(--muted);width:130px;flex-shrink:0;}
.cat-bar-track{flex:1;background:var(--border);border-radius:4px;height:7px;overflow:hidden;}
.cat-bar-fill{height:100%;border-radius:4px;}
.cat-bar-val{font-size:11px;font-family:var(--mono);font-weight:700;width:28px;text-align:right;color:var(--text);}
/* ══════════════════════════════════════════════
SCORE PICKER
═══════════════════════════════════════════════ */
.score-picker{display:flex;gap:8px;margin-top:8px;}
.score-btn{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;}
.score-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.score-btn.selected{border-color:var(--yellow);background:var(--yellow-light);color:var(--yellow);}
.score-labels{display:flex;gap:8px;margin-top:5px;}
.score-label-item{width:40px;font-size:9.5px;color:var(--muted);text-align:center;}
/* ══════════════════════════════════════════════
TOAST
═══════════════════════════════════════════════ */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:13px;display:flex;align-items:center;gap:9px;z-index:300;transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg);min-width:220px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-color:#86efac;color:var(--success);background:var(--green-light);}
.toast.error{border-color:#fca5a5;color:var(--danger);background:var(--red-light);}
/* ══════════════════════════════════════════════
MODAL
═══════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:100;animation:overlayIn .18s ease both;}
.modal-overlay.open{display:flex;}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;width:520px;max-width:min(92vw,520px);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalIn .22s cubic-bezier(.16,1,.3,1);}
.modal-wide{width:680px;max-width:min(92vw,680px);}
body.modal-open{overflow:hidden;}
/* Type tab buttons in task modal */
.type-tab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font);}
.type-tab:hover{border-color:var(--accent);color:var(--accent);}
.type-tab.active{background:var(--accent);border-color:var(--accent);color:var(--surface);box-shadow:0 2px 8px rgba(79,70,229,.3);}
#typeTab-Epic.active{background:var(--purple);border-color:var(--purple);}
#typeTab-Subtask.active{background:var(--green);border-color:var(--green);}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-wide{width:680px;}
.modal-title{font-size:18px;font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:10px;color:var(--text);letter-spacing:-.3px;}
.modal-actions{display:flex;gap:10px;margin-top:24px;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--border-light);}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-header .modal-title{margin-bottom:0;}
.modal-body{margin-bottom:0;}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light);}
.modal-close{background:none;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-sm);transition:all .12s;flex-shrink:0;padding:0;}
.modal-close:hover{background:var(--bg-hover);color:var(--text);}
.modal-close-injected{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.04);}
.modal-close-injected:hover{background:rgba(0,0,0,.08);}
[data-theme="dark"] .modal-close-injected{background:rgba(255,255,255,.06);}
[data-theme="dark"] .modal-close-injected:hover{background:rgba(255,255,255,.10);color:var(--text);}
/* Required field indicator + inline error */
.form-label.req::after,label.req::after{content:' *';color:var(--red);font-weight:700;}
.form-input.has-error,.form-select.has-error,.form-textarea.has-error{border-color:var(--red) !important;background:rgba(239,68,68,.04);}
.form-error{display:block;color:var(--red);font-size:11px;margin-top:4px;font-weight:500;}
/* Button loading state */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none;opacity:.85;}
.btn.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid currentColor;border-radius:50%;border-right-color:transparent;animation:btnSpin .6s linear infinite;color:var(--surface);}
.btn-ghost.is-loading::after,.btn-secondary.is-loading::after{color:var(--text);}
@keyframes btnSpin{to{transform:rotate(360deg);}}
/* Focus ring (accessibility) */
.form-input:focus,.form-select:focus,.form-textarea:focus,.search-input:focus,.filter-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.18);}
.btn:focus-visible,.sub-tab:focus-visible,.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Global top loading bar (shows during any fetch via api()) */
#globalLoadingBar{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;z-index:9999;opacity:0;pointer-events:none;transition:opacity .15s;}
#globalLoadingBar.active{opacity:1;animation:loadingBarSweep 1.2s linear infinite;}
@keyframes loadingBarSweep{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* Page skeleton (centered spinner) for async page first-load */
.page-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--muted);gap:12px;}
.page-skeleton .spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
.page-skeleton-text{font-size:12.5px;color:var(--muted);}
@keyframes spin{to{transform:rotate(360deg);}}
/* ══════════════════════════════════════════════
AI WIDGET — floating quick-chat
═══════════════════════════════════════════════ */
#aiWidgetFab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--purple));color:var(--surface);display:flex;align-items:center;justify-content:center;z-index:90;box-shadow:0 8px 24px rgba(99,102,241,.32);transition:all .2s cubic-bezier(.4,0,.2,1);}
#aiWidgetFab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(99,102,241,.42);}
#aiWidgetFab:active{transform:scale(.96);}
#aiWidgetFab svg{width:24px;height:24px;}
#aiWidgetFab.hidden{display:none;}
.ai-widget{position:fixed;bottom:96px;right:24px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;z-index:91;overflow:hidden;transform:translateY(12px) scale(.96);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.16,1,.3,1);}
.ai-widget.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.aiw-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-light);background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));}
.aiw-title{display:flex;align-items:center;gap:10px;min-width:0;}
.aiw-title-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--purple));color:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.aiw-title-icon svg{width:16px;height:16px;}
.aiw-title-main{font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:-.1px;}
.aiw-title-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.aiw-actions{display:flex;gap:4px;flex-shrink:0;}
.aiw-action-btn{width:30px;height:30px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.aiw-action-btn:hover{color:var(--text);background:var(--bg-hover);}
.aiw-action-btn svg{width:14px;height:14px;}
.aiw-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.aiw-log::-webkit-scrollbar{width:5px;}
.aiw-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.aiw-intro{padding:6px 4px;}
.aiw-intro-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.aiw-intro-sub{font-size:11.5px;color:var(--muted);margin-bottom:12px;}
.aiw-suggests{display:flex;flex-direction:column;gap:6px;}
.aiw-suggest{text-align:left;border:1px solid var(--border);background:var(--card);padding:9px 12px;border-radius:10px;font-family:var(--font);font-size:12.5px;color:var(--text);cursor:pointer;transition:all .12s;}
.aiw-suggest:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}
.aiw-msg{padding:10px 13px;border-radius:12px;max-width:88%;font-size:13px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;}
.aiw-user{background:var(--accent-light);color:var(--accent);align-self:flex-end;border-bottom-right-radius:4px;font-weight:500;}
.aiw-ai{background:var(--bg);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border-light);}
.aiw-ai-error{background:var(--red-light);color:var(--red);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid rgba(220,38,38,.18);}
.aiw-ai-loading{background:var(--bg);color:var(--muted);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border-light);font-style:italic;}
.aiw-ai-loading::after{content:'';display:inline-block;width:8px;height:8px;margin-left:6px;border:1.5px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;}
.aiw-input-row{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border-light);background:var(--card);}
#aiWidgetInput{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-family:var(--font);font-size:13px;color:var(--text);outline:none;transition:all .12s;}
#aiWidgetInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
#aiWidgetSendBtn{width:36px;height:36px;flex-shrink:0;border:none;background:linear-gradient(135deg,var(--accent),var(--purple));color:var(--surface);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
#aiWidgetSendBtn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.3);}
#aiWidgetSendBtn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
#aiWidgetSendBtn svg{width:14px;height:14px;}
[data-theme="dark"] .aiw-header{background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(139,92,246,.06));}
@media (max-width:520px){
.ai-widget{right:8px;left:8px;width:auto;bottom:80px;height:calc(100vh - 110px);max-height:none;}
#aiWidgetFab{bottom:16px;right:16px;width:52px;height:52px;}
}
.confirm-box{background:var(--surface);border-radius:var(--r-xl);padding:32px;width:380px;text-align:center;box-shadow:var(--shadow-xl);}
.confirm-icon{font-size:40px;margin-bottom:12px;}
.confirm-title{font-size:16px;font-weight:700;margin-bottom:8px;}
.confirm-msg{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6;}
.confirm-actions{display:flex;gap:8px;justify-content:center;}
/* ══════════════════════════════════════════════
DRAWER
═══════════════════════════════════════════════ */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(3px);display:none;z-index:90;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;right:0;width:540px;height:100vh;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:91;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:-8px 0 32px rgba(15,23,42,.08);}
.drawer.open{transform:translateX(0);}
.drawer-header{padding:22px 24px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;}
.drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px 6px;margin-left:auto;transition:all .2s;flex-shrink:0;border-radius:8px;}
.drawer-close:hover{color:var(--text);background:var(--bg);}
.drawer-body{flex:1;overflow-y:auto;padding:22px 24px;}
.drawer-body::-webkit-scrollbar{width:4px;}
.drawer-body::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px;}
.drawer-section{margin-bottom:24px;}
.drawer-section-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:6px;}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-light);}
.detail-row:last-child{border-bottom:none;}
.detail-label{font-size:12.5px;color:var(--muted);}
.detail-value{font-size:12.5px;font-weight:600;text-align:right;color:var(--text);}
.drawer-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
.drawer-tab{padding:10px 18px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .18s;white-space:nowrap;}
.drawer-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.drawer-tab:hover{color:var(--text);}
.tab-content{display:none;}
.tab-content.active{display:block;animation:pageIn .15s ease both;}
.pm-pmo-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.pm-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;}
.pm-card-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.pm-card.is-pm .pm-card-type{color:var(--purple);}
.pm-card.is-pmo .pm-card-type{color:var(--teal);}
.pm-avatar-sm{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--surface);margin-bottom:9px;}
.pm-card.is-pm .pm-avatar-sm{background:linear-gradient(135deg,var(--purple),var(--accent));}
.pm-card.is-pmo .pm-avatar-sm{background:linear-gradient(135deg,var(--teal),var(--accent2));}
.pm-name{font-size:13px;font-weight:700;}
.pm-role{font-size:11px;color:var(--muted);}
.mini-task-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 13px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:all .15s;}
.mini-task-item:hover{border-color:rgba(79,70,229,.25);background:var(--purple-light);}
.mini-task-title{font-size:12.5px;font-weight:500;flex:1;}
.mini-task-meta{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.mini-risk-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 13px;margin-bottom:8px;}
.mini-risk-title{font-size:12.5px;font-weight:500;margin-bottom:5px;}
.mini-risk-meta{display:flex;gap:5px;flex-wrap:wrap;}
/* ── Team member drawer ── */
.member-proj-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;transition:all .15s;}
.member-proj-card:hover{border-color:rgba(79,70,229,.25);}
.member-proj-title{font-size:12.5px;font-weight:700;margin-bottom:7px;}
.member-proj-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.member-task-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;transition:all .15s;}
.member-task-row:hover{border-color:rgba(79,70,229,.25);background:var(--purple-light);}
.member-task-title{font-size:12px;font-weight:500;flex:1;}
.member-task-meta{display:flex;gap:5px;align-items:center;flex-shrink:0;}
/* ══════════════════════════════════════════════
TASK HISTORY / TIMELINE
═══════════════════════════════════════════════ */
.history-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:20px;}
.history-form-title{font-size:12.5px;font-weight:700;margin-bottom:14px;color:var(--accent2);}
.timeline{position:relative;padding-left:2px;}
.timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),transparent);}
.timeline-item{position:relative;padding-left:38px;margin-bottom:20px;}
.timeline-dot{position:absolute;left:7px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);z-index:1;box-shadow:0 0 0 2px var(--accent);}
.timeline-dot.has-obstacle{background:var(--yellow);box-shadow:0 0 0 2px var(--yellow);}
.timeline-date{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-bottom:6px;font-weight:500;}
.timeline-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-xs);}
.timeline-update{font-size:12.5px;line-height:1.6;margin-bottom:8px;color:var(--text);}
.timeline-by{font-size:10.5px;color:var(--accent2);font-family:var(--mono);font-weight:600;}
.obstacle-box,.solution-box{margin-top:10px;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.5;}
.obstacle-box{background:var(--red-light);border:1px solid #fca5a5;color:var(--danger);}
.solution-box{background:var(--green-light);border:1px solid #86efac;color:var(--success);}
.obstacle-label,.solution-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;opacity:.75;}
.timeline-actions{display:flex;justify-content:flex-end;margin-top:8px;}
/* ── Activity Log ────────────────────────────────────────── */
.activity-log-wrap{display:flex;flex-direction:column;gap:0;}
.activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--bg);}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.activity-icon.created{background:var(--accent-light);color:var(--info);}
.activity-icon.updated{background:var(--yellow-light);color:var(--yellow);}
.activity-icon.status{background:var(--green-light);color:var(--success);}
.activity-icon.comment{background:var(--purple-light);color:var(--purple);}
.activity-icon.deleted{background:var(--red-light);color:var(--danger);}
.activity-body{flex:1;min-width:0;}
.activity-desc{font-size:12px;line-height:1.5;color:var(--text);}
.activity-desc strong{color:var(--accent2);font-weight:600;}
.activity-meta{font-size:10.5px;color:var(--muted);margin-top:2px;font-family:var(--mono);}
/* ── Project File Upload ─────────────────────────────────── */
.proj-file-zone{border:1.5px dashed #c7d2fe;border-radius:9px;padding:12px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;transition:all .2s;background:var(--surface);margin-top:4px;}
.proj-file-zone:hover,.proj-file-zone.drag-over{border-color:var(--accent);background:var(--purple-light);}
.proj-file-zone.has-file{border-style:solid;border-color:var(--green);background:var(--green-light);}
.proj-file-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.proj-file-chip{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:500;color:var(--text);}
.proj-file-chip a{color:var(--accent);text-decoration:none;font-size:11px;margin-left:auto;}
.proj-file-chip a:hover{text-decoration:underline;}
.proj-file-remove{margin-left:4px;color:var(--muted);cursor:pointer;font-size:12px;background:none;border:none;padding:0 2px;}
.no-history{text-align:center;color:var(--muted);font-size:13px;padding:32px;}
/* ══════════════════════════════════════════════
AI PANEL
═══════════════════════════════════════════════ */
.ai-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-sm);}
.ai-header{background:linear-gradient(90deg,var(--bg),var(--bg-hover));padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.chat-messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;background:var(--bg);min-height:0;}
.chat-messages::-webkit-scrollbar{width:5px;}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
.msg{display:flex;gap:10px;max-width:88%;}
.msg.user{align-self:flex-end;flex-direction:row-reverse;}
.msg-bubble{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 17px;font-size:13.5px;line-height:1.7;box-shadow:var(--shadow-xs);}
.msg.user .msg-bubble{background:linear-gradient(135deg,var(--accent-light),var(--accent-light));border-color:#bfdbfe;color:var(--info);}
.msg-bubble.error-bubble{border-color:#fca5a5;background:var(--red-light);}
.error-detail{font-size:11px;color:var(--red);margin-top:7px;font-family:var(--mono);background:var(--surface);border-radius:6px;padding:7px 9px;line-height:1.5;}
.msg-avatar{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:3px;background:linear-gradient(135deg,var(--accent-light),var(--accent-light));border:1px solid #c7d2fe;}
.msg.user .msg-avatar{background:linear-gradient(135deg,var(--accent-light),#bfdbfe);border-color:#93c5fd;}
.chat-input-row{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:9px;background:var(--surface);flex-shrink:0;}
.chat-input{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:10px 14px;outline:none;resize:none;transition:all .2s;max-height:120px;}
.chat-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.chat-input::placeholder{color:var(--muted-light);}
.quick-prompts{padding:9px 16px;display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;}
.qp{background:var(--surface);border:1.5px solid var(--border);color:var(--muted);font-size:10.5px;font-weight:500;padding:4px 10px;border-radius:20px;cursor:pointer;transition:all .18s;}
.qp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.ai-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.api-key-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:20px;border-top:3px solid var(--accent);box-shadow:var(--shadow-sm);}
.api-key-status{font-size:12.5px;margin:8px 0;min-height:18px;}
.api-key-status.ok{color:var(--green);}
.api-key-status.err{color:var(--red);}
.api-key-input-row{display:flex;gap:9px;margin-bottom:8px;}
/* ── AI Upload Zone ─────────────────────────────────────── */
.upload-zone-wrap{padding:8px 16px 8px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;}
.upload-zone{border:1.5px dashed #c7d2fe;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;background:var(--surface);min-height:46px;}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--purple-light);}
.upload-zone.has-file{border-style:solid;border-color:var(--green);background:var(--green-light);}
.upload-zone-icon{width:30px;height:30px;border-radius:8px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;}
.upload-zone.has-file .upload-zone-icon{background:var(--green-light);}
.upload-zone-text{flex:1;min-width:0;}
.upload-zone-label{font-size:11.5px;font-weight:600;color:var(--text);}
.upload-zone-sub{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-ext-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;}
.file-ext-badge.pdf{background:var(--red-light);color:var(--danger);}
.file-ext-badge.image{background:var(--yellow-light);color:var(--yellow);}
.file-ext-badge.text{background:var(--accent-light);color:var(--info);}
.upload-clear{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1;}
.upload-clear:hover{border-color:var(--danger);color:var(--danger);background:var(--red-light);}
/* ── Role-specific AI quick actions ────────────────────── */
.role-prompts{padding:7px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);}
.role-prompts-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:4px;margin-bottom:6px;}
.role-prompts-btns{display:flex;flex-wrap:wrap;gap:5px;}
.rqp{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;border:1.5px solid transparent;transition:all .18s;white-space:nowrap;}
.rqp.rqp-product{background:var(--purple-light);border-color:#d8b4fe;color:var(--purple);}
.rqp.rqp-product:hover{background:var(--purple);color:var(--surface);border-color:var(--purple);}
.rqp.rqp-pm{background:var(--accent-light);border-color:#93c5fd;color:var(--info);}
.rqp.rqp-pm:hover{background:var(--info);color:var(--surface);border-color:var(--info);}
.rqp.rqp-pmo{background:var(--green-light);border-color:#86efac;color:var(--success);}
.rqp.rqp-pmo:hover{background:var(--success);color:var(--surface);border-color:var(--success);}
/* ── Doc analysis quick prompts ────────────────────────── */
.doc-prompts{padding:7px 14px;background:linear-gradient(90deg,var(--purple-light),var(--accent-light));border-bottom:1px solid var(--accent-light);flex-shrink:0;display:none;flex-wrap:wrap;gap:5px;align-items:center;}
.doc-prompts.show{display:flex;}
.doc-prompts-label{font-size:9.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-right:2px;white-space:nowrap;}
.dqp{background:var(--surface);border:1.5px solid #c7d2fe;color:var(--accent-hover);font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;cursor:pointer;transition:all .18s;white-space:nowrap;}
.dqp:hover{background:var(--accent-hover);color:var(--surface);border-color:var(--accent-hover);}
/* ── Chat file preview chip (in message) ───────────────── */
.file-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:7px;}
.file-chip-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--accent-light);flex-shrink:0;}
/* ── Download actions bar ───────────────────────────────── */
.msg-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);}
.dl-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:7px;font-size:10.5px;font-weight:600;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .15s;}
.dl-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--purple-light);}
.dl-btn.primary-dl{border-color:var(--accent);color:var(--accent);background:var(--purple-light);}
.dl-btn.primary-dl:hover{background:var(--accent);color:var(--surface);}
/* ── AI Tabs ─────────────────────────────────────────────── */
.ai-tab-btns{display:flex;gap:3px;align-items:center;}
.ai-tab-btn{padding:4px 10px;border-radius:7px;border:1.5px solid transparent;background:transparent;color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;}
.ai-tab-btn:hover{background:var(--accent-light);color:var(--accent);}
.ai-tab-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
/* ── AI Sub-header (History / Prompts tabs) ─────────────── */
.ai-sub-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--text);}
/* ── History list items ─────────────────────────────────── */
.ai-history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:10px;}
.ai-history-item:hover{border-color:var(--accent);box-shadow:var(--shadow-xs);}
.ai-history-item-body{flex:1;min-width:0;}
.ai-history-item-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
.ai-history-item-meta{font-size:10.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;}
.ai-history-item-del{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.ai-history-item-del:hover{border-color:var(--red);color:var(--red);background:var(--red-light);}
/* ── Custom Prompt items ────────────────────────────────── */
.ai-prompt-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;}
.ai-prompt-item-body{flex:1;min-width:0;}
.ai-prompt-item-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.ai-prompt-item-content{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ai-prompt-item-actions{display:flex;gap:5px;flex-shrink:0;}
.ai-prompt-use{padding:4px 12px;border-radius:7px;border:1.5px solid var(--accent);background:var(--accent-light);color:var(--accent);font-size:10.5px;font-weight:600;cursor:pointer;transition:all .15s;}
.ai-prompt-use:hover{background:var(--accent);color:var(--surface);}
.ai-prompt-edit{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ai-prompt-edit:hover{border-color:var(--accent);color:var(--accent);}
.ai-prompt-del{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ai-prompt-del:hover{border-color:var(--red);color:var(--red);background:var(--red-light);}
/* ══════════════════════════════════════════════
PROFILE
═══════════════════════════════════════════════ */
.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;max-width:520px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.profile-header{display:flex;gap:18px;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.profile-big-avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--surface);flex-shrink:0;box-shadow:0 4px 16px rgba(79,70,229,.3);}
.pw-section{border-top:1px solid var(--border-light);padding-top:20px;margin-top:6px;}
.pw-section-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-bottom:14px;}
/* ══════════════════════════════════════════════
GANTT
═══════════════════════════════════════════════ */
.gantt-project-block{margin-bottom:28px;}
.gantt-project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--accent2);padding:16px 20px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.gantt-project-card-main{flex:1;min-width:0;}
.gantt-project-card-title{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;}
.gantt-project-card-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;color:var(--muted);}
.gantt-project-card-meta span{display:flex;align-items:center;gap:4px;}
.gantt-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:130px;}
.gantt-progress-bar{width:130px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.gantt-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--teal));}
.gantt-project-block{margin-bottom:28px;}
.gantt-project-card{background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-light) 100%);border:1.5px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--accent2);padding:16px 22px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.gantt-project-card-main{flex:1;min-width:0;}
.gantt-project-card-title{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;}
.gantt-project-card-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:9px;font-size:11.5px;color:var(--muted);}
.gantt-project-card-meta span{display:flex;align-items:center;gap:4px;}
.gantt-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:130px;padding-top:2px;}
.gantt-progress-bar{width:130px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.gantt-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--info),var(--teal));}
.gantt-wrap{background:var(--surface);border:1.5px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.gantt-header-row{background:var(--bg);}
.gantt-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.gantt-proj-title{font-size:14px;font-weight:700;}
.gantt-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.gantt-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.gantt-legend-dot{width:10px;height:10px;border-radius:3px;}
.gantt-area{overflow-x:auto;padding:0 0 4px;}
.gantt-area::-webkit-scrollbar{height:5px;}
.gantt-area::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
.gantt-table{min-width:100%;border-collapse:collapse;}
.gantt-row-label{padding:9px 16px;font-size:11.5px;font-weight:500;white-space:nowrap;min-width:160px;border-right:1px solid var(--border);vertical-align:middle;}
.gantt-row-label-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.gantt-header-row th{background:var(--bg);padding:7px 0;font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border);}
.gantt-cell{padding:5px 2px;vertical-align:middle;position:relative;}
.gantt-bar{height:24px;border-radius:6px;position:relative;min-width:4px;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;color:var(--surface);white-space:nowrap;overflow:hidden;cursor:default;transition:opacity .15s;}
.gantt-bar:hover{opacity:.85;}
.gantt-bar.todo{background:var(--text-muted);}
.gantt-bar.inprog{background:linear-gradient(90deg,var(--info),var(--accent));}
.gantt-bar.done{background:linear-gradient(90deg,var(--green),var(--teal));}
.gantt-bar.overdue{background:linear-gradient(90deg,var(--danger),var(--warning));}
.gantt-bar.projbar{background:linear-gradient(90deg,var(--purple),var(--pink));}
.gantt-bar.epicbar{background:linear-gradient(90deg,var(--accent),var(--purple));height:20px;border-radius:4px;font-size:9.5px;}
.gantt-bar.subtaskbar{height:16px;border-radius:3px;font-size:9px;opacity:.9;}
.gantt-no-date{font-size:11px;color:var(--muted);padding:14px 18px;}
/* Task type badges */
.type-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;letter-spacing:.3px;flex-shrink:0;}
.type-badge.epic{background:var(--purple-light);color:var(--purple);border:1px solid #c4b5fd;}
.type-badge.task{background:var(--accent-light);color:var(--info);border:1px solid #93c5fd;}
.type-badge.subtask{background:var(--green-light);color:var(--success);border:1px solid #86efac;}
/* Gantt row styles by type */
.gantt-row-epic{background:rgba(99,102,241,.05);}
.gantt-row-subtask{background:rgba(16,185,129,.025);}
.gantt-label-epic{padding-left:24px;font-weight:700;font-size:11.5px;color:var(--purple);}
.gantt-label-task-under-epic{padding-left:40px;}
.gantt-label-subtask{padding-left:56px;font-size:10.5px;color:var(--muted);}
.gantt-collapse-btn{cursor:pointer;font-size:10px;margin-right:4px;transition:transform .15s;display:inline-block;}
/* ══════════════════════════════════════════════
AVAILABILITY
═══════════════════════════════════════════════ */
.avail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.avail-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.avail-kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;}
.avail-kpi.idle::after{background:linear-gradient(90deg,var(--green),var(--teal));}
.avail-kpi.busy::after{background:linear-gradient(90deg,var(--red),var(--pink));}
.avail-kpi.part::after{background:linear-gradient(90deg,var(--yellow),var(--orange));}
.avail-kpi.all::after{background:linear-gradient(90deg,var(--accent),var(--accent2));}
.avail-kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;}
.avail-kpi.idle .avail-kpi-icon{background:var(--green-light);}
.avail-kpi.busy .avail-kpi-icon{background:var(--red-light);}
.avail-kpi.part .avail-kpi-icon{background:var(--yellow-light);}
.avail-kpi.all .avail-kpi-icon{background:var(--accent-light);}
.avail-kpi-label{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.7px;}
.avail-kpi-val{font-size:30px;font-weight:700;font-family:var(--mono);margin:4px 0 2px;color:var(--text);}
.avail-kpi-sub{font-size:11px;color:var(--muted);}
.avail-timeline-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.avail-member-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--border-light);}
.avail-member-row:last-child{border-bottom:none;}
.avail-member-row:hover{background:var(--bg);}
.avail-label-cell{padding:12px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:4px;}
.avail-member-name{font-size:12.5px;font-weight:700;}
.avail-member-role{font-size:10.5px;color:var(--muted);}
.avail-bar-cell{padding:10px 12px;}
.avail-bar-track{height:28px;background:var(--green-light);border-radius:7px;position:relative;overflow:hidden;border:1px solid #bbf7d0;}
.avail-bar-segment{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;color:var(--surface);white-space:nowrap;overflow:hidden;transition:opacity .15s;}
.avail-bar-segment:hover{opacity:.8;z-index:2;}
.avail-bar-segment.seg-busy{background:linear-gradient(90deg,var(--info),var(--accent));}
.avail-bar-segment.seg-full{background:linear-gradient(90deg,var(--danger),var(--warning));}
.avail-bar-segment.seg-idle{background:rgba(16,185,129,.25);color:var(--success);}
.avail-idle-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;margin-top:4px;}
.avail-idle-pill.idle{background:var(--green-light);color:var(--success);}
.avail-idle-pill.busy{background:var(--red-light);color:var(--danger);}
.avail-idle-pill.part{background:var(--yellow-light);color:var(--yellow);}
.avail-date-header{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--border);background:var(--bg);}
.avail-date-ticks{padding:7px 12px;position:relative;height:30px;}
.avail-date-tick{position:absolute;font-size:9px;color:var(--muted);transform:translateX(-50%);white-space:nowrap;font-weight:600;}
.suggest-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-xs);transition:all .18s;}
.suggest-card:hover{border-color:rgba(79,70,229,.3);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.suggest-card.urgent{border-color:var(--orange-light);background:var(--orange-light);}
.suggest-avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--surface);flex-shrink:0;box-shadow:0 3px 8px rgba(79,70,229,.25);}
.suggest-info{flex:1;}
.suggest-name{font-size:13.5px;font-weight:700;}
.suggest-detail{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.6;}
.avail-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.avail-legend{display:flex;gap:12px;align-items:center;margin-left:auto;flex-wrap:wrap;}
.avail-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.avail-legend-dot{width:10px;height:10px;border-radius:3px;}
.skill-filter-btn{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;font-family:var(--font);}
.skill-filter-btn:hover,.skill-filter-btn.active{border-color:var(--accent2);background:var(--accent2-light);color:var(--accent2);}
/* ══════════════════════════════════════════════
EMPTY STATE
═══════════════════════════════════════════════ */
.empty-state{text-align:center;padding:48px 24px;color:var(--muted);}
.empty-state-icon{font-size:40px;margin-bottom:12px;filter:grayscale(30%);}
.empty-state-title{font-size:15px;font-weight:700;color:var(--text-2);margin-bottom:7px;}
.empty-state-sub{font-size:13px;line-height:1.7;max-width:300px;margin:0 auto;}
/* ══════════════════════════════════════════════
ROLES
═══════════════════════════════════════════════ */
.role-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.role-pill.admin{background:var(--pink-light);color:var(--pink);}
.role-pill.manager{background:var(--purple-light);color:var(--purple);}
.role-pill.pm{background:var(--accent-light);color:var(--info);}
.role-pill.pmo{background:var(--teal-light);color:var(--teal);}
.role-pill.developer{background:rgba(8,145,178,.1);color:var(--accent2);border:1px solid rgba(8,145,178,.3);}
.role-pill.viewer{background:var(--bg);color:var(--muted);border:1px solid var(--border);}
/* ══════════════════════════════════════════════
PAGINATION
═══════════════════════════════════════════════ */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg);flex-wrap:wrap;gap:8px;}
.pagination-info{font-size:11.5px;color:var(--muted);font-family:var(--mono);}
.pagination-controls{display:flex;align-items:center;gap:4px;}
.pg-btn{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.pg-btn:disabled{opacity:.35;cursor:not-allowed;}
.pg-btn.active{background:var(--accent);border-color:var(--accent);color:var(--surface);}
.pg-size{background:var(--surface);border:1.5px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--font);font-size:12px;padding:5px 8px;outline:none;cursor:pointer;}
.pg-size:focus{border-color:var(--accent);}
/* ══ KANBAN MOUSE DRAG ═══════════════════════════════════════ */
.task-card{cursor:grab;user-select:none;}
.task-card:active{cursor:grabbing;}
.kd-clone{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:rotate(2deg) scale(1.03);box-shadow:0 12px 32px rgba(79,70,229,.25);transition:none;border-radius:10px;background:var(--surface);}
.kd-drop-zone{border:2px dashed var(--accent)!important;background:rgba(79,70,229,.05)!important;transition:background .15s;}
.kd-drop-zone-done{border:2px dashed var(--green)!important;background:rgba(16,185,129,.05)!important;}
.kd-drop-zone-inprog{border:2px dashed var(--accent)!important;background:rgba(59,130,246,.05)!important;}
.kd-source{opacity:.3;}
/* ══ IMPORT TASKS PAGE ═══════════════════════════════════════ */
/* Import container & cards */
.import-container{max-width:960px;margin:0 auto;}
.import-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;}
.import-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;color:var(--accent);}
.import-card-title{font-size:15px;font-weight:700;color:var(--text);}
.import-card-desc{font-size:12px;color:var(--muted);margin-top:2px;}
/* Step bar */
.import-steps-bar{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px;padding:0 40px;}
.import-step-dot{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1;}
.import-step-dot span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:var(--bg);border:2px solid var(--border);color:var(--muted);transition:all .3s;}
.import-step-dot small{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;}
.import-step-dot.active span{background:var(--accent);border-color:var(--accent);color:var(--surface);}
.import-step-dot.active small{color:var(--accent);}
.import-step-dot.done span{background:var(--green);border-color:var(--green);color:var(--surface);}
.import-step-dot.done small{color:var(--green);}
.import-step-line{flex:1;height:2px;background:var(--border);margin:0 -4px;margin-bottom:18px;transition:background .3s;}
.import-step-line.done{background:var(--green);}
/* Drop zone */
.import-drop-zone{border:2px dashed var(--border);border-radius:var(--r-lg);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);}
.import-drop-zone:hover,.import-drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light);}
.import-drop-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
/* Column badges */
.import-col-badge{background:var(--bg);border:1px solid var(--border-light);border-radius:6px;padding:6px 10px;font-size:11.5px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.import-col-req{color:var(--red);font-weight:700;margin-right:2px;}
.import-col-hint{color:var(--muted);font-size:10px;}
/* Editable table */
.import-table-wrap{max-height:calc(100vh - 360px);overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);}
.import-table{width:100%;border-collapse:collapse;font-size:12px;}
.import-table thead{position:sticky;top:0;z-index:2;}
.import-table th{background:var(--bg-input,#f8fafc);padding:8px 10px;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border);white-space:nowrap;}
.import-table td{padding:4px 4px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
.import-table tr:hover td{background:var(--accent-light);}
.import-table tr.row-error td{background:rgba(220,38,38,.04);}
.import-table .import-cell-input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;font-size:12px;font-family:var(--font);color:var(--text);border-radius:4px;transition:all .15s;outline:none;box-sizing:border-box;}
.import-table .import-cell-input:hover{border-color:var(--border);}
.import-table .import-cell-input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 2px rgba(79,70,229,.1);}
.import-table .import-cell-select{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;font-size:12px;font-family:var(--font);color:var(--text);border-radius:4px;cursor:pointer;outline:none;appearance:auto;}
.import-table .import-cell-select:hover{border-color:var(--border);}
.import-table .import-cell-select:focus{border-color:var(--accent);background:var(--card);}
.import-table .import-row-num{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;width:32px;padding:4px 6px;}
.import-table .import-row-actions{width:32px;text-align:center;padding:4px;}
.import-row-del{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.import-row-del:hover{background:var(--red-light);color:var(--red);}
#importPreviewTable thead th{position:sticky;top:0;background:var(--text);color:var(--bg-hover);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;text-align:left;white-space:nowrap;}
#importPreviewTable tbody tr{border-bottom:1px solid var(--border-light);}
#importPreviewTable tbody tr:hover{background:var(--bg);}
#importPreviewTable tbody td{padding:8px 12px;color:var(--text);font-size:12.5px;vertical-align:middle;}
#importPreviewTable tbody tr.row-error{background:var(--red-light);}
#importPreviewTable tbody tr.row-error td{color:var(--danger);}
.import-progress-bar{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden;}
.import-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}
/* ══ PROJECT TREE PAGE ═══════════════════════════════════════════ */
.tree-project-block{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm);}
.tree-project-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;background:linear-gradient(135deg,var(--text) 0%,var(--text-2) 100%);user-select:none;transition:filter .15s;}
.tree-project-header:hover{filter:brightness(1.1);}
.tree-project-title{font-size:14px;font-weight:700;color:var(--bg-hover);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tree-project-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.tree-project-toggle{color:var(--text-muted);transition:transform .2s;flex-shrink:0;}
.tree-project-toggle.open{transform:rotate(90deg);}
.tree-project-body{padding:0;}
.tree-project-body.collapsed{display:none;}
.tree-project-stats{display:flex;gap:20px;padding:10px 18px;background:var(--bg);border-bottom:1px solid var(--border-light);flex-wrap:wrap;}
.tree-stat{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);}
.tree-stat strong{color:var(--text);font-weight:700;}
.tree-progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;width:80px;}
.tree-progress-fill{height:100%;border-radius:3px;transition:width .3s;}
/* Epic row */
.tree-epic{display:flex;align-items:flex-start;gap:0;padding:10px 18px;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--purple-light);transition:background .12s;isolation:isolate;}
.tree-epic:hover{background:var(--purple-light);}
.tree-epic-toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--purple);flex-shrink:0;margin-right:4px;transition:transform .18s;}
.tree-epic-toggle.open{transform:rotate(90deg);}
.tree-epic-icon{width:22px;height:22px;background:var(--purple);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;position:relative;z-index:1;}
.tree-epic-body{flex:1;min-width:0;}
.tree-epic-title{font-size:13px;font-weight:700;color:var(--purple);}
.tree-epic-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;}
.tree-epic-children{display:none;background:var(--purple-light);overflow:hidden;}
.tree-epic-children.open{display:block;}
/* Task row */
.tree-task{display:flex;align-items:flex-start;gap:0;padding:9px 18px 9px 54px;border-bottom:1px solid var(--bg-hover);background:var(--surface);transition:background .12s;isolation:isolate;}
.tree-task:hover{background:var(--bg);}
.tree-task-standalone{padding-left:18px;background:var(--surface);}
.tree-task-icon{width:18px;height:18px;background:var(--info);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;margin-top:0;position:relative;z-index:1;}
.tree-task-toggle{min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--info);flex-shrink:0;transition:transform .18s;}
.tree-task-toggle.open{transform:rotate(90deg);}
.tree-task-body{flex:1;min-width:0;}
.tree-task-title{font-size:12.5px;font-weight:600;color:var(--text);}
.tree-task-meta{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;}
.tree-task-children{display:none;}
.tree-task-children.open{display:block;}
/* Subtask row */
.tree-subtask{display:flex;align-items:flex-start;gap:0;padding:7px 18px 7px 90px;border-bottom:1px solid var(--bg);background:var(--bg);transition:background .12s;isolation:isolate;}
.tree-subtask:hover{background:var(--bg-hover);}
.tree-subtask-from-epic{padding-left:90px;}
.tree-subtask-icon{width:16px;height:16px;background:var(--green);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;margin-top:1px;position:relative;z-index:1;}
.tree-subtask-body{flex:1;min-width:0;}
.tree-subtask-title{font-size:12px;font-weight:500;color:var(--text);}
.tree-subtask-meta{display:flex;align-items:center;gap:5px;margin-top:2px;flex-wrap:wrap;}
/* No connector lines */
/* Empty state */
.tree-empty{padding:32px;text-align:center;color:var(--muted);font-size:13px;}
/* ══ GANTT/TREE TABS ══════════════════════════════════════════ */
.tab-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;background:transparent;border-radius:7px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;}
.tab-btn:hover{color:var(--text);background:rgba(0,0,0,.04);}
.tab-btn.tab-active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.tree-epic,.tree-task,.tree-subtask{display:flex;}
.tree-actions{display:none;align-items:center;gap:4px;flex-shrink:0;margin-left:8px;}
.tree-epic:hover .tree-actions,
.tree-task:hover .tree-actions,
.tree-subtask:hover .tree-actions{display:flex;}
.tree-actions .tree-action-btn{padding:3px 6px;line-height:1;}
/* ══ KNOWLEDGE BASE ══════════════════════════════════════════ */
#page-kb{margin:-24px -26px;width:calc(100% + 52px);}
.kb-layout{display:grid;grid-template-columns:220px 1fr;gap:0;width:100%;height:calc(100vh - 80px);overflow:hidden;}
/* Sidebar */
.kb-sidebar{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:0;}
.kb-sidebar-section{padding:14px 16px;border-bottom:1px solid var(--border-light);}
.kb-sidebar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;}
.kb-search{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:12.5px;font-family:var(--font);background:var(--bg);transition:all .2s;}
.kb-search:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.kb-filter-group{display:flex;flex-direction:column;gap:1px;}
.kb-filter{padding:7px 10px;font-size:12.5px;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);transition:all .15s;font-weight:500;display:flex;align-items:center;gap:8px;}
.kb-filter:hover{background:var(--accent-light);color:var(--accent);}
.kb-filter.active{background:var(--accent);color:var(--surface);font-weight:600;}
.kb-empty-small{font-size:11.5px;color:var(--muted-light);padding:8px 4px;}
.kb-pinned-item{padding:6px 10px;font-size:12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);display:flex;align-items:center;gap:6px;transition:all .15s;}
.kb-pinned-item:hover{background:var(--accent-light);color:var(--accent);}
/* Main area */
.kb-main{overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;}
.kb-tab-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px;}
.kb-tabs{display:flex;gap:4px;background:var(--bg);padding:3px;border-radius:var(--r-md);flex-shrink:0;}
.kb-tab{border:none;background:transparent;padding:7px 14px;font-size:12.5px;font-weight:600;font-family:var(--font);color:var(--muted);cursor:pointer;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap;}
.kb-tab:hover{color:var(--text);}
.kb-tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-xs);}
.kb-actions{display:flex;gap:8px;flex-shrink:0;}
/* Notes toolbar */
.kb-notes-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin-bottom:4px;gap:10px;flex-wrap:wrap;}
.kb-toolbar-left{display:flex;align-items:center;gap:8px;}
.kb-toolbar-right{display:flex;align-items:center;gap:6px;}
.kb-results-count{font-size:12px;color:var(--muted);font-weight:500;}
.kb-toolbar-label{font-size:11px;color:var(--muted-light);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.kb-toolbar-select{font-size:12px;padding:4px 8px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text);font-family:var(--font);cursor:pointer;transition:border-color .15s;}
.kb-toolbar-select:focus{outline:none;border-color:var(--accent);}
/* Pagination */
.kb-pagination{display:flex;justify-content:center;padding:20px 0 4px;}
.kb-pag-inner{display:flex;align-items:center;gap:4px;}
.kb-pag-btn{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);}
.kb-pag-btn:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.kb-pag-btn.active{background:var(--accent);color:var(--surface);border-color:var(--accent);}
.kb-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
.kb-pag-ellipsis{padding:0 4px;color:var(--muted);font-size:13px;}
/* Note cards */
.kb-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.kb-note-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all .18s;position:relative;}
.kb-note-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.kb-note-card .kb-card-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;}
.kb-card-cat-meeting{background:var(--purple-light);color:var(--purple);}
.kb-card-cat-decision{background:var(--yellow-light);color:var(--yellow);}
.kb-card-cat-technical{background:var(--accent2-light);color:var(--accent2);}
.kb-card-cat-general{background:var(--bg);color:var(--muted);}
.kb-note-card .kb-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.35;}
.kb-note-card .kb-card-preview{font-size:12.5px;color:var(--text-2);line-height:1.55;max-height:56px;overflow:hidden;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;}
.kb-note-card .kb-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid var(--border-light);font-size:11px;color:var(--muted);}
.kb-note-card .kb-card-tags{display:flex;gap:4px;flex-wrap:wrap;}
.kb-card-tag{background:var(--accent-light);color:var(--accent);padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;}
.kb-card-author{margin-left:6px;font-style:italic;color:var(--accent);font-weight:500;}
.kb-note-card .kb-pin-badge{position:absolute;top:10px;right:10px;color:var(--accent);}
/* Editor */
.kb-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border-light);}
.kb-editor-actions{display:flex;gap:8px;}
.kb-editor-form{display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto;}
.kb-title-input{width:100%;padding:10px 0;border:none;font-size:22px;font-weight:700;font-family:var(--font);color:var(--text);background:transparent;outline:none;}
.kb-title-input::placeholder{color:var(--muted-light);}
.kb-meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.kb-meta-select{max-width:200px;font-size:12.5px;padding:7px 10px;}
.kb-custom-select{position:relative;display:inline-block;}
.kb-custom-select-btn{display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;appearance:none;-webkit-appearance:none;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);white-space:nowrap;}
.kb-custom-select-btn:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.kb-csel-icon{width:14px;height:14px;flex-shrink:0;color:var(--accent);}
.kb-csel-chevron{width:10px;height:10px;flex-shrink:0;margin-left:auto;color:var(--muted);transition:transform .2s;}
.kb-custom-select.open .kb-csel-chevron{transform:rotate(180deg);}
.kb-custom-select-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow);z-index:100;overflow:hidden;}
.kb-custom-select.open .kb-custom-select-dropdown{display:block;}
.kb-csel-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12.5px;color:var(--text);transition:background .15s;}
.kb-csel-option:hover{background:var(--bg-hover);}
.kb-csel-option.active{background:rgba(79,70,229,.06);color:var(--accent);font-weight:600;}
.kb-csel-option .kb-csel-icon{color:var(--accent);}
.kb-meta-input{flex:1;min-width:140px;font-size:12.5px;padding:7px 10px;}
.kb-content-textarea{flex:1;width:100%;min-height:75vh;padding:14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--mono);font-size:13px;line-height:1.7;resize:vertical;background:var(--bg);transition:all .2s;box-sizing:border-box;}
.kb-content-textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.kb-backlinks{margin-top:10px;padding:14px;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border-light);}
.kb-backlinks-label{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;}
.kb-backlink-item{padding:5px 10px;font-size:12px;color:var(--accent);cursor:pointer;border-radius:var(--r-sm);transition:background .12s;font-weight:500;}
.kb-backlink-item:hover{background:var(--accent-light);}
/* AI menu dropdown */
.kb-ai-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:100;min-width:180px;padding:4px;overflow:hidden;}
.kb-ai-menu-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;border-radius:var(--r-sm);transition:all .12s;}
.kb-ai-menu-item:hover{background:var(--accent-light);color:var(--accent);}
.kb-ai-menu-item svg{flex-shrink:0;color:var(--muted);}
.kb-ai-menu-item:hover svg{color:var(--accent);}
/* Graph view — layout consolidated 2026-07-02.
Rules used to sit on a single flex row with space-between + wrap, which
collapsed into a 3–4-row stacked mess whenever `.kb-main` fell below the
~720 px threshold needed to fit info + all controls. Now the toolbar is a
vertical stack (info line on top, controls row below), and the controls
themselves stay in a single horizontal row with `overflow-x: auto`. */
.kb-graph-toolbar{
display:flex;
flex-direction:column;
align-items:stretch;
gap:6px;
margin-bottom:8px;
}
.kb-graph-info{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;}
.kb-graph-controls{
display:flex;
gap:4px;
align-items:center;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:2px; /* space so overflow scrollbar (when it appears) doesn't clip focus rings */
scrollbar-width:thin;
}
/* Compact WebKit scrollbar for the controls row on macOS/Windows */
.kb-graph-controls::-webkit-scrollbar{height:4px}
.kb-graph-controls::-webkit-scrollbar-thumb{background:var(--border-strong,var(--border));border-radius:2px}
/* On viewports wider than the KB sidebar + comfortable controls width we
can go back to a single info+controls row aligned right; keeps the older,
denser look on desktop while never producing the stacked-mess state. */
@media (min-width: 1100px){
.kb-graph-toolbar{
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.kb-graph-controls{overflow:visible;padding-bottom:0}
}
/* Legend — pill-style chips */
.kb-graph-legend{display:flex;gap:5px;padding:0 0 7px;flex-wrap:wrap;align-items:center;}
.kb-graph-legend-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:20px;font-size:7px;font-weight:700;letter-spacing:.04em;border:1px solid transparent;line-height:1.7;}
/* Node category dots */
.kb-graph-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 4px currentColor;}
/* Edge type lines */
.kb-graph-edge-line{width:18px;height:0;flex-shrink:0;}
/* Canvas */
.kb-graph-canvas{width:100%;height:calc(100vh - 225px);border:1px solid var(--border);border-radius:12px;cursor:grab;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:box-shadow .2s;}
.kb-graph-canvas:hover{box-shadow:0 4px 20px rgba(99,102,241,.1);}
.kb-graph-canvas:active{cursor:grabbing;}
/* Tooltip — glassmorphism */
.kb-graph-tooltip{
position:absolute;max-width:290px;padding:12px 16px;
background:rgba(255,255,255,0.94);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(99,102,241,0.18);
border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.13),0 0 0 1px rgba(255,255,255,.6) inset;
font-size:12px;z-index:100;pointer-events:none;line-height:1.5;
}
.kb-graph-tooltip .tt-title{font-weight:700;font-size:13px;margin-bottom:5px;color:var(--text);}
.kb-graph-tooltip .tt-cat{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;margin-bottom:5px;letter-spacing:.03em;}
.kb-graph-tooltip .tt-tags{font-size:10px;color:var(--muted);margin-bottom:4px;font-family:var(--mono,monospace);}
.kb-graph-tooltip .tt-preview{font-size:12px;color:var(--text-2);line-height:1.55;margin-bottom:2px;}
.kb-graph-tooltip .tt-meta{font-size:10px;color:var(--text-muted);margin-top:6px;display:flex;gap:10px;border-top:1px solid rgba(0,0,0,.06);padding-top:6px;}
.kb-graph-tooltip .tt-meta span{display:inline-flex;align-items:center;gap:3px;}
/* Fullscreen */
#kbGraphView.kb-graph-fullscreen{position:fixed;inset:0;z-index:99999;background:var(--bg);padding:18px;display:flex;flex-direction:column;}
#kbGraphView.kb-graph-fullscreen .kb-graph-toolbar{flex-shrink:0;}
#kbGraphView.kb-graph-fullscreen .kb-graph-canvas{flex:1;height:auto;border-radius:14px;}
/* Dark mode overrides */
[data-theme="dark"] .kb-graph-tooltip{background:rgba(17,24,39,0.92);border-color:rgba(99,102,241,0.25);box-shadow:0 8px 28px rgba(0,0,0,.4);}
[data-theme="dark"] .kb-graph-tooltip .tt-title{color:var(--bg-hover);}
[data-theme="dark"] .kb-graph-tooltip .tt-preview{color:var(--text-muted);}
[data-theme="dark"] .kb-graph-tooltip .tt-meta{border-color:rgba(255,255,255,.07);}
[data-theme="dark"] .kb-graph-legend-chip{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important;color:var(--text-muted)!important;}
/* Template modal */
.kb-tpl-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;margin-bottom:2px;}
.kb-tpl-modal-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text);}
.kb-tpl-modal-title svg{color:var(--accent);}
.kb-tpl-modal-desc{padding:0 24px;font-size:12.5px;color:var(--muted);margin-bottom:4px;}
/* Templates */
.kb-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:16px 20px 20px;}
.kb-template-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px 14px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;}
.kb-template-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.tpl-icon-wrap{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:transform .2s;}
.tpl-icon-wrap svg{width:22px;height:22px;}
.kb-template-card:hover .tpl-icon-wrap{transform:scale(1.1);}
.kb-template-card .tpl-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;}
.kb-template-card .tpl-cat{font-size:10.5px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px;}
/* Empty state */
.kb-notes-empty{text-align:center;padding:60px 24px;color:var(--muted);}
.kb-notes-empty svg{width:52px;height:52px;margin-bottom:14px;opacity:.25;}
.kb-notes-empty h3{font-size:16px;color:var(--text-2);margin-bottom:8px;font-weight:600;}
.kb-notes-empty p{font-size:13px;line-height:1.5;}
/* Project filter pills */
.kb-project-pill{display:inline-flex;padding:5px 12px;font-size:11.5px;border-radius:20px;cursor:pointer;color:var(--text-2);background:var(--bg);border:1.5px solid var(--border);margin:2px;transition:all .15s;font-weight:500;}
.kb-project-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.kb-project-pill.active{background:var(--accent);color:var(--surface);border-color:var(--accent);}
/* ── KB Meeting Transcription ── */
.btn-accent2{background:var(--accent2);color:var(--surface);border:none;box-shadow:0 2px 8px rgba(14,165,233,.25);}
.btn-accent2:hover{background:var(--accent2);box-shadow:0 4px 14px rgba(14,165,233,.35);}
.kb-meeting-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border-light);}
.kb-meeting-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2);font-family:var(--mono);}
.kb-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);display:inline-block;transition:background .2s;}
.kb-rec-dot.recording{background:var(--danger);animation:kbPulse 1.2s ease-in-out infinite;}
@keyframes kbPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.kb-meeting-setup{display:flex;flex-direction:column;gap:14px;}
.kb-meeting-title-row{margin-bottom:4px;}
.kb-meeting-lang-row{display:flex;align-items:center;gap:10px;}
.kb-transcript-area{margin-top:18px;flex:1;display:flex;flex-direction:column;min-height:0;}
.kb-transcript-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;}
.kb-transcript-lines{flex:1;max-height:350px;overflow-y:auto;padding:14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;line-height:1.7;color:var(--text-2);}
.kb-transcript-lines .ts-line{padding:4px 0;border-bottom:1px solid var(--border-light);}
.kb-transcript-lines .ts-time{font-size:10px;color:var(--muted-light);font-family:var(--mono);margin-right:10px;}
.kb-transcript-current{padding:10px 14px;margin-top:8px;background:var(--accent-light);border-radius:var(--r-sm);font-size:13px;color:var(--accent);min-height:28px;font-style:italic;}
.kb-meeting-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-light);}
.kb-summary-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;margin-top:18px;}
.kb-summary-content{padding:16px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;line-height:1.7;color:var(--text);}
.kb-summary-content h2,.kb-summary-content h3{margin:12px 0 6px;font-size:14px;font-weight:700;}
.kb-summary-content ul{padding-left:20px;margin:6px 0;}
.kb-summary-content li{margin:4px 0;}
@media(max-width:900px){
.kb-layout{grid-template-columns:1fr;height:auto;}
.kb-sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:240px;}
.kb-notes-grid{grid-template-columns:1fr;}
.kb-tab-bar{flex-direction:column;align-items:stretch;}
.kb-tabs{justify-content:center;}
.kb-actions{justify-content:center;}
}
@media(max-width:768px){
.kanban-cols{grid-template-columns:repeat(2,minmax(180px,1fr));}
.sub-tabs-bar{padding:6px 12px;}
.content{padding:16px 12px;}
.topbar{padding:0 12px;}
.topbar-date{display:none;}
.modal{padding:20px;}
.dash-grid-70-30,.dash-grid-2col{grid-template-columns:1fr !important;}
.kpi-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:520px){
.kanban-cols{grid-template-columns:1fr;}
.kpi-grid{grid-template-columns:1fr !important;}
.modal{padding:16px;border-radius:var(--r-md);}
.sub-tab{padding:5px 10px;font-size:12px;}
}
/* ══════════════════════════════════════════════
THEME TOGGLE BUTTON
═══════════════════════════════════════════════ */
.theme-icon-dark{display:none;}
[data-theme="dark"] .theme-icon-light{display:none;}
[data-theme="dark"] .theme-icon-dark{display:block;}
/* ══════════════════════════════════════════════
DARK THEME — COMPREHENSIVE OVERRIDES
═══════════════════════════════════════════════ */
/* ── Base & Loading ── */
[data-theme="dark"] .loading{background:var(--bg);color:var(--text);}
[data-theme="dark"] .loading-text{color:var(--muted);}
[data-theme="dark"] .content::-webkit-scrollbar-thumb{background:var(--border);}
[data-theme="dark"] .content::-webkit-scrollbar-track{background:transparent;}
/* ── Sidebar (already dark — slightly adjust for deeper bg) ── */
[data-theme="dark"] .sidebar{background:var(--sidebar-bg);}
[data-theme="dark"] .sidebar::after{background:linear-gradient(180deg,transparent,var(--sidebar-border),transparent);}
[data-theme="dark"] .sidebar-user{border-top-color:rgba(255,255,255,.05);}
/* ── Topbar ── */
[data-theme="dark"] .topbar{background:var(--surface);border-bottom-color:var(--border);box-shadow:0 1px 4px rgba(0,0,0,.25);}
[data-theme="dark"] .topbar-date{background:var(--bg-input);border-color:var(--border);color:var(--muted);}
/* ── Forms ── */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px rgba(165,180,252,.12);}
[data-theme="dark"] .form-select option{background:var(--surface);color:var(--text);}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder{color:var(--muted-light);}
/* ── Assignee multi-select ── */
[data-theme="dark"] .assignee-tags{background:var(--bg-input);border-color:var(--border);}
[data-theme="dark"] .assignee-tags:focus-within,
[data-theme="dark"] .assignee-tags.open{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .assignee-dropdown{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .assignee-dropdown-search{background:var(--surface);border-bottom-color:var(--border);}
[data-theme="dark"] .assignee-search-input{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .assignee-search-input:focus{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .assignee-option:hover{background:var(--bg-hover);}
/* ── Search & Filters ── */
[data-theme="dark"] .search-input{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .search-input:focus{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .filter-select{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .filter-select option{background:var(--surface);color:var(--text);}
/* ── Cards ── */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .eval-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .task-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .task-card:hover{border-color:var(--accent);background:rgba(165,180,252,.06);}
/* ── Badges — inverted for dark (dark bg + bright text) ── */
[data-theme="dark"] .badge-green{background:rgba(110,231,183,.14);color:#6ee7b7;}
[data-theme="dark"] .badge-blue{background:rgba(147,197,253,.14);color:#93c5fd;}
[data-theme="dark"] .badge-yellow{background:rgba(253,230,138,.12);color:#fde68a;}
[data-theme="dark"] .badge-red{background:rgba(252,165,165,.14);color:#fca5a5;}
[data-theme="dark"] .badge-purple{background:rgba(196,181,253,.12);color:#c4b5fd;}
[data-theme="dark"] .badge-gray{background:rgba(156,163,175,.12);color:var(--border);}
[data-theme="dark"] .badge-teal{background:rgba(94,234,212,.12);color:#5eead4;}
[data-theme="dark"] .badge-orange{background:rgba(253,186,116,.12);color:#fdba74;}
/* ── Tables ── */
[data-theme="dark"] .table-wrap{background:var(--card);border-color:var(--border);}
[data-theme="dark"] thead th{background:rgba(255,255,255,.03);color:var(--muted);border-color:var(--border);}
[data-theme="dark"] tbody td{border-color:var(--border);color:var(--text);}
[data-theme="dark"] tbody tr:hover td{background:var(--bg-hover);}
/* ── Kanban ── */
[data-theme="dark"] .kanban-project-card{background:linear-gradient(135deg,rgba(165,180,252,.06),rgba(165,180,252,.02));border-color:var(--border);}
[data-theme="dark"] .kanban-cols{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .kanban-col{background:rgba(255,255,255,.03);border-color:var(--border);}
[data-theme="dark"] .kanban-count{background:var(--bg-input);color:var(--muted);}
[data-theme="dark"] .kanban-progress-bar{background:var(--border);}
/* ── Strips ── */
[data-theme="dark"] .strip-item{background:var(--card);border-color:var(--border);}
/* ── Buttons ── */
[data-theme="dark"] .btn{color:var(--text);}
[data-theme="dark"] .btn-primary{background:var(--accent);color:var(--text);box-shadow:0 2px 10px rgba(165,180,252,.2);}
[data-theme="dark"] .btn-primary:hover{background:#c7d2fe;box-shadow:0 4px 16px rgba(165,180,252,.3);}
[data-theme="dark"] .btn-ghost{color:var(--text-2);}
[data-theme="dark"] .btn-ghost:hover{background:var(--bg-hover);color:var(--text);}
[data-theme="dark"] .btn-outline{background:transparent;border-color:var(--border);color:var(--text-2);}
[data-theme="dark"] .btn-outline:hover{background:var(--bg-hover);border-color:var(--muted);color:var(--text);}
[data-theme="dark"] .btn-danger{color:var(--red);border-color:rgba(252,165,165,.3);}
[data-theme="dark"] .btn-danger:hover{background:var(--red-light);}
[data-theme="dark"] .btn-accent2{background:var(--accent2);color:var(--text);}
/* ── Modals ── */
[data-theme="dark"] .modal-overlay{background:var(--bg-overlay);}
[data-theme="dark"] .modal{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xl);}
[data-theme="dark"] .modal-header{color:var(--text);}
[data-theme="dark"] .modal-footer{border-top-color:var(--border);background:rgba(255,255,255,.02);}
[data-theme="dark"] .modal-body{color:var(--text);}
/* ── Toast ── */
[data-theme="dark"] .toast{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-lg);}
/* ── Gantt ── */
[data-theme="dark"] .gantt-wrap{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .gantt-grid{background:var(--card);}
[data-theme="dark"] .gantt-header{border-bottom-color:var(--border);}
[data-theme="dark"] .gantt-header-row,
[data-theme="dark"] .gantt-header-row th{background:rgba(255,255,255,.03);border-color:var(--border);color:var(--muted);}
[data-theme="dark"] .gantt-row-label{border-right-color:var(--border);color:var(--text);}
[data-theme="dark"] .gantt-row-epic{background:rgba(99,102,241,.08);}
[data-theme="dark"] .gantt-row-subtask{background:rgba(94,234,212,.04);}
/* ── Risk ── */
[data-theme="dark"] .risk-cell{border-color:var(--border);}
/* ── Availability ── */
[data-theme="dark"] .avail-card{background:var(--card);border-color:var(--border);}
/* ── AI Chat Panel ── */
[data-theme="dark"] .ai-panel{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .ai-header{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border-bottom-color:var(--border);}
[data-theme="dark"] .chat-messages{background:var(--bg);}
[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb{background:var(--border);}
[data-theme="dark"] .msg-bubble{background:var(--surface);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .msg.user .msg-bubble{background:linear-gradient(135deg,rgba(165,180,252,.15),rgba(165,180,252,.08));border-color:rgba(165,180,252,.2);color:var(--text);}
[data-theme="dark"] .msg-bubble.error-bubble{border-color:rgba(252,165,165,.3);background:var(--red-light);}
[data-theme="dark"] .error-detail{color:var(--red);background:var(--bg-input);}
[data-theme="dark"] .msg-avatar{background:linear-gradient(135deg,rgba(165,180,252,.12),rgba(165,180,252,.06));border-color:rgba(165,180,252,.2);}
[data-theme="dark"] .msg.user .msg-avatar{background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(103,232,249,.06));border-color:rgba(103,232,249,.2);}
[data-theme="dark"] .chat-input-row{background:var(--surface);border-top-color:var(--border);}
[data-theme="dark"] .chat-input{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .chat-input:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px rgba(165,180,252,.1);}
[data-theme="dark"] .quick-prompts{background:rgba(255,255,255,.02);border-bottom-color:var(--border);}
[data-theme="dark"] .qp{background:var(--bg-input);border-color:var(--border);color:var(--muted);}
[data-theme="dark"] .qp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
[data-theme="dark"] .api-key-card{background:var(--card);border-color:var(--border);border-top-color:var(--accent);}
/* AI upload zone */
[data-theme="dark"] .upload-zone-wrap{background:rgba(255,255,255,.02);border-bottom-color:var(--border);}
[data-theme="dark"] .upload-zone{border-color:rgba(165,180,252,.25);background:var(--bg-input);}
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.drag-over{border-color:var(--accent);background:var(--accent-light);}
[data-theme="dark"] .upload-zone.has-file{border-color:var(--green);background:var(--green-light);}
[data-theme="dark"] .upload-zone-icon{background:var(--accent-light);}
[data-theme="dark"] .upload-zone.has-file .upload-zone-icon{background:var(--green-light);}
[data-theme="dark"] .upload-clear{border-color:var(--border);background:var(--surface);color:var(--muted);}
[data-theme="dark"] .upload-clear:hover{border-color:var(--red);color:var(--red);background:var(--red-light);}
[data-theme="dark"] .role-prompts{background:var(--card);border-bottom-color:var(--border);}
[data-theme="dark"] .rqp.rqp-product{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.35);color:#c4b5fd;}
[data-theme="dark"] .rqp.rqp-product:hover{background:var(--purple);color:var(--surface);border-color:var(--purple);}
[data-theme="dark"] .rqp.rqp-pm{background:rgba(29,78,216,.12);border-color:rgba(29,78,216,.35);color:#93c5fd;}
[data-theme="dark"] .rqp.rqp-pm:hover{background:var(--info);color:var(--surface);border-color:var(--info);}
[data-theme="dark"] .rqp.rqp-pmo{background:rgba(21,128,61,.12);border-color:rgba(21,128,61,.35);color:#86efac;}
[data-theme="dark"] .rqp.rqp-pmo:hover{background:var(--success);color:var(--surface);border-color:var(--success);}
[data-theme="dark"] .doc-prompts{background:linear-gradient(90deg,rgba(165,180,252,.06),rgba(103,232,249,.04));border-bottom-color:var(--border);}
[data-theme="dark"] .doc-prompts-label{color:var(--accent);}
[data-theme="dark"] .dqp{background:var(--bg-input);border-color:rgba(165,180,252,.25);color:var(--accent);}
[data-theme="dark"] .dqp:hover{background:var(--accent);color:var(--text);border-color:var(--accent);}
[data-theme="dark"] .file-ext-badge.pdf{background:var(--red-light);color:var(--red);}
[data-theme="dark"] .file-ext-badge.image{background:var(--yellow-light);color:var(--yellow);}
[data-theme="dark"] .file-ext-badge.text{background:rgba(147,197,253,.14);color:#93c5fd;}
/* ── Knowledge Base ── */
[data-theme="dark"] .kb-sidebar{background:var(--surface);border-right-color:var(--border);}
[data-theme="dark"] .kb-search-input{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .kb-search-input:focus{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .kb-note-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .kb-note-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);}
[data-theme="dark"] .kb-main{background:var(--bg);}
[data-theme="dark"] .kb-graph-canvas{border-color:rgba(99,102,241,0.2);box-shadow:0 2px 12px rgba(0,0,0,.3);}
[data-theme="dark"] .kb-content-textarea{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .kb-content-textarea:focus{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .kb-title-input{color:var(--text);}
[data-theme="dark"] .kb-backlinks{background:rgba(255,255,255,.03);border-color:var(--border);}
[data-theme="dark"] .kb-summary-content{background:var(--bg-input);border-color:var(--border);color:var(--text);}
/* KB template modal */
[data-theme="dark"] .kb-tpl-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .kb-tpl-card:hover{border-color:var(--accent);background:rgba(165,180,252,.06);}
[data-theme="dark"] .kb-tpl-modal-header{border-bottom-color:var(--border);}
/* KB custom selects */
[data-theme="dark"] .kb-custom-select-btn{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .kb-custom-select-btn:focus{background:var(--surface);border-color:var(--accent);}
[data-theme="dark"] .kb-custom-select-dropdown{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-lg);}
[data-theme="dark"] .kb-csel-option:hover{background:var(--bg-hover);}
[data-theme="dark"] .kb-csel-option.active{background:var(--accent-light);color:var(--accent);}
/* KB category filters */
[data-theme="dark"] .kb-cat-filter{color:var(--muted);}
[data-theme="dark"] .kb-cat-filter:hover{background:var(--bg-hover);color:var(--text);}
[data-theme="dark"] .kb-cat-filter.active{background:var(--accent-light);color:var(--accent);}
/* KB AI dropdown */
[data-theme="dark"] .kb-ai-menu{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-lg);}
[data-theme="dark"] .kb-ai-menu div:hover{background:var(--bg-hover);}
/* KB meeting */
[data-theme="dark"] .kb-transcript-area{background:var(--bg-input);border-color:var(--border);}
[data-theme="dark"] .kb-meeting-setup{background:var(--surface);}
/* ── Pagination ── */
[data-theme="dark"] .pagination button{background:var(--surface);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .pagination button:hover{background:var(--bg-hover);}
/* ── Login — keep login screen mostly as-is (already dark gradient) ── */
[data-theme="dark"] .login-card{background:rgba(31,41,55,.97);box-shadow:var(--shadow-xl);}
[data-theme="dark"] .login-card-title{color:var(--muted);}
[data-theme="dark"] .login-error{background:var(--red-light);border-color:rgba(252,165,165,.3);}
[data-theme="dark"] .demo-acc{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .demo-acc:hover{background:var(--accent-light);border-color:var(--accent);}
[data-theme="dark"] .demo-name{color:var(--text);}
[data-theme="dark"] .demo-cred{color:var(--muted);}
/* ── Import ── */
[data-theme="dark"] .import-drop-zone{background:var(--bg-input);border-color:var(--border);}
[data-theme="dark"] .import-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .import-table th{background:var(--bg-input);}
[data-theme="dark"] .import-table .import-cell-input:focus,[data-theme="dark"] .import-table .import-cell-select:focus{background:var(--bg-input);}
[data-theme="dark"] .import-drop-icon{background:rgba(165,180,252,.12);color:var(--accent);}
/* ── Access banner ── */
[data-theme="dark"] .access-banner.limited{background:var(--yellow-light);border-color:rgba(253,230,138,.3);color:var(--yellow);}
/* ── Scrollbar (global) ── */
[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);}
/* ══ PRODUCT MANAGEMENT — NAV ══════════════════════════════════════ */
.nav-product { display: flex; }
/* ══ OKR ════════════════════════════════════════════════════════════ */
.okr-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
}
.okr-card-header { display: flex; align-items: flex-start; gap: 12px; }
.okr-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 2px; }
.okr-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }
.okr-status-badge {
display: inline-block;
font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: 10px;
text-transform: uppercase; letter-spacing: .4px;
}
.okr-status-badge.active { background: var(--green-light); color: var(--green); }
.okr-status-badge.draft { background: var(--surface2); color: var(--muted); }
.okr-status-badge.completed { background: var(--green-light); color: var(--green); }
.okr-status-badge.cancelled { background: var(--red-light); color: var(--red); }
.okr-status-badge.on-track { background: var(--green-light); color: var(--green); }
.okr-status-badge.at-risk { background: var(--yellow-light); color: var(--yellow); }
.okr-status-badge.off-track { background: var(--red-light); color: var(--red); }
.kr-list { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.kr-item { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.kr-title { font-size: 12px; font-weight: 600; color: var(--text); }
.kr-progress-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 3px 0; }
.kr-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
/* ══ ROADMAP ════════════════════════════════════════════════════════ */
.roadmap-horizons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; min-height: calc(100vh - 180px); }
@media (max-width: 900px) { .roadmap-horizons { grid-template-columns: 1fr; } }
.horizon-column { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; min-height: 300px; }
.horizon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.horizon-header.horizon-now { border-bottom-color: var(--green); }
.horizon-header.horizon-next { border-bottom-color: var(--yellow); }
.horizon-header.horizon-later { border-bottom-color: var(--accent); }
.horizon-title { font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.horizon-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.horizon-dot-now { background: var(--green); }
.horizon-dot-next { background: var(--yellow); }
.horizon-dot-later { background: var(--accent); }
.horizon-count { background: var(--card); color: var(--muted); font-size:11px; font-family:var(--mono); padding:2px 8px; border-radius:10px; border:1px solid var(--border); font-weight:700; }
.horizon-items { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.initiative-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; box-shadow: var(--shadow-xs); transition: all .18s; cursor: grab; user-select: none; }
.initiative-card:hover { border-color: rgba(79,70,229,.3); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.initiative-card:active { cursor: grabbing; }
/* Drag-and-drop states */
.rd-clone { position:fixed; pointer-events:none; z-index:9999; opacity:.85; transform:rotate(2deg); box-shadow: var(--shadow-lg); }
.rd-source { opacity:.3; }
.rd-drop-zone { border:2px dashed var(--accent)!important; background:rgba(79,70,229,.04)!important; }
/* G6/G7/G8: roadmap view-toggle + timeline + dep-line overlay */
.roadmap-view-toggle .btn { background: transparent; color: var(--muted); }
.roadmap-view-toggle .btn.active { background: var(--accent); color: #fff; }
.roadmap-dep-svg { position:absolute; left:0; top:0; pointer-events:none; }
.rd-tl-wrap { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; overflow: auto; grid-column: 1 / -1; width: 100%; box-shadow: var(--shadow-xs); max-height: 100%; align-self: start; }
.rd-tl-header { display:flex; align-items:stretch; height:36px; border-bottom:1px solid var(--border); margin-bottom:10px; padding-bottom:4px; }
.rd-tl-label-spacer { width: 280px; flex-shrink:0; display:flex; align-items:center; font-size:11px; font-weight:700; color: var(--muted); text-transform:uppercase; letter-spacing:.6px; padding-left:4px; }
.rd-tl-axis { position:relative; flex:1; height:32px; min-width: 640px; }
.rd-tl-tick { position:absolute; top:14px; font-size:10.5px; color: var(--muted); transform: translateX(-50%); white-space:nowrap; font-weight:500; }
.rd-tl-tick::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:1px; height:6px; background: var(--border); }
.rd-tl-gridline { position:absolute; top:32px; bottom:-100vh; width:1px; background: var(--border); opacity:.35; pointer-events:none; }
.rd-tl-today { position:absolute; top:6px; bottom:-100vh; width:2px; background: var(--red,#dc2626); opacity:.55; pointer-events:none; z-index:1; }
.rd-tl-today::after { content:'Today'; position:absolute; top:-4px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; color:#fff; background: var(--red,#dc2626); padding:1px 5px; border-radius:8px; letter-spacing:.3px; }
.rd-tl-body { display:flex; flex-direction:column; gap:4px; }
.rd-tl-row { display:flex; align-items:center; gap:12px; min-height: 38px; padding: 2px 4px; border-radius: 6px; transition: background .12s ease; }
.rd-tl-row:hover { background: rgba(79,70,229,.04); }
.rd-tl-label { width:280px; flex-shrink:0; font-size:12px; display:flex; flex-direction:column; justify-content:center; gap:3px; overflow:hidden; padding-right:8px; }
.rd-tl-label-line { display:flex; align-items:center; gap:6px; min-width:0; }
.rd-tl-theme-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rd-tl-horizon-pill { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; letter-spacing:.4px; text-transform:uppercase; flex-shrink:0; }
.rd-tl-horizon-pill.h-now { background: var(--green-light,rgba(16,185,129,.12)); color: var(--green,#10b981); }
.rd-tl-horizon-pill.h-next { background: var(--yellow-light,rgba(234,179,8,.14)); color: var(--yellow,#ca8a04); }
.rd-tl-horizon-pill.h-later { background: var(--accent-light,rgba(79,70,229,.12)); color: var(--accent,#4f46e5); }
.rd-tl-title { font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color: var(--text); font-size:12.5px; cursor: pointer; }
.rd-tl-title:hover { color: var(--accent); }
.rd-tl-meta { font-size:10.5px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
.rd-tl-meta-date { font-family: var(--mono,monospace); font-weight:600; color: var(--text-muted,var(--muted)); }
.rd-tl-track { position:relative; flex:1; height: 28px; background: rgba(0,0,0,.025); border-radius: 6px; min-width: 640px; overflow:hidden; }
.rd-tl-bar { position:absolute; top:3px; bottom:3px; min-width: 30px; background: var(--accent-light,rgba(79,70,229,.16)); border:1px solid var(--accent); border-radius: 5px; display:flex; align-items:center; padding:0 8px; cursor:pointer; font-size:11px; color: var(--accent); font-weight:600; overflow:hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: filter .12s ease, box-shadow .12s ease; }
.rd-tl-bar:hover { filter: brightness(1.06); box-shadow: var(--shadow-sm); }
.rd-tl-bar.badge-green { background: rgba(16,185,129,.16); border-color: var(--green,#10b981); color: var(--green,#10b981); }
.rd-tl-bar.badge-blue { background: rgba(79,70,229,.16); border-color: var(--accent,#4f46e5); color: var(--accent,#4f46e5); }
.rd-tl-bar.badge-yellow { background: rgba(234,179,8,.18); border-color: var(--yellow,#ca8a04); color: var(--yellow,#ca8a04); }
.rd-tl-bar.badge-red { background: rgba(220,38,38,.16); border-color: var(--red,#dc2626); color: var(--red,#dc2626); }
.rd-tl-bar.badge-muted { background: rgba(100,116,139,.14); border-color: var(--muted,#64748b); color: var(--muted,#64748b); }
.rd-tl-bar-text { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.rd-tl-undated { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rd-tl-undated-label { font-size:11px; font-weight:700; color: var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-right:6px; }
.rd-tl-chip { font-size:11px; padding:3px 9px; border-radius:10px; background: var(--surface2,var(--surface)); border:1px solid var(--border); cursor:pointer; transition: border-color .12s ease, color .12s ease; }
.rd-tl-chip:hover { border-color: var(--accent); color: var(--accent); }
.feature-chip { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--accent-light); color: var(--accent); font-weight: 600; }
.feature-chip.feature-completed { background: var(--green-light); color: var(--green); }
.feature-chip.feature-in-progress { background: var(--blue-light, rgba(37,99,235,.1)); color: var(--accent); }
.feature-chip.feature-cancelled { background: var(--red-light); color: var(--red); }
/* ── Initiative card internals ─────────────────────────────────── */
.init-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.init-card-meta { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.init-card-actions { display:flex; gap:3px; flex-shrink:0; }
.init-rice-badge { font-size:10px; background:var(--accent); color:var(--surface); padding:1px 7px; border-radius:10px; font-weight:700; }
.init-card-title { font-weight:600; font-size:13px; margin-bottom:4px; line-height:1.3; }
.init-card-desc { font-size:11px; color:var(--muted); margin-bottom:6px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.init-card-links { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.init-card-link-chip { font-size:10px; background:var(--surface2,var(--surface)); border:1px solid var(--border); color:var(--muted); padding:1px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:3px; }
.init-doc-chip { background:var(--accent-light,rgba(37,99,235,.08)); color:var(--accent); border-color:transparent; }
.init-progress-row { margin:6px 0; }
.init-progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:3px; }
.init-features-list { display:flex; flex-direction:column; gap:2px; margin:6px 0; }
.init-feature-row { display:flex; justify-content:space-between; align-items:center; padding:3px 6px; border-radius:5px; background:var(--surface); }
.init-feature-row:hover { background:var(--bg-hover); }
.init-feature-left { display:flex; align-items:center; gap:5px; min-width:0; }
.init-feature-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--muted); }
.init-feat-completed { background:var(--green)!important; }
.init-feat-in-progress { background:var(--accent)!important; }
.init-feat-planned { background:var(--blue,var(--accent))!important; }
.init-feat-cancelled { background:var(--red)!important; }
.init-feature-name { font-size:11px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.init-feature-actions { display:flex; gap:2px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.init-feature-row:hover .init-feature-actions { opacity:1; }
.init-add-feat-btn { margin-top:6px; width:100%; justify-content:center; }
/* Project execution progress block */
.init-proj-progress { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:7px 9px; margin:6px 0; }
.init-proj-progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:6px; }
.init-proj-progress-name { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; }
.init-proj-progress-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.init-proj-progress-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.init-proj-pct { font-size:11px; font-weight:700; font-family:var(--mono); color:var(--accent); }
.init-proj-fill { background: linear-gradient(90deg, var(--accent), var(--green)); }
/* RICE section in modal */
.init-rice-section { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; }
.init-rice-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.init-rice-hint { font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted); }
.init-rice-score { font-size:12px; font-weight:700; color:var(--green); background:var(--green-light); padding:2px 10px; border-radius:10px; margin-left:auto; }
/* ══ USER PERSONAS ══════════════════════════════════════════════════ */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.persona-card {
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 20px; box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.persona-avatar {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--purple, #7c3aed));
color: var(--surface); font-weight: 800; font-size: 20px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;
}
.persona-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.persona-role { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.persona-section { width: 100%; text-align: left; margin-bottom: 8px; }
.persona-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.persona-section div { font-size: 12px; color: var(--text); }
.pain-point-item { padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; border-left: 3px solid var(--border); background: var(--bg); }
.pain-point-item.pain-critical { border-color: var(--red); }
.pain-point-item.pain-high { border-color: var(--yellow); }
.pain-point-item.pain-medium { border-color: var(--accent); }
.pain-point-item.pain-low { border-color: var(--green); }
/* ══ CUSTOMER FEEDBACK ══════════════════════════════════════════════ */
.section-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab-btn {
padding: 8px 16px; font-size: 13px; font-weight: 600;
background: none; border: none; border-bottom: 2px solid transparent;
cursor: pointer; color: var(--muted); transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover { color: var(--text); }
.fr-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
/* ══ PRODUCT METRICS ════════════════════════════════════════════════ */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.metric-card {
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 18px; box-shadow: var(--shadow-sm);
}
/* ══ RELEASES ═══════════════════════════════════════════════════════ */
.release-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
transition: box-shadow .18s, border-color .18s;
}
.release-card:hover { border-color: rgba(79,70,229,.25); box-shadow: var(--shadow-md); }
.release-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.release-card-left { flex:1; min-width:0; }
.release-card-actions { display:flex; gap:6px; flex-shrink:0; align-items:flex-start; }
.release-card-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.release-version { font-family:var(--mono); font-size:14px; font-weight:800; color:var(--accent); background:var(--accent-light); padding:2px 10px; border-radius:6px; }
.release-name { font-size:13px; font-weight:600; color:var(--text); }
.release-project-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); background:var(--surface); border:1px solid var(--border); padding:2px 8px; border-radius:10px; margin-bottom:6px; }
.release-desc { font-size:12px; color:var(--muted); margin-bottom:6px; line-height:1.5; }
.release-dates { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); }
.release-dates span { display:inline-flex; align-items:center; gap:3px; }
.changelog-content { padding: 12px 0; max-height: 400px; overflow-y: auto; font-size: 13px; line-height: 1.7; }
/* ── Changelog modal ─────────────────────────────────────────── */
.cl-modal { max-width: 640px; }
.cl-release-meta { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; }
.cl-meta-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cl-meta-title { font-size:13px; font-weight:600; color:var(--text); }
.cl-meta-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cl-meta-date { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--muted); }
.cl-meta-released { color:var(--green); }
.cl-release-desc { font-size:12px; color:var(--muted); margin-bottom:12px; line-height:1.5; }
.cl-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.cl-notes-section { background:var(--surface); border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 14px; margin-bottom:14px; font-size:12px; line-height:1.6; }
.cl-notes-body { color:var(--text); }
.cl-features-section { margin-top:4px; }
.cl-feature-list { display:flex; flex-direction:column; gap:2px; }
.cl-h2 { font-size:13px; font-weight:700; color:var(--text); padding:4px 0; display:none; }
.cl-type-header { margin:10px 0 4px; }
.cl-type-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 10px; border-radius:10px; }
.cl-type-feature { background:var(--accent-light,rgba(79,70,229,.1)); color:var(--accent); }
.cl-type-enhance { background:rgba(16,185,129,.1); color:var(--green); }
.cl-type-bug { background:rgba(239,68,68,.1); color:var(--red); }
.cl-type-debt { background:rgba(217,119,6,.1); color:var(--yellow); }
.cl-type-research { background:rgba(139,92,246,.1); color:var(--purple); }
.cl-type-other { background:var(--surface2,var(--surface)); color:var(--muted); border:1px solid var(--border); }
.cl-item { display:flex; align-items:baseline; gap:8px; padding:5px 8px; border-radius:6px; }
.cl-item:hover { background:var(--bg-hover); }
.cl-item-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:2px; }
.cl-item-title { font-size:12px; font-weight:600; color:var(--text); flex-shrink:0; }
.cl-item-desc { font-size:12px; color:var(--muted); }
.cl-spacer { height:4px; }
.cl-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; color:var(--muted); font-size:12px; text-align:center; border:1px dashed var(--border); border-radius:var(--r-md); }
.cl-empty svg { opacity:.4; }
/* ══ HYPOTHESES ══════════════════════════════════════════════════════ */
.hypothesis-card {
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.hypothesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 700px) { .hypothesis-grid { grid-template-columns: 1fr; } }
.hyp-section { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.hyp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.hyp-section div { font-size: 12px; line-height: 1.5; }
/* ══ COMPETITORS ═════════════════════════════════════════════════════ */
.competitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.competitor-card {
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 18px; box-shadow: var(--shadow-sm);
}
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.swot-cell { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.swot-cell.swot-s { border-left: 3px solid var(--green); }
.swot-cell.swot-w { border-left: 3px solid var(--red); }
.swot-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
/* ══ EMPTY STATE ════════════════════════════════════════════════════ */
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 48px 24px; color: var(--muted); font-size: 14px; text-align: center;
}
/* ══ DARK MODE ═══════════════════════════════════════════════════════ */
[data-theme="dark"] .okr-card,
[data-theme="dark"] .initiative-card,
[data-theme="dark"] .persona-card,
[data-theme="dark"] .fr-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .release-card,
[data-theme="dark"] .hypothesis-card,
[data-theme="dark"] .competitor-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .kr-item,
[data-theme="dark"] .pain-point-item,
[data-theme="dark"] .hyp-section,
[data-theme="dark"] .swot-cell { background: rgba(255,255,255,.04); }
[data-theme="dark"] .horizon-column { background: rgba(255,255,255,.02); }
[data-theme="dark"] .tab-btn { color: var(--muted); }
[data-theme="dark"] .tab-btn.active { color: var(--accent); }
/* ══ PRODUCT DOCS ═══════════════════════════════════════════════ */
/* Doc list grid — .content already provides padding:24px 26px */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.doc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs);}
.doc-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.doc-card-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.doc-card-del{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:3px 5px;border-radius:var(--r-sm);opacity:0;transition:opacity .15s,color .15s;}
.doc-card:hover .doc-card-del{opacity:1;}
.doc-card-del:hover{color:var(--red);}
.doc-card-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.4;word-break:break-word;}
.doc-card-meta{font-size:11px;color:var(--muted);font-family:var(--mono);}
/* Full-screen editor overlay */
.doc-editor-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;flex-direction:column;}
.doc-editor-overlay.open{display:flex;animation:pageIn .2s ease both;}
/* Topbar matches .topbar exactly */
.doc-editor-topbar{display:flex;align-items:center;gap:12px;padding:0 24px;height:56px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;box-shadow:var(--shadow-xs);}
.doc-editor-back{background:transparent;border:1.5px solid var(--border);color:var(--muted);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);transition:all .18s;}
.doc-editor-back:hover{color:var(--text);border-color:var(--accent);background:var(--accent-light);}
.doc-editor-meta{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.doc-editor-type-badge{flex-shrink:0;}
.doc-editor-title-input{flex:1;background:none;border:none;outline:none;font-size:15px;font-weight:700;color:var(--text);font-family:var(--font);letter-spacing:-.3px;min-width:0;}
.doc-editor-title-input::placeholder{color:var(--muted-light);}
.doc-editor-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* Status select matches .filter-select */
.doc-editor-status-select{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:12.5px;padding:4px 10px;outline:none;cursor:pointer;transition:border-color .2s;}
.doc-editor-status-select:focus{border-color:var(--accent);}
/* Save indicator matches .topbar-date / .result-count */
.doc-save-indicator{font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;background:var(--bg);padding:4px 10px;border-radius:20px;border:1px solid var(--border);}
.doc-editor-body{flex:1;overflow-y:auto;position:relative;}
.doc-editor-body::-webkit-scrollbar{width:5px;}
.doc-editor-body::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
.doc-editor-body::-webkit-scrollbar-track{background:transparent;}
/* Content column: padding-left 24px so .block-actions (56px) sits inside
the inset, and .doc-block text lands at 80px from the centered box edge
— exactly where .doc-page-header titles + #prdChipRow chips sit. */
.doc-editor-content{max-width:760px;margin:0 auto;padding:8px 24px 80px;min-height:100%;counter-reset:list-counter;}
/* Blocks */
.doc-block{outline:none;caret-color:var(--text);color:var(--text);line-height:1.7;padding:3px 6px;border-radius:var(--r-sm);margin:1px 0;min-height:1.7em;word-break:break-word;transition:background .12s;}
.doc-block:empty::before{content:'Type / for commands…';color:var(--muted-light);pointer-events:none;}
.doc-block:hover,.doc-block:focus{background:var(--bg-hover);}
.doc-block-h1{font-size:2em;font-weight:700;letter-spacing:-.5px;margin-top:.6em;}
.doc-block-h2{font-size:1.5em;font-weight:700;letter-spacing:-.3px;margin-top:.5em;}
.doc-block-h3{font-size:1.2em;font-weight:700;letter-spacing:-.2px;margin-top:.4em;}
.doc-block-bullet{padding-left:1.6em;position:relative;}
.doc-block-bullet::before{content:'•';position:absolute;left:.4em;color:var(--muted);}
.doc-block-numbered{padding-left:1.6em;position:relative;counter-increment:list-counter;}
.doc-block-numbered::before{content:counter(list-counter)'.';position:absolute;left:.1em;color:var(--muted);}
.doc-block-quote{border-left:3px solid var(--accent);padding-left:14px;color:var(--muted);font-style:italic;margin:4px 0;}
.doc-block-callout{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:12px 14px;margin:4px 0;}
.callout-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;}
.callout-text{flex:1;outline:none;caret-color:var(--text);color:var(--text);}
.doc-block-code{font-family:var(--mono);font-size:12.5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;white-space:pre-wrap;tab-size:2;margin:4px 0;color:var(--text-2);}
.doc-block-divider{padding:8px 0;cursor:default;}
.doc-block-divider:hover,.doc-block-divider:focus{background:transparent;}
.doc-block-divider hr{border:none;border-top:1px solid var(--border);margin:0;}
.doc-block-todo{display:flex;align-items:flex-start;gap:8px;padding:3px 6px;}
.doc-block-todo:hover,.doc-block-todo:focus-within{background:var(--bg-hover);border-radius:var(--r-sm);}
.todo-check{flex-shrink:0;margin-top:3px;accent-color:var(--accent);}
.todo-text{flex:1;outline:none;caret-color:var(--text);color:var(--text);}
/* Slash command menu — matches .assignee-dropdown / .suggest-card panel style */
.slash-menu{position:absolute;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);min-width:210px;z-index:500;display:none;flex-direction:column;overflow:hidden;}
.slash-menu.open{display:flex;animation:fadeUp .15s cubic-bezier(.16,1,.3,1) both;}
.slash-menu-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s;}
.slash-menu-item:hover,.slash-menu-item.active{background:var(--bg-hover);color:var(--accent);}
.slash-menu-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);flex-shrink:0;}
/* Inline format toolbar */
.inline-toolbar{position:absolute;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);display:none;align-items:center;gap:2px;padding:4px 6px;z-index:500;}
.inline-toolbar.open{display:flex;animation:fadeUp .12s ease both;}
.inline-toolbar button{background:none;border:none;cursor:pointer;color:var(--text-2);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:13px;font-family:var(--font);font-weight:700;transition:all .12s;}
.inline-toolbar button:hover{background:var(--bg-hover);color:var(--accent);}
/* Dark mode */
[data-theme="dark"] .doc-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .doc-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);}
[data-theme="dark"] .doc-editor-overlay{background:var(--bg);}
[data-theme="dark"] .doc-editor-topbar{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .doc-editor-status-select{background:var(--bg-input);border-color:var(--border);color:var(--text);}
[data-theme="dark"] .doc-block:hover,[data-theme="dark"] .doc-block:focus{background:var(--bg-hover);}
[data-theme="dark"] .doc-block-todo:hover,[data-theme="dark"] .doc-block-todo:focus-within{background:var(--bg-hover);}
[data-theme="dark"] .doc-block-code{background:var(--bg-input);border-color:var(--border);}
[data-theme="dark"] .doc-callout-info{background:color-mix(in srgb,var(--accent) 12%,transparent);}
[data-theme="dark"] .slash-menu,[data-theme="dark"] .inline-toolbar{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .slash-menu-icon{background:var(--bg);border-color:var(--border);}
[data-theme="dark"] .doc-editor-body::-webkit-scrollbar-thumb{background:var(--border);}
[data-theme="dark"] .doc-save-indicator{background:var(--bg);border-color:var(--border);}
/* Doc page header (Notion-style).
padding-left 80px so the emoji icon + title share the same x-axis as
the body block text — block-row's .block-actions (56px) + content
padding-left (24px) lands the doc-block at +80px from the box edge. */
.doc-page-header { max-width:760px; margin:0 auto; padding:48px 24px 8px 80px; position:relative; }
/* PRD chip row (Health Check + Linked Hypothesis/Research). Same column
geometry as page-header + content so chips don't float off to the left
of the centered box. :empty hides the bar for non-PRD docs so no
stray vertical space gets reserved. */
#prdChipRow { max-width:760px; margin:8px auto 0; padding:0 24px 0 80px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; }
#prdChipRow:empty { display:none; }
.doc-page-icon-wrap { position:relative; display:inline-block; margin-bottom:8px; }
.doc-page-icon { font-size:52px; line-height:1.1; cursor:pointer; background:none; border:none; padding:4px 6px; border-radius:var(--r-md); transition:background .15s; display:block; }
.doc-page-icon:hover { background:var(--bg-hover); }
.doc-emoji-picker { position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:12px; z-index:600; width:280px; display:none; }
.doc-emoji-picker.open { display:block; animation:fadeUp .15s cubic-bezier(.16,1,.3,1) both; }
.doc-emoji-picker-title { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.doc-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.doc-emoji-btn { font-size:22px; cursor:pointer; background:none; border:none; padding:4px; border-radius:var(--r-sm); transition:background .12s; line-height:1.2; text-align:center; }
.doc-emoji-btn:hover { background:var(--bg-hover); }
.doc-page-title { font-size:2.5em; font-weight:800; color:var(--text); letter-spacing:-.6px; line-height:1.2; outline:none; caret-color:var(--text); word-break:break-word; min-height:1.2em; margin-bottom:16px; }
.doc-page-title:empty::before { content:attr(placeholder); color:var(--muted-light); pointer-events:none; }
/* Block row wrapper */
.block-row { display:flex; align-items:flex-start; gap:0; position:relative; }
.block-row:hover .block-actions, .block-row:focus-within .block-actions { opacity:1; }
.block-actions { display:flex; align-items:center; gap:1px; opacity:0; transition:opacity .15s; flex-shrink:0; padding-top:5px; width:52px; justify-content:flex-end; margin-right:4px; }
.block-add-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:16px; line-height:1; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:all .12s; padding:0; }
.block-add-btn:hover { background:var(--bg-hover); color:var(--accent); }
.block-drag-handle { background:none; border:none; cursor:grab; color:var(--muted); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:all .12s; padding:0; }
.block-drag-handle:hover { background:var(--bg-hover); color:var(--text); }
.block-drag-handle:active { cursor:grabbing; }
.block-row .doc-block { flex:1; min-width:0; }
.dragging-source { opacity: 0.25; }
/* Dragging styles */
.block-drag-line { position:absolute; left:0; right:0; height:2px; background:var(--accent); border-radius:2px; pointer-events:none; z-index:400; }
/* Slash menu improvements */
.slash-menu { min-width:260px; max-height:400px; overflow-y:auto; }
.slash-menu-section { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; padding:10px 14px 4px; }
.slash-menu-info { display:flex; flex-direction:column; gap:1px; }
.slash-menu-name { font-size:13px; font-weight:600; color:var(--text); }
.slash-menu-desc { font-size:11px; color:var(--muted); }
.slash-menu-item { align-items:center; gap:10px; }
.slash-menu-item:hover .slash-menu-name, .slash-menu-item.active .slash-menu-name { color:var(--accent); }
/* Inline toolbar separator */
.inline-sep { width:1px; height:18px; background:var(--border); margin:0 2px; flex-shrink:0; }
/* New callout variants */
.doc-callout-info { background:color-mix(in srgb,var(--accent) 10%,transparent); border-left:3px solid var(--accent); }
.doc-callout-warning { background:color-mix(in srgb,var(--yellow) 10%,transparent); border-left:3px solid var(--yellow); }
.doc-callout-success { background:color-mix(in srgb,var(--green) 10%,transparent); border-left:3px solid var(--green); }
/* Image blocks */
.doc-block-image-wrap { position:relative; border-radius:var(--r-md); overflow:hidden; margin:4px 0; cursor:pointer; }
.doc-block-image-wrap:hover .doc-block-image-hint { opacity:1; }
.doc-block-img { display:block; max-width:100%; border-radius:var(--r-md); }
.doc-block-image-hint { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:var(--surface); font-size:11px; padding:4px 10px; border-radius:20px; opacity:0; transition:opacity .15s; display:flex; align-items:center; gap:4px; cursor:pointer; }
.doc-block-image-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed var(--border); border-radius:var(--r-md); padding:32px; margin:4px 0; color:var(--muted); cursor:pointer; transition:border-color .15s; }
.doc-block-image-placeholder:hover { border-color:var(--accent); }
.doc-image-placeholder-text { font-size:13px; }
.doc-image-url-input { width:100%; max-width:360px; padding:6px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-family:var(--font); font-size:13px; color:var(--text); background:var(--bg-input); outline:none; margin-top:4px; }
.doc-image-url-input:focus { border-color:var(--accent); }
/* Word count footer */
.doc-word-count-bar { max-width:760px; margin:0 auto; padding:8px 24px 24px; font-size:11px; color:var(--muted); font-family:var(--mono); text-align:right; }
/* Doc card emoji icon */
.doc-card-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; line-height:1; color:var(--text-2); }
/* Dark mode additions */
[data-theme="dark"] .doc-emoji-picker { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .doc-block-image-placeholder { border-color:var(--border); }
[data-theme="dark"] .doc-image-url-input { background:var(--bg-input); border-color:var(--border); color:var(--text); }
/* ── Doc Card Additions ─────────────────────────────────────────── */
.doc-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;}
.doc-card-project{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-card-kickoff-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-sm);border:1.5px solid var(--green-light);background:transparent;color:var(--green);font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;flex-shrink:0;}
.doc-card-kickoff-btn:hover{background:var(--green-light);}
.doc-card-btn{background:none;border:none;cursor:pointer;color:var(--muted);opacity:0;transition:opacity .15s,color .12s;padding:3px;display:flex;align-items:center;border-radius:var(--r-sm);}
.doc-card:hover .doc-card-btn{opacity:1;}
.doc-card-btn:hover{color:var(--accent);background:var(--bg-hover);}
/* ── Kickoff Requests Page ──────────────────────────────────────── */
.kickoff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.kickoff-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:8px;}
.kickoff-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kickoff-card-header{display:flex;align-items:center;gap:6px;}
.kickoff-card-badges{display:flex;align-items:center;gap:5px;flex:1;flex-wrap:wrap;}
.kickoff-card-del{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);opacity:0;transition:opacity .15s,color .12s;padding:2px;display:flex;align-items:center;}
.kickoff-card:hover .kickoff-card-del{opacity:1;}
.kickoff-card-del:hover{color:var(--red);}
.kickoff-card-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.4;}
.kickoff-doc-ref-small,.kickoff-proj-ref{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kickoff-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.kickoff-card-meta{font-size:11px;color:var(--muted);font-family:var(--mono);}
.kickoff-card-date{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-family:var(--mono);}
/* Kickoff modal doc ref */
.kickoff-doc-ref{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-hover);border-radius:var(--r-md);border:1px solid var(--border);margin-bottom:16px;font-size:13px;color:var(--text);font-weight:500;}
/* Kickoff detail modal */
.kickoff-detail-badges{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.kickoff-detail-desc{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:14px;}
.kickoff-detail-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.kickoff-detail-row{display:flex;align-items:baseline;gap:10px;font-size:13.5px;}
.kickoff-detail-label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;min-width:100px;flex-shrink:0;}
.kickoff-doc-ref-badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text);}
.kickoff-detail-notes{padding:12px 14px;background:var(--bg-hover);border-radius:var(--r-md);border:1px solid var(--border);}
.kickoff-detail-notes p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:4px 0 0;}
[data-theme="dark"] .kickoff-card{background:var(--card);border-color:var(--border);}
[data-theme="dark"] .kickoff-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);}
[data-theme="dark"] .kickoff-doc-ref{background:var(--bg-input);border-color:var(--border);}
[data-theme="dark"] .kickoff-detail-notes{background:var(--bg-input);border-color:var(--border);}
/* Auto-linkified URLs inside user-entered text (descriptions, notes, comments…) */
.auto-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.auto-link:hover{text-decoration:none;opacity:.85;}
/* ── Cmd+K button (topbar) ───────────────────────────────────────── */
#btnCmdK { border: 1px solid var(--border); border-radius: var(--radius-md, 8px); background: var(--card); color: var(--text); transition: background .15s; }
#btnCmdK:hover { background: var(--bg-hover); }
#btnCmdK .btn-label { font-feature-settings: "tnum"; }
/* ── Status badge intent fix: "Planning" no longer collides with "Critical" ─ */
/* "Planning" was yellow (same as Critical) — move to info/cyan. */
.badge.badge-planning,
.badge[data-status="Planning"],
.badge[data-status="planning"] {
background: rgba(14,165,233,.12);
color: var(--intent-info, #0ea5e9);
}
/* ── Empty state polish (used by window.renderEmptyState) ────────── */
.empty-state .btn { font-size: 13px; }
.empty-state[role="status"] { outline: none; }
/* ── Sub-tabs row: horizontal scroll on narrow viewports ─────────── */
@media (max-width: 768px) {
.sub-tabs-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub-tabs-row { white-space: nowrap; }
.sub-tab { flex-shrink: 0; }
}
/* ══════════════════════════════════════════════════════════════════
── v3 EDITORIAL GLOBAL OVERRIDES (loads at end so cascade wins) ──
══════════════════════════════════════════════════════════════════ */
/* Use cream bg + Inter base on root */
html { background: var(--bg); }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Subtle scrollbar — editorial */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
/* Remove legacy heavy shadows on cards (border-first now) */
.card,
.chart-card,
.kpi-card {
box-shadow: none !important;
}
/* Remove any backdrop-blur leftover */
.topbar,
.modal-overlay,
.dropdown,
.menu {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Apply Inter to all inputs/selects/buttons baseline */
input, select, textarea, button {
font-family: var(--font-body);
}
/* Heading defaults — Fraunces serif */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
/* Page title in topbar uses Fraunces */
#pageTitle {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.015em;
}
/* A11y: keyboard focus ring for toggle switches (hidden checkbox + visible track span) */
input[role="switch"]:focus-visible + span {
outline: 2px solid var(--brand, var(--accent));
outline-offset: 2px;
border-radius: 13px;
}
/* ===== /css/nexora-theme.css?v=2 ===== */
/* ═══════════════════════════════════════════════
NEXORA THEME — Dark Mode Override Only
Load AFTER app.css
Light theme = original app.css (untouched)
═══════════════════════════════════════════════ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DARK THEME — variable block moved to css/tokens.css
(Consolidation Sprint / Day 4). This file now owns only
component-scoped overrides (login card, topbar, inputs,
cards, kanban, modal, etc.) which cannot live in a
token file. Do NOT re-add `[data-theme="dark"] { --var:… }`
here — canonical palette source is tokens.css.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Dark: Loading ──────────────────────────── */
[data-theme="dark"] .loading { background: var(--bg) !important; color: var(--text) !important; }
/* ── Dark: Login ────────────────────────────── */
[data-theme="dark"] .login-card {
background: rgba(22,22,31,0.85) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important;
box-shadow: var(--shadow-xl) !important;
}
[data-theme="dark"] .login-error { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.25) !important; }
[data-theme="dark"] .demo-acc { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .demo-acc:hover { background: var(--accent-light) !important; border-color: var(--accent) !important; }
/* ── Dark: Topbar ─────────────────────────────
Matches the light-mode glass recipe from v2/topbar.css: translucent
surface + saturating blur, so both themes share the "floating" feel.
No !important — v2/topbar.css uses color-mix() and can be overridden by
normal cascade order (this file loads later). */
[data-theme="dark"] .topbar {
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom-color: var(--border);
}
/* ── Dark: Inputs ───────────────────────────── */
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea, [data-theme="dark"] .assignee-tags,
[data-theme="dark"] .search-input, [data-theme="dark"] .filter-select,
[data-theme="dark"] .chat-input, [data-theme="dark"] .kb-search,
[data-theme="dark"] .kb-custom-select-btn, [data-theme="dark"] .kb-content-textarea,
[data-theme="dark"] .kb-transcript-lines, [data-theme="dark"] .kb-summary-content,
[data-theme="dark"] .doc-editor-status-select {
background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important;
}
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus, [data-theme="dark"] .assignee-tags:focus-within,
[data-theme="dark"] .chat-input:focus, [data-theme="dark"] .kb-search:focus {
background: var(--surface) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(129,140,248,.12) !important;
}
[data-theme="dark"] .form-select option, [data-theme="dark"] .filter-select option { background: var(--card) !important; color: var(--text) !important; }
/* ── Dark: Cards ────────────────────────────── */
[data-theme="dark"] .kpi-card, [data-theme="dark"] .chart-card,
[data-theme="dark"] .team-card, [data-theme="dark"] .eval-card,
[data-theme="dark"] .profile-card, [data-theme="dark"] .avail-kpi,
[data-theme="dark"] .suggest-card, [data-theme="dark"] .timeline-card,
[data-theme="dark"] .api-key-card, [data-theme="dark"] .tree-project-block {
background: var(--card) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .strip-item { background: var(--card) !important; }
/* ── Dark: Tables ───────────────────────────── */
[data-theme="dark"] .table-wrap { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] thead th { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,0.03) !important; }
/* ── Dark: Kanban ───────────────────────────── */
[data-theme="dark"] .kanban-project-card, [data-theme="dark"] .gantt-project-card { background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(34,211,238,0.04)) !important; border-color: var(--border) !important; }
[data-theme="dark"] .kanban-cols, [data-theme="dark"] .gantt-wrap { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .kanban-col { background: rgba(255,255,255,0.02) !important; border-color: var(--border) !important; }
[data-theme="dark"] .kanban-count { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .task-card { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .task-card:hover { border-color: rgba(129,140,248,0.25) !important; }
[data-theme="dark"] .task-card.task-card-overdue { border-color: rgba(252,165,165,0.35) !important; background: linear-gradient(135deg, rgba(252,165,165,0.06), var(--card)) !important; }
[data-theme="dark"] .kanban-progress-bar, [data-theme="dark"] .gantt-progress-bar,
[data-theme="dark"] .tree-progress-bar, [data-theme="dark"] .import-progress-bar,
[data-theme="dark"] .cat-bar-track { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .kd-clone { background: var(--card) !important; border-color: var(--border) !important; }
/* ── Dark: Modal / Drawer ───────────────────── */
[data-theme="dark"] .modal, [data-theme="dark"] .confirm-box { background: var(--card) !important; border: 1px solid var(--border) !important; }
[data-theme="dark"] .drawer { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .assignee-dropdown { background: var(--card) !important; border-color: var(--accent) !important; }
[data-theme="dark"] .assignee-dropdown-item:hover { background: rgba(129,140,248,0.08) !important; }
[data-theme="dark"] .assignee-dropdown-item.selected { background: rgba(196,181,253,0.10) !important; color: #c4b5fd !important; }
[data-theme="dark"] .type-tab { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--muted) !important; }
/* ── Dark: Toast ────────────────────────────── */
[data-theme="dark"] .toast { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .toast.success { background: rgba(74,222,128,0.08) !important; border-color: rgba(74,222,128,0.25) !important; color: #4ade80 !important; }
[data-theme="dark"] .toast.error { background: rgba(252,165,165,0.08) !important; border-color: rgba(252,165,165,0.25) !important; color: #fca5a5 !important; }
/* ── Dark: Tabs ─────────────────────────────── */
[data-theme="dark"] .tab-btn.tab-active { background: var(--card) !important; color: var(--text) !important; }
/* ── Dark: Badges ───────────────────────────── */
[data-theme="dark"] .badge-green { background: rgba(74,222,128,0.10) !important; color: #4ade80 !important; }
[data-theme="dark"] .badge-blue { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; }
[data-theme="dark"] .badge-yellow { background: rgba(253,230,138,0.08) !important; color: #fde68a !important; }
[data-theme="dark"] .badge-red { background: rgba(252,165,165,0.08) !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-purple { background: rgba(196,181,253,0.08) !important; color: #c4b5fd !important; }
[data-theme="dark"] .badge-gray { background: rgba(255,255,255,0.06) !important; color: var(--muted) !important; }
[data-theme="dark"] .badge-teal { background: rgba(94,234,212,0.08) !important; color: #5eead4 !important; }
[data-theme="dark"] .badge-orange { background: rgba(253,186,116,0.08) !important; color: #fdba74 !important; }
/* ── Dark: Score / Activity / File ──────────── */
[data-theme="dark"] .score-pill.s1 { background: rgba(252,165,165,0.08) !important; color: #fca5a5 !important; }
[data-theme="dark"] .score-pill.s2 { background: rgba(253,186,116,0.08) !important; color: #fdba74 !important; }
[data-theme="dark"] .score-pill.s3 { background: rgba(253,230,138,0.08) !important; color: #fde68a !important; }
[data-theme="dark"] .score-pill.s4 { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; }
[data-theme="dark"] .score-pill.s5 { background: rgba(74,222,128,0.10) !important; color: #4ade80 !important; }
[data-theme="dark"] .score-btn { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .score-btn.selected { background: rgba(253,230,138,0.08) !important; color: #fde68a !important; }
[data-theme="dark"] .activity-icon.created { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; }
[data-theme="dark"] .activity-icon.updated { background: rgba(253,230,138,0.08) !important; color: #fde68a !important; }
[data-theme="dark"] .activity-icon.status { background: rgba(74,222,128,0.10) !important; color: #4ade80 !important; }
[data-theme="dark"] .activity-icon.comment { background: rgba(196,181,253,0.08) !important; color: #c4b5fd !important; }
[data-theme="dark"] .activity-icon.deleted { background: rgba(252,165,165,0.08) !important; color: #fca5a5 !important; }
[data-theme="dark"] .file-ext-badge.pdf { background: rgba(252,165,165,0.08) !important; color: #fca5a5 !important; }
[data-theme="dark"] .file-ext-badge.image { background: rgba(253,230,138,0.08) !important; color: #fde68a !important; }
[data-theme="dark"] .file-ext-badge.text { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; }
/* ── Dark: Tags / Chips ─────────────────────── */
[data-theme="dark"] .assignee-tag { background: rgba(196,181,253,0.10) !important; color: #c4b5fd !important; border-color: rgba(196,181,253,0.2) !important; }
[data-theme="dark"] .type-badge.epic { background: rgba(196,181,253,0.10) !important; color: #c4b5fd !important; border-color: rgba(196,181,253,0.2) !important; }
[data-theme="dark"] .type-badge.task { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; border-color: rgba(96,165,250,0.2) !important; }
[data-theme="dark"] .person-chip.pm { background: rgba(196,181,253,0.08) !important; color: #c4b5fd !important; border-color: rgba(196,181,253,0.15) !important; }
[data-theme="dark"] .person-chip.pmo { background: rgba(94,234,212,0.08) !important; color: #5eead4 !important; border-color: rgba(94,234,212,0.15) !important; }
[data-theme="dark"] .role-pill.manager { color: #c4b5fd !important; }
[data-theme="dark"] .role-pill.pm { background: rgba(96,165,250,0.10) !important; color: #60a5fa !important; }
[data-theme="dark"] .rqp.rqp-pm { background: rgba(96,165,250,0.06) !important; border-color: rgba(96,165,250,0.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .obstacle-box { background: rgba(252,165,165,0.06) !important; border-color: rgba(252,165,165,0.15) !important; color: #fca5a5 !important; }
[data-theme="dark"] .solution-box { background: rgba(74,222,128,0.06) !important; border-color: rgba(74,222,128,0.15) !important; color: #4ade80 !important; }
/* ── Dark: AI Chat ──────────────────────────── */
[data-theme="dark"] .ai-panel, [data-theme="dark"] .ai-history-item, [data-theme="dark"] .ai-prompt-item { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ai-header { background: linear-gradient(90deg, var(--surface), var(--bg)) !important; }
[data-theme="dark"] .ai-sub-header, [data-theme="dark"] .quick-prompts { background: var(--surface) !important; }
[data-theme="dark"] .chat-messages { background: var(--bg) !important; }
[data-theme="dark"] .chat-input-row { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .msg-bubble { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .msg.user .msg-bubble { background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(129,140,248,0.08)) !important; border-color: rgba(129,140,248,0.25) !important; color: var(--text) !important; }
[data-theme="dark"] .msg-bubble.error-bubble { background: rgba(252,165,165,0.06) !important; border-color: rgba(252,165,165,0.2) !important; }
[data-theme="dark"] .msg-avatar { background: linear-gradient(135deg, rgba(129,140,248,0.12), rgba(129,140,248,0.06)) !important; border-color: rgba(129,140,248,0.2) !important; }
[data-theme="dark"] .msg.user .msg-avatar { background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(34,211,238,0.06)) !important; border-color: rgba(34,211,238,0.2) !important; }
[data-theme="dark"] .qp { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ai-history-item-del, [data-theme="dark"] .ai-prompt-edit, [data-theme="dark"] .ai-prompt-del { background: var(--bg-input) !important; }
[data-theme="dark"] .upload-zone, [data-theme="dark"] .proj-file-zone { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .proj-file-zone:hover { background: rgba(129,140,248,0.06) !important; border-color: var(--accent) !important; }
[data-theme="dark"] .upload-zone.has-file, [data-theme="dark"] .proj-file-zone.has-file { background: rgba(74,222,128,0.06) !important; border-color: rgba(74,222,128,0.2) !important; }
[data-theme="dark"] .upload-zone-wrap { background: var(--surface) !important; }
[data-theme="dark"] .upload-zone-icon { background: rgba(196,181,253,0.08) !important; }
[data-theme="dark"] .upload-clear { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .upload-clear:hover { border-color: rgba(252,165,165,0.4) !important; color: #fca5a5 !important; background: rgba(252,165,165,0.06) !important; }
[data-theme="dark"] .proj-file-chip { background: var(--bg-input) !important; }
[data-theme="dark"] .error-detail { background: var(--card) !important; }
/* ── Dark: Gantt / Avail / Misc ─────────────── */
[data-theme="dark"] .gantt-header-row, [data-theme="dark"] .gantt-header-row th { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .gantt-label-epic { color: #c4b5fd !important; }
[data-theme="dark"] .avail-timeline-wrap { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .avail-member-row:hover, [data-theme="dark"] .avail-date-header { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .skill-chip { border-color: rgba(56,189,248,0.15) !important; }
[data-theme="dark"] .skill-filter-btn { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .pagination { background: var(--surface) !important; }
[data-theme="dark"] .pg-btn { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--muted) !important; }
[data-theme="dark"] .pg-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
[data-theme="dark"] .pg-size { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .tree-task, [data-theme="dark"] .tree-task-standalone { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .tree-task:hover { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .tree-subtask { background: var(--surface) !important; }
[data-theme="dark"] .tree-subtask:hover { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .tree-project-stats { background: var(--surface) !important; }
[data-theme="dark"] .dl-btn { background: var(--bg-input) !important; border-color: var(--border) !important; }
[data-theme="dark"] .appraisal-summary { background: linear-gradient(135deg, var(--surface), var(--card)) !important; }
[data-theme="dark"] .mini-task-item:hover, [data-theme="dark"] .member-task-row:hover { background: rgba(129,140,248,0.06) !important; }
[data-theme="dark"] .doc-prompts { background: linear-gradient(90deg, rgba(129,140,248,0.06), rgba(34,211,238,0.04)) !important; }
[data-theme="dark"] .kb-graph-tooltip { background: rgba(22,22,31,0.95) !important; border-color: var(--border) !important; }
[data-theme="dark"] .kb-graph-tooltip .tt-title { color: var(--text) !important; }
[data-theme="dark"] .kb-graph-tooltip .tt-preview { color: var(--text-2) !important; }
[data-theme="dark"] .star.off { color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .progress-track, [data-theme="dark"] .progress-track-sm { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] #typeTab-Epic.active { background: #8b5cf6 !important; border-color: #8b5cf6 !important; }
/* Dark sidebar now driven by CSS vars (--sidebar-bg, --sidebar-border, --text, --muted).
Only minimal tweaks remain — scrollbar + icon glow. */
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .logo-icon { box-shadow: 0 4px 14px rgba(99,102,241,0.35); }
/* ── Dark: Scrollbars ───────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
/* ===== /css/a11y.css?v=2 ===== */
/* ============================================================
a11y.css - Accessibility overrides for Nexora
Loaded AFTER app.css. Do not edit app.css; this file wins
by source order and (where needed) targeted specificity.
============================================================ */
/* ------------------------------------------------------------
1. Contrast: bump --muted-light so small text meets WCAG AA
------------------------------------------------------------
app.css uses --muted-light for hints, placeholders, empty
states, etc. The defaults (var(--text-muted) light / var(--text-muted) dark)
fail AA on the surface colors. Override globally — the
token is only used for ancillary muted text.
------------------------------------------------------------ */
:root {
--muted-light: #52525b; /* AA on #fafafa / #ffffff backgrounds */
}
html[data-theme="dark"] {
--muted-light: #a1a1aa; /* AA on #0a0a0a / #18181b backgrounds */
}
/* Native placeholders inherit color reliably across browsers */
::placeholder { color: var(--muted-light); opacity: 1; }
::-webkit-input-placeholder { color: var(--muted-light); }
::-moz-placeholder { color: var(--muted-light); opacity: 1; }
/* ------------------------------------------------------------
2. Reduced motion: honour prefers-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;
}
/* Kill the press-down on buttons */
.btn:active { transform: none !important; }
/* Kill slide-in keyframes on chat msgs, toasts, modals */
.aiw-msg,
.toast,
.modal,
.modal-overlay {
animation: none !important;
transform: none !important;
}
}
/* ------------------------------------------------------------
3. Focus ring
------------------------------------------------------------
MIGRATED (Consolidation Sprint / Day 6): the focus ring is
now the unified halo in v3/a11y_fixes.css, driven by the
`--ring-*` tokens declared in tokens.css. Component overrides
redefine `--ring-color` locally (e.g. .btn-danger). This file
no longer defines any `:focus-visible` rule to avoid
competing with the unified halo.
------------------------------------------------------------ */
/* ------------------------------------------------------------
4. Skip-to-content link
------------------------------------------------------------
MIGRATED (Consolidation Sprint / Day 7): the v2 skip-link
definition was superseded by the stronger v3/a11y_fixes.css
version (z-index 99999, brand-tone background, stronger
focus reveal). This file no longer defines .skip-link.
------------------------------------------------------------ */
/* ------------------------------------------------------------
5. role="button" affordances on div-buttons
------------------------------------------------------------ */
[role="button"] { cursor: pointer; }
/* :focus-visible ring inherited from the unified halo in
v3/a11y_fixes.css — no per-role override needed. */
/* ------------------------------------------------------------
6. Disabled state: clearer + still allows tooltip on hover
------------------------------------------------------------ */
.btn:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: auto; /* let tooltips/titles still fire */
}
/* ------------------------------------------------------------
7. Touch targets: 44px min on coarse pointers (mobile)
------------------------------------------------------------ */
@media (pointer: coarse) {
.btn { min-height: 44px; }
.btn-sm { min-height: 36px; }
.nav-item { min-height: 44px; }
.form-input,
.form-select { min-height: 44px; }
}
/* ------------------------------------------------------------
8. High-contrast mode (prefers-contrast: more)
------------------------------------------------------------ */
@media (prefers-contrast: more) {
:root {
--border: #000;
--muted: #333;
}
html[data-theme="dark"] {
--border: #fff;
--muted: #ddd;
}
}
/* ------------------------------------------------------------
9. Screen-reader-only utility
------------------------------------------------------------ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------
10. Modal stacking: ensure overlay sits above all content
------------------------------------------------------------ */
.modal-overlay:not([aria-hidden="true"]) {
z-index: 9000;
}
/* ------------------------------------------------------------
11. Always-visible scrollbars (macOS overlay-scrollbar fix)
------------------------------------------------------------ */
.kanban,
.table-wrap,
.content {
scrollbar-width: thin;
scrollbar-color: var(--muted-light) transparent;
}
.kanban::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.content::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.kanban::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
background: var(--muted-light);
border-radius: 4px;
}
.kanban::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
background: transparent;
}
/* ===== /css/mobile.css?v=5 ===== */
/* ============================================================
mobile.css — Responsive refinements layered on top of app.css
Breakpoints: 1280 / 900 / 600 / 400 (consolidated from 8 → 4)
Mobile-first where it helps; max-width queries where shrinking.
============================================================ */
/* ---------- Global touch / safe-area defaults ---------- */
:root {
--safe-top: env(safe-area-inset-top);
--safe-bottom: env(safe-area-inset-bottom);
}
html {
-webkit-text-size-adjust: 100%;
}
/* Hide scrollbars on horizontally-scrollable mobile strips */
.topbar,
.sub-tabs,
.kanban-cols {
scrollbar-width: none;
}
.topbar::-webkit-scrollbar,
.sub-tabs::-webkit-scrollbar,
.kanban-cols::-webkit-scrollbar {
display: none;
}
/* ============================================================
Bottom nav (styled here, displayed only on mobile)
============================================================ */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
background: var(--card);
border-top: 1px solid var(--border);
padding: 6px env(safe-area-inset-right)
calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
justify-content: space-around;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 4px;
font-size: 10px;
color: var(--muted);
cursor: pointer;
background: transparent;
border: none;
min-height: 48px;
font-weight: 500;
transition: color 0.15s ease;
}
.bottom-nav-item:hover {
color: var(--text-2);
}
.bottom-nav-item.active {
color: var(--accent);
}
.bottom-nav-item svg {
width: 20px;
height: 20px;
}
/* ============================================================
Sub-tabs: horizontally scrollable with snap
============================================================ */
.sub-tabs {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.sub-tab {
scroll-snap-align: start;
flex-shrink: 0;
}
/* ============================================================
≤1280px — tighten dashboard grids a notch
============================================================ */
@media (max-width: 1280px) {
.dash-grid-70-30 {
grid-template-columns: 65% 35%;
}
.content {
padding: 16px;
}
}
/* ============================================================
≤900px — tablet & phone landscape consolidated.
Merged in: former 1024 (tablet stacking), 768 (topbar/KPIs/tables),
plus the global horizontal-overflow safety net and sidebar drawer.
Where 768 and 1024 disagreed (KPIs, summary-strip), the
lower breakpoint wins — i.e. the 768 values are kept.
============================================================ */
@media (max-width: 900px) {
/* Global safety nets — prevent stray horizontal scrolling */
html, body { overflow-x: hidden; }
.main { overflow-x: hidden; max-width: 100vw; }
.content { max-width: 100%; }
.page-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 60vw;
}
/* Dashboard grids stack (from former ≤1024) */
.dash-grid-70-30,
.dash-grid-2,
.dash-grid-3 {
grid-template-columns: 1fr;
gap: 16px;
}
/* KPI: 2 cols (former ≤768 wins over ≤1024's 3-col) */
.kpi-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* Summary strip: 2 cols (former ≤768 wins over ≤1024's 3-col) */
.summary-strip {
grid-template-columns: repeat(2, 1fr);
}
/* Sidebar becomes off-canvas drawer */
.sidebar {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
width: 280px;
z-index: 100;
transition: left 0.25s ease;
overflow-y: auto;
}
body.sidebar-open .sidebar {
left: 0;
box-shadow: var(--shadow-xl);
}
body.sidebar-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
body.sidebar-open {
overflow: hidden;
}
.main {
margin-left: 0;
width: 100%;
}
.sidebar-toggle {
display: inline-flex !important;
}
/* Kanban: 4 status columns with horizontal scroll.
240px min so cards stay readable (former ≤900 wins over
≤1024's 220px). User swipes to reach Done/Review on phone. */
.kanban-cols {
grid-template-columns: repeat(4, minmax(240px, 1fr));
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 12px;
}
/* Topbar: compact, horizontally scrollable for actions (from former ≤768) */
.topbar {
padding: 0 12px;
padding-top: env(safe-area-inset-top);
height: 52px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.topbar-left,
.topbar-right {
flex-shrink: 0;
}
.topbar-date {
display: none;
}
/* Icon-only buttons in topbar (collapse text labels) */
.topbar .btn .btn-label,
.topbar .btn-text {
display: none;
}
.topbar .btn {
padding: 0 10px;
}
/* Content padding tighter */
.content {
padding: 12px;
}
/* Bottom nav appears, main gets bottom padding for it */
.bottom-nav {
display: flex;
}
.main {
padding-bottom: 64px;
}
/* Chart cards: trim inner padding so they don't waste screen space */
.chart-card {
padding: 16px;
}
/* Section-title gap from previous chart was tuned for desktop */
.section-title {
margin-top: 4px;
}
/* Tables scroll cleanly inside their wrap (from former ≤768) */
.table-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.table-wrap > table {
/* Natural width so columns stay readable; wrap handles overflow */
width: max-content;
min-width: 100%;
}
.table-wrap thead th,
.table-wrap tbody td {
padding: 10px 12px;
font-size: 12.5px;
white-space: nowrap;
}
/* Pagination strip below tables should never push the page wide */
[id$="Pagination"] {
flex-wrap: wrap;
gap: 6px;
font-size: 12px;
}
/* Bottom-nav: ensure it doesn't overlap modal bottom action bar
(from former ≤768) */
body.modal-open .bottom-nav {
display: none;
}
}
/* ============================================================
≤600px — phone portrait: kanban carousel, modal full.
Merged in: former 700 (KPI tighter) and 520 (single-col KPIs,
tighter typography). 520's rules win where they conflict with
600's, since 520 was the lower (more specific) breakpoint.
============================================================ */
@media (max-width: 600px) {
/* KPI: tighter at phone portrait (from former ≤700, then ≤520
forces single column with !important to override app.css). */
.kpi-grid {
grid-template-columns: 1fr !important;
gap: 8px;
}
.kpi-card {
padding: 12px;
}
/* Summary strip: 1 col (from former ≤520) */
.summary-strip {
grid-template-columns: 1fr;
}
.topbar .topbar-title,
.topbar h1,
.page-title {
font-size: 15px;
}
.content {
padding: 10px;
}
/* Opt-in "card mode" for tables tagged .table-stack — kept as escape
hatch for tables that carry data-label attrs on every . */
.table-stack,
.table-stack thead,
.table-stack tbody,
.table-stack tr,
.table-stack th,
.table-stack td {
display: block;
width: 100%;
}
.table-stack thead {
display: none;
}
.table-stack tr {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px 12px;
margin-bottom: 10px;
box-shadow: var(--shadow-xs);
}
.table-stack td {
border: none;
padding: 4px 0;
text-align: left;
white-space: normal;
}
.table-stack td::before {
content: attr(data-label) ':';
font-weight: 600;
color: var(--muted);
margin-right: 8px;
}
.table-stack td:empty,
.table-stack td[data-label='']::before {
display: none;
}
/* Kanban: horizontal swipeable carousel */
.kanban-cols {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 8px;
}
.kanban-col {
min-width: 85vw;
scroll-snap-align: start;
flex-shrink: 0;
}
/* Optional column-dots indicator (CSS-only stub) */
.kanban-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 6px;
}
.kanban-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
}
.kanban-dots span.active {
background: var(--accent);
}
/* Modal: full-screen sheet.
iOS Safari's URL bar makes plain 100vh extend past the visible area, so
the bottom action buttons get pushed off-screen and the inner scroll
can't reach them. Use 100dvh (with vh fallback) and reserve room for
safe-area-inset-bottom. Action bar is sticky so Save stays reachable
regardless of how far the user has scrolled. */
.modal-overlay {
padding: 0;
align-items: stretch;
}
.modal {
max-width: 100vw !important;
width: 100vw;
height: 100vh;
max-height: 100vh;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
padding: 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-header {
position: sticky;
top: 0;
background: var(--card);
padding: 12px 0;
border-bottom: 1px solid var(--border);
z-index: 1;
}
.modal-footer,
.modal-actions {
position: sticky;
bottom: 0;
background: var(--card);
padding: 12px 0;
border-top: 1px solid var(--border);
margin-top: auto;
flex-shrink: 0;
z-index: 2;
}
/* Filter toolbars wrap full-width */
.toolbar {
flex-wrap: wrap;
gap: 8px;
}
.toolbar .search-box,
.search-box {
width: 100%;
max-width: none;
flex: 1 1 100%;
}
/* Toolbar selects: one full row each (from former ≤520 — wins
over ≤600's 50% rule since 520 was the lower breakpoint). */
.toolbar .filter-select,
.filter-select {
flex: 1 1 100%;
min-width: 0;
}
/* Result-count pill wraps to its own line gracefully (from former ≤520) */
.result-count {
flex: 1 1 100%;
}
/* Form rows collapse to single column */
.form-row {
grid-template-columns: 1fr !important;
gap: 10px;
}
/* Sub-tab strip: scroll-snap on phones for sticky-but-scrollable nav */
.sub-tabs-bar { scroll-snap-type: x mandatory; padding-bottom: 4px; }
.sub-tab { scroll-snap-align: start; min-height: 40px; padding: 8px 14px; }
.sub-tab-active { box-shadow: inset 0 -2px 0 var(--accent); }
/* Topbar Cmd+K: hide the "⌘K" hint label on phones (icon only) */
#btnCmdK .btn-label { display: none; }
}
/* ============================================================
≤400px — tiny phones / foldables closed: extra compaction
============================================================ */
@media (max-width: 400px) {
.content {
padding: 8px;
}
.modal {
padding: 12px;
}
.btn {
padding: 0 10px;
}
.sidebar {
width: 88vw;
}
}
/* ============================================================
Touch-friendly sizing for coarse pointers
============================================================ */
@media (pointer: coarse) {
.btn-sm {
min-height: 36px;
}
.btn {
min-height: 44px;
}
a,
button,
[role='button'],
.sub-tab,
.filter-select,
.bottom-nav-item {
min-height: 44px;
}
input,
select,
textarea {
min-height: 44px;
font-size: 16px; /* prevent iOS auto-zoom on focus */
}
}
/* ============================================================
Reduced motion — kill the sidebar slide transition
============================================================ */
@media (prefers-reduced-motion: reduce) {
.sidebar {
transition: none;
}
}
/* ===== /css/print.css?v=1 ===== */
@media print {
body {
background: white !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.sidebar,
.topbar,
.sub-tabs-bar,
.bottom-nav,
.skip-link,
.toolbar,
.kanban-controls,
.nx-cmdpalette,
.modal-overlay,
.toast,
.ai-widget-fab,
.sv-menu,
.exp-menu,
.help-tooltip {
display: none !important;
}
.main {
margin-left: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.content {
padding: 0 !important;
}
.page {
padding: 12mm !important;
display: none;
}
.page.active {
display: block !important;
}
.card,
.kpi-card,
.chart-card {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd !important;
background: white !important;
}
table {
width: 100% !important;
border-collapse: collapse !important;
page-break-inside: auto;
}
thead {
display: table-header-group;
}
tr {
page-break-inside: avoid;
}
thead th {
background: #f5f5f5 !important;
color: #000 !important;
border-bottom: 1px solid #999 !important;
}
td,
th {
padding: 6px 8px !important;
font-size: 11px !important;
border-bottom: 1px solid #eee !important;
color: #000 !important;
}
a {
color: inherit !important;
text-decoration: none !important;
}
.badge,
.pill {
border: 1px solid #999 !important;
padding: 1px 6px !important;
background: transparent !important;
color: #000 !important;
}
.print-header {
display: block !important;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #000;
}
.print-header h1 {
font-size: 18px;
margin: 0;
color: #000;
}
.print-header .meta {
font-size: 11px;
color: #555;
margin-top: 4px;
}
@page {
margin: 12mm 10mm;
size: A4;
}
}
/* ===== /css/polish.css?v=3 ===== */
/* ============================================================================
polish.css — Nexora SaaS-grade polish layer
Layered on top of app.css. Pure CSS, respects prefers-reduced-motion.
============================================================================ */
/* ---------------------------------------------------------------------------
1. Consistent kbd styling
--------------------------------------------------------------------------- */
kbd, .kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
background: var(--bg-hover);
color: var(--text-2);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 5px;
line-height: 1;
}
[data-theme="dark"] kbd,
[data-theme="dark"] .kbd {
background: rgba(255, 255, 255, .06);
}
/* ---------------------------------------------------------------------------
2. Help dot (info icon used by help.js)
--------------------------------------------------------------------------- */
.help-dot,
button.help-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--bg-hover);
color: var(--muted);
border: none;
padding: 0;
cursor: help;
font-size: 10px;
font-weight: 700;
margin-left: 6px;
vertical-align: middle;
line-height: 1;
transition: background .15s, color .15s;
}
.help-dot:hover,
.help-dot:focus-visible {
background: var(--accent-light);
color: var(--accent);
outline: none;
}
/* ---------------------------------------------------------------------------
3. Consistent badge system
--------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.4;
white-space: nowrap;
}
.badge-accent { background: var(--accent-light); color: var(--accent); }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-yellow { background: var(--yellow-light); color: var(--yellow); }
.badge-red { background: var(--red-light); color: var(--red); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.badge-muted { background: var(--bg-hover); color: var(--muted); }
.badge-dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ---------------------------------------------------------------------------
4. Menu dropdown system (saved_views, exporter, etc.)
--------------------------------------------------------------------------- */
.nx-menu {
position: absolute;
min-width: 220px;
max-width: 340px;
padding: 4px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
z-index: 90;
animation: nxMenuPop .18s cubic-bezier(.16, 1, .3, 1) both;
transform-origin: top left;
}
@keyframes nxMenuPop {
from { opacity: 0; transform: translateY(-4px) scale(.97); }
to { opacity: 1; transform: none; }
}
.nx-menu-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: var(--r-sm);
cursor: pointer;
font-size: 13px;
color: var(--text-2);
}
.nx-menu-item:hover,
.nx-menu-item:focus-visible {
background: var(--bg-hover);
color: var(--text);
outline: none;
}
.nx-menu-item.active {
background: var(--accent-light);
color: var(--accent);
font-weight: 600;
}
.nx-menu-item .kbd,
.nx-menu-item kbd {
margin-left: auto;
}
.nx-menu-sep {
height: 1px;
background: var(--border-light);
margin: 4px 0;
}
.nx-menu-section {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted-light);
padding: 8px 12px 4px;
}
@media (prefers-reduced-motion: reduce) {
.nx-menu { animation: none; }
}
/* ---------------------------------------------------------------------------
5. Smoother card hover & focus
--------------------------------------------------------------------------- */
/* Transition cheap properties only. Animating box-shadow triggers a paint
on every frame and creates noticeable jank on pages with many cards
(Today, Dashboard) — keep the visual change but apply it instantly. */
.card,
.kpi-card,
.chart-card {
transition: transform .15s cubic-bezier(.16, 1, .3, 1),
border-color .12s;
}
.card:hover { box-shadow: var(--shadow-md); }
.kpi-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
[role="button"]:focus-visible,
.clickable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
6. Refined scrollbars
--------------------------------------------------------------------------- */
* {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }
/* ---------------------------------------------------------------------------
7. Selection
--------------------------------------------------------------------------- */
::selection {
background: var(--accent-light);
color: var(--accent-hover);
}
/* ---------------------------------------------------------------------------
8. Entrance animations for new content
--------------------------------------------------------------------------- */
@keyframes nxFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.nx-fade-in { animation: nxFadeIn .25s ease-out both; }
@keyframes nxSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.nx-slide-up { animation: nxSlideUp .3s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
.nx-fade-in,
.nx-slide-up { animation: none; }
}
/* ---------------------------------------------------------------------------
9. Modal polish: entrance + scrim improvement
--------------------------------------------------------------------------- */
.modal-overlay {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.modal-overlay.open .modal,
.modal-overlay[style*="display: flex"] .modal,
.modal-overlay[style*="display:flex"] .modal {
animation: nxModalPop .22s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes nxModalPop {
from { opacity: 0; transform: translateY(8px) scale(.985); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.modal-overlay.open .modal { animation: none; }
}
/* ---------------------------------------------------------------------------
10. Toast polish (toast_undo.js)
--------------------------------------------------------------------------- */
.nx-toast { animation: nxToastIn .28s cubic-bezier(.16, 1, .3, 1) both; }
.nx-toast.nx-toast-out { animation: nxToastOut .22s ease both; }
@keyframes nxToastIn {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: none; }
}
@keyframes nxToastOut {
to { opacity: 0; transform: translateX(16px); }
}
@media (prefers-reduced-motion: reduce) {
.nx-toast,
.nx-toast.nx-toast-out { animation: none; }
}
/* ---------------------------------------------------------------------------
11. Inline progress bars
--------------------------------------------------------------------------- */
.nx-progress {
width: 100%;
height: 6px;
background: var(--bg-hover);
border-radius: 99px;
overflow: hidden;
}
.nx-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent2));
transition: width .4s cubic-bezier(.16, 1, .3, 1);
}
.nx-progress.thin { height: 3px; }
/* ---------------------------------------------------------------------------
12. Refined buttons (layer on existing .btn)
--------------------------------------------------------------------------- */
.btn {
transition: background .15s, box-shadow .15s, transform .08s, border-color .15s;
}
.btn:hover { transform: translateY(-0.5px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, .28); }
.btn-success {
background: var(--green);
color: var(--surface);
border: none;
}
.btn-success:hover { background: #047857; }
.btn-danger {
background: var(--red);
color: var(--surface);
border: none;
}
.btn-danger:hover { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) {
.btn:hover,
.btn:active { transform: none; }
}
/* ---------------------------------------------------------------------------
13. Chip system (assignee/tag chips)
--------------------------------------------------------------------------- */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 4px;
border-radius: 99px;
background: var(--bg-hover);
font-size: 11.5px;
font-weight: 500;
color: var(--text-2);
}
.chip-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-light);
color: var(--accent);
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.chip-remove {
background: none;
border: none;
cursor: pointer;
color: var(--muted);
padding: 0 2px;
font-size: 14px;
line-height: 1;
}
.chip-remove:hover { color: var(--red); }
/* ---------------------------------------------------------------------------
14. Tooltip polish (help.js)
--------------------------------------------------------------------------- */
.help-tooltip {
background: var(--text);
color: var(--bg);
font-size: 12px;
line-height: 1.45;
padding: 8px 11px;
border-radius: var(--r-sm);
box-shadow: var(--shadow-lg);
max-width: 280px;
opacity: 0;
pointer-events: none;
transform: translateY(2px);
transition: opacity .15s, transform .15s;
}
.help-tooltip.show {
opacity: 1;
transform: translateY(0);
}
.help-tooltip::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--text);
border-bottom: none;
}
/* ---------------------------------------------------------------------------
15. Brand seam — intentionally skipped (sticky-in-flex can break layouts)
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
16. Dark mode tuning
--------------------------------------------------------------------------- */
[data-theme="dark"] .modal-overlay {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
[data-theme="dark"] .nx-menu {
border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .badge-accent {
background: rgba(165, 180, 252, .16);
}
/* ---------------------------------------------------------------------------
17. Kanban polish — fix column wrap & horizontal-scroll affordance
--------------------------------------------------------------------------- */
.kanban-cols {
/* Always 4 status columns; let them scroll horizontally rather than wrap
to a second row when the viewport is tight. Prevents the "messy" look
where Done wraps under Backlog. */
grid-auto-flow: column;
scroll-snap-type: x proximity;
}
.kanban-cols > .kanban-col {
scroll-snap-align: start;
min-width: 240px;
}
/* Subtle edge fade when content overflows horizontally so users get a
visual cue there's more to the right. */
.kanban-project-block {
position: relative;
}
.kanban-project-block::after {
content: '';
position: absolute;
right: 1px;
top: 0;
bottom: 0;
width: 28px;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--card) 80%);
opacity: 0;
transition: opacity .2s;
border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.kanban-cols::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
.kanban-cols:hover::-webkit-scrollbar-thumb {
background: var(--muted-light);
}
/* Make sure cards inside columns never push column wider than allocated. */
.kanban-col {
min-width: 0;
}
.task-card {
min-width: 0;
max-width: 100%;
}
.task-card .task-title {
word-break: break-word;
overflow-wrap: anywhere;
}
/* ============================================================================
Polish v4 — visual pass 2026-07 (login hero, KPI dedup, badge unify,
empty states, card action hover-reveal). Added after design review.
============================================================================ */
/* ── Summary strip: from 5-col grid of duplicated stats to a
tight breakdown-chip row (Planning / On Hold / Active Team).
:has() lets us re-layout only when the new chip children exist,
so any legacy caller still using .strip-item stays untouched. */
.summary-strip:has(.summary-chip) {
display: flex;
flex-wrap: wrap;
gap: 10px;
background: transparent;
border: none;
padding: 0;
border-radius: 0;
overflow: visible;
margin-bottom: 24px;
}
.summary-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
color: var(--text-2);
transition: border-color .15s, box-shadow .15s;
}
.summary-chip:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
}
.summary-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.summary-chip-label {
font-weight: 500;
letter-spacing: .1px;
}
.summary-chip-val {
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.summary-chip-of {
font-weight: 500;
color: var(--muted);
}
[data-theme="dark"] .summary-chip {
background: rgba(255,255,255,.03);
border-color: var(--border);
}
/* ── Empty state variant: illustrated + CTA.
Wrap element: */
.empty-state-lg {
padding: 56px 24px 60px;
gap: 14px;
}
.empty-state-illus {
width: 88px;
height: 88px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent-light), var(--purple-light));
color: var(--accent);
box-shadow: 0 6px 24px rgba(99,102,241,.14);
margin-bottom: 4px;
}
.empty-state-illus svg {
width: 40px;
height: 40px;
stroke-width: 1.4;
}
.empty-state-lg .empty-state-title {
font-size: 16px;
color: var(--text);
margin-bottom: 4px;
}
.empty-state-lg .empty-state-sub {
max-width: 380px;
color: var(--muted);
}
.empty-state-cta {
margin-top: 12px;
}
[data-theme="dark"] .empty-state-illus {
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18));
box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
/* Table empty row with illustrated body (Risk register) */
tr.empty-row-illus td {
padding: 0 !important;
background: transparent !important;
border-bottom: none !important;
}
tr.empty-row-illus .empty-state-lg {
padding: 48px 24px 52px;
}
/* Kanban column "No tasks" — dashed drop-zone with subtle icon */
.kanban-col-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px 12px;
border: 1.5px dashed var(--border);
border-radius: 10px;
color: var(--muted);
font-size: 12px;
background: transparent;
transition: border-color .15s, background .15s;
}
.kanban-col-empty svg {
width: 22px;
height: 22px;
color: var(--muted-light);
opacity: .7;
}
.kanban-col[data-col="Doing"] .kanban-col-empty:hover,
.kanban-col-empty:hover {
border-color: var(--accent);
color: var(--text-2);
background: rgba(99,102,241,.03);
}
[data-theme="dark"] .kanban-col-empty {
border-color: rgba(255,255,255,.09);
}
[data-theme="dark"] .kanban-col-empty:hover {
background: rgba(99,102,241,.06);
}
/* ── Task-card action row: hover-reveal to reduce card noise.
Full opacity on touch/coarse pointers so mobile users always see actions. */
@media (hover: hover) and (pointer: fine) {
.task-card .task-actions {
opacity: 0;
transform: translateY(-2px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.task-card:hover .task-actions,
.task-card:focus-within .task-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Always show the primary "open details" action so cards still look tappable */
.task-card .task-actions .nx-card-action:first-child {
opacity: 1 !important;
pointer-events: auto !important;
}
}
@media (prefers-reduced-motion: reduce) {
.task-card .task-actions {
transition: opacity .01s;
transform: none !important;
}
}
/* ── LOGIN hero split + constellation background layer.
Kicks in on ≥900px viewports; below that the existing centered card
layout stays as-is (mobile-first).
Purely additive: doesn't override existing .login-wrap / .login-card. */
.login-hero {
display: none;
}
.constellation-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .55;
}
[data-theme="dark"] .constellation-bg {
opacity: .8;
}
.constellation-bg .c-dot {
fill: var(--accent);
}
.constellation-bg .c-line {
stroke: var(--accent);
stroke-width: 1;
opacity: .35;
}
@media (min-width: 900px) {
#loginScreen .login-shell {
display: grid;
grid-template-columns: 440px 440px;
justify-items: stretch;
gap: 64px;
align-items: center;
z-index: 1;
position: relative;
}
#loginScreen .login-wrap {
width: auto;
max-width: none;
margin: 0;
justify-self: stretch;
}
.login-hero {
display: block;
width: 100%;
color: var(--text);
animation: fadeUp .55s cubic-bezier(.16,1,.3,1) both;
}
.login-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-light);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 18px;
}
.login-hero-title {
font-size: 40px;
line-height: 1.08;
letter-spacing: -.9px;
font-weight: 700;
color: var(--text);
margin: 0 0 16px;
}
.login-hero-title em {
font-style: normal;
background: linear-gradient(135deg, var(--accent), var(--purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.login-hero-sub {
font-size: 15px;
line-height: 1.6;
color: var(--muted);
max-width: 420px;
margin: 0 0 26px;
}
.login-hero-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.login-hero-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
}
.login-hero-list .check {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 6px;
background: var(--green-light, rgba(16,185,129,.15));
color: var(--green, #10b981);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.login-hero-list .check svg {
width: 12px;
height: 12px;
stroke-width: 2.5;
}
/* On split layout, brand block sits inside form column (compacted) */
#loginScreen .login-brand {
text-align: left;
margin-bottom: 22px;
}
#loginScreen .login-brand .login-logo {
margin: 0 0 12px;
}
#loginScreen .login-brand .login-title {
font-size: 22px;
}
}
[data-theme="dark"] .login-hero-eyebrow {
background: rgba(99,102,241,.15);
}
/* ── Team card action row: hover-reveal (matches task card pattern).
Kartu member sekarang punya edit/delete yang muncul saat hover, tidak
berteriak di setiap card. Touch/coarse pointer tetap penuh. */
.team-card-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
margin-left: 4px;
}
@media (hover: hover) and (pointer: fine) {
.team-card .team-card-actions {
opacity: 0;
transition: opacity .18s ease;
}
.team-card:hover .team-card-actions,
.team-card:focus-within .team-card-actions {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.team-card .team-card-actions {
transition: none;
}
}
/* ── Gantt: skeleton bar + Today pill + weekend polish
makeBar() sudah emit .gantt-bar-skeleton untuk row tanpa tanggal.
Ini memberinya visual "awaiting schedule" alih-alih baris kosong. */
.gantt-bar-skeleton {
background: repeating-linear-gradient(
-45deg,
rgba(148,163,184,.14) 0 6px,
transparent 6px 12px
);
border-radius: 3px;
}
[data-theme="dark"] .gantt-bar-skeleton {
background: repeating-linear-gradient(
-45deg,
rgba(148,163,184,.10) 0 6px,
transparent 6px 12px
);
}
/* ── Topbar date chip: proper "system stamp" component.
Combines calendar icon + mono numerals in a subtle pill so it reads
as an intentional timestamp badge, not orphan mono text. */
.topbar-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
color: var(--text-2);
background: var(--bg);
padding: 4px 10px 4px 8px;
border-radius: 999px;
border: 1px solid var(--border);
letter-spacing: .1px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
margin-right: 6px;
}
.topbar-date .topbar-date-icon {
width: 12px;
height: 12px;
color: var(--muted);
flex-shrink: 0;
}
.topbar-date .topbar-date-text {
line-height: 1;
}
[data-theme="dark"] .topbar-date {
background: rgba(255,255,255,.04);
border-color: var(--border);
color: var(--text-2);
}
[data-theme="dark"] .topbar-date .topbar-date-icon {
color: var(--muted);
}
/* ===== /css/icon_standard.css?v=1 ===== */
/* ============================================================================
icon_standard.css
----------------------------------------------------------------------------
Canonical icon sizing system. Layered ON TOP of app.css to gradually
standardize the ad-hoc `.icon-10` ... `.icon-30` zoo into a clean scale.
STRATEGY:
- Introduce a semantic xs/sm/md/lg/xl/2xl scale (additive).
- Snap the noisiest legacy classes in the 10-15px range to canonical
sizes via property override (visual polish without breaking markup).
- Leave hero sizes (.icon-28, .icon-30) and the sidebar's .icon-17
untouched — they are intentional.
============================================================================ */
/* ----------------------------------------------------------------------------
1. CANONICAL SIZES (semantic scale)
Use these on all new icons. Old numeric classes remain for back-compat.
---------------------------------------------------------------------------- */
.icon-xs { width: 12px; height: 12px; } /* metadata, badges, inline chips */
.icon-sm { width: 14px; height: 14px; } /* inline with body text */
.icon-md { width: 16px; height: 16px; } /* default — buttons, list items */
.icon-lg { width: 20px; height: 20px; } /* section headers, KPI tiles */
.icon-xl { width: 24px; height: 24px; } /* page-level prominence */
.icon-2xl { width: 32px; height: 32px; } /* hero, empty-state illustrations */
/* ----------------------------------------------------------------------------
2. LEGACY SNAP-TO-GRID
Quietly normalize odd sizes to the nearest canonical bucket.
Higher specificity (.icon.icon-XX) so we win over app.css ordering.
---------------------------------------------------------------------------- */
/* 10-11 → xs (12px) */
.icon.icon-10,
.icon.icon-11 { width: 12px; height: 12px; }
/* 13 → sm (14px). 12 and 14 are already canonical. */
.icon.icon-13 { width: 14px; height: 14px; }
/* 15 → md (16px). 16 is already canonical. */
.icon.icon-15 { width: 16px; height: 16px; }
/* 21 → lg (20px). 20 is already canonical.
22 left alone — intentionally used in KPI tiles. */
.icon.icon-21 { width: 20px; height: 20px; }
/* NOTE: .icon-17 (sidebar), .icon-22 (KPI), .icon-28, .icon-30 are deliberately
NOT overridden — they are correct in their special contexts. */
/* ----------------------------------------------------------------------------
3. UNIVERSAL SVG DEFAULTS
Sensible defaults so icons sit nicely next to text without per-call CSS.
---------------------------------------------------------------------------- */
svg.icon,
svg[viewBox] {
flex-shrink: 0; /* never squish inside flex rows */
vertical-align: middle; /* align with adjacent text baseline-ish */
}
svg.icon[stroke="currentColor"] {
stroke-linecap: round;
stroke-linejoin: round;
}
/* ----------------------------------------------------------------------------
4. STROKE WIDTH HINTS
Most SVGs set stroke-width as an attribute, so this only applies where
the SVG honors CSS. Smaller icons get a slightly heavier stroke for
legibility; larger icons get a finer stroke for elegance.
---------------------------------------------------------------------------- */
.icon-xs,
.icon-sm,
.icon-md,
.icon-lg { stroke-width: 1.75; }
.icon-xl,
.icon-2xl { stroke-width: 1.5; }
/* ----------------------------------------------------------------------------
5. COLOR DEFAULTS
Most SVGs already set stroke="currentColor" fill="none" inline.
This is a safety net for ones that don't.
---------------------------------------------------------------------------- */
svg.icon:not([fill]) { fill: none; }
svg.icon:not([stroke]) { stroke: currentColor; }
/* ----------------------------------------------------------------------------
6. MIGRATION HINT (commented)
Recommended mapping when refactoring markup over time:
.icon-10 / .icon-11 → .icon-xs
.icon-12 / .icon-13 / .icon-14 → .icon-sm
.icon-15 / .icon-16 → .icon-md
.icon-20 / .icon-21 → .icon-lg
.icon-22 → keep (KPI), or .icon-lg
.icon-17 → keep (sidebar)
.icon-28 / .icon-30 → keep (hero) or .icon-2xl
---------------------------------------------------------------------------- */
/* ===== /css/color_audit.css?v=3 ===== */
/* ============================================================================
* Nexora — Color audit polish
* ----------------------------------------------------------------------------
* Many existing components have hex colors inline (e.g. `#3b82f6`, `#0ea5e9`).
* This stylesheet maps those hard-coded values to CSS custom properties so the
* dark theme (data-theme="dark") inherits them naturally. We don't touch JS;
* just override visual properties through CSS specificity.
* ========================================================================== */
/* Note: do NOT redefine --accent / --accent-light / --accent2 here.
A previous version had `--accent: var(--accent, #6366f1)` which is a
self-reference — CSS treats it as invalid and the variable evaluates
to "initial" (empty string) in many contexts. That cascaded into
invisible buttons (white-on-white New Task), missing avatar bgs,
colorless tags, blank progress bars, etc. The canonical token
definitions live in app.css :root — leave them alone. */
/* ── Override inline color="#xxx" common patterns where possible ──
These cover the cases in app.js render functions where inline style
hardcodes a hex color. We can't reach those without modifying app.js,
but we add !important polish on key surfaces. */
/* Kanban project header bar (uses inline gradient #8b5cf6,#ec4899) */
.kanban-project-card span[style*="linear-gradient"] {
background: linear-gradient(135deg, var(--purple, #8b5cf6), var(--pink, #ec4899)) !important;
}
/* Progress fills */
.kanban-progress-fill,
.progress-fill {
background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
}
/* Old status colors used inline */
[style*="#3b82f6"][class*="task"] { color: var(--accent) !important; }
[style*="#8b5cf6"][class*="epic"] { color: var(--purple, #8b5cf6) !important; }
[style*="#10b981"][class*="subtask"] { color: var(--green, #10b981) !important; }
/* Email notification box (uses hardcoded #f0f9ff bg) */
#emailNotifBox {
background: linear-gradient(135deg, var(--accent2-light, #e0f2fe), var(--accent2-light, #e0f2fe)) !important;
border-color: var(--accent2, #0ea5e9) !important;
}
#emailNotifBox div[style*="background:#0ea5e9"] {
background: var(--accent2, #0ea5e9) !important;
}
/* Type badges (use hardcoded #ede9fe, #d1fae5) */
.type-badge.epic,
[style*="background:#ede9fe"][class*="epic"] {
background: var(--purple-light, #f5f3ff) !important;
color: var(--purple, var(--purple)) !important;
border-color: var(--purple-light, #c4b5fd) !important;
}
.type-badge.subtask,
[style*="background:#d1fae5"][class*="subtask"] {
background: var(--green-light, #ecfdf5) !important;
color: var(--green, #047857) !important;
border-color: var(--green-light, #6ee7b7) !important;
}
/* Login error banner (uses hardcoded red palette) */
.login-error {
background: var(--red-light, #fef2f2) !important;
color: var(--red, var(--danger)) !important;
border-color: var(--red, var(--danger)) !important;
}
/* ── Dark mode adjustments for previously-hardcoded surfaces ── */
[data-theme="dark"] #emailNotifBox {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.06)) !important;
border-color: rgba(14, 165, 233, 0.4) !important;
}
[data-theme="dark"] #emailNotifBox [style*="color:#0c4a6e"],
[data-theme="dark"] #emailNotifBox [style*="color:#0369a1"] {
color: var(--accent2, #67e8f9) !important;
}
/* Risk Heatmap, Priority Matrix cells often use hex inline — patch them */
[data-theme="dark"] .heatmap-cell[style*="background:#"] {
filter: brightness(0.85) saturate(0.9);
}
/* Common chart-card hover (was inline) */
.chart-card:hover { box-shadow: var(--shadow-md) !important; border-color: var(--accent-light) !important; }
/* Pill colors fix in dark mode */
[data-theme="dark"] .badge,
[data-theme="dark"] .pill {
border-color: var(--border) !important;
}
/* Ensure all anchors use accent color, not browser-default blue */
a:not([class]) { color: var(--accent); }
a:not([class]):hover { color: var(--accent-hover, var(--accent)); }
/* ============================================================================
Fix: in-page primary action buttons (btnNewTask, btnAddRisk, etc.) appear
white-on-white on some configurations because no rule guarantees the
accent background when polish.js's btn-saving shimmer overlay also
targets them. Explicitly enforce indigo bg + white text on .btn-primary
in all states so they remain readable even before hover.
============================================================================ */
.btn.btn-primary,
button.btn-primary {
background-color: var(--accent, #6366f1) !important;
color: var(--surface) !important;
border: 1px solid var(--accent, #6366f1) !important;
}
.btn.btn-primary:hover,
button.btn-primary:hover {
background-color: var(--accent-hover, #4f46e5) !important;
border-color: var(--accent-hover, #4f46e5) !important;
color: var(--surface) !important;
}
/* Dark mode parity — text becomes dark on lighter accent */
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] button.btn-primary {
background-color: var(--accent, var(--brand-hover)) !important;
color: #0f172a !important;
border-color: var(--accent, var(--brand-hover)) !important;
}
[data-theme="dark"] .btn.btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover {
background-color: var(--brand-active) !important;
border-color: var(--brand-active) !important;
color: #0f172a !important;
}
/* Disabled state still readable */
.btn.btn-primary:disabled,
button.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Defensive: the polish.js shimmer overlay `.btn-saving::after` previously
used a translucent gradient sometimes confused with text color. Pin its
background-color explicitly to none so it never paints solid white. */
.btn-saving::after {
background-color: transparent !important;
}
/* ===== /css/v2/motion.css?v=4 ===== */
/* Nexora v4 motion — subtle life, ease-out, no bounce. */
@keyframes nx-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes nx-fade-up {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes nx-scale-in {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
@keyframes nx-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes nx-pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes nx-spin {
to { transform: rotate(360deg); }
}
.anim-fade-in { animation: nx-fade-in var(--d) var(--ease-out) both; }
.anim-fade-up { animation: nx-fade-up var(--d) var(--ease-out) both; }
.anim-scale-in { animation: nx-scale-in var(--d) var(--ease-out) both; }
.anim-spin { animation: nx-spin 600ms linear infinite; }
.anim-pulse { animation: nx-pulse-glow 2s var(--ease) infinite; }
.anim-shimmer {
background: linear-gradient(90deg, var(--bg-hover) 0%, var(--surface-soft) 50%, var(--bg-hover) 100%);
background-size: 200% 100%;
animation: nx-shimmer 1500ms linear infinite;
}
/* Default interactive transitions — bring back transform for subtle lift */
button, a, .nav-item, .card, .kpi-card, .chart-card, .badge,
input, select, textarea, .sub-tab, .task-card {
transition:
background-color var(--d-fast) var(--ease),
color var(--d-fast) var(--ease),
border-color var(--d-fast) var(--ease),
box-shadow var(--d-fast) var(--ease),
transform var(--d-fast) var(--ease);
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== /css/v2/brand.css?v=4 ===== */
/* Nexora v3 brand mark — editorial-modern, restrained. */
.nx-brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
transition: background-color var(--d-fast) var(--ease);
}
.nx-brand:hover { background: var(--bg-hover); }
.nx-brand:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.nx-brand svg { display: block; }
.nx-wordmark {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.025em;
color: var(--text);
font-feature-settings: 'ss01', 'ss02';
}
.sidebar.collapsed .nx-wordmark,
[data-sidebar="collapsed"] .nx-wordmark {
display: none;
}
/* ===== /css/v2/legacy_buttons_forms.css?v=1 ===== */
/* ============================================================================
Consolidated legacy buttons + forms (Wave 5 migration).
Verbatim content of the former v2/buttons.css + v2/forms.css. Loads at the
same cascade position both files used to load, so visual behavior is
unchanged. v3/buttons.css and v3/forms.css still load after this file —
non-!important rules here continue to defer to v3 as before.
============================================================================ */
/* Nexora v4 buttons — vibrant indigo, alive but professional. */
.btn,
button.btn,
a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px !important;
padding: 0 var(--space-4) !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: -0.005em;
line-height: 1;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: all var(--d-fast) var(--ease);
box-shadow: 0 1px 2px rgba(15,15,30,.04);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Default — secondary appearance */
.btn:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
transform: translateY(-0.5px);
box-shadow: 0 2px 6px rgba(15,15,30,.06);
}
/* PRIMARY — electric indigo, the hero CTA */
.btn-primary {
background: var(--brand);
color: var(--surface);
border-color: var(--brand);
box-shadow: 0 1px 2px rgba(80,70,229,.20), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: var(--surface);
transform: translateY(-1px);
box-shadow: 0 4px 12px -2px rgba(80,70,229,.30), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(80,70,229,.30), 0 4px 12px -2px rgba(80,70,229,.30);
}
.btn-primary:disabled {
background: var(--brand);
border-color: var(--brand);
}
/* SECONDARY — bordered, gentle */
.btn-secondary {
background: var(--surface);
color: var(--text);
border-color: var(--border-strong);
}
.btn-secondary:hover {
background: var(--bg-hover);
transform: translateY(-0.5px);
}
/* GHOST */
.btn-ghost {
background: transparent;
color: var(--text-2);
border-color: transparent;
box-shadow: none;
}
.btn-ghost:hover {
background: var(--bg-hover);
color: var(--text);
transform: none;
box-shadow: none;
}
/* DANGER */
.btn-danger {
background: var(--danger);
color: var(--surface);
border-color: var(--danger);
box-shadow: 0 1px 2px rgba(220,38,38,.20), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-danger:hover {
background: #B91C1C;
border-color: #B91C1C;
transform: translateY(-1px);
box-shadow: 0 4px 12px -2px rgba(220,38,38,.30);
}
/* WARNING */
.btn-warning {
background: var(--warning);
color: var(--surface);
border-color: var(--warning);
}
.btn-warning:hover {
background: #C2410C;
transform: translateY(-1px);
}
/* Sizes */
.btn-sm {
height: 32px !important;
padding: 0 var(--space-3) !important;
font-size: 13px !important;
border-radius: var(--radius-xs);
}
.btn-lg {
height: 48px !important;
padding: 0 var(--space-5) !important;
font-size: 15px !important;
border-radius: var(--radius-md);
}
.btn-icon { width: 40px !important; padding: 0 !important; }
.btn-icon.btn-sm { width: 32px !important; }
/* Topbar icon button */
.topbar-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 36px !important;
min-width: 36px !important;
padding: 0 var(--space-3) !important;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid transparent;
color: var(--text-2);
cursor: pointer;
font-family: var(--font-body);
transition: all var(--d-fast) var(--ease);
}
.topbar-icon-btn:hover {
background: var(--bg-hover);
color: var(--text);
border-color: var(--border);
}
.topbar-icon-btn:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* Nexora v4 forms — vibrant brand focus halo. */
input, select, textarea,
.form-control, .search-input, .filter-select {
display: block;
width: 100%;
height: 40px !important;
padding: 0 var(--space-3) !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all var(--d-fast) var(--ease);
appearance: none;
-webkit-appearance: none;
box-shadow: 0 1px 2px rgba(15,15,30,.02);
}
textarea {
min-height: 110px !important;
padding: var(--space-3) !important;
height: auto !important;
line-height: 1.6;
resize: vertical;
}
input:hover, select:hover, textarea:hover {
border-color: var(--border-strong);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--shadow-focus), 0 1px 2px rgba(15,15,30,.02);
}
input::placeholder, textarea::placeholder {
color: var(--muted);
opacity: 1;
font-family: var(--font-body);
}
input:disabled, select:disabled, textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--surface-soft);
}
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='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px !important;
}
.search-box {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 1 320px;
}
.search-box .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
display: inline-flex;
}
.search-box .search-input { padding-left: 36px !important; }
.form-group { display: block; margin-bottom: var(--space-5); }
.form-label, label.form-label {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-2);
margin-bottom: var(--space-2);
letter-spacing: -0.005em;
}
.form-label.req::after, .req .form-label::after {
content: '*';
color: var(--danger);
margin-left: 4px;
}
.form-error {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--danger);
margin-top: var(--space-1);
}
input[type="checkbox"], input[type="radio"] {
width: 16px !important;
height: 16px !important;
padding: 0;
accent-color: var(--brand);
cursor: pointer;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.form-row.full { grid-template-columns: 1fr; }
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
}
/* ===== /css/v2/sidebar.css?v=5 ===== */
/* Nexora v4 sidebar — prominent brand-color active state with left bar. */
aside, .sidebar {
width: 244px;
background: var(--bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-3);
gap: 2px;
}
.sidebar .nav-section-label,
.sb-section-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: var(--space-4) var(--space-3) var(--space-2);
margin-top: var(--space-3);
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 9px var(--space-3);
border-radius: var(--radius-sm);
font-family: var(--font-body) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em;
color: var(--text-2);
cursor: pointer;
user-select: none;
background: transparent;
border: none;
text-align: left;
width: 100%;
transition: all var(--d-fast) var(--ease);
}
.nav-item:hover {
background: var(--bg-hover);
color: var(--text);
transform: translateX(1px);
}
.nav-item:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.nav-item .nav-icon,
.nav-item svg {
display: inline-flex;
width: 18px;
height: 18px;
flex-shrink: 0;
color: currentColor;
}
.nav-item .nav-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active — brand bg-fade + brand text + LEFT BAR (Linear-style) */
.nav-item.active,
.nav-item[aria-current="page"] {
background: var(--brand-fade) !important;
color: var(--brand) !important;
font-weight: 600 !important;
}
.nav-item.active::before,
.nav-item[aria-current="page"]::before {
content: none;
}
.nav-item.active .nav-icon,
.nav-item.active svg { color: var(--brand) !important; }
.sidebar-user, .sb-user {
margin-top: auto;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
cursor: pointer;
box-shadow: var(--shadow-card);
}
.sidebar-user:hover {
background: var(--bg-hover);
border-color: var(--brand-strong);
}
.sidebar.collapsed, [data-sidebar="collapsed"] aside, [data-sidebar="collapsed"] .sidebar {
width: 64px;
padding: var(--space-5) var(--space-2);
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sb-section-label,
[data-sidebar="collapsed"] .nav-label,
[data-sidebar="collapsed"] .sb-section-label { display: none; }
.sidebar.collapsed .nav-item,
[data-sidebar="collapsed"] .nav-item {
justify-content: center;
padding: 9px;
}
@media (max-width: 900px) {
aside, .sidebar {
background: var(--bg);
box-shadow: var(--shadow-modal);
border-right: 1px solid var(--border);
}
}
/* ===== /css/v2/topbar.css?v=5 ===== */
/* Nexora v4 topbar — sticky, subtle depth shadow. */
.topbar {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: var(--space-4);
height: 60px;
padding: 0 var(--space-6);
/* Glass surface — translucent white with saturating blur.
Reads as "floating" instead of flat-attached to content. Dark mode gets
its counterpart in nexora-theme.css. Fallback to solid --bg when the
browser (or the user via prefers-reduced-transparency) opts out. */
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(15,15,30,.03), 0 4px 12px -4px rgba(15,15,30,.04);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.topbar {
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@supports not (backdrop-filter: blur(1px)) {
.topbar { background: var(--bg); }
}
.topbar-left {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex: 1;
}
.topbar-right {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ── Search button — icon-only on narrow screens, pill with hint on wider ──
Replaces the tiny magnifying-glass icon-only button so the "⌘K" affordance
is visible without needing to hover for the tooltip. Collapses back to
icon-only under 900px to preserve topbar real estate. */
.topbar-search-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 32px;
padding: 0 var(--space-3);
background: var(--surface-soft);
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-body);
font-size: 12px;
transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
min-width: 140px;
}
.topbar-search-btn:hover {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text);
}
.topbar-search-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: currentColor;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar-search-label {
flex: 1;
text-align: left;
font-weight: 500;
}
.topbar-search-kbd {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--muted);
background: var(--surface);
border: 1px solid var(--border);
border-bottom-width: 1.5px;
border-radius: var(--radius-xs);
padding: 1px 5px;
min-width: 28px;
text-align: center;
flex-shrink: 0;
}
@media (max-width: 900px) {
.topbar-search-btn { min-width: 0; padding: 0 var(--space-2); }
.topbar-search-label,
.topbar-search-kbd { display: none; }
}
#pageTitle,
.topbar h1,
.topbar .page-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
line-height: 1;
}
.topbar .breadcrumb, .topbar-breadcrumb {
font-family: var(--font-body);
font-size: 13px;
color: var(--muted);
}
.topbar .breadcrumb a {
color: var(--muted);
text-decoration: none;
transition: color var(--d-fast) var(--ease);
}
.topbar .breadcrumb a:hover { color: var(--brand); }
.topbar-date {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--muted);
padding: 0 var(--space-3);
letter-spacing: 0;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#notifBellBtn .notif-badge,
.notif-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 5px;
font-size: 10px;
font-weight: 700;
color: var(--surface);
background: var(--danger);
border-radius: var(--radius-full);
border: 2px solid var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* #btnCmdK styling is now handled by .nx-icon-btn class in v2/icon-btn.css.
The previous pill+border treatment has been retired in favor of the
square icon-only button with hover tooltip. */
.topbar .project-selector,
.topbar [class*="proj-select"] {
height: 36px;
padding: 0 var(--space-3);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
font-size: 13px;
color: var(--text-2);
}
@media (max-width: 768px) {
.topbar { height: 52px; padding: 0 var(--space-4); gap: var(--space-2); }
.topbar-date { display: none; }
.topbar .breadcrumb { display: none; }
/* #btnCmdK label rule removed — button is now icon-only via .nx-icon-btn. */
}
/* ===== /css/v2/subtabs.css?v=9 ===== */
/* Nexora v3 sub-tabs — editorial bottom-border active state. */
.sub-tabs-bar {
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 0 var(--space-7);
/* Clip overflow so the row's full-bleed divider stays inside the bar
bounds (extends edge-to-edge without leaking into sibling areas). */
overflow-x: hidden;
position: relative;
}
.sub-tabs {
display: flex;
flex-direction: column;
gap: 0;
}
.sub-tabs-row {
display: flex;
align-items: stretch;
gap: var(--space-2);
flex-wrap: nowrap;
overflow-x: auto;
/* Hide all scrollbars on sub-tabs row — no gray vertical/horizontal bar. */
scrollbar-width: none;
}
.sub-tabs-row::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sub-tabs-row-inner {
/* Negative margin + compensating padding makes the row's BOX span
beyond the bar's padding, so the border-top reaches edge-to-edge
(parent bar's overflow:hidden clips the bleed). Children stay in
place because padding offsets the negative margin. */
margin-left: -100vw;
margin-right: -100vw;
padding-left: 100vw;
padding-right: 100vw;
padding-top: var(--space-2);
margin-top: var(--space-2);
border-top: 1px solid var(--border);
}
.sub-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 44px;
padding: 0 var(--space-4);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 450;
letter-spacing: -0.005em;
color: var(--muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
margin-bottom: -1px;
}
.sub-tab:hover {
color: var(--text);
}
.sub-tab:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.sub-tab.sub-tab-active,
.sub-tab[aria-selected="true"] {
color: var(--brand);
font-weight: 600;
border-bottom-color: var(--brand);
}
/* Cluster row (2-tier nav, e.g. Product/Portfolio) — slightly more prominent */
.sub-tab-cluster {
height: 48px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.010em;
}
.sub-tab-cluster.sub-tab-active {
color: var(--brand);
border-bottom-color: var(--brand);
}
@media (max-width: 600px) {
.sub-tabs-bar { padding: 0 var(--space-5); }
.sub-tab { height: 40px; padding: 0 var(--space-3); font-size: 13px; }
}
/* ===== /css/v2/modal.css?v=6 ===== */
/* Nexora v3 modals — editorial restraint, no blur, quiet motion. */
.modal-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 15, 30, 0.45);
padding: var(--space-5);
z-index: 1000;
}
[data-theme="dark"] .modal-overlay,
html.dark .modal-overlay { background: rgba(0, 0, 0, 0.65); }
.modal-overlay.open,
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"],
.modal-overlay[style*="display: block"],
.modal-overlay[style*="display:block"] {
display: flex;
animation: nx-fade-in var(--d-fast) var(--ease) both;
}
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-modal);
padding: 0;
width: 100%;
max-width: 560px;
max-height: calc(100vh - var(--space-7));
display: flex;
flex-direction: column;
overflow: hidden;
animation: nx-fade-up var(--d) var(--ease) both;
}
.modal-wide { max-width: 720px; }
.modal-xwide { max-width: 960px; }
.modal-tall { max-height: calc(100vh - var(--space-6)); }
.modal-title,
.modal-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-5) var(--space-6) var(--space-4);
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
/* border-bottom removed — created unwanted divider lines between
* the title and the form/body across kickoff detail, research note,
* release, flag, experiment, NPS, and new-document modals. */
flex-shrink: 0;
}
.modal-title svg { color: var(--brand); width: 20px; height: 20px; }
.modal-body { padding: var(--space-6); overflow-y: auto; flex: 1; }
.modal-actions,
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border);
background: var(--bg);
flex-shrink: 0;
}
.modal-actions .modal-actions-left { margin-right: auto; }
.modal-close,
.modal .close-btn {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--muted);
border-radius: var(--radius-xs);
cursor: pointer;
}
.modal-close:hover,
.modal .close-btn:hover { background: var(--bg-hover); color: var(--text); }
@media (max-width: 600px) {
.modal-overlay { padding: 0; align-items: stretch; }
.modal {
max-width: 100%;
max-height: 100dvh;
border-radius: 0;
border: none;
}
}
/* ===== /css/v2/skeleton.css?v=4 ===== */
/* Nexora v3 skeleton — quiet shimmer, border-first cards. */
[data-nx-skeleton],
.nx-skeleton,
.skeleton {
position: relative;
overflow: hidden;
background: var(--surface-soft);
border-radius: var(--radius-sm);
}
[data-nx-skeleton]::after,
.nx-skeleton::after,
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.55) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: nx-shimmer 1500ms linear infinite;
}
[data-theme="dark"] [data-nx-skeleton]::after,
[data-theme="dark"] .nx-skeleton::after,
html.dark [data-nx-skeleton]::after,
html.dark .nx-skeleton::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.05) 50%,
transparent 100%
);
background-size: 200% 100%;
}
/* ===== /css/v2/page.css?v=3 ===== */
/* Nexora v3 page layout — generous editorial whitespace. */
.page {
padding: var(--space-6) var(--space-7);
background: var(--bg);
min-height: 100%;
}
@media (max-width: 900px) {
.page { padding: var(--space-5) var(--space-5); }
}
@media (max-width: 600px) {
.page { padding: var(--space-4); }
}
/* Inner content container — max-width for readable lines */
.page > .page-inner,
.page > .container {
max-width: 1280px;
margin: 0 auto;
}
/* Page hero / header row */
.page-hero,
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-5);
padding-bottom: var(--space-5);
margin-bottom: var(--space-6);
border-bottom: 1px solid var(--border);
}
.page-hero h1,
.page-header h1 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.020em;
margin: 0 0 var(--space-1);
color: var(--text);
}
.page-hero .subtitle,
.page-header .subtitle {
font-family: var(--font-body);
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.55;
}
.page-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* Sections within a page */
.page-section {
margin-bottom: var(--space-7);
}
.page-section:last-child { margin-bottom: 0; }
/* Toolbar at top of list pages */
.toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: 0;
margin-bottom: var(--space-5);
}
/* Tight grid for KPI strips, etc. */
.grid-kpi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
/* Two-column responsive */
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-5);
}
/* Body content prose */
.prose {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: var(--text);
max-width: 720px;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
font-family: var(--font-display);
margin-top: var(--space-6);
}
.prose p { margin-bottom: var(--space-4); }
/* ===== /css/v2/section.css?v=3 ===== */
/* Nexora v3 sections — editorial dividers, restrained, type-driven. */
/* Section with title + content */
section.nx-section,
.nx-section {
margin-bottom: var(--space-7);
}
section.nx-section > header,
.nx-section > .nx-section-header,
.nx-section > header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: var(--space-3);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--border);
}
section.nx-section > header > h2,
.nx-section > header > h2,
.nx-section > .nx-section-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
line-height: 1.35;
}
.nx-section-desc {
font-family: var(--font-body);
font-size: 13px;
color: var(--muted);
margin: var(--space-1) 0 0;
line-height: 1.5;
max-width: 640px;
}
/* Horizontal rule — editorial hairline */
hr,
.nx-hr {
border: none;
border-top: 1px solid var(--border);
margin: var(--space-6) 0;
}
/* Strong divider — for major page sections */
.nx-hr-strong {
border: none;
border-top: 1px solid var(--border-strong);
margin: var(--space-7) 0;
}
/* Quiet divider — for tight stacks */
.nx-hr-soft {
border: none;
border-top: 1px solid var(--border-soft);
margin: var(--space-4) 0;
}
/* Editorial blockquote — pull quote feel */
blockquote,
.nx-quote {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.015em;
line-height: 1.45;
color: var(--text);
border-left: 3px solid var(--brand);
padding-left: var(--space-5);
margin: var(--space-6) 0;
}
/* Tiny labels above big numbers (Stripe Dashboard style) */
.eyebrow,
.nx-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
/* ===== /css/v2/data-viz.css?v=3 ===== */
/* Nexora v3 data visualization — editorial chart theming. */
/* Chart container */
.chart-card canvas,
.chart-card .chart,
canvas.chart {
font-family: var(--font-body) !important;
}
/* Tables — editorial style */
table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 14px;
color: var(--text);
}
thead th {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
background: transparent;
}
tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
tbody tr:hover { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none; }
/* Numeric columns */
td.num,
td.numeric,
.cell-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: 13px;
}
/* Progress bar — slim, editorial */
.progress,
.progress-bar {
width: 100%;
height: 6px;
background: var(--surface-soft);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
}
.progress .fill,
.progress-bar .fill,
.progress > div {
height: 100%;
background: var(--brand);
border-radius: var(--radius-full);
transition: width var(--d) var(--ease);
}
/* KPI number — display family for emphasis */
.kpi-card .kpi-value,
.kpi-value {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
letter-spacing: -0.020em;
line-height: 1.1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-label,
.kpi-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--muted);
margin-bottom: var(--space-2);
}
.kpi-card .kpi-delta,
.kpi-delta {
font-family: var(--font-body);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
margin-top: var(--space-2);
}
.kpi-delta.positive { color: var(--success); }
.kpi-delta.negative { color: var(--danger); }
/* ===== /css/v2/dashboard.css?v=3 ===== */
/* Nexora v4 dashboard — KPI hero, brand-color numbers, alive. */
.kpi-card,
.chart-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-5) !important;
box-shadow: var(--shadow-card) !important;
transition: all var(--d-fast) var(--ease) !important;
position: relative;
overflow: hidden;
}
.kpi-card:hover,
.chart-card:hover {
border-color: var(--brand-strong) !important;
box-shadow: var(--shadow-elevated) !important;
transform: translateY(-1px) !important;
}
/* KPI icon — colorful chip with subtle shadow */
.kpi-card-icon {
width: 36px !important;
height: 36px !important;
border-radius: var(--radius-sm) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: var(--space-4) !important;
box-shadow: 0 1px 2px rgba(15,15,30,.04);
}
/* Color variants — VIBRANT (not muted) */
.kpi-card.blue .kpi-card-icon { color: var(--info) !important; background: var(--info-bg) !important; }
.kpi-card.green .kpi-card-icon { color: var(--success) !important; background: var(--success-bg) !important; }
.kpi-card.yellow .kpi-card-icon { color: var(--warning) !important; background: var(--warning-bg) !important; }
.kpi-card.red .kpi-card-icon { color: var(--danger) !important; background: var(--danger-bg) !important; }
.kpi-card.purple .kpi-card-icon { color: var(--brand) !important; background: var(--brand-fade) !important; }
/* KPI label — small, muted, uppercase eyebrow */
.kpi-card .kpi-label,
.kpi-card .label {
font-family: var(--font-body) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
margin-bottom: var(--space-2) !important;
}
/* KPI VALUE — Fraunces, BIG, BRAND color */
.kpi-card .kpi-value,
.kpi-card .value,
.kpi-card .number,
.kpi-card .count {
font-family: var(--font-display) !important;
font-size: 36px !important;
font-weight: 500 !important;
letter-spacing: -0.025em !important;
line-height: 1.05 !important;
color: var(--text) !important;
font-variant-numeric: tabular-nums !important;
margin-bottom: var(--space-2) !important;
}
/* When kpi-card has brand variant, value becomes brand color */
.kpi-card.purple .kpi-value,
.kpi-card.brand .kpi-value,
.kpi-card[data-emphasis="brand"] .kpi-value { color: var(--brand) !important; }
.kpi-card.green .kpi-value[data-trend="up"],
.kpi-card .kpi-value.success { color: var(--success) !important; }
.kpi-card.red .kpi-value[data-trend="down"],
.kpi-card .kpi-value.danger { color: var(--danger) !important; }
/* KPI delta (trend indicator) */
.kpi-card .kpi-delta,
.kpi-card .delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
font-variant-numeric: tabular-nums;
padding: 2px 8px;
border-radius: var(--radius-full);
letter-spacing: 0;
}
.kpi-card .kpi-delta.positive,
.kpi-card .delta.positive {
color: var(--success);
background: var(--success-bg);
}
.kpi-card .kpi-delta.negative,
.kpi-card .delta.negative {
color: var(--danger);
background: var(--danger-bg);
}
/* Chart title */
.chart-card .chart-title,
.chart-card h3,
.chart-card .title {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--text) !important;
margin: 0 0 var(--space-4) !important;
}
/* Dashboard grids */
.dashboard-grid,
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.dashboard-chart-row,
.chart-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-6);
}
/* ===== /css/v2/charts.css?v=2 ===== */
/* Nexora v4 chart cards — alive containers for vibrant charts. */
.chart-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-5) !important;
box-shadow: var(--shadow-card) !important;
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 320px;
transition: all var(--d-fast) var(--ease) !important;
}
.chart-card:hover {
border-color: var(--brand-strong) !important;
box-shadow: var(--shadow-elevated) !important;
transform: translateY(-1px) !important;
}
.chart-card .chart-title,
.chart-card h3,
.chart-card .title {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--text) !important;
margin: 0 !important;
line-height: 1.35 !important;
}
.chart-card .chart-subtitle,
.chart-card .subtitle {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--muted);
margin-top: -4px;
}
.chart-card canvas {
flex: 1;
max-height: 280px;
width: 100% !important;
height: auto !important;
}
.chart-wrap,
.chart-container {
flex: 1;
position: relative;
min-height: 260px;
}
.chart-card .chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
font-family: var(--font-body);
font-size: 11.5px;
color: var(--text-2);
letter-spacing: 0.005em;
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--border-soft);
}
.chart-card .chart-legend .legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
margin-right: 6px;
vertical-align: middle;
}
.chart-card .chart-empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-family: var(--font-body);
color: var(--muted);
font-size: 13px;
}
/* KPI hero inside chart card (number + delta + caption) */
.chart-card .kpi-row {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-soft);
}
.chart-card .kpi-row .big {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.chart-card .kpi-row .delta {
font-family: var(--font-body);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
padding: 2px 8px;
border-radius: var(--radius-full);
}
.chart-card .kpi-row .delta.positive { color: var(--success); background: var(--success-bg); }
.chart-card .kpi-row .delta.negative { color: var(--danger); background: var(--danger-bg); }
/* ===== /css/v2/kanban.css?v=4 ===== */
/* Nexora v3 kanban — editorial restyling. */
.kanban,
.kanban-board {
display: flex;
gap: var(--space-4);
padding: 0 var(--space-1) var(--space-5);
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
align-items: flex-start; /* each column can have different height */
}
.kanban-col,
.kanban-column {
flex: 1 1 280px;
min-width: 280px;
background: var(--surface-soft) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-4) !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
gap: var(--space-3);
/* Allow column to grow naturally to show ALL task cards.
Internal scroll only if column is taller than viewport. */
max-height: none;
overflow-y: visible;
}
.kanban-col-header,
.kanban-col > .header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
}
.kanban-col-header .count {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted);
padding: 1px 6px;
background: var(--surface);
border-radius: var(--radius-full);
border: 1px solid var(--border);
}
/* Task cards inside kanban */
.kanban-col .task-card,
.task-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
padding: var(--space-3) var(--space-4) !important;
box-shadow: none !important;
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--space-2);
transition: border-color var(--d-fast) var(--ease) !important;
}
.kanban-col .task-card:hover,
.task-card:hover {
border-color: var(--brand-strong) !important;
transform: none !important;
box-shadow: none !important;
}
.task-card .task-title,
.task-card .title {
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.4;
color: var(--text);
margin: 0;
}
.task-card .task-meta,
.task-card .meta {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 11.5px;
color: var(--muted);
flex-wrap: wrap;
}
.task-card .task-due,
.task-card .due {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.task-card .task-due.overdue,
.task-card .overdue {
color: var(--danger);
font-weight: 600;
}
/* Overdue badge — quiet but clear */
.overdue-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--danger);
background: var(--danger-bg);
padding: 1px 6px;
border-radius: var(--radius-xs);
border: 1px solid rgba(180,62,62,0.18);
}
/* Avatar in task card */
.task-card .avatar-sm,
.task-card .assignee-avatar {
width: 22px;
height: 22px;
border-radius: var(--radius-full);
font-size: 10px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand-fade);
color: var(--brand);
border: 1px solid var(--surface);
}
/* Kanban controls (toolbar at top of kanban) */
.kanban-controls {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-5);
}
/* ===== /css/v2/toolbar.css?v=4 ===== */
/* Nexora v3 toolbars — single-row alignment, no height mismatches. */
.toolbar,
.kanban-controls,
.filter-row,
.list-controls {
display: flex !important;
align-items: center !important;
gap: var(--space-3) !important;
flex-wrap: wrap !important;
margin: 0 0 var(--space-5) !important;
padding: 0 !important;
}
/* All direct children: force 40px (matches v3 btn + input) */
.toolbar > .btn,
.toolbar > .btn-sm,
.toolbar > .btn-lg,
.toolbar > button,
.toolbar > input,
.toolbar > select,
.toolbar > .search-box,
.toolbar > .filter-select,
.toolbar > .search-input,
.kanban-controls > .btn,
.kanban-controls > button,
.kanban-controls > input,
.kanban-controls > select,
.kanban-controls > .search-box,
.kanban-controls > .filter-select {
height: 40px;
margin: 0 !important;
align-self: center;
}
/* .btn-sm explicitly stays 32 even inside toolbar (small actions) */
.toolbar > .btn.btn-sm,
.kanban-controls > .btn.btn-sm {
height: 32px !important;
}
/* result count + status text inside toolbar */
.toolbar .result-count,
.toolbar .count,
.kanban-controls .result-count,
.kanban-controls .count {
display: inline-flex;
align-items: center;
height: 40px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.005em;
white-space: nowrap;
margin: 0 !important;
}
/* "+ New X" inline buttons should align right */
.toolbar > button[id^="btnNew"],
.toolbar > button[id^="btnAdd"],
.toolbar > .btn-primary {
margin-left: auto !important;
}
/* When two primary actions exist, gap them */
.toolbar > button[id^="btnNew"] + button,
.toolbar > button[id^="btnAdd"] + button {
margin-left: var(--space-2) !important;
}
/* Search box already sized via forms.css; keep flex behavior */
.toolbar > .search-box,
.kanban-controls > .search-box {
flex: 0 1 320px;
min-width: 200px;
align-self: center;
}
/* Filter select width — wider so long project names aren't truncated.
Also applies to .nx-fz-wrap (fuzzy-select replaces the native |