/* =====================================================================
   Safari Admin — brand theme layer (loaded AFTER adminlte.min.css)
   Orange + teal, light sidebar, modern cards. Overrides AdminLTE 3 /
   Bootstrap 4 shared components so every page is restyled at once.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand */
  --brand:#F7931E;          /* Safari orange */
  --brand-dark:#E07C0E;
  --brand-darker:#C96B06;
  --brand-tint:#FFF3E2;
  --brand-tint-2:#FCE9CF;

  --teal:#14B8A6;           /* accent teal */
  --teal-dark:#0E9C8C;
  --teal-tint:#E4F8F5;

  --emerald:#12B886;
  --emerald-tint:#E4F7F0;

  /* Status */
  --success:#12B886;
  --success-tint:#E4F7F0;
  --warning:#F5A623;
  --warning-tint:#FDF1DC;
  --danger:#EF4655;
  --danger-tint:#FDE7E9;
  --info:#14B8A6;
  --info-tint:#E4F8F5;

  /* Neutrals */
  --bg:#F4F6FA;             /* app canvas */
  --surface:#FFFFFF;
  --ink:#1E293B;
  --ink-soft:#334155;
  --muted:#64748B;
  --muted-2:#94A3B8;
  --border:#E8ECF2;
  --border-strong:#DCE2EA;

  --radius:14px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow:0 2px 8px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.10);

  --sidebar-w:240px;

  /* AdminLTE hooks */
  --primary:var(--brand);
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body,
.wrapper{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  letter-spacing:.1px;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  font-weight:600;
}

a{ color:var(--brand-dark); }
a:hover{ color:var(--brand-darker); }

.text-muted{ color:var(--muted)!important; }
.fw-bold{ font-weight:700!important; }
.fw-semibold{ font-weight:600!important; }
.text-gray-800{ color:var(--ink)!important; }
.text-gray-400,.text-gray-500{ color:var(--muted)!important; }

/* ===================== Layout canvas ===================== */
.content-wrapper{ background:var(--bg); }
.wrapper{ background:var(--bg); }

/* ================================================================
   SIDEBAR  (light / white)
   ================================================================ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary{
  background:var(--surface)!important;
  border-right:1px solid var(--border);
  box-shadow:none!important;   /* drop AdminLTE elevation-4; the 1px border is enough */
}
.content-wrapper{ box-shadow:none!important; }
/* Force the EXPANDED width + matching content margin (scoped so it doesn't break the
   collapsed/minimized state, which AdminLTE sizes itself). !important beats AdminLTE's
   own .sidebar-mini rules that otherwise left a ~10px gap next to the 240px sidebar. */
body:not(.sidebar-collapse) .main-sidebar{ width:var(--sidebar-w)!important; }
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-header,
body:not(.sidebar-collapse) .main-footer{ margin-left:var(--sidebar-w)!important; }

.brand-link{
  border-bottom:1px solid var(--border)!important;
  padding:.7rem 1rem; min-height:62px;   /* match the topbar height so the divider lines align */
  display:flex; align-items:center; gap:.55rem;
}
.brand-link .brand-image{
  float:none; margin:0; max-height:34px; opacity:1!important;
  box-shadow:none!important; border:0;
}
.brand-link .brand-text,
.brand-link span{
  color:var(--ink)!important;
  font-family:'Inter',sans-serif; font-weight:700; font-size:1.1rem;
  letter-spacing:.2px;
}

/* user panel */
.main-sidebar .user-panel{
  border-bottom:1px solid var(--border)!important;
  padding:.85rem 1rem!important; margin:.5rem .75rem 0!important;
  background:var(--bg); border-radius:var(--radius-sm);
}
.main-sidebar .user-panel .image img{ width:40px; height:40px; object-fit:cover; }
.main-sidebar .user-panel .info a{ color:var(--ink)!important; font-weight:600; }

