/* ═══════════════════════════════════════════════════════════════════════════
   SGBIT ERP — Design System v3.0
   "Ocean Blue + Gold"  /  "Emerald + Gold"  dual-theme
   Admin · Student · Faculty  |  Light + Dark  |  Fully Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Theme 1: Ocean Blue + Gold (default) ─────────────────────────── */
:root {
  /* Primary palette */
  --p:          #1d4ed8;           /* Royal Blue — primary actions         */
  --p-lt:       #3b82f6;           /* Blue-500 — hover / lighter           */
  --p-dk:       #1e3a8a;           /* Blue-900 — pressed / dark            */
  --p-pale:     #eff6ff;           /* Blue-50  — tinted bg                 */
  --p-ring:     rgba(59,130,246,0.20); /* focus ring                       */
  --p-grd:      linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);

  /* Accent: Gold */
  --accent:     #f59e0b;           /* Amber-500                            */
  --accent-lt:  #fbbf24;           /* Amber-400                            */
  --accent-dk:  #d97706;           /* Amber-600                            */
  --accent-pale:#fffbeb;           /* Amber-50                             */
  --accent-grd: linear-gradient(135deg, #d97706 0%, #f59e0b 60%, #fbbf24 100%);

  /* Sidebar */
  --nav-bg:     #0d1b2a;           /* deepest navy                         */
  --nav-bg2:    #162035;           /* lighter nav stripe                   */
  --nav-grd:    linear-gradient(180deg, #0d1b2a 0%, #0f2042 50%, #122560 100%);
  --nav-text:   rgba(215,225,240,0.88);
  --nav-muted:  rgba(148,163,184,0.45);
  --nav-active: #60a5fa;           /* Blue-400 — active accent             */
  --nav-act-bg: rgba(59,130,246,0.14);
  --nav-hov:    rgba(255,255,255,0.05);
  --nav-sep:    rgba(255,255,255,0.06);

  /* Topbar */
  --top-bg:     #ffffff;
  --top-border: #e2e8f0;
  --top-shadow: 0 1px 0 #e2e8f0, 0 4px 12px rgba(15,40,100,0.06);
  --top-h:      64px;

  /* Page surfaces */
  --bg:         #f0f4fb;           /* very light blue-tinted page bg       */
  --surface:    #ffffff;
  --surface2:   #f8fafc;
  --border:     #e2e8f0;
  --border-lt:  #f1f5f9;

  /* Typography */
  --text:       #0f172a;           /* Slate-900 — primary                  */
  --text-md:    #334155;           /* Slate-700                            */
  --muted:      #64748b;           /* Slate-500                            */
  --muted-lt:   #94a3b8;          /* Slate-400                            */

  /* Semantic status */
  --success:    #059669;
  --success-lt: #d1fae5;
  --warning:    #d97706;
  --warning-lt: #fef3c7;
  --danger:     #dc2626;
  --danger-lt:  #fee2e2;
  --info:       #0284c7;
  --info-lt:    #e0f2fe;
  --purple:     #7c3aed;
  --purple-lt:  #ede9fe;

  /* Shape / Spacing */
  --r:          8px;
  --r-md:       12px;
  --r-lg:       16px;
  --r-xl:       20px;
  --r-2xl:      24px;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.05);
  --sh:     0 1px 3px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --sh-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-lg:  0 10px 40px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
  --sh-xl:  0 20px 60px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
  --sh-blue:0 4px 20px rgba(29,78,216,0.25);
  --sh-gold:0 4px 20px rgba(245,158,11,0.30);

  /* Transitions */
  --tr:     0.18s ease;
  --tr-md:  0.26s ease;

  /* Sidebar width */
  --sidebar-w: 264px;

  /* Gradient backgrounds for stat cards */
  --grd-blue:   linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --grd-cyan:   linear-gradient(135deg, #0369a1 0%, #06b6d4 100%);
  --grd-emerald:linear-gradient(135deg, #065f46 0%, #10b981 100%);
  --grd-teal:   linear-gradient(135deg, #134e4a 0%, #14b8a6 100%);
  --grd-violet: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);
  --grd-purple: linear-gradient(135deg, #581c87 0%, #a855f7 100%);
  --grd-rose:   linear-gradient(135deg, #9f1239 0%, #f43f5e 100%);
  --grd-red:    linear-gradient(135deg, #991b1b 0%, #ef4444 100%);
  --grd-orange: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
  --grd-gold:   linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
  --grd-navy:   linear-gradient(135deg, #0d1b2a 0%, #1e40af 100%);
  --grd-slate:  linear-gradient(135deg, #1e293b 0%, #475569 100%);
}

/* ── Theme 2: Emerald + Gold (toggle via data-color-theme="emerald") ── */
[data-color-theme="emerald"] {
  --p:          #059669;
  --p-lt:       #10b981;
  --p-dk:       #065f46;
  --p-pale:     #ecfdf5;
  --p-ring:     rgba(16,185,129,0.20);
  --p-grd:      linear-gradient(135deg, #065f46 0%, #10b981 100%);

  --nav-bg:     #071a12;
  --nav-bg2:    #0c2a1c;
  --nav-grd:    linear-gradient(180deg, #071a12 0%, #0d2e1e 50%, #114232 100%);
  --nav-active: #34d399;
  --nav-act-bg: rgba(16,185,129,0.14);

  --bg:         #f0faf6;
  --p-ring:     rgba(16,185,129,0.20);
  --sh-blue:    0 4px 20px rgba(5,150,105,0.25);
  --grd-blue:   linear-gradient(135deg, #065f46 0%, #10b981 100%);
}

/* ── Dark Mode ────────────────────────────────────────────────── */
[data-theme="dark"] {
  --p:          #60a5fa;
  --p-lt:       #93c5fd;
  --p-dk:       #3b82f6;
  --p-pale:     rgba(59,130,246,0.10);
  --p-ring:     rgba(96,165,250,0.25);

  --top-bg:     #1a2035;
  --top-border: #243054;
  --top-shadow: 0 1px 0 #243054, 0 4px 16px rgba(0,0,0,0.4);

  --bg:         #0e1525;
  --surface:    #141e33;
  --surface2:   #1a2540;
  --border:     #243054;
  --border-lt:  #1e2e4a;

  --text:       #f1f5f9;
  --text-md:    #cbd5e1;
  --muted:      #64748b;
  --muted-lt:   #475569;

  --nav-bg:     #090f1c;
  --nav-bg2:    #0d1729;
  --nav-grd:    linear-gradient(180deg, #090f1c 0%, #0b152a 100%);

  --success-lt: rgba(5,150,105,0.15);
  --warning-lt: rgba(217,119,6,0.15);
  --danger-lt:  rgba(220,38,38,0.15);
  --info-lt:    rgba(2,132,199,0.15);
  --purple-lt:  rgba(124,58,237,0.15);
}

[data-theme="dark"][data-color-theme="emerald"] {
  --p:          #34d399;
  --p-lt:       #6ee7b7;
  --p-dk:       #10b981;
  --p-pale:     rgba(16,185,129,0.10);
  --nav-bg:     #050e08;
  --nav-bg2:    #091410;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — BASE / RESET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--p-lt); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — PRELOADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.loader-bg {
  background: var(--nav-bg) !important;
  position: fixed; inset: 0; z-index: 99999;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  gap: 12px;
}
.loader-bg::before {
  content: '';
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.06);
  border-top-color: var(--nav-active);
  animation: sgbSpin .7s linear infinite;
}
.loader-bg::after {
  content: 'SGBIT ERP';
  color: rgba(255,255,255,0.25);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-family: 'Inter', sans-serif;
}
.loader-track, .loader-fill { display: none !important; }
@keyframes sgbSpin { to { transform: rotate(360deg); } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pcoded-navbar,
.pcoded-navbar.active-lightblue,
.pcoded-navbar.navbar-lightblue,
.pcoded-navbar.brand-lightblue {
  background: var(--nav-grd) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.35) !important;
  border-right: 1px solid rgba(255,255,255,0.03) !important;
  width: var(--sidebar-w) !important;
}

/* ── Logo strip ─────────────────────────────────────────────── */
.pcoded-navbar .navbar-brand.header-logo,
.pcoded-navbar .navbar-brand {
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  height: var(--top-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  flex-shrink: 0 !important;
  position: relative;
}
.pcoded-navbar .navbar-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.pcoded-navbar .navbar-brand .b-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.pcoded-navbar .navbar-brand .b-brand img {
  height: 34px !important; width: auto !important; object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

/* ── Scrollable nav area ─────────────────────────────────── */
.pcoded-navbar .navbar-content,
.pcoded-navbar .navbar-content.scroll-div {
  padding: 12px 0 28px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.pcoded-navbar .navbar-content::-webkit-scrollbar { width: 3px; }
.pcoded-navbar .navbar-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); }

/* ── Nav items ─────────────────────────────────────────── */
.pcoded-navbar .nav-item,
.pcoded-navbar .pcoded-inner-navbar > li {
  margin: 1px 10px !important;
  list-style: none !important;
  position: relative !important;
}

.pcoded-navbar .nav-item > a,
.pcoded-navbar .nav-item > a.nav-link,
.pcoded-navbar .pcoded-inner-navbar li > a,
.pcoded-navbar .pcoded-inner-navbar li > a.nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 9px 12px !important;
  border-radius: var(--r-md) !important;
  color: var(--nav-text) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr) !important;
  position: relative !important;
  margin: 0 !important;
}

.pcoded-navbar .nav-item > a:hover,
.pcoded-navbar .nav-item > a.nav-link:hover,
.pcoded-navbar .pcoded-inner-navbar li > a:hover {
  background: var(--nav-hov) !important;
  color: #fff !important;
}

/* Active / open */
.pcoded-navbar .nav-item.active > a,
.pcoded-navbar .nav-item.active > a.nav-link,
.pcoded-navbar .nav-item.pcoded-trigger > a,
.pcoded-navbar .nav-item.pcoded-trigger > a.nav-link,
.pcoded-navbar .pcoded-inner-navbar li.active > a,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a {
  background: var(--nav-act-bg) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* Glowing left accent */
.pcoded-navbar .nav-item.active > a::before,
.pcoded-navbar .nav-item.pcoded-trigger > a::before,
.pcoded-navbar .pcoded-inner-navbar li.active > a::before,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 18% !important; bottom: 18% !important;
  width: 3px !important;
  background: var(--nav-active) !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow: 0 0 8px var(--nav-active) !important;
}

/* ── Icons (pcoded-micon) ─────────────────────────────── */
.pcoded-navbar .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,0.05) !important;
  margin-right: 10px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  transition: background var(--tr), box-shadow var(--tr) !important;
}
.pcoded-navbar .pcoded-micon i,
.pcoded-navbar .pcoded-micon b,
.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon i {
  font-size: 13px !important;
  color: rgba(203,213,225,0.65) !important;
  font-style: normal !important;
  line-height: 1 !important;
}

/* Icon hover / active */
.pcoded-navbar .nav-item > a:hover .pcoded-micon,
.pcoded-navbar .nav-item.active > a .pcoded-micon,
.pcoded-navbar .nav-item.pcoded-trigger > a .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li > a:hover > .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li.active > a > .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a > .pcoded-micon {
  background: var(--nav-act-bg) !important;
  box-shadow: 0 0 12px rgba(96,165,250,0.15) !important;
}
.pcoded-navbar .nav-item > a:hover .pcoded-micon i,
.pcoded-navbar .nav-item.active > a .pcoded-micon i,
.pcoded-navbar .nav-item.pcoded-trigger > a .pcoded-micon i,
.pcoded-navbar .pcoded-inner-navbar li > a:hover > .pcoded-micon i,
.pcoded-navbar .pcoded-inner-navbar li.active > a > .pcoded-micon i,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a > .pcoded-micon i {
  color: var(--nav-active) !important;
}

/* ── Menu text ─────────────────────────────────────────── */
.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon + .pcoded-mtext,
.pcoded-navbar .pcoded-mtext {
  position: static !important;
  top: auto !important; left: auto !important;
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--nav-text) !important;
  white-space: nowrap !important;
}

/* ── Chevron ──────────────────────────────────────────── */
.pcoded-navbar .pcoded-hasmenu > a.nav-link::after,
.pcoded-navbar .pcoded-hasmenu > a::after,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a::after {
  content: '\f105' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: var(--nav-muted) !important;
  margin-left: auto !important;
  transition: transform .2s ease !important;
  flex-shrink: 0 !important;
  padding-right: 2px !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  border: none !important;
}
.pcoded-navbar .nav-item.pcoded-trigger > a::after,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a::after {
  transform: rotate(90deg) !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ── Submenus ─────────────────────────────────────────── */
.pcoded-navbar .pcoded-submenu {
  background: rgba(0,0,0,0.18) !important;
  margin: 2px 0 4px 14px !important;
  padding: 4px 0 !important;
  border-left: 2px solid rgba(96,165,250,0.18) !important;
  border-radius: 0 0 10px 10px !important;
  list-style: none !important;
}
.pcoded-navbar .pcoded-submenu li {
  list-style: none !important;
  margin: 1px 6px !important;
}
.pcoded-navbar .pcoded-submenu li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px 7px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(148,163,184,0.90) !important;
  text-decoration: none !important;
  transition: background var(--tr), color var(--tr) !important;
  border-left: none !important;
  margin-left: 0 !important;
}
.pcoded-navbar .pcoded-submenu li > a::before {
  content: '' !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  flex-shrink: 0 !important;
  display: block !important;
  transition: background var(--tr) !important;
}
.pcoded-navbar .pcoded-submenu li > a:hover {
  background: var(--nav-act-bg) !important;
  color: #e2e8f0 !important;
}
.pcoded-navbar .pcoded-submenu li.active > a {
  color: var(--nav-active) !important;
  font-weight: 600 !important;
  background: var(--nav-act-bg) !important;
}
.pcoded-navbar .pcoded-submenu li.active > a::before {
  background: var(--nav-active) !important;
  box-shadow: 0 0 6px var(--nav-active) !important;
}

/* ── Section labels ─────────────────────────────────── */
.sgb-nav-sep {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--nav-muted) !important;
  padding: 18px 22px 6px !important;
  display: block !important;
  user-select: none !important;
}
.sgb-nav-sep::before {
  content: '─── ';
  font-weight: 400;
  opacity: 0.3;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — TOPBAR / HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pcoded-header,
.pcoded-header.navbar,
.pcoded-header.pcoded-header,
.pcoded-header.header-lightblue,
.pcoded-header.navbar-light {
  background: var(--top-bg) !important;
  border-bottom: 1px solid var(--top-border) !important;
  box-shadow: var(--top-shadow) !important;
  height: var(--top-h) !important;
  padding: 0 !important;
  transition: background .25s, border-color .25s !important;
  backdrop-filter: blur(10px) !important;
}

/* m-header: mobile only */
.pcoded-header .m-header {
  height: var(--top-h) !important;
  display: none !important;
  align-items: center !important;
  padding: 0 14px !important;
  min-width: 62px !important;
}
@media (max-width: 991px) {
  .pcoded-header .m-header { display: flex !important; }
}

.pcoded-header .collapse.navbar-collapse {
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  height: var(--top-h) !important;
  flex: 1 !important;
}

.pcoded-header .navbar-nav {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}
.pcoded-header .navbar-nav.ms-auto {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.pcoded-header .navbar-nav.me-auto {
  margin-right: auto !important;
  flex-shrink: 1 !important;
}
.pcoded-header .navbar-nav > li {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Icon buttons ──────────────────────────────────── */
.sgb-nav-btn {
  width: 38px !important; height: 38px !important;
  border-radius: var(--r) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-md) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background var(--tr), color var(--tr), transform var(--tr) !important;
  position: relative !important;
  padding: 0 !important;
}
.sgb-nav-btn:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] .sgb-nav-btn:hover {
  background: rgba(96,165,250,0.10) !important;
  color: var(--p-lt) !important;
}
.sgb-nav-btn i { color: inherit !important; font-size: inherit !important; }

/* ── Search box ────────────────────────────────────── */
.sgb-search-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin-left: 8px !important;
}
.sgb-search-wrap .sgb-search-icon {
  position: absolute !important;
  left: 12px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.pcoded-header .navbar-nav.me-auto > li.sgb-search-li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 440px !important;
}
.pcoded-header .navbar-nav.me-auto > li.sgb-search-li .sgb-search-wrap {
  width: 100% !important;
}
.sgb-search-wrap input {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 99px !important;
  padding: 7px 14px 7px 34px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-family: inherit !important;
}
.sgb-search-wrap input:focus {
  border-color: var(--p-lt) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--p-ring) !important;
}
.sgb-search-wrap input::placeholder { color: var(--muted-lt) !important; }

/* ── Brand block ──────────────────────────────────── */
.sgb-topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 6px 0 14px !important;
  border-left: 1px solid var(--border) !important;
  margin-left: 10px !important;
}
.sgb-topbar-brand .brand-logo-box {
  width: 32px !important; height: 32px !important;
  background: var(--p-grd) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: var(--sh-blue) !important;
}
.sgb-topbar-brand .brand-logo-box i { color: #fff !important; font-size: 13px !important; }
.sgb-topbar-brand .brand-texts { line-height: 1.2 !important; }
.sgb-topbar-brand .brand-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.sgb-topbar-brand .brand-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 6px var(--accent) !important;
}
.sgb-topbar-brand .brand-sub {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Notification badge ────────────────────────────── */
.sgb-notif-wrap { position: relative !important; }
.sgb-notif-badge {
  position: absolute !important;
  top: 4px !important; right: 4px !important;
  width: 8px !important; height: 8px !important;
  background: var(--danger) !important;
  border-radius: 50% !important;
  border: 2px solid var(--top-bg) !important;
  animation: sgbPulse 2s infinite !important;
}
@keyframes sgbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* ── User button ────────────────────────────────────── */
.sgb-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: var(--r) !important;
  padding: 4px 10px 4px 4px !important;
  text-decoration: none !important;
  transition: background var(--tr) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
}
.sgb-user-btn:hover { background: var(--p-pale) !important; }
[data-theme="dark"] .sgb-user-btn:hover { background: rgba(96,165,250,0.08) !important; }

.sgb-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 9px !important;
  background: var(--p-grd) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--sh) !important;
}
.sgb-avatar img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 7px !important;
}
.sgb-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1 !important;
}

