/**
 * SPA overrides: tokens on #root; card/page polish under #root.app-main (all /app/* except login).
 * Dashboard-only strip under #root.dashboard-page (Vue bundle uses bg-black there).
 */
#root {
  --ds-radius: 0.75rem;
  --ds-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --ds-border: rgba(148, 163, 184, 0.35);
  --ds-page-bg: #f8fafc;
  --ds-card-bg: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Authenticated app shell (not login) — dashboard, attendance, timesheets…   */
/* -------------------------------------------------------------------------- */

body.light #root.app-main {
  background-color: var(--ds-page-bg);
  min-height: 100vh;
}

#root.app-main .rounded-lg.shadow,
#root.app-main .rounded-lg.shadow-md,
#root.app-main .shadow-md {
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow) !important;
}

/* Common template cards: light surface + border (scoped — avoids login regression) */
#root.app-main .rounded-lg.bg-white.dark\:bg-dark-header {
  background-color: var(--ds-card-bg) !important;
  border: 1px solid var(--ds-border);
}

/* Light-surface cards in dark theme — all app routes except dashboard (see #root.dashboard-page below). */
body.dark #root.app-main:not(.dashboard-page) .rounded-lg.bg-white.dark\:bg-dark-header {
  background-color: rgb(241 245 249) !important;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.45);
}

body.dark #root.app-main:not(.dashboard-page) .rounded-lg.bg-white.dark\:bg-dark-header .text-gray-900,
body.dark #root.app-main:not(.dashboard-page) .rounded-lg.bg-white.dark\:bg-dark-header .dark\:text-gray-400 {
  color: #0f172a !important;
}

#root.app-main .rounded-lg.shadow-sm {
  border: 1px solid var(--ds-border);
}

#root.app-main header,
#root.app-main [class*="PageHeader"],
#root.app-main nav[role="navigation"] {
  min-height: unset;
}

#root.app-main header .flex.items-center,
#root.app-main [class*="PageHeader"] .flex.items-center {
  min-height: 3rem;
  align-items: center;
}

/* -------------------------------------------------------------------------- */
/* Dashboard route only — black band + agenda (Index-yUhWQB34.js)              */
/* -------------------------------------------------------------------------- */

/*
 * Staff dashboard: class="bg-black px-4 pb-16 pt-6" (often empty → huge black void).
 * Must load after app-*.css (Vite) or Tailwind’s .bg-black wins last in cascade.
 */
#root.dashboard-page main .bg-black.px-4.pb-16.pt-6,
#root.dashboard-page .bg-black.px-4.pb-16.pt-6 {
  background-color: #e8eef5 !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ds-border);
  color: #0f172a;
}

/* Shrink padding when the strip has no inner content (Vue still renders empty div) */
#root.dashboard-page main .bg-black.px-4.pb-16.pt-6:empty,
#root.dashboard-page .bg-black.px-4.pb-16.pt-6:empty {
  padding-top: 0.75rem !important;
  padding-bottom: 1rem !important;
}

#root.dashboard-page .scroller-thin-y.max-h-96 {
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 0.5rem;
}

body.dark #root.dashboard-page .scroller-thin-y.max-h-96 {
  background-color: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------- */
/* Dashboard-only dark mode (does not affect other /app/* routes)              */
/* Overrides global app-main “light cards in dark theme” for this route only. */
/* -------------------------------------------------------------------------- */

#root.dashboard-page {
  --dash-dark-page: #0f172a;
  --dash-dark-surface: rgb(30 41 59);
  --dash-dark-surface-deep: rgb(15 23 42);
  --dash-dark-border: rgba(148, 163, 184, 0.22);
  --dash-dark-text: #e2e8f0;
  --dash-dark-muted: #94a3b8;
}

body.dark #root.dashboard-page.app-main {
  background-color: var(--dash-dark-page) !important;
  min-height: 100vh;
}

/* Hero strip (was .bg-black): cohesive slate, not flat gray */
body.dark #root.dashboard-page main .bg-black.px-4.pb-16.pt-6,
body.dark #root.dashboard-page .bg-black.px-4.pb-16.pt-6 {
  background-color: var(--dash-dark-surface-deep) !important;
  background-image: linear-gradient(
    180deg,
    rgb(30 41 59) 0%,
    var(--dash-dark-surface-deep) 100%
  ) !important;
  color: var(--dash-dark-text);
  border-bottom-color: var(--dash-dark-border);
}

/* KPI / card surfaces: dark slate (not bright slate-100 from global app-main hack) */
body.dark #root.dashboard-page .rounded-lg.bg-white.dark\:bg-dark-header {
  background-color: var(--dash-dark-surface) !important;
  color: var(--dash-dark-text);
  border: 1px solid var(--dash-dark-border);
}

body.dark #root.dashboard-page .rounded-lg.bg-white.dark\:bg-dark-header .text-gray-900,
body.dark #root.dashboard-page .rounded-lg.bg-white.dark\:bg-dark-header .dark\:text-gray-400 {
  color: var(--dash-dark-text) !important;
}

body.dark #root.dashboard-page .rounded-lg.bg-white.dark\:bg-dark-header .text-gray-500 {
  color: var(--dash-dark-muted) !important;
}

body.dark #root.dashboard-page .rounded-lg.bg-white.dark\:bg-dark-header .text-gray-700 {
  color: #cbd5e1 !important;
}

/* Agenda list + scroller */
body.dark #root.dashboard-page .scroller-thin-y.max-h-96 {
  background-color: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid var(--dash-dark-border);
}

body.dark #root.dashboard-page .border-b.border-gray-200.dark\:border-gray-700 {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

body.dark #root.dashboard-page .border-b.border-gray-200.dark\:border-gray-700:hover {
  background-color: rgba(51, 65, 85, 0.45) !important;
}

/* Info / empty-state alerts (BaseAlert info + common Tailwind blues) */
body.dark #root.dashboard-page .bg-blue-50,
body.dark #root.dashboard-page .bg-sky-50 {
  background-color: rgba(30, 58, 138, 0.38) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  color: #e0e7ff !important;
}

body.dark #root.dashboard-page .text-blue-800,
body.dark #root.dashboard-page .text-blue-700,
body.dark #root.dashboard-page .text-blue-600 {
  color: #bfdbfe !important;
}

/* “Mulai cepat” strip injected above router (onboarding.css) — dashboard only */
body.dark #root.dashboard-page .ms-activation-strip {
  background: var(--dash-dark-surface) !important;
  border-color: var(--dash-dark-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body.dark #root.dashboard-page .ms-activation-strip h3 {
  color: var(--dash-dark-text) !important;
}

body.dark #root.dashboard-page .ms-activation-strip a {
  background: rgba(15, 23, 42, 0.65) !important;
  color: #e2e8f0 !important;
  border-color: var(--dash-dark-border) !important;
}

body.dark #root.dashboard-page .ms-activation-strip a:hover {
  background: rgba(51, 65, 85, 0.85) !important;
}

body.dark #root.dashboard-page .ms-activation-check {
  border-top-color: var(--dash-dark-border) !important;
  color: var(--dash-dark-muted) !important;
}

body.dark #root.dashboard-page .ms-activation-check span.done {
  color: #34d399 !important;
}

/* Version footer on dashboard */
body.dark #root.dashboard-page footer {
  color: var(--dash-dark-muted);
  opacity: 0.9;
}

/* Five KPI cards in one row on tablet+ (stats grid from dashboard bundle) */
@media (min-width: 768px) {
  #root.dashboard-page main .mt-4.grid.w-full.gap-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Subtler app footer (version / credit from branding API) */
#root.app-main footer {
  opacity: 0.55;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}