/* ==========================================================================
   modern.css — "AURORA" bold redesign for Digital HR / Patjeda  (v4)
   Complete visual overhaul: dark gradient chrome, gradient-mesh canvas,
   glass surfaces, vivid gradient stat tiles. No markup/JS/route changes.
   ========================================================================== */

:root{
  --a-violet:#7c3aed; --a-indigo:#4f46e5; --a-cyan:#06b6d4; --a-pink:#ec4899;
  --a-amber:#f59e0b; --a-emerald:#10b981; --a-rose:#f43f5e;
  --ink:#0e1130; --ink-soft:#4a4f6b;
  --side-1:#170f3d; --side-2:#2b1a68; --side-3:#4c1d95;
  --m-radius:18px; --m-radius-sm:12px;
  --m-line: rgba(255,255,255,.55);
  --m-line-dark: rgba(23,15,61,.10);
  --m-shadow: 0 10px 30px rgba(38,28,90,.10);
  --m-shadow-lg: 0 26px 60px rgba(38,28,90,.20);
  --m-grad: linear-gradient(135deg, var(--primary-color,#7c3aed), var(--dark-primary-color,#4f46e5));
  --m-grad-hot: linear-gradient(135deg,#8b5cf6,#d946ef);
}

/* ---------- canvas ---------- */
html,body{ min-height:100%; }
body{
  background:
    radial-gradient(1100px 700px at 8% -5%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(1000px 700px at 100% 0%, rgba(6,182,212,.14), transparent 50%),
    radial-gradient(900px 700px at 50% 120%, rgba(236,72,153,.12), transparent 55%),
    linear-gradient(165deg,#f7f5ff 0%,#eef2ff 45%,#fdf4ff 100%) !important;
  background-attachment: fixed !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{ letter-spacing:-.02em; }
a{ text-decoration:none; }
.text-muted{ color:var(--ink-soft) !important; }
hr{ border-color:var(--m-line-dark); opacity:1; }

/* ================= SIDEBAR — dark aurora ================= */
.sidebar{
  background: linear-gradient(180deg,var(--side-1),var(--side-2) 48%,var(--side-3)) !important;
  border-right:0 !important;
  box-shadow: 10px 0 44px rgba(23,15,61,.30) !important;
}
.sidebar .sidebar-header{ border-bottom:1px solid rgba(255,255,255,.09) !important; background: transparent !important; padding:0 18px !important; gap:14px !important; }
.sidebar .sidebar-brand{ color:#fff !important; font-weight:800; letter-spacing:-.02em; flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.sidebar .sidebar-brand img{ filter:none !important; background:#fff; padding:7px 12px; border-radius:12px; max-height:48px; width:auto; max-width:100%; object-fit:contain; box-shadow:0 8px 18px rgba(0,0,0,.28); }
.sidebar .sidebar-header, .sidebar .sidebar-brand{ background: transparent !important; }
.sidebar .sidebar-toggler span{ background: rgba(255,255,255,.75) !important; }
.sidebar-body{ padding:10px 10px 22px !important; overflow-y:auto; }
.sidebar .sidebar-body, .sidebar .sidebar-menu, .sidebar .sidebar-body .ps__rail-y, .sidebar .ps{ background: transparent !important; }
/* always-visible scroll affordance on the dark sidebar (rail was invisible until hover) */
.sidebar-body .ps__rail-y{ opacity:.9 !important; background:transparent !important; }
.sidebar-body .ps__thumb-y{ background:rgba(255,255,255,.34) !important; border-radius:999px !important; width:6px !important; }
.sidebar-body .ps__rail-y:hover .ps__thumb-y, .sidebar-body.ps--scrolling-y .ps__thumb-y{ background:rgba(255,255,255,.65) !important; }
.sidebar-menu .nav-item{ margin:3px 6px; }
.sidebar-menu .nav-link{
  color: rgba(255,255,255,.86) !important; border-radius:12px !important; font-weight:600;
  font-size:.845rem; padding:.66rem .82rem; gap:.62rem; transition: background .16s, color .16s, transform .16s;
}
.sidebar-menu .nav-link .link-icon{ color: rgba(255,255,255,.5) !important; width:18px;height:18px; }
.sidebar-menu .nav-link .link-arrow{ opacity:.4 !important; }
.sidebar-menu .nav-link:hover{ background: rgba(255,255,255,.10) !important; color:#fff !important; transform: translateX(2px); }
.sidebar-menu .nav-link:hover .link-icon{ color:#fff !important; }
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-item.active > .nav-link{
  background: linear-gradient(135deg,#8b5cf6,#d946ef) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.sidebar-menu .nav-link.active .link-icon, .sidebar-menu .nav-link.active .link-title, .sidebar-menu .nav-link.active .link-arrow,
.sidebar-menu .nav-item.active > .nav-link .link-icon, .sidebar-menu .nav-item.active > .nav-link .link-title, .sidebar-menu .nav-item.active > .nav-link .link-arrow{ color:#fff !important; }
.sidebar-menu .sub-menu .nav-link{ padding-left:2.35rem; font-weight:500; }
.sidebar-menu .nav-item.active .sub-menu .nav-link{ background:transparent !important; color:rgba(255,255,255,.72) !important; box-shadow:none !important; }
.sidebar-menu .nav-item.active .sub-menu .nav-link .link-title{ color:rgba(255,255,255,.72) !important; }
.sidebar-menu .nav-item.active .sub-menu .nav-link.active{ background: rgba(255,255,255,.17) !important; color:#fff !important; }
.sidebar-menu .nav-item.active .sub-menu .nav-link.active .link-title{ color:#fff !important; }
.sidebar-menu .menu-title,.sidebar-menu .nav-link-header{ color:rgba(255,255,255,.34) !important; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; font-weight:700; padding:1rem 1rem .35rem; }

/* ================= NAVBAR — dark aurora ================= */
.navbar{
  background: linear-gradient(90deg,var(--side-1),var(--side-2) 70%,var(--side-3)) !important;
  border-bottom:0 !important;
  box-shadow: 0 8px 30px rgba(23,15,61,.28) !important;
}
.navbar .nav-link, .navbar .sidebar-toggler i, .navbar .navbar-toggler i, .navbar .navbar-brand{ color: rgba(255,255,255,.88) !important; }
.navbar .nav-link:hover{ background: rgba(255,255,255,.12) !important; color:#fff !important; }
.navbar svg, .navbar i, .navbar [data-feather], .navbar .nav-link svg, .navbar .nav-link i{ color: rgba(255,255,255,.88) !important; stroke: currentColor; }
.navbar .navbar-brand, .navbar .navbar-content, .navbar .navbar-content *{ }
.navbar .search-form .form-control{ background: rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff !important; }
.navbar .search-form .form-control::placeholder{ color: rgba(255,255,255,.6) !important; }
.navbar .search-form .input-group-text{ background: rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.72) !important; }
.navbar .dropdown-menu{ border-radius:14px; }
.navbar img.rounded-circle, .navbar .navbar-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,.65),0 0 0 4px rgba(255,255,255,.15); }

/* ================= CONTENT ================= */
.page-content{ padding:1.5rem; }
.content-wrapper, .page-content, .main-wrapper, .page-wrapper, .body-content, .content{ background: transparent !important; }
.card{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow) !important;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--m-shadow-lg) !important; }
.card .card-title{ font-weight:800; color:var(--ink); }
.card .card-header{ background:transparent; border-bottom:1px solid var(--m-line-dark); font-weight:700; }

/* ---- vivid gradient STAT TILES (dashboard only): card with a big icon ---- */
.card.w-100:has(.dash-icon), .icon-widgets .card, .card:has(.dash-icon){ border:0 !important; color:#fff !important; }
.card.w-100:has(.dash-icon) :is(h1,h2,h3,h4,h5,h6,p,span,div,small,label,.card-title), .card:has(.dash-icon) :is(h1,h2,h3,h4,h5,h6,p,span,small,label,.card-title){ color:#fff !important; }
.card.w-100:has(.dash-icon) .text-muted, .card:has(.dash-icon) .text-muted{ color: rgba(255,255,255,.82) !important; }
.row > [class*="col-"]:nth-child(6n+1) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+1) .card:has(.dash-icon){ background: linear-gradient(135deg,#7c3aed,#a855f7) !important; }
.row > [class*="col-"]:nth-child(6n+2) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+2) .card:has(.dash-icon){ background: linear-gradient(135deg,#2563eb,#06b6d4) !important; }
.row > [class*="col-"]:nth-child(6n+3) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+3) .card:has(.dash-icon){ background: linear-gradient(135deg,#db2777,#f472b6) !important; }
.row > [class*="col-"]:nth-child(6n+4) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+4) .card:has(.dash-icon){ background: linear-gradient(135deg,#ea580c,#f59e0b) !important; }
.row > [class*="col-"]:nth-child(6n+5) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+5) .card:has(.dash-icon){ background: linear-gradient(135deg,#059669,#34d399) !important; }
.row > [class*="col-"]:nth-child(6n+6) .card.w-100:has(.dash-icon), .row > [class*="col-"]:nth-child(6n+6) .card:has(.dash-icon){ background: linear-gradient(135deg,#0e7490,#22d3ee) !important; }
.card:has(.dash-icon) .card-body{ position:relative; z-index:1; }

/* ================= BUTTONS ================= */
.btn{ border-radius:11px; font-weight:600; padding:.5rem .95rem; transition: transform .12s, box-shadow .16s, filter .16s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background: var(--m-grad-hot) !important; border:0 !important; color:#fff !important; box-shadow:0 10px 22px rgba(168,85,247,.35); }
.btn-primary:hover{ filter:brightness(1.05); box-shadow:0 14px 30px rgba(168,85,247,.45); }
.btn-outline-primary{ color:var(--a-violet) !important; border-color: rgba(124,58,237,.5) !important; }
.btn-outline-primary:hover{ background: var(--m-grad-hot) !important; color:#fff !important; border-color:transparent !important; }
.btn-success{ background:linear-gradient(135deg,#059669,#10b981) !important; border:0 !important; }
.btn-danger{ background:linear-gradient(135deg,#dc2626,#f43f5e) !important; border:0 !important; }
.btn-light{ background:#f3f0ff; border-color:var(--m-line-dark); color:var(--ink-soft); }
.btn-sm{ border-radius:9px; padding:.35rem .7rem; }

/* ================= FORMS ================= */
.form-control,.form-select{ border-radius:var(--m-radius-sm) !important; border:1px solid rgba(23,15,61,.14) !important; padding:.6rem .85rem; background:#fff; }
.form-control:focus,.form-select:focus{ border-color:var(--a-violet) !important; box-shadow:0 0 0 4px rgba(124,58,237,.16) !important; }
.form-label{ font-weight:600; color:#2a2a4a; font-size:.82rem; }
.input-group-text{ border-radius:var(--m-radius-sm); border-color:rgba(23,15,61,.14); background:#f7f5ff; color:var(--ink-soft); }

/* ================= TABLES ================= */
.table > :not(caption) > * > *{ padding:.82rem .9rem; }
.table thead th{ text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; font-weight:700; color:#6b5b95; background:#f6f3ff !important; border-bottom:1px solid var(--m-line-dark) !important; white-space:nowrap; }
.table tbody tr{ transition:background .14s; }
.table tbody tr:hover{ background:#faf8ff !important; }
.table td{ border-color: var(--m-line-dark) !important; vertical-align:middle; }

/* ================= MISC ================= */
.badge{ border-radius:999px !important; font-weight:600; }
.bg-primary{ background: var(--m-grad-hot) !important; }
.pagination{ gap:.25rem; } .pagination .page-link{ border:0 !important; border-radius:9px !important; color:var(--ink-soft); font-weight:600; }
.pagination .page-item.active .page-link{ background: var(--m-grad-hot) !important; color:#fff; box-shadow:0 8px 18px rgba(168,85,247,.35); }
.dropdown-menu{ border-radius:14px; border:1px solid rgba(23,15,61,.08); box-shadow:var(--m-shadow-lg); }
.modal-content{ border:0 !important; border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow-lg) !important; }
.modal-header,.modal-footer{ border-color:var(--m-line-dark); }
.nav-tabs .nav-link{ border:0; border-bottom:2px solid transparent; color:var(--ink-soft); font-weight:600; }
.nav-tabs .nav-link.active{ color:var(--a-violet); border-bottom-color:var(--a-violet); }
.alert{ border:0; border-radius:var(--m-radius-sm); box-shadow:var(--m-shadow); }
.progress{ border-radius:999px; background:#efeaff; } .progress-bar{ background: var(--m-grad-hot); }
.text-primary{ color: var(--a-violet) !important; }
::-webkit-scrollbar{ width:10px;height:10px; } ::-webkit-scrollbar-thumb{ background:#cfc6ec; border-radius:999px; border:2px solid transparent; background-clip:content-box; }

/* ================= role indicator pill ================= */
.role-pill{ display:inline-flex; align-items:center; gap:6px; padding:.34rem .72rem; border-radius:999px; font-weight:800; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.role-pill svg{ flex:0 0 auto; }
.role-pill.role-admin{ color:#fff; background:linear-gradient(135deg,#f43f5e,#f59e0b); box-shadow:0 6px 16px rgba(244,63,94,.35); }
.role-pill.role-staff{ color:#fff; background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 6px 16px rgba(37,99,235,.35); }

/* ==========================================================================
   STAFF THEME — distinct "Aqua / Teal" identity (vs the violet Admin Aurora)
   Scoped to body.role-staff, so the Staff dashboard + chrome is clearly
   different from the Admin one at a glance.
   ========================================================================== */
body.role-staff{
  background:
    radial-gradient(1100px 700px at 8% -5%, rgba(8,145,178,.16), transparent 55%),
    radial-gradient(1000px 700px at 100% 0%, rgba(16,185,129,.14), transparent 50%),
    radial-gradient(900px 700px at 50% 120%, rgba(6,182,212,.12), transparent 55%),
    linear-gradient(165deg,#f1fbfc 0%,#eefcf7 45%,#effbff 100%) !important;
  background-attachment: fixed !important;
}
body.role-staff .sidebar{
  background: linear-gradient(180deg,#06313b,#08475c 48%,#0e7490) !important;
  box-shadow: 10px 0 44px rgba(6,49,59,.34) !important;
}
body.role-staff .navbar{
  background: linear-gradient(90deg,#06313b,#08475c 70%,#0e7490) !important;
  box-shadow: 0 8px 30px rgba(6,49,59,.30) !important;
}
body.role-staff .sidebar-menu .nav-link.active,
body.role-staff .sidebar-menu .nav-item.active > .nav-link{
  background: linear-gradient(135deg,#06b6d4,#10b981) !important;
  box-shadow: 0 12px 26px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.role-staff .btn-primary{ background: linear-gradient(135deg,#0891b2,#10b981) !important; box-shadow:0 10px 22px rgba(16,185,129,.32); }
body.role-staff .bg-primary{ background: linear-gradient(135deg,#0891b2,#10b981) !important; }
body.role-staff .pagination .page-item.active .page-link{ background: linear-gradient(135deg,#0891b2,#10b981) !important; box-shadow:0 8px 18px rgba(16,185,129,.32); }
body.role-staff .progress-bar{ background: linear-gradient(135deg,#0891b2,#10b981); }
body.role-staff .text-primary{ color:#0e7490 !important; }
body.role-staff .nav-tabs .nav-link.active{ color:#0e7490; border-bottom-color:#0e7490; }
body.role-staff .form-control:focus, body.role-staff .form-select:focus{ border-color:#0891b2 !important; box-shadow:0 0 0 4px rgba(8,145,178,.16) !important; }
body.role-staff .table thead th{ color:#0b6b74; background:#eefbfa !important; }
body.role-staff .table tbody tr:hover{ background:#f2fbfb !important; }

/* staff stat tiles — teal/aqua family */
body.role-staff .row > [class*="col-"]:nth-child(6n+1) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+1) .card:has(.dash-icon){ background: linear-gradient(135deg,#0e7490,#22d3ee) !important; }
body.role-staff .row > [class*="col-"]:nth-child(6n+2) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+2) .card:has(.dash-icon){ background: linear-gradient(135deg,#0f766e,#2dd4bf) !important; }
body.role-staff .row > [class*="col-"]:nth-child(6n+3) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+3) .card:has(.dash-icon){ background: linear-gradient(135deg,#0284c7,#38bdf8) !important; }
body.role-staff .row > [class*="col-"]:nth-child(6n+4) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+4) .card:has(.dash-icon){ background: linear-gradient(135deg,#059669,#34d399) !important; }
body.role-staff .row > [class*="col-"]:nth-child(6n+5) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+5) .card:has(.dash-icon){ background: linear-gradient(135deg,#0d9488,#5eead4) !important; }
body.role-staff .row > [class*="col-"]:nth-child(6n+6) .card.w-100:has(.dash-icon), body.role-staff .row > [class*="col-"]:nth-child(6n+6) .card:has(.dash-icon){ background: linear-gradient(135deg,#0369a1,#06b6d4) !important; }

/* ==========================================================================
   INNER PAGES — refined app look. Role-aware via --m-accent* vars
   (violet for admin, teal for staff).
   ========================================================================== */
:root{
  --m-accent:#7c3aed; --m-accent-2:#d946ef; --m-accent-ink:#6b5b95;
  --m-accent-soft:#f5f2ff; --m-accent-line:rgba(124,58,237,.18);
}
body.role-staff{
  --m-accent:#0891b2; --m-accent-2:#10b981; --m-accent-ink:#0b6b74;
  --m-accent-soft:#effbfb; --m-accent-line:rgba(8,145,178,.18);
}

/* --- page header + breadcrumb --- */
.page-content{ padding:1.5rem 1.6rem 2.4rem !important; }
.grid-margin{ margin-bottom:.9rem !important; }
.page-content h4{ font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0; }
.breadcrumb{ margin:0 0 .85rem !important; background:transparent !important; padding:0 !important; }
.breadcrumb-item{ font-size:.78rem; font-weight:600; color:#948eb5 !important; }
.breadcrumb-item a{ color:#948eb5 !important; }
.breadcrumb-item a:hover{ color:var(--m-accent) !important; }
.breadcrumb-item.active{ color:var(--m-accent) !important; }
.breadcrumb-item + .breadcrumb-item::before{ color:#c3bdd8; }

/* --- content cards --- */
.content .card{ border-radius:16px !important; }
.content .card > .card-header{ padding:.9rem 1.15rem; border-bottom:1px solid var(--m-line-dark); }
.content .card > .card-header .card-title{ font-size:.78rem !important; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--m-accent-ink); margin:0; }
.content .card-body{ padding:1.15rem; }

/* --- filter toolbars: compact, tiny uppercase labels --- */
.content form.forms-sample .form-label{ font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9c96ba !important; margin-bottom:.32rem; }
.content form.forms-sample .form-control,
.content form.forms-sample .form-select{ padding:.5rem .72rem; font-size:.85rem; border-radius:10px; }
.content form.forms-sample .row{ --bs-gutter-x:1rem; }
.content form.forms-sample .mb-4,
.content form.forms-sample .mb-3{ margin-bottom:.8rem !important; }

/* --- tables --- */
.table{ margin-bottom:0; }
.table thead th{ background:var(--m-accent-soft) !important; color:var(--m-accent-ink) !important; font-size:.68rem; letter-spacing:.06em; font-weight:800; text-transform:uppercase; border-bottom:1px solid var(--m-accent-line) !important; padding:.7rem .72rem; }
.table tbody td{ padding:.66rem .72rem; font-size:.85rem; border-color:rgba(23,15,61,.07) !important; color:#33384f; }
.table tbody tr{ transition:background .12s; }
.table tbody tr:hover{ background:var(--m-accent-soft) !important; }
.table-responsive{ border-radius:14px; }

/* --- soft badges --- */
.badge{ font-weight:700; padding:.34rem .62rem; }
.badge.bg-success,.badge.text-bg-success{ background:rgba(16,185,129,.15) !important; color:#0b7a58 !important; }
.badge.bg-danger,.badge.text-bg-danger{ background:rgba(244,63,94,.15) !important; color:#c11d43 !important; }
.badge.bg-warning,.badge.text-bg-warning{ background:rgba(245,158,11,.17) !important; color:#a16207 !important; }
.badge.bg-primary,.badge.text-bg-primary{ background:rgba(124,58,237,.14) !important; color:var(--m-accent) !important; }
.badge.bg-info,.badge.text-bg-info{ background:rgba(6,182,212,.15) !important; color:#0e7490 !important; }
.badge.bg-secondary,.badge.text-bg-secondary{ background:rgba(100,116,139,.15) !important; color:#475569 !important; }

/* --- pagination + dropdowns --- */
.pagination .page-link{ font-size:.82rem; padding:.4rem .7rem; }
.pagination .page-item.active .page-link{ background:var(--m-accent) !important; box-shadow:0 8px 18px var(--m-accent-line); }
.pagination .page-link:hover{ color:var(--m-accent); }
.dropdown-menu{ padding:.4rem; }
.dropdown-item{ border-radius:9px; font-size:.85rem; padding:.5rem .7rem; }
.dropdown-item:hover{ background:var(--m-accent-soft); color:var(--m-accent); }
.dropdown-item:active{ background:var(--m-accent); }

/* --- select2 (filters) --- */
.select2-container--default .select2-selection--single{ padding:.15rem 0; border:1px solid rgba(23,15,61,.14); border-radius:10px; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.9; color:#33384f; font-size:.85rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; }

/* --- compact filter layout: more fields per row + tighter spacing --- */
@media (min-width:992px){
  .content form.forms-sample .col-md-6,
  .content form.forms-sample .col-md-4,
  .content form.forms-sample .col-xl-3,
  .content form.forms-sample .col-xl-4,
  .content form.forms-sample .col-xxl-3,
  .content form.forms-sample .col-xxl-4{ flex:0 0 25%; max-width:25%; }
}
.content form.forms-sample .form-label{ margin-bottom:.22rem; }
.content form.forms-sample .mb-4,
.content form.forms-sample .mb-3,
.content form.forms-sample .mb-2{ margin-bottom:.6rem !important; }
.content form.forms-sample .form-control,
.content form.forms-sample .form-select{ padding:.44rem .68rem; }
.content .card > .card-header{ padding:.78rem 1.15rem; }
.content .card-body{ padding:1rem 1.15rem; }

/* --- contrast bump (breadcrumb + filter labels) --- */
.breadcrumb-item, .breadcrumb-item a{ color:#6f6a8f !important; }
.breadcrumb-item.active{ color:var(--m-accent) !important; }
.content form.forms-sample .form-label{ color:#7b769c !important; }