/* ── Topbar link colors ──────────────────────────── */
.pcoded-header a,
.pcoded-header .dropdown-toggle {
  color: var(--text-md) !important;
}
.pcoded-header a:hover { color: var(--p) !important; text-decoration: none !important; }

/* ── Dropdown menus ──────────────────────────────── */
.pcoded-header .dropdown-menu.notification,
.dropdown-menu.notification,
.dropdown-menu.profile-notification {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xl) !important;
  background: var(--surface) !important;
  margin-top: 8px !important;
  min-width: 300px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.pcoded-header .noti-head,
.noti-head {
  background: var(--p-grd) !important;
  padding: 14px 18px !important;
  border-bottom: none !important;
}
.pcoded-header .noti-head h6,
.noti-head h6 {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.noti-body {
  padding: 6px 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  list-style: none !important;
  margin: 0 !important;
}
.noti-body li.notification {
  border-bottom: 1px solid var(--border-lt) !important;
}
.noti-body li.notification a {
  display: flex !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: var(--text-md) !important;
  text-decoration: none !important;
  transition: background var(--tr) !important;
  font-size: 13px !important;
}
.noti-body li.notification a:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}
.noti-body li.notification.active a {
  background: var(--p-pale) !important;
}

/* ── Profile dropdown ────────────────────────────── */
.dropdown-menu.profile-notification { min-width: 220px !important; }
.pro-head {
  background: var(--p-grd) !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.pro-head img, .pro-head .img-radius {
  width: 44px !important; height: 44px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
}
.pro-body {
  padding: 8px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.pro-body li { border: none !important; }
.pro-body li a.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  color: var(--text-md) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  transition: background var(--tr), color var(--tr) !important;
}
.pro-body li a.dropdown-item:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}
.pro-body li a.dropdown-item i {
  width: 16px !important;
  color: var(--muted) !important;
}
.pro-body li a.dropdown-item:hover i { color: var(--p) !important; }

