/* AtUrHome portal UI — brand toast + confirm styling. Brand: #0179C4 / #019CEF. */
:root{
  --at-primary:#0179C4; --at-brand:#019CEF; --at-deep:#0D10CD;
  --at-good:#159E5C; --at-bad:#E0453A; --at-warn:#ED7930; --at-info:#0179C4;
  --at-ink:#0D1B27; --at-muted:#93A7B8; --at-line:#E1EAF2;
}

/* ---- Toasts ---- */
.at-toast-container{
  position:fixed; top:18px; right:18px; z-index:20000;
  display:flex; flex-direction:column; gap:10px;
  max-width:360px; pointer-events:none;
}
html[dir="rtl"] .at-toast-container,
body.rtl .at-toast-container,
[dir="rtl"] .at-toast-container{ right:auto; left:18px; }

.at-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; color:var(--at-ink);
  border:1px solid var(--at-line); border-left:4px solid var(--at-info);
  border-radius:12px; padding:12px 12px 12px 14px;
  box-shadow:0 8px 30px rgba(13,27,39,.14);
  font-family:'Tajawal','Segoe UI',system-ui,-apple-system,sans-serif;
  min-width:280px; opacity:0; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
}
[dir="rtl"] .at-toast{ border-left:1px solid var(--at-line); border-right:4px solid var(--at-info); }
.at-toast--in{ opacity:1; transform:translateY(0); }
.at-toast--out{ opacity:0; transform:translateY(-8px); }

.at-toast--success{ border-left-color:var(--at-good); }
.at-toast--error{ border-left-color:var(--at-bad); }
.at-toast--warning{ border-left-color:var(--at-warn); }
.at-toast--info{ border-left-color:var(--at-info); }
[dir="rtl"] .at-toast--success{ border-right-color:var(--at-good); }
[dir="rtl"] .at-toast--error{ border-right-color:var(--at-bad); }
[dir="rtl"] .at-toast--warning{ border-right-color:var(--at-warn); }
[dir="rtl"] .at-toast--info{ border-right-color:var(--at-info); }

.at-toast__icon{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; line-height:1;
}
.at-toast--success .at-toast__icon{ background:var(--at-good); }
.at-toast--error   .at-toast__icon{ background:var(--at-bad); }
.at-toast--warning .at-toast__icon{ background:var(--at-warn); }
.at-toast--info    .at-toast__icon{ background:var(--at-info); }

.at-toast__body{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.4; padding-top:1px; }
.at-toast__body strong{ font-weight:700; }
.at-toast__close{
  margin-left:auto; background:none; border:none; color:var(--at-muted);
  font-size:18px; line-height:1; cursor:pointer; padding:0 2px; align-self:flex-start;
}
[dir="rtl"] .at-toast__close{ margin-left:0; margin-right:auto; }
.at-toast__close:hover{ color:var(--at-ink); }

@media (max-width:480px){
  .at-toast-container{ left:12px; right:12px; max-width:none; }
  .at-toast{ min-width:0; }
}

/* ---- SweetAlert confirm — nudge to brand ---- */
.swal2-styled.swal2-confirm{ background-color:var(--at-primary) !important; }
.swal2-styled.swal2-confirm:focus{ box-shadow:0 0 0 3px rgba(1,121,196,.35) !important; }

@media (prefers-reduced-motion:reduce){
  .at-toast{ transition:none; }
}

/* ============================================================
   AtUrHome brand skin over Bootstrap 5 — additive, loads after theme.
   Blue #019CEF/#0179C4 · CTA orange #ED7930 · Tajawal · rounded/soft.
   ============================================================ */
:root{
  --at-blue:#019CEF; --at-blue-d:#0179C4; --at-orange:#ED7930; --at-orange-d:#D9661F;
  --at-ink2:#0D1B27; --at-mut:#6C8296; --at-ln:#E4EBF1;
}
body, .form-control, .form-select, .btn, .card, .card-title, .table, .dropdown-menu,
input, select, textarea, button, .nav-link, .navbar, h1,h2,h3,h4,h5,h6, label,
.page-wrapper, .modal, .swal2-popup{
  font-family:'Tajawal','Segoe UI',system-ui,-apple-system,sans-serif !important;
}

