:root{
  --c-bg:#f6f9fc;
  --c-card:#ffffff;
  --c-border:#e6e9ef;
  --c-text:#0f172a;
  --c-muted:#6b7280;

  --c-primary:#1e194a;
  --c-primary-soft:#5b8def33;

  --c-success:#20c997;
  --c-success-soft:#20c99733;

  --c-green:#20c997;
  --c-green-soft:#20c99733;

  --c-purple:#6f42c1;
  --c-purple-soft:#6f42c133;

  --c-pink:#e83e8c;
  --c-pink-soft:#e83e8c33;

  --c-orange:#f3740b;
}

[data-bs-theme="dark"]{
  --c-bg:#0b1020;
  --c-card:#0f152a;
  --c-border:#1e2a44;
  --c-text:#e5e7eb;
  --c-muted:#9aa4b2;

  --c-primary:#76a7ff;
  --c-primary-soft:#76a7ff33;

  --c-success:#38e2b0;
  --c-success-soft:#38e2b033;

  --c-green:#38e2b0;
  --c-green-soft:#38e2b033;

  --c-purple:#9b6bff;
  --c-purple-soft:#9b6bff33;

  --c-pink:#ff6fa8;
  --c-pink-soft:#ff6fa833;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--c-orange);
    --bs-btn-border-color: var(--c-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--c-orange);
    --bs-btn-hover-border-color:var(--c-orange);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--c-orange);
    --bs-btn-active-border-color: var(--c-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--c-orange);
    --bs-btn-disabled-border-color: var(--c-orange);
}



.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: var(--c-primary);
    border-color: var(--c-orange);
}
html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.no-scroll{ overflow:hidden; }

/* Navbar */
.navbar{
  border-bottom: 1px solid var(--c-border) !important;
  background: var(--c-card) !important;
}

.btn-soft{
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn-soft.active, .btn-soft:hover{
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.brand-dot{
  width:14px; height:14px; border-radius:4px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-purple));
  display:inline-block;
}

/* Drawer Sidebar (hidden by default) */
.sidebar-drawer{
  position: fixed;
  inset: 0 auto 0 0;   /* top:0; left:0; bottom:0 */
  width: 280px;
  transform: translateX(-100%);
  transition: transform .25s ease, box-shadow .25s ease;
  background: var(--c-card);
  border-right: 1px solid var(--c-border);
  z-index: 1045; /* above navbar */
  display: flex;
  flex-direction: column;
}
.sidebar-drawer.show{
  transform: translateX(0);
  box-shadow: 8px 0 24px rgba(0,0,0,.08);
}
.sidebar-header{
  border-bottom: 1px solid var(--c-border);
}

/* ===============================
   🤍 WHITE MODERN SIDEBAR
================================ */

/* Backdrop (soft blur) */
.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  z-index: 1040;
}
.sidebar-backdrop.show{
  opacity: 1;
  visibility: visible;
}

/* Sidebar Drawer */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: -280px;
  width: 260px;
  height: 100%;
  background: #ffffff;
  color: #0f172a;
  z-index: 1050;
  box-shadow: 10px 0 40px rgba(0,0,0,0.08);
  transition: left .35s cubic-bezier(.4,.2,.2,1);
  border-right: 1px solid #e5e7eb;
}

.sidebar-drawer.show {
  left: 0;
}

/* Header */
.sidebar-header{
  border-bottom: 1px solid #f1f5f9;
}

/* Links */
.sidebar-drawer .list-group-item {
  background: transparent;
  color: #475569;
  border: none;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: all .2s ease;
}

/* Hover */
.sidebar-drawer .list-group-item:hover {
  background: #f1f5ff;
  color: #1e194a;
  transform: translateX(6px);
}

/* Active */
.sidebar-drawer .list-group-item.active {
  background: linear-gradient(135deg,#1e194a,#1e194a);
  color: #fff;
  box-shadow: 0 8px 18px rgba(99,102,241,0.25);
}

/* Icons */
.sidebar-drawer i{
  font-size: 1.05rem;
  opacity: .85;
}

/* Prevent body scroll */
.no-scroll{
  overflow: hidden;
}

/* ===============================
   🤍 WHITE NAVBAR
================================ */

.navbar{
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Soft buttons */
.btn-soft{
  background: #f1f5f9;
  border: none;
  transition: all .2s ease;
}

.btn-soft:hover{
  background: #eef2ff;
  color: #4f46e5;
  transform: translateY(-2px);
}

/* Notification pulse */
.navbar .position-relative span{
  animation: pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ transform: scale(.9); opacity:.7 }
  70%{ transform: scale(1.3); opacity:0 }
  100%{ transform: scale(.9); opacity:0 }
}

/* Avatar hover */
.navbar .rounded-circle{
  transition: .2s ease;
}
.navbar .rounded-circle:hover{
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}





/* Cards: frosted look */
.glass, .card.glass, .card.kpi{
  background: var(--c-card);
  border: 1px solid var(--c-border) !important;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15,23,42,.04);
}

/* KPI cards */
.kpi{
  border: 0;
  border-radius: 20px;
  overflow: hidden;
}
.kpi .card-body{ padding: 18px; }
.kpi .kpi-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.kpi-blue .kpi-icon{ background: var(--c-primary); }
.kpi-purple .kpi-icon{ background: var(--c-purple); }
.kpi-green .kpi-icon{ background: var(--c-green); }
.kpi-pink .kpi-icon{ background: var(--c-pink); }

