/* =======================================================
   MARCH MATRIX  ·  Military AMS  ·  Premium Theme v3.0
   ======================================================= */

/* ── GOOGLE FONT IMPORT ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────── */
:root {
  /* Core palette */
  --navy-900: #05101c;
  --navy-800: #0a1628;
  --navy-700: #0f2040;
  --navy-600: #162944;
  --navy-500: #1b3256;
  --blue-600:  #1565c0;
  --blue-500:  #1976d2;
  --blue-400:  #2196f3;
  --blue-300:  #64b5f6;
  --gold:      #f0a500;
  --gold-soft: #ffd060;

  /* Semantic */
  --clr-present: #00897b;
  --clr-absent:  #e53935;
  --clr-oou:     #f57c00;
  --clr-ops:     #7b1fa2;
  --clr-auth:    #1565c0;
  --clr-warning: #f9a825;

  /* Surface */
  --bg:       #eef2f7;
  --bg-2:     #e4eaf4;
  --card:     #ffffff;
  --border:   rgba(0,0,0,0.06);
  --text:     #1a2332;
  --text-2:   #4a5568;
  --text-3:   #718096;

  /* Shadows */
  --sh-sm:  0 1px 6px rgba(0,0,0,0.07);
  --sh-md:  0 4px 20px rgba(0,0,0,0.10);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.14);
  --sh-xl:  0 16px 60px rgba(0,0,0,0.18);

  /* Geometry */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t1: .15s;
  --t2: .25s;
  --t3: .35s;

  /* Sidebar */
  --sb-w: 260px;
}

/* ── KEYFRAMES ──────────────────────────────────────── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes pulseGlow  { 0%,100%{box-shadow:0 0 0 0 rgba(21,101,192,.35)} 50%{box-shadow:0 0 0 7px rgba(21,101,192,0)} }
@keyframes shimmer    { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes rotateSpin { to{transform:rotate(360deg)} }
@keyframes slideDot   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
@keyframes barGrow    { from{width:0} to{width:100%} }

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.30); }

/* ── BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }

body {
  background: var(--bg) !important;
  font-family: 'Inter','Source Sans 3','Segoe UI',Arial,sans-serif !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  -webkit-font-smoothing: antialiased;
}

/* Subtle dot background on main area */
.app-main {
  background:
    radial-gradient(circle, rgba(21,101,192,0.03) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

/* ── PAGE LOADER ────────────────────────────────────── */
#loader {
  background: rgba(5,16,28,0.92) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 9999 !important;
}
.box {
  background: transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  width:100%;
}
.loader8 {
  width: 52px !important;
  height: 52px !important;
  border: 3px solid rgba(255,255,255,0.08) !important;
  border-top-color: var(--blue-400) !important;
  border-right-color: var(--gold) !important;
  border-radius: 50% !important;
  animation: rotateSpin 0.8s var(--ease) infinite !important;
  top: unset !important;
  left: unset !important;
  position: relative !important;
  box-shadow: 0 0 20px rgba(21,101,192,0.3) !important;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.app-sidebar {
  background: linear-gradient(180deg,
    var(--navy-900) 0%,
    var(--navy-800) 40%,
    var(--navy-700) 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 30px rgba(0,0,0,0.35) !important;
  width: var(--sb-w) !important;
}

/* Brand strip */
.sidebar-brand {
  background: var(--navy-900) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  min-height: 64px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative diagonal shine */
.sidebar-brand::before {
  content: '';
  position: absolute;
  top: -20px; left: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(33,150,243,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-brand .brand-link {
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: none !important;
  text-decoration: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

.sidebar-brand .brand-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(21,101,192,0.45);
  transition: transform var(--t2) var(--ease);
}

.sidebar-brand .brand-link:hover .brand-logo-icon {
  transform: rotate(-6deg) scale(1.08);
}

.sidebar-brand .brand-text {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.sidebar-brand .brand-sub {
  color: rgba(255,255,255,0.42) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* Role chip */
.sidebar-role-badge {
  margin: 8px 12px 2px;
  padding: 5px 12px;
  background: linear-gradient(90deg, rgba(21,101,192,0.22), rgba(21,101,192,0.10));
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-align: center;
  letter-spacing: 0.4px;
  border: 1px solid rgba(33,150,243,0.2);
}

/* Nav container */
.nav.sidebar-menu { padding: 8px 0 16px !important; }

/* Parent nav items */
.sidebar-menu > .nav-item { margin: 2px 10px !important; }

.sidebar-menu > .nav-item > .nav-link {
  border-radius: var(--r-sm) !important;
  padding: 10px 12px !important;
  color: rgba(255,255,255,0.70) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--t2) var(--ease) !important;
  border-left: 2px solid transparent !important;
  position: relative !important;
}

.sidebar-menu > .nav-item > .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
  border-left-color: rgba(33,150,243,0.4) !important;
}

.sidebar-menu > .nav-item.menu-open > .nav-link,
.sidebar-menu > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, rgba(21,101,192,0.5), rgba(21,101,192,0.15)) !important;
  color: #ffffff !important;
  border-left-color: var(--blue-400) !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.25) !important;
  animation: pulseGlow 2.5s infinite !important;
}

.nav-icon {
  width: 22px !important;
  text-align: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

.nav-arrow {
  margin-left: auto !important;
  font-size: 10px !important;
  transition: transform var(--t2) var(--ease) !important;
  opacity: 0.5 !important;
}

.menu-open .nav-arrow { transform: rotate(90deg) !important; opacity:0.9 !important; }

/* Submenu */
.nav-treeview {
  padding: 4px 0 4px 34px !important;
  background: transparent !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
  margin-left: 22px !important;
}

.nav-treeview > .nav-item > .nav-link {
  padding: 6px 10px !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 12.5px !important;
  border-radius: var(--r-xs) !important;
  transition: all var(--t1) var(--ease) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-treeview > .nav-item > .nav-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: background var(--t1) var(--ease);
}

.nav-treeview > .nav-item > .nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.88) !important;
}

.nav-treeview > .nav-item > .nav-link:hover::before,
.nav-treeview > .nav-item > .nav-link.active::before {
  background: var(--blue-300);
}

.nav-treeview > .nav-item > .nav-link.active {
  background: rgba(21,101,192,0.3) !important;
  color: var(--blue-300) !important;
}

/* ================================================================
   HEADER / NAVBAR
   ================================================================ */
.app-header {
  background: #ffffff !important;
  border-bottom: none !important;
  min-height: 62px !important;
  box-shadow: var(--sh-sm) !important;
  position: relative !important;
}

/* Thin gradient accent line at bottom of header */
.app-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500) 0%, var(--gold) 50%, var(--clr-present) 100%);
}

