/* ============================================================
   NAP PERFORMANCE — DESIGN TOKENS
   Edit variables here to retheme the entire dashboard.
   ============================================================ */
:root {
  /* Brand */
  --brand-primary:   #4F5590;
  --brand-secondary: #C08497;
  --brand-dark:      #1B1E3C;

  /* Gradients */
  --gradient-sidebar:      linear-gradient(rgba(6,80,100,.75), rgba(0,0,0,.70));
  /* Flat base only — the moving-light blobs (.fx) now provide the depth/mesh effect,
     so a static radial-gradient mesh layered underneath would just compete visually. */
  --gradient-dark-nav:     linear-gradient(135deg,#1B1E3C,#272C58);
  --gradient-sidebar-dark: linear-gradient(160deg,#1B1E3C,#232852);
  --gradient-page-header:  var(--gradient-dark-nav);
  --gradient-purple:       linear-gradient(135deg, #667eea, #764ba2);
  --gradient-green:        linear-gradient(135deg, #059669, #10b981);
  --gradient-pink:         linear-gradient(135deg, #db2777, #f43f5e);
  --gradient-orange:       linear-gradient(135deg, #ea580c, #f97316);
  --gradient-teal:         linear-gradient(135deg, #0891b2, #6366f1);

  /* Icon-badge gradient family — every icon now draws from this same
     blue→purple family instead of per-category colours. */
  --icon-grad-1-from: #A06A82; --icon-grad-1-to: #D9B3C2;
  --icon-grad-2-from: #A06A82; --icon-grad-2-to: #D9B3C2;
  --icon-grad-3-from: #A06A82; --icon-grad-3-to: #D9B3C2;
  --icon-grad-4-from: #A06A82; --icon-grad-4-to: #D9B3C2;

  /* Palette accents */
  --accent-blue:     #669BBC;
  --accent-cream:    #FDF0D5;
  --accent-navy:     #003049;
  --accent-red:      #C1121F;

  /* Semantic colours */
  --color-success:     #16a34a;
  --color-success-bg:  #dcfce7;
  --color-warning:     #d97706;
  --color-warning-bg:  #fef3c7;
  --color-danger:      #dc2626;
  --color-danger-bg:   #fee2e2;
  --color-info:        #0891b2;
  --color-info-bg:     #e0f2fe;

  /* Surfaces */
  --surface-page:   #FFFFFF;
  --surface-card:   #ffffff;
  --surface-muted:  #f8fafc;
  --border-light:   #e2e8f0;
  --border-medium:  #cbd5e1;
  --card-border:    rgba(27,30,60,.30);

  /* Text */
  --text-primary:   #1E2142;
  --text-secondary: #6D6E8C;
  --text-muted:     #6D6E8C;

  /* Font */
  --font-base: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, sans-serif;

  /* Spacing (4px grid) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Border-radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 3px rgba(27,30,60,.08);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(27,30,60,.10), 0 16px 32px rgba(27,30,60,.16);
  --shadow-md: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 10px rgba(27,30,60,.14), 0 20px 40px rgba(27,30,60,.18);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 16px rgba(27,30,60,.16), 0 24px 48px rgba(27,30,60,.20);
  --shadow-xl: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 24px rgba(27,30,60,.18), 0 32px 64px rgba(27,30,60,.22);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-base);
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   PAGE BANNER (the dark gradient bar at top of every page)
   ============================================================ */
.page-banner {
  background: var(--gradient-page-header);
  padding-top: var(--sp-10);
  padding-bottom: 5.5rem;     /* creates the overlap zone for cards below */
}

/* Pull content up to overlap the banner. position:relative (no explicit z-index)
   is deliberate: it still paints above .admin-page-header via normal DOM order
   (both are z-index:auto, so later-in-DOM wins), which is all the overlap needs.
   An explicit z-index here previously caused two different regressions:
     1. z-index:2 tied with .header's z-index:2 and (being later in the DOM) won,
        hiding the avatar dropdown's Logout link under a stat card.
     2. ANY explicit z-index here creates a new stacking context, which traps
        every Bootstrap modal nested inside this wrapper (nearly all of them) —
        their internal z-index:1055 then only competes within this context's
        low z-index, so the body-level .modal-backdrop (z-index:1050) painted
        OVER the modal instead of under it: backdrop visible, modal unclickable.
   z-index:auto avoids both: it doesn't create a stacking context at all, so
   nested modals' z-index is compared normally against the backdrop, and .header's
   explicit z-index:2 still outranks this element's z-index:auto regardless of
   DOM order. */
.page-content-overlap {
  position: relative;
  margin-top: -5.5rem;
}

/* ============================================================
   CARDS
   ============================================================ */

/* Every plain Bootstrap .card across the app (data-title pages, forms, etc.) gets the
   same rounded/soft-shadow look as the NAP dashboard's cards, without needing a class
   change per page. Pages using border-0/shadow-sm utilities still win via !important. */
.card {
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}
.card-body {
  padding: 24px 26px;
}

/* Generic content card */
.card-base {
  background: var(--surface-card);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
}
.card-base:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium) !important;
}

/* Gradient stat card (coloured bg) */
.card-stat {
  border: none !important;
  border-radius: var(--r-lg) !important;
  color: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Data-title card (clickable/disabled variant) */
.card-data {
  background: var(--surface-card);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition:
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
}
.card-data.is-clickable {
  cursor: pointer;
}
.card-data.is-clickable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-primary) !important;
}
.card-data.is-disabled {
  background: var(--surface-muted);
  border: 2px dashed var(--border-medium) !important;
  opacity: .65;
  cursor: not-allowed;
}

/* ============================================================
   ICON BADGE (small coloured square with icon inside)
   ============================================================ */
.icon-badge {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--icon-grad-1-from), var(--icon-grad-1-to));
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 10px rgba(27,30,60,.4);
  font-size: 1.1rem;
  color: #fff;
}
.icon-badge.green  { background: var(--gradient-green);  box-shadow: 0 4px 10px rgba(16,185,129,.30); }
.icon-badge.pink   { background: var(--gradient-pink);   box-shadow: 0 4px 10px rgba(245,87,108,.30); }
.icon-badge.orange { background: var(--gradient-orange); box-shadow: 0 4px 10px rgba(250,112,154,.30); }
.icon-badge.teal      { background: var(--gradient-teal);   box-shadow: 0 4px 10px rgba(8,145,178,.30); }
.icon-badge--sm       { width: 32px; height: 32px; min-width: 32px; font-size: .8rem; border-radius: 8px; }

/* Unified blue→purple icon family — pick one of 4 to keep pages from looking
   visually identical while staying in the same colour family. */
.icon-badge--v1 { background: linear-gradient(145deg, var(--icon-grad-1-from), var(--icon-grad-1-to)); }
.icon-badge--v2 { background: linear-gradient(145deg, var(--icon-grad-2-from), var(--icon-grad-2-to)); }
.icon-badge--v3 { background: linear-gradient(145deg, var(--icon-grad-3-from), var(--icon-grad-3-to)); }
.icon-badge--v4 { background: linear-gradient(145deg, var(--icon-grad-4-from), var(--icon-grad-4-to)); }

/* ── Division accordion ── */
#divisionsAccordion .card-header[data-bs-toggle="collapse"]:hover { background: #f1f5f9 !important; }
#divisionsAccordion .accordion-chevron { font-size: .75rem; }

/* ============================================================
   STAT BOX (small inset box inside a card)
   ============================================================ */
.stat-box {
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.stat-box .stat-label {
  font-size: .68rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: .15rem;
}
.stat-box .stat-value {
  font-size: .95rem;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

/* Wide data-title-card variant: bigger, equal-width, left-aligned stat chips. */
.stat-box--wide {
  flex: 1 1 0;
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
}
.stat-box--wide .stat-label {
  font-size: .78rem;
  margin-bottom: .3rem;
}
.stat-box--wide .stat-value {
  font-size: 1.3rem;
}

/* ============================================================
   LEGACY PAGE BANNER (older data-title pages not yet migrated to
   <x-page-header>) — shared fallback so every page picks up the
   current theme gradient. Pages must NOT redeclare .bg-primary-gradient
   locally any more; if a page needs a one-off tweak, use a more
   specific selector instead.
   ============================================================ */
.bg-primary-gradient {
  background: var(--gradient-page-header) !important;
}

/* Table headers used across the data-title list/table pages. */
.table-dark {
  --bs-table-color: #ffffff;
  --bs-table-bg: #2A0548;
  --bs-table-border-color: #1A0330;
  --bs-table-striped-bg: #F7F6FA;
  --bs-table-striped-color: #1A1F2E;
  --bs-table-active-bg: #EDE9FE;
  --bs-table-active-color: #1A1F2E;
  --bs-table-hover-bg: #EDE9FE;
  --bs-table-hover-color: #1A1F2E;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-dark th { color: #fff !important; }

/* "View" row-action button (the eye icon). */
.btn-view-action {
  background: #C08497 !important;
  border: none !important;
  color: #fff !important;
}
.btn-view-action:hover,
.btn-view-action:focus {
  background: #A66B7D !important;
  color: #fff !important;
}

/* "Edit" row-action buttons across data-title tables. */
.btn-warning {
  background-color: #3B0764 !important;
  border-color: #2A0548 !important;
  color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #2A0548 !important;
  border-color: #1A0330 !important;
  color: #fff !important;
}

/* "Delete" buttons — kept red (semantic danger convention), unlike the rest
   of the retheme, so destructive actions stay unambiguous. */
.btn-danger {
  background-color: #C1121F !important;
  border-color: #9e0e19 !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #9e0e19 !important;
  border-color: #7a0b14 !important;
}

/* "Add / Create" buttons. */
.btn-success {
  background-color: #6B3FA8 !important;
  border-color: #3B0764 !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #3B0764 !important;
  border-color: #2a0548 !important;
  color: #fff !important;
}

/* Solid "value" badges (e.g. a table cell's figure) — not the "-subtle" status
   variant (New/Edited/Deletion), which stays semantic green/amber/red. */
.badge.bg-success {
  background-color: #3B6CF6 !important;
}

/* ============================================================
   SOFT BADGES
   ============================================================ */
.badge-success-soft { background: var(--color-success-bg) !important; color: var(--color-success) !important; }
.badge-warning-soft { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; }
.badge-danger-soft  { background: var(--color-danger-bg)  !important; color: var(--color-danger)  !important; }
.badge-info-soft    { background: var(--color-info-bg)    !important; color: var(--color-info)    !important; }

/* Status badges used across tables */
.badge-status {
  font-size: .72rem;
  padding: .3rem .65rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-clean thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: .85rem 1rem;
  background: var(--surface-muted);
  border-bottom: 2px solid var(--border-light) !important;
  white-space: nowrap;
}
.table-clean tbody td {
  padding: .85rem 1rem;
  vertical-align: middle;
  font-size: .875rem;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary);
}
.table-clean tbody tr:last-child td { border-bottom: none !important; }
.table-clean tbody tr {
  transition: background var(--t-fast);
}
.table-clean tbody tr:hover td { background: #f8f8ff; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--r-sm) !important;
  border-color: var(--border-medium) !important;
  font-size: .875rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.form-label {
  font-size: .825rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .35rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 500;
  font-size: .875rem;
  transition: all var(--t-fast);
}
.btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-primary:hover {
  background: #3B0764 !important;
  border-color: #3B0764 !important;
  box-shadow: 0 4px 12px rgba(107,63,168,.35) !important;
}
.btn-white {
  background: #fff;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}
.btn-white:hover {
  background: var(--surface-muted);
  border-color: var(--border-medium);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}
.empty-state .empty-icon {
  font-size: 2.5rem;
  opacity: .35;
  display: block;
  margin-bottom: var(--sp-3);
}
.empty-state p { margin: 0; font-size: .875rem; }

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  display: block;
}
@keyframes skeleton-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--r-md) !important;
  border: none !important;
  font-size: .875rem;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-danger   { background: var(--color-danger-bg);  color: var(--color-danger);  }
.alert-warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-info     { background: var(--color-info-bg);    color: var(--color-info);    }

/* ============================================================
   NAVIGATION / SIDEBAR
   ============================================================ */
.nav-link.active,
.nav-link:hover {
  background: rgba(255,255,255,.12) !important;
  border-radius: var(--r-sm);
}

/* ============================================================
   PAGE HEADER (admin-level dark banner)
   ============================================================ */
.admin-page-header {
  position: relative;
  /* NOT overflow:hidden here — the "actions" slot can contain a dropdown (e.g. the
     department filter on the NAP dashboard) whose menu must be able to extend past
     this box. The .fx glow layer clips its own blobs via its own overflow:hidden
     instead, so nothing needs to be hidden at this level. */
  background: var(--gradient-page-header);
  padding: var(--sp-10) 0 5.5rem;
  /* Extend the gradient up behind the transparent top bar above it, so both read as
     one continuous banner instead of two separately-painted gradients. The top bar
     (.header) is ~48px tall — pull this element up by that much and add the same
     amount back as padding so the title's own position doesn't shift. */
  margin-top: -48px;
  padding-top: calc(var(--sp-10) + 48px);
}
.admin-page-header > .container-fluid {
  position: relative;
  z-index: 1;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 768px) {
  .page-banner { padding-bottom: 4rem; }
  .page-content-overlap { margin-top: -3rem; }
  .card-stat { margin-bottom: var(--sp-4); }
  .table-clean thead th,
  .table-clean tbody td { padding: .65rem .75rem; }
}