/* Credit card */
.gradient-blue{
  background: linear-gradient(135deg, var(--c-primary), #2d68ff);
}

/* Avatar stack */
.avatar-stack{ display:flex; }
.avatar-stack img{
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--c-card); margin-right:-8px;
}

/* List tiles */
.list-tile{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; border:1px solid var(--c-border);
  border-radius:12px; background: var(--c-card); margin-bottom:10px;
}
.tile-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-right:10px; font-size:1.1rem;
}
.tile-content{ flex: 1; }
.tile-title{ font-weight:600; }
.tile-sub{ color: var(--c-muted); }
.tile-cta{ font-weight:500; }

/* Tables */
.table{
  --bs-table-bg: var(--c-card);
  --bs-table-color: var(--c-text);
  --bs-table-striped-color: var(--c-text);
  --bs-table-hover-color: var(--c-text);
  --bs-table-border-color: var(--c-border);
}

/* Inputs */
.input-group .form-control{
  background: transparent;
  border-color: var(--c-border);
}

/* Alerts */
.alert{
  border:1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
}

/* Footer */
footer{ color: var(--c-muted); }

/* Small tweaks */
@media (max-width: 575.98px){
  .kpi .card-body{ padding:16px; }
}
/* === Grid icon (2×2 hollow circles) === */
.icon-grid{
  display:inline-grid;
  grid-template-columns: repeat(2, 12px);
  grid-template-rows: repeat(2, 12px);
  gap: 6px;
  align-items:center;
  justify-items:center;
}

.icon-grid .dot{
  width:12px; height:12px;
  border-radius:50%;
  border: 2px solid var(--c-muted);     /* outline color */
  box-sizing:border-box;
  background: transparent;
  transition: border-color .2s ease, transform .2s ease;
}

/* Button hover: subtle emphasis */
.grid-toggle:hover .dot{
  border-color: var(--c-text);
}

/* Active/open state pulse (optional) */
.sidebar-drawer.show ~ .navbar .grid-toggle .dot{
  border-color: var(--c-primary);
  transform: scale(1.05);
}

/* Dark theme tune */
[data-bs-theme="dark"] .icon-grid .dot{
  border-color: #93a1b5;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

body {
  padding-bottom: 60px; /* adjust based on footer height */
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  padding: 10px 0;
  z-index: 999;
}

/* ===== Breadcrumb soft card ===== */
.breadcrumb-wrap{
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.breadcrumb{
  --bc-muted: var(--c-muted);
  --bc-text: var(--c-text);
  --bc-pill-bg: var(--c-primary-soft);
  --bc-pill-text: var(--c-primary);
  gap: 10px;
}

.breadcrumb .breadcrumb-item a{
  color: var(--bc-muted);
  text-decoration: none;
}

.breadcrumb .breadcrumb-item a:hover{
  color: var(--bc-text);
}

/* The slash separator (to look like your screenshot) */
.breadcrumb-sep{
  color: var(--bc-muted);
  user-select: none;
  margin: 0 .25rem;
}

/* Active crumb as a pill */
.crumb-pill{
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--bc-pill-bg);
  color: var(--bc-pill-text);
  font-weight: 600;
  line-height: 1;
}

/* Dark theme tuning */
[data-bs-theme="dark"] .breadcrumb-wrap{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


/* ================= BUTTON ================= */
.btn-primary {
  background: linear-gradient(135deg, #1e194a, #0f0b2f) !important;
  border: none !important;
  height: 50px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}

/* Shine animation */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: 0.6s;
}

.btn-primary:hover::after {
  left: 120%;
}

/* Hover lift */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(30, 25, 74, 0.45);
}

/* Active click */
.btn-primary:active {
  transform: scale(0.98);
}



/* Base item setup */
.sidebar-drawer .list-group-item {
  position: relative; /* required for shine */
  overflow: hidden;   /* hide shine overflow */
  transition: all 0.25s ease;
  will-change: transform;
}

/* ========================
   Shine animation
======================== */
.sidebar-drawer .list-group-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  pointer-events: none;
  transition: left 0.6s ease;
}

.sidebar-drawer .list-group-item:hover::after {
  left: 120%;
}

/* ========================
   Hover lift effect
======================== */
.sidebar-drawer .list-group-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 25, 74, 0.35);
}

/* ========================
   Active click effect
======================== */
.sidebar-drawer .list-group-item:active {
  transform: scale(0.96);
}

/* Optional: active state class */
.sidebar-drawer .list-group-item.active {
  background: linear-gradient(135deg, #0f0b2f, #0f0b2f);
  color: #fff;
}



/* ================= BUTTON ================= */
.btn-orange {
  background: linear-gradient(135deg, #f3740b, #f3740b) !important;
  border: none !important;
    height: 24px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
    transition: 0.25s ease;
    padding: 0px;
    width: 100px;
}

/* Shine animation */
.btn-orange::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: 0.6s;
}

.btn-orange:hover::after {
  left: 120%;
}

/* Hover lift */
.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(148, 89, 5, 0.45);
}

/* Active click */
.btn-orange:active {
  transform: scale(0.98);
}