/* ==========================================================================
   RENTO VPN — Global Futuristic Theme
   Orange (#ff7a00) + Navy (#16213e). Loaded last on every page so it overrides
   the base Maxton/Bootstrap styles WITHOUT touching page logic.
   ========================================================================== */
:root{
  --rento-orange:#ff7a00; --rento-orange-2:#ff5a1f; --rento-orange-soft:#fff2e8;
  --rento-navy:#16213e; --rento-navy-2:#0f1830; --rento-navy-3:#1c2a4a;
  --rento-ink:#1b2440; --rento-muted:#6b7794; --rento-line:#e9edf5;
  --rento-bg:#f4f6fb; --rento-card:#ffffff; --rento-ok:#2ecc71; --rento-warn:#f6a609; --rento-danger:#ff5470;
  --rento-radius:16px; --rento-shadow:0 10px 30px rgba(22,33,62,.08);
}

/* ---- Base canvas ---- */
body, .wrapper{ background:var(--rento-bg) !important; color:var(--rento-ink) !important;
  font-family:Inter,"Segoe UI",Roboto,system-ui,sans-serif !important; }
.page-wrapper, .page-content{ background:transparent !important; }
a{ color:var(--rento-orange); }
a:hover{ color:var(--rento-orange-2); }
::selection{ background:rgba(255,122,0,.22); }

/* ---- Sidebar (navy with orange accents) ---- */
.sidebar-wrapper{
  background:linear-gradient(185deg,var(--rento-navy),var(--rento-navy-2)) !important;
  border-right:1px solid rgba(255,255,255,.05) !important; box-shadow:6px 0 28px rgba(15,24,48,.18) !important; }
