/* Dark-only theme overrides */
/* Palette: slate/gray neutrals with indigo/emerald accents */

:root {
  --bg-0: #0f172a; /* slate-900 */
  --bg-1: #111827; /* gray-900 */
  --bg-2: #1f2937; /* gray-800 */
  --bg-3: #374151; /* gray-700 */
  --text: #e5e7eb; /* gray-200 */
  --muted: #9ca3af; /* gray-400 */
  --primary-1: #4f46e5; /* indigo-600 */
  --primary-2: #4338ca; /* indigo-700 */
  --success-1: #10b981; /* emerald-500 */
  --warning-1: #f59e0b; /* amber-500 */
  --danger-1: #dc2626;  /* red-600 */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.25);
  --transition: 200ms ease;
}

html, body {
  background: radial-gradient(1000px 800px at 10% 10%, var(--bg-2), var(--bg-1) 60%), var(--bg-0) !important;
  color: var(--text) !important;
}

/* Cards and containers */
.card {
  background: var(--bg-1) !important;
  box-shadow: var(--shadow-1) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: var(--radius) !important;
}

.header, .header-left { color: var(--text) !important; }
.header p, .header-left p { color: var(--muted) !important; }

/* Status elements */
.status-card {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1)) !important;
}
.status-item { background: var(--bg-1) !important; border-left-color: var(--primary-1) !important; }
.status-item.manual { background: rgba(245, 158, 11, 0.08) !important; border-left-color: var(--warning-1) !important; }
.status-item.late { background: rgba(220, 38, 38, 0.08) !important; border-left-color: var(--danger-1) !important; }

/* Buttons */
.btn { color: #fff !important; }
.btn-primary { background: linear-gradient(135deg, var(--primary-1), var(--primary-2)) !important; }
.btn-success { background: linear-gradient(135deg, #059669, var(--success-1)) !important; }
.btn-warning { background: linear-gradient(135deg, #d97706, var(--warning-1)) !important; }
.btn-danger { background: linear-gradient(135deg, #b91c1c, var(--danger-1)) !important; }
.btn-info { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-2); transition: var(--transition); }
.btn:active { transform: translateY(0); filter: none; }

/* Notifications */
.notification.success { background: rgba(16,185,129,0.15) !important; color: #a7f3d0 !important; border-left-color: var(--success-1) !important; }
.notification.error { background: rgba(220,38,38,0.15) !important; color: #fecaca !important; border-left-color: var(--danger-1) !important; }
.notification.warning { background: rgba(245,158,11,0.15) !important; color: #fde68a !important; border-left-color: var(--warning-1) !important; }

/* Breaks */
.break-item { background: var(--bg-1) !important; border-left-color: var(--primary-1) !important; }
.break-item.active { background: rgba(79,70,229,0.08) !important; border-left-color: var(--warning-1) !important; }
.break-info .type { color: var(--text) !important; }
.break-info .time { color: var(--muted) !important; }

/* Tables */
.history-table, .attendance-table { color: var(--text) !important; }
.history-table th, .attendance-table th { background: var(--bg-2) !important; color: var(--text) !important; }
.history-table tr:hover, .attendance-table tr:hover { background: rgba(255,255,255,0.04) !important; }
.history-table td, .attendance-table td { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.history-table tbody tr:nth-child(even), .attendance-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* Badges */
.badge-normal { background: var(--primary-1) !important; color: #fff !important; }
.badge-manual { background: var(--warning-1) !important; color: #1f2937 !important; }
.badge-auto { background: #6b7280 !important; color: #fff !important; }
.badge-late { background: var(--danger-1) !important; color: #fff !important; }
.badge-present { background: #2563eb !important; color: #fff !important; }

/* Inputs and selects */
.employee-select select, .date-selector input, .form-group input {
  background: var(--bg-1) !important;
  color: var(--text) !important;
  border-color: var(--bg-3) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
}
.employee-select select:focus, .form-group input:focus {
  border-color: var(--primary-1) !important;
  box-shadow: 0 0 10px rgba(79,70,229,0.2) !important;
}

/* Links */
.dashboard-link, .back-link {
  background: var(--bg-1) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Incident items */
.incident-item { background: rgba(245,158,11,0.12) !important; }
.incident-item.critical { background: rgba(220,38,38,0.12) !important; }
.incident-description { color: var(--muted) !important; }

/* Stats */
.stat-box, .stat-card {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1)) !important;
  color: var(--text) !important;
}
.stat-card.red { background: linear-gradient(135deg, #7f1d1d, #991b1b) !important; }
.stat-card.green { background: linear-gradient(135deg, #065f46, #047857) !important; }
.stat-card.orange { background: linear-gradient(135deg, #7c2d12, #b45309) !important; }

/* Modal */
.modal-content { background: var(--bg-1) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.modal-header h2 { color: var(--text) !important; }

/* Misc */
.container { max-width: 1280px !important; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 16px;
  background: rgba(17,24,39,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}
.topbar .brand { font-weight: 800; letter-spacing: .3px; color: var(--text); }
.topbar nav { display: flex; gap: 10px; }
.nav-link { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: var(--transition); }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link.active { color: #fff; background: rgba(79,70,229,0.25); border: 1px solid rgba(79,70,229,0.35); }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
* { scrollbar-color: rgba(255,255,255,0.15) transparent; scrollbar-width: thin; }

/* Links */
a { color: #93c5fd; }
a:hover { color: #bfdbfe; }