/* Row under the full-width header: sidebar | content */
.main-row {
  display: flex;
  min-height: 100vh;  /* content stretches to viewport height */
}

/* Make sure the header is always above the sidebar */
.page > header.navbar {
  position: relative;
  z-index: 2000; /* higher than anything in main-row */
}

/* Force the vertical navbar to behave like a column, not a fixed overlay */
.page .main-row aside.navbar.navbar-vertical {
  flex: 0 0 150px;
  max-width: 150px;
  width: 150px;
  border-right: 1px solid rgba(0,0,0,.08);

  /* CRITICAL overrides against Tabler defaults */
  position: sticky !important;   /* win over any fixed/absolute */
  top: 0 !important;             /* start at top of the scroll area */
  left: 0;

  height: auto !important;       /* avoid full-viewport fixed heights */
  max-height: 100vh;
  overflow-y: auto;
  z-index: 1;                    /* below the header (2000) */
  box-sizing: border-box;
}

/* Content column fills the rest */
.page .main-row .page-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile: stack naturally */
@media (max-width: 991.98px) {
  .main-row { display: block; }
  .page .main-row aside.navbar.navbar-vertical {
    position: static !important;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
  }
}

/* Optional: if any page still uses `navbar-overlap`, neutralize its overlay */
.navbar-overlap::after { display: none !important; content: none !important; }

