/* ============================================================
   Voltage Capital Energy — brand layer (loaded LAST; overrides the base tokens)
   Palette from the logo: electric gold + black.  Fonts: Bebas Neue (display), Rajdhani (text), Share Tech Mono (figures).
   Contrast rules: gold is only ever a FILL with black text; gold used as TEXT switches to a darker gold on light
   backgrounds and to bright gold on dark ones. Every text/background pair below is >= 4.5:1.
   ============================================================ */
:root {
  --font-display: 'Bebas Neue', 'Segoe UI', Impact, sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, Consolas, monospace;

  --primary: #f2b705;          /* logo gold — fills, active states */
  --primary-light: #ffd23f;
  --primary-dark: #7a5800;     /* gold used as TEXT on light surfaces (7:1 on white) */
  --on-primary: #111111;       /* text on gold */
  --accent: #1d4ed8;
  --accent-dark: #1e3fae;
  --info: #4f46e5;
  --success: #0a7d52;
  --danger: #c62828;
  --warning: #b45309;

  --bg: #f3f3f0;
  --bg-card: #ffffff;
  --bg-sidebar: #0d0d0d;
  --bg-input: #ffffff;
  --border: #d9d9d2;
  --text: #111111;
  --text-secondary: #3f3f3a;
  --text-muted: #62625c;
  --text-sidebar: #d6d6d0;
  --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 6px 18px rgba(0,0,0,.14);
  --chart-grid: rgba(0,0,0,.10);
}
[data-theme="dark"] {
  --primary: #f5c518;
  --primary-light: #ffd84a;
  --primary-dark: #f5c518;     /* bright gold as TEXT on dark surfaces (10:1 on #1b1b1b) */
  --on-primary: #111111;
  --accent: #6ea8ff;
  --accent-dark: #8dbcff;
  --info: #a5b4fc;
  --success: #34d399;
  --danger: #ff7b7b;
  --warning: #fbbf24;

  --bg: #0e0e0e;
  --bg-card: #1a1a1a;
  --bg-sidebar: #000000;
  --bg-input: #232323;
  --border: #363636;
  --text: #f4f4f1;
  --text-secondary: #d0d0ca;
  --text-muted: #a0a09a;
  --text-sidebar: #d6d6d0;
  --shadow: 0 1px 3px rgba(0,0,0,.6);
  --shadow-lg: 0 6px 18px rgba(0,0,0,.7);
  --chart-grid: rgba(255,255,255,.14);
}

/* ---- Typography ---- */
html { font-size: 16px; }
body { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: .1px; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, .page-header h2, .card-header h3, .modal-header h3, .topbar-left h2, .login-card h1,
.nav-group, .crm-section-title, .crm-sec-title, .crm-sec-div, .logo-text, .acc-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .06em;
}
.page-header h2 { font-size: 30px; }
.topbar-left h2 { font-size: 26px; }
.card-header h3, .modal-header h3 { font-size: 21px; }
.kpi-value, .k-value, .crm-pstat .v, .acc-kpi .v, .stat-num { font-family: var(--font-display); letter-spacing: .04em; }
.kpi-value { font-size: 34px; } .k-value { font-size: 30px; }
td.num, th.num, .k-line span:last-child, .mono, .crm-gp .gv, .acc-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
th { font-family: var(--font-body); font-weight: 700; letter-spacing: .08em; }
label, .form-group label { font-weight: 700; letter-spacing: .04em; }

/* ---- Focus (visible in both themes) ---- */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(242,183,5,.30); }

/* ---- Buttons: gold fill, black text ---- */
.btn { font-weight: 700; letter-spacing: .04em; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-light); color: var(--on-primary); }
.btn-outline { color: var(--text); border-color: var(--border); }
.btn-outline:hover { background: var(--bg); border-color: var(--primary); }
.btn-accent, .btn-success, .btn-danger { color: #fff; }
[data-theme="dark"] .btn-accent { background: #2f6fe4; } [data-theme="dark"] .btn-success { background: #0d8a5c; } [data-theme="dark"] .btn-danger { background: #d33b3b; }
.btn-icon:hover { background: rgba(127,127,127,.15); }

/* ---- Shell ---- */
.sidebar { border-right: 3px solid var(--primary); }
.sidebar-header { border-bottom-color: rgba(255,255,255,.14); }
.logo-text { font-size: 22px; color: #fff; }
.nav-item { font-weight: 600; letter-spacing: .03em; }
.nav-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-item.active { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.nav-group { color: var(--primary); font-size: 15px; padding-top: 16px; }
.user-name { color: #fff; } .user-role { color: var(--text-sidebar); }
.user-avatar, .team-card-avatar, .kanban-card-meta .assignee, .assignee-sm, .gantt-row-label .assignee-sm { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.75); font-family: var(--font-body); font-weight: 700; }
.topbar { border-bottom: 2px solid var(--primary); }
.search-box input { background: var(--bg-input); border-color: var(--border); }
.search-box input::placeholder { color: var(--text-muted); }
.toast { font-weight: 600; }
.status-badge { font-weight: 700; }

/* ---- Login ---- */
.login-screen { background: radial-gradient(circle at 30% 20%, #262626 0%, #0a0a0a 70%); }
.login-card { border-top: 4px solid var(--primary); }
.login-card h1 { font-size: 30px; }
.login-subtitle { color: var(--text-muted); }

/* ---- Theme-aware logo ---- */
.brand-img { display: block; }
.brand-dark { display: none; }
[data-theme="dark"] .brand-light { display: none; }
[data-theme="dark"] .brand-dark { display: block; }
.sidebar .brand-light { display: none !important; }           /* sidebar is always black */
.sidebar .brand-dark { display: block !important; }
.login-logo-img.brand-img { margin: 0 auto 8px; width: 170px; }
.sidebar-logo-img { width: 34px; height: 34px; }

/* ---- Places that had hard-coded light/white text on gold ---- */
.gantt-bar.in-progress { color: var(--on-primary); }
.approval-step, .approval-step * { color: #111; }
[data-theme="dark"] .approval-step.waiting { background: #cbd5e1; }
.kanban-label { background: var(--info); color: #fff; }
[data-theme="dark"] .kanban-label { color: #111; }
.toggle-switch.active { background: var(--primary); }
.badge { background: var(--danger); color: #fff; }
[data-theme="dark"] .badge { color: #111; }
.notif-header button { color: var(--accent); }

/* ---- Status badges: solid pastel + dark text works in both themes; keep dark text explicit ---- */
.status-badge.pending, .status-badge.in-progress, .status-badge.review, .status-badge.completed, .status-badge.blocked,
.status-badge.approved, .status-badge.rejected, .status-badge.high, .status-badge.medium, .status-badge.low { color: #111 !important; }
.status-badge.pending, .status-badge.medium { background: #ffe58a; }
.status-badge.in-progress, .status-badge.low { background: #bcd7ff; }
.status-badge.review { background: #d9ccff; }
.status-badge.completed, .status-badge.approved { background: #a8efcf; }
.status-badge.blocked, .status-badge.rejected, .status-badge.high { background: #ffbdbd; }
.status-badge.critical { background: #b71c1c; color: #fff !important; }

/* ---- Contrast fixes found by the automated audit (light + dark) ---- */
a { color: var(--accent); }
a:hover { text-decoration: underline; }
.btn-icon { color: var(--text); }
.tab.active, .kanban-add-btn:hover, .gantt-header-day.today, .time-entry-duration, .stat-box .stat-value { color: var(--primary-dark); }
[data-theme="dark"] .btn-success { background: #0a7a50; }
/* Gantt bars for To Do / Backlog had no background (white text on white) */
.gantt-bar.todo { background: #4f46e5; color: #fff; }
.gantt-bar.backlog { background: #64748b; color: #fff; }
.gantt-bar.pending { background: #64748b; color: #fff; }
.gantt-bar.review { background: #7c3aed; color: #fff; }
.gantt-bar.completed { background: #0a7d52; color: #fff; }
.gantt-bar.blocked { background: #c62828; color: #fff; }
.gantt-bar.in-progress { background: var(--primary); color: var(--on-primary); }

/* ---- Sidebar shows the full logo; the collapsed sidebar shows the bolt ---- */
.sidebar-header { position: relative; justify-content: center; padding: 18px 12px 14px; }
.sidebar-logo-full { width: 140px; height: auto; display: block; }
.sidebar-logo-img { display: none; width: 34px; height: 34px; object-fit: contain; }
.sidebar-toggle { position: absolute; top: 8px; right: 8px; }
.sidebar.collapsed .sidebar-logo-full { display: none; }
.sidebar.collapsed .sidebar-logo-img { display: block; }
.sidebar.collapsed .sidebar-toggle { position: static; }
.sidebar.collapsed .sidebar-header { padding: 16px 8px; flex-direction: column; gap: 8px; }