.app-header .navbar-nav .nav-link {
  color: var(--text-2) !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t2) var(--ease) !important;
  font-size: 16px !important;
}

.app-header .navbar-nav .nav-link:hover {
  background: var(--bg) !important;
  color: var(--blue-600) !important;
}

/* Header center — unit info */
.header-unit-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
}

.header-unit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-battalion {
  background: rgba(21,101,192,0.08);
  color: var(--blue-600);
  border: 1px solid rgba(21,101,192,0.15);
}

.pill-company {
  background: rgba(0,137,123,0.08);
  color: var(--clr-present);
  border: 1px solid rgba(0,137,123,0.15);
}

/* Live clock */
.header-datetime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  padding: 5px 12px;
  background: var(--bg);
  border-radius: 20px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.header-datetime .clock-sep {
  display: inline-block;
  animation: slideDot .8s ease infinite;
  color: var(--blue-400);
}

/* User avatar ring */
.nav-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 0 2px rgba(21,101,192,0.25);
  transition: box-shadow var(--t2) var(--ease);
}

.nav-user-avatar:hover,
.dropdown:hover .nav-user-avatar {
  box-shadow: 0 0 0 3px rgba(21,101,192,0.45);
}

/* ================================================================
   CONTENT HEADER (page title bar)
   ================================================================ */
.app-content-header {
  padding: 14px 0 8px !important;
  background: transparent !important;
}

.page-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  box-shadow: 0 4px 12px rgba(21,101,192,0.35);
  flex-shrink: 0;
}

.app-content-header h3 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.page-title-sub {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 400;
  display: block;
}

/* Back button */
.btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t2) var(--ease) !important;
  white-space: nowrap !important;
}

.btn-back:hover {
  background: var(--navy-800) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--sh-md) !important;
  transform: translateY(-1px) !important;
}

/* ── CONTENT AREA ─────────────────────────────────── */
.app-content {
  padding: 0 18px 32px !important;
}

/* Flash messages */
.app-content > .row.m-0 .alert {
  animation: fadeInUp var(--t3) var(--ease) !important;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  border: none !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-md) !important;
  overflow: hidden !important;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease) !important;
  animation: fadeInUp var(--t3) var(--ease) !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-lg) !important;
}

.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--navy-800) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Colored top bar on cards */
.card-header::before {
  content: none;
}