/* nav items */
.nav-sidebar{ padding:.3rem .5rem; }
.nav-sidebar .nav-item{ margin-bottom:1px; }
.nav-sidebar .nav-link{
  color:var(--ink-soft)!important;
  border-radius:var(--radius-sm);
  padding:.46rem .7rem;
  font-weight:500; font-size:.86rem;
  transition:background .15s ease,color .15s ease;
}
.nav-sidebar .nav-link p{ font-weight:500; }
.nav-sidebar .nav-link .nav-icon{
  color:var(--muted-2)!important; font-size:1rem; width:1.5rem;
  transition:color .15s ease;
}
.nav-sidebar > .nav-item > .nav-link:hover{
  background:var(--bg)!important; color:var(--ink)!important;
}
.nav-sidebar > .nav-item > .nav-link:hover .nav-icon{ color:var(--brand)!important; }

/* active + open */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active{
  background:var(--brand-tint)!important;
  color:var(--brand-darker)!important;
  box-shadow:none!important;
  font-weight:600;
}
.nav-sidebar .nav-link.active .nav-icon{ color:var(--brand)!important; }
.nav-sidebar .nav-link.active{ position:relative; }
.nav-sidebar .nav-link.active::before{
  content:""; position:absolute; left:-.6rem; top:22%; bottom:22%;
  width:3px; border-radius:0 3px 3px 0; background:var(--brand);
}

/* treeview (submenus) */
.nav-treeview{ padding-left:.35rem; }
.nav-treeview .nav-link{
  color:var(--muted)!important; font-size:.82rem; padding:.38rem .7rem .38rem 2.15rem;
}
.nav-treeview .nav-link .nav-icon{ font-size:.45rem; }
.nav-treeview .nav-link:hover{ background:var(--bg)!important; color:var(--ink)!important; }
.nav-treeview .nav-link.active{ background:transparent!important; color:var(--brand-darker)!important; }
.nav-treeview .nav-link.active::before{ display:none; }
/* expand caret — clear chevron in a hover chip, rotates open */
.nav-sidebar .nav-link > p > .right{
  position:absolute; right:.6rem; top:50%;
  width:22px; height:22px; line-height:22px; text-align:center; border-radius:7px;
  font-size:.74rem; color:var(--muted-2);
  transform:translateY(-50%) rotate(0deg);
  transition:transform .22s ease, color .2s ease, background .2s ease;
}
.nav-sidebar .nav-link:hover > p > .right{ background:var(--brand-tint); color:var(--brand); }
.nav-sidebar .nav-link.active > p > .right{ color:var(--brand); }
.nav-sidebar .menu-open > .nav-link > p > .right{
  transform:translateY(-50%) rotate(-90deg); color:var(--brand);
}

/* group label injected via aside markup */
.nav-section{
  color:var(--muted-2); font-size:.64rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:.7rem .8rem .25rem; margin-top:.1rem;
}

/* collapsed / minimized mode: hide section labels entirely (no reserved gap),
   center the icons, and hide the sidebar footer button row */
.sidebar-collapse .nav-section{ display:none!important; }
.sidebar-collapse .brand-link span{ display:none; }
.sidebar-collapse .nav-sidebar .nav-link{ text-align:center; }
.sidebar-collapse .nav-sidebar .nav-link.active::before{ display:none; }
.sidebar-collapse .sidebar-custom{ display:none; }

.sidebar-custom{ border-top:1px solid var(--border); }
.sidebar-custom .btn-link{ color:var(--muted)!important; }
.sidebar-custom .btn-secondary{
  background:var(--brand-tint); color:var(--brand-darker); border:0; font-weight:600;
}

/* ================================================================
   TOP NAVBAR (white)
   ================================================================ */