/* ── Language dropdown ───────────────────────────── */
.pcoded-header .noti-body li.notification.active,
.noti-body li.notification.active a {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 6 — MAIN CONTENT WRAPPER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pcoded-main-container,
.pcoded-wrapper,
.pcoded-content,
.pcoded-inner-content {
  background: var(--bg) !important;
  transition: background .25s !important;
}

.pcoded-inner-content {
  padding: 20px 24px 36px !important;
  min-height: calc(100vh - var(--top-h)) !important;
}

@media (max-width: 575px) {
  .pcoded-inner-content { padding: 14px 14px 28px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 7 — BREADCRUMB / PAGE HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-header,
.page-block,
.page-header.row {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}
.page-header::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  background: var(--p-grd) !important;
  border-radius: var(--r-lg) 0 0 var(--r-lg) !important;
}

.page-header .page-header-title h5,
.page-header h5,
.page-block .page-header-title h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  letter-spacing: -.2px !important;
}
.page-header .page-header-title p,
.page-header p {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: 2px 0 0 !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.breadcrumb-item {
  font-size: 12px !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '/' !important;
  color: var(--muted-lt) !important;
  margin: 0 6px !important;
  padding: 0 !important;
}
.breadcrumb-item a {
  color: var(--p) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.breadcrumb-item.active { color: var(--text-md) !important; font-weight: 600 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 8 — CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh) !important;
  transition: box-shadow var(--tr-md), transform var(--tr-md) !important;
  overflow: hidden !important;
}
.card:hover {
  box-shadow: var(--sh-md) !important;
}

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.card-header h5,
.card-header .card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  letter-spacing: -.15px !important;
}

.card-body {
  padding: 20px !important;
  color: var(--text-md) !important;
}
.card-footer {
  background: var(--surface2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}

/* ── Stat cards ──────────────────────────────────── */
.sgb-stat-card {
  border-radius: var(--r-xl) !important;
  padding: 22px !important;
  color: #fff !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform var(--tr-md), box-shadow var(--tr-md) !important;
  cursor: default !important;
  box-shadow: var(--sh-md) !important;
}
.sgb-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-lg) !important;
}
.sgb-stat-card::after {
  content: '' !important;
  position: absolute !important;
  top: -20px !important; right: -20px !important;
  width: 100px !important; height: 100px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
}
.sgb-stat-card::before {
  content: '' !important;
  position: absolute !important;
  bottom: -30px !important; left: -10px !important;
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
}
.sgb-stat-card .sc-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  opacity: 0.8 !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.sgb-stat-card .sc-value {
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-variant-numeric: tabular-nums !important;
}
.sgb-stat-card .sc-sub {
  font-size: 12px !important;
  opacity: 0.72 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.sgb-stat-card .sc-icon {
  position: absolute !important;
  right: 20px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 2.6rem !important;
  opacity: 0.18 !important;
  z-index: 0 !important;
}

/* Stat card color variants */
.sc-blue   { background: var(--grd-blue) !important; }
.sc-cyan   { background: var(--grd-cyan) !important; }
.sc-green  { background: var(--grd-emerald) !important; }
.sc-teal   { background: var(--grd-teal) !important; }
.sc-violet { background: var(--grd-violet) !important; }
.sc-purple { background: var(--grd-purple) !important; }
.sc-rose   { background: var(--grd-rose) !important; }
.sc-red    { background: var(--grd-red) !important; }
.sc-orange { background: var(--grd-orange) !important; }
.sc-gold   { background: var(--grd-gold) !important; }
.sc-navy   { background: var(--grd-navy) !important; }
.sc-slate  { background: var(--grd-slate) !important; }

/* ── KPI summary cards (smaller, used in many list pages) ── */
.sgb-kpi {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: var(--sh-xs) !important;
  transition: box-shadow var(--tr), transform var(--tr) !important;
}
.sgb-kpi:hover { box-shadow: var(--sh-md) !important; transform: translateY(-2px) !important; }
.sgb-kpi .kpi-icon {
  width: 48px !important; height: 48px !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}
.sgb-kpi .kpi-value {
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}
.sgb-kpi .kpi-label {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 9 — BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn {
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  transition: all var(--tr) !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.4 !important;
  letter-spacing: -.1px !important;
}
.btn:focus { outline: none !important; box-shadow: 0 0 0 3px var(--p-ring) !important; }
.btn:active { transform: translateY(1px) !important; }

.btn-primary {
  background: var(--p-grd) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(29,78,216,0.30) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--p-dk) 0%, var(--p) 100%) !important;
  box-shadow: 0 4px 16px rgba(29,78,216,0.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, #065f46, #059669) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(5,150,105,0.30) !important;
}
.btn-success:hover {
  box-shadow: 0 4px 16px rgba(5,150,105,0.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(220,38,38,0.30) !important;
}
.btn-danger:hover {
  box-shadow: 0 4px 16px rgba(220,38,38,0.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--accent-grd) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.30) !important;
}
.btn-warning:hover {
  box-shadow: 0 4px 16px rgba(245,158,11,0.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(135deg, #075985, #0284c7) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-info:hover { transform: translateY(-1px) !important; color: #fff !important; }

.btn-secondary {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text-md) !important;
}
.btn-secondary:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

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

.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
}
.btn-lg {
  font-size: 15px !important;
  padding: 12px 24px !important;
  border-radius: var(--r-md) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 10 — FORMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.form-control,
.form-select,
select.select2,
input.select2 {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  padding: 9px 14px !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--p-lt) !important;
  box-shadow: 0 0 0 3px var(--p-ring) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--muted-lt) !important; }

.form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-md) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.form-text { font-size: 11.5px !important; color: var(--muted) !important; }

