/* ELMS custom styles — override AdminLTE 4 / Bootstrap 5 here
   ════════════════════════════════════════════════════════════
   MODERN THEME — Maroon · White · subtle Gold
   Primary maroon #800000 · Gold accent #C6A64B (used sparingly)
   ════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --elms-maroon:        #800000;
  --elms-maroon-dark:   #5a0000;
  --elms-maroon-deep:   #4a0000;
  --elms-gold:          #c6a64b;
  --elms-gold-dark:     #a8863a;
  --elms-gold-soft:     rgba(198, 166, 75, 0.5);

  /* Surfaces & ink */
  --elms-bg:            #f6f5f4;   /* warm off-white app background */
  --elms-surface:       #ffffff;
  --elms-ink:           #242424;
  --elms-muted:         #6c757d;

  /* Shape */
  --elms-radius:        0.65rem;
  --elms-shadow:        0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 10px rgba(0, 0, 0, 0.06);
  --elms-shadow-hover:  0 4px 14px rgba(0, 0, 0, 0.1);

  /* Bootstrap variable overrides (maroon) */
  --bs-primary:                 #800000;
  --bs-primary-rgb:             128, 0, 0;
  --bs-link-color:              #800000;
  --bs-link-color-rgb:          128, 0, 0;
  --bs-link-hover-color:        #5a0000;
  --bs-link-hover-color-rgb:    90, 0, 0;
}

/* ══ Typography ═══════════════════════════════════════════ */
body {
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--elms-ink);
  font-size: 0.95rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ══ App background ═══════════════════════════════════════ */
.app-main,
.app-wrapper {
  background-color: var(--elms-bg);
}

/* Page title with a small maroon accent bar */
.app-content-header h3 {
  font-weight: 600;
  position: relative;
  padding-left: 0.65rem;
}
.app-content-header h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em; bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--elms-maroon);
}

/* ══ Buttons ══════════════════════════════════════════════ */
.btn {
  border-radius: 0.5rem;
  font-weight: 500;
  transition: box-shadow 0.15s ease, transform 0.05s ease, background-color 0.15s ease;
}
.btn-primary {
  --bs-btn-bg:                  #800000;
  --bs-btn-border-color:        #800000;
  --bs-btn-hover-bg:            #660000;
  --bs-btn-hover-border-color:  #660000;
  --bs-btn-active-bg:           #550000;
  --bs-btn-active-border-color: #550000;
  --bs-btn-disabled-bg:         #800000;
  --bs-btn-disabled-border-color: #800000;
  color: #fff;
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(128, 0, 0, 0.28);
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-outline-primary {
  --bs-btn-color:               #800000;
  --bs-btn-border-color:        #800000;
  --bs-btn-hover-bg:            #800000;
  --bs-btn-hover-border-color:  #800000;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-bg:           #660000;
  --bs-btn-active-border-color: #660000;
  --bs-btn-active-color:        #fff;
}
/* Gold focus ring — the subtle accessible accent */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 166, 75, 0.45);
}

/* ══ Badges & primary backgrounds ═════════════════════════ */
.bg-primary,
.badge.bg-primary {
  background-color: #800000 !important;
  color: #fff !important;
}
.badge {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ══ Links ════════════════════════════════════════════════ */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-link) {
  color: #800000;
  transition: color 0.15s ease;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-link):hover {
  color: #5a0000;
}

/* ══ Forms ════════════════════════════════════════════════ */
.form-control,
.form-select {
  border-radius: 0.5rem;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #b33;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 0, 0.2);
}
.form-check-input:checked {
  background-color: #800000;
  border-color:     #800000;
}