.main-header.navbar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm);
  min-height:62px; padding:0 1rem;
}
.main-header .nav-link{ color:var(--ink-soft)!important; font-weight:500; }
.main-header .nav-link:hover{ color:var(--brand)!important; }
.main-header [data-widget="pushmenu"]{
  color:var(--muted)!important; font-size:1.05rem;
}
.topbar-search{
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:.4rem .95rem; min-width:230px;
  color:var(--muted);
}
.topbar-search input{
  border:0; background:transparent; outline:none; width:100%; font-size:.86rem; color:var(--ink);
}
.topbar-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.35rem .35rem .35rem .85rem; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:600;
}
.topbar-chip img,.topbar-chip .avatar{
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  background:var(--brand-tint); color:var(--brand-darker);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}

/* ================================================================
   PAGE HEADER / breadcrumb
   ================================================================ */
.content-header{ padding:1.4rem 1.5rem .4rem; }
.content-header h1{ font-size:1.4rem; font-weight:700; }
.content-header .breadcrumb{
  background:transparent; padding:0; margin:0; font-size:.82rem;
}
.breadcrumb-item a{ color:var(--muted); }
.breadcrumb-item.active{ color:var(--ink); }
.content{ padding:.5rem 1.5rem 1.5rem; }

/* Reusable page-title band (new component used by revamped pages) */
.page-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin:1.4rem 0 1.1rem;
}
.page-head .title h1{ font-size:1.4rem; font-weight:700; margin:0; }
.page-head .title p{ color:var(--muted); margin:.15rem 0 0; font-size:.86rem; }

/* ================================================================
   CARDS
   ================================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin-bottom:1.25rem;
}
.card.card-outline{ border-top:1px solid var(--border); }
.card.card-primary.card-outline{ border-top:3px solid var(--brand); }
.card.card-success.card-outline{ border-top:3px solid var(--success); }
.card.card-info.card-outline{ border-top:3px solid var(--teal); }
.card.card-warning.card-outline{ border-top:3px solid var(--warning); }
.card.card-danger.card-outline{ border-top:3px solid var(--danger); }

/* solid header cards */
.card-primary:not(.card-outline) > .card-header{ background:var(--brand); }
.card-success:not(.card-outline) > .card-header{ background:var(--success); }
.card-info:not(.card-outline) > .card-header{ background:var(--teal); }

.card-header{
  background:transparent;
  border-bottom:1px solid var(--border);
  padding:1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:auto;
}
.card-header .card-title,
.card-title{
  font-family:'Inter',sans-serif; font-weight:600; font-size:1rem;
  color:var(--ink); margin:0; float:none;
}
.card-body{ padding:1.25rem; }
.card-tools{ float:none; margin:0; }
.card-footer{ background:transparent; border-top:1px solid var(--border); }

/* ================================================================
   STAT TILES (.small-box) -> modern white cards w/ colored accent
   ================================================================ */