/* Select2 */
.select2-container--default .select2-selection--single {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  padding: 0 30px 0 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--p-lt) !important;
  box-shadow: 0 0 0 3px var(--p-ring) !important;
}
.select2-container--default .select2-selection--multiple {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  min-height: 42px !important;
}
.select2-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-lg) !important;
}
.select2-results__option {
  font-size: 13px !important;
  color: var(--text-md) !important;
  padding: 8px 14px !important;
}
.select2-results__option--highlighted {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}
.select2-results__option[aria-selected="true"] {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  font-weight: 600 !important;
}
.select2-search--dropdown input {
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  background: var(--surface2) !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--p-pale) !important;
  border: 1px solid rgba(29,78,216,0.2) !important;
  border-radius: 6px !important;
  color: var(--p) !important;
  font-size: 12px !important;
}

/* Input groups */
.input-group-text {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

/* Switch / Check */
.form-check-input {
  border: 2px solid var(--border) !important;
  background-color: var(--surface) !important;
  width: 16px !important; height: 16px !important;
}
.form-check-input:checked {
  background-color: var(--p) !important;
  border-color: var(--p) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--p-ring) !important;
}
.form-switch .form-check-input {
  width: 36px !important; height: 18px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 11 — TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.table {
  color: var(--text-md) !important;
  font-size: 13.5px !important;
  --bs-table-bg: transparent !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table thead th {
  background: var(--surface2) !important;
  color: var(--text) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  white-space: nowrap !important;
}
.table thead th:first-child { border-radius: var(--r) 0 0 0 !important; }
.table thead th:last-child  { border-radius: 0 var(--r) 0 0 !important; }

.table tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border-lt) !important;
  color: var(--text-md) !important;
  vertical-align: middle !important;
}
.table tbody tr { transition: background var(--tr) !important; }
.table tbody tr:hover td { background: var(--p-pale) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 13px !important;
  color: var(--text-md) !important;
  padding: 10px 0 !important;
}
.dataTables_wrapper .dataTables_filter input {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 99px !important;
  padding: 6px 14px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  margin-left: 6px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--p-lt) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--p-ring) !important;
}
.dataTables_wrapper .dataTables_length select {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
  padding: 4px 8px !important;
  margin: 0 4px !important;
}
.dataTables_paginate .paginate_button {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--text-md) !important;
  font-size: 12.5px !important;
  padding: 5px 10px !important;
  margin: 0 2px !important;
  cursor: pointer !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  border-color: var(--p) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--p) !important;
  color: #fff !important;
  border-color: var(--p) !important;
}
.dataTables_paginate .paginate_button.disabled {
  color: var(--muted-lt) !important;
  cursor: default !important;
}
.dt-buttons .btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-md) !important;
  box-shadow: var(--sh-xs) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
}
.dt-buttons .btn:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  border-color: var(--p) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 12 — BADGES & PILLS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  letter-spacing: .02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.badge.bg-primary, .badge-primary    { background: var(--p-pale) !important;     color: var(--p) !important; }
.badge.bg-success, .badge-success    { background: var(--success-lt) !important; color: var(--success) !important; }
.badge.bg-warning, .badge-warning    { background: var(--warning-lt) !important; color: var(--warning) !important; }
.badge.bg-danger,  .badge-danger     { background: var(--danger-lt) !important;  color: var(--danger) !important; }
.badge.bg-info,    .badge-info       { background: var(--info-lt) !important;    color: var(--info) !important; }
.badge.bg-purple,  .badge-purple     { background: var(--purple-lt) !important;  color: var(--purple) !important; }
.badge.bg-secondary,.badge-secondary { background: var(--border) !important;     color: var(--muted) !important; }

