/*
 * Admin panel theme — mirrors the mobile PWA's design tokens (see
 * app/css/app.css): modern navy-blue, elevated ("3D") look. Loaded
 * after Bootstrap in header.php so these rules win without needing
 * per-view changes across ~60 admin screens.
 */
:root {
  --navy-950: #0a1730;
  --navy-900: #0f2350;
  --navy-800: #16305f;
  --navy-700: #1c3a72;
  --primary: #2f6fed;
  --primary-light: #5b8dfb;
  --bg: #eef2f9;
  --card: #ffffff;
  --text: #142035;
  --muted: #64748b;
  --success: #17a566;
  --success-dark: #0f7a4c;
  --danger: #e5484d;
  --danger-dark: #c0392f;
  --warning: #f5a524;
  --border: #e2e8f4;
  --sidebar-bg: var(--navy-900);
  --sidebar-bg-active: var(--navy-700);
  --sidebar-text: #b9c7e6;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Topbar — same navy gradient + depth as the PWA's .topbar */
.topbar {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 16px rgba(10, 23, 48, .25), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.topbar .navbar-brand,
.topbar .text-muted,
.topbar span { color: #dfe8fb !important; }
.topbar .navbar-brand { font-weight: 800; letter-spacing: .3px; }
.topbar .btn-outline-secondary {
  color: #dfe8fb !important;
  border-color: rgba(223, 232, 251, .45) !important;
}
.topbar .btn-outline-secondary:hover {
  color: var(--navy-900) !important;
  background: #dfe8fb !important;
}

/* Sidebar — navy gradient panel, active item as a glowing raised pill */
.sidebar {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  box-shadow: 4px 0 16px rgba(10, 23, 48, .18);
}
.sidebar a {
  color: var(--sidebar-text);
  border-radius: 10px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  line-height: 1.35;
}
.sidebar a.active, .sidebar a:hover {
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 4px 12px -2px rgba(47, 111, 237, .5);
}
.sidebar .text-white-50 { color: #6d80ab !important; }

/* ---- Hamburger toggle (mobile/narrow viewports only) ---- */
.sidebar-toggle {
  display: none;
  background: transparent; border: none; color: #dfe8fb;
  font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer;
  /* Must outrank the open drawer's z-index (1050) — otherwise once the
     drawer is open it visually and click-wise covers this same button,
     since the drawer starts at top:0/left:0 same as the topbar. Without
     this, the only way to close the drawer is tapping the backdrop. */
  position: relative;
  z-index: 1060;
}
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(10, 23, 48, .55);
  z-index: 1040;
}
.sidebar-backdrop.show { display: block; }

/*
 * Below md (768px) the 230px-wide always-visible sidebar has nowhere to
 * go and pushes the actual page content off-screen — the whole panel
 * became unusable on a phone-width viewport. Turn it into an off-canvas
 * drawer instead: fixed, slid out of view by default, toggled by the
 * hamburger button in the topbar.
 */
@media (max-width: 767.98px) {
  .sidebar-toggle { display: inline-block; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 260px !important;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
}

/*
 * Real bug caught by a scripted walkthrough: on narrow viewports, wide
 * data tables (attendance, employees, payroll runs, etc.) were forcing
 * the whole page wider than the screen instead of scrolling internally.
 * Root cause is plain flexbox: a flex item's default min-width is auto
 * (not 0), so `.flex-fill` next to the sidebar refused to shrink below
 * its widest child's intrinsic width — the sidebar CSS fix alone never
 * touched this, it's a separate issue in the main content column.
 * min-width: 0 lets it shrink to the viewport; overflow-x: auto then
 * gives any still-too-wide table its own internal scrollbar rather than
 * blowing out the page.
 */
.d-flex > .flex-fill {
  min-width: 0;
  overflow-x: auto;
}
@media (max-width: 767.98px) {
  .d-flex > .flex-fill { padding: 1rem !important; }
}

/* Cards — layered shadow + subtle top highlight = raised/"3D" feel */
.card {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(15, 35, 80, .04),
    0 8px 20px -8px rgba(15, 35, 80, .14),
    0 1px 0 rgba(255, 255, 255, .8) inset;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #eef1f5;
  border-radius: 16px 16px 0 0 !important;
  font-weight: 700;
  color: var(--navy-900);
}

/* Buttons — raised gradient primary, soft secondary */
.btn { border-radius: 11px; font-weight: 700; }
.btn-primary {
  background: linear-gradient(155deg, var(--primary-light), var(--primary)) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 5px 12px -3px rgba(47, 111, 237, .5), 0 1px 0 rgba(255, 255, 255, .2) inset;
}
.btn-primary:hover { box-shadow: 0 6px 16px -3px rgba(47, 111, 237, .6); }
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-success {
  background: linear-gradient(155deg, #24c07f, var(--success-dark)) !important;
  border-color: var(--success-dark) !important;
  box-shadow: 0 5px 12px -3px rgba(15, 122, 76, .45);
}
.btn-danger {
  background: linear-gradient(155deg, #ef5f63, var(--danger-dark)) !important;
  border-color: var(--danger-dark) !important;
  box-shadow: 0 5px 12px -3px rgba(192, 57, 47, .45);
}
.btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-outline-dark { border-radius: 11px; }

/* Forms */
.form-control, .form-select {
  border-radius: 11px;
  border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(47, 111, 237, .15);
}
.form-label { font-size: 13px; color: var(--muted); font-weight: 700; }

/* Badges/pills — same rounded-pill + soft-tint scheme as the PWA's .pill */
.badge { border-radius: 999px; font-weight: 700; padding: 4px 11px; }
.badge.bg-success { background-color: #d7f4e6 !important; color: var(--success-dark) !important; }
.badge.bg-warning { background-color: #fdecc8 !important; color: #8a5a06 !important; }
.badge.bg-danger { background-color: #fbdcdd !important; color: var(--danger-dark) !important; }
.badge.bg-primary { background-color: #dbe6fd !important; color: var(--navy-800) !important; }
.badge.bg-secondary { background-color: #eef1f5 !important; color: var(--muted) !important; }

/* Tables */
.table > :not(caption) > * > * { border-bottom-color: #eef1f6; }
.table-light { --bs-table-bg: #f7f9fd; }
.table thead th { color: var(--navy-800); font-weight: 700; }

/* Headings inherit the navy accent used across the PWA */
h1, h2, h3, h4, h5, h6 { color: var(--navy-900); }

.text-muted { color: var(--muted) !important; }