.sidebar-header{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.sidebar-header .logo-text{ color:#fff !important; font-weight:800 !important; letter-spacing:.4px; }
.sidebar-wrapper .metismenu a{ color:#aeb9d6 !important; border-radius:11px !important; margin:2px 12px !important;
  padding:10px 14px !important; transition:.18s !important; font-weight:500; }
.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a.active{ background:rgba(255,122,0,.14) !important; color:#fff !important; }
.sidebar-wrapper .metismenu .mm-active>a{ background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important; box-shadow:0 8px 20px rgba(255,122,0,.34) !important; }
.sidebar-wrapper .menu-label{ color:#6f7aa0 !important; text-transform:uppercase; font-size:11px; letter-spacing:1.2px; padding-left:22px; }
.sidebar-wrapper .parent-icon{ color:var(--rento-orange) !important; }
.sidebar-wrapper .metismenu .mm-active>a .parent-icon,
.sidebar-wrapper .metismenu a:hover .parent-icon{ color:#fff !important; }
.sidebar-wrapper .metismenu ul{ background:rgba(0,0,0,.16) !important; border-radius:12px; margin:2px 12px; }
.sidebar-wrapper .metismenu ul a{ margin:1px 6px !important; font-size:13.5px; }
.simplebar-scrollbar:before{ background:rgba(255,122,0,.5) !important; }

/* ---- Top navbar ---- */
.topbar{ background:rgba(255,255,255,.9) !important; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rento-line) !important; box-shadow:0 2px 16px rgba(22,33,62,.05) !important; }
.topbar .navbar-nav .nav-link{ color:var(--rento-navy) !important; }
.page-breadcrumb .breadcrumb-item.active{ color:var(--rento-orange) !important; }
.breadcrumb-title{ color:var(--rento-ink) !important; font-weight:700; }

/* ---- Cards ---- */
.card{ background:var(--rento-card) !important; border:1px solid var(--rento-line) !important;
  border-radius:var(--rento-radius) !important; box-shadow:var(--rento-shadow) !important;
  transition:.2s transform,.2s box-shadow !important; }
.card:hover{ box-shadow:0 16px 40px rgba(22,33,62,.12) !important; }
.card .card-header{ background:transparent !important; border-bottom:1px solid var(--rento-line) !important;
  font-weight:700; color:var(--rento-ink) !important; }
.radius-10{ border-radius:var(--rento-radius) !important; }

/* Stat / gradient cards -> Rento palette (override Maxton gradients) */
.bg-gradient-blues, .bg-gradient-ocean, .bg-gradient-cosmic, .bg-gradient-moonlit{
  background:linear-gradient(135deg,var(--rento-navy-3),var(--rento-navy)) !important; color:#fff !important; }
.bg-gradient-ibiza, .bg-gradient-kyoto, .bg-gradient-lush, .bg-gradient-ohhappiness, .bg-gradient-orange{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; color:#fff !important; }
.card_box_45{ position:relative; overflow:hidden; }
.card_box_45::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); }

/* ---- Buttons ---- */
.btn{ border-radius:11px !important; font-weight:600 !important; transition:.16s transform,.16s filter !important; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary,.btn-info{ background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border:0 !important; color:#fff !important; box-shadow:0 8px 20px rgba(255,122,0,.28) !important; }
.btn-primary:hover,.btn-info:hover{ filter:brightness(1.06); color:#fff !important; }
.btn-dark,.btn-secondary{ background:var(--rento-navy) !important; border:0 !important; color:#fff !important; }
.btn-outline-primary{ border:1.5px solid var(--rento-orange) !important; color:var(--rento-orange) !important; }
.btn-outline-primary:hover{ background:var(--rento-orange) !important; color:#fff !important; }
.btn-success{ background:var(--rento-ok) !important; border:0 !important; }
.btn-danger{ background:var(--rento-danger) !important; border:0 !important; }
.btn-warning{ background:var(--rento-warn) !important; border:0 !important; color:#fff !important; }
.btn-light{ background:#fff !important; border:1px solid var(--rento-line) !important; color:var(--rento-ink) !important; }

/* ---- Badges / chips ---- */
.badge.bg-primary,.badge.bg-info{ background:var(--rento-orange) !important; }
.badge.bg-success{ background:var(--rento-ok) !important; }
.badge.bg-danger{ background:var(--rento-danger) !important; }
.badge.bg-warning{ background:var(--rento-warn) !important; color:#fff !important; }
.badge.bg-secondary{ background:var(--rento-navy) !important; }

/* ---- Forms ---- */
.form-control,.form-select{ border-radius:11px !important; border:1px solid var(--rento-line) !important;
  background:#fff !important; color:var(--rento-ink) !important; transition:.15s box-shadow,.15s border-color !important; }
.form-control:focus,.form-select:focus{ border-color:var(--rento-orange) !important;
  box-shadow:0 0 0 3px rgba(255,122,0,.18) !important; }
.form-label{ font-weight:600; color:var(--rento-ink); }
.input-group-text{ background:var(--rento-orange-soft) !important; border:1px solid var(--rento-line) !important;
  color:var(--rento-orange) !important; border-radius:11px; }
.form-check-input:checked{ background-color:var(--rento-orange) !important; border-color:var(--rento-orange) !important; }

/* ---- Tables ---- */
.table{ color:var(--rento-ink) !important; }
.table > :not(caption) > * > *{ border-color:var(--rento-line) !important; }
.table thead th, .table > thead{ background:var(--rento-orange-soft) !important; color:var(--rento-navy) !important;
  text-transform:uppercase; font-size:12px; letter-spacing:.4px; border-bottom:2px solid rgba(255,122,0,.25) !important; }
.table-hover > tbody > tr:hover > *{ background:rgba(255,122,0,.05) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--rento-orange) !important; border:0 !important; color:#fff !important; border-radius:8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:8px !important; }

/* ---- Modals / dropdowns ---- */
.modal-content{ border-radius:18px !important; border:0 !important; box-shadow:0 30px 80px rgba(15,24,48,.3) !important; }
.modal-header{ border-bottom:1px solid var(--rento-line) !important; }
.dropdown-menu{ border-radius:14px !important; border:1px solid var(--rento-line) !important; box-shadow:var(--rento-shadow) !important; }
.dropdown-item:hover{ background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important; }

/* ---- Misc text helpers used by the panel ---- */
.text-primary{ color:var(--rento-orange) !important; }
.bg-primary{ background:var(--rento-orange) !important; }
.border-primary{ border-color:var(--rento-orange) !important; }
.alert-primary,.alert-info{ background:var(--rento-orange-soft) !important; border-color:rgba(255,122,0,.3) !important; color:#a85400 !important; }

/* ---- Login page polish (if base login used) ---- */
.authentication-forgot, .auth-cover, .section-authentication-login{ background:var(--rento-bg) !important; }

/* Subtle entrance for cards (futuristic feel, GPU-friendly) */
@keyframes rentoFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.page-content .card{ animation:rentoFade .35s ease both; }

/* ==========================================================================
   DIALOGS / POPUPS — Rento themed (lobibox, SweetAlert, Bootstrap modals)
   ========================================================================== */
/* Lobibox notifications + confirm boxes */
.lobibox{ border-radius:18px !important; overflow:hidden !important; border:0 !important;
  box-shadow:0 30px 80px rgba(15,24,48,.35) !important; }
.lobibox-header{ background:linear-gradient(135deg,var(--rento-navy-3),var(--rento-navy)) !important;
  color:#fff !important; border:0 !important; }
.lobibox-body{ color:var(--rento-ink) !important; padding:22px !important; }
.lobibox-footer{ background:#fff !important; border-top:1px solid var(--rento-line) !important; }
.lobibox-btn-default, .lobibox-footer .lobibox-btn{ border-radius:11px !important; font-weight:700 !important; border:0 !important; }
.lobibox-btn.lobibox-btn-yes, .lobibox-btn-cancel.btn-primary, .lobibox-btn[data-type="ok"]{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; color:#fff !important; }
.lobibox-btn.lobibox-btn-no, .lobibox-btn[data-type="cancel"]{ background:#eef0f6 !important; color:var(--rento-ink) !important; }
/* Lobibox toast colors */
.lobibox-notify.lobibox-notify-success{ background:var(--rento-ok) !important; }
.lobibox-notify.lobibox-notify-error{ background:var(--rento-danger) !important; }
.lobibox-notify.lobibox-notify-warning{ background:var(--rento-warn) !important; }
.lobibox-notify.lobibox-notify-info{ background:var(--rento-orange) !important; }
.lobibox-notify-title, .lobibox-notify-msg{ color:#fff !important; }

/* SweetAlert / SweetAlert2 (used on some pages) */
.swal2-popup{ border-radius:20px !important; }
.swal2-title{ color:var(--rento-navy) !important; }
.swal2-confirm, .swal2-styled.swal2-confirm{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border-radius:11px !important; box-shadow:0 8px 20px rgba(255,122,0,.3) !important; }
.swal2-cancel, .swal2-styled.swal2-cancel{ background:var(--rento-navy) !important; border-radius:11px !important; }
.swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:var(--rento-ok) !important; }
.swal2-icon.swal2-warning{ color:var(--rento-warn) !important; border-color:var(--rento-warn) !important; }

/* SweetAlert (v1, bootstrap-sweetalert) */
.sweet-alert button.confirm{ background:var(--rento-orange) !important; border-radius:11px !important; }
.sweet-alert h2{ color:var(--rento-navy) !important; }

/* Bootstrap modal accents */
.modal-header{ background:linear-gradient(135deg,var(--rento-navy-3),var(--rento-navy)); color:#fff; border:0 !important; border-radius:18px 18px 0 0; }
.modal-header .btn-close{ filter:invert(1) brightness(2); }
.modal-footer{ border-top:1px solid var(--rento-line) !important; }

/* bootbox (if present) */
.bootbox .modal-footer .btn-primary{ background:var(--rento-orange) !important; border:0 !important; }

/* ==========================================================================
   DROPDOWN MENUS — Rento themed (avatar menu, View Users/Resellers actions)
   ========================================================================== */
.dropdown-menu{
  border:0 !important; border-radius:14px !important;
  box-shadow:0 18px 50px rgba(15,24,48,.18) !important;
  padding:8px !important; overflow:hidden;
}
.dropdown-item{
  border-radius:10px !important; font-weight:600 !important; padding:10px 14px !important;
  color:var(--rento-ink) !important; transition:.12s background,.12s color;
}
.dropdown-item:hover, .dropdown-item:focus{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important;
}
.dropdown-item i, .dropdown-item .bx{ margin-right:8px; }
.dropdown-item:hover i{ color:#fff !important; }
.dropdown-divider{ border-top-color:var(--rento-line) !important; opacity:1; }
/* The orange "Action" button on View Users / View Resellers */
.btn-warning, .dropdown-toggle.btn-warning{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border:0 !important; color:#fff !important; font-weight:700 !important;
  box-shadow:0 6px 16px rgba(255,122,0,.28) !important;
}

/* ==========================================================================
   TABLES, FORMS, TITLES — global professional polish (all panel pages)
   ========================================================================== */
/* Page section titles like "VIEW USER LIST", "ACCOUNT & PAYMENTS" */
.text-uppercase{ letter-spacing:.6px; }
h6.text-uppercase{ color:var(--rento-ink); font-weight:800; }

/* Tables (View Users / View Resellers / logs) */
.table{ border-color:var(--rento-line); }
.table > :not(caption) > * > *{ padding:.85rem .9rem; }
.table thead th, .table > thead > tr > th{
  background:linear-gradient(135deg, rgba(255,122,0,.10), rgba(255,122,0,.04)) !important;
  color:var(--rento-ink) !important; font-weight:800 !important;
  text-transform:uppercase; font-size:12px; letter-spacing:.4px;
  border-bottom:2px solid rgba(255,122,0,.25) !important;
}
.table tbody tr{ transition:background .12s; }
.table tbody tr:hover{ background:rgba(255,122,0,.045) !important; }
.table-bordered > :not(caption) > * > *{ border-color:var(--rento-line); }

/* DataTables controls */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border:0 !important; color:#fff !important; border-radius:8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:8px !important; }
.dataTables_filter input, .dataTables_length select{
  border:1px solid var(--rento-line) !important; border-radius:10px !important; padding:6px 10px !important;
}

/* Form controls — orange focus ring everywhere */
.form-control:focus, .form-select:focus{
  border-color:var(--rento-orange) !important;
  box-shadow:0 0 0 .2rem rgba(255,122,0,.18) !important;
}
.form-control, .form-select{ border-radius:11px; border-color:var(--rento-line); }
.form-label{ font-weight:600; color:var(--rento-ink); }

/* Badges */
.badge.bg-primary{ background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; }

/* Inputs/cards rounded consistency */
.input-group-text{ border-radius:11px; }
.alert{ border-radius:13px; }

/* ==========================================================================
   SPACING / LAYOUT NORMALIZATION — even, consistent rhythm across pages
   ========================================================================== */
/* Equal-height stat cards so rows line up evenly */
.row > [class*="col"] > .card{ height:calc(100% - 1.5rem); }
.stat-card{ height:100%; }
.card{ margin-bottom:1.5rem; }

/* Kill leftover empty/hidden rows from the template that reserve no content */
.row.d-none, .col.d-none{ display:none !important; }
.row:empty{ display:none !important; margin:0 !important; }

/* Tidy the page content padding so it isn't cramped or too airy on phones */
.page-content{ padding:1.1rem !important; }
@media (max-width: 576px){
  .page-content{ padding:.85rem !important; }
  .card{ margin-bottom:1rem; }
  .card-body{ padding:1.1rem; }
}

/* Stat-card internals: vertical centering + consistent number sizing */
.stat-card .card-body{ display:flex; align-items:center; }
.stat-card h4{ font-weight:800; color:var(--rento-ink); }
.widgets-icons{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-size:24px; border-radius:14px; }

/* Breadcrumb title spacing consistency */
.page-breadcrumb{ margin-bottom:1rem !important; }

/* ==========================================================================
   MODALS / DIALOGS — clean, on-brand (matches the polished modal aesthetic)
   ========================================================================== */
.modal-content{
  border:0 !important; border-radius:22px !important;
  box-shadow:0 30px 80px rgba(15,23,42,.28) !important; overflow:hidden;
}
.modal-header{
  border-bottom:1px solid var(--rento-line) !important;
  padding:18px 22px !important; align-items:flex-start;
}
.modal-title{ color:#fff !important; font-weight:800 !important; letter-spacing:-.2px; }
.modal-body{ padding:20px 22px !important; }
.modal-footer{ border-top:1px solid var(--rento-line) !important; padding:16px 22px !important; }
.modal-header .btn-close{ border-radius:50%; opacity:.6; }
.modal-header .btn-close:hover{ opacity:1; }
.modal.fade .modal-dialog{ transition:transform .18s ease-out, opacity .18s; }

/* Header accent icon chip (if a modal uses a leading icon) */
.modal-header .modal-icon{
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)); color:#fff; font-size:22px; margin-right:12px;
}

/* Info "chip card" rows (Server IP / Protocol / Usage-by-service style) */
.info-chip{
  display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--rento-line);
  border-radius:14px; background:#fff; margin-bottom:10px;
}
.info-chip .ic{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,0,.12); color:var(--rento-orange); font-size:20px;
}
.info-chip .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--rento-muted); font-weight:700; }
.info-chip .val{ font-weight:700; color:var(--rento-ink); }

/* Modal primary buttons keep the orange gradient */
.modal-footer .btn-primary, .modal .btn-primary{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; border:0 !important;
}
/* Soft-tint icon backgrounds used across cards -> recolour the purple defaults to orange family */
.bg-light-primary{ background:rgba(255,122,0,.14) !important; }
.text-primary{ color:var(--rento-orange) !important; }
.widgets-icons.bg-light-primary{ color:var(--rento-orange) !important; }

/* ==========================================================================
   DROPDOWN ITEM CONSISTENCY — make View User / View Reseller / View Subadmin
   action menus identical regardless of inline btn classes in serverside HTML
   ========================================================================== */
.dropdown-menu .btn.dropdown-item,
.dropdown-menu .dropdown-item.btn-light,
.dropdown-menu .dropdown-item.btn-sm,
.dropdown-menu .dropdown-item.btn-secondary{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
  width:100% !important;
  white-space:nowrap !important;
  font-weight:600 !important;
  color:var(--rento-ink) !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  margin:0 !important;
}
.dropdown-menu .btn.dropdown-item:hover,
.dropdown-menu .dropdown-item.btn-light:hover,
.dropdown-menu .dropdown-item.btn-sm:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important;
}
/* keep the destructive item readable (red text, soft red hover) */
.dropdown-menu .dropdown-item.text-danger{ color:#e11d48 !important; }
.dropdown-menu .dropdown-item.text-danger:hover{
  background:#e11d48 !important; color:#fff !important;
}
/* the split "Action" toggle button — consistent orange on all three pages */
.btn-group .dropdown-toggle.btn-primary,
.btn-group .btn-primary.split-bg-primary{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border:0 !important; color:#fff !important; font-weight:700 !important;
  box-shadow:0 6px 16px rgba(255,122,0,.28) !important;
}

/* ==========================================================================
   RENTO v2 — ALERTS, EXPIRY BANNER, SPACING & CROSS-PAGE CONSISTENCY
   ========================================================================== */

/* ---- Themed success / status alerts (consistent on EVERY page) ---------- */
.alert{
  border-radius:14px !important;
  border:1px solid var(--rento-line) !important;
  box-shadow:0 8px 24px rgba(22,33,62,.07) !important;
  padding:14px 16px !important;
}
/* keep the coloured left accent the panel already uses, just refined */
.alert.border-success,.alert.border-start.border-success{ border-left:5px solid var(--rento-ok) !important; }
.alert.border-danger,.alert.border-start.border-danger{ border-left:5px solid var(--rento-danger) !important; }
.alert.border-warning,.alert.border-start.border-warning{ border-left:5px solid var(--rento-warn) !important; }
.alert .text-success,.alert h6.text-success{ color:var(--rento-ok) !important; }
.alert .font-35{ font-size:30px !important; line-height:1 !important; }
.btn-close:focus{ box-shadow:none !important; }

/* ---- Account expiry countdown / lock banner (top navbar) ---------------- */
.rento-expiry-banner{
  display:flex; align-items:center; gap:12px; flex:1 1 auto;
  margin:0 10px; padding:9px 16px; border-radius:12px;
  font-size:13.5px; font-weight:600; line-height:1.3;
  box-shadow:0 6px 18px rgba(22,33,62,.10); animation:rentoFade .35s ease both;
}
.rento-expiry-banner i{ font-size:20px; flex:0 0 auto; }
.rento-expiry-banner span{ flex:1 1 auto; }
.rento-expiry-banner .rento-expiry-btn{
  flex:0 0 auto; background:#fff; color:#16213e; text-decoration:none;
  font-weight:800; font-size:12.5px; padding:6px 14px; border-radius:999px;
  white-space:nowrap; transition:transform .12s, box-shadow .12s;
}
.rento-expiry-banner .rento-expiry-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.rento-expiry-warn{ background:linear-gradient(135deg,#f6a609,#ff8a1f); color:#fff; }
.rento-expiry-locked{ background:linear-gradient(135deg,#ff5470,#e21b4c); color:#fff; }
@media (max-width:640px){
  .rento-expiry-banner{ font-size:12px; padding:8px 12px; gap:8px; }
  .rento-expiry-banner i{ font-size:18px; }
}

/* ---- Page spacing & layout consistency across the whole panel ----------- */
.page-content{ padding:1.25rem 1.25rem 2rem !important; }
.page-breadcrumb{ margin-bottom:1.1rem !important; }
.page-content .card{ margin-bottom:1.25rem !important; }
.page-content h6.text-uppercase{ letter-spacing:.6px; font-weight:800; color:var(--rento-navy); }
.page-content hr{ opacity:.12; margin:.6rem 0 1rem; }
.card .card-body{ padding:1.15rem 1.25rem !important; }
/* equal-height stat cards so dashboards line up cleanly */
.row [class*="col-"] > .card{ height:calc(100% - 1.25rem); }
.row{ row-gap:.25rem; }
/* tables breathe a little more */
.table > :not(caption) > * > *{ padding:.7rem .75rem !important; }
.dataTables_wrapper .row{ align-items:center; }
.dataTables_wrapper .dataTables_filter input{ border-radius:10px !important; }
/* form controls + selects unified */
.form-control, .form-select{ border-radius:10px !important; }
.input-group-text{ border-radius:10px 0 0 10px !important; }
/* buttons consistent rounding */
.btn{ border-radius:11px !important; }
.btn-sm{ border-radius:9px !important; }
.dropdown-item{ border-radius:8px !important; }
@media (max-width:640px){
  .page-content{ padding:1rem .85rem 2rem !important; }
  .card .card-body{ padding:1rem !important; }
}

/* ==========================================================================
   RENTO v3 — FULL PAGE REDESIGN (applies a consistent modern look to every
   one of the panel pages without changing any page logic)
   ========================================================================== */

/* ---- Page header + breadcrumb: turn into a clean title block ------------- */
.page-breadcrumb{
  background:#fff; border:1px solid var(--rento-line); border-radius:14px;
  padding:.8rem 1.1rem !important; box-shadow:0 6px 18px rgba(22,33,62,.05);
  margin-bottom:1.25rem !important;
}
.page-breadcrumb .breadcrumb-title{
  font-size:1.05rem; font-weight:800; color:var(--rento-navy) !important;
  border-right:2px solid var(--rento-line); padding-right:.9rem !important;
}
.page-breadcrumb .breadcrumb{ background:transparent; }
.page-breadcrumb .breadcrumb-item a{ color:var(--rento-muted); }
.page-breadcrumb .breadcrumb-item a i{ color:var(--rento-orange); }
.page-breadcrumb .breadcrumb-item.active{ font-weight:700; }

/* Section headings ("CREATE NOTICE", "NOTICE LIST", etc.) get an accent bar */
.page-content h6.text-uppercase{
  position:relative; padding-left:14px; font-weight:800; color:var(--rento-navy);
}
.page-content h6.text-uppercase::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:18px; border-radius:4px;
  background:linear-gradient(180deg,var(--rento-orange),var(--rento-orange-2));
}

/* ---- Cards: refined surface + coloured header bars ----------------------- */
/* (no global overflow:hidden here - it would clip Leaflet maps, charts and
    detached action dropdowns) */
/* Maxton/panel coloured header bars (the "List", "Top Resellers", etc.) */
.card-header.bg-primary, .card .card-header[style*="background"],
.card-header.text-white, .bg-primary.card-header{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important; border:0 !important; font-weight:800; letter-spacing:.3px;
  padding:.95rem 1.15rem !important;
}
.card-header h5,.card-header h6{ margin:0; font-weight:800; }
/* primary/navy gradient panels keep white text legible */
.bg-gradient-blues *, .bg-gradient-cosmic *, .bg-gradient-ocean *{ color:#fff !important; }

/* ---- Stat / summary cards (number + label + icon) ----------------------- */
.card .card-body .row .col > .d-flex,
.widgets-icons, .widgets-icons-2{ align-items:center; }
.widgets-icons-2{ border-radius:14px !important; }
/* the small icon chips inside cards */
.bg-gradient-burning,.bg-gradient-scooter,.bg-gradient-bloody,.bg-gradient-deepblue{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; color:#fff !important;
}

/* ---- Buttons: gradient primary + hover lift ----------------------------- */
.btn{ font-weight:700; letter-spacing:.2px; transition:transform .12s, box-shadow .15s, filter .15s; }
.btn:active{ transform:translateY(0); }
.btn-primary, .btn.btn-primary{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  border:0 !important; box-shadow:0 8px 20px rgba(255,122,0,.30) !important;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,122,0,.42) !important; filter:saturate(1.05); }
.split-bg-primary{ background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; border:0 !important; }
.btn-outline-primary{ color:var(--rento-orange) !important; border:1.5px solid var(--rento-orange) !important; }
.btn-outline-primary:hover{ background:var(--rento-orange) !important; color:#fff !important; transform:translateY(-2px); }
.btn-light{ background:#fff !important; border:1px solid var(--rento-line) !important; color:var(--rento-navy) !important; }
.btn-light:hover{ background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important; }
.btn-danger{ box-shadow:0 8px 20px rgba(255,84,112,.28) !important; }
.btn-danger:hover{ transform:translateY(-2px); }

/* ---- Forms: clean inputs + orange focus --------------------------------- */
.form-control, .form-select, .input-group-text, textarea.form-control{
  border:1.5px solid var(--rento-line) !important; background:#fff !important; color:var(--rento-ink) !important;
  padding:.6rem .8rem !important;
}
.form-control::placeholder{ color:#9aa6c0 !important; }
.form-control:focus, .form-select:focus{
  border-color:var(--rento-orange) !important; box-shadow:0 0 0 .22rem rgba(255,122,0,.16) !important;
}
.input-group-text{ color:var(--rento-orange) !important; background:#fff !important; }
.form-label{ font-weight:600; color:var(--rento-navy); margin-bottom:.3rem; }
/* switches + checks in Rento orange */
.form-check-input:checked{ background-color:var(--rento-orange) !important; border-color:var(--rento-orange) !important; }
.form-switch .form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(255,122,0,.18) !important; }

/* ---- Tables + DataTables controls --------------------------------------- */
.table{ --bs-table-bg:transparent; }
.table > thead th{
  background:#fbfcfe !important; color:var(--rento-navy) !important; font-weight:800 !important;
  text-transform:uppercase; font-size:11.5px; letter-spacing:.5px;
  border-bottom:2px solid rgba(255,122,0,.25) !important; white-space:nowrap;
}
.table > tbody > tr{ transition:background .12s; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg:rgba(244,246,251,.6); }
.table > tbody > tr:hover > *{ background:rgba(255,122,0,.06) !important; }
.table-bordered, .table-bordered td, .table-bordered th{ border-color:var(--rento-line) !important; }
.table-responsive{ border-radius:12px; }
/* DataTables length + search + info + pagination */
.dataTables_wrapper .dataTables_length select{
  border:1.5px solid var(--rento-line) !important; border-radius:10px !important; padding:.35rem 1.6rem .35rem .6rem !important;
}
.dataTables_wrapper .dataTables_filter input{
  border:1.5px solid var(--rento-line) !important; border-radius:10px !important; padding:.45rem .75rem !important; min-width:200px;
}
.dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--rento-orange) !important; box-shadow:0 0 0 .2rem rgba(255,122,0,.15) !important; outline:none; }
.dataTables_wrapper .dataTables_info{ color:var(--rento-muted) !important; font-size:12.5px; padding-top:.85rem; }
.dataTables_wrapper .dataTables_paginate{ padding-top:.5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:8px !important; margin:0 2px !important; border:1.5px solid var(--rento-orange-soft) !important;
  color:var(--rento-orange-2) !important; padding:.2rem .55rem !important; background:#fff !important;
  font-size:12.5px !important; min-width:30px; line-height:1.35 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important; border:1.5px solid transparent !important; box-shadow:0 4px 12px rgba(255,122,0,.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important; border-color:var(--rento-orange) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{ color:var(--rento-muted) !important; border-color:var(--rento-line) !important; background:#fff !important; opacity:.55; box-shadow:none !important; }
.dataTables_empty{ color:var(--rento-muted) !important; padding:28px !important; text-align:center; }

/* ---- Dropdown action menus ---------------------------------------------- */
.dropdown-menu{ padding:.4rem !important; }
.dropdown-item{ padding:.5rem .75rem !important; font-weight:500; }
.dropdown-item.text-danger:hover{ background:rgba(255,84,112,.12) !important; color:#e21b4c !important; }
.dropdown-divider{ margin:.3rem .25rem !important; border-color:var(--rento-line) !important; }

/* ---- Modals ------------------------------------------------------------- */
.modal-content{ border:0 !important; border-radius:18px !important; box-shadow:0 30px 80px rgba(15,24,48,.35) !important; overflow:hidden; }
.modal-header{ background:linear-gradient(135deg,var(--rento-navy-3),var(--rento-navy)) !important; color:#fff !important; border:0 !important; }
.modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(2); }
.modal-footer{ border-top:1px solid var(--rento-line) !important; }

/* ---- User box / avatar in the top bar ----------------------------------- */
.user-box .user-img, .topbar .user-img{ border:2px solid var(--rento-orange) !important; padding:1px; }
.topbar .user-info .user-name{ font-weight:800; color:var(--rento-navy) !important; }
.topbar .user-info .designattion{ color:var(--rento-muted) !important; text-transform:capitalize; font-size:12px; }

/* ---- Misc polish -------------------------------------------------------- */
.back-to-top{ background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important; border-radius:12px !important; box-shadow:0 10px 24px rgba(255,122,0,.4) !important; }
hr{ border-color:var(--rento-line); }
.pace .pace-progress{ background:var(--rento-orange) !important; }
/* custom scrollbars on the page */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,122,0,.45); border-radius:10px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,122,0,.7); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- Responsive spacing tightening -------------------------------------- */
@media (max-width:991px){
  .page-breadcrumb{ padding:.7rem .9rem !important; }
  .card .card-body{ padding:1rem !important; }
}
@media (max-width:575px){
  .dataTables_wrapper .dataTables_filter input{ min-width:0; width:100%; }
  .breadcrumb-title{ font-size:.95rem; }
  .btn{ font-size:.86rem; }
}

/* ==========================================================================
   RENTO v4 — TARGETED FIXES (notice editor, FAB/footer, dropdown polish)
   ========================================================================== */

/* ---- Summernote (Notice editor) must stay inside its card --------------- */
.note-editor.note-frame, .note-editor.note-airframe{
  max-width:100% !important; width:100% !important; border-radius:12px !important;
  border:1.5px solid var(--rento-line) !important; overflow:hidden;
}
.note-editor .note-toolbar{ flex-wrap:wrap !important; }
.note-editor .note-editing-area{ max-width:100% !important; }
.note-editor .note-editable{
  max-width:100% !important; overflow-x:auto;
  overflow-wrap:anywhere; word-break:break-word;
}
.note-editor .note-editable a{ overflow-wrap:anywhere; word-break:break-all; }
/* the input-group that wraps the editor must not be allowed to overflow */
.input-group .note-editor{ flex:1 1 auto; width:1% !important; min-width:0; }
.card .card-body .input-group{ max-width:100%; }

/* ---- Footer: FIXED to the viewport bottom (matches the clean ZEIT layout).
       Page content reserves room below via padding-bottom, and the back-to-top
       FAB sits ABOVE the footer (never on it). ------------------------------- */
.page-footer{
  position:fixed !important;
  left:250px; right:0; bottom:0;
  margin:0 !important;
  padding:9px 16px !important;
  background:var(--rento-card) !important;
  border-top:1px solid var(--rento-line) !important;
  color:var(--rento-muted) !important;
  z-index:1030 !important;
  font-size:13px;
}
.wrapper.toggled .page-footer{ left:70px; }
@media (max-width:1024px){
  .page-footer{ left:0 !important; }
  .wrapper.toggled .page-footer{ left:0 !important; }
}
.page-footer a{ color:var(--rento-orange) !important; }
.page-footer .col-6.text-end{ text-align:right !important; }
/* reserve room so nothing hides behind the fixed footer */
.page-content{ padding-bottom:88px !important; }
.back-to-top{ bottom:84px !important; right:14px !important; z-index:1031 !important; width:44px; height:44px; line-height:44px; }

/* ---- Top-bar user dropdown matches the rest of the dropdowns ------------- */
.user-box .dropdown-menu{ padding:.4rem !important; border-radius:14px !important; box-shadow:var(--rento-shadow) !important; }
.user-box .dropdown-item{ border-radius:9px !important; font-weight:600; padding:.55rem .8rem !important; }
.user-box .dropdown-item:hover{ background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important; }
.dropdown-item i{ margin-right:8px; vertical-align:middle; }

/* ---- Sidebar bottom info clears the mobile browser bar ------------------- */
.sidebar-wrapper .simplebar-content{ padding-bottom:24px; }

/* ==========================================================================
   RENTO v5 — screenshot-driven fixes (spacing, dropdowns, overlap, polish)
   ========================================================================== */

/* (1) Action dropdown items that are buttons must read BOLD like View User */
.dropdown-item.btn, .btn.dropdown-item{ font-weight:700 !important; }
.dropdown-menu .btn.btn-light.dropdown-item{
  border:1px solid var(--rento-line) !important; margin:3px 0 !important;
  text-align:center; border-radius:10px !important;
}
.dropdown-menu .btn.btn-light.dropdown-item:hover{
  background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important;
  border-color:rgba(255,122,0,.4) !important;
}
/* plain (non-button) dropdown items stay lighter so the hierarchy still reads */
.dropdown-menu > a.dropdown-item:not(.btn){ font-weight:600 !important; }

/* (2) Maintenance / registration banners — match the expiry banner look */
.rento-sys-maint{background:linear-gradient(90deg,#fff7ed,#ffedd5)!important;border:1px solid #fed7aa!important;color:#9a3412!important}
.rento-sys-maint i{color:#ea580c!important}
.rento-sys-lock{background:linear-gradient(90deg,#fef2f2,#fee2e2)!important;border:1px solid #fecaca!important;color:#991b1b!important}
.rento-sys-lock i{color:#dc2626!important}

/* (3) Top-bar user dropdown (Profile / Settings / Logout) — consistent styling */
.user-box .dropdown-menu{padding:.4rem!important;min-width:210px;border-radius:14px!important;
  box-shadow:0 18px 50px rgba(15,24,48,.25)!important;border:1px solid var(--rento-line)!important;margin-top:8px!important}
.user-box .dropdown-menu .dropdown-item{border-radius:10px!important;padding:.6rem .7rem!important;font-weight:600!important;
  display:flex;align-items:center;gap:10px;color:var(--rento-ink)!important}
.user-box .dropdown-menu .dropdown-item i{font-size:18px;color:var(--rento-orange)}
.user-box .dropdown-menu .dropdown-item:hover{background:var(--rento-orange-soft)!important;color:var(--rento-orange-2)!important}
.user-box .dropdown-menu .dropdown-item:hover i{color:var(--rento-orange-2)}

/* (4) Page-head heading used on Payment Logs / App Orders etc. */
.rento-page-head{font-weight:800;color:var(--rento-navy);letter-spacing:.2px}
.rento-page-head i{color:var(--rento-orange)}

/* (5) Keep the open mobile sidebar ABOVE the footer + back-to-top button */
.sidebar-wrapper{z-index:16!important}
.page-footer{z-index:1030!important}
.back-to-top{z-index:1031!important}
@media (max-width:1024px){
  .sidebar-wrapper{z-index:1050!important}
  .overlay.toggle-icon{z-index:1040!important}
  .wrapper.toggled .back-to-top, body.toggled .back-to-top{opacity:0!important;pointer-events:none!important}
}

/* (6) Notice / Summernote editor must never spill outside its card */
.note-editor,.note-editor.note-frame{max-width:100%!important;width:100%!important;box-sizing:border-box!important}
.note-editor .note-toolbar{flex-wrap:wrap!important}
.note-editor .note-editing-area{max-width:100%!important;overflow:hidden!important}
.note-editor .note-editable{max-width:100%!important;overflow-x:auto!important;word-break:break-word!important;box-sizing:border-box!important}
.note-editor .note-editable img{max-width:100%!important;height:auto!important}
.input-group .note-editor{flex:1 1 auto!important;width:1%!important}

/* (7) Dashboard welcome banner + section-header icons */
.rento-welcome-banner{display:flex;align-items:center;gap:14px;padding:14px 18px!important;border-radius:14px!important;
  background:linear-gradient(100deg,rgba(255,122,0,.12),rgba(46,204,113,.10))!important;
  border:1px solid rgba(255,122,0,.22)!important;color:var(--rento-navy)!important;position:relative;box-shadow:0 8px 22px rgba(22,33,62,.06)!important}
.rento-welcome-banner .rwb-icon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 18px rgba(255,122,0,.32)}
.rento-welcome-banner .rwb-text{flex:1;font-size:14.5px;line-height:1.5}
.rento-welcome-banner .rwb-link{color:var(--rento-orange-2);font-weight:800;text-decoration:none;margin-left:4px}
.rento-welcome-banner .rwb-link:hover{text-decoration:underline}
.rento-welcome-banner .rwb-timer{display:inline-block;color:#8a96ad;font-size:12.5px;margin-left:6px}
.rento-welcome-banner .btn-close{position:absolute;top:12px;right:14px;font-size:11px}
.rento-head-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2));color:#fff;font-size:17px;
  box-shadow:0 6px 14px rgba(255,122,0,.3);margin-right:9px;flex:0 0 30px}
.rento-head-ic-navy{background:linear-gradient(135deg,#16213e,#2a3a63)!important;box-shadow:0 6px 14px rgba(22,33,62,.28)!important}

/* ===== v6: chat popups, message badges, sidebar overlap, embed mode ===== */

/* (1) BULLETPROOF sidebar overlap fix — hide footer + back-to-top while the
   mobile sidebar is open, and keep the sidebar above everything. */
.sidebar-wrapper{z-index:1060!important}
@media (max-width:1024px){
  .wrapper.toggled .sidebar-wrapper{z-index:1060!important}
  .wrapper.toggled .overlay.toggle-icon{z-index:1055!important}
  .wrapper.toggled .page-footer{display:none!important}
  .wrapper.toggled .back-to-top{display:none!important}
}

/* (2) Messages bell + unread badges */
.rento-msg-bell{position:relative}
.rento-msg-bell .bx{font-size:22px;color:var(--rento-navy)}
.rento-msg-badge{position:absolute;top:2px;right:-2px;min-width:18px;height:18px;padding:0 5px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center;
  border-radius:999px;box-shadow:0 0 0 2px #fff}
.rento-tile-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;
  background:#ef4444;color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center;
  border-radius:999px;box-shadow:0 0 0 2px #fff}

/* (3) Chat popup iframes */
.rento-chat-modal .modal-dialog{ max-width:460px !important; min-height:0 !important; display:block !important;
  height:80vh; height:80dvh; margin:10vh auto; margin:10dvh auto; }
.rento-chat-modal .modal-content{ overflow:hidden; border-radius:16px; height:100% !important; display:flex; flex-direction:column; }
.rento-chat-modal .modal-header{ padding:.55rem .9rem; flex:0 0 auto; }
.rento-chat-modal .modal-body{ flex:1 1 auto; min-height:0; padding:0 !important; overflow:hidden; }
.rento-chat-frame{ width:100%; height:100%; border:0; display:block; background:#fff; }
.rento-chat-modal .modal-title{ color:#fff !important; }
@media (max-width:576px){
  .rento-chat-modal .modal-dialog{ max-width:none !important; width:calc(100% - .7rem) !important;
    height:86vh; height:86dvh; margin:7vh auto; margin:7dvh auto; }
}

/* (4) Embed mode — chat rendered chrome-free inside the popup iframe */
body.rento-embed{background:#fff!important}
.rento-embed .page-wrapper{margin:0!important;padding:0!important;min-height:auto!important}
.rento-embed .page-content{padding:8px 10px!important}
.rento-embed .page-breadcrumb,.rento-embed .breadcrumb,.rento-embed .page-title{display:none!important}
.rento-embed .card{margin:0!important;box-shadow:none!important;border:0!important}

/* (5) Tile gradients for the chat tiles (defined so they always render) */
.bg-gradient-moonlit{background:linear-gradient(135deg,#5b7cfa,#7c3aed)!important}
.bg-gradient-ohhappiness{background:linear-gradient(135deg,#11998e,#38ef7d)!important}

/* (8) Enriched user dropdown (top-right avatar menu) */
.rento-userdd{min-width:232px!important;padding:.45rem!important}
.rento-userdd-head{display:flex;align-items:center;gap:11px;padding:.55rem .6rem .65rem;margin-bottom:.3rem;border-bottom:1px solid var(--rento-line)}
.rento-userdd-head .user-img{width:42px!important;height:42px!important;border-radius:50%!important;object-fit:cover}
.rento-userdd-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.rento-userdd-name{font-weight:800;color:var(--rento-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.rento-userdd-rank{font-size:11px;font-weight:700;color:var(--rento-orange);text-transform:capitalize}
.rento-userdd .dropdown-item{display:flex;align-items:center;gap:10px}
.rento-userdd .dropdown-item i{font-size:18px;color:var(--rento-orange)}
.rento-userdd-logout{color:#dc2626!important}
.rento-userdd-logout i{color:#dc2626!important}
.rento-userdd-logout:hover{background:#fee2e2!important;color:#b91c1c!important}
.rento-userdd-logout:hover i{color:#b91c1c!important}

/* ==========================================================================
   RENTO v7 — production polish (screenshot-driven)
   ========================================================================== */

/* (a) Compact orange "Processing" chip instead of the big ugly full-width box */
.dataTables_processing,
.dataTables_wrapper .dataTables_processing{
  position:absolute !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:auto !important; min-width:0 !important; max-width:90vw !important; height:auto !important;
  margin:0 !important; padding:8px 20px !important;
  background:linear-gradient(135deg,var(--rento-orange),var(--rento-orange-2)) !important;
  color:#fff !important; font-weight:700 !important; font-size:13px !important;
  border:0 !important; border-radius:999px !important;
  box-shadow:0 10px 26px rgba(255,122,0,.4) !important; white-space:nowrap !important;
  z-index:30 !important; line-height:1.2 !important;
}

/* (b) Compact action dropdown (View User/Reseller/Admin) with orange-bordered buttons */
.dropdown-menu:has(.action-btn){ min-width:174px !important; padding:5px !important; border-radius:12px !important; }
.dropdown-menu .btn.btn-light.dropdown-item,
.dropdown-menu .action-btn.dropdown-item{
  border:1px solid rgba(255,122,0,.55) !important; margin:3px 0 !important;
  text-align:center !important; border-radius:8px !important;
  padding:.42rem .55rem !important; font-size:13px !important; font-weight:700 !important; line-height:1.2 !important;
}
.dropdown-menu .btn.btn-light.dropdown-item:hover,
.dropdown-menu .action-btn.dropdown-item:hover{
  background:var(--rento-orange-soft) !important; color:var(--rento-orange-2) !important;
  border-color:var(--rento-orange) !important;
}
.dropdown-menu:has(.action-btn) > a.dropdown-item:not(.btn){ padding:.42rem .55rem !important; font-size:13px !important; }
.dropdown-menu:has(.action-btn) .dropdown-divider{ margin:.3rem 0 !important; }

/* (c) Account Status card — make the "User Slots / Reseller Slots" value chips readable
       (they were white text on a near-white chip) */
.rento-slot-chip, .card .rento-slot-chip{
  background:rgba(255,255,255,.16) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important; font-weight:800 !important;
}

/* (d) Chat input controls — uniform square buttons aligned with the input (like zeit) */
.card-footer > form.d-flex{ align-items:center; gap:8px; }
.card-footer > form.d-flex .me-2{ margin-right:0 !important; }
.card-footer > form.d-flex .form-control{ height:44px; border-radius:11px; }
.card-footer > form.d-flex .btn{ display:inline-flex !important; align-items:center; justify-content:center; width:46px; height:44px; min-width:46px; padding:0 !important; border-radius:11px; flex:0 0 auto; }
.card-footer > form.d-flex .btn i{ font-size:16px; line-height:1; }

/* (e) Stat/payment cards: inner flex row fills the card so the icon pins to the RIGHT end */
.stat-card .card-body{ display:flex !important; align-items:center; }
.stat-card .card-body > .d-flex{ flex:1 1 auto !important; width:100% !important; min-width:0; }
.stat-card .widgets-icons{ margin-left:auto !important; flex:0 0 auto; }

/* (f) Smoother mobile sidebar scrolling — SimpleBar + the touch-fired hover handler
       were causing the freeze/jank the user reported */
@media (max-width:1024px){
  .sidebar-wrapper .simplebar-content-wrapper{
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  .sidebar-wrapper{ overscroll-behavior:contain !important; }
  /* the touch-triggered "sidebar-hovered" state must not resize/animate mid-scroll */
  .wrapper.sidebar-hovered .sidebar-wrapper,
  .wrapper.toggled .sidebar-wrapper{ transition:none !important; width:260px !important; }
  .wrapper.sidebar-hovered{ transition:none !important; }
  /* keep item hover cheap (no heavy shadow repaint while flinging the list) */
  .sidebar-wrapper .metismenu a{ will-change:auto; }
}

/* (g) Sidebar collapse arrow → Rento orange (was default blue) */
.sidebar-header .toggle-icon,
.sidebar-header .toggle-icon i,
.sidebar-header .toggle-icon i.bx{ color:var(--rento-orange) !important; }

/* (h) Full-page chat (chat / group_chat / admin_chat): the box fits between the
   fixed topbar and fixed footer so the PAGE never scrolls — only the message
   list inside the box scrolls (ZEIT-style, but robust with a fixed footer). */
.rento-chatpage .page-content{ padding-bottom:10px !important; overflow:hidden; }
.rento-chatpage .page-content > .row{ margin:0; }
.rento-chatpage .page-content > .row > [class*="col-"]{
  height:calc(88vh - 145px);
  height:calc(100dvh - 145px);
  min-height:0; display:flex; flex-direction:column;
}
.rento-chatpage .card.shadow{
  height:auto !important; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; margin:0 !important;
}
.rento-chatpage .card-body.chat-history{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; }
.rento-chatpage .card.shadow > .card-header,
.rento-chatpage .card.shadow > .card-footer{ flex:0 0 auto !important; }

/* ==========================================================================
   User-table polish: password mask/toggle + expiry date badge
   ========================================================================== */
.rpw-dot{ letter-spacing:3px; color:#94a3b8; font-weight:700; }
.rpw-real{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; color:var(--rento-navy,#16213e); }
.rpw-eye{ cursor:pointer; color:var(--rento-orange) !important; margin-left:6px; font-size:16px; vertical-align:middle; }
.rpw-eye:hover{ color:var(--rento-orange-2) !important; }
.rexp-badge{ background:#16213e !important; color:#fff !important; font-weight:600; letter-spacing:.2px; }
/* keep all status/type badges crisp and consistent across every table */
table.dataTable td .badge{ font-weight:600; padding:.4em .6em; }
table.dataTable td .badge + .badge{ margin-left:4px; }