/* ===== GRV Design System — Enhanced ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- Design Tokens ---- */
:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #e0e7ff;
    --secondary: #8b5cf6;
    --sidebar: #1e1b4b;
    --sidebar-hover: rgba(99,102,241,0.18);
    --sidebar-active: rgba(99,102,241,0.28);
    --accent: #f59e0b;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f97316;
    --info: #3b82f6;

    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* --- C2 FIX: previously UNDEFINED tokens that were already in use ---- */
    /* --bg-light was used by .list-item:hover and .task-project-tag but never
       defined, producing transparent backgrounds. Defined here as slate-100. */
    --bg-light: #f1f5f9;
    /* --radius was used by .list-item / .list-item-icon / .task-project-tag but
       never defined, producing square corners. Aliased to --radius-md (12px). */
    --radius: 12px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .04);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .06);

    --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

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

/* ===== LOGIN PAGE ===== */
.login-root {
    min-height: 100vh;
    display: flex;
    background: #0f172a;
}

/* Left panel */
.login-panel-left {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .login-panel-left { display: flex; }
}
.login-panel-left::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(99,102,241,0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(139,92,246,0.25) 0%, transparent 50%);
    pointer-events: none;
}
.login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
    animation: float 8s ease-in-out infinite;
}
.login-bg-orb-1 { width: 280px; height: 280px; background: #6366f1; top: -80px; right: -80px; animation-delay: 0s; }
.login-bg-orb-2 { width: 200px; height: 200px; background: #8b5cf6; bottom: 60px; left: -60px; animation-delay: -3s; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }

.login-logo-lg { display:flex; align-items:center; gap:.75rem; margin-bottom:3rem; position:relative; z-index:1; }
.login-logo-icon { width:48px; height:48px; border-radius:14px; background:rgba(99,102,241,0.3); border:1px solid rgba(99,102,241,0.5); display:flex; align-items:center; justify-content:center; }
.login-logo-text { font-size:2rem; font-weight:800; color:#fff; letter-spacing:-0.5px; }
.login-logo-sub { font-size:.875rem; color: rgba(199,210,254,0.8); margin-top:.1rem; }

.login-hero-title { font-size:2.25rem; font-weight:800; color:#fff; line-height:1.2; letter-spacing:-0.5px; margin-bottom:1rem; position:relative; z-index:1; }
.login-hero-sub { font-size:1rem; color:rgba(199,210,254,0.8); margin-bottom:2.5rem; line-height:1.6; position:relative; z-index:1; }

.login-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.875rem; position:relative; z-index:1; }
.login-feature-item { display:flex; align-items:center; gap:.75rem; }
.login-feature-icon { width:32px; height:32px; border-radius:8px; background:rgba(99,102,241,0.2); border:1px solid rgba(99,102,241,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.login-feature-icon svg { width:16px; height:16px; color:#a5b4fc; }
.login-feature-text { font-size:.875rem; color:rgba(199,210,254,0.9); font-weight:500; }

/* Right panel */
.login-panel-right {
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2.5rem 2rem;
    background:#fff;
    position:relative;
}
@media (min-width:768px) { .login-panel-right { padding: 3rem 3.5rem; } }

.login-form-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:2.5rem; }
@media (min-width:768px) { .login-form-logo { display:none; } }
.login-form-logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; }
.login-form-logo-text { font-size:1.5rem; font-weight:800; color:#0f172a; letter-spacing:-.5px; }

.login-form-title { font-size:1.625rem; font-weight:800; color:#0f172a; margin-bottom:.375rem; letter-spacing:-.3px; }
.login-form-sub { font-size:.9rem; color:var(--text-secondary); margin-bottom:2rem; }

.login-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.75rem; }
.login-tab { flex:1; padding:.75rem; font-size:.875rem; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-muted); transition:var(--transition); border-bottom:2px solid transparent; margin-bottom:-2px; }
.login-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.login-tab:hover:not(.active) { color:var(--text-secondary); }

.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.825rem; font-weight:600; color:var(--text-primary); margin-bottom:.4rem; }
.form-input-wrap { position:relative; }
.form-input { width:100%; padding:.7rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.9rem; color:var(--text-primary); background:#fff; transition:var(--transition); outline:none; font-family:inherit; }
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.12); }
.form-input.has-icon { padding-right:2.75rem; }
.form-input-icon { position:absolute; right:.875rem; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--text-muted); background:none; border:none; display:flex; align-items:center; transition:var(--transition); }
.form-input-icon:hover { color:var(--text-secondary); }
.form-input-icon svg { width:18px; height:18px; }

.form-row-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.form-link { font-size:.825rem; color:var(--primary); font-weight:500; text-decoration:none; }
.form-link:hover { color:var(--primary-hover); text-decoration:underline; }

.btn-primary-lg { width:100%; padding:.85rem; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; border-radius:var(--radius-sm); font-size:.95rem; font-weight:600; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:.5rem; font-family:inherit; box-shadow:0 4px 12px rgba(99,102,241,0.35); }
.btn-primary-lg:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(99,102,241,0.4); background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.btn-primary-lg:active { transform:translateY(0); }

.login-divider { text-align:center; margin:1.5rem 0; position:relative; }
.login-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.login-divider span { position:relative; background:#fff; padding:0 .75rem; font-size:.8rem; color:var(--text-muted); font-weight:500; }

.login-footer { margin-top:1.5rem; text-align:center; font-size:.825rem; color:var(--text-muted); }
.login-footer a { color:var(--primary); font-weight:500; text-decoration:none; }
.login-footer a:hover { text-decoration:underline; }

/* ===== SIDEBAR ===== */
#sidebar {
    border-right: 1px solid rgba(99,102,241,0.1);
    background: linear-gradient(180deg, #1e1b4b 0%, #1a1740 100%);
}
.sidebar-logo { padding: 0 1.25rem; height: 64px; display:flex; align-items:center; gap:.75rem; border-bottom: 1px solid rgba(99,102,241,0.15); }
.sidebar-logo-icon { width:36px; height:36px; border-radius:10px; background:rgba(99,102,241,0.25); display:flex; align-items:center; justify-content:center; }
.sidebar-logo-name { font-size:1.375rem; font-weight:800; color:#fff; letter-spacing:-.5px; }

.sidebar-section-label { font-size:.65rem; font-weight:700; color:rgba(148,163,184,0.6); text-transform:uppercase; letter-spacing:.08em; padding: .5rem 1rem .25rem; }

.sidebar-link { display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; border-radius:var(--radius-sm); color:rgba(165,180,252,0.8); font-size:.875rem; font-weight:500; text-decoration:none; transition:var(--transition); margin: 1px 0; position:relative; }
.sidebar-link:hover { background:var(--sidebar-hover); color:#fff; }
.sidebar-link.active { background:var(--sidebar-active); color:#fff; }
.sidebar-link.active::before { content:''; position:absolute; left:0; top:25%; bottom:25%; width:3px; border-radius:0 3px 3px 0; background:var(--primary); }
.sidebar-link svg { width:18px; height:18px; flex-shrink:0; }

.sidebar-user { padding:.875rem 1rem; border-top: 1px solid rgba(99,102,241,0.15); }
.sidebar-user-card { display:flex; align-items:center; gap:.625rem; padding:.5rem .625rem; border-radius:var(--radius-sm); margin-bottom:.5rem; }
.sidebar-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; flex-shrink:0; }
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name { font-size:.8rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role { font-size:.7rem; color:rgba(148,163,184,0.7); }
.sidebar-logout { width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem; font-size:.8rem; font-weight:500; color:rgba(148,163,184,0.7); border:none; background:transparent; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.sidebar-logout:hover { background:rgba(239,68,68,0.1); color:#fca5a5; }

/* ===== HEADER ===== */
.app-header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; background:#fff; border-bottom:1px solid var(--border); flex-shrink:0; gap:1rem; }
.header-left { display:flex; align-items:center; gap:.875rem; min-width:0; }
.header-page-title { font-size:1.1rem; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; }
.header-breadcrumb { font-size:.75rem; color:var(--text-muted); font-weight:500; }
.header-search { flex:1; max-width:360px; display:none; }
@media (min-width:640px) { .header-search { display:flex; } }
.header-search-wrap { position:relative; width:100%; }
.header-search-input { width:100%; padding:.5rem .875rem .5rem 2.5rem; border:1.5px solid var(--border); border-radius:var(--radius-md); font-size:.85rem; background:var(--surface-2); color:var(--text-primary); outline:none; transition:var(--transition); font-family:inherit; }
.header-search-input:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.header-search-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.header-search-icon svg { width:16px; height:16px; }
.header-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.header-icon-btn { width:38px; height:38px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); transition:var(--transition); position:relative; }
.header-icon-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.header-icon-btn svg { width:18px; height:18px; }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:#ef4444; border:1.5px solid #fff; }

/* ===== STAT CARDS ===== */
.stat-card { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border); padding:1.25rem 1.375rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow-sm); transition:var(--transition); }
.stat-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-1px); }
.stat-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:22px; height:22px; }
.stat-icon.indigo { background:#eef2ff; color:#6366f1; }
.stat-icon.orange { background:#fff7ed; color:#f97316; }
.stat-icon.blue { background:#eff6ff; color:#3b82f6; }
.stat-icon.green { background:#f0fdf4; color:#22c55e; }
.stat-label { font-size:.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.15rem; }
.stat-value { font-size:1.875rem; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; line-height:1; }
.stat-trend { display:inline-flex; align-items:center; gap:.2rem; font-size:.7rem; font-weight:600; margin-top:.25rem; }
.stat-trend.up { color:#22c55e; }
.stat-trend.down { color:#ef4444; }

/* ===== CARDS ===== */
.card { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.card-header { padding:1.25rem 1.375rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:1rem; font-weight:700; color:var(--text-primary); }
.card-body { padding:1.25rem 1.375rem; }
.card-link { font-size:.8rem; font-weight:600; color:var(--primary); text-decoration:none; }
.card-link:hover { color:var(--primary-hover); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; padding:.55rem 1.125rem; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); border:1.5px solid transparent; font-family:inherit; }
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); box-shadow:0 4px 12px rgba(99,102,241,0.3); }
.btn-outline { background:#fff; color:var(--text-secondary); border-color:var(--border-strong); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { background:transparent; color:var(--text-secondary); border-color:transparent; }
.btn-ghost:hover { background:var(--surface-2); color:var(--text-primary); }
.btn-sm { font-size:.775rem; padding:.4rem .875rem; }

/* ===== QUICK ACTIONS ===== */
.quick-action-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.75rem; }
.quick-action-btn { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:.875rem 1rem; border-radius:var(--radius-md); border:1.5px solid var(--border); background:#fff; cursor:pointer; transition:var(--transition); text-align:left; }
.quick-action-btn:hover { border-color:var(--primary); background:#fafafe; box-shadow:0 0 0 3px rgba(99,102,241,0.07); }
.quick-action-icon { width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.quick-action-icon svg { width:17px; height:17px; }
.quick-action-label { font-size:.8rem; font-weight:600; color:var(--text-primary); }

/* ===== PROJECT CARDS ===== */
.project-card { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--transition); cursor:pointer; }
.project-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); }
.project-card-accent { height:4px; }
.project-card-body { padding:1.25rem; }
.project-card-name { font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:.35rem; }
.project-card-desc { font-size:.8rem; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.project-card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.875rem; }
.project-card-status { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; padding:.25rem .625rem; border-radius:99px; }
.project-card-status.active { background:#f0fdf4; color:#16a34a; }
.project-card-status.completed { background:#f5f3ff; color:#7c3aed; }
.project-card-status.archived { background:#f8fafc; color:#64748b; }
.project-card-progress-label { display:flex; justify-content:space-between; font-size:.7rem; color:var(--text-muted); margin-bottom:.3rem; font-weight:500; }
.project-card-progress-bar { height:5px; background:#f1f5f9; border-radius:99px; overflow:hidden; }
.project-card-progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.project-card-tasks { display:flex; gap:1rem; border-top:1px solid var(--border); padding:.875rem 1.25rem; margin-top:0; }
.project-card-task-stat { text-align:center; flex:1; }
.project-card-task-num { font-size:1rem; font-weight:700; color:var(--text-primary); display:block; }
.project-card-task-lbl { font-size:.65rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* ===== KANBAN ===== */
.kanban-col-header { padding:1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.kanban-col-title { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.875rem; }
.kanban-col-dot { width:10px; height:10px; border-radius:50%; }
.kanban-col-count { background:#f1f5f9; color:var(--text-secondary); font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; }
.task-card { background:#fff; border-radius:var(--radius-md); border:1px solid var(--border); padding:.875rem 1rem; cursor:grab; transition:var(--transition); }
.task-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.task-card:active { cursor:grabbing; }
.task-card.dragging { opacity:.45; transform:scale(1.03); box-shadow:var(--shadow-xl); }
.kanban-column.drag-over { background:#f5f3ff; border:2px dashed #a5b4fc; }
.task-priority-badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.65rem; font-weight:700; padding:.2rem .5rem; border-radius:99px; text-transform:uppercase; letter-spacing:.04em; }
.priority-high { background:#fef2f2; color:#dc2626; }
.priority-medium { background:#fffbeb; color:#d97706; }
.priority-low { background:#f0fdf4; color:#16a34a; }
.task-meta { display:flex; align-items:center; justify-content:space-between; margin-top:.625rem; }
.task-due { display:flex; align-items:center; gap:.25rem; font-size:.7rem; color:var(--text-muted); font-weight:500; }
.task-due svg { width:12px; height:12px; }
.task-due.overdue { color:#dc2626; }

/* ===== BADGE ===== */
.badge { display:inline-flex; align-items:center; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:99px; }
.badge-indigo { background:#eef2ff; color:#4f46e5; }
.badge-green { background:#f0fdf4; color:#16a34a; }
.badge-yellow { background:#fffbeb; color:#b45309; }
.badge-red { background:#fef2f2; color:#dc2626; }

/* ===== MODAL ===== */
.modal-backdrop { background-color:rgba(15,23,42,0.55); backdrop-filter:blur(6px); opacity:0; transition:opacity 0.2s ease-out; }
.modal-backdrop.show { opacity:1; }
.modal-content { background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); transform:scale(0.96) translateY(12px); opacity:0; transition:all 0.2s cubic-bezier(0.4,0,0.2,1); }
.modal-backdrop.show ~ div .modal-content { transform:scale(1) translateY(0); opacity:1; }

/* ===== CHART CARDS ===== */
.chart-card { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.chart-card-header { padding:1.25rem 1.375rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.chart-card-title { font-size:.95rem; font-weight:700; color:var(--text-primary); }
.chart-card-body { padding:1.25rem; }

/* ===== PRESENTATION ===== */
.pres-step { display:none; }
.pres-step.active { display:block; }
.pres-step-indicator { display:flex; align-items:center; gap:.5rem; margin-bottom:2rem; }
.pres-step-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; transition:var(--transition); flex-shrink:0; }
.pres-step-dot.done { background:var(--primary); color:#fff; }
.pres-step-dot.current { background:#fff; color:var(--primary); border:2px solid var(--primary); }
.pres-step-dot.upcoming { background:#f1f5f9; color:var(--text-muted); }
.pres-step-line { flex:1; height:2px; background:var(--border); border-radius:99px; }
.pres-step-line.done { background:var(--primary); }

.pres-template-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.pres-template-card { border:2px solid var(--border); border-radius:var(--radius-md); padding:1rem; cursor:pointer; transition:var(--transition); text-align:center; }
.pres-template-card:hover, .pres-template-card.selected { border-color:var(--primary); background:#fafafe; }
.pres-template-card.selected { box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.pres-template-preview { width:100%; aspect-ratio:16/9; border-radius:var(--radius-sm); margin-bottom:.625rem; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; letter-spacing:.05em; color:rgba(255,255,255,0.8); }
.pres-template-name { font-size:.8rem; font-weight:600; color:var(--text-primary); }
.pres-template-desc { font-size:.7rem; color:var(--text-muted); margin-top:.1rem; }

/* ===== TOAST ===== */
.toast-enter { animation:slideInRight 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.toast-exit { animation:fadeOut 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes slideInRight { from{transform:translateX(110%);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes fadeOut { from{opacity:1;} to{opacity:0;transform:translateY(-6px);} }

/* ===== LOADER ===== */
.loader { border:3px solid var(--border); border-radius:50%; border-top:3px solid var(--primary); width:24px; height:24px; animation:spin 0.8s linear infinite; }
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

/* ===== EMPTY STATE ===== */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; text-align:center; }
.empty-state-icon { width:56px; height:56px; border-radius:var(--radius-lg); background:var(--primary-light); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.empty-state-icon svg { width:26px; height:26px; color:var(--primary); }
.empty-state-title { font-size:.95rem; font-weight:700; color:var(--text-primary); margin-bottom:.375rem; }
.empty-state-sub { font-size:.825rem; color:var(--text-muted); max-width:240px; line-height:1.5; }

/* ===== MOBILE SIDEBAR ===== */
@media (max-width:1023px) {
    #sidebar { position:fixed; transform:translateX(-100%); z-index:40; }
    #sidebar.show { transform:translateX(0); box-shadow:var(--shadow-xl); }
}

/* ===== SLIDE PREVIEW ===== */
.slide-preview { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; position:relative; background:#1e293b; cursor:pointer; transition:var(--transition); }
.slide-preview:hover { transform:scale(1.02); box-shadow:var(--shadow-lg); }
.slide-preview-num { position:absolute; top:.5rem; left:.5rem; font-size:.65rem; font-weight:700; background:rgba(0,0,0,0.4); color:#fff; padding:.15rem .45rem; border-radius:99px; }

/* ===== FORM STYLES (inside modals) ===== */
.field-label { display:block; font-size:.8rem; font-weight:600; color:var(--text-primary); margin-bottom:.35rem; }
.field-input { width:100%; padding:.6rem .875rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.875rem; color:var(--text-primary); background:#fff; transition:var(--transition); outline:none; font-family:inherit; }
.field-input::placeholder { color:var(--text-muted); }
.field-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.1); }

/* ===== ACTIVITY TIMELINE ===== */
.activity-item { display:flex; gap:.75rem; padding:.5rem 0; }
.activity-dot-wrap { display:flex; flex-direction:column; align-items:center; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:5px; }
.activity-line { flex:1; width:1px; background:var(--border); margin-top:3px; min-height:20px; }
.activity-content { flex:1; padding-bottom:.5rem; }
.activity-text { font-size:.8rem; color:var(--text-secondary); line-height:1.4; }
.activity-time { font-size:.7rem; color:var(--text-muted); margin-top:.2rem; }

/* ===========================
   Badge Variants
=========================== */
.badge-success { background:#f0fdf4; color:#16a34a; }
.badge-danger  { background:#fef2f2; color:#dc2626; }
.badge-warning { background:#fffbeb; color:#b45309; }
.badge-info    { background:#eff6ff; color:#2563eb; }

/* ===========================
   Dashboard List Items
=========================== */
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    gap: 0.75rem;
}
.list-item:hover {
    background: var(--bg-light);
    border-color: var(--border);
}

.list-item-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.list-item-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.list-item-icon svg { width: 1rem; height: 1rem; }

.list-item-icon.success { background: #f0fdf4; color: #16a34a; }
.list-item-icon.danger  { background: #fef2f2; color: #dc2626; }
.list-item-icon.warning { background: #fffbeb; color: #b45309; }
.list-item-icon.info    { background: #eff6ff; color: #2563eb; }

.list-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.list-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-danger { color: #dc2626 !important; }
.text-success { color: #16a34a !important; }
.text-warning { color: #b45309 !important; }

/* ===========================
   Task Card Inner Elements
=========================== */
.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.task-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.task-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.task-card-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.task-card:hover .task-card-actions {
    opacity: 1;
}

.task-card-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.task-card-actions button:hover { color: var(--primary); background: var(--primary-light); }
.task-card-actions button.delete-btn:hover { color: #dc2626; background: #fef2f2; }
.task-card-actions button svg { width: 14px; height: 14px; }

.task-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.task-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    gap: 0.5rem;
}

.task-project-tag {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.task-card-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.task-due-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

.task-due-date svg { width: 11px; height: 11px; }

/* ===========================================================
   GRV FIX LAYER — appended by web-design agent
   Covers: C1 (RTL), C3 (loading/error), C5 (a11y), C6 (mobile),
           C7 (dead-element removal helpers)
   =========================================================== */

/* ---- C1: RTL / Arabic font ---- */
html[dir="rtl"] body { font-family: 'Tahoma', 'Segoe UI', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif; }

/* Mirror the login split panel when RTL */
html[dir="rtl"] .login-panel-left { align-items: flex-start; text-align: right; }
html[dir="rtl"] .sidebar-link.active::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
html[dir="rtl"] #sidebar { border-right: none; border-left: 1px solid rgba(99,102,241,0.1); }
html[dir="rtl"] .header-search-input { padding: .5rem 2.5rem .5rem .875rem; }
html[dir="rtl"] .header-search-icon { left: auto; right: .75rem; }
html[dir="rtl"] .form-input.has-icon { padding-right: 1rem; padding-left: 2.75rem; }
html[dir="rtl"] .form-input-icon { right: auto; left: .875rem; }
html[dir="rtl"] .form-input { text-align: right; }
html[dir="rtl"] .toast-enter { animation: slideInLeft 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes slideInLeft { from{transform:translateX(-110%);opacity:0;} to{transform:translateX(0);opacity:1;} }
/* Mobile drawer slides in from the right in RTL */
@media (max-width:1023px) {
    html[dir="rtl"] #sidebar { transform: translateX(100%); }
    html[dir="rtl"] #sidebar.show { transform: translateX(0); }
}

/* ---- C5: Accessibility ---- */
/* Visible keyboard focus everywhere (was zero). Mouse clicks stay clean. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* 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;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- C3: Skeleton loaders ---- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e9eef5;
    border-radius: var(--radius-sm);
}
.skeleton::after {
    content: '';
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-text { height: 0.8rem; width: 100%; margin: .25rem 0; }
.skeleton-text.short { width: 45%; }
.skeleton-title { height: 1rem; width: 60%; margin-bottom: .5rem; }
.skeleton-circle { width: 2rem; height: 2rem; border-radius: 50%; }
.skeleton-card { height: 120px; width: 100%; border-radius: var(--radius-lg); }
.kanban-card-skeleton { padding: .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background:#fff; }

/* ---- C3: Inline error / empty state (list-level failures) ---- */
.error-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1rem; text-align: center; gap: .5rem;
}
.error-state-icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    background: #fef2f2; color: #dc2626;
    display: flex; align-items: center; justify-content: center; margin-bottom: .25rem;
}
.error-state-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.error-state-sub { font-size: .8rem; color: var(--text-muted); max-width: 260px; line-height: 1.5; }
.error-state .btn { margin-top: .5rem; }

/* ---- C3: Toast surface (now announced to SR via aria-live) ---- */
#toast-container { pointer-events: none; }
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: .625rem;
    min-width: 260px; max-width: 360px;
    padding: .75rem .875rem;
    border-radius: var(--radius-md);
    background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    font-size: .82rem; font-weight: 500; color: var(--text-primary);
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.success { border-left: 3px solid #22c55e; } .toast.success svg { color: #22c55e; }
.toast.error   { border-left: 3px solid #ef4444; } .toast.error svg   { color: #ef4444; }
.toast.warning { border-left: 3px solid #f97316; } .toast.warning svg { color: #f97316; }
.toast.info    { border-left: 3px solid #3b82f6; } .toast.info svg    { color: #3b82f6; }
html[dir="rtl"] .toast.success { border-left: 1px solid var(--border); border-right: 3px solid #22c55e; }
html[dir="rtl"] .toast.error   { border-left: 1px solid var(--border); border-right: 3px solid #ef4444; }
html[dir="rtl"] .toast.warning { border-left: 1px solid var(--border); border-right: 3px solid #f97316; }
html[dir="rtl"] .toast.info    { border-left: 1px solid var(--border); border-right: 3px solid #3b82f6; }

/* ---- C6: Mobile fixes ---- */
/* Sidebar scrim (drawer had no overlay / no auto-close affordance) */
#sidebar-scrim {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(15,23,42,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
#sidebar-scrim.show { opacity: 1; visibility: visible; }
/* Board scrolls horizontally on small screens instead of forcing 780px + clipping */
@media (max-width: 767px) {
    .kanban-board-wrap { min-width: 0 !important; }
    .kanban-column-shell { min-width: 260px; }
}
/* Filter selects wrap instead of overflowing the 64px fixed header */
@media (max-width: 767px) {
    .app-header { flex-wrap: wrap; height: auto; min-height: 64px; padding: .5rem 1rem; gap: .5rem; }
    .header-left { flex: 1 1 100%; }
    .header-search { flex: 1 1 100%; max-width: none; order: 3; }
    .header-right { flex-wrap: wrap; gap: .4rem; order: 2; }
}
/* Header search visible on mobile once the header wraps */
@media (max-width: 639px) {
    .header-search { display: flex; }        /* was display:none below 640px -> content unreachable */
    .header-right select { flex: 1 1 45%; }
}
/* Icon-only header buttons need a tap target >= 40px on touch */
@media (hover: none) {
    .header-icon-btn { width: 42px; height: 42px; }
    .task-card-actions { opacity: 1; }       /* hover-only actions invisible on touch */
}

/* ---- C7: Dead-element helpers ---- */
/* Bell with no notifications: hidden, not shown as a fake-unread lie. */
.notif-dot { display: none; }
/* Remember-me removed from markup; class kept for any stragglers. */
.remember-me-row { opacity: .5; }


/* ===== Notifications bell (real, /api/notifications) ===== */
.notif-wrap { position: relative; }
.notif-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; transition: all .18s ease;
}
.notif-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.notif-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notif-btn svg { width: 18px; height: 18px; }
.notif-badge {
    position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.notif-panel {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 340px; max-width: 92vw;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.22); z-index: 60; overflow: hidden;
}
.notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem; border-bottom: 1px solid var(--border);
    font-size: .85rem; font-weight: 600; color: var(--text-primary);
}
.notif-action {
    background: none; border: 0; color: var(--primary); font-size: .78rem;
    font-weight: 600; cursor: pointer; padding: 0;
}
.notif-action:hover { text-decoration: underline; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.notif-empty { padding: 2rem 1rem; text-align: center; font-size: .85rem; color: var(--text-muted); }
.notif-item {
    display: flex; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .15s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.notif-item.unread .notif-item-title::after {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); margin-inline-start: 6px; vertical-align: middle;
}
.notif-item-icon {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-item-icon svg { width: 16px; height: 16px; }
.notif-item-icon.overdue { background: #fee2e2; color: #dc2626; }
.notif-item-icon.due_soon { background: #fef3c7; color: #d97706; }
.notif-item-icon.info { background: var(--primary-light); color: var(--primary); }
.notif-item-body { flex: 1 1 auto; min-width: 0; }
.notif-item-title { font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.notif-item-text { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.notif-item-time { font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
.notif-dismiss {
    flex: 0 0 auto; align-self: flex-start; background: none; border: 0; cursor: pointer;
    color: var(--text-muted); padding: 2px; border-radius: 4px; opacity: 0; transition: opacity .15s ease;
}
.notif-item:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { color: var(--danger); background: var(--bg-light); }
.notif-dismiss svg { width: 14px; height: 14px; }


/* =============================================================================
   DARK MODE
   -----------------------------------------------------------------------------
   Every component already reads from the :root custom properties, so the whole
   UI flips by overriding those tokens here. A small set of components use
   hardcoded light-mode tints (status chips, badges, empty states); those are
   normalised below so nothing stays glaring white.

   Toggle:  <html data-theme="dark">   (set by js/theme-search.js)
   ============================================================================= */

[data-theme="dark"] {
    /* Brand — nudged brighter so they read on dark surfaces */
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-light: rgba(129, 140, 248, .16);
    --secondary: #a78bfa;

    /* Sidebar stays deep but distinct from the page */
    --sidebar: #14122e;
    --sidebar-hover: rgba(129, 140, 248, .14);
    --sidebar-active: rgba(129, 140, 248, .24);

    --accent: #fbbf24;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fb923c;
    --info: #60a5fa;

    /* Surfaces */
    --surface: #1b1a2e;
    --surface-2: #232140;
    --border: #33314f;
    --border-strong: #45436a;

    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #b6bdd0;
    --text-muted: #8b93a8;

    --bg-light: #262443;

    /* Softer shadows read better on dark */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .35), 0 1px 2px -1px rgb(0 0 0 / .25);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .40), 0 2px 4px -2px rgb(0 0 0 / .30);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .45), 0 4px 6px -4px rgb(0 0 0 / .30);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .50), 0 8px 10px -6px rgb(0 0 0 / .35);
}

/* Base */
[data-theme="dark"] body { background: #131225; color: var(--text-primary); }
[data-theme="dark"] .bg-slate-50 { background-color: #131225 !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .project-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .task-card { background: var(--surface) !important; }

[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-300 { color: var(--text-muted) !important; }
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-100 { border-color: var(--border) !important; }
[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--surface-2) !important; }

/* Inputs / selects */
[data-theme="dark"] .form-input,
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] select option { background: var(--surface); color: var(--text-primary); }

/* Header + sidebar chrome */
[data-theme="dark"] .app-header { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .header-icon-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .sidebar-link { color: #b6bdd0; }
[data-theme="dark"] .sidebar-link.active { color: #fff; }

/* Light-tinted status chips -> translucent on dark */
[data-theme="dark"] .bg-green-50,  [data-theme="dark"] .bg-green-100  { background: rgba(74,222,128,.15) !important; }
[data-theme="dark"] .bg-red-50,    [data-theme="dark"] .bg-red-100    { background: rgba(248,113,113,.15) !important; }
[data-theme="dark"] .bg-blue-50,   [data-theme="dark"] .bg-blue-100   { background: rgba(96,165,250,.15) !important; }
[data-theme="dark"] .bg-yellow-50, [data-theme="dark"] .bg-yellow-100 { background: rgba(251,191,36,.15) !important; }
[data-theme="dark"] .bg-amber-50,  [data-theme="dark"] .bg-amber-100  { background: rgba(251,146,60,.15) !important; }
[data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100 { background: rgba(129,140,248,.15) !important; }
[data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100 { background: rgba(167,139,250,.15) !important; }
[data-theme="dark"] .bg-slate-50,  [data-theme="dark"] .bg-slate-100  { background: var(--surface-2) !important; }
[data-theme="dark"] .text-green-800 { color: #86efac !important; }
[data-theme="dark"] .text-red-800   { color: #fca5a5 !important; }
[data-theme="dark"] .text-blue-800  { color: #93c5fd !important; }
[data-theme="dark"] .text-slate-800 { color: var(--text-primary) !important; }

/* Charts grid lines + kanban */
[data-theme="dark"] .kanban-column { background: var(--surface-2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .kanban-column.drag-over { background: var(--primary-light) !important; }
[data-theme="dark"] .empty-state { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.65); }

/* Theme toggle button */
.theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-secondary); transition: all .18s ease;
}
.theme-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; }

/* =============================================================================
   GLOBAL SEARCH
   ============================================================================= */
.gs-panel {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 100%;
    min-width: 340px; max-width: 92vw; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.25);
    z-index: 70; overflow: hidden; max-height: 420px; overflow-y: auto;
}
.gs-empty { padding: 1.5rem 1rem; text-align: center; font-size: .85rem; color: var(--text-muted); }
.gs-item {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem;
    text-decoration: none; border-bottom: 1px solid var(--border); transition: background .12s ease;
}
.gs-item:last-child { border-bottom: 0; }
.gs-item:hover, .gs-item.active { background: var(--surface-2); }
.gs-item.active { box-shadow: inset 3px 0 0 var(--primary); }
.gs-icon {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary);
}
.gs-icon svg { width: 15px; height: 15px; }
.gs-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gs-label { font-size: .84rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-label mark { background: rgba(251,191,36,.35); color: inherit; border-radius: 3px; padding: 0 2px; }
.gs-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.gs-kind { flex: 0 0 auto; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 8px; }

@media (max-width: 640px) {
    .gs-panel { min-width: 0; width: 92vw; inset-inline-start: auto; inset-inline-end: 0; }
}