/* Solid badges */
.badge.badge-solid-primary { background: var(--p) !important; color: #fff !important; }
.badge.badge-solid-success { background: var(--success) !important; color: #fff !important; }
.badge.badge-solid-danger  { background: var(--danger) !important;  color: #fff !important; }
.badge.badge-solid-warning { background: var(--warning) !important; color: #fff !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 13 — MODALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--sh-xl) !important;
  overflow: hidden !important;
}
.modal-header {
  background: var(--p-grd) !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
  color: #fff !important;
}
.modal-header .modal-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.modal-header .btn-close {
  filter: invert(1) !important;
  opacity: 0.8 !important;
}
.modal-body {
  padding: 22px !important;
  color: var(--text-md) !important;
  font-size: 13.5px !important;
}
.modal-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  padding: 14px 22px !important;
  gap: 8px !important;
}
.modal-backdrop { backdrop-filter: blur(4px) !important; }
.modal-backdrop.show { opacity: 0.5 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 14 — ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.alert {
  border-radius: var(--r-md) !important;
  border: none !important;
  border-left: 4px solid !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.alert-primary   { background: var(--p-pale) !important;     color: var(--p-dk) !important;   border-left-color: var(--p) !important; }
.alert-success   { background: var(--success-lt) !important; color: var(--success) !important; border-left-color: var(--success) !important; }
.alert-warning   { background: var(--warning-lt) !important; color: var(--warning) !important; border-left-color: var(--warning) !important; }
.alert-danger    { background: var(--danger-lt) !important;  color: var(--danger) !important;  border-left-color: var(--danger) !important; }
.alert-info      { background: var(--info-lt) !important;    color: var(--info) !important;    border-left-color: var(--info) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 15 — TOASTR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Reset toastr's built-in checkmark/cross background-image icons ── */
#toast-container > div,
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
  background-image: none !important;  /* removes toastr's default png icon tiles */
}

#toast-container > div {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  font-size: 13px !important;
  padding: 14px 18px 14px 52px !important;  /* left pad for icon */
  opacity: 1 !important;
  border: none !important;
  position: relative !important;
}

/* Clean colour backgrounds */
#toast-container > .toast-success { background-color: #059669 !important; }
#toast-container > .toast-error   { background-color: #dc2626 !important; }
#toast-container > .toast-warning { background-color: #d97706 !important; }
#toast-container > .toast-info    { background-color: var(--p)  !important; }

/* Inject crisp FA icons via pseudo-element */
#toast-container > div::before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.90) !important;
}
#toast-container > .toast-success::before { content: '\f00c' !important; }  /* fa-check */
#toast-container > .toast-error::before   { content: '\f00d' !important; }  /* fa-times */
#toast-container > .toast-warning::before { content: '\f071' !important; }  /* fa-exclamation-triangle */
#toast-container > .toast-info::before    { content: '\f129' !important; }  /* fa-info */

/* Title & message colours */
#toast-container > div .toast-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #fff !important;
  margin-bottom: 2px !important;
}
#toast-container > div .toast-message {
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.88) !important;
}