/* Buttons */
.btn{ border-radius:10px; font-weight:700; letter-spacing:.01em; }
.btn-primary{ background:linear-gradient(135deg,var(--at-orange),var(--at-orange-d)) !important; border:none !important; color:#fff !important; box-shadow:0 8px 18px rgba(237,121,48,.24); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ filter:brightness(.96); color:#fff !important; box-shadow:0 10px 22px rgba(237,121,48,.32); }
.btn-outline-primary{ color:var(--at-blue-d) !important; border-color:var(--at-blue) !important; }
.btn-outline-primary:hover{ background:var(--at-blue-d) !important; border-color:var(--at-blue-d) !important; color:#fff !important; }
.btn-secondary{ background:#fff; border:1.5px solid var(--at-ln); color:var(--at-ink2); }
.btn-secondary:hover{ background:#F4F7FA; color:var(--at-ink2); }
.btn-success{ background:#159E5C !important; border-color:#159E5C !important; }
.btn-danger{ background:#E0453A !important; border-color:#E0453A !important; }
.btn-info{ background:var(--at-blue) !important; border-color:var(--at-blue) !important; color:#fff !important; }

/* Inputs */
.form-control,.form-select{ border:1.5px solid var(--at-ln); border-radius:10px; min-height:44px; padding:.5rem .9rem;
  box-shadow:0 1px 2px rgba(16,24,40,.04); color:var(--at-ink2); }
.form-control::placeholder{ color:#98A2B3; }
.form-control:hover,.form-select:hover{ border-color:#C6D0DC; }
.form-control:focus,.form-select:focus{ border-color:var(--at-blue) !important; box-shadow:0 0 0 4px rgba(1,156,239,.14) !important; }
.form-label{ font-weight:600; color:#333; font-size:.85rem; }
.input-group-text{ background:#F4F7FA; border:1.5px solid var(--at-ln); border-radius:10px; }

/* Cards */
.card{ border:1px solid var(--at-ln); border-radius:16px; box-shadow:0 1px 2px rgba(13,27,39,.04),0 10px 26px rgba(13,27,39,.05); }
.card-header{ background:transparent; border-bottom:1px solid var(--at-ln); font-weight:700; padding:1rem 1.25rem; }

/* Tables */
.table{ --bs-table-hover-bg:#F4F9FE; vertical-align:middle; }
.table>:not(caption)>*>*{ padding:.85rem 1rem; }
.table thead th{ background:#F6F9FC; color:var(--at-mut); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-bottom:1px solid var(--at-ln); }
.table tbody td{ border-bottom:1px solid #F1F5F9; color:var(--at-ink2); }

/* Badges */
.badge{ border-radius:99px; font-weight:700; padding:.42em .85em; letter-spacing:.01em; }
.bg-primary{ background:var(--at-blue-d) !important; }
.bg-success{ background:#159E5C !important; } .bg-danger{ background:#E0453A !important; }
.bg-warning{ background:var(--at-orange) !important; color:#fff !important; } .bg-info{ background:var(--at-blue) !important; }

/* Links + accents */
.text-primary{ color:var(--at-blue-d) !important; }
a.text-primary:hover{ color:var(--at-blue) !important; }
.page-title, h1,h2,h3,h4,h5{ color:var(--at-ink2); }

/* SweetAlert brand */
.swal2-popup{ border-radius:18px !important; }
.swal2-styled.swal2-confirm{ background:linear-gradient(135deg,var(--at-orange),var(--at-orange-d)) !important; border-radius:10px !important; }
.swal2-styled.swal2-cancel{ background:#fff !important; color:var(--at-ink2) !important; border:1.5px solid var(--at-ln) !important; border-radius:10px !important; }

/* ---- Lucide inline icons + app-style loader ---- */
.lc{width:1.3em;height:1.3em;vertical-align:middle;stroke:currentColor;fill:none;flex:none;}
.sidebar-link .lc,.nav-link .lc{width:21px;height:21px;}
.at-loader{position:fixed;inset:0;z-index:30000;display:none;align-items:center;justify-content:center;background:transparent;pointer-events:none;}
.at-loader.show{display:flex;}
.at-loader .ring{width:50px;height:50px;border:4px solid rgba(1,121,196,.16);border-top-color:#0179C4;border-radius:50%;animation:at-spin .7s linear infinite;filter:drop-shadow(0 3px 9px rgba(3,25,60,.22));}
@keyframes at-spin{to{transform:rotate(360deg)}}

/* ===== Portal shell: modern sidebar + header + collapse ===== */
.left-sidebar{width:262px !important;border-inline-end:1px solid var(--at-ln);background:#fff;transition:width .2s ease;}
.body-wrapper{margin-inline-start:262px !important;transition:margin .2s ease;}
.at-collapsed .left-sidebar{width:82px !important;}
.at-collapsed .body-wrapper{margin-inline-start:82px !important;}
.at-collapsed .left-sidebar .brand-logo img{opacity:0;}
.at-collapsed .left-sidebar .hide-menu{opacity:0;width:0;overflow:hidden;}
.left-sidebar .brand-logo{padding:16px 22px;height:70px;}
.sidebar-nav .sidebar-item{margin:2px 12px;list-style:none;}
.sidebar-link{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;color:#51637A;font-weight:600;font-size:14.5px;text-decoration:none;transition:.15s;white-space:nowrap;}
.sidebar-link:hover{background:#F3F7FB;color:var(--at-blue-d);}
.sidebar-link.active,.sidebar-item.selected>.sidebar-link{background:linear-gradient(135deg,rgba(1,156,239,.13),rgba(1,121,196,.1));color:var(--at-blue-d);}
.sidebar-link .lc{width:21px;height:21px;flex:none;}
.at-collapsed .sidebar-link{justify-content:center;padding-inline:0;}

.at-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--at-ln);}
.at-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 24px;}
.at-header-left{display:flex;align-items:center;gap:14px;flex:1;}
.at-icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--at-ln);background:#fff;display:grid;place-items:center;color:#51637A;cursor:pointer;transition:.15s;position:relative;}
.at-icon-btn:hover{background:#F3F7FB;color:var(--at-blue-d);border-color:#D6E0EA;}
.at-icon-btn .lc{width:20px;height:20px;}
.at-search{position:relative;flex:1;max-width:380px;}
.at-search>.lc{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#98A2B3;}
.at-search input{width:100%;height:42px;border:1px solid var(--at-ln);border-radius:11px;padding-inline-start:42px;padding-inline-end:14px;font-family:inherit;font-size:14px;background:#F7F9FC;color:var(--at-ink2);}
.at-search input:focus{outline:none;border-color:var(--at-blue);background:#fff;box-shadow:0 0 0 4px rgba(1,156,239,.12);}
.at-header-right{display:flex;align-items:center;gap:12px;}
.langtog{display:inline-flex;background:#EDF1F5;border-radius:999px;padding:3px;gap:2px;}
.langtog .seg{min-width:34px;text-align:center;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--at-mut);text-decoration:none;}
.langtog .seg.on{background:var(--at-blue-d);color:#fff;}
.at-profile{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--at-ln);border-radius:99px;padding:4px 12px 4px 4px;cursor:pointer;}
.at-profile:hover{border-color:#D6E0EA;}
.at-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--at-blue),var(--at-blue-d));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;}
.at-avatar.lg{width:42px;height:42px;font-size:17px;}
.at-profile-name{font-weight:700;font-size:14px;color:var(--at-ink2);}
.at-chev{width:16px;height:16px;color:var(--at-mut);}
.at-drop{border:1px solid var(--at-ln);border-radius:14px;box-shadow:0 12px 34px rgba(13,27,39,.14);padding:8px;min-width:250px;margin-top:8px;}
.at-drop-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--at-mut);padding:8px 12px;}
.at-profile-head{display:flex;align-items:center;gap:12px;padding:10px 12px 14px;border-bottom:1px solid var(--at-ln);margin-bottom:6px;}
.at-drop-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--at-ink2);font-weight:600;font-size:14px;text-decoration:none;}
.at-drop-item:hover{background:#F3F7FB;}
.at-drop-item .lc{width:19px;height:19px;}
.at-noti-list{list-style:none;margin:0;padding:0;max-height:380px;overflow-y:auto;}
.at-drop{min-width:344px;}
.nt-drop-item{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;text-decoration:none;border-radius:10px;transition:background .15s;}
.nt-drop-item:hover{background:#F5FAFD;}
.nt-drop-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #E5EDF4;background:#EAF4FE;}
.nt-drop-ic{display:grid;place-items:center;font-weight:800;font-size:14px;text-transform:uppercase;}
.nt-drop-body{display:flex;flex-direction:column;min-width:0;flex:1;}
.nt-drop-title{font-size:13px;font-weight:800;color:#0D1B27;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-drop-text{font-size:12px;color:#51677B;line-height:1.4;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;}
.nt-drop-time{font-size:10.5px;color:#93A1B0;font-weight:600;margin-top:3px;}
.nt-drop-empty{padding:28px 14px;text-align:center;color:#93A1B0;font-size:13px;}
.nt-drop-empty svg{display:block;margin:0 auto 8px;color:#C9D4DE;}

/* ===== Sidebar submenus + collapse + dashboard cards ===== */
.submenu-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;display:inline-block;flex:none;}
.sidebar-link.has-arrow{position:relative;}
.sidebar-link.has-arrow::after{content:"";width:8px;height:8px;border-inline-end:2px solid #9AA7B8;border-bottom:2px solid #9AA7B8;transform:rotate(45deg);position:absolute;inset-inline-end:16px;top:15px;transition:transform .2s;}
.sidebar-item.selected>.has-arrow::after,.sidebar-link.has-arrow[aria-expanded="true"]::after{transform:rotate(-135deg);}
.collapse.first-level{list-style:none;padding-inline-start:14px;}
.collapse.first-level .sidebar-link{padding:9px 12px;font-size:13.5px;color:#6B7C8C;font-weight:600;}
.collapse.first-level .sidebar-link:hover{background:#F3F7FB;color:var(--at-blue-d);}
.collapse.first-level .badge{margin-inline-start:auto;}
.at-collapsed .collapse.first-level{display:none !important;}
.at-collapsed .sidebar-link.has-arrow::after{display:none;}

/* dashboard KPI card polish (company + admin) */
.main_wraper .card{transition:transform .15s,box-shadow .15s;}
.main_wraper .card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(13,27,39,.09);}
.main_wraper .card-body.text-center>.mb-3:first-child{width:60px;height:60px;border-radius:16px;background:#F1F7FD;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.main_wraper .card-body.text-center>.mb-3:first-child svg{width:30px;height:30px;}
.main_wraper .card-body .text-muted{font-size:13px;font-weight:600;}
.main_wraper .card-body h4{font-size:28px;font-weight:800;margin-top:4px;}

/* ===================================================================
   Admin + company CONTENT polish — lifts every list / detail / form page
   to one consistent, premium look (targets the theme's bespoke classes).
   =================================================================== */
.body-wrapper .main_wraper{ padding:2px; }

/* Page titles: the theme uses styled-component wrappers + utility classes;
   normalise them into a consistent, bold heading. */
.body-wrapper .main_wraper h4,
.body-wrapper .PlanCard___StyledDiv5-sc-15h6u0y-5,
.body-wrapper .dlnPlh{ font-weight:800; letter-spacing:-.01em; color:var(--at-ink); }

/* Cards: theme bespoke (Card-sc / kvFOzG) unified with the brand card */
.body-wrapper .Card-sc-h69bg5-0,
.body-wrapper .kvFOzG{
  border:0!important; border-radius:16px!important;
  box-shadow:0 6px 22px rgba(13,27,39,.06)!important; background:#fff;
}

/* Tables: premium uppercase header, roomy rows, subtle row hover */
.body-wrapper table.table thead th,
.body-wrapper table.yajra thead th,
.body-wrapper table.customize-table thead th,
.body-wrapper table.pending_yajra thead th{
  background:#F4F8FC!important; color:#41576B!important; font-weight:700;
  font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:1px solid #E4EDF4!important; padding:12px 14px; white-space:nowrap;
}
.body-wrapper table.table tbody td{ padding:11px 14px; border-color:#EEF3F8; vertical-align:middle; }
.body-wrapper table.table tbody tr:hover{ background:#F8FBFE; }

/* DataTables chrome */
.body-wrapper .dataTables_wrapper .dataTables_filter input,
.body-wrapper .dataTables_wrapper .dataTables_length select{
  border:1px solid #E1E7EF!important; border-radius:9px!important; padding:7px 11px!important; background:#fff;
}
.body-wrapper .dataTables_wrapper .dataTables_filter input:focus,
.body-wrapper .dataTables_wrapper .dataTables_length select:focus{
  outline:none; border-color:var(--at-blue)!important; box-shadow:0 0 0 3px rgba(1,156,239,.14);
}
.body-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button{
  border:0!important; border-radius:9px!important; margin:0 2px!important; padding:6px 12px!important; color:#41576B!important;
}
.body-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--at-blue)!important; color:#fff!important;
}
.body-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#EAF6FF!important; color:var(--at-blue-d)!important;
}
.body-wrapper .dataTables_info{ color:var(--at-mut); font-size:13px; }

/* Buttons inside tables → consistent, compact pills with spacing */
.body-wrapper td .btn{ border-radius:8px!important; font-weight:600; font-size:12.5px; padding:5px 12px!important; }
.body-wrapper td .btn + .btn{ margin-inline-start:4px; }

/* Badges: pill everywhere (covers plain bootstrap badges on list pages) */
.body-wrapper .badge{ font-weight:600; letter-spacing:.01em; padding:.45em .72em; border-radius:999px; }

/* TinyMCE editors */
.body-wrapper .tox-tinymce{ border-radius:12px!important; border-color:#E1E7EF!important; }
.body-wrapper .nav-pills .nav-link{ border-radius:999px; }

/* Page-title headings sit left for consistency (several list pages hard-code
   text-center on the title h4/h5). */
.body-wrapper .main_wraper h4.text-center,
.body-wrapper .main_wraper h5.card-title.text-center{ text-align:left!important; }

/* ===================================================================
   Sidebar submenu chevron + collapsed state — fix the theme's diamond
   arrow overlapping the label, and hide submenus when collapsed.
   (!important so it beats the theme's higher-specificity has-arrow rule.)
   =================================================================== */
.left-sidebar .sidebar-link.has-arrow{ position:relative !important; padding-inline-end:34px !important; }
.left-sidebar .sidebar-link.has-arrow::after,
.left-sidebar .sidebar-item.has-arrow > .sidebar-link::after{
  content:"" !important; position:absolute !important;
  top:50% !important; inset-inline-end:15px !important; left:auto !important;
  width:7px !important; height:7px !important; margin-top:-5px !important;
  border:0 !important;
  border-right:2px solid #9AA7B8 !important; border-bottom:2px solid #9AA7B8 !important;
  border-radius:1px !important;
  transform:rotate(45deg) !important; transition:transform .2s ease !important;
  background:none !important; box-shadow:none !important; opacity:1 !important;
}
.left-sidebar .sidebar-item.selected > .sidebar-link.has-arrow::after,
.left-sidebar .sidebar-link.has-arrow[aria-expanded="true"]::after{
  transform:rotate(-135deg) !important; margin-top:-2px !important; border-color:var(--at-blue-d) !important;
}

/* Collapsed / mini sidebar: no submenus, no chevron, centered icons */
body.at-collapsed .collapse.first-level,
[data-sidebartype="mini-sidebar"] .left-sidebar .collapse.first-level{ display:none !important; }
body.at-collapsed .sidebar-link.has-arrow::after,
[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-link.has-arrow::after{ display:none !important; }
body.at-collapsed .sidebar-link.has-arrow{ padding-inline-end:0 !important; }

/* ===================================================================
   No page-level horizontal scroll. Wide tables scroll inside their own
   .table-responsive box instead of pushing the whole page sideways.
   =================================================================== */
.body-wrapper{ overflow-x:hidden; }
.body-wrapper .container-fluid,
.body-wrapper .main_wraper,
.body-wrapper .card{ max-width:100%; }
.body-wrapper .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.body-wrapper .dataTables_wrapper{ max-width:100%; }

/* ===================================================================
   Sidebar selection + collapsed brand cube + dropdowns + pagination
   =================================================================== */

/* Collapsed brand: hide the wordmark, show the app cube centered */
/* The brand is a link to the dashboard; it must still lay out as the two
   images did, expanded and collapsed. */
.left-sidebar .brand-logo .brand-home{ display:flex; align-items:center; text-decoration:none; }
.left-sidebar .brand-logo .brand-cube{ display:none; width:40px; height:40px; border-radius:11px; }
.at-collapsed .left-sidebar .brand-logo{ padding:16px 0 !important; justify-content:center !important; }
.at-collapsed .left-sidebar .brand-logo .dark-logo{ display:none !important; }
.at-collapsed .left-sidebar .brand-logo .brand-cube{ display:block !important; opacity:1 !important; margin:0 auto; }

/* Active / selected item — cleaner, bolder, brand-tinted icon */
.left-sidebar .sidebar-link.active,
.left-sidebar .sidebar-item.selected > .sidebar-link{
  background:rgba(1,156,239,.12) !important; color:var(--at-blue-d) !important; font-weight:700;
}
.left-sidebar .sidebar-link.active .lc,
.left-sidebar .sidebar-item.selected > .sidebar-link .lc{ color:var(--at-blue) !important; }

/* Collapsed: each item is a centered rounded square; active = clean square */
.at-collapsed .left-sidebar .sidebar-link{
  width:46px !important; height:46px !important; margin:3px auto !important;
  padding:0 !important; border-radius:14px !important; justify-content:center !important;
}
.at-collapsed .left-sidebar .sidebar-link.active,
.at-collapsed .left-sidebar .sidebar-item.selected > .sidebar-link{
  background:rgba(1,156,239,.16) !important; box-shadow:none !important;
}

/* Dropdowns (profile / notifications / bootstrap menus) — soft, rounded */
.dropdown-menu, .at-drop{
  border:1px solid var(--at-ln) !important; border-radius:14px !important;
  box-shadow:0 18px 44px rgba(13,27,39,.15) !important; padding:6px !important; margin-top:8px !important;
}
.dropdown-menu .dropdown-item{ border-radius:9px; padding:8px 12px; font-weight:500; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{ background:#F3F7FB; color:var(--at-blue-d); }
.dropdown-menu .dropdown-divider{ border-color:var(--at-ln); }

/* Pagination — refined pills; scrollX keeps them out of the table's h-scroll */
.dataTables_wrapper .dataTables_paginate{ padding-top:12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  min-width:34px; text-align:center; border:1px solid var(--at-ln) !important;
  border-radius:9px !important; margin:0 3px !important; padding:6px 12px !important;
  color:#41576B !important; background:#fff !important; font-weight:600; transition:.15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--at-blue) !important; border-color:var(--at-blue) !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current){
  background:#EAF6FF !important; border-color:var(--at-blue) !important; color:var(--at-blue-d) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  opacity:.5; background:#fff !important; color:#9AA7B8 !important; border-color:var(--at-ln) !important;
}
/* scrollX frame tidy-up */
.dataTables_scrollHead, .dataTables_scrollBody{ overflow-x:auto !important; }
.dataTables_scrollBody{ border-bottom:0; }

/* ===================================================================
   Submenu chevron — single source of truth. Matches every theme
   selector (base / hover / active / aria-expanded / RTL) so the arrow
   never "mixes" between the theme's corner and ours.
   =================================================================== */
.sidebar-nav .has-arrow::after,
.sidebar-nav .sidebar-item .sidebar-link.has-arrow::after,
.sidebar-nav ul .sidebar-item .sidebar-link:hover.has-arrow::after,
.sidebar-nav li.active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
html[dir=rtl] .sidebar-nav .has-arrow::after,
.left-sidebar .sidebar-link.has-arrow::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  inset-inline-end:15px !important; inset-inline-start:auto !important;
  width:7px !important; height:7px !important; margin:0 !important;
  border:0 !important;
  border-right:2px solid #9AA7B8 !important;
  border-bottom:2px solid #9AA7B8 !important;
  border-radius:1px !important;
  transform:translateY(-50%) rotate(45deg) !important;
  transition:transform .2s ease, border-color .15s !important;
  background:none !important; box-shadow:none !important;
}
/* expanded → chevron points up */
.sidebar-nav li.active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .sidebar-item.selected > .sidebar-link.has-arrow::after,
.sidebar-link.has-arrow[aria-expanded="true"]::after,
.left-sidebar .sidebar-item.selected > .sidebar-link.has-arrow::after{
  transform:translateY(-40%) rotate(-135deg) !important;
  border-color:var(--at-blue-d) !important;
}
/* hover tint */
.sidebar-nav .sidebar-item .sidebar-link:hover.has-arrow::after{ border-color:var(--at-blue) !important; }
/* collapsed / mini: no chevron */
body.at-collapsed .has-arrow::after,
[data-sidebartype=mini-sidebar] .left-sidebar:not(:hover) .has-arrow::after{ display:none !important; }

/* Long submenu labels (e.g. "Users & Drivers") must never sit under the
   chevron: full-width link, flexible label, reserved chevron gutter. */
.left-sidebar .sidebar-nav .sidebar-link{ width:100% !important; }
.left-sidebar .sidebar-link.has-arrow{ padding-inline-end:38px !important; }
.left-sidebar .sidebar-link > .hide-menu{
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Give labels enough room so common ones ("Users & Drivers") don't truncate:
   slightly tighter icon gap + a smaller chevron gutter. */
.left-sidebar .sidebar-nav .sidebar-link{ gap:11px; font-size:14px; }
.left-sidebar .sidebar-link.has-arrow{ padding-inline-end:28px !important; }
.left-sidebar .sidebar-link.has-arrow::after,
.sidebar-nav .has-arrow::after{ inset-inline-end:12px !important; }

/* A touch wider so primary labels never truncate (collapsed width unaffected —
   .at-collapsed rules have higher specificity). */
.left-sidebar{ width:280px !important; }
.body-wrapper{ margin-inline-start:280px !important; }

/* ===================================================================
   Refinements: full labels, calmer hover (no card "lift/blink"),
   tighter content spacing, clean collapsed hover.
   =================================================================== */

/* Sidebar labels show in full — the sidebar is wide enough now */
/* SUPERSEDED by aturhome-admin-ui.css: forcing the label to never shrink made
   long sub-items + their count badge overflow the 216px nav box, so the badges
   spilled into the padding and sat on top of the scrollbar.
.left-sidebar .sidebar-link > .hide-menu{ overflow:visible !important; text-overflow:clip !important; flex:0 1 auto !important; }
*/

/* No hover "lift" on cards (that jump reads as a blink when you move over a
   list). Keep a calm, static shadow instead. */
.main_wraper .card:hover,
.body-wrapper .card:hover{ transform:none !important; box-shadow:0 6px 22px rgba(13,27,39,.06) !important; }
.body-wrapper .card{ transition:box-shadow .15s ease !important; }

/* Smooth (non-blinking) row hover */
.body-wrapper table.table tbody tr{ transition:background-color .12s ease; }
.body-wrapper table.table tbody tr:hover{ background:#F5F9FD; }

/* Reclaim the wasted padding above / left of the list content */
.body-wrapper .main_wraper{ padding:0 !important; }
.body-wrapper .container-fluid{ padding-inline:10px !important; }
.body-wrapper .main_wraper > .w-100{ padding:12px 14px !important; }

/* Collapsed sidebar: clean square hover */
.at-collapsed .left-sidebar .sidebar-link:hover{ background:rgba(1,156,239,.10) !important; }

/* Submenu sub-items: fit label + count badge without clipping behind it */
/* SUPERSEDED by aturhome-admin-ui.css. These three passes contradicted each
   other (badge pinned right, then re-flowed inline 8px after the label) and the
   last one won, which is what pushed the counts outside the sidebar box.
.collapse.first-level .sidebar-link{ padding-inline-start:14px !important; gap:9px; }
.collapse.first-level .sidebar-link > .hide-menu{ overflow:visible !important; text-overflow:clip !important; white-space:nowrap; }
.collapse.first-level .badge{ flex:0 0 auto; margin-inline-start:8px; }
.collapse.first-level .badge{ margin-inline-start:auto !important; flex:0 0 auto; }
.collapse.first-level .sidebar-link > .hide-menu{ flex:0 1 auto; }
.collapse.first-level .sidebar-link{ justify-content:flex-start; }
.collapse.first-level .sidebar-link > .hide-menu{ flex:0 0 auto !important; overflow:visible !important; text-overflow:clip !important; }
.collapse.first-level .badge{ margin-inline-start:8px !important; margin-inline-end:0 !important; flex:0 0 auto !important; }
*/

/* ===================================================================
   Responsive: header right-group (profile) always visible; search
   yields space first; laptop breakpoints so nothing overflows.
   =================================================================== */
.at-header-inner{ min-width:0; flex-wrap:nowrap; }
.at-header-left{ min-width:0; }
.at-search{ min-width:0; }
.at-header-right{ flex-shrink:0; }              /* profile / lang / bell never clip */

/* Laptops (≤1366px): tighter header, smaller search, slightly narrower sidebar */
@media (max-width:1366px){
  .left-sidebar{ width:252px !important; }
  .body-wrapper{ margin-inline-start:252px !important; }
  .at-collapsed .left-sidebar{ width:82px !important; }
  .at-collapsed .body-wrapper{ margin-inline-start:82px !important; }
  .at-header-inner{ padding:10px 16px; gap:12px; }
  .at-search{ max-width:300px; }
  .body-wrapper .main_wraper > .w-100{ padding:12px !important; }
}
/* Small laptops / tablets (≤1100px): drop the header search, hide profile name */
@media (max-width:1100px){
  .at-search{ display:none; }
  .at-profile-name{ display:none !important; }
  .at-header-right{ gap:8px; }
}

/* ===================================================================
   Mobile / small screens (<1024px): sidebar becomes an off-canvas drawer
   so it never overlaps the page content. This MUST match the base theme's
   own off-canvas boundary (it hides the sidebar below 1024px) — otherwise
   the content keeps its left gutter while the sidebar is already hidden.
   The header toggle slides the drawer in.
   =================================================================== */
@media (max-width:1023.98px){
  /* Content spans the full width — no reserved sidebar gutter */
  .body-wrapper,
  .at-collapsed .body-wrapper{ margin-inline-start:0 !important; }

  /* Sidebar off-canvas by default; full width kept even in collapsed mode */
  .left-sidebar,
  .at-collapsed .left-sidebar{
    position:fixed !important;
    top:0 !important; bottom:0 !important;
    left:0 !important; right:auto !important;
    inset-inline-start:0 !important; inset-inline-end:auto !important;
    width:280px !important;
    max-width:86vw;
    z-index:1050 !important;
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 18px 48px rgba(13,27,39,.22);
  }
  [dir="rtl"] .left-sidebar,
  [dir="rtl"] .at-collapsed .left-sidebar{ left:auto !important; right:0 !important; transform:translateX(102%); }

  /* Drawer open */
  .at-sb-open .left-sidebar,
  .at-sb-open.at-collapsed .left-sidebar{ transform:translateX(0) !important; }

  /* When open, always show full labels/logo even if desktop was collapsed */
  .at-sb-open.at-collapsed .left-sidebar .hide-menu{ opacity:1 !important; width:auto !important; }
  .at-sb-open.at-collapsed .left-sidebar .brand-logo img.dark-logo{ opacity:1 !important; display:inline-block !important; }
  .at-sb-open.at-collapsed .left-sidebar .brand-logo .brand-cube{ display:none !important; }

  /* Dimmed backdrop behind the drawer */
  .at-sb-backdrop{
    position:fixed; inset:0; background:rgba(13,27,39,.42);
    opacity:0; visibility:hidden; transition:opacity .26s ease, visibility .26s ease;
    z-index:1040;
  }
  .at-sb-open .at-sb-backdrop{ opacity:1; visibility:visible; }
}

/* On real desktops (sidebar docked) the backdrop must never show */
@media (min-width:1024px){
  .at-sb-backdrop{ display:none !important; }
}

/* ===================================================================
   Desktop icon-collapse (>=1024px): force the 82px rail so it never
   overlaps content. Between ~1024–1199px another rule otherwise pins the
   sidebar to full width while the content gutter shrinks to 82px, so the
   full-width sidebar covers the page. High specificity + !important wins.
   =================================================================== */
@media (min-width:1024px){
  html body.at-collapsed .left-sidebar{ width:82px !important; }
  html body.at-collapsed .body-wrapper{ margin-inline-start:82px !important; }
  html body.at-collapsed .left-sidebar .hide-menu{ opacity:0 !important; width:0 !important; overflow:hidden !important; }
  html body.at-collapsed .left-sidebar .brand-logo .dark-logo{ opacity:0 !important; display:none !important; }
  html body.at-collapsed .left-sidebar .brand-logo .brand-cube{ display:block !important; opacity:1 !important; }
  html body.at-collapsed .left-sidebar .collapse.first-level{ display:none !important; }
}

/* Nicer, thinner horizontal scrollbar on wide tables (it's expected on many-column
   tables, but make it subtle). */
.body-wrapper .dataTables_scrollBody::-webkit-scrollbar,
.body-wrapper .table-responsive::-webkit-scrollbar{ height:9px; }
.body-wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb,
.body-wrapper .table-responsive::-webkit-scrollbar-thumb{ background:#C6D3DF; border-radius:9px; }
.body-wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.body-wrapper .table-responsive::-webkit-scrollbar-thumb:hover{ background:#A9B9C7; }

/* ===================================================================
   Thin, subtle themed scrollbars everywhere in the portal — replaces the
   chunky default OS scrollbars on scroll containers (panes, lists, modals,
   dropdowns). Only appears when content actually overflows.
   =================================================================== */
.body-wrapper, .body-wrapper *, .left-sidebar, .left-sidebar *,
.at-modal, .at-modal *{ scrollbar-width: thin; scrollbar-color: #CBD6E0 transparent; }
.body-wrapper ::-webkit-scrollbar,
.left-sidebar ::-webkit-scrollbar,
.at-modal ::-webkit-scrollbar{ width:8px; height:8px; }
.body-wrapper ::-webkit-scrollbar-track,
.left-sidebar ::-webkit-scrollbar-track,
.at-modal ::-webkit-scrollbar-track{ background:transparent; }
.body-wrapper ::-webkit-scrollbar-thumb,
.left-sidebar ::-webkit-scrollbar-thumb,
.at-modal ::-webkit-scrollbar-thumb{ background:#CBD6E0; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.body-wrapper ::-webkit-scrollbar-thumb:hover,
.left-sidebar ::-webkit-scrollbar-thumb:hover,
.at-modal ::-webkit-scrollbar-thumb:hover{ background:#A9B9C7; background-clip:padding-box; }
.body-wrapper ::-webkit-scrollbar-corner{ background:transparent; }

/* ===================================================================
   Header width fix + sidebar hover identity + collapsed tooltips + logout
   =================================================================== */

/* Header fills the content area at every sidebar state (theme pinned it to
   calc(100% - 18rem), so it stayed narrow when collapsed). */
.at-header{ width:auto !important; }

/* Sidebar item hover — brand identity tint + brand icon */
.left-sidebar .sidebar-nav .sidebar-link:hover{ background:rgba(1,156,239,.12) !important; color:var(--at-blue-d) !important; }
.left-sidebar .sidebar-nav .sidebar-link:hover .lc{ color:var(--at-blue) !important; }

/* Logout — identity red, clear red-tint hover (was plain bootstrap danger) */
.left-sidebar .sidebar-link.text-danger,
.left-sidebar .sidebar-link.text-danger .lc{ color:#E0453A !important; }
.left-sidebar .sidebar-link.text-danger:hover{ background:rgba(224,69,58,.12) !important; color:#C0392B !important; }
.left-sidebar .sidebar-link.text-danger:hover .lc{ color:#C0392B !important; }

/* Reclaim the big gap above Log Out (mt-5 = 3rem) */
.left-sidebar .sidebar-item.mt-5{ margin-top:16px !important; padding-top:10px; }

/* --- Collapsed: show the item name as a flyout tooltip on hover --- */
.at-collapsed .left-sidebar,
.at-collapsed .left-sidebar > div,
.at-collapsed .left-sidebar .sidebar-nav,
.at-collapsed .left-sidebar [data-simplebar],
.at-collapsed .left-sidebar .simplebar-content-wrapper,
.at-collapsed .left-sidebar .simplebar-mask{ overflow:visible !important; }
.at-collapsed .left-sidebar .sidebar-item{ position:relative; }
.at-collapsed .left-sidebar .sidebar-link:hover > .hide-menu{
  opacity:1 !important; width:auto !important; overflow:visible !important;
  position:absolute; inset-inline-start:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--at-blue-d); color:#fff !important;
  padding:7px 12px; border-radius:8px; white-space:nowrap;
  font-size:13px; font-weight:600; z-index:1000; pointer-events:none;
  box-shadow:0 8px 22px rgba(13,27,39,.22);
}
.at-collapsed .left-sidebar .sidebar-link:hover > .hide-menu::before{
  content:""; position:absolute; inset-inline-start:-5px; top:50%; transform:translateY(-50%);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-inline-end:5px solid var(--at-blue-d);
}

/* Header must flow inside the content area (not theme's fixed calc-width), so it
   always spans full width and tracks the sidebar collapse. */
.body-wrapper .app-header.at-header,
.at-header{
  position:sticky !important; top:0 !important;
  width:auto !important; max-width:none !important;
  inset-inline-start:auto !important; left:auto !important; right:auto !important;
  margin:0 !important;
}

/* ===================================================================
   Sidebar vertical rhythm — kill the dead space (48px top pad + big
   pre-logout gap), especially in the collapsed state.
   =================================================================== */
.left-sidebar .sidebar-nav.pt-5,
.left-sidebar .sidebar-nav{ padding-top:16px !important; }
.left-sidebar .sidebar-item.mt-5{ margin-top:14px !important; padding-top:10px !important; }
.at-collapsed .left-sidebar .sidebar-nav{ padding-top:10px !important; }
.at-collapsed .left-sidebar .sidebar-item.mt-5{ margin-top:8px !important; padding-top:8px !important; }
.at-collapsed .left-sidebar .brand-logo{ padding:12px 0 !important; height:auto !important; }

/* ===================================================================
   Sidebar bottom profile (flex column: nav grows, profile pinned bottom)
   =================================================================== */
.left-sidebar.at-sb{ display:flex !important; flex-direction:column; height:100vh; }
.left-sidebar.at-sb .at-sb-top{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.left-sidebar.at-sb .at-sb-foot{ flex:0 0 auto; border-top:1px solid var(--at-ln); padding:12px; background:#fff; }
.at-sb-profile{ display:flex; align-items:center; gap:11px; padding:8px; border-radius:12px; text-decoration:none; transition:background .15s; }
.at-sb-profile:hover{ background:#F3F7FB; }
.at-sb-profile .at-avatar{ width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#0179C4,#019CEF); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none; }
.at-sb-profile-txt{ min-width:0; flex:1 1 auto; }
.at-sb-profile-txt .nm{ font-weight:700; color:#0D1B27; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-sb-profile-txt .rl{ font-size:12px; color:#93A7B8; }
.at-sb-chev{ width:18px; height:18px; color:#93A7B8; flex:none; }
.at-collapsed .left-sidebar.at-sb .at-sb-foot{ padding:10px 0; }
.at-collapsed .at-sb-profile{ justify-content:center; padding:6px; }
.at-collapsed .at-sb-profile-txt,
.at-collapsed .at-sb-chev{ display:none !important; }

/* ===================================================================
   Sidebar: brand fixed, only the nav scrolls (thin subtle scrollbar)
   =================================================================== */
.left-sidebar.at-sb > .brand-logo{ flex:0 0 auto; }
.left-sidebar.at-sb .at-sb-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.left-sidebar.at-sb .at-sb-scroll::-webkit-scrollbar{ width:6px; }
.left-sidebar.at-sb .at-sb-scroll::-webkit-scrollbar-thumb{ background:#DCE5EE; border-radius:6px; }
.left-sidebar.at-sb .at-sb-scroll::-webkit-scrollbar-track{ background:transparent; }
.at-sb-profile-txt .rl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Footer: Log Out + profile grouped, always pinned to the very bottom */
.left-sidebar.at-sb{ display:flex !important; flex-direction:column !important; height:100vh !important; }
.left-sidebar.at-sb > .brand-logo{ flex:0 0 auto; }
.left-sidebar.at-sb > .at-sb-scroll{ flex:1 1 auto; min-height:0; }
.left-sidebar.at-sb > .at-sb-foot{ flex:0 0 auto; margin-top:auto; border-top:1px solid var(--at-ln); padding:8px 10px 12px; display:flex; flex-direction:column; gap:2px; }
.at-sb-logout{ border-radius:11px; }
.at-collapsed .left-sidebar.at-sb > .at-sb-foot{ padding:8px 0 10px; }
.at-collapsed .at-sb-logout{ justify-content:center; }

/* Kill the 85px top gap the theme reserved for a fixed header (ours is sticky) */
.body-wrapper .container-fluid{ padding-top:8px !important; }

/* ===================================================================
   Neutralise the theme's automatic "mini-sidebar" mode.
   At narrower widths / browser zoom the theme sets
   [data-sidebartype="mini-sidebar"], which HIDES the text labels — but our
   width:262px !important keeps the bar wide, leaving a broken "wide bar,
   icons only, no labels" state. Our own toggle (body.at-collapsed) is the
   single source of truth for collapsing, so force the full sidebar (labels
   visible, submenus available) whenever the body is NOT .at-collapsed.
   =================================================================== */
body:not(.at-collapsed) [data-sidebartype="mini-sidebar"] .left-sidebar,
body:not(.at-collapsed)[data-sidebartype="mini-sidebar"] .left-sidebar,
[data-sidebartype="mini-sidebar"] .left-sidebar{ width:262px !important; }

body:not(.at-collapsed) .left-sidebar .sidebar-link > .hide-menu,
[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-link > .hide-menu{
  display:inline-flex !important; opacity:1 !important; width:auto !important;
  overflow:visible !important; position:static !important; transform:none !important;
  background:transparent !important; color:inherit !important; padding:0 !important;
  box-shadow:none !important; white-space:nowrap;
}
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .dark-logo{ display:inline-block !important; opacity:1 !important; }
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .brand-cube{ display:none !important; }
[data-sidebartype="mini-sidebar"] .left-sidebar .collapse.first-level{ display:block !important; }
[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-link.has-arrow::after{ display:block !important; }

/* When OUR collapse (.at-collapsed) is active on desktop, always hide the
   labels/submenus even if the base theme set data-sidebartype="mini-sidebar"
   (whose rules above otherwise force them visible and overflow the 82px rail).
   These selectors are crafted to out-specify those, wherever data-sidebartype sits. */
@media (min-width:1024px){
  /* Hide labels — even on :hover (kills the flyout tooltip whose white text
     was bleeding into the main content area). Native title= tooltips remain. */
  html body.at-collapsed .left-sidebar .sidebar-link > .hide-menu,
  html body.at-collapsed .left-sidebar .sidebar-link:hover > .hide-menu,
  html[data-sidebartype] body.at-collapsed .left-sidebar .sidebar-link > .hide-menu,
  html[data-sidebartype] body.at-collapsed .left-sidebar .sidebar-link:hover > .hide-menu,
  body.at-collapsed[data-sidebartype] .left-sidebar .sidebar-link > .hide-menu,
  body.at-collapsed[data-sidebartype] .left-sidebar .sidebar-link:hover > .hide-menu{
    opacity:0 !important; width:0 !important; overflow:hidden !important; padding:0 !important;
    position:static !important; transform:none !important; background:transparent !important; box-shadow:none !important;
  }
  html body.at-collapsed .left-sidebar .sidebar-link:hover > .hide-menu::before{ display:none !important; }
  /* Hide the has-arrow chevron indicator on collapsed parent icons */
  html body.at-collapsed .left-sidebar .sidebar-link.has-arrow::after,
  html[data-sidebartype] body.at-collapsed .left-sidebar .sidebar-link.has-arrow::after,
  body.at-collapsed[data-sidebartype] .left-sidebar .sidebar-link.has-arrow::after{ display:none !important; }
  /* Hide submenus + count badges (they'd overflow the 82px rail) */
  html body.at-collapsed .left-sidebar .collapse.first-level,
  html[data-sidebartype] body.at-collapsed .left-sidebar .collapse.first-level,
  body.at-collapsed[data-sidebartype] .left-sidebar .collapse.first-level{ display:none !important; }
  html body.at-collapsed .left-sidebar .sidebar-link .badge,
  body.at-collapsed[data-sidebartype] .left-sidebar .sidebar-link .badge{ display:none !important; }
}

/* All-status strip on the dashboard */
.stat-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.stat-pill{ flex:1 1 120px; background:#fff; border-radius:12px; padding:11px 13px; box-shadow:0 4px 16px rgba(13,27,39,.05); display:flex; align-items:center; gap:10px; }
.stat-pill .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.stat-pill .v{ font-size:18px; font-weight:800; line-height:1; }
.stat-pill .k{ font-size:11.5px; color:#6C8296; font-weight:600; margin-top:2px; }

/* ===================================================================
   DataTables — themed controls (length / search / info / pagination)
   so every list page matches the AtUrHome system. !important is used to
   win over the CDN datatables.bootstrap5 stylesheet loaded per-page.
   =================================================================== */
/* Footer/header bars — merged with the table (search on top, pager at bottom) */
.dataTables_wrapper .at-dt-top{ display:flex; justify-content:flex-end; padding:12px 16px; border-bottom:1px solid #EEF3F8; }
.dataTables_wrapper .at-dt-bot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:6px 16px; border-top:1px solid #EEF3F8; }
.dataTables_wrapper .at-dt-nav{ display:flex; align-items:center; gap:10px; }
.dataTables_wrapper .at-dt-nav .dataTables_length{ padding:8px 0 !important; }
.dataTables_wrapper .at-dt-nav .dataTables_paginate{ padding:3px !important; }
.dataTables_wrapper .dt-pageind{ font-weight:700; color:#0D1B27; font-variant-numeric:tabular-nums; min-width:42px; text-align:center; font-size:12.5px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ font-size:12.5px; color:#7A8A99; padding:8px 0; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:8px; margin:0; font-weight:600; }
.dataTables_wrapper .dataTables_length select{ height:34px !important; border:1px solid #E6ECF2 !important; border-radius:8px !important; padding:0 8px !important; background:#fff !important; color:#41576B !important; font-size:13px !important; }
.dataTables_wrapper .dataTables_filter input{ height:38px !important; min-width:220px; border:1px solid #E6ECF2 !important; border-radius:9px !important; padding:0 12px !important; background:#F8FAFC !important; font-size:13px !important; margin-inline-start:8px !important; }
.dataTables_wrapper .dataTables_filter input:focus{ outline:none; border-color:#019CEF !important; background:#fff !important; box-shadow:0 0 0 3px rgba(1,156,239,.12) !important; }
.dataTables_wrapper .dataTables_info{ font-size:12.5px !important; color:#8296A6 !important; font-weight:600; padding:12px 6px !important; }
/* pager buttons — matches the dashboard mini-pager (separate soft buttons) */
.dataTables_wrapper .dataTables_paginate{ display:flex !important; align-items:center; gap:6px; background:transparent; border:0; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ min-width:28px; height:28px; line-height:1 !important; border:1px solid #E6ECF2 !important; border-radius:7px !important; background:#fff !important; color:#64798C !important; font-size:14px !important; padding:0 8px !important; margin:0 !important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none !important; transition:all .12s; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled){ border-color:#B9D5EC !important; color:#0179C4 !important; background:#F5FAFE !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:#0179C4 !important; border-color:#0179C4 !important; color:#fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{ opacity:.35 !important; cursor:default; color:#64798C !important; background:#fff !important; border-color:#E6ECF2 !important; box-shadow:none !important; }
.dataTables_wrapper .dt-pageind{ font-weight:700; color:#0D1B27; padding:0 4px; }
.dataTables_wrapper .dataTables_paginate .ellipsis{ padding:0 4px; color:#9AAAB8; }
/* processing overlay + spinner */
.dataTables_wrapper{ position:relative; }
.dataTables_wrapper .dataTables_processing{ position:absolute; top:0; left:0; right:0; bottom:0; margin:0 !important; width:auto !important; height:auto !important; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.82); z-index:20; border-radius:16px; box-shadow:none !important; border:0 !important; }
/* reuse the app loader ring (.ring / at-spin) for table loading */
.dataTables_wrapper .dt-ring{ width:42px; height:42px; border:4px solid rgba(1,121,196,.16); border-top-color:#0179C4; border-radius:50%; animation:at-spin .7s linear infinite; filter:drop-shadow(0 3px 9px rgba(3,25,60,.18)); display:inline-block; }
/* empty state */
.dataTables_wrapper td.dataTables_empty{ padding:0 !important; }
.dataTables_wrapper .dt-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:44px 16px; color:#9AAAB8; }
.dataTables_wrapper .dt-empty svg{ width:38px; height:38px; color:#C6D3DF; }
.dataTables_wrapper .dt-empty span{ font-size:13.5px; font-weight:600; }

/* ===================================================================
   Sidebar dropdown submenus (has-arrow → .collapse.first-level)
   =================================================================== */
.left-sidebar .sidebar-item.at-open > .collapse.first-level{ display:block !important; }
.left-sidebar .sidebar-item:not(.at-open) > .collapse.first-level{ display:none !important; }
.left-sidebar .collapse.first-level{ list-style:none; padding:2px 0 4px; margin:0; }
.left-sidebar .collapse.first-level .sidebar-link{ padding-inline-start:46px !important; font-size:13px; gap:10px; }
.left-sidebar .sub-dot{ width:6px; height:6px; border-radius:50%; background:#C6D3DF; flex:none; display:inline-block; transition:background .12s; }
.left-sidebar .collapse.first-level .sidebar-link:hover .sub-dot{ background:#0179C4; }
.left-sidebar .collapse.first-level .sidebar-link.active{ background:rgba(1,156,239,.10) !important; color:var(--at-blue-d,#0179C4) !important; }
.left-sidebar .collapse.first-level .sidebar-link.active .sub-dot{ background:#0179C4; }

/* Wide (scrollX) tables: give the body a min-height so the horizontal scrollbar
   doesn't jam right under the header while empty/loading. */
.dataTables_wrapper .dataTables_scrollBody{ min-height:92px; }
.dataTables_wrapper .dataTables_scrollHead{ overflow:hidden !important; }

/* Collapsed sidebar: hide the dropdown submenu (bare dots) — expand the sidebar to use it */
.at-collapsed .left-sidebar .sidebar-item.at-open > .collapse.first-level,
.at-collapsed .left-sidebar .sidebar-item > .collapse.first-level{ display:none !important; }

/* Reserve the scrollbar gutter so hovering the sidebar (scrollbar appearing)
   never shifts the content sideways. */
.left-sidebar .at-sb-scroll,
.left-sidebar [data-simplebar],
.left-sidebar .sidebar-nav{ scrollbar-gutter:stable; }

/* Submenu items: real icons (not dots) + clear active highlight */
.left-sidebar .collapse.first-level .sidebar-link{ padding-inline-start:26px !important; gap:11px; }
.left-sidebar .sub-ic{ width:18px !important; height:18px !important; color:#8DA0B3; }
.left-sidebar .collapse.first-level .sidebar-link:hover .sub-ic{ color:#0179C4; }
.left-sidebar .collapse.first-level .sidebar-link.active{ background:linear-gradient(135deg,rgba(1,156,239,.14),rgba(1,121,196,.10)) !important; color:var(--at-blue-d,#0179C4) !important; box-shadow:inset 3px 0 0 #0179C4; }
.left-sidebar .collapse.first-level .sidebar-link.active .sub-ic{ color:#0179C4 !important; }

/* Sidebar: keep the scrollbar gutter reserved (no hover shift) but hide the
   thumb until the user hovers the sidebar — so no persistent scrollbar shows. */
.left-sidebar .at-sb-scroll::-webkit-scrollbar-thumb,
.left-sidebar [data-simplebar]::-webkit-scrollbar-thumb{ background:transparent !important; }
.left-sidebar .at-sb-scroll:hover::-webkit-scrollbar-thumb,
.left-sidebar [data-simplebar]:hover::-webkit-scrollbar-thumb{ background:#D5DEE7 !important; }
.left-sidebar .at-sb-scroll{ scrollbar-color:transparent transparent; }
.left-sidebar .at-sb-scroll:hover{ scrollbar-color:#D5DEE7 transparent; }

/* ===================================================================
   Admin list-page enrichment kit (shared) — header, KPI cards,
   at-lt table skin, status pills and compact action buttons.
   Used across admin list views for a consistent, enriched look.
   =================================================================== */
.al-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.al-head h1{ font-size:20px; font-weight:800; color:#0D1B27; margin:0; letter-spacing:-.01em; }
.al-head p{ font-size:12.5px; color:#7C8AA0; margin:2px 0 0; }
.al-head .al-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.al-new{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#0179C4,#019CEF); color:#fff; border:none; border-radius:11px; font-weight:700; font-size:13.5px; padding:10px 18px; text-decoration:none; box-shadow:0 5px 14px rgba(1,121,196,.26); }
.al-new:hover{ filter:brightness(1.05); color:#fff; }

.al-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.al-kpis.k3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.al-kpi{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 4px 16px rgba(13,27,39,.05); }
.al-ic{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; }
.al-num{ font-size:22px; font-weight:800; color:#0D1B27; letter-spacing:-.02em; line-height:1; }
.al-lbl{ font-size:12px; color:#6C8296; font-weight:600; margin-top:4px; }
@media (max-width:900px){ .al-kpis, .al-kpis.k3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .al-kpis, .al-kpis.k3{ grid-template-columns:1fr; } }

.dash-card{ background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(13,27,39,.05); overflow:hidden; }
.dash-card .table-responsive{ padding:0 !important; }
.at-lt{ border-collapse:separate; border-spacing:0; }
.at-lt thead th{ background:#F8FBFD; font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:#41576B; font-weight:700; padding:12px 16px; border-bottom:1px solid #EEF3F8; text-align:left; white-space:nowrap; }
.at-lt tbody td{ padding:12px 16px; border-bottom:1px solid #F4F7FA; font-size:13px; color:#2E4053; vertical-align:middle; white-space:nowrap; }
.at-lt tbody tr:last-child td{ border-bottom:0; }
.at-lt tbody tr:hover td{ background:#FBFDFF; }

.adm-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.adm-act{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.adm-ic{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#0179C4; border:1px solid #E4EBF1; background:#fff; transition:.12s; text-decoration:none; }
.adm-ic:hover{ background:#0179C4; color:#fff; border-color:#0179C4; }
.adm-ic.red{ color:#E0453A; } .adm-ic.red:hover{ background:#E0453A; color:#fff; border-color:#E0453A; }
.adm-ic.green{ color:#159E5C; } .adm-ic.green:hover{ background:#159E5C; color:#fff; border-color:#159E5C; }
.adm-chip{ border:none; border-radius:8px; font-size:11.5px; font-weight:700; padding:6px 12px; cursor:pointer; white-space:nowrap; color:#fff; text-decoration:none; display:inline-flex; align-items:center; }
.adm-chip-blue{ background:#0179C4; } .adm-chip-blue:hover{ filter:brightness(1.06); color:#fff; }
.adm-chip-red{ background:#E0453A; } .adm-chip-red:hover{ filter:brightness(1.06); color:#fff; }
.adm-chip-green{ background:#159E5C; } .adm-chip-green:hover{ filter:brightness(1.06); color:#fff; }


/* ------------------------------------------------------------------ *
 * Collapsed rail: the icon sits in the middle of it.
 *
 * When the sidebar collapses, each label is hidden with opacity but keeps
 * its width, and the link keeps its 15px gap, so the icon ends up about
 * 18px off centre. Earlier rules in this file set flex:0 1 auto !important
 * on the same element, which restores the text width whatever else is
 * asked for, so the label has to be collapsed on every axis at once.
 *
 * Desktop only: below 1024px the sidebar is a drawer and shows its labels.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    html body.at-collapsed .left-sidebar .sidebar-link { gap: 0 !important; }

    html body.at-collapsed .left-sidebar .sidebar-link > .hide-menu {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}


/* ------------------------------------------------------------------ *
 * Arabic nav labels wrap instead of being cut.
 *
 * The same phrase runs longer in Arabic, so labels sized to English widths
 * lost their final word -- and because the theme sets text-overflow:clip
 * they lost it with no ellipsis to show anything was missing. "Users &
 * Drivers" became a phrase ending in a different word.
 *
 * Expanded rail only: collapsed hides the labels entirely.
 * ------------------------------------------------------------------ */
[dir="rtl"] body:not(.at-collapsed) .left-sidebar .sidebar-link {
    align-items: center;
    min-height: 42px;
}

[dir="rtl"] body:not(.at-collapsed) .left-sidebar .sidebar-link > .hide-menu {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
    flex: 1 1 auto !important;
}

/* The theme borders EVERY simplebar content area. In the sidebar that draws a
   second rule 11px inside the sidebar's own edge, with simplebar's scrollbar
   gutter left showing as a pale strip between the two. The sidebar already has
   its own border-inline-end; it does not need the theme's as well. */
.left-sidebar .simplebar-content { border-right: 0; }