:root {
  --gold: #c9a227;
  --gold-light: #e6c968;
  --navy: #0b1220;
  --navy-2: #111a2b;
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f3f4f7;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.sidebar {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

.brand-mark {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav-link {
  color: #97a3b8;
  transition: all .15s ease;
  border-left: 3px solid transparent;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.nav-link.active {
  color: #fff;
  background: rgba(201,162,39,0.12);
  border-left-color: var(--gold);
}
.nav-link.active .nav-icon { color: var(--gold); }

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 6px rgba(16,24,40,.04);
  border: 1px solid #edf0f4;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 8px 20px rgba(16,24,40,.06);
}

/*
 * Chart canvases: Chart.js's `responsive:true` (paired with the default
 * `maintainAspectRatio:true`) sizes the canvas purely from its parent's
 * width and the chart type's default aspect ratio, ignoring the canvas's
 * own `height` attribute entirely -- on a wide card that produces a much
 * taller chart than intended (the "charts are too big" complaint). Every
 * chart canvas is wrapped in `.chart-box` (with `maintainAspectRatio:false`
 * set on the Chart instance) so its height is fixed by CSS instead, giving
 * a predictable, compact size regardless of viewport width.
 */
.chart-box { position: relative; width: 100%; height: 230px; }
.chart-box.chart-box-sm { height: 200px; }
.chart-box.chart-box-lg { height: 260px; }

.kpi-value { font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-in    { background: #ecfdf3; color: #027a48; }
.badge-out   { background: #f2f4f7; color: #475467; }
.badge-late  { background: #fef3f2; color: #b42318; }
.badge-leave { background: #eff8ff; color: #175cd3; }
.badge-absent{ background: #fef3f2; color: #b42318; }

.pulse-dot {
  position: relative;
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #12b76a;
}
.pulse-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #12b76a;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.avatar {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#eef2ff,#e0e7ff);
  color: #4338ca; font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}

.table-modern th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: #667085; font-weight: 600; background: #f9fafb;
}
.table-modern td, .table-modern th { padding: .65rem 1rem; }
.table-modern tbody tr { border-top: 1px solid #f0f2f5; }
.table-modern tbody tr:hover { background: #fafbfc; }

.login-bg {
  background: radial-gradient(circle at 20% 20%, #1a2744 0%, #0b1220 55%, #05070c 100%);
}

.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

/*
 * Photo/avatar sizing utilities (logo, admin & employee photos).
 *
 * assets/css/tailwind.css is a PRE-BUILT, purged CSS bundle -- it only
 * contains the utility classes Tailwind found in use across the project's
 * files AT THE TIME IT WAS LAST GENERATED (npm run build, via tailwind.config.js).
 * It is not rebuilt automatically when new files/classes are added, so any
 * Tailwind class used for the first time in a newer file (e.g. the w-9/h-9/
 * object-cover classes on the <img> tags added for photo uploads) silently
 * has NO effect -- the class name renders in the HTML, but no matching CSS
 * rule exists, so the browser falls back to the image's native pixel size.
 * That's why a correctly-resized-on-disk photo (e.g. exactly 480x480) can
 * still show up huge in a small avatar slot.
 *
 * These are the same values Tailwind itself would generate for those
 * classes (its default spacing scale, 1 unit = 0.25rem) -- added by hand
 * here so photo sizing works without needing Node/npm installed to rebuild
 * tailwind.css. If you ever do set up `npm install && npx tailwindcss -i
 * <source>.css -o assets/css/tailwind.css --minify` (see tailwind.config.js)
 * and it picks these classes up on its own, this block becomes redundant
 * but harmless (later rules with equal specificity just repeat the same
 * values).
 */
.w-8  { width: 2rem; }
.w-9  { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.h-8  { height: 2rem; }
.h-9  { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-full  { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/*
 * Purpose-specific logo/photo sizes.
 *
 * Logos and avatar photos appear in several very different contexts (a
 * hero logo on the login screen vs. a small mark in the sidebar vs. a
 * settings-page thumbnail preview) that should each be free to have their
 * own size without affecting the others. Using the same shared w-N/h-N
 * utility class in two places (e.g. both the login logo and some future
 * unrelated element using "h-12") would mean resizing one always resizes
 * the other too -- these named classes exist so each context is tuned
 * independently, on purpose. Adjust the numbers below directly if a
 * particular spot still looks too big/small.
 */
.logo-hero {
  display: block; height: 76px; width: auto; max-width: 280px;
  object-fit: contain; margin-left: auto; margin-right: auto;
}
.logo-sidebar {
  display: block; height: 52px; width: auto; max-width: 200px;
  object-fit: contain; object-position: left center;
}
.logo-preview {
  display: inline-block; height: 44px; width: auto; max-width: 220px;
  object-fit: contain;
}

.avatar-photo-xs { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.avatar-photo-sm { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.avatar-photo-md { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.avatar-photo-lg { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.avatar-photo-xl { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }

/* ============================================================================
 * Light / Dark theme.
 *
 * Only the MAIN CONTENT chrome (topbar + page body, wired up in
 * includes/layout_top.php) participates -- the sidebar keeps its fixed dark
 * navy brand look in both themes (that's branding, not content), and the
 * public login/home pages are unaffected (they don't load this toggle at
 * all, and are already dark-styled by design).
 *
 * Implementation note: every dashboard page reaches for Tailwind utility
 * classes (bg-white, text-gray-500, border-gray-200, ...) directly inline
 * rather than custom classes, and assets/css/tailwind.css is a PRE-BUILT,
 * PURGED bundle (see the big comment above) that can't gain a `dark:`
 * variant without a full rebuild across every page. Instead of that, this
 * overrides the exact Tailwind utility classes actually in use (found via
 * a project-wide grep) scoped under html[data-theme="dark"], which loads
 * fine from this hand-authored, never-purged file and needs no build step.
 * ============================================================================ */
html[data-theme="dark"] body { background: #0b1220; }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card { background-color: #131b2c !important; }
html[data-theme="dark"] .card { border-color: #1f2a3d; box-shadow: 0 1px 2px rgba(0,0,0,.35); }

html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100 { border-color: #1f2a3d !important; }

html[data-theme="dark"] .bg-gray-50  { background-color: #0f1728 !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #17223a !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: #1e2a42 !important; }

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-900 { color: #e8ecf4 !important; }
html[data-theme="dark"] .text-gray-800 { color: #d7dee9 !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-slate-300 { color: #b6c0d1 !important; }
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 { color: #8f9bb3 !important; }
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-slate-200 { color: #6b7690 !important; }

html[data-theme="dark"] .table-modern th { background: #0f1728 !important; color: #8f9bb3 !important; }
html[data-theme="dark"] .table-modern tbody tr { border-top-color: #1a2436; }
html[data-theme="dark"] .table-modern tbody tr:hover { background: rgba(22,32,51,.6); }

/* status tint badges: darken the fill, brighten the ink so they stay legible */
html[data-theme="dark"] .bg-red-50     { background-color: rgba(248,113,113,.12) !important; }
html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(52,211,153,.12) !important; }
html[data-theme="dark"] .bg-amber-50   { background-color: rgba(251,191,36,.12) !important; }
html[data-theme="dark"] .bg-blue-50    { background-color: rgba(96,165,250,.12) !important; }
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-500   { color: #fca5a5 !important; }
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-300 { color: #6ee7b7 !important; }
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-600 { color: #fcd34d !important; }
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-600  { color: #93c5fd !important; }
html[data-theme="dark"] .border-red-100     { border-color: rgba(248,113,113,.3) !important; }
html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-200 { border-color: rgba(52,211,153,.3) !important; }
html[data-theme="dark"] .border-amber-100   { border-color: rgba(251,191,36,.3) !important; }
html[data-theme="dark"] .border-blue-100    { border-color: rgba(96,165,250,.3) !important; }

html[data-theme="dark"] .badge-in    { background: rgba(18,183,106,.15); color: #6ee7b7; }
html[data-theme="dark"] .badge-out   { background: rgba(148,163,184,.15); color: #cbd5e1; }
html[data-theme="dark"] .badge-late  { background: rgba(244,63,94,.15);  color: #fca5a5; }
html[data-theme="dark"] .badge-leave { background: rgba(59,130,246,.15); color: #93c5fd; }
html[data-theme="dark"] .badge-absent{ background: rgba(244,63,94,.15);  color: #fca5a5; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #0f1728 !important;
  color: #e8ecf4 !important;
  border-color: #263349 !important;
}
html[data-theme="dark"] ::placeholder { color: #5b6780; }

.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid #e5e7eb; background: #fff; color: #667085;
  cursor: pointer; transition: all .15s ease;
}
.theme-toggle-btn:hover { background: #f3f4f7; }
.theme-toggle-btn .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn { background: #131b2c; border-color: #263349; color: #cbd5e1; }
html[data-theme="dark"] .theme-toggle-btn:hover { background: #17223a; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun  { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: inline-block; }