.card-accent-blue  { border-top: 3px solid var(--blue-500) !important; }
.card-accent-green { border-top: 3px solid var(--clr-present) !important; }
.card-accent-red   { border-top: 3px solid var(--clr-absent) !important; }
.card-accent-gold  { border-top: 3px solid var(--gold) !important; }

.card-body { padding: 20px !important; }

/* ================================================================
   STAT BOXES  (dashboard)
   ================================================================ */
.small-box {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease) !important;
  position: relative !important;
  animation: fadeInUp var(--t3) var(--ease) !important;
}

.small-box:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25) !important;
}

/* Diagonal shimmer effect on hover */
.small-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity var(--t2) var(--ease);
}

.small-box:hover::after { opacity: 1; }

.small-box .inner {
  padding: 18px 20px 14px !important;
  position: relative;
  z-index: 1;
}

.small-box .inner h3 {
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  margin-bottom: 5px !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.small-box .inner h4 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  opacity: 0.88 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.small-box-icon {
  font-size: 5rem !important;
  position: absolute !important;
  right: -10px !important;
  bottom: -14px !important;
  opacity: 0.13 !important;
  z-index: 0 !important;
  transition: opacity var(--t2) var(--ease) !important;
}

.small-box:hover .small-box-icon { opacity: 0.22 !important; }

/* Gradient overrides for each color class */
.text-bg-primary {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
}
.text-bg-info {
  background: linear-gradient(135deg, #00838f 0%, #006064 100%) !important;
}
.text-bg-success {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
}
.text-bg-warning {
  background: linear-gradient(135deg, #e65100 0%, #bf360c 100%) !important;
}
.text-bg-danger {
  background: linear-gradient(135deg, #c62828 0%, #7f0000 100%) !important;
}

/* ================================================================
   TABLES
   ================================================================ */
.table-responsive {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-md) !important;
}

.table {
  margin-bottom: 0 !important;
  font-size: 13px !important;
}

.table thead tr th {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700)) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.table thead tr th:first-child { border-radius: 0 !important; }

.table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  transition: all var(--t1) var(--ease) !important;
}

.table tbody tr:hover {
  background: rgba(21,101,192,0.05) !important;
  transform: scale(1.001) !important;
}

.table tbody tr td {
  padding: 9px 16px !important;
  vertical-align: middle !important;
  border-color: rgba(0,0,0,0.04) !important;
  color: var(--text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0,0,0,0.018) !important;
}

/* Panel (legacy table wrapper) */
.panel {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-md) !important;
  overflow: hidden !important;
  border: none !important;
}

.panel .panel-heading {
  background: linear-gradient(90deg, var(--navy-800), var(--navy-600)) !important;
  padding: 12px 18px !important;
  border-radius: 0 !important;
}

.panel .panel-heading .btn {
  border-radius: var(--r-sm) !important;
}

.panel .panel-body .table thead tr th {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600)) !important;
  color: #fff !important;
}

/* DataTables enhancements */
.dataTables_wrapper {
  animation: fadeInUp var(--t3) var(--ease);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid #d1d5db !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color var(--t2) var(--ease) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-xs) !important;
  transition: all var(--t1) var(--ease) !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: var(--r-xs) !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--blue-600) !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  transition: all var(--t2) var(--ease) !important;
  letter-spacing: 0.1px !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left var(--t3) var(--ease);
}

.btn:hover::before { left: 100%; }

.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
}

.btn:active { transform: translateY(0) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600)) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(21,101,192,0.3) !important;
}