/* Optional: your sidebar colors/active state */
.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item { color: #ffffff !important; }
.navbar-vertical .nav-link.active,
.navbar-vertical .dropdown-item.active {
  background: rgba(255,255,255,0.12);
  border-radius: .5rem;
}


/* kill any leftover spacing between sidebar and content */
.page .main-row { gap: 0; }

.page .main-row .page-wrapper {
  margin-left: 0 !important;   /* override any old rules */
  padding-left: 0 !important;  /* Tabler adds default padding */
}

/* if you want a small gutter instead of 0, use this instead: */
/*
:root { --content-gutter: 12px; }
.page .main-row .page-wrapper {
  margin-left: 0 !important;
  padding-left: var(--content-gutter) !important;
}
*/

/* make sure the sidebar itself isn’t adding extra outer space */
.page .main-row aside.navbar.navbar-vertical {
  margin-right: 0 !important;  /* some themes add margins on navbars */
  border-right: 1px solid rgba(0,0,0,.08); /* optional visual divider */
}

/* --- Fix huge blank space above charts inside .ratio wrappers --- */
/* Bootstrap adds aspect-ratio padding with ::before. Kill it only inside cards. */
.card .ratio::before {
  content: none !important;     /* remove the padding ghost element */
  display: none !important;
}

/* Make the ratio container act like a normal block */
.card .ratio {
  position: static !important;
  padding: 0 !important;        /* no extra padding on the container */
  height: auto !important;
}

/* Ensure children are in normal flow and use their own heights */
.card .ratio > * {
  position: static !important;
  width: 100% !important;
  height: auto !important;      /* your explicit heights on chart DIVs will still win */
}

/* If your chart needs a fixed height, set it explicitly (you already had this) */
#barchart_material_month { width: 100%; height: 400px; }

/* Optional: tighten spacing if titles feel too far from charts */
.card-title { margin-bottom: .5rem; }

/* =====================================================================
   UI DESIGN REFRESH (2026-05-25)
   Visual polish only — keeps the existing flex/sticky layout & brand colors.
   ===================================================================== */
:root{
  --brand:#2E3192;
  --brand-2:#3a3fb0;
  --accent:#FF675B;
  --teal:#16b5a7;
  --amber:#f4a62a;
  --sidebar-1:#2a2d72;
  --sidebar-2:#191b4f;
  --ink:#1f2a44;
  --muted:#6b7280;
  --page-bg:#eef1f8;
  --card-radius:14px;
  --card-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
  --card-shadow-hover:0 10px 28px rgba(46,49,146,.16);
}

/* ---- base ---- */
body{ background:var(--page-bg) !important; color:var(--ink); }
.page-wrapper, .page-body{ background:transparent; }
.page-body{ padding-top:1.25rem; }
a{ text-decoration:none; }

/* ---- top navbar (clean white, brand accents) ---- */
.page > header.navbar{
  background:#ffffff !important;
  border-bottom:1px solid rgba(16,24,40,.07);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:.35rem 0;
}
.navbar-brand img{ filter:drop-shadow(0 2px 4px rgba(46,49,146,.18)); }
.page > header.navbar .navbar-nav{ gap:.15rem; }
.page > header.navbar .navbar-nav .nav-link{
  color:#3a3f55 !important;
  font-weight:600; font-size:.92rem;
  border-radius:10px; padding:.5rem .9rem !important;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.page > header.navbar .navbar-nav .nav-link .nav-link-title{
  color:inherit !important;   /* override inline color:#ffffff in markup */
}
.page > header.navbar .navbar-nav .nav-link .nav-link-icon{
  color:var(--brand); opacity:.85; width:18px; height:18px; flex:0 0 18px;
}
.page > header.navbar .navbar-nav .nav-link .nav-link-icon svg{
  width:18px; height:18px; stroke-width:1.9;
}
.page > header.navbar .navbar-nav .nav-link:hover{
  background:#eef1f8; color:var(--brand) !important;
}
.page > header.navbar .navbar-nav .nav-link:hover .nav-link-icon{ opacity:1; }
.page > header.navbar .navbar-nav .nav-link.active,
.page > header.navbar .navbar-nav .nav-item.active > .nav-link{
  background:linear-gradient(135deg, var(--brand) 0%, #3b40b4 100%);
  color:#fff !important;
  box-shadow:0 4px 12px rgba(46,49,146,.25);
}
.page > header.navbar .navbar-nav .nav-link.active .nav-link-icon,
.page > header.navbar .navbar-nav .nav-link.active .nav-link-title{
  color:#fff !important; opacity:1;
}
.page > header.navbar .navbar-toggler{
  color:var(--brand); border-color:rgba(46,49,146,.18);
}

/* ---- page title band (white card with brand stripe) ----
   Two markup variants exist:
   - .page-header1 (index*.php landing pages)
   - .page-header.text-white (obfuscated inner pages)
   Both originally had a solid indigo inline background — overridden here. */
.page-header1,
.page-header.text-white{
  background:#ffffff !important;
  color:var(--ink) !important;
  padding:1.25rem 0 !important;
  border-bottom:1px solid rgba(16,24,40,.06);
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  position:relative;
}
.page-header1::before,
.page-header.text-white::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
}
.page-header1 .container-xl,
.page-header.text-white .container-xl{ position:relative; }
.page-header1 .page-pretitle,
.page-header.text-white .page-pretitle{
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--accent) !important; font-size:.74rem;
}
.page-header1 .page-title,
.page-header.text-white .page-title{
  color:var(--ink) !important; font-weight:700; font-size:1.45rem; letter-spacing:.2px;
  margin-top:.15rem;
}
/* defeat the inline `text-white` Bootstrap class on the same div */
.page-header1.text-white,
.page-header.text-white,
.page-header1.text-white .page-title,
.page-header.text-white .page-title{ color:var(--ink) !important; }
.page-header1.text-white .page-pretitle,
.page-header.text-white .page-pretitle{ color:var(--accent) !important; }

/* Previous/Next buttons on inner pages were styled to be invisible-on-blue
   (white-on-blue). Re-tone them so they read on the new white band. */
.page-header.text-white .btn,
.page-header.text-white a.btn{
  background:#eef1f8 !important; color:var(--brand) !important;
  border:1px solid rgba(46,49,146,.18) !important;
}
.page-header.text-white .btn:hover,
.page-header.text-white a.btn:hover{
  background:var(--brand) !important; color:#fff !important;
  border-color:var(--brand) !important;
}

/* ---- sidebar ---- */
.page .main-row aside.navbar.navbar-vertical{
  flex:0 0 230px !important; max-width:230px !important; width:230px !important;
  background:linear-gradient(180deg,var(--sidebar-1) 0%, var(--sidebar-2) 100%) !important;
  border-right:none !important; padding:.4rem .6rem .9rem !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.page .main-row aside.navbar.navbar-vertical .container-fluid{ display:block; padding:0; }
.page .main-row aside.navbar.navbar-vertical::-webkit-scrollbar{ width:6px; }
.page .main-row aside.navbar.navbar-vertical::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:6px; }

.sidebar-brand{
  display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:700;
  font-size:1rem; padding:.6rem .7rem .2rem;
}
.sidebar-brand svg{ width:22px; height:22px; color:var(--accent); }
.sidebar-section{
  color:rgba(255,255,255,.45); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:1rem .85rem .4rem;
}
.navbar-vertical .navbar-nav{ width:100%; }
.navbar-vertical .nav-item{ margin:2px 0; width:100%; }
.navbar-vertical .nav-link{
  display:flex !important; align-items:center; gap:.7rem;
  color:rgba(255,255,255,.82) !important; text-decoration:none;
  padding:.58rem .8rem !important; border-radius:10px;
  font-size:.9rem; font-weight:500; line-height:1.2;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.navbar-vertical .nav-link .nav-link-icon{ width:20px; height:20px; flex:0 0 20px; display:inline-flex; opacity:.85; }
.navbar-vertical .nav-link .nav-link-icon svg{ width:20px; height:20px; stroke-width:1.9; }
.navbar-vertical .nav-link .nav-link-title{ white-space:normal; }
.navbar-vertical .nav-link:hover{
  background:rgba(255,255,255,.10) !important; color:#fff !important; transform:translateX(2px);
}
.navbar-vertical .nav-link:hover .nav-link-icon{ opacity:1; }
.navbar-vertical .nav-link.active{
  background:rgba(255,255,255,.15) !important; color:#fff !important; font-weight:600;
  box-shadow:inset 3px 0 0 0 var(--accent);
}
.navbar-vertical .nav-link.active .nav-link-icon{ opacity:1; color:var(--accent); }

/* ---- cards ---- */
.card{
  border:1px solid rgba(16,24,40,.06) !important;
  border-radius:var(--card-radius) !important;
  box-shadow:var(--card-shadow) !important;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--card-shadow-hover) !important; transform:translateY(-2px); }
.card-title{ font-weight:700; color:var(--ink); }
.card-body{ padding:1.15rem 1.25rem; }

/* ---- KPI / stat row: colored top accent, varied per card ---- */
.row-deck.row-cards > [class*="col"] > .card{ border-top:3px solid var(--brand) !important; }
.row-deck.row-cards > [class*="col"]:nth-child(4n+2) > .card{ border-top-color:var(--accent) !important; }
.row-deck.row-cards > [class*="col"]:nth-child(4n+3) > .card{ border-top-color:var(--teal) !important; }
.row-deck.row-cards > [class*="col"]:nth-child(4n+4) > .card{ border-top-color:var(--amber) !important; }
.row-deck.row-cards .subheader{ color:var(--muted); letter-spacing:.03em; }
.row-deck.row-cards .h1{ color:var(--brand); font-weight:800; }

/* ---- buttons ---- */
.btn-primary{
  --tblr-btn-bg:var(--brand); --tblr-btn-border-color:var(--brand);
  --tblr-btn-hover-bg:#262a82; --tblr-btn-hover-border-color:#262a82;
  --tblr-btn-active-bg:#21257a;
  background:var(--brand); border-color:var(--brand); border-radius:9px; font-weight:600;
  box-shadow:0 4px 12px rgba(46,49,146,.25);
}
.btn-primary:hover{ background:#262a82; border-color:#262a82; }

/* ---- tables (listing + datatables) ---- */
.card table{ width:100%; }
table.prop, .card table.table, table#example{ border-collapse:separate; border-spacing:0; }
table.prop th, table#example thead th, .card table thead th{
  background:#f1f3f9; color:var(--brand); font-weight:700;
  border:none; border-bottom:1px solid rgba(46,49,146,.12);
  padding:.7rem .8rem; text-transform:uppercase; letter-spacing:.04em; font-size:.78rem;
}
table.prop td, table#example tbody td, .card table tbody td{ padding:.65rem .8rem; vertical-align:middle; }
table#example tbody tr:nth-child(even){ background:#f7f8fc; }
table#example tbody tr:hover, table.prop tr:hover{ background:#eef1fb; }
table.prop img, table#example img{ border-radius:10px; }

/* ---- footer ---- */
.footer{ border-top:1px solid rgba(16,24,40,.06); color:var(--muted); }

/* ---- dashboard data tables (.dash-table) ---- */
/* Works for both <table><thead>+<tbody> AND <table>(implicit tbody) layouts */
.dash-table{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  border:1px solid #e5e8f0 !important; border-radius:12px !important; overflow:hidden;
  background:#fff !important; font-size:.85rem;
  box-shadow:0 2px 6px rgba(46,49,146,.06);
  margin:10px 0 18px;
}

/* === HEADER CELLS === */
/* (a) Explicit <thead>, (b) first row in implicit/explicit tbody-only tables */
.dash-table > thead > tr > th,
.dash-table > thead > tr > td,
.dash-table > tbody:first-child > tr:first-child > th,
.dash-table > tbody:first-child > tr:first-child > td{
  background:linear-gradient(135deg,#2E3192 0%,#4044a8 100%) !important;
  color:#ffffff !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.04em !important; font-size:.74rem !important;
  padding:.7rem .85rem !important; border:none !important; text-align:left !important;
  white-space:nowrap;
}
.dash-table > thead > tr > th:first-child,
.dash-table > thead > tr > td:first-child,
.dash-table > tbody:first-child > tr:first-child > th:first-child,
.dash-table > tbody:first-child > tr:first-child > td:first-child{ border-top-left-radius:11px; }
.dash-table > thead > tr > th:last-child,
.dash-table > thead > tr > td:last-child,
.dash-table > tbody:first-child > tr:first-child > th:last-child,
.dash-table > tbody:first-child > tr:first-child > td:last-child{ border-top-right-radius:11px; }

/* === BODY CELLS === */
.dash-table > thead + tbody > tr > td,
.dash-table > tbody:first-child > tr:not(:first-child) > td{
  background:#ffffff !important; color:#1f2a44 !important;
  padding:.6rem .85rem !important; border:none !important;
  border-bottom:1px solid #eef0f4 !important;
}
/* Striping — alternate body rows */
.dash-table > thead + tbody > tr:nth-child(even) > td,
.dash-table > tbody:first-child > tr:not(:first-child):nth-child(odd) > td{
  background:#f7f8fc !important;
}
/* Hover */
.dash-table > thead + tbody > tr:hover > td,
.dash-table > tbody:first-child > tr:not(:first-child):hover > td{
  background:#eef1fb !important;
}
/* Last row no bottom border + rounded corners */
.dash-table > thead + tbody > tr:last-child > td,
.dash-table > tbody:first-child > tr:last-child > td{ border-bottom:none !important; }
.dash-table > thead + tbody > tr:last-child > td:first-child,
.dash-table > tbody:first-child > tr:last-child > td:first-child{ border-bottom-left-radius:11px; }
.dash-table > thead + tbody > tr:last-child > td:last-child,
.dash-table > tbody:first-child > tr:last-child > td:last-child{ border-bottom-right-radius:11px; }
/* First column (year/label) bolded */
.dash-table > thead + tbody > tr > td:first-child,
.dash-table > tbody:first-child > tr:not(:first-child) > td:first-child{
  font-weight:700 !important; color:#2E3192 !important;
}
/* Numeric columns right-aligned */
.dash-table > thead + tbody > tr > td:not(:first-child),
.dash-table > tbody:first-child > tr:not(:first-child) > td:not(:first-child){
  text-align:right !important; font-variant-numeric:tabular-nums;
}

/* === HIGHLIGHTED TOTALS COLUMN (class="dash-table dash-totals") === */
/* Header last-cell */
.dash-table.dash-totals > thead > tr > th:last-child,
.dash-table.dash-totals > thead > tr > td:last-child,
.dash-table.dash-totals > tbody:first-child > tr:first-child > th:last-child,
.dash-table.dash-totals > tbody:first-child > tr:first-child > td:last-child{
  background:linear-gradient(135deg,#1a1d6e 0%,#2E3192 100%) !important;
  border-left:2px solid rgba(255,255,255,.3) !important;
  color:#ffd954 !important;
}
/* Body last-cell */
.dash-table.dash-totals > thead + tbody > tr > td:last-child,
.dash-table.dash-totals > tbody:first-child > tr:not(:first-child) > td:last-child{
  background:#eef1fb !important; color:#1a1d6e !important;
  font-weight:800 !important; font-size:.95rem !important;
  border-left:2px solid #2E3192 !important; letter-spacing:.02em;
}
.dash-table.dash-totals > thead + tbody > tr:nth-child(even) > td:last-child,
.dash-table.dash-totals > tbody:first-child > tr:not(:first-child):nth-child(odd) > td:last-child{
  background:#e1e6f5 !important;
}
.dash-table.dash-totals > thead + tbody > tr:hover > td:last-child,
.dash-table.dash-totals > tbody:first-child > tr:not(:first-child):hover > td:last-child{
  background:#d0d7ee !important;
}

/* ---- dashboard list tables (.dash-list) ---- */
/* For data lists with names, photos, contacts, mixed text+numbers */
.dash-list{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #e5e8f0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  font-size:.88rem;
  box-shadow:0 2px 6px rgba(46,49,146,.06);
  margin:10px 0 18px;
}
/* Header — explicit thead OR first row in implicit tbody */
.dash-list > thead > tr > th,
.dash-list > thead > tr > td,
.dash-list > tbody:first-child > tr:first-child > th,
.dash-list > tbody:first-child > tr:first-child > td{
  background:linear-gradient(135deg,#2E3192 0%,#4044a8 100%) !important;
  color:#ffffff !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  font-size:.74rem !important;
  padding:.85rem 1rem !important;
  border:none !important;
  border-bottom:2px solid #1d206a !important;
  text-align:left !important;
  vertical-align:middle !important;
  white-space:nowrap;
}
.dash-list > thead > tr > th:first-child,
.dash-list > thead > tr > td:first-child,
.dash-list > tbody:first-child > tr:first-child > th:first-child,
.dash-list > tbody:first-child > tr:first-child > td:first-child{ border-top-left-radius:11px; }
.dash-list > thead > tr > th:last-child,
.dash-list > thead > tr > td:last-child,
.dash-list > tbody:first-child > tr:first-child > th:last-child,
.dash-list > tbody:first-child > tr:first-child > td:last-child{ border-top-right-radius:11px; }

/* Body cells */
.dash-list > thead + tbody > tr > td,
.dash-list > tbody:first-child > tr:not(:first-child) > td{
  background:#fff !important;
  color:#2c3e50 !important;
  padding:.85rem 1rem !important;
  border:none !important;
  border-bottom:1px solid #eef0f4 !important;
  vertical-align:middle !important;
  line-height:1.45;
}
.dash-list > thead + tbody > tr:nth-child(even) > td,
.dash-list > tbody:first-child > tr:not(:first-child):nth-child(odd) > td{
  background:#f9fafd !important;
}
.dash-list > thead + tbody > tr:hover > td,
.dash-list > tbody:first-child > tr:not(:first-child):hover > td{
  background:#eef1fb !important;
}
.dash-list > thead + tbody > tr:last-child > td,
.dash-list > tbody:first-child > tr:last-child > td{ border-bottom:none !important; }
.dash-list > thead + tbody > tr:last-child > td:first-child,
.dash-list > tbody:first-child > tr:last-child > td:first-child{ border-bottom-left-radius:11px; }
.dash-list > thead + tbody > tr:last-child > td:last-child,
.dash-list > tbody:first-child > tr:last-child > td:last-child{ border-bottom-right-radius:11px; }

/* Name (typically 2nd col) bolded */
.dash-list > thead + tbody > tr > td:nth-child(2),
.dash-list > tbody:first-child > tr:not(:first-child) > td:nth-child(2){
  font-weight:600 !important;
  color:#1a1d6e !important;
}

/* Photo cell — circular, sized */
.dash-list img{
  border-radius:50% !important;
  border:2px solid #e5e8f0 !important;
  width:60px !important;
  height:60px !important;
  object-fit:cover;
  background:#f7f8fc;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.dash-list > thead + tbody > tr > td:first-child:has(img),
.dash-list > tbody > tr > td:first-child:has(img){
  width:80px !important;
  text-align:center !important;
  padding:.6rem !important;
}

/* Mailto links */
.dash-list a[href^="mailto:"]{
  color:#2E3192 !important;
  text-decoration:none;
  font-weight:500;
}
.dash-list a[href^="mailto:"]:hover{ text-decoration:underline; }

/* DataTables polish */
div.dataTables_wrapper{ padding:8px 4px; }
div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select{
  border:1px solid #d6dae7;
  border-radius:6px;
  padding:.35rem .7rem;
  outline:none;
  background:#fff;
  margin-left:6px;
}
div.dataTables_wrapper .dataTables_filter input:focus{
  border-color:#2E3192;
  box-shadow:0 0 0 3px rgba(46,49,146,.12);
}
div.dataTables_wrapper .paginate_button{
  border-radius:6px !important;
  margin:0 2px !important;
  padding:.3rem .65rem !important;
  border:1px solid transparent !important;
}
div.dataTables_wrapper .paginate_button.current,
div.dataTables_wrapper .paginate_button.current:hover{
  background:#2E3192 !important;
  color:#fff !important;
  border-color:#2E3192 !important;
}
div.dataTables_wrapper .paginate_button:hover{
  background:#eef1fb !important;
  color:#2E3192 !important;
  border-color:#d6dae7 !important;
}
div.dataTables_wrapper .dataTables_info{ color:#6b7280; font-size:.82rem; }

/* ---- mobile sidebar width reset ---- */
@media (max-width:991.98px){
  .page .main-row aside.navbar.navbar-vertical{ width:100% !important; max-width:none !important; flex:auto !important; }
}

/* =========================================================================
   Mini stat cards (.card.card-sm)
   Used across index1.php / d86 / d88 etc.
   Clean white-background uniform look — overrides the inline rainbow colors
   the pages set on each .card-body. Indigo top border anchors them visually.
   ========================================================================= */
.card.card-sm{
  border:none;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 2px 10px rgba(46,49,146,.07);
  transition:transform .22s ease, box-shadow .22s ease;
  height:100%;
  border-top:3px solid #2E3192;
}
.card.card-sm:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(46,49,146,.14);
}
/* Override the per-page inline `background:#xxx; color:#fff` on the card body
   so every mini stat card looks identical. */
.card.card-sm .card-body{
  position:relative;
  padding:18px 20px !important;
  min-height:104px;
  background:#ffffff !important;
  color:#2E3192 !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card.card-sm .card-body .font-weight-medium{
  margin-bottom:8px;
  line-height:1;
}
.card.card-sm .card-body .font-weight-medium b{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:#2E3192 !important;
}
.card.card-sm .card-body .text-secondary,
.card.card-sm .card-body .text-secondary b,
.card.card-sm .card-body .text-secondary a{
  color:#6b6f8c !important;
  font-size:11.5px !important;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  opacity:1;
}
.card.card-sm .card-body .text-secondary a:hover{ color:#2E3192 !important; }
.card.card-sm .card-body .col > .font-weight-medium b{ display:inline-block; }

/* Force every column containing a .card.card-sm to share its row equally,
   so the page's col-lg-2 / col-lg-3 mix renders as same-width tiles. */
.row.row-cards > [class*="col-"]:has(> .card.card-sm){
  flex:1 1 0 !important;
  max-width:none !important;
}

@media (max-width:575px){
  .card.card-sm .card-body{ min-height:88px; padding:14px 16px !important; }
  .card.card-sm .card-body .font-weight-medium b{ font-size:24px; }
  .row.row-cards > [class*="col-"]:has(> .card.card-sm){ flex:1 1 50% !important; }
}

/* =========================================================================
   Sticky top navbar (applies to every page across the dashboard)
   - Pin to top, never disappear on scroll
   - Better link spacing, hover feedback, and active-page indicator
   - Soft shadow once the user scrolls so the nav lifts off the page
   ========================================================================= */
.page > header.navbar.navbar-expand-md,
header.navbar.navbar-expand-md.navbar-overlap{
  position:sticky !important;
  top:0;
  z-index:1030;
  margin-bottom:0;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  backdrop-filter:saturate(140%);
}
header.navbar.navbar-expand-md .container-xl{
  padding-top:6px;
  padding-bottom:6px;
  align-items:center;
}
/* Brand / logo */
header.navbar.navbar-expand-md .navbar-brand{
  padding:4px 14px 4px 0;
  margin-right:14px;
}
header.navbar.navbar-expand-md .navbar-brand img{
  width:58px !important;
  height:auto !important;
  display:block;
}
/* Nav links — better breathing room + clear hover + clear active */
header.navbar.navbar-expand-md .navbar-nav{ gap:4px; }
header.navbar.navbar-expand-md .nav-item .nav-link{
  padding:10px 18px !important;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
header.navbar.navbar-expand-md .nav-item .nav-link .nav-link-icon{
  display:inline-flex;
  align-items:center;
}
header.navbar.navbar-expand-md .nav-item .nav-link .nav-link-icon svg{
  width:18px; height:18px;
  opacity:.9;
}
header.navbar.navbar-expand-md .nav-item .nav-link:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
header.navbar.navbar-expand-md .nav-item .nav-link:hover .nav-link-title,
header.navbar.navbar-expand-md .nav-item .nav-link:focus .nav-link-title{
  color:#ffd954 !important;
}
header.navbar.navbar-expand-md .nav-item .nav-link.active{
  background:#FF675B !important;
  box-shadow:0 4px 12px rgba(255,103,91,.35);
}
header.navbar.navbar-expand-md .nav-item .nav-link.active .nav-link-title{
  color:#ffffff !important;
}
header.navbar.navbar-expand-md .nav-item .nav-link.active:hover .nav-link-title{
  color:#ffffff !important;
}
/* Subtle separator pip for non-active links (looks elegant on the indigo bar) */
header.navbar.navbar-expand-md .nav-item + .nav-item .nav-link::before{
  content:"";
  position:absolute;
  left:-3px; top:50%;
  width:2px; height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:translateY(-50%);
}
header.navbar.navbar-expand-md .nav-item + .nav-item .nav-link.active::before,
header.navbar.navbar-expand-md .nav-item + .nav-item .nav-link:hover::before{
  display:none;
}
/* Mobile: ensure the collapse menu still works */
@media (max-width:767.98px){
  header.navbar.navbar-expand-md .nav-item .nav-link{
    padding:10px 14px !important;
    font-size:14px;
  }
  header.navbar.navbar-expand-md .navbar-brand img{ width:48px !important; }
}