/*
 * SIRI GROUP ERP — Complete Premium Design System v3.0
 * Inspired by Zoho CRM · Built from scratch · Zero Stisla
 * Brand: #efa23b (Amber) · #23a5e5 (Blue)
 * Font: System UI — no Google Fonts
 */

/* ════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════ */
:root {
  --amber:       #efa23b;
  --amber-dark:  #d4871a;
  --amber-soft:  rgba(239,162,59,.1);
  --blue:        #23a5e5;
  --blue-dark:   #1787c5;
  --blue-soft:   rgba(35,165,229,.1);
  --green:       #00b894;
  --red:         #e53e3e;
  --purple:      #7c3aed;

  --sidebar-w:   272px;
  --topbar-h:    56px;
  --sidebar-bg:  #111827;

  --bg:          #f0f2f6;
  --surface:     #ffffff;
  --border:      #e2e8f0;
  --border-dark: #cbd5e1;

  --text-1:      #0f172a;
  --text-2:      #475569;
  --text-3:      #94a3b8;

  --font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  --r-sm:        6px;
  --r:           8px;
  --r-lg:        12px;
  --r-xl:        16px;

  --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  --transition:  all .18s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════
   RESET
════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 14px; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text-1) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* force font everywhere — no remnants */
*, input, select, textarea, button, label,
h1,h2,h3,h4,h5,h6, td, th, li, a, p, span {
  font-family: var(--font) !important;
}

/* CRITICAL: Restore FontAwesome fonts — must come after the * override */
.fas, .far, .fal, .fad, .fab,
i.fas, i.far, i.fal, i.fad, i.fab,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}
.fab, i.fab { font-family: "Font Awesome 5 Brands" !important; }

/* CRITICAL: Restore Remix Icons font — must come after the * override */
[class^="ri-"], [class*=" ri-"] {
  font-family: "remixicon" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1 !important;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: none; }

img { max-width: 100%; }

/* ════════════════════════════════════════════
   LAYOUT SHELL
════════════════════════════════════════════ */
.main-wrapper {
  display: flex !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ── SIDEBAR ─────────────────────────────── */
.main-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--sidebar-w) !important;
  background: var(--sidebar-bg) !important;
  z-index: 900 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border-right: none !important;
  transition: width .22s cubic-bezier(.4,0,.2,1) !important;
}

/* sidebar scroll wrapper */
#sidebar-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
#sidebar-wrapper::-webkit-scrollbar { width: 4px; }
#sidebar-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

/* ════════════════════════════════════════════
   SIDEBAR BRAND — SRI Logo Mark
════════════════════════════════════════════ */
.sidebar-brand, .sidebar-brand-sm {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 16px !important;
  height: 70px !important;
  min-height: 70px !important;
  background: rgba(0,0,0,0.3) !important;
  border-bottom: 1px solid rgba(239,162,59,0.25) !important;
  flex-shrink: 0;
  position: relative;
}
.sidebar-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, #efa23b 0%, #23a5e5 50%, transparent 100%);
  opacity: 0.5;
}
.sidebar-brand-sm { display: none !important; }

.sg-brand-link {
  text-decoration: none !important;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
}
.sg-logo-full {
  max-height: fit-content;
  width: auto;
  max-width: 185px;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  padding: 5px 10px;
  display: block;
}
.sg-logo-mini {
  display: none;
  height: 38px;
  width: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  padding: 4px;
}
.sg-amber { color: #efa23b; }
.sg-blue  { color: #23a5e5; }

/* ════════════════════════════════════════════
   SIDEBAR MENU — Section Headers
════════════════════════════════════════════ */
.sidebar-menu {
  list-style: none !important;
  padding: 6px 0 100px !important;
  margin: 0 !important;
  flex: 1;
}

.sidebar-menu .menu-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  padding: 16px 16px 5px !important;
  margin: 0 !important;
  user-select: none;
  pointer-events: none;
}
.sidebar-menu .menu-header::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, #efa23b, #23a5e5);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 1;
}

/* ════════════════════════════════════════════
   SIDEBAR MENU — Items
════════════════════════════════════════════ */

/* Base rule — all sidebar links */
.main-sidebar .sidebar-menu li a {
    color: #ffffff !important;
    padding: 11px 16px !important;
    height: auto !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    border-radius: var(--p-radius-sm) !important;
    transition: var(--p-transition) !important;
    border-left: none !important;
    position: relative;
    display: flex;
    align-items: center;
    background-color: transparent !important;
}

.sidebar-menu > li {
  position: relative;
  margin: 1px 8px !important;
}

.sidebar-menu > li > a,
.sidebar-menu > li > a.nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px 9px 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all .16s ease !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