/* Progress bar */
#toast-container > div .toast-progress {
  height: 3px !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  background: rgba(255,255,255,0.35) !important;
  opacity: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 16 — PAGINATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pagination {
  gap: 3px !important;
}
.page-item .page-link {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-md) !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  padding: 7px 13px !important;
  transition: all var(--tr) !important;
  font-weight: 500 !important;
}
.page-item .page-link:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  border-color: var(--p) !important;
}
.page-item.active .page-link {
  background: var(--p) !important;
  border-color: var(--p) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(29,78,216,0.30) !important;
}
.page-item.disabled .page-link {
  background: var(--surface2) !important;
  color: var(--muted-lt) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 17 — NAV TABS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.nav-tabs .nav-link {
  border: none !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: transparent !important;
  transition: color var(--tr), background var(--tr) !important;
  margin-bottom: -2px !important;
}
.nav-tabs .nav-link:hover {
  color: var(--p) !important;
  background: var(--p-pale) !important;
}
.nav-tabs .nav-link.active {
  color: var(--p) !important;
  border-bottom: 2px solid var(--p) !important;
  background: transparent !important;
}

.nav-pills .nav-link {
  border-radius: 99px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 7px 18px !important;
  transition: all var(--tr) !important;
}
.nav-pills .nav-link:hover { background: var(--p-pale) !important; color: var(--p) !important; }
.nav-pills .nav-link.active {
  background: var(--p) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(29,78,216,0.30) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 18 — THEME TOGGLE BUTTON (Color Theme)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#sgb-color-theme-btn {
  position: fixed !important;
  bottom: 80px !important; right: 24px !important;
  z-index: 990 !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  background: var(--accent-grd) !important;
  color: #fff !important;
  box-shadow: var(--sh-gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: transform var(--tr), box-shadow var(--tr) !important;
}
#sgb-color-theme-btn:hover {
  transform: scale(1.1) rotate(20deg) !important;
  box-shadow: 0 6px 24px rgba(245,158,11,0.45) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 19 — BACK TO TOP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#sgb-back-top {
  position: fixed !important;
  bottom: 24px !important; right: 24px !important;
  z-index: 990 !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  background: var(--p-grd) !important;
  color: #fff !important;
  box-shadow: var(--sh-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s, transform .2s !important;
  font-size: 14px !important;
}
#sgb-back-top.visible { opacity: 1 !important; pointer-events: auto !important; }
#sgb-back-top:hover { transform: translateY(-3px) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 20 — GENERAL UTILITIES & TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Headings — only on white/light surface cards, NOT overriding dark hero/stat components */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--text);
}
.card-header h5, .card-header .card-title,
.page-header h5, .page-header .card-title,
.sgb-kpi .kpi-label,
.sgb-section-head h5, .sgb-section-head h6 {
  color: var(--text) !important;
}
/* Anchor colours scoped to page content */
.pcoded-inner-content a:not(.btn):not(.nav-link):not(.dropdown-item):not([style]) {
  color: var(--p);
  transition: color var(--tr);
}
.pcoded-inner-content a:not(.btn):not(.nav-link):not(.dropdown-item):not([style]):hover {
  color: var(--p-lt);
}

/* Utility text colours — only override within admin content area */
.pcoded-inner-content .text-muted,
.card .text-muted { color: var(--muted) !important; }
.pcoded-inner-content .text-primary,
.card .text-primary { color: var(--p) !important; }
.pcoded-inner-content .text-success,
.card .text-success { color: var(--success) !important; }
.pcoded-inner-content .text-danger,
.card .text-danger  { color: var(--danger) !important; }
.pcoded-inner-content .text-warning,
.card .text-warning { color: var(--warning) !important; }
.pcoded-inner-content .text-info,
.card .text-info    { color: var(--info) !important; }

.bg-primary { background: var(--p) !important; }
.bg-surface { background: var(--surface) !important; }
.bg-surface2 { background: var(--surface2) !important; }

/* Section header with bottom accent */
.sgb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
  position: relative;
}
.sgb-section-head::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--p-grd);
  border-radius: 2px;
}
.sgb-section-head h5, .sgb-section-head h6 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status dot */
.sgb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.sgb-dot-success { background: var(--success); box-shadow: 0 0 6px var(--success); }
.sgb-dot-danger  { background: var(--danger);  box-shadow: 0 0 6px var(--danger); animation: sgbPulse 2s infinite; }
.sgb-dot-warning { background: var(--warning); }
.sgb-dot-info    { background: var(--info); }