.small-box{
  position:relative; overflow:hidden;
  background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.4rem 1.4rem 0;
  margin-bottom:1.25rem;
  display:flex; flex-wrap:wrap; align-items:flex-start;   /* inner | icon | footer(full width) */
}
/* value + label block */
.small-box > .inner{ padding:0; order:1; flex:1 1 auto; min-width:0; }
.small-box h3{
  color:var(--ink)!important; font-family:'Inter',sans-serif;
  font-weight:700; font-size:1.85rem; line-height:1.1; margin:0 0 .25rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.small-box p{ color:var(--muted)!important; font-weight:500; font-size:.88rem; margin:0; }
/* icon chip — flex item pinned top-right, always aligned with the value */
.small-box .icon{
  order:2; position:static!important; margin:0 0 0 auto; top:auto; right:auto; left:auto;
  width:54px; height:54px; border-radius:14px; flex:0 0 54px;
  display:flex!important; align-items:center; justify-content:center;
  animation:none!important; transition:none;
}
.small-box .icon > i,
.small-box .icon > .ion,
.small-box .icon > .fa,
.small-box .icon > .fas{ font-size:1.45rem!important; top:auto!important; margin:0; position:static!important; }
.small-box:hover{ transform:translateY(-2px); box-shadow:var(--shadow); transition:.18s ease; }
.small-box:hover .icon{ transform:none; }
/* footer link — full width across the bottom, edge-to-edge */
.small-box .small-box-footer{
  order:3; flex:0 0 100%; position:static!important;
  margin:1.1rem -1.4rem 0; padding:.65rem 1.4rem;
  background:transparent!important; color:var(--muted)!important;
  border-top:1px solid var(--border);
  font-size:.8rem; font-weight:600; text-align:left;
  display:flex; align-items:center; gap:.4rem;
}
.small-box .small-box-footer:hover{ color:var(--brand-dark)!important; }
/* cards without a footer still get bottom breathing room */
.small-box{ padding-bottom:.15rem; }

/* variant accent mapping (icon chip tint + value color) */
.small-box.bg-info .icon{ background:var(--teal-tint); color:var(--teal-dark); }
.small-box.bg-success .icon{ background:var(--emerald-tint); color:var(--emerald); }
.small-box.bg-warning .icon{ background:var(--brand-tint); color:var(--brand-dark); }
.small-box.bg-danger .icon{ background:var(--danger-tint); color:var(--danger); }
.small-box.bg-primary .icon{ background:var(--brand-tint); color:var(--brand-dark); }
.small-box.bg-info,.small-box.bg-success,.small-box.bg-warning,.small-box.bg-danger,.small-box.bg-primary{ color:var(--ink)!important; }
/* thin colored top strip per variant */
.small-box::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; }
.small-box.bg-info::after{ background:var(--teal); }
.small-box.bg-success::after{ background:var(--emerald); }
.small-box.bg-warning::after{ background:var(--brand); }
.small-box.bg-danger::after{ background:var(--danger); }
.small-box.bg-primary::after{ background:var(--brand); }