.sidebar-menu > li > a i,
.sidebar-menu > li > a.nav-link i {
  width: 20px !important;
  height: 20px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,.72) !important;
  transition: color .15s !important;
  line-height: 1 !important;
}

.sidebar-menu > li > a span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── HOVER ─── */
.sidebar-menu > li > a:hover,
.sidebar-menu > li:hover > a {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.9) !important;
  border-left-color: rgba(239,162,59,.45) !important;
}
.sidebar-menu > li > a:hover i,
.sidebar-menu > li:hover > a i {
  color: #efa23b !important;
}

/* ── ACTIVE ─── */
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a.nav-link {
  background: linear-gradient(90deg, rgba(239,162,59,.18) 0%, rgba(239,162,59,.05) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid #efa23b !important;
  border-radius: 0 8px 8px 0 !important;
}
.sidebar-menu > li.active > a i,
.sidebar-menu > li.active > a.nav-link i {
  color: #efa23b !important;
}

/* ════════════════════════════════════════════
   SUB-MENU (accordion — custom class, no Bootstrap interference)
════════════════════════════════════════════ */
.sidebar-menu .sg-submenu {
  list-style: none !important;
  position: static !important;
  float: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 2px 14px !important;
  min-width: unset !important;
  max-width: 100%;
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-left: 1px solid rgba(239,162,59,.18);
  transition: max-height .3s cubic-bezier(.4,0,.2,1),
              opacity .22s ease;
}
.sidebar-menu li.active > .sg-submenu,
.sidebar-menu li.show  > .sg-submenu {
  max-height: 800px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 3px 0 6px !important;
}
.sidebar-menu .sg-submenu li {
  animation: none !important;
  margin: 0 !important;
}
.sidebar-menu .sg-submenu li a,
.sidebar-menu .sg-submenu li a.nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px 7px 16px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.82) !important;
  border-radius: 0 6px 6px 0 !important;
  transition: all .15s !important;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  white-space: nowrap;
  text-decoration: none !important;
  margin: 0 6px 0 0 !important;
}
.sidebar-menu .sg-submenu li a i {
  font-size: 13px !important;
  width: 15px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,.60) !important;
  transition: color .15s !important;
}
.sidebar-menu .sg-submenu li a:hover {
  color: rgba(255,255,255,.88) !important;
  background: rgba(239,162,59,.08) !important;
  border-left-color: rgba(239,162,59,.5) !important;
}
.sidebar-menu .sg-submenu li a:hover i { color: #efa23b !important; }
.sidebar-menu .sg-submenu li.active a {
  color: #efa23b !important;
  background: rgba(239,162,59,.12) !important;
  border-left-color: #efa23b !important;
  font-weight: 600 !important;
}
.sidebar-menu .sg-submenu li.active a i { color: #efa23b !important; }

/* ── DROPDOWN ARROW ─── */
.sidebar-menu li a .ri-arrow-right-s-line {
  font-size: 15px !important;
  opacity: .70 !important;
  width: auto !important;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .22s ease, opacity .15s, color .15s !important;
}
.sidebar-menu li.active > a .ri-arrow-right-s-line,
.sidebar-menu li.show  > a .ri-arrow-right-s-line {
  transform: rotate(90deg) !important;
  opacity: .8 !important;
  color: #efa23b !important;
}

/* ── BADGE ─── */
.sidebar-menu .badge {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  line-height: 1.4 !important;
  margin-left: auto;
  background: rgba(239,162,59,.22) !important;
  color: #efa23b !important;
  border: 1px solid rgba(239,162,59,.35) !important;
}

/* ════════════════════════════════════════════
   COLLAPSED SIDEBAR (sidebar-mini)
════════════════════════════════════════════ */
body.sidebar-mini .main-sidebar  { width: 62px !important; }
body.sidebar-mini .main-content  { margin-left: 62px !important; }
body.sidebar-mini .main-footer   { left: 62px !important; }
body.sidebar-mini .navbar.main-navbar { left: 62px !important; }

body.sidebar-mini .sidebar-brand { padding: 0 !important; justify-content: center !important; }
body.sidebar-mini .sidebar-brand a { justify-content: center !important; }
body.sidebar-mini .sg-logo-full  { display: none; }
body.sidebar-mini .sg-logo-mini  { display: block; }

body.sidebar-mini .sidebar-menu .menu-header {
  padding: 8px 0 0 !important;
  opacity: 0 !important;
  height: 2px !important;
  overflow: hidden !important;
}
body.sidebar-mini .sidebar-menu > li { margin: 1px 5px !important; }
body.sidebar-mini .sidebar-menu > li > a,
body.sidebar-mini .sidebar-menu > li > a.nav-link {
  justify-content: center !important;
  padding: 10px !important;
  gap: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 8px !important;
}
body.sidebar-mini .sidebar-menu > li.active > a {
  border-left: 3px solid #efa23b !important;
  border-radius: 0 8px 8px 0 !important;
}
body.sidebar-mini .sidebar-menu > li > a span { display: none !important; }
body.sidebar-mini .sidebar-menu > li > a i { font-size: 15px !important; width: auto !important; }
body.sidebar-mini .sidebar-menu > li > a .ri-arrow-right-s-line { display: none !important; }
body.sidebar-mini .sidebar-menu > li > a .badge { display: none !important; }
body.sidebar-mini .sidebar-menu .sg-submenu { display: none !important; }

/* ── MAIN CONTENT ────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w) !important;
  margin-top: var(--topbar-h) !important;
  padding: 24px 28px 80px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
  background: var(--bg) !important;
  width: auto !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  flex: 1;
  transition: margin-left .22s cubic-bezier(.4,0,.2,1) !important;
}

/* ════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════ */
.navbar.main-navbar,
nav.navbar.main-navbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-w) !important;
  right: 0 !important;
  height: var(--topbar-h) !important;
  width: auto !important;
  padding: 0 24px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
  z-index: 850 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  transition: left .22s cubic-bezier(.4,0,.2,1) !important;
}