.btn-success {
  background: linear-gradient(135deg, #2e7d32, #1b5e20) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(46,125,50,0.3) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #c62828, #7f0000) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(198,40,40,0.3) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #e65100, #bf360c) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(230,81,0,0.3) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(10,22,40,0.3) !important;
}

.btn-info {
  background: linear-gradient(135deg, #00838f, #006064) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: var(--navy-800) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: var(--r-xs) !important;
}

.action-list { list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.action-list li { display:inline-block; }
.action-list .btn {
  padding: 4px 9px !important;
  font-size: 12px !important;
  border-radius: var(--r-xs) !important;
}

/* ================================================================
   FORMS
   ================================================================ */
.form-control, .form-select {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid #d1d5db !important;
  font-size: 13.5px !important;
  padding: 8px 13px !important;
  transition: all var(--t2) var(--ease) !important;
  background: #fff !important;
  color: var(--text) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
  background: #fff !important;
}

label, .form-label {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--navy-700) !important;
  margin-bottom: 5px !important;
}

.input-group-text {
  background: #f8fafc !important;
  border: 1.5px solid #d1d5db !important;
  color: var(--text-3) !important;
  font-size: 14px !important;
}

.form-check-input:checked {
  background-color: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
  border-radius: var(--r-sm) !important;
  font-size: 13.5px !important;
  border: none !important;
  border-left: 4px solid !important;
  animation: fadeInUp var(--t2) var(--ease) !important;
  font-weight: 500 !important;
}

.alert-danger  { border-left-color:#c62828 !important; background:#fff0f0 !important; color:#7f1d1d !important; }
.alert-success { border-left-color:#2e7d32 !important; background:#f0fdf4 !important; color:#14532d !important; }
.alert-warning { border-left-color:#e65100 !important; background:#fff3e0 !important; color:#7c2d12 !important; }
.alert-info    { border-left-color:#006064 !important; background:#e0f7fa !important; color:#004d40 !important; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-content {
  border-radius: var(--r-lg) !important;
  border: none !important;
  box-shadow: var(--sh-xl) !important;
  overflow: hidden !important;
  animation: fadeInUp var(--t3) var(--ease) !important;
}

.modal-header {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600)) !important;
  color: #fff !important;
  padding: 16px 22px !important;
  border: none !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

.modal-header .btn-close { filter: invert(1) opacity(.7) !important; }
.modal-body  { padding: 22px !important; }
.modal-footer {
  padding: 14px 22px !important;
  border-top: 1px solid var(--border) !important;
  background: #fafbfc !important;
}

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  letter-spacing: 0.3px !important;
}

/* ================================================================
   PROFILE / USER DROPDOWN
   ================================================================ */
.dropdown-menu.dropdown-menu-xl {
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: var(--sh-xl) !important;
  min-width: 270px !important;
  overflow: hidden !important;
  animation: fadeInUp .18s var(--ease) !important;
}

.user-header {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  padding: 20px 16px 16px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.user-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(33,150,243,0.15) 0%, transparent 70%);
}

.user-header .user-image {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border: 3px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  position: relative;
  z-index: 1;
}

.user-header h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 10px 0 0 !important;
  position: relative;
  z-index: 1;
}

.user-body {
  padding: 14px 18px 10px !important;
  background: #fff !important;
}

.user-body h2 {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--border) !important;
}

.user-body p {
  margin: 6px 0 !important;
  font-size: 13px !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.user-footer {
  padding: 12px 18px !important;
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
}

/* ================================================================
   FOOTER
   ================================================================ */
.app-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 22px !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
  position: relative !important;
}

.app-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--blue-500), var(--gold), var(--clr-present));
}

.app-footer a { color: var(--blue-600) !important; text-decoration: none !important; }
.app-footer a:hover { color: var(--blue-400) !important; text-decoration: underline !important; }

/* ================================================================
   MISC UI
   ================================================================ */
.clickable-row { cursor: pointer !important; }

/* Page content fade-in */
.container-fluid > * { animation: fadeInUp var(--t3) var(--ease); }

/* Info / Abbreviations tooltip */
abbr[title] {
  border-bottom: 1px dashed var(--text-3);
  cursor: help;
}

/* Status pills for tables */
.status-present { background:#d4edda !important; color:#155724 !important; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }
.status-absent  { background:#f8d7da !important; color:#721c24 !important; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1199.98px) {
  .header-unit-info { display: none !important; }
}

@media (max-width: 991.98px) {
  .header-datetime { display: none !important; }
}

@media (max-width: 767.98px) {
  .app-content { padding: 0 10px 22px !important; }
  .app-content-header h3 { font-size: 16px !important; }
  .small-box .inner h3 { font-size: 1.7rem !important; }
  .table { font-size: 12px !important; }
  .btn  { font-size: 12px !important; padding: 5px 12px !important; }
  .card-body { padding: 14px !important; }
  .modal-content { border-radius: var(--r-sm) !important; }
  .table thead tr th { font-size: 11px !important; padding: 9px 10px !important; }
  .table tbody tr td { padding: 7px 10px !important; }
  .table-responsive { border-radius: var(--r-sm) !important; }
}

@media (max-width: 575.98px) {
  .small-box { margin-bottom: 12px !important; }
  .panel .panel-heading { padding: 10px 14px !important; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .app-sidebar, .app-header, .app-footer, #loader,
  .btn-back, .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  .card, .table-responsive { box-shadow: none !important; }
  .table thead tr th { background: #1a3a5c !important; -webkit-print-color-adjust: exact; }
}