/* ===== Design Tokens (shadcn/ui inspired) ===== */
html { color-scheme: light; }
:root {
    --bg: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --text: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --amber: #f59e0b;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08);
    --transition: 150ms ease;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--primary);
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --border: #334155;
    --border-light: #1e293b;
    --text: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-light: #1e3a5f;
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --amber: #fbbf24;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3);
}

/* Smooth theme transition */
*, *::before, *::after {
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

/* Disable transition on page load */
html.no-transition *, html.no-transition *::before, html.no-transition *::after {
    transition: none !important;
}

/* Dark overrides for hardcoded colors */
[data-theme="dark"] .logo-icon { filter: invert(1) hue-rotate(180deg) brightness(1.2); }
[data-theme="dark"] .settings-menu { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .btn-primary { color: #f8fafc; }
[data-theme="dark"] .btn-secondary { background: var(--bg-hover); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-danger { color: #f8fafc; }
[data-theme="dark"] .filter-dropdown-trigger { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .filter-dropdown-menu { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .filter-chip { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .filter-chip.active { color: #f8fafc; }
[data-theme="dark"] .kanban-cards { background: var(--bg-hover); }
[data-theme="dark"] .kanban-cards.drag-over { background: rgba(59, 130, 246, 0.12); }
[data-theme="dark"] .kanban-card { background: var(--bg-card); }
[data-theme="dark"] .drawer-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .modal { background: var(--bg-card); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea { background-color: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .toast { color: #f8fafc; }
[data-theme="dark"] .badge-blue { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .badge-green { background: #14532d; color: #86efac; }
[data-theme="dark"] .badge-red { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .badge-amber { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .badge-gray { background: #334155; color: #94a3b8; }
[data-theme="dark"] .badge-purple { background: #581c87; color: #d8b4fe; }
[data-theme="dark"] .btn-danger:hover { opacity: 0.85; background: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .funnel-filter-chip { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .funnel-fill { color: #f8fafc; }
[data-theme="dark"] .preview-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .preview-panel { background: var(--bg-card); }
[data-theme="dark"] .payout-table tbody tr:nth-child(even) { background: #1e293b; }
[data-theme="dark"] .artifact-item { background: var(--bg-card); }
[data-theme="dark"] .buddy-assign-input { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .buddy-assign-menu { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .funnel-bar { color: #f8fafc; }
[data-theme="dark"] .auth-overlay { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .data-table th { background: var(--bg-hover); }
[data-theme="dark"] .data-table tbody tr:hover { background: var(--bg-hover); }
[data-theme="dark"] .status-select { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .page { background: var(--bg); }
[data-theme="dark"] .main { background: var(--bg); }
[data-theme="dark"] .sidebar { background: var(--bg-sidebar); border-color: var(--border); }
[data-theme="dark"] .nav-item:hover { background: var(--bg-hover); }
[data-theme="dark"] .nav-item.active { background: var(--bg-hover); }
[data-theme="dark"] .timeline-item { border-color: var(--border); }
[data-theme="dark"] .archive-item { background: var(--bg-card); }
[data-theme="dark"] .archive-item:hover { background: var(--bg-hover); }
[data-theme="dark"] .kanban-header { background: var(--bg-hover); }
[data-theme="dark"] .board-header { background: var(--bg-hover); }
[data-theme="dark"] .people-list { background: var(--bg-card); }
[data-theme="dark"] .details-grid { background: var(--bg-card); }
[data-theme="dark"] .drawer-section { background: var(--bg-card); }
[data-theme="dark"] .drawer { background: var(--bg-card); }
[data-theme="dark"] .drawer-header { border-color: var(--border); }
[data-theme="dark"] .toast { background: var(--bg-card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .toast-success { background: #14532d; color: #86efac; }
[data-theme="dark"] .toast-error { background: #7f1d1d; color: #fca5a5; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    height: 100vh;
    overflow: hidden;
}