/* ===================================================
   LIGHTBULB TECH — Dashboard Shared Styles
   =================================================== */

/* ── CSS Variables (Dark Theme — default) ────────── */
:root {
  --bg:           #07080F;
  --bg-soft:      #0D0F1A;
  --bg-card:      #121527;
  --primary:      #6366f1;
  --primary-dark: #4f46e5;
  --accent:       #8b5cf6;
  --text:         #ffffff;
  --text-muted:   rgba(255,255,255,0.55);
  --text-faint:   rgba(255,255,255,0.25);
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(99,102,241,0.35);
  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --success:      #10B981;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --radius:       16px;
  --radius-sm:    10px;
}

/* ── Light Theme ─────────────────────────────────── */
[data-theme="light"] {
  --bg:           #F0F2F8;
  --bg-soft:      #E4E8F2;
  --bg-card:      #FFFFFF;
  --text:         #0F1020;
  --text-muted:   rgba(15,16,32,0.6);
  --text-faint:   rgba(15,16,32,0.35);
  --border:       rgba(15,16,32,0.09);
  --border-hover: rgba(99,102,241,0.4);
}
[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] .dash-sidebar {
  background: #FFFFFF;
  border-right-color: var(--border);
  box-shadow: 2px 0 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-topbar {
  background: rgba(240,242,248,0.9);
  border-bottom-color: var(--border);
}
[data-theme="light"] .dash-nav a { color: var(--text-muted); }
[data-theme="light"] .dash-nav a:hover { color: var(--text); background: rgba(99,102,241,0.08); }
[data-theme="light"] .dash-nav a.active { color: #4f46e5; background: rgba(99,102,241,0.1); border-left-color: #6366f1; }
[data-theme="light"] .dash-nav-section { color: rgba(15,16,32,0.35); }
[data-theme="light"] .dash-page-title { color: var(--text); }
[data-theme="light"] .dash-icon-btn {
  background: rgba(15,16,32,0.05);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .dash-icon-btn:hover { background: rgba(99,102,241,0.1); color: #4f46e5; }
[data-theme="light"] .dash-user-name { color: var(--text); }
[data-theme="light"] .dash-footer { border-top-color: var(--border); }
[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
[data-theme="light"] .stat-card-value { color: var(--text); }
[data-theme="light"] .stat-card-label { color: var(--text-muted); }
[data-theme="light"] .data-table-wrap { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
[data-theme="light"] .data-table th { color: var(--text-faint); border-bottom-color: var(--border); }
[data-theme="light"] .data-table td { color: var(--text-muted); border-bottom-color: rgba(15,16,32,0.05); }
[data-theme="light"] .data-table tr:hover td { background: rgba(99,102,241,0.03); }
[data-theme="light"] .data-table td.bold { color: var(--text); }
[data-theme="light"] .modal-box { background: #FFFFFF; border-color: var(--border); box-shadow: 0 24px 80px rgba(0,0,0,0.15); }
[data-theme="light"] .modal-head,.modal-foot,[data-theme="light"] .modal-footer { border-color: var(--border); }
[data-theme="light"] .modal-title { color: var(--text); }
[data-theme="light"] .modal-close { background: rgba(15,16,32,0.05); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .modal-close:hover { color: var(--text); }
[data-theme="light"] .form-label { color: var(--text-muted); }
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #F7F8FC;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .form-select option { background: #fff; color: var(--text); }
[data-theme="light"] .btn-outline { background: rgba(15,16,32,0.04); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .btn-outline:hover { background: rgba(99,102,241,0.08); color: #4f46e5; }
[data-theme="light"] .action-btn { background: rgba(15,16,32,0.05); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .action-btn:hover { background: rgba(99,102,241,0.1); color: #4f46e5; }
[data-theme="light"] .filter-chip { border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .search-input { background: #F7F8FC; border-color: var(--border); color: var(--text); }
[data-theme="light"] .search-input::placeholder { color: var(--text-faint); }
[data-theme="light"] .dash-panel { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
[data-theme="light"] .dash-panel-head { border-bottom-color: var(--border); }
[data-theme="light"] .dash-panel-title { color: var(--text); }
[data-theme="light"] .mini-table th { color: var(--text-faint); border-bottom-color: var(--border); }
[data-theme="light"] .mini-table td { color: var(--text-muted); border-bottom-color: rgba(15,16,32,0.05); }
[data-theme="light"] .mini-table tr:hover td { background: rgba(99,102,241,0.03); }
[data-theme="light"] .mini-table td.name { color: var(--text); }
[data-theme="light"] .chart-panel { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
[data-theme="light"] .chart-panel-head { border-bottom-color: var(--border); }
[data-theme="light"] .chart-panel-title { color: var(--text); }
[data-theme="light"] .summary-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .summary-card-label { color: var(--text-faint); }
[data-theme="light"] .emp-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .emp-name { color: var(--text); }
[data-theme="light"] .emp-role { color: var(--text-faint); }
[data-theme="light"] .emp-skill { background: rgba(15,16,32,0.05); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .emp-footer { border-top-color: var(--border); }
[data-theme="light"] .port-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .port-title { color: var(--text); }
[data-theme="light"] .port-desc { color: var(--text-muted); }
[data-theme="light"] .port-tech-tag { background: rgba(15,16,32,0.05); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .port-footer { border-top-color: var(--border); }
[data-theme="light"] .progress-bar { background: rgba(15,16,32,0.08); }
[data-theme="light"] .tab-nav { border-bottom-color: var(--border); }
[data-theme="light"] .tab-btn { color: var(--text-faint); }
[data-theme="light"] .tab-btn.active { color: #4f46e5; border-bottom-color: #6366f1; }
[data-theme="light"] .empty-state i { color: var(--text-faint); }
[data-theme="light"] .empty-state h3 { color: var(--text); }
[data-theme="light"] .followup-item { border-bottom-color: var(--border); }
[data-theme="light"] .followup-name { color: var(--text); }
[data-theme="light"] .project-row { border-bottom-color: var(--border); }
[data-theme="light"] .project-row-name { color: var(--text); }
[data-theme="light"] .notif-dot { border-color: var(--bg); }
[data-theme="light"] .login-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 24px 80px rgba(0,0,0,0.12); }
[data-theme="light"] .data-table-head { background: #FFFFFF; }

/* ── Live Chat — Light Mode ──────────────────────── */
[data-theme="light"] #chatLayout {
  background: #FFFFFF;
}
[data-theme="light"] .chat-msg-visitor {
  background: #F0F2F8 !important;
  color: #0F1020 !important;
}
[data-theme="light"] .chat-msg-agent {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color: #ffffff !important;
}
[data-theme="light"] .chat-msg-visitor .chat-msg-time {
  color: rgba(15,16,32,0.35) !important;
}
[data-theme="light"] .chat-msg-agent .chat-msg-time {
  color: rgba(255,255,255,0.5) !important;
}
[data-theme="light"] #sessionsList .session-item:hover {
  background: rgba(99,102,241,0.06) !important;
}
[data-theme="light"] #chatWinMessages {
  background: #F7F8FC;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Layout ─────────────────────────────────────── */
.dash-layout { display:flex; min-height:100vh; }

/* ── Sidebar ─────────────────────────────────────── */
.dash-sidebar {
  width:240px;height:100vh;background:rgba(255,255,255,0.02);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;z-index:100;transition:transform 0.3s;
  overflow:hidden;
}
.dash-logo {
  padding:20px 20px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.dash-logo-icon {
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.dash-logo-text { font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff; }
.dash-logo-text span { color:#818cf8; }

.dash-nav { padding:12px 0;flex:1;overflow-y:auto; }
.dash-nav-label {
  padding:8px 20px 4px;font-size:0.65rem;font-weight:600;
  color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;
}
.dash-nav a {
  display:flex;align-items:center;gap:10px;padding:9px 20px;
  color:var(--text-muted);font-size:0.84rem;font-weight:500;
  transition:all 0.2s;border-left:2px solid transparent;
}
.dash-nav a:hover { color:#fff;background:rgba(99,102,241,0.08); }
.dash-nav a.active { color:#a5b4fc;background:rgba(99,102,241,0.12);border-left-color:#6366f1; }
.dash-nav a i { width:16px;text-align:center;font-size:13px; }

.dash-footer { padding:16px 20px;border-top:1px solid var(--border); }
.dash-user { display:flex;align-items:center;gap:10px; }
.dash-user-av {
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;color:#fff;
}
.dash-user-info { flex:1;min-width:0; }
.dash-user-name { font-size:0.82rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dash-user-role { font-size:0.7rem;color:var(--text-faint); }

/* ── Sidebar Scroll ──────────────────────────────── */
.dash-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.dash-nav::-webkit-scrollbar { width: 4px; }
.dash-nav::-webkit-scrollbar-track { background: transparent; }
.dash-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── Main Area ───────────────────────────────────── */
.dash-main { margin-left:240px;min-height:100vh;display:flex;flex-direction:column; }
.dash-topbar {
  padding:16px 28px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,7,20,0.8);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:50;
}
.dash-page-title { font-size:1.1rem;font-weight:700;color:#fff; }
.dash-page-sub { font-size:0.78rem;color:var(--text-faint);margin-top:2px; }
.dash-topbar-actions { display:flex;align-items:center;gap:12px; }
.dash-icon-btn {
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;transition:all 0.2s;position:relative;
}
.dash-icon-btn:hover { color:#fff;background:rgba(255,255,255,0.08); }
.notif-dot {
  position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:#ef4444;border:1.5px solid var(--bg);
}
.dash-content { padding:28px;flex:1; }

/* ── Stat Cards ──────────────────────────────────── */
.stat-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px; }
.stat-card {
  padding:20px;border-radius:16px;background:rgba(255,255,255,0.03);
  border:1px solid var(--border);position:relative;overflow:hidden;transition:all 0.2s;
}
.stat-card:hover { border-color:rgba(99,102,241,0.3);transform:translateY(-2px); }
.stat-card-icon {
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;
}
.stat-card-value { font-size:1.8rem;font-weight:800;color:#fff;font-family:var(--font-display);line-height:1; }
.stat-card-label { font-size:0.78rem;color:var(--text-muted);margin-top:4px; }
.stat-card-change { font-size:0.75rem;margin-top:8px;display:flex;align-items:center;gap:4px; }
.stat-card-change.up { color:#4ade80; }
.stat-card-change.down { color:#f87171; }
.stat-card-bg { position:absolute;right:-10px;bottom:-10px;font-size:64px;opacity:0.04;line-height:1; }

/* ── Data Table ──────────────────────────────────── */
.data-table-wrap {
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
}
.data-table-head {
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.data-table { width:100%;border-collapse:collapse; }
.data-table th {
  padding:11px 16px;font-size:0.7rem;font-weight:600;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);
  text-align:left;white-space:nowrap;
}
.data-table td {
  padding:13px 16px;font-size:0.84rem;color:var(--text-muted);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.02); }
.data-table td.bold { color:#fff;font-weight:500; }

/* ── Modal ───────────────────────────────────────── */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:#0d1117;border:1px solid var(--border);border-radius:20px;
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
}
.modal-box.wide { max-width:680px; }
.modal-head {
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title { font-size:1rem;font-weight:700;color:#fff; }
.modal-close {
  width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;
}
.modal-close:hover { color:#fff; }
.modal-body { padding:24px; }
.modal-foot, .modal-footer {
  padding:16px 24px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;
}

/* ── Forms ───────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block;font-size:0.78rem;font-weight:500;color:var(--text-muted);margin-bottom:6px; }
.form-input,.form-select,.form-textarea {
  width:100%;padding:9px 12px;background:rgba(255,255,255,0.04);
  border:1px solid var(--border);border-radius:10px;color:#fff;
  font-size:0.85rem;font-family:var(--font);outline:none;
  transition:border-color 0.2s;box-sizing:border-box;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:rgba(99,102,241,0.5); }
.form-select option { background:#0d1117; }
.form-textarea { resize:vertical;min-height:80px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:10px;font-size:0.85rem;font-weight:600;cursor:pointer;
  transition:all 0.2s;border:1px solid transparent;font-family:var(--font);
  text-decoration:none;
}
.btn-primary {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;
  border-color:rgba(99,102,241,0.3);
}
.btn-primary:hover { opacity:0.88; }
.btn-outline {
  background:rgba(255,255,255,0.05);color:var(--text-muted);
  border-color:var(--border);
}
.btn-outline:hover { color:#fff;background:rgba(255,255,255,0.1); }
.btn-danger {
  background:rgba(239,68,68,0.12);color:#f87171;
  border-color:rgba(239,68,68,0.3);
}
.btn-danger:hover { background:rgba(239,68,68,0.2); }
.btn-sm { padding:6px 12px;font-size:0.8rem; }

/* ── Action Buttons (icon only) ──────────────────── */
.action-btn {
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);display:inline-flex;align-items:center;
  justify-content:center;color:var(--text-muted);cursor:pointer;
  transition:all 0.2s;font-size:12px;
}
.action-btn:hover { color:#fff;background:rgba(99,102,241,0.2); }
.action-btn.danger:hover { color:#f87171;background:rgba(239,68,68,0.15); }

/* ── Status Badges ───────────────────────────────── */
.status-badge {
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:20px;font-size:0.72rem;font-weight:600;
}
.status-new      { background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.3); }
.status-contacted{ background:rgba(34,211,238,0.15);color:#67e8f9;border:1px solid rgba(34,211,238,0.3); }
.status-converted,.status-done { background:rgba(16,185,129,0.15);color:#4ade80;border:1px solid rgba(16,185,129,0.3); }
.status-rejected,.status-cancelled { background:rgba(239,68,68,0.15);color:#fca5a5;border:1px solid rgba(239,68,68,0.3); }
.status-inprog   { background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.3); }
.status-pending  { background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.3); }
.status-paid     { background:rgba(16,185,129,0.15);color:#4ade80;border:1px solid rgba(16,185,129,0.3); }
.status-overdue  { background:rgba(239,68,68,0.15);color:#fca5a5;border:1px solid rgba(239,68,68,0.3); }
.status-active   { background:rgba(16,185,129,0.15);color:#4ade80;border:1px solid rgba(16,185,129,0.3); }
.status-inactive { background:rgba(156,163,175,0.15);color:#9ca3af;border:1px solid rgba(156,163,175,0.3); }
.status-hold     { background:rgba(156,163,175,0.15);color:#9ca3af;border:1px solid rgba(156,163,175,0.3); }

/* ── Progress Bar ────────────────────────────────── */
.progress-bar { height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden; }
.progress-fill {
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.4s ease;
}

/* ── Filter Row / Chips ──────────────────────────── */
.filter-row { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.filter-chip {
  padding:5px 12px;border-radius:20px;font-size:0.75rem;font-weight:500;
  border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
  transition:all 0.2s;background:transparent;
}
.filter-chip.active,.filter-chip:hover {
  border-color:rgba(99,102,241,0.5);color:#a5b4fc;background:rgba(99,102,241,0.1);
}

/* ── Search ──────────────────────────────────────── */
.search-wrap { position:relative; }
.search-wrap i { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:13px; }
.search-input {
  padding:9px 14px 9px 36px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);border-radius:10px;color:#fff;
  font-size:0.85rem;font-family:var(--font);outline:none;transition:all 0.2s;
}
.search-input:focus { border-color:rgba(99,102,241,0.5); }

/* ── Tab Nav ─────────────────────────────────────── */
.tab-nav { display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px; }
.tab-btn {
  padding:10px 16px;font-size:0.85rem;font-weight:500;color:var(--text-faint);
  border-bottom:2px solid transparent;cursor:pointer;transition:all 0.2s;margin-bottom:-1px;
}
.tab-btn.active { color:#a5b4fc;border-bottom-color:#6366f1; }
.tab-btn:hover:not(.active) { color:var(--text-muted); }

/* ── Empty State ─────────────────────────────────── */
.empty-state { text-align:center;padding:64px 24px; }
.empty-state i { font-size:48px;color:var(--text-faint);margin-bottom:16px; }
.empty-state h3 { color:#fff;margin-bottom:8px; }
.empty-state p { color:var(--text-faint);font-size:0.85rem; }

/* ── Dashboard Panels ────────────────────────────── */
.dash-grid { display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:24px; }
.dash-panel { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
.dash-panel-head {
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.dash-panel-title { font-weight:600;color:#fff;font-size:0.9rem; }
.dash-panel-link { font-size:0.78rem;color:#818cf8;transition:color 0.2s; }
.dash-panel-link:hover { color:#a5b4fc; }

/* ── Mini Table (inside dash panels) ────────────── */
.mini-table { width:100%;border-collapse:collapse; }
.mini-table th {
  padding:10px 16px;font-size:0.7rem;font-weight:600;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);text-align:left;
}
.mini-table td { padding:11px 16px;font-size:0.83rem;color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,0.04); }
.mini-table tr:last-child td { border-bottom:none; }
.mini-table tr:hover td { background:rgba(255,255,255,0.02); }
.mini-table td.name { color:#fff;font-weight:500; }

/* ── Avatar ──────────────────────────────────────── */
.avatar-circle {
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.8rem;flex-shrink:0;
}

/* ── Chart Containers ────────────────────────────── */
.chart-row { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px; }
.chart-panel {
  background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.chart-panel-head {
  padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.chart-panel-title { font-size:0.88rem;font-weight:600;color:#fff; }
.chart-body { padding:20px;position:relative; }
.chart-body canvas { max-height:220px; }

/* ── Device Badges ───────────────────────────────── */
.device-badge { padding:3px 8px;border-radius:6px;font-size:0.72rem;font-weight:500; }
.device-desktop { background:rgba(99,102,241,0.12);color:#a5b4fc; }
.device-mobile  { background:rgba(6,182,212,0.12);color:#22d3ee; }
.device-tablet  { background:rgba(245,158,11,0.12);color:#fbbf24; }

/* ── Live Dot / Pulse ────────────────────────────── */
.live-dot {
  width:8px;height:8px;border-radius:50%;background:#4ade80;
  display:inline-block;margin-right:6px;animation:lb-pulse 2s infinite;
}
@keyframes lb-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Summary Cards ───────────────────────────────── */
.summary-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px; }
.summary-card {
  padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
}
.summary-card-value { font-size:1.5rem;font-weight:800;font-family:var(--font-display); }
.summary-card-label { font-size:0.75rem;color:var(--text-faint);margin-top:3px; }

/* ── Employee Cards ──────────────────────────────── */
.emp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px; }
.emp-card {
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  border-radius:16px;padding:20px;transition:all 0.2s;
}
.emp-card:hover { border-color:rgba(99,102,241,0.3);transform:translateY(-2px); }
.emp-card-top { display:flex;align-items:center;gap:14px;margin-bottom:14px; }
.emp-av {
  width:50px;height:50px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;flex-shrink:0;color:#fff;
}
.emp-name { font-size:0.92rem;font-weight:600;color:#fff; }
.emp-role { font-size:0.75rem;color:var(--text-faint);margin-top:2px; }
.emp-dept {
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
  font-size:0.7rem;font-weight:500;background:rgba(99,102,241,0.1);
  color:#a5b4fc;border:1px solid rgba(99,102,241,0.2);margin-bottom:10px;
}
.emp-skills { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px; }
.emp-skill {
  padding:2px 8px;border-radius:6px;font-size:0.68rem;
  background:rgba(255,255,255,0.05);color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.08);
}
.emp-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);
}
.emp-salary { font-size:0.85rem;font-weight:600;color:#4ade80; }

/* ── Portfolio Cards ─────────────────────────────── */
.portfolio-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }
.port-card {
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;transition:all 0.2s;
}
.port-card:hover { border-color:rgba(99,102,241,0.3); }
.port-img { height:160px;overflow:hidden;position:relative; }
.port-img img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; }
.port-card:hover .port-img img { transform:scale(1.05); }
.port-img-placeholder {
  width:100%;height:100%;
  background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.2));
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);font-size:28px;
}
.port-featured {
  position:absolute;top:10px;right:10px;background:rgba(99,102,241,0.9);
  color:#fff;padding:2px 8px;border-radius:6px;font-size:0.68rem;font-weight:600;
}
.port-body { padding:16px; }
.port-cat { font-size:0.7rem;font-weight:600;color:#818cf8;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px; }
.port-title { font-size:0.9rem;font-weight:600;color:#fff;margin-bottom:6px; }
.port-desc {
  font-size:0.78rem;color:var(--text-muted);margin-bottom:10px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.port-tech { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px; }
.port-tech-tag {
  padding:2px 8px;border-radius:5px;font-size:0.65rem;
  background:rgba(255,255,255,0.05);color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.08);
}
.port-footer {
  display:flex;justify-content:flex-end;gap:6px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,0.06);
}

/* ── Follow-up Items ─────────────────────────────── */
.followup-item {
  padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:12px;
}
.followup-item:last-child { border-bottom:none; }
.followup-icon {
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.followup-info { flex:1;min-width:0; }
.followup-name { font-size:0.83rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.followup-sub { font-size:0.75rem;color:var(--text-faint);margin-top:2px; }
.followup-due { font-size:0.72rem;padding:3px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0; }

/* ── Project Progress Row ────────────────────────── */
.project-row { padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.04); }
.project-row:last-child { border-bottom:none; }
.project-row-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.project-row-name { font-size:0.83rem;font-weight:500;color:#fff; }
.project-row-pct { font-size:0.78rem;color:var(--text-faint); }

/* ── Notification Panel ──────────────────────────── */
.notif-item {
  display:flex;align-items:flex-start;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:rgba(99,102,241,0.05); }
.notif-unread { background:rgba(99,102,241,0.04); }
.notif-icon {
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.notif-msg { font-size:.83rem;color:var(--text);line-height:1.45; }
.notif-time { font-size:.72rem;color:var(--text-faint);margin-top:3px; }
[data-theme="light"] .notif-item { border-bottom-color: var(--border); }
[data-theme="light"] .notif-unread { background: rgba(99,102,241,0.05); }

/* ── Theme toggle transition ─────────────────────── */
body, .dash-sidebar, .dash-topbar, .stat-card, .data-table-wrap,
.modal-box, .dash-panel, .chart-panel, .emp-card, .port-card,
.summary-card, .form-input, .form-select, .form-textarea {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ── Toast ───────────────────────────────────────── */
#lbToast {
  position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:12px;
  font-size:0.85rem;font-weight:500;z-index:99999;color:#fff;
  backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);display:none;
  align-items:center;gap:8px;max-width:320px;
}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:1100px) {
  .stat-cards { grid-template-columns:repeat(2,1fr); }
  .summary-cards { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:1fr; }
  .chart-row { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .dash-sidebar { transform:translateX(-100%); }
  .dash-main { margin-left:0; }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .stat-cards { grid-template-columns:1fr; }
  .dash-content { padding:16px; }
}

/* ── Login Page ──────────────────────────────────── */
.login-body {
  background:var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-wrap {
  width:100%;
  max-width:420px;
}
.login-card {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:24px;
  padding:40px;
  box-shadow:0 24px 80px rgba(0,0,0,0.3);
}
.login-logo {
  text-align:center;
  font-size:1.5rem;
  font-weight:800;
  margin-bottom:8px;
  font-family:var(--font-display);
  letter-spacing:-0.5px;
}
.login-title {
  text-align:center;
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:28px;
}
.login-error {
  background:rgba(239,68,68,0.1);
  border:1px solid rgba(239,68,68,0.3);
  color:#f87171;
  border-radius:10px;
  padding:10px 14px;
  font-size:0.85rem;
  margin-bottom:16px;
}

/* ── RTL (Arabic) Layout ─────────────────────────── */

/* Sidebar position */
[dir="rtl"] .dash-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
}
[dir="rtl"][data-theme="light"] .dash-sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}
[dir="rtl"] .dash-main {
  margin-left: 0;
  margin-right: 240px;
}

/* Sidebar logo */
[dir="rtl"] .dash-logo {
  flex-direction: row-reverse;
}

/* Nav links — icon + text from RIGHT */
[dir="rtl"] .dash-nav {
  direction: rtl;
}
[dir="rtl"] .dash-nav a {
  direction: rtl;
  justify-content: flex-start;
  border-left: none;
  border-right: 2px solid transparent;
  padding: 9px 16px 9px 20px;
}
[dir="rtl"] .dash-nav a.active {
  border-right-color: var(--primary);
  border-left-color: transparent;
}
[data-theme="light"][dir="rtl"] .dash-nav a.active {
  border-right-color: #6366f1;
  border-left-color: transparent;
}
[dir="rtl"] .dash-nav-label {
  direction: rtl;
  text-align: right;
  padding: 8px 20px 4px 8px;
}

/* Footer user row */
[dir="rtl"] .dash-user {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-user-info {
  text-align: right;
}

/* Topbar */
[dir="rtl"] .dash-topbar {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-page-title,
[dir="rtl"] .dash-page-sub {
  text-align: right;
}
[dir="rtl"] #topbarActions {
  flex-direction: row-reverse;
}
[dir="rtl"] .notif-dot {
  right: auto;
  left: 6px;
}

/* Content area */
[dir="rtl"] .stat-card-bg {
  right: auto;
  left: -10px;
}
[dir="rtl"] .live-dot {
  margin-right: 0;
  margin-left: 6px;
}

/* Search */
[dir="rtl"] .search-wrap i {
  left: auto;
  right: 11px;
}
[dir="rtl"] .search-input {
  padding: 9px 36px 9px 14px;
}

/* Tables */
[dir="rtl"] .data-table-head {
  flex-direction: row-reverse;
}
[dir="rtl"] .filter-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: right;
}

/* Modals & Forms */
[dir="rtl"] .modal-head {
  flex-direction: row-reverse;
}
[dir="rtl"] .modal-foot {
  flex-direction: row-reverse;
}
[dir="rtl"] .form-label {
  text-align: right;
  display: block;
}
[dir="rtl"] .form-row {
  direction: rtl;
}

/* Portfolio */
[dir="rtl"] .port-featured {
  right: auto;
  left: 10px;
}

/* Misc */
[dir="rtl"] .badge,
[dir="rtl"] .chip {
  direction: rtl;
}