/* Progress bars */
.progress {
  background: var(--border) !important;
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}
.progress-bar {
  border-radius: 99px !important;
  background: var(--p-grd) !important;
}
.progress-bar.bg-success { background: linear-gradient(90deg, #065f46, #10b981) !important; }
.progress-bar.bg-warning { background: var(--accent-grd) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #991b1b, #ef4444) !important; }

/* List groups */
.list-group-item {
  background: var(--surface) !important;
  border: 1px solid var(--border-lt) !important;
  color: var(--text-md) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  transition: background var(--tr) !important;
}
.list-group-item:hover {
  background: var(--p-pale) !important;
}
.list-group-item.active {
  background: var(--p) !important;
  border-color: var(--p) !important;
  color: #fff !important;
}

/* Dividers */
hr {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 21 — ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes sgbFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sgbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sgbSlideLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sgbScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sgbRipple {
  to { transform: translate(-50%,-50%) scale(5); opacity: 0; }
}
@keyframes sgbFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.sgb-anim-1  { animation: sgbFadeUp  .45s ease both; }
.sgb-anim-2  { animation: sgbFadeUp  .45s .07s ease both; }
.sgb-anim-3  { animation: sgbFadeUp  .45s .14s ease both; }
.sgb-anim-4  { animation: sgbFadeUp  .45s .21s ease both; }
.sgb-anim-5  { animation: sgbFadeUp  .45s .28s ease both; }
.sgb-anim-6  { animation: sgbFadeUp  .45s .35s ease both; }
.sgb-anim-l  { animation: sgbSlideLeft .45s ease both; }
.sgb-anim-sc { animation: sgbScale   .4s ease both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 22 — DARK MODE COMPONENT OVERRIDES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[data-theme="dark"] .card,
[data-theme="dark"] .sgb-kpi {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .card-header { background: var(--surface2) !important; }
[data-theme="dark"] .card-footer { background: var(--surface) !important; }
[data-theme="dark"] .table thead th { background: var(--surface2) !important; }
[data-theme="dark"] .table tbody tr:hover td { background: rgba(96,165,250,0.06) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .modal-content { background: var(--surface) !important; }
[data-theme="dark"] .modal-footer  { background: var(--surface2) !important; }
[data-theme="dark"] .dropdown-menu {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .page-header { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .select2-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .list-group-item { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .input-group-text { background: var(--surface2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active { background: transparent !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .dataTables_paginate .paginate_button {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-md) !important;
}
[data-theme="dark"] .dt-buttons .btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-md) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 23 — RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .card-body { padding: 16px !important; }
  .sgb-stat-card { padding: 18px !important; }
  .sgb-stat-card .sc-value { font-size: 1.9rem !important; }
  .btn { padding: 7px 14px !important; }
  .table thead th, .table tbody td { padding: 9px 10px !important; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  .sgb-stat-card { padding: 14px !important; }
  .sgb-stat-card .sc-value { font-size: 1.6rem !important; }
  .nav-tabs .nav-link { padding: 7px 10px !important; font-size: 12px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 24 — PRINT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {
  .pcoded-navbar, .pcoded-header, #sgb-back-top,
  #sgb-color-theme-btn, .sgb-no-print { display: none !important; }
  .pcoded-main-container { margin: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  body { background: #fff !important; color: #000 !important; }
}