/* ══ Top navbar (WHITE, airy) ═════════════════════════════ */
.app-header {
  background-color: #fff !important;
  border-bottom: 2px solid var(--elms-gold) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.app-header .nav-link,
.app-header .dropdown-toggle,
.app-header .navbar-text {
  color: var(--elms-maroon) !important;
}
.app-header .nav-link:hover {
  color: var(--elms-maroon-dark) !important;
}
.app-header .nav-link .bi {
  font-size: 1.15rem;
}
/* Notification count stays red (high-visibility) */
.app-header .badge.bg-danger {
  background-color: #c0392b !important;
  color: #fff !important;
}
/* Role chip → maroon-tinted */
.app-header .badge.bg-secondary {
  background-color: rgba(128, 0, 0, 0.1) !important;
  color: var(--elms-maroon) !important;
}

/* ══ Sidebar (maroon + gold active cue) ═══════════════════ */
.app-sidebar {
  background: linear-gradient(180deg, #5a0000 0%, #4a0000 100%) !important;
}
.sidebar-brand {
  background-color: #480000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 -2px 0 var(--elms-gold-soft);
}
.sidebar-menu .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 0.4rem;
  margin: 1px 0.5rem;
  padding-block: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-menu .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-item.menu-open > .nav-link {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--elms-gold);
}
.sidebar-menu .nav-link.active .nav-icon {
  color: var(--elms-gold);
}
.sidebar-menu .nav-header {
  color: rgba(198, 166, 75, 0.75) !important;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.brand-text {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

/* ══ Cards ════════════════════════════════════════════════ */
.card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
}
.card-header {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 600;
  color: var(--elms-maroon);
}
/* Card-header action (button/input) sits flush right (kept from prior). */
.card-header.justify-content-between > :last-child {
  margin-left: auto;
}

/* ══ Dropdown menus ═══════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow-hover);
}

/* ══ Tables ═══════════════════════════════════════════════ */
.table > thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--elms-muted);
  border-bottom: 2px solid rgba(128, 0, 0, 0.15);
  font-weight: 600;
}
.table > tbody > tr { transition: background-color 0.12s ease; }
.table-hover > tbody > tr:hover > * {
  background-color: rgba(128, 0, 0, 0.035);
}
.table-primary {
  --bs-table-bg:          rgba(128, 0, 0, 0.08);
  --bs-table-border-color: rgba(128, 0, 0, 0.15);
}

/* ══ Misc Bootstrap components ════════════════════════════ */
.progress-bar { background-color: #800000; }
.nav-tabs .nav-link.active {
  color: #800000;
  border-bottom-color: #800000;
}
.page-link { color: #800000; }
.page-item.active .page-link {
  background-color: #800000;
  border-color: #800000;
  color: #fff;
}
.breadcrumb-item.active { color: var(--elms-maroon); }
.border-primary { border-color: #800000 !important; }
.text-primary   { color: #800000 !important; }

/* ══ Dashboard stat widgets ═══════════════════════════════ */
.info-box {
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 0;   /* spacing comes from the row gutter, not the box */
}

/* Leave balance cards */
.leave-balance-card {
  border-bottom: 2px solid var(--elms-gold-soft);
}
.leave-balance-card .card-body { padding: 1rem; }
.leave-balance-card .balance-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--elms-maroon);
}
.leave-balance-card .balance-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ══ Leave status badges ══════════════════════════════════ */
.badge-pending    { background-color: #ffc107; color: #000; }
.badge-approved   { background-color: #198754; }
.badge-rejected   { background-color: #dc3545; }
.badge-lwop       { background-color: #6f42c1; }

/* ══ Alert banners ════════════════════════════════════════ */
.alert-fl-warning    { border-left: 4px solid #ffc107; }
.alert-vl-forfeiture { border-left: 4px solid #dc3545; }

/* ══ Login page ═══════════════════════════════════════════ */
body.login-page {
  background: linear-gradient(135deg, #5a0000 0%, #800000 55%, #4a0000 100%) !important;
  min-height: 100vh;
}
.login-logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
.login-box .card {
  border: none;
  border-radius: 1rem;
  border-top: 3px solid var(--elms-gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.login-box-msg {
  font-weight: 600;
  color: var(--elms-maroon);
}
.login-card-body .input-group-text {
  color: var(--elms-maroon);
  background-color: #fff;
}

/* ══ Micro-polish ═════════════════════════════════════════ */
a, .nav-link { transition: color 0.15s ease, background-color 0.15s ease; }

:focus-visible {
  outline: 2px solid var(--elms-gold-soft);
  outline-offset: 1px;
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(128, 0, 0, 0.35);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128, 0, 0, 0.55); background-clip: content-box; }