/* hamburger toggle */
#sg-sidebar-toggle {
  background: none !important;
  border: none !important;
  color: var(--text-2) !important;
  font-size: 16px !important;
  cursor: pointer;
  padding: 6px 10px 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: color .15s !important;
  flex-shrink: 0;
}
#sg-sidebar-toggle:hover { color: var(--amber) !important; }

/* topbar nav links */
.navbar .navbar-nav { flex-direction: row !important; align-items: center !important; }
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  color: var(--text-2) !important;
  padding: 6px 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: var(--r) !important;
  transition: var(--transition) !important;
  position: relative;
}
.navbar .nav-link:hover { color: var(--amber) !important; background: var(--amber-soft) !important; }

/* topbar dropdown */
.navbar .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 6px !important;
  min-width: 210px !important;
  margin: 0 !important;
  float: none !important;
}
.navbar .dropdown-menu .dropdown-item {
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: var(--transition) !important;
  background: transparent !important;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
}
.navbar .dropdown-menu .dropdown-item i { width: 16px !important; text-align: center !important; }
.navbar .dropdown-menu .dropdown-divider {
  border-color: var(--border) !important;
  margin: 4px 0 !important;
}

/* notification dropdown list */
#new_live_notifications .dropdown-item { align-items: flex-start !important; padding: 10px 14px !important; }
#new_live_notifications .dropdown-item-unread { background: rgba(239,162,59,.04) !important; }
#new_live_notifications .dropdown-item-desc { font-size: 12.5px !important; color: var(--text-2) !important; }
#new_live_notifications .time { font-size: 11px !important; color: var(--text-3) !important; margin-top: 2px; }

/* ════════════════════════════════════════════
   SECTION HEADER (page title row)
════════════════════════════════════════════ */
.section { padding: 0 !important; background: transparent !important; }
.section-body { margin-top: 0 !important; }

.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border: none !important;
  background: transparent !important;
}
.section-header h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.section-header h1 i { color: var(--amber) !important; font-size: 16px !important; }
.section-header .ml-auto,
.section-header .section-header-button {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
}
.breadcrumb-item a { color: var(--blue) !important; }
.breadcrumb-item.active { color: var(--text-3) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-3) !important; }

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: box-shadow .18s !important;
}
.card:hover { box-shadow: var(--shadow) !important; }

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
.card-header h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  margin: 0 !important;
}
.card-header .card-header-action { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.card-body  { padding: 20px !important; }
.card-body.p-0 { padding: 0 !important; }
.card-body.py-2 { padding: 8px 20px !important; }

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

/* Stat / KPI cards (dashboard widgets) */
.stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .18s, transform .18s !important;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  border-radius: 0;
}
.stat-card.amber::before { background: var(--amber); }
.stat-card.blue::before  { background: var(--blue);  }
.stat-card.green::before { background: var(--green); }
.stat-card.red::before   { background: var(--red);   }
.stat-card.purple::before{ background: var(--purple);}

.stat-card:hover { box-shadow: var(--shadow) !important; transform: translateY(-1px); }

.stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.icon-amber  { background: linear-gradient(135deg,#efa23b,#f5c86b); }
.icon-blue   { background: linear-gradient(135deg,#23a5e5,#5ec0f0); }
.icon-green  { background: linear-gradient(135deg,#00b894,#00cec9); }
.icon-red    { background: linear-gradient(135deg,#e53e3e,#fc8181); }
.icon-purple { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.icon-orange { background: linear-gradient(135deg,#f97316,#fb923c); }

.stat-body { flex: 1; min-width: 0; }
.stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-3) !important;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
}
.stat-sub {
  font-size: 12px !important;
  color: var(--text-3) !important;
  margin-top: 3px;
}

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
.table {
  font-size: 13.5px !important;
  color: var(--text-1) !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.table thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid var(--border) !important;
  border-top: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: var(--text-3) !important;
  padding: 11px 16px !important;
  white-space: nowrap;
}
.table-sm thead th { padding: 8px 12px !important; }

.table td {
  border-top: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  color: var(--text-2) !important;
}
.table-sm td { padding: 8px 12px !important; }

.table tbody tr { transition: background .1s !important; }
.table tbody tr:hover td { background: #f8fafc !important; }
.table-hover tbody tr:hover td { background: #f8fafc !important; }

.thead-light th { background: #f8fafc !important; }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: var(--r) !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.5 !important;
  transition: var(--transition) !important;
  white-space: nowrap;
  letter-spacing: .01em;
  text-decoration: none !important;
}
.btn:focus { outline: none !important; box-shadow: none !important; }
.btn i { font-size: 12px !important; }

/* Filled */
.btn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(35,165,229,.3) !important;
}
.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background: var(--amber-dark) !important;
  border-color: var(--amber-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239,162,59,.3) !important;
}
.btn-success {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}
.btn-success:hover { filter: brightness(1.1) !important; box-shadow: 0 4px 12px rgba(0,184,148,.3) !important; }

.btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.btn-danger:hover { filter: brightness(1.1) !important; box-shadow: 0 4px 12px rgba(229,62,62,.3) !important; }

.btn-info {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.btn-secondary {
  background: #fff !important;
  border-color: var(--border-dark) !important;
  color: var(--text-2) !important;
}
.btn-secondary:hover { background: #f8fafc !important; border-color: var(--border-dark) !important; color: var(--text-1) !important; }

.btn-dark {
  background: var(--text-1) !important;
  border-color: var(--text-1) !important;
  color: #fff !important;
}
.btn-light {
  background: #f8fafc !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Outline */
.btn-outline-primary  { background: transparent !important; border-color: var(--blue)  !important; color: var(--blue)  !important; }
.btn-outline-primary:hover  { background: var(--blue)  !important; color: #fff !important; }
.btn-outline-warning  { background: transparent !important; border-color: var(--amber) !important; color: var(--amber) !important; }
.btn-outline-warning:hover  { background: var(--amber) !important; color: #fff !important; }
.btn-outline-danger   { background: transparent !important; border-color: var(--red)   !important; color: var(--red)   !important; }
.btn-outline-danger:hover   { background: var(--red)   !important; color: #fff !important; }
.btn-outline-success  { background: transparent !important; border-color: var(--green) !important; color: var(--green) !important; }
.btn-outline-success:hover  { background: var(--green) !important; color: #fff !important; }
.btn-outline-info     { background: transparent !important; border-color: var(--blue)  !important; color: var(--blue)  !important; }
.btn-outline-info:hover     { background: var(--blue)  !important; color: #fff !important; }
.btn-outline-secondary{ background: transparent !important; border-color: var(--border-dark) !important; color: var(--text-2) !important; }
.btn-outline-secondary:hover{ background: #f8fafc !important; }

/* Sizes */
.btn-sm { padding: 5px 11px !important; font-size: 12px !important; border-radius: var(--r-sm) !important; }
.btn-lg { padding: 10px 22px !important; font-size: 14.5px !important; border-radius: var(--r-lg) !important; }
.btn-block { width: 100% !important; justify-content: center !important; }

/* ════════════════════════════════════════════
   FORMS
════════════════════════════════════════════ */
.form-group { margin-bottom: 16px !important; }

label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.form-control {
  display: block !important;
  width: 100% !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border-dark) !important;
  border-radius: var(--r) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--text-1) !important;
  transition: border .15s, box-shadow .15s !important;
  box-shadow: var(--shadow-xs) !important;
  height: auto !important;
  line-height: 1.5;
}
.form-control:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(35,165,229,.15) !important;
  outline: none !important;
  background: var(--surface) !important;
}
.form-control::placeholder { color: var(--text-3) !important; }
.form-control:disabled, .form-control[readonly] {
  background: #f8fafc !important;
  color: var(--text-3) !important;
  cursor: not-allowed;
}
.form-control-sm { padding: 6px 10px !important; font-size: 13px !important; }

select.form-control { cursor: pointer !important; }
textarea.form-control { min-height: 88px !important; resize: vertical !important; }

.input-group-text {
  background: #f8fafc !important;
  border: 1.5px solid var(--border-dark) !important;
  border-radius: var(--r) !important;
  color: var(--text-3) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
/* .form-control's global display:block + width:100% (above) breaks Bootstrap's
   input-group flex layout, stacking the prepend/append instead of inlining it.
   Restore flex sizing here so the group renders as a single row. */
.input-group { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; }
.input-group > .form-control { position: relative !important; flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; margin-bottom: 0 !important; }
.input-group-prepend, .input-group-append { display: flex !important; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: none !important; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; }
.input-group > .input-group-append > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Select2 */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border-dark) !important;
  border-radius: var(--r) !important;
  height: 36px !important;
  background: var(--surface) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(35,165,229,.15) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  font-size: 13.5px !important;
  color: var(--text-1) !important;
  padding: 0 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}
.select2-dropdown {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xl) !important;
  font-size: 13.5px !important;
}
.select2-container--default .select2-results__option--highlighted { background: var(--blue) !important; }

/* Custom checkbox/radio */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.badge {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  letter-spacing: .2px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.badge-primary   { background: rgba(35,165,229,.12)  !important; color: var(--blue-dark) !important; }
.badge-warning   { background: rgba(239,162,59,.12)  !important; color: var(--amber-dark) !important; }
.badge-success   { background: rgba(0,184,148,.12)   !important; color: #007a63 !important; }
.badge-danger    { background: rgba(229,62,62,.12)   !important; color: #c53030 !important; }
.badge-info      { background: rgba(35,165,229,.12)  !important; color: var(--blue-dark) !important; }
.badge-secondary { background: rgba(71,85,105,.1)    !important; color: var(--text-2) !important; }
.badge-light     { background: #f1f5f9               !important; color: var(--text-2) !important; }
.badge-dark      { background: var(--text-1)         !important; color: #fff !important; }

/* Solid badge variants (for table status) */
.badge-solid-success  { background: #d1fae5 !important; color: #065f46 !important; }
.badge-solid-warning  { background: #fef3c7 !important; color: #92400e !important; }
.badge-solid-danger   { background: #fee2e2 !important; color: #991b1b !important; }
.badge-solid-info     { background: #dbeafe !important; color: #1e40af !important; }
.badge-solid-primary  { background: #dbeafe !important; color: #1e40af !important; }

/* ════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════ */
.alert {
  border: none !important;
  border-radius: var(--r) !important;
  border-left: 4px solid !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.alert-success  { background: #ecfdf5 !important; border-left-color: var(--green) !important; color: #065f46 !important; }
.alert-danger   { background: #fef2f2 !important; border-left-color: var(--red)   !important; color: #991b1b !important; }
.alert-warning  { background: #fffbeb !important; border-left-color: var(--amber) !important; color: #92400e !important; }
.alert-info     { background: #eff6ff !important; border-left-color: var(--blue)  !important; color: #1e40af !important; }
.alert .close { background: none !important; border: none !important; color: inherit !important; opacity: .5 !important; font-size: 18px !important; line-height: 1 !important; }

/* ════════════════════════════════════════════
   MODALS
════════════════════════════════════════════ */
/* Hidden template forms cloned into modals by stisla.js (modal-part) */
.modal-part { display: none !important; }
.modal-content {
  border: none !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
}
.modal-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
}
.modal-header .close {
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  color: var(--text-3) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin-left: auto !important;
}
.modal-header .close:hover { color: var(--text-1) !important; }
.modal-body { padding: 20px !important; }
.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
  background: #f8fafc !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.modal-backdrop { background: rgba(15,23,42,.5) !important; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.main-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--sidebar-w) !important;
  right: 0 !important;
  height: 44px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
  z-index: 700 !important;
  transition: left .22s cubic-bezier(.4,0,.2,1) !important;
  margin: 0 !important;
  width: auto !important;
}

/* ════════════════════════════════════════════
   DROPDOWNS (general)
════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 6px !important;
  font-size: 13.5px !important;
}
.dropdown-item {
  padding: 8px 12px !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-2) !important;
  font-size: 13.5px !important;
  transition: var(--transition) !important;
}
.dropdown-item:hover { background: var(--amber-soft) !important; color: var(--text-1) !important; }
.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
.pagination .page-link {
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}
.pagination .page-item.active .page-link {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.pagination .page-link:hover { background: var(--blue-soft) !important; color: var(--blue) !important; }

/* ════════════════════════════════════════════
   TABS
════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  gap: 4px !important;
}
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  margin-bottom: -2px !important;
  transition: var(--transition) !important;
}
.nav-tabs .nav-link:hover { color: var(--amber) !important; border-bottom-color: var(--amber) !important; background: transparent !important; }
.nav-tabs .nav-link.active {
  color: var(--amber) !important;
  border-bottom-color: var(--amber) !important;
  background: transparent !important;
}
.tab-content { padding: 20px 0 0 !important; }

/* ════════════════════════════════════════════
   PROGRESS BARS
════════════════════════════════════════════ */
.progress {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--border) !important;
  overflow: hidden !important;
}
.progress-bar { border-radius: 99px !important; background: var(--blue) !important; }
.progress-bar.bg-warning { background: var(--amber) !important; }
.progress-bar.bg-success { background: var(--green) !important; }
.progress-bar.bg-danger  { background: var(--red) !important; }

/* ════════════════════════════════════════════
   iziTOAST OVERRIDES
════════════════════════════════════════════ */
.iziToast { border-radius: var(--r-lg) !important; box-shadow: var(--shadow-xl) !important; }
.iziToast-title, .iziToast-message { font-family: var(--font) !important; }

/* ════════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════════ */
body.login-body {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f172a 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}
.login-card-wrap {
  width: 100%;
  max-width: 420px;
  position: relative;
}
.login-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.login-card-head {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  padding: 28px 32px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.login-card-head .logo { height: 40px; margin-bottom: 16px; }
.login-card-head h2 { color: #fff; font-size: 18px; font-weight: 700; margin: 0; }
.login-card-head p  { color: rgba(255,255,255,.45); font-size: 13px; margin: 5px 0 0; }
.login-card-body { padding: 28px 32px; }

/* ════════════════════════════════════════════
   UTILITY CLASSES
════════════════════════════════════════════ */
.text-amber  { color: var(--amber) !important; }
.text-blue   { color: var(--blue) !important; }
.text-green  { color: var(--green) !important; }
.text-red    { color: var(--red) !important; }
.text-muted  { color: var(--text-3) !important; }

.bg-amber-soft { background: var(--amber-soft) !important; }
.bg-blue-soft  { background: var(--blue-soft)  !important; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .main-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w))) !important;
    transition: transform .22s cubic-bezier(.4,0,.2,1), width .22s !important;
    width: var(--sidebar-w) !important;
  }
  .main-sidebar.sg-open { transform: translateX(0) !important; }

  .main-content {
    margin-left: 0 !important;
    padding: 16px 16px 80px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .navbar.main-navbar { left: 0 !important; }
  .main-footer { left: 0 !important; }

  #sg-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 880;
    backdrop-filter: blur(2px);
  }
  #sg-sidebar-overlay.active { display: block; }
}

@media (max-width: 575.98px) {
  .main-content { padding: 12px 12px 80px !important; padding-left: 12px !important; }
  .section-header h1 { font-size: 16px !important; }
  .stat-card { padding: 14px !important; }
  .stat-value { font-size: 18px !important; }

  /* Compact topbar on phones */
  .navbar.main-navbar { padding: 0 10px !important; overflow: hidden !important; }
  .navbar-nav.ml-auto { gap: 0 !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .navbar-nav.ml-auto .nav-link { padding: 0 6px !important; }
  .navbar-nav.ml-auto .nav-item { flex-shrink: 1 !important; }
}

/* ════════════════════════════════════════════
   KILL ALL STISLA REMNANTS
════════════════════════════════════════════ */
.navbar-bg { display: none !important; }
.sidebar-style-2 { background: var(--sidebar-bg) !important; }
body.layout-2 .main-content, body.layout-3 .main-content { padding-left: 28px !important; }
.card .card-stats { display: none !important; }
.stisla-sidebar-brand-text { display: none !important; }

/* Nicescroll */
.nicescroll-cursors { background: var(--amber) !important; border-color: transparent !important; }

/* ════════════════════════════════════════════
   STISLA LEGACY — card-statistic-1 compat
════════════════════════════════════════════ */
.card.card-statistic-1,
.card.card-statistic-2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .18s, transform .18s !important;
}
.card.card-statistic-1:hover,
.card.card-statistic-2:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px);
}
.card.card-statistic-1 .card-icon,
.card.card-statistic-2 .card-icon {
  width: 72px !important;
  min-width: 72px !important;
  height: auto !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}
.card.card-statistic-1 .card-icon.bg-primary  { background: var(--blue) !important; }
.card.card-statistic-1 .card-icon.bg-success  { background: var(--green) !important; }
.card.card-statistic-1 .card-icon.bg-warning  { background: var(--amber) !important; }
.card.card-statistic-1 .card-icon.bg-danger   { background: var(--red) !important; }
.card.card-statistic-1 .card-icon.bg-info     { background: var(--blue) !important; }
.card.card-statistic-1 .card-icon.bg-secondary{ background: var(--text-2) !important; }
.card.card-statistic-1 .card-icon.bg-dark     { background: var(--text-1) !important; }
.card.card-statistic-2 .card-icon.bg-primary  { background: var(--blue) !important; }
.card.card-statistic-2 .card-icon.bg-success  { background: var(--green) !important; }
.card.card-statistic-2 .card-icon.bg-warning  { background: var(--amber) !important; }
.card.card-statistic-2 .card-icon.bg-danger   { background: var(--red) !important; }
.card.card-statistic-2 .card-icon.bg-info     { background: var(--blue) !important; }
.card.card-statistic-1 .card-wrap,
.card.card-statistic-2 .card-wrap {
  flex: 1 !important;
  padding: 12px 16px !important;
  min-width: 0 !important;
}
.card.card-statistic-1 .card-wrap .card-header,
.card.card-statistic-2 .card-wrap .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 2px !important;
  display: block !important;
}
.card.card-statistic-1 .card-wrap .card-header h4,
.card.card-statistic-2 .card-wrap .card-header h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-3) !important;
  margin: 0 !important;
}
.card.card-statistic-1 .card-wrap .card-body,
.card.card-statistic-2 .card-wrap .card-body {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.card.card-statistic-1 .card-wrap .card-body a,
.card.card-statistic-2 .card-wrap .card-body a {
  color: var(--text-1) !important;
  text-decoration: none !important;
}
.card.card-statistic-1 .card-wrap .card-body a:hover,
.card.card-statistic-2 .card-wrap .card-body a:hover {
  color: var(--amber) !important;
}

/* ════════════════════════════════════════════
   HR DASHBOARD QUICK ACTION GRID
════════════════════════════════════════════ */
.hr-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: var(--text-2) !important;
  transition: var(--transition) !important;
  padding: 4px !important;
}
.hr-quick-action:hover { color: var(--amber) !important; text-decoration: none !important; transform: translateY(-2px); }
.hr-quick-action span {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  color: var(--text-2) !important;
}
.hr-quick-action:hover span { color: var(--amber) !important; }

.hr-qa-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #fff !important;
  transition: var(--transition) !important;
}
.hr-qa-icon.bg-primary   { background: linear-gradient(135deg,var(--blue),var(--blue-dark)) !important; }
.hr-qa-icon.bg-success   { background: linear-gradient(135deg,var(--green),#00cec9) !important; }
.hr-qa-icon.bg-warning   { background: linear-gradient(135deg,var(--amber),var(--amber-dark)) !important; }
.hr-qa-icon.bg-danger    { background: linear-gradient(135deg,var(--red),#c53030) !important; }
.hr-qa-icon.bg-info      { background: linear-gradient(135deg,#06b6d4,#0891b2) !important; }
.hr-qa-icon.bg-secondary { background: linear-gradient(135deg,#64748b,#475569) !important; }
.hr-qa-icon.bg-dark      { background: linear-gradient(135deg,#334155,#1e293b) !important; }
.hr-quick-action:hover .hr-qa-icon { box-shadow: 0 6px 18px rgba(239,162,59,.3) !important; }

/* HR date badge (holidays card) */
.hr-date-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border-radius: var(--r) !important;
  background: var(--amber-soft) !important;
  border: 1.5px solid rgba(239,162,59,.25) !important;
  flex-shrink: 0 !important;
}
.hr-date-badge .hr-date-day {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--amber-dark) !important;
  line-height: 1 !important;
}
.hr-date-badge .hr-date-month {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--amber) !important;
}

/* ════════════════════════════════════════════
   GLOBAL COMPONENT EXTRAS
════════════════════════════════════════════ */

/* btn-xs alias → btn-sm */
.btn-xs {
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.4 !important;
}

/* icon-only button */
.btn-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--r) !important;
  font-size: 14px !important;
}
.btn-icon.btn-sm { width: 28px !important; height: 28px !important; font-size: 12px !important; }

/* section-header back button */
.section-header-back {
  display: flex !important;
  align-items: center !important;
  margin-right: 8px !important;
}
.section-header-back .btn { color: var(--text-2) !important; }
.section-header-back .btn:hover { color: var(--amber) !important; }

/* breadcrumb-item (flat list variant used by many pages) */
.section-header-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
}
.section-header-breadcrumb .breadcrumb-item {
  font-size: 12px !important;
  color: var(--text-3) !important;
}
.section-header-breadcrumb .breadcrumb-item a { color: var(--blue) !important; }
.section-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '/' !important;
  color: var(--text-3) !important;
  margin: 0 4px !important;
}

/* code / pre in tables */
code {
  background: rgba(239,162,59,.08) !important;
  color: var(--amber-dark) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
}

/* colored card variants */
.card.card-primary   { border-top: 3px solid var(--blue) !important; }
.card.card-success   { border-top: 3px solid var(--green) !important; }
.card.card-warning   { border-top: 3px solid var(--amber) !important; }
.card.card-danger    { border-top: 3px solid var(--red) !important; }
.card.card-info      { border-top: 3px solid var(--blue) !important; }

/* bootstrap-table striped compatibility */
.table-striped tbody tr:nth-of-type(odd) td { background: #fafbfd !important; }
.table-striped tbody tr:hover td { background: #f1f5f9 !important; }

/* list groups */
.list-group-item {
  border: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: var(--text-2) !important;
  background: var(--surface) !important;
  transition: background .12s !important;
}
.list-group-item:hover { background: #f8fafc !important; }
.list-group-item.active {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}
.list-group-item-action { cursor: pointer !important; }

/* card-body plain stat pattern (e.g. finance/dashboard) */
.card-body > h3, .card-body > h2 {
  font-weight: 700 !important;
  color: var(--text-1) !important;
  margin-bottom: 4px !important;
}
.card-body.text-center > small { color: var(--text-3) !important; font-size: 12px !important; }

/* table-responsive border */
.table-responsive { border: none !important; border-radius: 0 !important; }

/* nav-pills */
.nav-pills .nav-link { border-radius: var(--r) !important; color: var(--text-2) !important; font-size: 13px !important; font-weight: 600 !important; padding: 7px 14px !important; }
.nav-pills .nav-link.active { background: var(--amber) !important; color: #fff !important; }

/* Custom select2 multiple */
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--border-dark) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  min-height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(35,165,229,.15) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--blue-soft) !important;
  border: 1px solid rgba(35,165,229,.25) !important;
  color: var(--blue-dark) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* Tooltip / popover */
.tooltip-inner { background: var(--text-1) !important; border-radius: var(--r-sm) !important; font-size: 12px !important; }

/* Empty state cells */
td.text-center.text-muted, td.text-muted { color: var(--text-3) !important; font-size: 13px !important; }
.py-3.text-center.text-muted, .py-4.text-center.text-muted {
  color: var(--text-3) !important;
  font-size: 13px !important;
}

/* section-body top spacing */
.section-body { margin-top: 0 !important; padding-top: 0 !important; }

/* Bootstrap-table toolbar */
.fixed-table-toolbar .search input { border: 1.5px solid var(--border-dark) !important; border-radius: var(--r) !important; font-size: 13px !important; padding: 6px 12px !important; height: auto !important; }
.fixed-table-toolbar .btn { font-size: 12.5px !important; }
.fixed-table-pagination .pagination-detail { font-size: 12.5px !important; color: var(--text-3) !important; }

/* card-header with form inline */
.card-header form.ml-auto { margin-left: auto !important; }
.card-header .form-control-sm { height: auto !important; font-size: 12.5px !important; padding: 5px 10px !important; }

/* Bootstrap btn-group */
.btn-group .btn:not(:last-child) { border-right: none !important; }
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: var(--r) 0 0 var(--r) !important; }
.btn-group .btn:last-child  { border-radius: 0 var(--r) var(--r) 0 !important; }

/* ════════════════════════════════════════════════
   Unified Filter Bar  (.uni-filter)
   Usage: wrap any filter <form> in <div class="uni-filter">
   ════════════════════════════════════════════════ */
.uni-filter{background:#fff;border-radius:10px;border:1px solid #e9ecef;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:14px 20px;margin-bottom:22px;}
.uni-filter form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.uni-filter select,
.uni-filter input[type=date],
.uni-filter input[type=number],
.uni-filter input[type=text]{height:38px;border:1px solid #dee2e6;border-radius:6px;font-size:13px;background:#fff;color:#344054;padding:0 10px;width:auto!important;display:inline-block!important;transition:border-color .18s,box-shadow .18s;}
.uni-filter input[type=text]{min-width:200px;}
.uni-filter input[type=number]{min-width:90px;}
.uni-filter select{min-width:130px;cursor:pointer;}
.uni-filter select:focus,
.uni-filter input[type=date]:focus,
.uni-filter input[type=number]:focus,
.uni-filter input[type=text]:focus{border-color:#23a5e5;box-shadow:0 0 0 2px rgba(35,165,229,.12);outline:none;}
/* Blue icon-only submit */
.uni-filter-go{width:38px;height:38px;background:#23a5e5;color:#fff;border:none;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:background .18s;}
.uni-filter-go:hover{background:#1787c5;}
/* Green CSV download */
.uni-filter-csv{height:38px;padding:0 14px;background:#00b894;color:#fff;border:none;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;gap:5px;text-decoration:none;flex-shrink:0;transition:opacity .18s;}
.uni-filter-csv:hover{opacity:.88;color:#fff;text-decoration:none;}
/* Grey × clear */
.uni-filter-clr{width:38px;height:38px;background:#fff;color:#adb5bd;border:1px solid #dee2e6;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;flex-shrink:0;text-decoration:none;transition:border-color .18s,color .18s;cursor:pointer;}
.uni-filter-clr:hover{border-color:#868e96;color:#344054;text-decoration:none;}