/* AdminLTE info-box fallback (some pages use it) */
.info-box{ border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--border); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  border-radius:var(--radius-sm); font-weight:600; font-size:.86rem;
  padding:.5rem 1.05rem; letter-spacing:.2px; box-shadow:none!important;
  transition:filter .15s ease, background .15s ease, transform .05s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-secondary{ background:#EEF1F6; border-color:#EEF1F6; color:var(--ink); }
.btn-secondary:hover{ background:#E3E8EF; border-color:#E3E8EF; color:var(--ink); }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-success:hover{ background:var(--emerald); border-color:var(--emerald); }
.btn-info{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-info:hover{ background:var(--teal-dark); border-color:var(--teal-dark); color:#fff; }
.btn-warning{ background:var(--warning); border-color:var(--warning); color:#fff; }
.btn-warning:hover{ background:#E0921A; border-color:#E0921A; color:#fff; }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ filter:brightness(.94); }
.btn-outline-primary{ color:var(--brand-dark); border-color:var(--brand); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-link{ color:var(--brand-dark); box-shadow:none!important; }
.btn-block{ width:100%; }
.btn-sm{ padding:.35rem .7rem; font-size:.8rem; }
.btn-icon{ padding:.4rem; border-radius:var(--radius-sm); }
.btn-icon:hover{ background:var(--bg); }

/* ================================================================
   TABLES  (DataTables friendly)
   ================================================================ */
.table{ color:var(--ink-soft); margin-bottom:0; }
.table thead th{
  background:var(--bg); color:var(--muted);
  text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; font-weight:700;
  border-bottom:1px solid var(--border)!important; border-top:0!important;
  padding:.6rem .7rem; white-space:nowrap;
}
.table tbody td{
  padding:.6rem .7rem; vertical-align:middle;
  border-top:1px solid var(--border)!important; font-size:.84rem;
}
/* wide tables scroll horizontally as one unit (header stays aligned with body) */
.table-responsive{ overflow-x:auto; }
.table tbody tr:hover{ background:var(--brand-tint)!important; }
.table.table-hover tbody tr:hover{ background:var(--brand-tint)!important; }
.table img.img-round,.table .img-round{ border-radius:50%; object-fit:cover; }
.table-responsive{ border-radius:var(--radius-sm); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.4rem .7rem; outline:none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--radius-sm)!important; border:1px solid var(--border)!important;
  padding:.3rem .7rem!important; margin:0 2px; color:var(--muted)!important; background:var(--surface)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--brand-tint)!important; border-color:var(--brand-tint)!important; color:var(--brand-darker)!important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ color:var(--muted); font-size:.82rem; padding:.75rem 0; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after{ opacity:.4; }
.dt-buttons .btn{ margin-right:.35rem; }

/* ================================================================
   FORMS
   ================================================================ */
label{ color:var(--ink-soft); font-weight:600; font-size:.82rem; margin-bottom:.35rem; }
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.input-group-text{
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.88rem;
  min-height:44px; height:auto;
  padding:.55rem .85rem;
}
.form-control::placeholder{ color:var(--muted-2); }
.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
textarea.form-control{ min-height:auto; }
.input-group-text{ background:var(--bg); color:var(--muted); }
.form-text,small.text-muted{ color:var(--muted); }

/* select2 alignment */
.select2-container--default .select2-selection--single{
  display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:normal; padding-left:0; color:var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:42px; }
.select2-dropdown{ border-color:var(--border-strong); border-radius:var(--radius-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--brand); }

/* Real toggle switches (BS4 has no native switch; build one from the checkbox).
   Works for the Metronic-style markup used across the panel:
   <label class="form-check form-switch"><input class="form-check-input" type="checkbox"></label> */
.form-switch .form-check-input,
.form-check.form-switch .form-check-input,
label.form-switch input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  position:relative; display:inline-block; flex:0 0 auto;
  width:44px; height:24px; margin:0; padding:0; border:0; border-radius:999px;
  background:#CBD5E1; cursor:pointer; vertical-align:middle;
  transition:background .2s ease; box-shadow:none!important; background-image:none!important;
}
.form-switch .form-check-input::after,
.form-check.form-switch .form-check-input::after,
label.form-switch input[type=checkbox]::after{
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.35); transition:transform .2s ease;
}
.form-switch .form-check-input:checked,
.form-check.form-switch .form-check-input:checked,
label.form-switch input[type=checkbox]:checked{ background:var(--brand); }
.form-switch .form-check-input:checked::after,
.form-check.form-switch .form-check-input:checked::after,
label.form-switch input[type=checkbox]:checked::after{ transform:translateX(20px); }
.form-switch .form-check-input:disabled{ opacity:.55; cursor:not-allowed; }
.form-switch .form-check-input:focus{ outline:none; box-shadow:0 0 0 3px var(--brand-tint)!important; }
/* hide leftover Metronic slider spans that sat next to the input */
.form-switch .slider,.form-switch .custom-switch-indicator,
.form-check.form-switch .slider,.form-check.form-switch .custom-switch-indicator{ display:none!important; }
.custom-control-input:checked ~ .custom-control-label::before{ background:var(--brand); border-color:var(--brand); }
.icheck-primary > input:first-child:checked + label::before{ background:var(--brand); border-color:var(--brand); }

/* ================================================================
   BADGES / labels
   ================================================================ */
.badge{
  border-radius:var(--radius-pill); font-weight:600; font-size:.72rem;
  padding:.4em .7em; letter-spacing:.02em;
}
.badge-success,.badge.bg-success{ background:var(--success-tint)!important; color:var(--emerald)!important; }
.badge-danger,.badge.bg-danger{ background:var(--danger-tint)!important; color:var(--danger)!important; }
.badge-warning,.badge.bg-warning{ background:var(--warning-tint)!important; color:#B9770F!important; }
.badge-info,.badge.bg-info{ background:var(--teal-tint)!important; color:var(--teal-dark)!important; }
.badge-primary,.badge.bg-primary{ background:var(--brand-tint)!important; color:var(--brand-darker)!important; }
.badge-secondary{ background:#EEF1F6!important; color:var(--muted)!important; }

/* ================================================================
   MISC / helpers used by legacy markup
   ================================================================ */
.img-round{ border-radius:50%; object-fit:cover; }
.text-info{ color:var(--teal)!important; }
.text-primary{ color:var(--brand)!important; }
.text-success{ color:var(--emerald)!important; }
.text-danger{ color:var(--danger)!important; }
.text-warning{ color:var(--warning)!important; }
hr{ border-color:var(--border); }
.modal-content{ border:0; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.modal-header,.modal-footer{ border-color:var(--border); }
.swal2-popup{ border-radius:var(--radius); }
.main-footer{
  background:var(--surface); border-top:1px solid var(--border);
  color:var(--muted); font-size:.82rem; padding:1rem 1.5rem;
}
.main-footer a{ color:var(--brand-dark); }

/* nice scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#D5DBE3; border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#BCC5D1; }

/* small utility grid gap fix */
.row.gy-5{ row-gap:1.25rem; }

/* checkboxes / radios use brand accent */
.form-check-input,
input[type=checkbox],
input[type=radio]{ accent-color:var(--brand); }

/* Bootstrap-4 DataTables pagination (.page-item/.page-link markup) */
.pagination .page-link{
  color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-sm)!important;
  margin:0 2px; min-width:36px; text-align:center;
}
.pagination .page-link:hover{ background:var(--brand-tint); border-color:var(--brand-tint); color:var(--brand-darker); }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-item.disabled .page-link{ color:var(--muted-2); background:var(--surface); }

/* content top breathing room when a page opens with a bare card */
.content-wrapper > .content-header:first-child{ padding-top:1.4rem; }

/* summernote / editor chrome */
.note-editor.note-frame{ border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.note-toolbar{ background:var(--bg); border-bottom:1px solid var(--border); }

/* card title inside legacy .card-title div (some pages) */
.card-title.fw-bold{ font-family:'Inter',sans-serif; }

/* ===================== Settings vertical tab-nav ===================== */
.settings-nav{ display:flex; flex-direction:column; gap:3px; }
.settings-nav .nav-link{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  padding:.7rem .9rem; border-radius:var(--radius-sm);
  color:var(--ink-soft); font-weight:600; font-size:.88rem; border:0; background:transparent;
}
.settings-nav .nav-link .ico{
  width:30px; height:30px; border-radius:8px; background:var(--bg); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; flex:0 0 30px;
}
.settings-nav .nav-link small{ display:block; font-weight:400; color:var(--muted-2); font-size:.72rem; }
.settings-nav .nav-link:hover{ background:var(--bg); color:var(--ink); }
.settings-nav .nav-link.active{ background:var(--brand-tint); color:var(--brand-darker); }
.settings-nav .nav-link.active .ico{ background:var(--brand); color:#fff; }

.settings-pane .form-group{ margin-bottom:1.15rem; }
.settings-pane h4{ font-size:1.05rem; font-weight:700; margin:0 0 .25rem; }
.settings-pane .pane-sub{ color:var(--muted); font-size:.85rem; margin:0 0 1.25rem; }
.logo-preview{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-top:.5rem; min-height:56px;
}
.logo-preview img{ max-height:40px; width:auto; }
.settings-pane .note-editor.note-frame{ margin-bottom:0; }
.settings-pane .note-editor .note-editable{ min-height:150px; }
.settings-pane h4 .badge{ vertical-align:middle; font-size:.62rem; }

/* status dot in the gateway nav */
.settings-nav .nav-link{ position:relative; }
.settings-nav .g-dot{
  width:8px; height:8px; border-radius:50%; background:#CBD5E1; flex:0 0 8px;
}
.settings-nav .g-dot.on{ background:var(--success); box-shadow:0 0 0 3px var(--success-tint); }

/* inline switch row (label left, toggle right) */
.switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--border);
}
.switch-row:first-of-type{ margin-top:.5rem; }

/* credential sub-groups (SMS/OTP providers) */
.cred-group{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem 1rem .25rem; margin-top:1rem; background:var(--bg);
}
.cred-title{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem;
}
.cred-group .form-control{ background:var(--surface); }

/* ================================================================
   ROUND 4 — layout / table / chart fixes
   ================================================================ */

/* Fixed topbar on scroll. In layout-fixed the sidebar is fixed and the body
   scrolls, so a sticky header sticks to the viewport top. */
.wrapper{ overflow:visible; }
.main-header.navbar{ position:sticky; top:0; z-index:1030; }

/* Kill the sidebar's horizontal scrollbar */
.main-sidebar,
.main-sidebar .sidebar,
.main-sidebar .os-viewport{ overflow-x:hidden!important; }
.main-sidebar .sidebar{ overflow-y:auto; }
.nav-sidebar .nav-link p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Invisible "Action" column: a <td class="d-flex"> takes the cell out of the
   table's column sizing and collapses its width (so the header shows blank).
   Force it back to a normal table cell; the buttons stay inline. */
.table td.d-flex{
  display:table-cell!important; white-space:nowrap; vertical-align:middle;
}
.table td.d-flex > .btn,
.table td.d-flex > a{ display:inline-flex; vertical-align:middle; }

/* Card-header action buttons read as tools (right-aligned, compact) */
.card-header .card-tools{ margin-left:auto; display:flex; gap:.5rem; }
.card-header .card-tools .btn{ padding:.4rem .85rem; font-size:.82rem; }

/* Uniform chart-card heights on the dashboard */
.row > [class*="col-"] > .card.h-100{ height:100%; margin-bottom:1.25rem; }
#donutChart{ height:300px!important; min-height:300px!important; max-height:300px!important; }
#barChart{ height:300px!important; min-height:300px!important; max-height:300px!important; }
.chart-empty{ min-height:300px; }

/* symbol/label helpers used by legacy service & vehicle tables */
.symbol{ display:inline-flex; align-items:center; justify-content:center; }
.symbol .symbol-label{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; background:var(--bg); overflow:hidden;
}
.symbol .symbol-label img{ max-width:30px; max-height:30px; width:auto; height:auto!important; object-fit:contain; }

/* generic profile/detail helpers (customer & driver detail pages) */
.detail-hero{ display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.detail-hero .avatar-lg{
  width:96px; height:96px; border-radius:18px; object-fit:cover; background:var(--bg);
  border:1px solid var(--border);
}
.detail-meta a, .detail-meta span.meta{ color:var(--muted); font-size:.86rem; display:inline-flex; align-items:center; gap:.45rem; margin-right:1.25rem; }
.stat-tile{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.9rem 1rem; background:var(--surface);
}
.stat-tile .lbl{ color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.stat-tile .val{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-top:.15rem; }
.rating-stars i{ color:#F5A623; }
.rating-stars i.off{ color:#E2E8F0; }

/* horizontal sub-tabs (SMS/OTP providers, etc.) */
.subtab-nav{
  display:flex; gap:.35rem; border-bottom:1px solid var(--border);
  margin-bottom:1.1rem; padding:0; list-style:none;
}
.subtab-nav .nav-link{
  border:0; background:transparent; color:var(--muted); font-weight:600; font-size:.85rem;
  padding:.55rem .9rem; border-bottom:2px solid transparent; border-radius:0;
}
.subtab-nav .nav-link:hover{ color:var(--ink); }
.subtab-nav .nav-link.active{ color:var(--brand-darker); border-bottom-color:var(--brand); background:transparent; }
.subtab-content{ padding-top:.25rem; }

/* ===================== Chart / data empty-state ===================== */
.chart-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:250px; padding:1.5rem; color:var(--muted);
}
.chart-empty .ic{
  width:64px; height:64px; border-radius:16px; background:var(--brand-tint);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1rem;
}
.chart-empty h5{ font-size:.98rem; font-weight:700; color:var(--ink-soft); margin:0 0 .35rem; }
.chart-empty p{ font-size:.83rem; margin:0; max-width:300px; }
.mini-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1rem; justify-content:center; }
.mini-legend span{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted); }
.mini-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }