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

/* =============================================================
   PPOL ADMIN PANEL – Modern UI Override
   Custom UI Override | Loaded after core.css in base.blade.php
   ============================================================= */

/* ───────── Design Tokens ───────── */
:root {
  /* Primary */
  --am-primary:        #7C4DFF;   /* purple-500 */
  --am-primary-dark:   #6B3FE0;   /* purple-600 */
  --am-primary-light:  #ede9fe;   /* purple-50 */
  --am-primary-rgb:    124,77,255;

  /* Sidebar */
  --am-sidebar-bg:     #1a1a35;
  --am-sidebar-hover:  rgba(124,77,255,.12);
  --am-sidebar-active: #7C4DFF;
  --am-sidebar-text:   #a8a8c8;
  --am-sidebar-title:  #5a5a7a;
  --am-sidebar-width:  265px;

  /* Header */
  --am-header-h:       64px;
  --am-header-bg:      #ffffff;
  --am-header-border:  #ede9fe;

  /* Layout */
  --am-body-bg:        #f8f7ff;
  --am-card-bg:        #ffffff;
  --am-card-shadow:    0 4px 24px rgba(124,77,255,.07), 0 1px 4px rgba(0,0,0,.04);
  --am-card-radius:    12px;

  /* Typography */
  --am-text:           #2d2460;   /* dark purple-navy */
  --am-text-muted:     #7a7aaa;
  --am-border:         #e8e4ff;
  --am-input-bg:       #faf9ff;
  --am-input-focus:    #7C4DFF;

  /* Status */
  --am-success:        #00c897;
  --am-danger:         #ff5c75;
  --am-warning:        #ffb946;
  --am-info:           #5b8def;

  --am-transition:     all .2s ease;
}

/* ───────── Base ───────── */
body.fixed-sidebar.fixed-header {
  background: var(--am-body-bg) !important;
  color: var(--am-text) !important;
  font-family: 'Nunito', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ───────── Sidebar ───────── */
.site-sidebar {
  background: var(--am-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 2px 0 8px rgba(0,0,0,.12) !important;
}

.site-sidebar .custom-scroll {
  background: transparent !important;
  /* The base theme used a JS plugin (Slimscroll / Perfect Scrollbar) to make
     this container scroll. Without it the menu overflows the viewport and
     items below the fold get cut off — Insurance Partners disappears on
     viewport heights < ~900px. Enable native overflow scrolling so the
     menu is always reachable. */
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
/* Slim, theme-matched scrollbar so the scroll affordance is visible but
   doesn't visually compete with the menu items. */
.site-sidebar .custom-scroll::-webkit-scrollbar { width: 6px; }
.site-sidebar .custom-scroll::-webkit-scrollbar-track { background: transparent; }
.site-sidebar .custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.site-sidebar .custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.sidebar-menu {
  padding: 8px 0 !important;
}

.sidebar-menu .menu-title {
  color: var(--am-sidebar-title) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 20px 20px 6px !important;
  border: none !important;
  background: transparent !important;
}

.sidebar-menu > li > a {
  color: var(--am-sidebar-text) !important;
  padding: 10px 16px 10px 22px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1px 12px 1px 0 !important;
  transition: var(--am-transition) !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: .1px !important;
}

.sidebar-menu > li > a:hover {
  background: rgba(124,77,255,.12) !important;
  color: #ffffff !important;
  border-left-color: var(--am-primary) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li > a.active {
  background: linear-gradient(90deg, rgba(124,77,255,.25) 0%, rgba(124,77,255,.08) 100%) !important;
  color: #ffffff !important;
  border-left-color: var(--am-primary) !important;
  font-weight: 700 !important;
}

/*
 * The HTML order inside each <a> is:  s-caret → s-icon → s-text
 * We reorder visually with CSS `order` so the row reads: icon → text → caret
 */
.sidebar-menu > li > a .s-icon {
  order: 1 !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  opacity: .8 !important;
  margin-right: 8px !important;
}

.sidebar-menu > li > a .s-text {
  order: 2 !important;
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-menu > li > a .s-caret {
  order: 3 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;  /* pushes caret to far right within available space */
  opacity: .5 !important;
  font-size: 12px !important;
  padding-left: 4px !important;
}

.sidebar-menu > li > a:hover .s-icon,
.sidebar-menu > li.active > a .s-icon {
  opacity: 1 !important;
  color: var(--am-primary) !important;
}

.sidebar-menu > li > a:hover .s-caret,
.sidebar-menu > li.active > a .s-caret {
  opacity: .9 !important;
}

/* Submenu */
.sidebar-menu .with-sub > ul {
  background: rgba(0,0,0,.15) !important;
  border: none !important;
  padding: 4px 0 !important;
}

.sidebar-menu .with-sub > ul li a {
  color: var(--am-sidebar-text) !important;
  padding: 8px 16px 8px 48px !important;
  font-size: 13px !important;
  transition: var(--am-transition) !important;
  display: block !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-menu .with-sub > ul li a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.05) !important;
}

/* Compact-sidebar (collapse-to-icons) flyout submenu — core.css renders
   it on a white background, but admin-modern's expanded-sidebar styles
   (light text + dark overlay) carry over and become invisible on white.
   Override with proper white-bg + dark-text contrast for the flyout. */
.compact-sidebar .site-sidebar .sidebar-menu .with-sub > ul {
  background: #ffffff !important;
  border: 1px solid var(--am-border, #e8e4ff) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important;
  padding: 6px 0 !important;
  margin-left: 6px !important;
}
.compact-sidebar .site-sidebar .sidebar-menu .with-sub > ul li a {
  color: var(--am-text, #1f1d3d) !important;
  padding: 10px 18px !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.compact-sidebar .site-sidebar .sidebar-menu .with-sub > ul li a:hover,
.compact-sidebar .site-sidebar .sidebar-menu .with-sub > ul li.active > a {
  background: var(--am-body-bg, #f5f3ff) !important;
  color: var(--am-primary, #6366f1) !important;
}

/* ───────── Header ───────── */
.site-header {
  background: var(--am-header-bg) !important;
  border-bottom: 1px solid var(--am-header-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  height: var(--am-header-h) !important;
}

.site-header .navbar {
  height: var(--am-header-h) !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Navbar left — logo only on desktop; mobile toggles hidden (BS3 hidden-md-up not supported in BS4) */
.site-header .navbar-left {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Sidebar compact toggle — in navbar-left, right after the logo */
.site-header .navbar-left .toggle-button.sidebar-toggle-second {
  margin-left: 8px !important;
}

/* Logo — bigger, properly scaled. The header is ~66px tall, so the
   logo fills most of the vertical space minus a small breathing gap. */
.site-header .logo {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center left !important;
  width: 220px !important;
  height: 60px !important;
  display: block !important;
}

.site-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-right: 12px !important;
  height: 100% !important;
}

/*
 * Navbar right — force single horizontal row on all screen sizes.
 * The element has class "collapse" from a Bootstrap 3-style pattern;
 * we override that so it is always visible and laid out as flex row.
 */
.site-header .navbar-right {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

/* The stray .profile_header div is not inside any .dropdown parent so
   Bootstrap never toggles it — hide it to prevent it rendering as a block. */
.site-header .profile_header {
  display: none !important;
}

/* Each <ul class="nav navbar-nav"> inside navbar-right */
.site-header .navbar-right .nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* Sidebar desktop toggle button inside navbar-right.
   Note: the mobile slide-in toggle is rendered as <button>, the desktop
   collapse toggle as <div>; reset native button chrome so both look the
   same.
   IMPORTANT: position:relative is required because .hamburger inside
   uses position:absolute for its top/bottom bars — without a positioned
   ancestor the bars anchor to the wrong element and disappear. */
.site-header .toggle-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
}
/* Reset the legacy core.css absolute positioning on .hamburger so it
   uses normal flow and gets centred by the flex parent (.toggle-button
   has display:flex; align-items:center; justify-content:center).
   The ::before / ::after bars stay absolute relative to .hamburger. */
.site-header .toggle-button .hamburger {
  position: relative !important;
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  background-color: var(--am-text-muted, #7a7aaa) !important;
}
.site-header .toggle-button .hamburger::before,
.site-header .toggle-button .hamburger::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--am-text-muted, #7a7aaa) !important;
}
.site-header .toggle-button .hamburger::before {
  top: -7px !important;
  bottom: auto !important;
}
.site-header .toggle-button .hamburger::after {
  top: 7px !important;
  bottom: auto !important;
}
.site-header button.toggle-button:focus {
  outline: none !important;
}
.site-header button.toggle-button:focus-visible {
  outline: 2px solid var(--am-primary, #3b82f6) !important;
  outline-offset: 2px !important;
}
/* Suppress sticky :hover after touch — Mobile Safari and Chrome can
   leave the hover state stuck after a tap, which is the "grey box that
   doesn't go away" the user reports. */
@media (hover: none) {
  .site-header .toggle-button:hover {
    background: transparent !important;
  }
}

.site-header .toggle-button:hover {
  background: var(--am-body-bg) !important;
}

.site-header .hamburger {
  background: var(--am-text-muted) !important;
}

.site-header .hamburger::before,
.site-header .hamburger::after {
  background: var(--am-text-muted) !important;
}

/* Icon nav-links (fullscreen etc.) */
.site-header .nav-link {
  color: var(--am-text-muted) !important;
  transition: var(--am-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

.site-header .nav-link:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
}

/* ── User dropdown ── */
.site-header .nav-item.dropdown > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  transition: background .15s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Override the deeply nested inline-style div that adds extra padding */
.site-header .nav-item.dropdown > a > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
}

.site-header .nav-item.dropdown > a:hover {
  background: var(--am-body-bg) !important;
}

.site-header .avatar.box-32 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.site-header .avatar.box-32 img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--am-border) !important;
  display: block !important;
}

.site-header .nav-item.dropdown > a div[style*="font-weight"],
.site-header .nav-item.dropdown > a div div {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--am-text) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* ── Dropdown menus ── */
.site-header .dropdown-menu {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-card-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
  padding: 6px !important;
  min-width: 200px !important;
  margin-top: 6px !important;
  position: absolute !important;
}

.site-header .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  color: var(--am-text) !important;
  font-size: 13.5px !important;
  transition: var(--am-transition) !important;
  text-decoration: none !important;
}

.site-header .dropdown-item i {
  width: 16px !important;
  text-align: center !important;
  color: var(--am-text-muted) !important;
  flex-shrink: 0 !important;
}

.site-header .dropdown-item:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
}

.site-header .dropdown-item:hover i {
  color: var(--am-primary) !important;
}

.site-header .dropdown-divider {
  border-color: var(--am-border) !important;
  margin: 4px 0 !important;
}

/* ── Notification bell ── */
.site-header .ti-bell {
  font-size: 18px !important;
  color: var(--am-text-muted) !important;
  line-height: 1 !important;
}

.site-header .nav-link:hover .ti-bell,
.site-header .nav-link.dropdown-toggle:hover {
  color: var(--am-primary) !important;
}

.site-header .ti-bell sup {
  font-size: 9.5px !important;
  background: var(--am-danger) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 1px 4px !important;
  vertical-align: super !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Notification dropdown panel */
.site-header .notification .dropdown-menu {
  min-width: 280px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

.site-header .notification .dropdown-menu p {
  padding: 12px 16px !important;
  color: var(--am-text-muted) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.site-header .notification .dropdown-menu a {
  display: block !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--am-text) !important;
  border-radius: 6px !important;
  transition: var(--am-transition) !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.site-header .notification .dropdown-menu a:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
}

/* Bell notification */
.site-header .ti-bell {
  font-size: 18px !important;
  color: var(--am-text-muted) !important;
  transition: var(--am-transition) !important;
}

.site-header .ti-bell:hover {
  color: var(--am-primary) !important;
}

.site-header .ti-bell sup {
  font-size: 10px !important;
  background: var(--am-danger) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 1px 4px !important;
  vertical-align: super !important;
}

/* ───────── Content Area ───────── */
.site-content {
  background: var(--am-body-bg) !important;
}

.content-area {
  padding: 24px !important;
}

/* Page heading row */
.content-area .row-md {
  margin-bottom: 0 !important;
}

/* ───────── Cards / Box ───────── */
.box {
  border-radius: var(--am-card-radius) !important;
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-card-shadow) !important;
  background: var(--am-card-bg) !important;
  transition: box-shadow .2s ease !important;
}

.box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}

.box.bg-white {
  background: var(--am-card-bg) !important;
}

.box-block {
  padding: 20px !important;
}

/* Stat tiles */
.tile .t-icon {
  border-radius: 10px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.tile .t-icon.right {
  position: static !important;
  right: auto !important;
  top: auto !important;
}

.tile .t-icon .bg-danger  { background: rgba(239,68,68,.12) !important; }
.tile .t-icon .bg-success { background: rgba(16,185,129,.12) !important; }
.tile .t-icon .bg-primary { background: rgba(59,130,246,.12) !important; }
.tile .t-icon .bg-warning { background: rgba(245,158,11,.12) !important; }

.tile .t-icon i {
  font-size: 20px !important;
}

.tile-1 .t-icon i.ti-rocket   { color: var(--am-danger)   !important; }
.tile-1 .t-icon i.ti-bar-chart { color: var(--am-success)  !important; }
.tile-1 .t-icon i.ti-view-grid { color: var(--am-info)     !important; }
.tile-1 .t-icon i.ti-archive   { color: var(--am-warning)  !important; }
.tile-1 .t-icon i.ti-user      { color: var(--am-success)  !important; }

.tile .t-content h6 {
  color: var(--am-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.tile .t-content h1 {
  color: var(--am-text) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.tile .t-content .text-muted {
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
}

/* ───────── Tables ───────── */
.table {
  background: var(--am-card-bg) !important;
  border-radius: var(--am-card-radius) !important;
}

.table thead th {
  background: #f4f7fb !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  color: #475569 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
}

.table tfoot th {
  background: #faf9ff !important;
  border-top: 2px solid #e2e8f0 !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  white-space: nowrap !important;
}

.table tbody tr {
  transition: background .12s ease !important;
}

.table tbody td {
  padding: 10px 16px !important;
  border-color: #edf0f5 !important;
  color: var(--am-text) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.table-responsive {
  border-radius: var(--am-card-radius) !important;
  border: 1px solid var(--am-border) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ── DataTables: length ("Show X entries") ── */
.dataTables_wrapper .dataTables_length {
  display: flex !important;
  align-items: center !important;
  padding-left: 4px !important;
}

.dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--am-text-muted) !important;
  white-space: nowrap !important;
}

.dataTables_wrapper .dataTables_length select {
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 7px !important;
  background: var(--am-card-bg) !important;
  color: var(--am-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  min-width: 58px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
}

/* ── DataTables: search filter ── */
.dataTables_wrapper .dataTables_filter {
  text-align: right !important;
}

.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--am-text-muted) !important;
  width: 100% !important;
  justify-content: flex-end !important;
}

.dataTables_wrapper .dataTables_filter input {
  height: 34px !important;
  width: 100% !important;
  max-width: 280px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 7px !important;
  padding: 0 12px 0 34px !important;
  background: var(--am-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center !important;
  color: var(--am-text) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
  background-color: #fff !important;
}

/* ── DataTables: info ("Showing X to Y of Z entries") ── */
.dataTables_wrapper .dataTables_info {
  padding: 8px 0 !important;
  background: none !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--am-text-muted) !important;
  line-height: 1.5 !important;
}

/* ── DataTables: pagination ── */
.dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: var(--am-text-muted) !important;
  transition: var(--am-transition) !important;
}

.dataTables_paginate .paginate_button:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
  border: 1px solid var(--am-border) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--am-primary) !important;
  color: #fff !important;
  border-color: var(--am-primary) !important;
}

/* ───────── Forms ───────── */
.form-control {
  border: 1px solid var(--am-border) !important;
  border-radius: 8px !important;
  background: var(--am-input-bg) !important;
  color: var(--am-text) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.form-control:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
  outline: none !important;
  background: #fff !important;
}

label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--am-text) !important;
  margin-bottom: 5px !important;
}

.form-group {
  margin-bottom: 18px !important;
}

textarea.form-control {
  min-height: 100px !important;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--am-border) !important;
  border-radius: 8px !important;
  height: 42px !important;
  padding: 8px 12px !important;
  background: var(--am-input-bg) !important;
  transition: border-color .2s ease !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--am-text) !important;
  line-height: 24px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

.select2-dropdown {
  border: 1px solid var(--am-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--am-primary) !important;
}

/* ───────── Buttons ───────── */
.btn {
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  transition: var(--am-transition) !important;
  letter-spacing: .2px !important;
}

.btn-primary,
.btn-success.btn-custom-primary {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--am-primary-dark) !important;
  border-color: var(--am-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.35) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--am-success) !important;
  border-color: var(--am-success) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--am-danger) !important;
  border-color: var(--am-danger) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--am-warning) !important;
  border-color: var(--am-warning) !important;
  color: #fff !important;
}

.btn-info {
  background: var(--am-info) !important;
  border-color: var(--am-info) !important;
  color: #fff !important;
}

.btn-default,
.btn-secondary {
  background: #fff !important;
  border-color: var(--am-border) !important;
  color: var(--am-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--am-body-bg) !important;
  border-color: #cbd5e1 !important;
}

.btn-sm {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
}

.btn-xs {
  padding: 3px 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ───────── Tags / Badges ───────── */
.tag,
.badge {
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}

.tag-success, .badge-success { background: rgba(16,185,129,.12) !important; color: #059669 !important; }
.tag-danger,  .badge-danger  { background: rgba(239,68,68,.12)  !important; color: #dc2626 !important; }
.tag-warning, .badge-warning { background: rgba(245,158,11,.12) !important; color: #d97706 !important; }
.tag-primary, .badge-primary { background: rgba(124,77,255,.12) !important; color: var(--am-primary) !important; }
.tag-info,    .badge-info    { background: rgba(59,130,246,.12) !important; color: #2563eb !important; }

/* ───────── Alerts ───────── */
.alert {
  border-radius: var(--am-card-radius) !important;
  border: 1px solid transparent !important;
  font-size: 13.5px !important;
}

.alert-success {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.3) !important;
  color: #065f46 !important;
}

.alert-danger {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #991b1b !important;
}

.alert-warning {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #92400e !important;
}

.alert-info {
  background: rgba(59,130,246,.08) !important;
  border-color: rgba(59,130,246,.3) !important;
  color: #1e40af !important;
}

/* ───────── Section Header ───────── */
.section-heading-block {
  margin-bottom: 20px !important;
}

.section-heading-block h4,
.section-heading-block .panel-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin-bottom: 0 !important;
}

/* Panel / card header pattern */
.box .box-head,
.panel .panel-heading,
.card-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--am-border) !important;
  background: var(--am-card-bg) !important;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.box .box-body,
.panel .panel-body {
  padding: 20px !important;
}

/* ───────── Breadcrumbs ───────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--am-text-muted) !important;
}

.breadcrumb-item a {
  color: var(--am-primary) !important;
}

.breadcrumb-item.active {
  color: var(--am-text-muted) !important;
}

/* ───────── Page title bar ───────── */
.page-title-bar {
  background: var(--am-card-bg) !important;
  border-bottom: 1px solid var(--am-border) !important;
  padding: 16px 24px !important;
  margin-bottom: 24px !important;
}

.page-title-bar h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 !important;
}

/* ───────── Footer ───────── */
.site-footer {
  border-top: 1px solid var(--am-border) !important;
  background: var(--am-card-bg) !important;
  padding: 12px 24px !important;
  font-size: 12.5px !important;
  color: var(--am-text-muted) !important;
}

/* ───────── Sidebar native scroll (no jScrollPane) ───────── */
/* Use native CSS overflow so jScrollPane cannot duplicate the nav DOM */
.site-sidebar .custom-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* When jScrollPane IS active, keep its container flush */
.site-sidebar .jspContainer,
.site-sidebar .jspPane {
  width: 100% !important;
}

/* ───────── Scrollbar ───────── */
.site-sidebar::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar {
  width: 4px !important;
}

.site-sidebar::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15) !important;
  border-radius: 4px !important;
}

/* ───────── Toastr overrides ───────── */
#toast-container > div {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  opacity: 1 !important;
}

/* ───────── SweetAlert2 ───────── */
.swal2-popup {
  border-radius: var(--am-card-radius) !important;
}

.swal2-confirm {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
}

/* ───────── Toggle switch ───────── */
.switchery {
  border-radius: 20px !important;
}

/* ───────── LOGIN PAGE ───────── */
.admin-login-page {
  display: flex;
  min-height: 100vh;
  background: var(--am-body-bg);
}

/* Left brand panel */
.login-brand-panel {
  width: 45%;
  background: linear-gradient(145deg, #130f28 0%, #1a1a35 50%, #134e4a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.login-brand-panel::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(124,77,255,.25) 0%, transparent 70%);
  border-radius: 50%;
}

.login-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(124,77,255,.15) 0%, transparent 70%);
  border-radius: 50%;
}

.login-brand-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  max-width: 360px;
}

.login-brand-logo {
  width: 180px;
  height: auto;
  object-fit: contain;
  margin-bottom: 40px;
  filter: brightness(0) invert(1);
}

.login-brand-inner h2 {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: -.3px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

.login-brand-inner p {
  font-size: 15px !important;
  color: rgba(255,255,255,.9) !important;
  line-height: 1.75 !important;
  margin-bottom: 48px !important;
}

.login-brand-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}

.login-pillar {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  backdrop-filter: blur(4px);
}

.login-pillar-icon {
  font-size: 22px;
  color: var(--am-primary);
  margin-bottom: 8px;
  display: block;
}

.login-pillar strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 2px !important;
}

.login-pillar span {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.82) !important;
}

/* Right form panel */
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
}

.login-form-inner {
  width: 100%;
  max-width: 400px;
}

.login-form-logo {
  width: 160px;
  height: auto;
  object-fit: contain;
  margin-bottom: 36px;
  display: block;
}

.login-welcome {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.2;
}

.login-subtitle {
  font-size: 14px;
  color: #475569;
  margin-bottom: 32px;
  font-weight: 500;
}

/* Login form fields */
.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 7px;
  display: block;
  letter-spacing: .1px;
}

.login-form .form-control {
  background: var(--am-input-bg) !important;
  border: 1.5px solid var(--am-border) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--am-text) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  height: auto !important;
  width: 100%;
}

.login-form .form-control:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
  background: #fff !important;
}

.login-form .password-wrapper {
  position: relative;
}

.login-form .password-wrapper .form-control {
  padding-right: 42px !important;
}

.login-form .toggle-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--am-text-muted);
  font-size: 15px;
  transition: color .2s ease;
  border: none;
  background: none;
  padding: 0;
}

.login-form .toggle-pw:hover {
  color: var(--am-primary);
}

.login-form .btn-login {
  width: 100%;
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px !important;
  border-radius: 10px !important;
  margin-top: 8px;
  letter-spacing: .3px;
  transition: background .2s ease, box-shadow .2s ease !important;
}

.login-form .btn-login:hover {
  background: var(--am-primary-dark) !important;
  border-color: var(--am-primary-dark) !important;
  box-shadow: 0 6px 16px rgba(124,77,255,.4) !important;
}

.login-demo-box {
  margin-top: 24px;
  background: var(--am-body-bg);
  border: 1px solid var(--am-border);
  border-radius: 10px;
  padding: 16px;
  font-size: 13px;
  color: var(--am-text-muted);
}

.login-demo-box strong {
  color: var(--am-text);
}

.login-error {
  color: var(--am-danger);
  font-size: 12.5px;
  margin-top: 5px;
}

/* Responsive login */
@media (max-width: 768px) {
  .admin-login-page { flex-direction: column; }
  .login-brand-panel {
    width: 100%;
    padding: 40px 24px;
    min-height: 260px;
  }
  .login-brand-pillars { display: none; }
  .login-form-panel { padding: 40px 24px; }
  .login-form-inner { max-width: 100%; }
}


/* =============================================================
   LISTING PAGES — Toolbar, Table, Pagination
   ============================================================= */

/* ── Content wrapper ── */
.content-area.py-1 {
  padding: 24px !important;
}

/* Gap between stacked box cards (e.g. documents page has 3 tables) */
.content-area .container-fluid + .container-fluid {
  margin-top: 24px !important;
}

/* Remove default box-block padding — inner sections own their spacing */
.content-area .box.box-block {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--am-card-radius) !important;
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-card-shadow) !important;
  background: var(--am-card-bg) !important;
}

/* ─────────────────────────────────────────────────────────────
   APPLICATION-WIDE FALLBACK PADDING for .box.box-block children.
   The card itself has padding:0 so flush-edge headers and tables
   render correctly. Every other direct child (custom title divs,
   intro paragraphs, filter forms, plain tables, pagination
   wrappers, etc.) was sitting flush against the left/top edges.
   This rule gives every direct child a sane horizontal padding
   plus top/bottom padding when first/last in the card. Elements
   that genuinely want flush positioning are listed in the
   exclusion clauses.
   ───────────────────────────────────────────────────────────── */
.content-area .box.box-block > *:not(.am-page-header):not(.alert):not(.box-head):not(.box-body):not(table):not(form.form-horizontal):not(.dataTables_wrapper):not(.demo-mode-banner) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.content-area .box.box-block > *:first-child:not(.am-page-header):not(.alert):not(.box-head):not(.dataTables_wrapper):not(.demo-mode-banner) {
  padding-top: 18px !important;
}

.content-area .box.box-block > *:last-child:not(.dataTables_wrapper):not(.box-body):not(table) {
  padding-bottom: 18px !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE TITLE BAR  (.am-page-header)
   All listing pages now use this single clean div pattern.
   ───────────────────────────────────────────────────────────── */
.am-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px 24px !important;
  border-bottom: 1px solid var(--am-border) !important;
  background: #fff !important;
  flex-wrap: wrap !important;
  border-left: 3px solid var(--am-primary) !important;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
}

.am-page-header h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  letter-spacing: -.1px !important;
}

.am-page-header .demo-note {
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

.am-page-header .btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Demo-mode banner */
.content-area .box .col-md-12[style*="color:red"] {
  padding: 8px 24px !important;
  background: #fef2f2 !important;
  border-bottom: 1px solid #fecaca !important;
  color: #b91c1c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* DataTables export buttons row */
.dataTables_wrapper .dt-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--am-border) !important;
  background: #fff !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button {
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  background: #fff !important;
  border: 1.5px solid var(--am-border) !important;
  color: var(--am-text-muted) !important;
  transition: var(--am-transition) !important;
  line-height: 1.5 !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons button:hover {
  background: var(--am-body-bg) !important;
  border-color: #cbd5e1 !important;
  color: var(--am-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   TOOLBAR ROW
   .box-container-fresh-css.tab-container-new-fresh-css
   Contains .left-forms (bulk actions) + .right-forms (search/add)
   ───────────────────────────────────────────────────────────── */
.box-container-fresh-css.tab-container-new-fresh-css {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--am-border) !important;
  background: #fff !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Left side — bulk action buttons */
.form-container-fresh-css.left-forms {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex: 1 !important;
  padding: 0 !important;
  float: none !important;
}

/* Each form inside left-forms is inline */
.form-container-fresh-css.left-forms form {
  display: contents !important;   /* dissolve the form as a layout box */
}

/* Right side — search form + add button */
.form-container-fresh-css.right-forms {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin-left: auto !important;
}

/* The search form inside right-forms */
.form-container-fresh-css.right-forms form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Bulk action buttons (.new-edited-css-btn) ── */
.new-edited-css-btn,
.form-container-fresh-css.left-forms .btn {
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  letter-spacing: .1px !important;
  position: relative !important;
  z-index: 101 !important;
  pointer-events: auto !important;
}

/* ── Search input ── */
.form-container-fresh-css.right-forms input[type="search"],
.form-container-fresh-css.right-forms input[type="text"] {
  padding: 7px 36px 7px 12px !important;
  border: 1.5px solid var(--am-border) !important;
  border-radius: 8px !important;
  background: var(--am-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  font-size: 13px !important;
  color: var(--am-text) !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  min-width: 200px !important;
  max-width: 260px !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.form-container-fresh-css.right-forms input[type="search"]:focus,
.form-container-fresh-css.right-forms input[type="text"]:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
  background-color: #fff !important;
}

/* Search submit button */
.form-container-fresh-css.right-forms button[type="submit"],
.form-container-fresh-css.right-forms .btn-primary[type="submit"] {
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

/* Add New / action buttons in toolbar */
.form-container-fresh-css.right-forms a.btn,
.am-page-header a.btn {
  border-radius: 8px !important;
  padding: 7px 15px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLE
   ───────────────────────────────────────────────────────────── */
/* Table wrapper — no extra border (box card owns the border) */
.content-area .table-responsive {
  border: none !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  margin: 0 !important;
}

/* Subtle alternating rows — barely-there tint */
.table.table-striped tbody tr:nth-of-type(odd) {
  background: #fafbfd !important;
}

.table.table-striped tbody tr:nth-of-type(even) {
  background: #ffffff !important;
}

/* Teal-tinted hover for all table rows */
.table tbody tr:hover,
.table.table-striped tbody tr:hover {
  background: #f0fdfa !important;
}

/* Sort anchor in thead */
.anchor-shorting-tag {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.anchor-shorting-tag:hover {
  color: var(--am-primary) !important;
}

.anchor-shorting-tag .fa-sort-asc,
.anchor-shorting-tag .fa-sort-desc,
.anchor-shorting-tag .fa-sort {
  font-size: 10px !important;
  color: var(--am-text-muted) !important;
}

/* ── Table horizontal scroll wrapper ── */
.am-table-scroll-wrapper,
.table-scroll-wrapper {
  position: relative !important;
}

/* ── Scroll bar overlay ──
   Zero-size invisible container; only exists so JS can find manually-placed bars.
   Buttons themselves are positioned fixed by admin-scroll.js. */
.am-scroll-sticky-bar {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Scroll buttons — position:fixed + coordinates set by admin-scroll.js */
.am-scroll-btn,
.scroll-btn {
  position: fixed !important;  /* JS overrides top/left/right each frame */
  z-index: 1060 !important;
  pointer-events: auto !important;
  background: var(--am-primary) !important;
  border: none !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: none;               /* JS sets to flex when visible */
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.am-scroll-btn:hover,
.scroll-btn:hover {
  background: var(--am-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.4) !important;
}

/* ── Sticky column headers — stay visible on vertical scroll ── */
.table-scroll-wrapper .table-responsive table thead tr th,
.am-table-scroll-wrapper .table-responsive table thead tr th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #f4f7fb !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTON CELLS — Unified layout for all listing pages
   Handles 4 patterns found across the codebase:
     P1: td > form > buttons         (dispatcher, companies, etc.)
     P2: td > .input-group-btn       (users, providers)
     P3: td > .btn-group             (requests — dropdown)
     P4: td > form > .d-flex         (fleet — already flex)
   ═══════════════════════════════════════════════════════════════ */

/* P1 — form directly in td: make it a flex row */
.table tbody td > form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* P2 — .input-group-btn / .input_groupinfo: flex row, keep relative for dropdown */
.table tbody td .input-group-btn,
.table tbody td .input_groupinfo {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
  float: none !important;
}

/* P3 — .btn-group (request dropdown): flex row */
.table tbody td .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  position: relative !important;
}

/* P4 — .d-flex in cells: consistent gap */
.table tbody td .d-flex {
  gap: 4px !important;
}

/* Nested forms inside flex containers → dissolve as layout box */
.table tbody td .input-group-btn > form,
.table tbody td .input_groupinfo > form,
.table tbody td .btn-group > form,
.table tbody td .d-flex > form {
  display: contents !important;
}

/* Nested forms inside dropdown <li> items → keep as block */
.table tbody td .dropdown-menu li > form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── All action buttons in cells — consistent compact sizing ── */
.table tbody td > form .btn,
.table tbody td .input-group-btn .btn,
.table tbody td .input_groupinfo .btn,
.table tbody td .btn-group > .btn,
.table tbody td .d-flex .btn {
  padding: 4px 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;       /* cancel btn-block width:100% */
  float: none !important;
  letter-spacing: .1px !important;
}

/* ── Status-label badges (label.btn.btn-block) — non-interactive pills ── */
.table tbody td label.btn.btn-block {
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ── Dropdown menus from action cells ── */
/* NOTE: do NOT override left/right — let Bootstrap's .dropdown-menu-right work */
.table tbody td .dropdown-menu {
  z-index: 1055 !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-card-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  padding: 6px !important;
  min-width: 170px !important;
  background: #fff !important;
}

.table tbody td .dropdown-menu > li > a,
.table tbody td .dropdown-menu .dropdown-item,
.table tbody td .dropdown-menu li > form > button.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  color: var(--am-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--am-transition) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.table tbody td .dropdown-menu > li > a:hover,
.table tbody td .dropdown-menu .dropdown-item:hover,
.table tbody td .dropdown-menu li > form > button.dropdown-item:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
}

/* ── btn-outline-primary in cells ── */
.table tbody td .btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--am-primary) !important;
  color: var(--am-primary) !important;
}
.table tbody td .btn-outline-primary:hover {
  background: var(--am-primary) !important;
  color: #fff !important;
}

/* ── Status badges / tags ── */
.table tbody td .badge,
.table tbody td .tag {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Checkbox column ── */
.table td input[type="checkbox"],
.table th input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
  accent-color: var(--am-primary) !important;
}

/* ── Switchery in table cells ── */
.table tbody td .switchery {
  transform: scale(0.8) !important;
  transform-origin: left center !important;
}

/* Bootstrap bg-* badges (bg-success, bg-danger etc with text-white) */
.table tbody td .badge.bg-success,
span.badge.bg-success { background: var(--am-success) !important; color: #fff !important; white-space: nowrap !important; }
.table tbody td .badge.bg-danger,
span.badge.bg-danger  { background: var(--am-danger) !important;  color: #fff !important; white-space: nowrap !important; }
.table tbody td .badge.bg-warning,
span.badge.bg-warning { background: var(--am-warning) !important; color: #fff !important; white-space: nowrap !important; }
.table tbody td .badge.bg-primary,
span.badge.bg-primary { background: var(--am-primary) !important; color: #fff !important; white-space: nowrap !important; }
.table tbody td .badge.bg-info,
span.badge.bg-info    { background: var(--am-info) !important;    color: #fff !important; white-space: nowrap !important; }

/* Override any inline font-size/padding on badges inside table cells */
.table tbody td .badge[style] {
  font-size: 11.5px !important;
  padding: 3px 10px !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGINATION
   ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-top: 1px solid var(--am-border) !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  background: #fff !important;
}

.pagination li > a,
.pagination li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 8px !important;
  color: var(--am-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--am-transition) !important;
  text-decoration: none !important;
  background: #fff !important;
  line-height: 1 !important;
}

.pagination li > a:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
}

.pagination li.active > a,
.pagination li.active > span {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
}

.pagination li.disabled > a,
.pagination li.disabled > span {
  opacity: .4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ── Custom pagination row (common/pagination.blade.php) ── */
.am-pagination-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding: 0 4px !important;
}

.page_info {
  font-size: 13px !important;
  color: var(--am-text-muted) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Pagination inside .pagination_cover: remove duplicate border-top / padding */
.pagination_cover .pagination {
  border-top: none !important;
  padding: 6px 0 !important;
  background: transparent !important;
  margin: 0 !important;
}


/* =============================================================
   ICON ACTION BUTTONS  (.am-icon-btn)
   Small square icon-only buttons for Edit / View / Delete in table rows.
   ============================================================= */

.am-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  transition: var(--am-transition) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Info — blue (email, send actions) */
.am-icon-btn--info {
  color: var(--am-info) !important;
  background: rgba(59,130,246,.10) !important;
}
.am-icon-btn--info:hover {
  background: var(--am-info) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.30) !important;
}

/* Edit — teal */
.am-icon-btn--edit {
  color: var(--am-primary) !important;
  background: rgba(124,77,255,.10) !important;
}
.am-icon-btn--edit:hover {
  background: var(--am-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124,77,255,.30) !important;
}

/* View — slate */
.am-icon-btn--view {
  color: #64748b !important;
  background: rgba(100,116,139,.10) !important;
}
.am-icon-btn--view:hover {
  background: #64748b !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(100,116,139,.25) !important;
}

/* Delete — red */
.am-icon-btn--delete {
  color: var(--am-danger) !important;
  background: rgba(239,68,68,.10) !important;
}
.am-icon-btn--delete:hover {
  background: var(--am-danger) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239,68,68,.30) !important;
}

/* Success — green (enable/approve actions) */
.am-icon-btn--success {
  color: var(--am-success) !important;
  background: rgba(16,185,129,.10) !important;
}
.am-icon-btn--success:hover {
  background: var(--am-success) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,.30) !important;
}

/* Warning — amber (revert / unapprove actions) */
.am-icon-btn--warning {
  color: var(--am-warning, #f59e0b) !important;
  background: rgba(245,158,11,.10) !important;
}
.am-icon-btn--warning:hover {
  background: var(--am-warning, #f59e0b) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.30) !important;
}

/* Ensure am-icon-btn always shows correct font-size regardless of parent */
.am-icon-btn,
.input-group-btn .am-icon-btn,
.input_groupinfo .am-icon-btn {
  font-size: 12px !important;
}

/* Small numeric badge anchored to top-right of an icon button.
   Used on Fleet listing for the per-fleet driver count. */
.am-icon-btn--badge {
  position: relative !important;
  overflow: visible !important;
}
.am-icon-btn__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--am-primary, #7c4dff);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Action cell container — single flex row, no wrapping */
.am-action-cell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Every listing-page action cell uses the uniform 28×28 .am-icon-btn
     for ALL buttons. Five buttons × 28px + 4 × 5px gap = 160px max,
     three buttons (drivers list) = 94px. Keep them on a single line
     and centered within whatever cell width DataTables allocates. */
  flex-wrap: nowrap !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

/* Parent td: shrink-to-fit width + center the inline-flex container
   so wider tables (Drivers) get a tight Action column with the buttons
   centered in it, not floating top-left over empty space. */
td:has(> .am-action-cell) {
  white-space: nowrap;
  width: 1%;
  text-align: center;
  vertical-align: middle;
}

/* Bootstrap auto-injects a ▾ caret on .dropdown-toggle via ::after.
   On the kebab action button (3-dot ⋮ icon) that caret crowds the
   icon and makes the kebab visually larger / off-balance compared to
   neighbour .am-icon-btn buttons. Hide it — the icon alone signals
   "more actions". */
.am-icon-btn.dropdown-toggle::after {
  display: none !important;
}

/* Some action buttons live inside <form> (for POST routes) or
   <div.dropdown> (for menus) wrappers, while others are direct <a>.
   Without this rule the wrappers introduce default block-level
   layout + form margin, which makes their button sit slightly off
   from the bare <a> neighbours. Force every direct child of
   .am-action-cell to behave like a 28×28 inline-flex item so the
   row reads as 5 identical chips regardless of wrapper element. */
.am-action-cell > form,
.am-action-cell > .dropdown,
.am-action-cell > .d-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Don't let the wrapper exceed its child button's width. */
  width: 28px !important;
  height: 28px !important;
}

/* Dropdown menu must still escape the 28×28 wrapper — Bootstrap
   absolute-positions it from the .dropdown anchor, so the menu
   itself isn't constrained by the wrapper's box. */
.am-action-cell > .dropdown {
  position: relative !important;
}
.am-action-cell .dropdown-menu {
  min-width: 160px;
}

/* ── provider_block cells — constrain column width only ── */
/* Do NOT override btn display/padding — .btn-label inside uses position:absolute
   which depends on position:relative + padding-right:53px from .label-right */
td.provider_block {
  max-width: 150px !important;
  min-width: 100px !important;
  width: 130px !important;
  white-space: normal !important;
}

/* ── Default muted styling for colorless label-badges (e.g. REGULAR, NEMT) ── */
.table tbody td label.btn.btn-block:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-default) {
  background: var(--am-body-bg) !important;
  color: var(--am-text) !important;
  border: 1px solid var(--am-border) !important;
}

/* Status badge pills (.am-status-badge) */
.am-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: .1px !important;
}

.am-status-badge--success {
  background: rgba(16,185,129,.12) !important;
  color: #065f46 !important;
}

.am-status-badge--danger {
  background: rgba(239,68,68,.12) !important;
  color: #991b1b !important;
}

.am-status-badge--warning {
  background: rgba(245,158,11,.12) !important;
  color: #92400e !important;
}

.am-status-badge--info {
  background: rgba(59,130,246,.12) !important;
  color: #1e40af !important;
}

.am-status-badge--muted {
  background: rgba(148,163,184,.15) !important;
  color: #64748b !important;
}

/* Badge as anchor: no underline, keep pointer */
a.am-status-badge {
  text-decoration: none !important;
  cursor: pointer !important;
}
a.am-status-badge:hover {
  opacity: .85 !important;
  text-decoration: none !important;
}

/* Gap between icon and badge text */
.am-status-badge i {
  margin-right: 4px !important;
  font-size: 11px !important;
}

/* Statements dropdown in table cells */
.table tbody td .dropdown {
  position: relative !important;
}

.table tbody td .dropdown .dropdown-menu {
  min-width: 150px !important;
  padding: 6px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-card-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  background: #fff !important;
}

.table tbody td .dropdown .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--am-text) !important;
  border-radius: 6px !important;
  transition: var(--am-transition) !important;
  text-decoration: none !important;
}

.table tbody td .dropdown .dropdown-item:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-primary) !important;
}

.table tbody td .dropdown .dropdown-item i {
  width: 14px !important;
  text-align: center !important;
  color: var(--am-text-muted) !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.table tbody td .dropdown .dropdown-item:hover i {
  color: var(--am-primary) !important;
}

/* =============================================================
   FORM PAGES — Modern Layout
   ============================================================= */

/* Form card body padding */
.content-area .box.box-block .form-horizontal,
.content-area .box.box-block form.form-horizontal {
  padding: 28px 24px !important;
}

/* ── Form group rows ── */
.form-horizontal .form-group {
  margin-bottom: 22px !important;
}

.form-horizontal .form-group.row {
  align-items: flex-start !important;
}

/* Labels */
.form-horizontal .col-form-label,
.form-horizontal label.col-xs-12,
.form-horizontal label.col-12 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--am-text) !important;
  padding-top: 10px !important;
  padding-bottom: 4px !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Required asterisk */
.form-horizontal .req,
.form-horizontal .required,
span.req {
  color: var(--am-danger) !important;
  margin-left: 2px !important;
}

/* Help / validation text */
.form-horizontal .help-block,
.form-horizontal .form-text {
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
  margin-top: 5px !important;
  display: block !important;
}

.form-horizontal .help-block.text-danger,
.form-horizontal p.help-block {
  color: var(--am-danger) !important;
}

/* Inline radios / checkboxes */
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  font-size: 13.5px !important;
  color: var(--am-text) !important;
  margin-right: 16px !important;
  cursor: pointer !important;
}

/* Dropify file upload */
.dropify-wrapper {
  border: 2px dashed var(--am-border) !important;
  border-radius: 10px !important;
  background: var(--am-input-bg) !important;
  transition: border-color .2s ease !important;
}

.dropify-wrapper:hover {
  border-color: var(--am-primary) !important;
  background: rgba(124,77,255,.02) !important;
}

.dropify-wrapper .dropify-message span.file-icon {
  color: var(--am-primary) !important;
}

.dropify-wrapper .dropify-message p {
  color: var(--am-text-muted) !important;
  font-size: 13px !important;
}

/* Section dividers inside forms */
.form-horizontal h5,
.form-horizontal h6 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  padding: 16px 0 10px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--am-border) !important;
}

/* ── Form submit / action row ── */
.form-horizontal .mrgn-30-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 20px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--am-border) !important;
  flex-wrap: wrap !important;
}

/* Submit button */
.form-horizontal button[type="submit"].btn-primary,
.form-horizontal input[type="submit"].btn-primary {
  min-width: 130px !important;
}

/* Cancel / back in forms */
.form-horizontal .btn-default,
.form-horizontal .btn-secondary {
  background: #fff !important;
  border: 1px solid var(--am-border) !important;
  color: var(--am-text) !important;
}

.form-horizontal .btn-default:hover {
  background: var(--am-body-bg) !important;
}

/* input-group addon */
.input-group .input-group-addon {
  background: var(--am-body-bg) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 8px !important;
  color: var(--am-text-muted) !important;
  font-size: 13px !important;
  padding: 0 12px !important;
}

/* Map container */
.content-area #map,
.content-area .map-container {
  border-radius: 10px !important;
  border: 1px solid var(--am-border) !important;
  overflow: hidden !important;
}

/* Back button (pull-right/pull-left pattern) */
.content-area .box.box-block a.btn.pull-right,
.content-area .box.box-block a.btn.pull-left,
.content-area .box.box-block button.btn.pull-right {
  float: none !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORM PAGES — Professional Create / Edit / Update design
   Targets .form-horizontal forms inside .box.box-block.
   No HTML changes required — pure CSS override.
   ═══════════════════════════════════════════════════════════════ */

/* ── Form card: make room for the absolute-positioned back button ── */
.box.box-block:has(.form-horizontal) {
  position: relative !important;
  padding: 28px 32px 36px !important;
}

/* ── Page header: title ── */
.box.box-block:has(.form-horizontal) > h5 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 0 0 0 !important;
  padding: 4px 150px 18px 0 !important;   /* right gap for back button */
  border-bottom: 1px solid var(--am-border) !important;
  margin-bottom: 28px !important;
  line-height: 1.4 !important;
}

/* ── Back / header action button ── */
.box.box-block:has(.form-horizontal) > a.btn.pull-right,
.box.box-block:has(.form-horizontal) > a.btn.pull-left {
  position: absolute !important;
  top: 28px !important;
  right: 32px !important;
  float: none !important;
  background: transparent !important;
  border: 1px solid var(--am-border) !important;
  color: var(--am-text-muted) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  line-height: 1.5 !important;
  transition: background .15s, border-color .15s, color .15s !important;
  white-space: nowrap !important;
}
.box.box-block:has(.form-horizontal) > a.btn.pull-right:hover,
.box.box-block:has(.form-horizontal) > a.btn.pull-left:hover {
  background: var(--am-body-bg) !important;
  color: var(--am-text) !important;
  border-color: var(--am-text-muted) !important;
  text-decoration: none !important;
}

/* ── Form container: constrain width for readability ── */
.box.box-block .form-horizontal {
  max-width: 720px !important;
}

/* ── Form groups: vertical stacked layout ── */
.form-horizontal .form-group.row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

/* ── Labels: always full-width, clean typography ── */
.form-horizontal .form-group.row .col-form-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 7px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--am-text) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}

/* Hide empty labels (submit-row placeholder labels) */
.form-horizontal .form-group.row .col-form-label:empty {
  display: none !important;
}

/* ── All col-xs-* wrappers: full-width block ── */
.form-horizontal .form-group.row [class*="col-xs-"]:not(.col-form-label) {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── Core input / select / textarea styling ── */
.form-horizontal .form-control,
.form-horizontal select:not(.form-control):not(.select2-hidden-accessible) {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 13px !important;
  font-size: 13.5px !important;
  color: var(--am-text) !important;
  background: var(--am-input-bg) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 7px !important;
  line-height: 1.5 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  box-shadow: none !important;
}

.form-horizontal .form-control:focus,
.form-horizontal select:not(.form-control):focus {
  border-color: var(--am-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.14) !important;
  outline: none !important;
  background: #fff !important;
}

.form-horizontal .form-control::placeholder {
  color: #b0bec5 !important;
  font-size: 13px !important;
}

/* Disabled inputs */
.form-horizontal .form-control:disabled,
.form-horizontal .form-control[readonly] {
  background: #f8f7ff !important;
  color: var(--am-text-muted) !important;
  cursor: not-allowed !important;
}

/* Textarea */
.form-horizontal textarea.form-control {
  height: auto !important;
  min-height: 110px !important;
  resize: vertical !important;
}

/* ── Select2 overrides inside forms ── */
.form-horizontal .select2-container .select2-selection--single {
  height: 40px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 7px !important;
  background: var(--am-input-bg) !important;
  display: flex !important;
  align-items: center !important;
}
.form-horizontal .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 13px !important;
  color: var(--am-text) !important;
}
.form-horizontal .select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}
.form-horizontal .select2-container--focus .select2-selection--single,
.form-horizontal .select2-container--open .select2-selection--single {
  border-color: var(--am-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.14) !important;
}

/* ── Dropify file upload ── */
.form-horizontal .dropify-wrapper {
  border: 2px dashed var(--am-border) !important;
  border-radius: 10px !important;
  background: var(--am-input-bg) !important;
  height: 120px !important;
  transition: border-color .15s !important;
}
.form-horizontal .dropify-wrapper:hover {
  border-color: var(--am-primary) !important;
  background: var(--am-primary-light) !important;
}
.form-horizontal .dropify-wrapper .dropify-message span.file-icon::before {
  color: var(--am-primary) !important;
}

/* ── Checkboxes & radios ── */
.form-horizontal input[type="checkbox"],
.form-horizontal input[type="radio"] {
  width: 17px !important;
  height: 17px !important;
  cursor: pointer !important;
  accent-color: var(--am-primary) !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* Checkbox rows: label contains the checkbox inline */
.form-horizontal .form-group.row .col-form-label:has(input[type="checkbox"]),
.form-horizontal .form-group.row .col-form-label:has(input[type="radio"]) {
  display: flex !important;
  align-items: center !important;
  padding-bottom: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--am-text) !important;
  gap: 8px !important;
}

/* ── Pricing formula hint (.showcal) ── */
.form-horizontal .showcal {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 8px !important;
  padding: 4px 12px !important;
  background: #f8f7ff !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
  font-style: normal !important;
}
.form-horizontal .showcal b { font-weight: 600 !important; }
.form-horizontal .showcal i { font-style: normal !important; }

/* ── Switchery toggles in forms ── */
.form-horizontal .switchery {
  vertical-align: middle !important;
}

/* ── Action button row: separator + flex layout ── */
.form-horizontal .form-group.row:last-of-type {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--am-border) !important;
  margin-bottom: 0 !important;
}

/* Buttons inside the action row */
.form-horizontal .form-group.row:last-of-type .btn,
.form-horizontal .form-group.row:last-of-type a.btn {
  min-width: 130px !important;
  padding: 9px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.01em !important;
  margin-right: 10px !important;
  margin-bottom: 6px !important;
  transition: background .15s, box-shadow .15s !important;
}
.form-horizontal .form-group.row:last-of-type .btn-primary {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(124,77,255,.25) !important;
}
.form-horizontal .form-group.row:last-of-type .btn-primary:hover {
  background: var(--am-primary-dark) !important;
  border-color: var(--am-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.35) !important;
}
.form-horizontal .form-group.row:last-of-type .btn-default,
.form-horizontal .form-group.row:last-of-type .btn-secondary {
  background: #f8f7ff !important;
  border-color: var(--am-border) !important;
  color: var(--am-text-muted) !important;
}
.form-horizontal .form-group.row:last-of-type .btn-default:hover,
.form-horizontal .form-group.row:last-of-type .btn-secondary:hover {
  background: var(--am-border) !important;
  color: var(--am-text) !important;
}
.form-horizontal .form-group.row:last-of-type .btn-danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: var(--am-danger) !important;
}
.form-horizontal .form-group.row:last-of-type .btn-danger:hover {
  background: var(--am-danger) !important;
  border-color: var(--am-danger) !important;
  color: #fff !important;
}

/* btn-block inside action row: override block to inline */
.form-horizontal .form-group.row:last-of-type .btn-block {
  display: inline-block !important;
  width: auto !important;
}

/* Nested row inside last form-group (service form pattern) */
.form-horizontal .form-group.row:last-of-type .row {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.form-horizontal .form-group.row:last-of-type .row [class*="col-"] {
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Stat cards
   Structure: .box.box-block.bg-white.tile.tile-1
              ├── .t-icon.right > span.bg-* + i.ti-*
              └── .t-content   > h6 + h1 + span
   ═══════════════════════════════════════════════════════════════ */

.box.tile.tile-1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 24px !important;
  min-height: 100px !important;
  overflow: visible !important;
}

.box.tile.tile-1 .t-content { flex: 1 !important; min-width: 0 !important; }

.box.tile.tile-1 .t-content h6 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--am-text-muted) !important;
  margin: 0 0 10px 0 !important;
}

.box.tile.tile-1 .t-content h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--am-text) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px 0 !important;
}

.box.tile.tile-1 .t-content span {
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
  line-height: 1.4 !important;
}

.box.tile.tile-1 .t-icon.right {
  position: static !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--am-primary-light) !important;
  top: auto !important;
  right: auto !important;
}

.box.tile.tile-1 .t-icon.right span { display: none !important; }

.box.tile.tile-1 .t-icon.right i {
  font-size: 22px !important;
  color: var(--am-primary) !important;
}

.box.tile.tile-1 .t-icon.right:has(.bg-danger)  { background: rgba(239,68,68,.10) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-danger) i  { color: #ef4444 !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-success) { background: rgba(16,185,129,.10) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-success) i { color: #10b981 !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-primary) { background: rgba(124,77,255,.10) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-primary) i { color: var(--am-primary) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-warning) { background: rgba(245,158,11,.10) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-warning) i { color: #f59e0b !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-info)    { background: rgba(59,130,246,.10) !important; }
.box.tile.tile-1 .t-icon.right:has(.bg-info) i    { color: #3b82f6 !important; }

.row.row-md { margin-bottom: 8px !important; }
.row.row-md > [class*="col-"] { padding-bottom: 8px !important; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Panel cards (wallet, recent rides)
   Structure: .box.bg-white (no .box-block outer)
              ├── .box-block.clearfix > h5.float-xs-left
              └── table.table
   ═══════════════════════════════════════════════════════════════ */

.box.bg-white:not(.tile) {
  background: var(--am-card-bg) !important;
  border-radius: var(--am-card-radius) !important;
  box-shadow: var(--am-card-shadow) !important;
  border: none !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.box.bg-white .box-block.clearfix {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--am-border) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.box.bg-white .box-block.clearfix h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 !important;
  float: none !important;
}

.box.bg-white .box-block.clearfix .float-xs-right { float: none !important; }

.box.bg-white .table th,
.box.bg-white .table td {
  padding: 10px 20px !important;
  font-size: 13px !important;
  border-color: var(--am-border) !important;
  vertical-align: middle !important;
}

.box.bg-white .table th {
  font-weight: 600 !important;
  color: var(--am-text) !important;
  background: transparent !important;
}

.box.bg-white .table tr:last-child th,
.box.bg-white .table tr:last-child td { border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════════════
   TAGS / STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.tag-success   { background: #d1fae5 !important; color: #065f46 !important; }
.tag-danger    { background: #fee2e2 !important; color: #991b1b !important; }
.tag-warning   { background: #fef3c7 !important; color: #92400e !important; }
.tag-info      { background: #dbeafe !important; color: #1e40af !important; }
.tag-primary   { background: var(--am-primary-light) !important; color: #134e4a !important; }
.tag-default,
.tag-secondary { background: #f8f7ff !important; color: var(--am-text-muted) !important; }

.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
}

.badge-success  { background: #d1fae5 !important; color: #065f46 !important; }
.badge-danger   { background: #fee2e2 !important; color: #991b1b !important; }
.badge-warning  { background: #fef3c7 !important; color: #92400e !important; }
.badge-info     { background: #dbeafe !important; color: #1e40af !important; }
.badge-primary  { background: var(--am-primary-light) !important; color: #134e4a !important; }
.badge-secondary { background: #f8f7ff !important; color: var(--am-text-muted) !important; }
.badge-dark     { background: #1a1a35 !important; color: #f8f7ff !important; }

/* ═══════════════════════════════════════════════════════════════
   DETAIL / SHOW PAGES — .request-details dl.row
   ═══════════════════════════════════════════════════════════════ */

.request-details {
  background: var(--am-body-bg) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}

.request-details dl.row { margin: 0 !important; }

.request-details dt {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--am-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 8px 10px 0 !important;
  border-bottom: 1px solid var(--am-border) !important;
  display: flex !important;
  align-items: center !important;
}

.request-details dd {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--am-text) !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--am-border) !important;
  display: flex !important;
  align-items: center !important;
}

/* h4 title used in request/show */
.box.box-block > h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 0 20px 0 !important;
  padding-right: 150px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--am-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP CARD OVERRIDES (.card, .card-header, .card-body)
   ═══════════════════════════════════════════════════════════════ */

.content-area .card {
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.content-area .card-header {
  padding: 12px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.content-area .card-header.bg-primary   { background: var(--am-primary) !important; color: #fff !important; }
.content-area .card-header.bg-success   { background: #10b981 !important; color: #fff !important; }
.content-area .card-header.bg-danger    { background: #ef4444 !important; color: #fff !important; }
.content-area .card-header.bg-warning   { background: #f59e0b !important; color: #fff !important; }
.content-area .card-header.bg-info      { background: #3b82f6 !important; color: #fff !important; }
.content-area .card-header.bg-secondary { background: var(--am-text-muted) !important; color: #fff !important; }

.content-area .card-body {
  padding: 16px 18px !important;
  font-size: 13.5px !important;
  color: var(--am-text) !important;
}

.content-area .card-body p  { margin-bottom: 8px !important; line-height: 1.6 !important; }
.content-area .card-body strong { font-weight: 600 !important; color: var(--am-text) !important; }
.content-area .card-body hr { border-color: var(--am-border) !important; margin: 10px 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   LISTING PAGE TOOLBAR
   .box-container-fresh-css + .form-container-fresh-css
   ═══════════════════════════════════════════════════════════════ */

.box-container-fresh-css {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 10px 0 14px 0 !important;
  border-bottom: 1px solid var(--am-border) !important;
  margin-bottom: 12px !important;
}

.form-container-fresh-css {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.form-container-fresh-css.left-forms .btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-weight: 500 !important;
}

.form-container-fresh-css.right-forms input[type="search"],
.form-container-fresh-css.right-forms input[type="text"] {
  height: 34px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 7px !important;
  padding: 0 12px !important;
  background: var(--am-input-bg) !important;
  color: var(--am-text) !important;
  font-size: 13px !important;
  outline: none !important;
  min-width: 200px !important;
  transition: border-color .15s !important;
}

.form-container-fresh-css.right-forms input:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.12) !important;
}

.form-container-fresh-css.right-forms .btn {
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SORTABLE COLUMN HEADER LINKS
   ═══════════════════════════════════════════════════════════════ */

.anchor-shorting-tag,
table thead th > a {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.anchor-shorting-tag:hover,
table thead th > a:hover { color: var(--am-primary) !important; }

.anchor-shorting-tag .fa,
table thead th > a .fa { font-size: 10px !important; opacity: .5 !important; }

/* ═══════════════════════════════════════════════════════════════
   DISPATCH / KANBAN PAGE
   ═══════════════════════════════════════════════════════════════ */

.dispatch-content .card {
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.dispatch-content .card .card-header {
  background: var(--am-body-bg) !important;
  color: var(--am-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--am-border) !important;
}

.items-list { max-height: 70vh !important; overflow-y: auto !important; }

.il-item {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--am-border) !important;
  transition: background .12s !important;
}

.il-item:hover { background: var(--am-body-bg) !important; }
.il-item:last-child { border-bottom: none !important; }

.il-item .media-body h5 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--am-text) !important;
  margin-bottom: 4px !important;
}

.il-item .media-body h6 {
  font-size: 12px !important;
  color: var(--am-text-muted) !important;
  margin-bottom: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   GENERAL CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */

.content-area { padding-top: 4px !important; padding-bottom: 24px !important; }
.content-area .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }

.text-success { color: #10b981 !important; }
.text-danger  { color: #ef4444 !important; }
.text-warning { color: #f59e0b !important; }
.text-info    { color: #3b82f6 !important; }
.text-primary { color: var(--am-primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE REDESIGN — Layout + Spacing + Visual Fixes
   Addresses core.css conflicts, spacing across ALL page types,
   and complete tile / alert / table / form styles.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   LAYOUT ROOT FIXES (core.css conflicts)
───────────────────────────────────────────────────────────── */

/* core.css uses 60px header height; ours is 64px — fix the gap */
.fixed-header .site-content {
  padding-top: var(--am-header-h) !important;
}

/* Sidebar must also start below the taller header */
.site-sidebar {
  margin-top: var(--am-header-h) !important;
}

/* Wrapper background — core.css sets #e8ebf0 */
.wrapper {
  background: var(--am-body-bg) !important;
}

/* Preloader accent — use our primary */
.preloader::after {
  border-color: var(--am-primary) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   TILE / DASHBOARD KPI CARDS
   core.css places a 120×120 circle at top:-60px right:-60px
   We completely replace it with a flat icon badge.
───────────────────────────────────────────────────────────── */

.tile.tile-1 {
  min-height: 118px !important;
  padding: 22px 22px 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}

.tile.tile-1:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(15,23,42,.13) !important;
}

.tile-1 .t-content {
  position: relative !important;
  z-index: 10 !important;
  flex: 1 !important;
  padding-right: 68px !important;
}

.tile-1 .t-content h1,
.tile .t-content h1 {
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  color: #130f28 !important;
  margin: 0 0 2px !important;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
}

.tile-1 .t-content h6,
.tile .t-content h6 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}

.tile-1 .t-content .text-muted,
.tile-1 .t-content > span {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: block !important;
  margin-top: 6px !important;
}

/* ── Icon badge: replaces core.css circle bubble ── */
.tile-1 .t-icon {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

/* Span fills the badge box (override core.css 120×120 circle) */
.tile-1 .t-icon span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  z-index: 0 !important;
}

.tile-1 .t-icon span.bg-danger  { background: #fef2f2 !important; }
.tile-1 .t-icon span.bg-success { background: #f0fdf4 !important; }
.tile-1 .t-icon span.bg-primary { background: #eff6ff !important; }
.tile-1 .t-icon span.bg-warning { background: #fffbeb !important; }
.tile-1 .t-icon span.bg-info    { background: #ecfeff !important; }

/* Icon above background */
.tile-1 .t-icon i {
  position: relative !important;
  z-index: 9 !important;
  font-size: 22px !important;
  padding: 0 !important;
}

/* Contextual icon colours — override core.css white */
.tile-1 .t-icon:has(span.bg-danger)  i { color: #ef4444 !important; }
.tile-1 .t-icon:has(span.bg-success) i { color: #10b981 !important; }
.tile-1 .t-icon:has(span.bg-primary) i { color: #7C4DFF !important; }
.tile-1 .t-icon:has(span.bg-warning) i { color: #f59e0b !important; }
.tile-1 .t-icon:has(span.bg-info)    i { color: #06b6d4 !important; }

/* Coloured left accent strip per card type */
.tile-1:has(.t-icon span.bg-danger)  { border-left: 4px solid #ef4444 !important; }
.tile-1:has(.t-icon span.bg-success) { border-left: 4px solid #10b981 !important; }
.tile-1:has(.t-icon span.bg-primary) { border-left: 4px solid #7C4DFF !important; }
.tile-1:has(.t-icon span.bg-warning) { border-left: 4px solid #f59e0b !important; }
.tile-1:has(.t-icon span.bg-info)    { border-left: 4px solid #06b6d4 !important; }

/* ─────────────────────────────────────────────────────────────
   TABLES — Modern horizontal-only borders (.table-bordered fix)
───────────────────────────────────────────────────────────── */

.table.table-bordered td,
.table.table-bordered th {
  border-left: none !important;
  border-right: none !important;
}

.table.table-bordered thead th {
  border-top: none !important;
  border-bottom: 2px solid #e8edf4 !important;
}

.table.table-bordered tbody td {
  border-top: 1px solid #f8f7ff !important;
  border-bottom: none !important;
}

.table.table-bordered {
  border: none !important;
}

.table tbody tr { height: 54px !important; }
.table tbody td { vertical-align: middle !important; }

/* ─────────────────────────────────────────────────────────────
   ALERTS — Unified modern style
───────────────────────────────────────────────────────────── */

.alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 14px 48px 14px 20px !important;
  font-size: 13.5px !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.07) !important;
  margin-bottom: 20px !important;
  background-image: none !important;
  animation: am-alert-in .3s ease !important;
}

@keyframes am-alert-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 4px solid #ef4444 !important;
  background-color: #fef2f2 !important;
}
.alert-danger .close { color: #991b1b !important; opacity: .6 !important; }
.alert-danger ul { margin: 0; padding-left: 18px; }
.alert-danger li { margin-bottom: 3px; }

.alert-success {
  background: #f0fdf4 !important;
  color: #065f46 !important;
  border-left: 4px solid #10b981 !important;
  background-color: #f0fdf4 !important;
}
/* Simplify the fancy nested success layout */
.alert-success .d-flex { display: block !important; }
.alert-success .mr-3   { display: none !important; }
.alert-success h5.font-weight-bold { display: none !important; }
.alert-success p,
.alert-success .flex-grow-1 { color: #065f46 !important; margin: 0 !important; padding: 0 !important; }
.alert-success .close {
  position: absolute !important; right: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  color: #065f46 !important; opacity: .6 !important; font-size: 1.2rem !important;
}

.alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border-left: 4px solid #f59e0b !important;
  background-color: #fffbeb !important;
}
.alert-warning .close { color: #92400e !important; opacity: .6 !important; }

.alert-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-left: 4px solid #3b82f6 !important;
  background-color: #eff6ff !important;
}
.alert-info .close { color: #1e40af !important; opacity: .6 !important; }

/* ─────────────────────────────────────────────────────────────
   FORM PAGES — Back button + card header spacing
───────────────────────────────────────────────────────────── */

.content-area .box.box-block {
  position: relative !important;
  margin-bottom: 16px !important;
}

.content-area .box.box-block > a.btn.pull-right,
.content-area .box.box-block > a.btn.pull-left,
.content-area .box.box-block > button.btn.pull-right {
  float: none !important;
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  z-index: 5 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid var(--am-border) !important;
  color: var(--am-text-muted) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}

.content-area .box.box-block > h4,
.content-area .box.box-block > h5 {
  padding: 18px 140px 16px 20px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  border-bottom: 1px solid var(--am-border) !important;
  background: linear-gradient(135deg, #fff 0%, #faf9ff 100%) !important;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
  border-left: 4px solid var(--am-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   REQUEST DETAIL PAGE — Override inline styles
───────────────────────────────────────────────────────────── */

.request-details {
  background: var(--am-card-bg) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background-color: var(--am-card-bg) !important;
}

.request-details dl.row { margin: 0 !important; }

.request-details dl.row dt,
.request-details dl.row dd {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f8f7ff !important;
  margin: 0 !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.request-details dl.row dt {
  font-weight: 600 !important;
  color: var(--am-text-muted) !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  background: #faf9ff !important;
}

.request-details dl.row dd {
  color: var(--am-text) !important;
  font-weight: 500 !important;
  background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   DEMO MODE BANNER
───────────────────────────────────────────────────────────── */

.content-area .box [style*="color:red"],
.content-area .box [style*="color: red"] {
  padding: 10px 20px !important;
  background: #fef2f2 !important;
  border-bottom: 1px solid #fecaca !important;
  color: #b91c1c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  height: auto !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   SPACING — Content area, rows, columns
───────────────────────────────────────────────────────────── */

.content-area {
  padding: 24px !important;
}

.content-area .container-fluid {
  padding: 0 !important;
  max-width: 100% !important;
}

.content-area .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.content-area .row > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.content-area .row-md {
  margin-bottom: 16px !important;
}

.tile.tile-1.mb-2 { margin-bottom: 0 !important; }

/* ─────────────────────────────────────────────────────────────
   SIDEBAR — Remove core.css active arrow
───────────────────────────────────────────────────────────── */

.site-sidebar .sidebar-menu > li.active > a::after {
  display: none !important;
}

/* Bootstrap 5 utilities used in some pages */
.fw-bold { font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM VISUAL UPGRADE — Classy & Modern Transformation
   Overrides earlier sections where needed (appended last = wins).
   ═════════════════════════════════════════���═════════════════════ */

/* ── Design Token Overrides (shift to deeper, richer palette) ── */
:root {
  --am-primary:        #7C4DFF;   /* sky-500  — premium azure */
  --am-primary-dark:   #6B3FE0;   /* sky-600 */
  --am-primary-light:  #ede9fe;   /* sky-100 */
  --am-sidebar-bg:     #130f28;   /* slate-900 — deep navy */
  --am-sidebar-hover:  #1a1a35;
  --am-sidebar-active: #7C4DFF;
  --am-body-bg:        #f0f4f8;   /* pearl blue-grey */
  --am-card-shadow:    0 2px 8px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.04);
  --am-card-radius:    12px;
}

/* ── Body ── */
body.fixed-sidebar.fixed-header {
  background: var(--am-body-bg) !important;
  font-size: 13.5px !important;
}

/* ── Enhanced card depth ── */
.box {
  box-shadow: 0 2px 8px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.04) !important;
  border-color: rgba(226,232,240,.8) !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
  border-radius: var(--am-card-radius) !important;
}
.box:hover {
  box-shadow: 0 6px 24px rgba(15,23,42,.11), 0 0 0 1px rgba(15,23,42,.05) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────
   SIDEBAR — Deep Navy with Brand Accent
───────────────────────────────────────────────────────────── */
.site-sidebar {
  background: var(--am-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.18) !important;
}

/* Animated gradient brand strip at the very top */
.site-sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #7C4DFF 0%, #38bdf8 35%, #22d3ee 65%, #7C4DFF 100%);
  background-size: 200% 100%;
  animation: am-brand-slide 4s linear infinite;
  flex-shrink: 0;
}

@keyframes am-brand-slide {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

/* Refined section titles */
.sidebar-menu .menu-title {
  font-size: 9.5px !important;
  letter-spacing: 1.6px !important;
  color: #2d2454 !important;
  padding: 22px 20px 5px !important;
  font-weight: 700 !important;
}

/* Nav items */
.sidebar-menu > li > a {
  border-left: 3px solid transparent !important;
  padding: 9px 16px 9px 18px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  transition: all .15s ease !important;
}

.sidebar-menu > li > a:hover {
  background: rgba(255,255,255,.05) !important;
  border-left-color: #38bdf8 !important;
  color: #e2e8f0 !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li > a.active {
  background: rgba(124,77,255,.18) !important;
  border-left-color: #38bdf8 !important;
  color: #f5f3ff !important;
}

.sidebar-menu > li.active > a .s-icon,
.sidebar-menu > li > a:hover .s-icon {
  color: #38bdf8 !important;
  opacity: 1 !important;
}

/* Sub-menu */
.sidebar-menu .with-sub > ul {
  background: rgba(0,0,0,.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   HEADER — Frosted White with Premium Shadow
───────────────────────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 1px 0 rgba(226,232,240,.9), 0 4px 16px rgba(15,23,42,.05) !important;
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD KPI TILES — Bold, Impactful Design
───────────────────────────────────────────────────────────── */

.tile.tile-1 {
  padding: 22px 20px 18px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}

.tile.tile-1:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(15,23,42,.14) !important;
}

/* Colored left accent strip — identify card type at a glance */
.tile-1:has(.t-icon .bg-danger)  { border-left: 4px solid #ef4444 !important; }
.tile-1:has(.t-icon .bg-success) { border-left: 4px solid #10b981 !important; }
.tile-1:has(.t-icon .bg-primary) { border-left: 4px solid #7C4DFF !important; }
.tile-1:has(.t-icon .bg-warning) { border-left: 4px solid #f59e0b !important; }
.tile-1:has(.t-icon .bg-info)    { border-left: 4px solid #06b6d4 !important; }

/* Icon container: relative so the span fills it as a bg */
.tile .t-icon {
  position: relative !important;
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
}

/* Span becomes a colored badge background */
.tile .t-icon span {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  z-index: 0 !important;
}
.tile .t-icon span.bg-danger  { background: rgba(239,68,68,.13)   !important; }
.tile .t-icon span.bg-success { background: rgba(16,185,129,.13)  !important; }
.tile .t-icon span.bg-primary { background: rgba(124,77,255,.13)  !important; }
.tile .t-icon span.bg-warning { background: rgba(245,158,11,.13)  !important; }
.tile .t-icon span.bg-info    { background: rgba(6,182,212,.13)   !important; }

/* Icon floats above the badge background */
.tile .t-icon i {
  position: relative !important;
  z-index: 1 !important;
  font-size: 20px !important;
}

/* Stat value — make it bold and large */
.tile .t-content h1 {
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  color: #130f28 !important;
  margin: 0 0 2px !important;
  line-height: 1 !important;
}

/* Stat label */
.tile .t-content h6 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}

.tile .t-content .text-muted {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLE ENHANCEMENTS
───────────────────────────────────────────────────────────── */

/* Slightly tighter header */
.table thead th {
  background: #faf9ff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  font-size: 10.5px !important;
  letter-spacing: .8px !important;
  color: #64748b !important;
  padding: 12px 16px !important;
}

.table tbody td {
  padding: 12px 16px !important;
  border-color: #f8f7ff !important;
  font-size: 13.5px !important;
}

/* Even softer alternating */
.table.table-striped tbody tr:nth-of-type(odd) {
  background: #fafcff !important;
}

/* Hover — sky tint */
.table tbody tr:hover,
.table.table-striped tbody tr:hover {
  background: #f5f3ff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE HEADER — More Premium
───────────────────────────────────────────────────────────── */

.am-page-header {
  background: linear-gradient(135deg, #fff 0%, #faf9ff 100%) !important;
  border-left: 4px solid var(--am-primary) !important;
  padding: 16px 24px !important;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
}

.am-page-header h5 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: #130f28 !important;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS — More Premium Feel
───────────────────────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-color: #6B3FE0 !important;
  box-shadow: 0 2px 4px rgba(124,77,255,.25) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #6B3FE0 0%, #0369a1 100%) !important;
  border-color: #0369a1 !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.40) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────
   CONTENT AREA — Generous Spacing
───────────────────────────────────────────────────────────── */

.content-area.py-1 {
  padding: 24px !important;
}

.content-area .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Row gap between tile cards */
.content-area .row-md {
  margin-bottom: 16px !important;
}

.content-area .row-md > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-bottom: 0 !important;
}

.content-area .row-md .tile.tile-1.mb-2 {
  margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — Minimal
───────────────────────────────────────────────────────────── */

.site-footer {
  background: #fff !important;
  border-top: 1px solid rgba(226,232,240,.8) !important;
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   FORMS — Cleaner Look
───────────────────────────────────────────────────────────── */

.form-control {
  border-color: #dde3ec !important;
  background: #fafcff !important;
}

.form-control:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.14) !important;
  background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGINATION REFINEMENT
───────────────────────────────────────────────────────────── */

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-color: #6B3FE0 !important;
  box-shadow: 0 2px 6px rgba(124,77,255,.30) !important;
}

.pagination li.active > a,
.pagination li.active > span {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-color: #6B3FE0 !important;
  box-shadow: 0 2px 6px rgba(124,77,255,.25) !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM PAGE CARD — Premium Treatment
───────────────────────────────────────────────────────────── */

.box.box-block:has(.form-horizontal) {
  border-top: 3px solid var(--am-primary) !important;
  border-top-left-radius: var(--am-card-radius) !important;
  border-top-right-radius: var(--am-card-radius) !important;
}

/* ─────────────────────────────────────────────────────────────
   TAG / BADGE — Refined Pills
───────────────────────────────────────────────────────────── */

.badge-success, .tag-success { border: 1px solid rgba(16,185,129,.2) !important; }
.badge-danger,  .tag-danger  { border: 1px solid rgba(239,68,68,.2) !important; }
.badge-warning, .tag-warning { border: 1px solid rgba(245,158,11,.2) !important; }
.badge-primary, .tag-primary { border: 1px solid rgba(124,77,255,.2) !important; }
.badge-info,    .tag-info    { border: 1px solid rgba(59,130,246,.2) !important; }

/* ─────────────────────────────────────────────────────────────
   TOASTR — Cleaner notifications
───────────────────────────────────────────────────────────── */

#toast-container > div {
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.16) !important;
  font-size: 13.5px !important;
  padding: 14px 18px 14px 54px !important;
}

/* ─────────────────────────────────────────────────────────────
   SELECT2 — Premium Dropdowns
───────────────────────────────────────────────────────────── */

.select2-container--default .select2-selection--single {
  border-color: #dde3ec !important;
  background: #fafcff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   SCROLLBAR — Premium Thin Style
───────────────────────────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════
   FULL PAGE-BY-PAGE STYLES
   Based on visual audit of all page screenshots.
   Addresses: listing toolbars, form inputs, settings sections,
   request detail, provider show, empty states, DataTable.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CONTENT AREA — Correct padding & background
───────────────────────────────────────────────────────────── */
.content-area {
  padding: 28px 28px 40px !important;
  min-height: calc(100vh - var(--am-header-h)) !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE TITLE — Bold hierarchy for every listing/form page
───────────────────────────────────────────────────────────── */
.content-area > .container-fluid > h3,
.content-area > .container-fluid > h4,
.content-area > h3,
.content-area > h4,
.box-container-fresh-css > h3,
.box-container-fresh-css > h4,
.content-area .page-title,
.content-area .page-header h1,
.content-area .page-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #130f28 !important;
  letter-spacing: -.4px !important;
  margin: 0 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ─────────────────────────────────────────────────────────────
   BOX / CARD — Premium with proper header
───────────────────────────────────────────────────────────── */
.box.box-block {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 4px 20px rgba(15,23,42,.04) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease !important;
  margin-bottom: 20px !important;
}

.box.box-block:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,.1), 0 1px 4px rgba(15,23,42,.06) !important;
  transform: none !important;
}

/* Card header bar (h4/h5 at root of box-block) */
.box.box-block > h4,
.box.box-block > h5 {
  margin: 0 !important;
  padding: 18px 24px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  background: #fafcff !important;
  border-bottom: 1px solid #e8edf4 !important;
  border-radius: 0 !important;
  letter-spacing: -.1px !important;
  position: relative !important;
}

/* Slim accent line under card title */
.box.box-block > h4::after,
.box.box-block > h5::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--am-primary);
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────
   LISTING PAGE TOOLBAR — Compact action strip
   The Delete All / Send Email buttons are huge by default.
   We make them small, uniform, and visually clean.
───────────────────────────────────────────────────────────── */

/* Wrapper row that holds the action buttons */
.box-container-fresh-css .row:first-child,
.am-page-header + .box .row:first-child,
.box .box-body > .row:first-child,
.box .box-body > form + .row:first-child {
  align-items: center !important;
}

/* Shrink all the bulk action danger/warning/info buttons in listing pages */
.btn-group-action .btn,
.btn.btn-danger[onclick*="delete"],
.btn.btn-danger[onclick*="Delete"],
[data-action="delete-all"],
[data-action="delete-selected"] {
  font-size: 11.5px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .1px !important;
}

/* Any row containing only buttons at the top of a .box — treat as toolbar */
.box .box-body .row.mb-2 .btn,
.box .box-body .row.mb-3 .btn,
.box-body > .row:first-of-type .btn,
.box-body .d-flex .btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* DataTable BUTTONS (Copy, Excel, CSV, PDF) */
.dt-buttons .btn,
.dt-buttons .dt-button {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
  transition: all .15s ease !important;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
  background: #faf9ff !important;
  border-color: #cbd5e1 !important;
  color: #130f28 !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.1) !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12px !important;
  color: #64748b !important;
  padding-top: 12px !important;
}

/* DataTable pagination wrapper */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 12px !important;
}

.dataTables_paginate .paginate_button {
  border-radius: 7px !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  min-width: 32px !important;
  text-align: center !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLE — Row height, density, and column consistency
───────────────────────────────────────────────────────────── */
.table thead th {
  background: #f8f7ff !important;
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  white-space: nowrap !important;
}

.table tbody tr {
  height: 52px !important;
  transition: background .1s ease !important;
}

.table tbody td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #2d2454 !important;
  vertical-align: middle !important;
  border-color: #f8f7ff !important;
}

/* Checkbox column — center and shrink */
.table th:first-child,
.table td:first-child {
  padding-left: 16px !important;
  width: 40px !important;
}

/* Action column — right-align, keep buttons tight */
.table td:last-child {
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLE ACTION BUTTONS (View/Edit/Delete/Approve in cells)
───────────────────────────────────────────────────────────── */
.table .btn-xs,
.table td .btn {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: .1px !important;
  margin: 1px 2px !important;
  line-height: 1.4 !important;
}

/* Status badges in tables */
.table .badge,
.table .label {
  font-size: 10.5px !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* ─────────────────────────────────────────────────────────────
   EMPTY STATE — DataTable "No data available"
───────────────────────────────────────────────────────────── */
.dataTables_empty {
  padding: 60px 20px !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: #fafcff !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM INPUTS — Strong visible styling with depth
───────────────────────────────────────────────────────────── */

/* Label: bold, uppercase, distinct */
.form-group label,
.form-horizontal .form-group label,
label.col-form-label,
label.control-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Input fields — strong border, visible background */
.form-control {
  background: #fff !important;
  border: 1.5px solid #dde3ec !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  color: #130f28 !important;
  height: auto !important;
  min-height: 42px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) inset !important;
}

.form-control:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.15), 0 1px 2px rgba(15,23,42,.04) inset !important;
  background: #fff !important;
  outline: none !important;
}

.form-control::placeholder {
  color: #b0bec8 !important;
  font-size: 13px !important;
}

/* Textarea */
textarea.form-control {
  min-height: 100px !important;
  resize: vertical !important;
}

/* Select */
select.form-control {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Form group spacing */
.form-group {
  margin-bottom: 20px !important;
}

/* Horizontal form layout — label column */
.form-horizontal .form-group .col-sm-3,
.form-horizontal .form-group .col-md-3,
.form-horizontal .form-group .col-lg-2 {
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
}

/* Toggle / switch in forms */
.form-group .toggle,
.form-group input[type="checkbox"] {
  margin-top: 2px !important;
}

/* Required asterisk */
.form-group label .required,
.form-group label span.text-danger {
  color: #ef4444 !important;
  margin-left: 2px !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM CARD — Section headers inside forms
───────────────────────────────────────────────────────────── */

/* When a form has sections via h4/h5/h6 dividers */
.box-block .box-body h4,
.box-block .box-body h5,
.box-block .box-body h6.section-title,
.box-block .box-body .form-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 0 0 10px !important;
  margin: 24px 0 16px !important;
  border-bottom: 1px solid #e8edf4 !important;
}

/* Box body padding */
.box-block .box-body {
  padding: 24px !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM PAGE — Submit & Cancel button area
───────────────────────────────────────────────────────────── */
.box-block .box-footer,
.box-block > .box-body > .text-center,
.box-block > .box-body > .form-actions,
.box-block > .box-body .btn[type="submit"],
.box-block > .box-body input[type="submit"] {
  margin-top: 8px !important;
}

/* Submit button */
.btn[type="submit"],
input[type="submit"].btn,
.btn-submit {
  min-width: 120px !important;
  padding: 10px 24px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  letter-spacing: .2px !important;
}

/* Cancel button */
.btn-default,
.btn.btn-secondary.cancel,
a.btn.btn-default {
  background: #faf9ff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 20px !important;
  transition: all .15s ease !important;
}

.btn-default:hover,
.btn.btn-secondary.cancel:hover {
  background: #f8f7ff !important;
  border-color: #cbd5e1 !important;
  color: #130f28 !important;
}

/* ─────────────────────────────────────────────────────────────
   SETTINGS PAGE — Visual sections via field grouping
───────────────────────────────────────────────────────────── */

/* Settings page typically has .box-block with flat form — add breathing room */
.site-settings .box-block .box-body,
[action*="site/settings"] .box-block .box-body,
.settings-form .box-body {
  padding: 28px 32px !important;
}

/* Dropify upload zones */
.dropify-wrapper {
  border: 2px dashed #dde3ec !important;
  border-radius: 12px !important;
  background: #fafcff !important;
  transition: border-color .15s ease !important;
}

.dropify-wrapper:hover {
  border-color: var(--am-primary) !important;
  background: #f5f3ff !important;
}

.dropify-wrapper .dropify-message span.file-icon::before {
  color: #94a3b8 !important;
}

/* Toggle switch — Bootstrap toggle plugin */
.toggle.btn-success {
  background-color: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   REQUEST DETAIL PAGE — Key-value layout
───────────────────────────────────────────────────────────── */

/* Outer card */
.request-details {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.7) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  padding: 0 !important;
}

/* Row container for the key-value pairs */
.request-details .dl-row,
.request-details dl {
  margin: 0 !important;
}

/* Individual row */
.request-details .dl-row .row,
.request-details dl dt,
.request-details dl dd {
  border-bottom: 1px solid #f8f7ff !important;
  padding: 11px 20px !important;
  margin: 0 !important;
}

/* Key (label) */
.request-details dl dt,
.request-details .dl-row .row .col-sm-4,
.request-details .dl-row .row .col-4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  background: #faf9ff !important;
}

/* Value */
.request-details dl dd,
.request-details .dl-row .row .col-sm-8,
.request-details .dl-row .row .col-8 {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #130f28 !important;
  background: #fff !important;
}

/* Card title for detail sections */
.request-details .card-header,
.request-details .panel-heading {
  background: linear-gradient(to right, #faf9ff, #fff) !important;
  border-bottom: 1px solid #e8edf4 !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  border-left: 4px solid var(--am-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   DRIVER / PROVIDER SHOW PAGE — Multi-section layout
───────────────────────────────────────────────────────────── */

/* Section headings on provider/driver show pages */
.box-block h3.box-title,
.box-block .panel-title,
.content-area .section-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  letter-spacing: -.1px !important;
}

/* Document table on provider show */
.driver-documents-table .table thead th,
.provider-documents .table thead th {
  background: #faf9ff !important;
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD — Wallet + Recent Rides panels
───────────────────────────────────────────────────────────── */

/* Wallet summary card */
.wallet-summary,
.box-block:has(.wallet-list),
.box-block:has(.t-summary) {
  border-top: 3px solid var(--am-primary) !important;
}

/* Wallet row items */
.wallet-row,
.wallet-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f8f7ff !important;
  font-size: 13.5px !important;
}

.wallet-row .label-col {
  color: #64748b !important;
  font-weight: 500 !important;
}

.wallet-row .value-col {
  color: #130f28 !important;
  font-weight: 700 !important;
}

/* Recent rides table on dashboard */
.recent-rides-table .table tbody td {
  font-size: 12.5px !important;
  padding: 10px 14px !important;
}

/* Status pill variants used in tables and dashboards */
.status-started,
.badge-started   { background: #dbeafe !important; color: #1e40af !important; }
.status-completed,
.badge-completed  { background: #dcfce7 !important; color: #166534 !important; }
.status-cancelled,
.badge-cancelled  { background: #fef2f2 !important; color: #991b1b !important; }
.status-scheduled,
.badge-scheduled  { background: #fef9c3 !important; color: #854d0e !important; }

/* ─────────────────────────────────────────────────────────────
   PROFILE PAGE
───────────────────────────────────────────────────────────── */

/* Profile card — clean white with accent top */
.profile-form-card,
.box-block:has(input[name="name"]):has(input[name="email"]) {
  border-top: 3px solid var(--am-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   AM PAGE HEADER (listing page top bar)
   Title left + Add New button right
───────────────────────────────────────────────────────────── */
.am-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  border-radius: 14px 14px 0 0 !important;
  border: 1px solid rgba(226,232,240,.7) !important;
  border-bottom: none !important;
  padding: 16px 22px !important;
  box-shadow: 0 -1px 0 rgba(226,232,240,.6) !important;
}

.am-page-header h5 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #130f28 !important;
  letter-spacing: -.3px !important;
  margin: 0 !important;
}

/* Add New button in header */
.am-page-header .btn-primary,
.am-page-header > a.btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 9px !important;
  letter-spacing: .1px !important;
}

/* Container that follows the page header */
.box-container-fresh-css {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.7) !important;
  border-radius: 0 0 14px 14px !important;
  border-top: none !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.05) !important;
  overflow: hidden !important;
}

/* The action toolbar strip inside box-container */
.box-container-fresh-css .action-toolbar,
.box-container-fresh-css .bulk-actions {
  padding: 12px 20px !important;
  background: #fafcff !important;
  border-bottom: 1px solid #f8f7ff !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* DataTable toolbar strip (contains Copy/Excel/CSV/PDF + search) */
.box-container-fresh-css .dataTables_wrapper,
.box-container-fresh-css > .dataTables_wrapper {
  padding: 16px 20px 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   RADIO / CHECKBOX — Custom styling
───────────────────────────────────────────────────────────── */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--am-primary) !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────
   BACK BUTTON (top-right of form cards)
───────────────────────────────────────────────────────────── */
.content-area .box.box-block > a.btn.pull-right,
.content-area .box.box-block > a.btn[href*="back"],
.content-area .box.box-block > a.btn[onclick*="back"],
.content-area .box.box-block .back-btn {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 10 !important;
  float: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
}

.content-area .box.box-block > a.btn.pull-right:hover {
  background: #faf9ff !important;
  color: #130f28 !important;
  border-color: #cbd5e1 !important;
}

/* ─────────────────────────────────────────────────────────────
   SELECT2 — Premium dropdowns
───────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid #dde3ec !important;
  border-radius: 9px !important;
  height: 42px !important;
  padding: 4px 14px !important;
  background: #fff !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
  color: #130f28 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.15) !important;
}

.select2-dropdown {
  border: 1.5px solid #dde3ec !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.12) !important;
  overflow: hidden !important;
}

.select2-container--default .select2-results__option {
  padding: 9px 14px !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────────────────────
   MODAL DIALOGS — Premium treatment
───────────────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.20) !important;
  overflow: hidden !important;
}

.modal-header {
  background: linear-gradient(to right, #faf9ff, #fff) !important;
  border-bottom: 1px solid #e8edf4 !important;
  padding: 18px 24px !important;
  border-left: 4px solid var(--am-primary) !important;
}

.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  letter-spacing: -.1px !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  padding: 14px 24px !important;
  background: #faf9ff !important;
  border-top: 1px solid #e8edf4 !important;
}

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB — Premium pill style
───────────────────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 0 16px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #94a3b8 !important;
}

.breadcrumb-item a {
  color: var(--am-primary) !important;
  font-weight: 500 !important;
}

.breadcrumb-item.active {
  color: #64748b !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — Minimal, well-spaced
───────────────────────────────────────────────────────────── */
.site-footer {
  padding: 14px 28px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  background: #fff !important;
  border-top: 1px solid #f8f7ff !important;
  margin-top: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   GENERAL UTILITY OVERRIDES
───────────────────────────────────────────────────────────── */

/* Row gap inside content area */
.content-area .row + .row,
.content-area .row {
  margin-bottom: 0 !important;
}

/* Cards / boxes row gap */
.content-area > .container-fluid > .row {
  margin-bottom: 20px !important;
}

/* Remove Bootstrap default box-shadow on focused inputs (overriding our custom one) */
.form-control:focus {
  outline: 0 !important;
}

/* Utility: card divider */
.card-divider {
  height: 1px !important;
  background: #f8f7ff !important;
  margin: 20px 0 !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR + GHOST BUTTON STYLES
   Bulk action buttons (Delete All, Send Email etc) styled as
   compact outlined ghost buttons to reduce visual weight.
   ═══════════════════════════════════════════════════════════════ */

/* Toolbar container — wrap instead of scroll so page scroll always works */
.box-container-fresh-css.tab-container-new-fresh-css {
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: #faf9ff !important;
  border-bottom: 1px solid #eef1f5 !important;
  border-top: none !important;
  align-items: center !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Left forms — keep in a row */
.form-container-fresh-css.left-forms {
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  gap: 5px !important;
}

/* GHOST-STYLE bulk action buttons — much lighter visual weight */
.new-edited-css-btn,
.form-container-fresh-css.left-forms .btn {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  border-radius: 7px !important;
  line-height: 1.5 !important;
  height: auto !important;
  white-space: nowrap !important;
  letter-spacing: .1px !important;
  margin: 0 !important;
  transition: all .15s ease !important;
  position: relative !important;
  z-index: 101 !important;
  pointer-events: auto !important;
}

/* Override danger buttons to outlined ghost */
.form-container-fresh-css.left-forms .btn.btn-danger {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}
.form-container-fresh-css.left-forms .btn.btn-danger:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

/* Override info buttons to outlined ghost */
.form-container-fresh-css.left-forms .btn.btn-info {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #93c5fd !important;
  color: #2563eb !important;
  box-shadow: none !important;
}
.form-container-fresh-css.left-forms .btn.btn-info:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

/* Override warning buttons to outlined ghost */
.form-container-fresh-css.left-forms .btn.btn-warning {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #fcd34d !important;
  color: #d97706 !important;
  box-shadow: none !important;
}
.form-container-fresh-css.left-forms .btn.btn-warning:hover {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

/* Override success buttons to outlined ghost */
.form-container-fresh-css.left-forms .btn.btn-success {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #059669 !important;
  box-shadow: none !important;
}
.form-container-fresh-css.left-forms .btn.btn-success:hover {
  background: #f0fdf4 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}

/* Providers page also uses .btn-danger in toolbar outside .left-forms */
.tab-container-new-fresh-css > .btn.btn-danger,
.tab-container-new-fresh-css > form > .btn.btn-danger,
.col-md-12.box-container-fresh-css > .btn.btn-danger {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #fca5a5 !important;
  color: #dc2626 !important;
  font-size: 11.5px !important;
  padding: 5px 11px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

/* Right forms — keep tight */
.form-container-fresh-css.right-forms {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   LISTING PAGE TITLE ROW — title + Add New button on same line
───────────────────────────────────────────────────────────── */
.am-page-header {
  padding: 14px 20px !important;
}

.am-page-header h5,
.am-page-header h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Add New button — primary filled */
.am-page-header a.btn-primary,
.am-page-header .btn-primary {
  font-size: 12.5px !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLE HEADER ROW (repeated at bottom of DataTables) — hide it
   DataTables duplicates the thead as a tfoot — style it lighter
───────────────────────────────────────────────────────────── */
.table tfoot th {
  background: #faf9ff !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-top: 1px solid #e8edf4 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   STATUS BADGES in tables — use the badge pill system
───────────────────────────────────────────────────────────── */
.badge, .label {
  font-size: 10.5px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  display: inline-block !important;
}

.badge-success, .label-success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.badge-danger, .label-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
}

.badge-warning, .label-warning {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

.badge-info, .label-info {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.badge-primary, .label-primary {
  background: #ede9fe !important;
  color: #075985 !important;
}

.badge-secondary, .label-default {
  background: #f8f7ff !important;
  color: #475569 !important;
}

/* ─────────────────────────────────────────────────────────────
   YES / NO pills (used in provider/driver unused column)
───────────────────────────────────────────────────────────── */
.label.label-success { background: #dcfce7 !important; color: #15803d !important; }
.label.label-danger  { background: #fef2f2 !important; color: #b91c1c !important; }

/* ─────────────────────────────────────────────────────────────
   FORM HORIZONTAL — align label + field side by side cleanly
───────────────────────────────────────────────────────────── */
.form-horizontal .form-group {
  margin-bottom: 18px !important;
  align-items: flex-start !important;
}

.form-horizontal .form-group .col-sm-3 label,
.form-horizontal .form-group .col-sm-4 label,
.form-horizontal .form-group .col-md-3 label {
  padding-top: 11px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────
   SETTINGS PAGE — visual fieldset separation via HR dividers
   Core.css doesn't section the settings form so we add spacing
───────────────────────────────────────────────────────────── */

/* Every group of settings gets breathing room */
.content-area form .form-group:nth-child(5n+1) {
  margin-top: 28px !important;
}

/* Settings update button */
button[type="submit"].btn-primary,
input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 28px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .2px !important;
  box-shadow: 0 4px 14px rgba(124,77,255,.30) !important;
  transition: all .2s ease !important;
}

button[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background: linear-gradient(135deg, #6B3FE0 0%, #0369a1 100%) !important;
  box-shadow: 0 6px 20px rgba(124,77,255,.40) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PAGE POLISH
   Disabled inputs, provider show tables, card title cleanup.
   ═══════════════════════════════════════════════════════════════ */

/* Disabled / readonly inputs — subtle distinction, not jarring gray */
.form-control[disabled],
.form-control[readonly],
.form-control.disabled {
  background: #f8f7ff !important;
  color: #64748b !important;
  border-color: #e8edf4 !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Provider / Driver show page — compact table action buttons */
.box-block .table .btn,
.box-block .table td .btn,
.box-block .table td a.btn {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  margin: 1px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

/* Provider show section cards — add left accent to all .box children */
.content-area .box.box-block .box-block {
  border-left: 3px solid var(--am-primary) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}

/* Card title in box blocks (h3 variants) */
.box-block .box-title,
.box-block .panel-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #f8f7ff !important;
  background: linear-gradient(to right, #faf9ff, #fff) !important;
}

/* Service types icon badge — small colored dot */
.box-block .table td img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 1px solid #e8edf4 !important;
}

/* Fleet page action column — Show Fleet button */
.table td .btn.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(16,185,129,.30) !important;
}

/* Edit / View icon buttons in tables */
.table td .am-icon-btn,
.table td .btn-icon {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

/* Pagination numbers — clean look */
.dataTables_paginate .paginate_button {
  border-radius: 7px !important;
  font-size: 12px !important;
  min-width: 30px !important;
  padding: 5px 8px !important;
  text-align: center !important;
  transition: all .12s ease !important;
}

.dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: var(--am-primary) !important;
}

/* Search box on listing pages with custom .right-forms */
.form-container-fresh-css.right-forms input[type="search"],
.form-container-fresh-css.right-forms input[type="text"] {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
}

/* Info bar under DataTable */
.dataTables_wrapper .dataTables_info {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  padding-top: 10px !important;
}

/* Table container bottom spacing */
.table-responsive {
  margin-bottom: 0 !important;
}

/* Company list "No data available" empty state */
.dataTables_empty {
  color: #94a3b8 !important;
  font-size: 13px !important;
  padding: 48px 20px !important;
  font-style: italic !important;
}

/* Dashboard status chips (STARTED, CANCELLED, COMPLETED) */
.recent-status,
td .label.label-success,
td .label.label-danger,
td .label.label-warning,
td .label.label-info,
td .label.label-default {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}

/* Dashboard Recent Rides table — tighter rows */
.dashboard-recent-rides td,
.recent-rides td {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}

/* Wallet summary table rows */
.wallet-table td {
  padding: 9px 16px !important;
  font-size: 13px !important;
  border-color: #f8f7ff !important;
}

/* Wallet summary label column */
.wallet-table td:first-child {
  color: #64748b !important;
  font-weight: 500 !important;
  width: 55% !important;
}

/* Wallet summary value column */
.wallet-table td:last-child {
  color: #130f28 !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────
   SIDEBAR SECTION TITLES — more visible, proper spacing
───────────────────────────────────────────────────────────── */
.sidebar-menu .menu-title {
  color: #475569 !important;
  font-size: 9px !important;
  letter-spacing: 1.8px !important;
  padding: 20px 20px 5px !important;
}

/* Active sidebar item glow */
.sidebar-menu > li.active > a {
  background: rgba(124,77,255,.15) !important;
  border-left: 3px solid #7C4DFF !important;
  color: #f5f3ff !important;
}

/* Sidebar badge (notification count) */
.sidebar-menu .badge {
  background: var(--am-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  margin-left: auto !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  text-align: center !important;
}

/* ─────────────────────────────────────────────────────────────
   HEADER — User name, notification bell cleanup
───────────────────────────────────────────────────────────── */
.site-header .navbar-right .dropdown-toggle {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2d2454 !important;
}

/* Header notification badge */
.site-header .badge {
  background: #ef4444 !important;
  font-size: 9.5px !important;
  padding: 2px 5px !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE CONSISTENCY STYLES
   Full audit of every screenshot — targeted fixes per page.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Typography & color system tightening
───────────────────────────────────────────────────────────── */
:root {
  --am-primary:       #7C4DFF;
  --am-primary-dark:  #6B3FE0;
  --am-success:       #10b981;
  --am-danger:        #ef4444;
  --am-warning:       #f59e0b;
  --am-info:          #3b82f6;
  --am-body-bg:       #f0f4f8;
  --am-card-bg:       #ffffff;
  --am-card-radius:   12px;
  --am-border:        #e2e8f0;
  --am-text:          #130f28;
  --am-text-muted:    #64748b;
  --am-sidebar-bg:    #130f28;
  --am-header-h:      64px;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 1 — DASHBOARD
   Issues: sidebar section labels faint, wallet table, tiles
───────────────────────────────────────────────────────────── */

/* Sidebar section labels — make clearly readable */
.sidebar-menu .menu-title {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  padding: 18px 20px 4px !important;
  text-transform: uppercase !important;
}

/* Dashboard KPI tiles — consistent card appearance */
.tile.tile-1 {
  background: #fff !important;
  border-radius: var(--am-card-radius) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.04) !important;
  overflow: hidden !important;
}

/* KPI number — always dark, large, bold */
.tile .t-content h1 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #130f28 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
}

/* KPI label — always muted uppercase */
.tile .t-content h6 {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 8px !important;
}

/* KPI sub-text */
.tile .t-content .text-muted,
.tile .t-content > span {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

/* Dashboard panels (Wallet Summary + Recent Rides) */
.content-area .box.box-block h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
}

/* Dashboard wallet table */
.content-area .box-block table:not(.dataTable) td {
  padding: 9px 16px !important;
  font-size: 13px !important;
  border-color: #f8f7ff !important;
  vertical-align: middle !important;
}

/* Wallet label cell */
.content-area .box-block table:not(.dataTable) td:first-child {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Right-aligned cell — opt-in via class.
   Historically this was attached to td:last-child, but that bit
   every "last column" in the project (Remarks, single-button
   Action cells, etc.) and stranded their content against the
   right card edge. Pages that genuinely want a bold + right-aligned
   numeric value (wallet balance) or a clustered icon-button action
   group now opt in by adding class="action-col" on the th + td. */
.content-area .box-block table:not(.dataTable) td.action-col {
  color: #130f28 !important;
  font-weight: 700 !important;
  text-align: right !important;
}
.content-area .box-block table:not(.dataTable) th.action-col {
  text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 2 — USERS LIST
   Issues: tfoot header row redundant, column header overflow
───────────────────────────────────────────────────────────── */

/* DataTable tfoot — visually subtle, not duplicate header */
.table tfoot tr {
  background: #faf9ff !important;
}
.table tfoot th {
  font-size: 9.5px !important;
  color: #b0bec8 !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  padding: 8px 16px !important;
  text-transform: uppercase !important;
  border-top: 2px solid #e8edf4 !important;
  border-bottom: none !important;
}

/* Column header text — prevent overflow */
.table thead th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
}

/* DataTable export buttons — pill style */
.dt-buttons {
  display: inline-flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.dt-buttons .btn,
.dt-buttons .dt-button {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
  background: #faf9ff !important;
  color: #130f28 !important;
  border-color: #cbd5e1 !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 3 — USER CREATE / ALL FORM PAGES
   Issues: form card height, label consistency, section dividers
───────────────────────────────────────────────────────────── */

/* Form card boxes are always full-width — form fields constrain themselves via Bootstrap columns */

/* Form card body — generous internal padding */
.box.box-block .box-body {
  padding: 28px 28px 24px !important;
}

/* Form label — consistent across ALL form types */
.form-group > label,
.form-group label,
.form-horizontal .form-group label,
.col-xs-2.col-form-label,
.col-sm-3.col-form-label,
.col-md-3.col-form-label,
.col-xs-3.col-form-label,
label.col-form-label,
label.control-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

/* Horizontal form label column (col-md-3) */
.form-horizontal .col-md-3.col-form-label,
.col-md-3.col-form-label {
  text-align: right !important;
  padding-right: 16px !important;
  padding-top: 11px !important;
}

/* Input height consistency */
.form-control {
  min-height: 40px !important;
  height: auto !important;
  font-size: 13.5px !important;
  padding: 9px 13px !important;
  border: 1.5px solid #dde3ec !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #130f28 !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.form-control:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.14) !important;
  background: #fff !important;
  outline: none !important;
}

/* Section dividers inside long forms (fleet create / settings) */
.form-group + .form-group {
  margin-top: 0 !important;
}

/* Submit button row at form bottom */
.box-block .box-body > .row:last-child,
.box-block .box-body > .form-group:last-child {
  margin-top: 8px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f8f7ff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 4 — FLEET LIST
   Issues: "Show Fleet" action button oversized
───────────────────────────────────────────────────────────── */

/* All action buttons inside table cells */
.table td .btn,
.table td a.btn,
.table td button.btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  margin: 1px 2px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* "Show Fleet" specifically */
.table td .btn.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(16,185,129,.25) !important;
}

/* Edit icon button */
.table td .btn.btn-warning,
.table td a.btn.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* Delete icon button */
.table td .btn.btn-danger,
.table td a.btn.btn-danger,
.table td button.btn.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(239,68,68,.25) !important;
}

/* Primary action button in table */
.table td .btn.btn-primary,
.table td a.btn.btn-primary {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 5 — FLEET CREATE (long form)
   Issues: address section needs visual separation
───────────────────────────────────────────────────────────── */

/* Radio button label styling */
.form-group .radio label,
.form-group .radio-inline label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2d2454 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  padding-left: 6px !important;
}

/* Radio/checkbox inputs */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--am-primary) !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 6 — PROVIDERS / DRIVERS LIST
   Issues: CIA VERIFICATION text truncating, badge consistency
───────────────────────────────────────────────────────────── */

/* Constrain very wide text cells — allow ellipsis */
.table td {
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Allow action column and specific cells to expand */
.table td:last-child,
.table td.actions,
.table td .btn-group {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* CIA verification badge variants */
.btn.btn-info.btn-xs,
.label.label-info,
span.label-info {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: none !important;
  font-size: 10.5px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 7 — REQUEST HISTORY
   Issues: STATUS plain text → colored badge, REASON wraps rows
───────────────────────────────────────────────────────────── */

/* Allow REASON cell to wrap (it has multi-line text) */
.table td.reason-col,
.table td:nth-child(8) {
  max-width: 180px !important;
  white-space: normal !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

/* Status badge — injected via blade span.req-status */
.req-status {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.req-status--started {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.req-status--completed {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.req-status--cancelled {
  background: #fef2f2 !important;
  color: #991b1b !important;
}

.req-status--scheduled {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

.req-status--dropped,
.req-status--searching {
  background: #f8f7ff !important;
  color: #475569 !important;
}

/* Document status badges (provider docs page) */
.doc-status {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.doc-status--approved  { background: #dcfce7 !important; color: #166534 !important; }
.doc-status--verified  { background: #dcfce7 !important; color: #166534 !important; }
.doc-status--rejected  { background: #fef2f2 !important; color: #991b1b !important; }
.doc-status--pending   { background: #fef9c3 !important; color: #854d0e !important; }
.doc-status--review,
.doc-status--in\ review { background: #dbeafe !important; color: #1e40af !important; }
.doc-status--uploaded  { background: #f0fdf4 !important; color: #15803d !important; }

/* ─────────────────────────────────────────────────────────────
   PAGE 8 — SITE SETTINGS
   Issues: col-xs-2 label targeting, visual section grouping
───────────────────────────────────────────────────────────── */

/* Settings / Profile — horizontal form body */
.box.box-block .form-horizontal {
  padding: 8px 24px 4px !important;
}

/* ── DEFINITIVE horizontal form layout fix ──
   Force flex row with label LEFT, field RIGHT.
   Removes float interference, sets explicit order. */
.form-horizontal .form-group.row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}

/* Remove floats from all direct children */
.form-horizontal .form-group.row > * {
  float: none !important;
}

/* Label column — fixed 200px, left position */
.form-horizontal .form-group.row > .col-md-3 {
  flex: 0 0 200px !important;
  max-width: 200px !important;
  width: 200px !important;
  text-align: right !important;
  padding-top: 10px !important;
  padding-right: 14px !important;
  padding-left: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

/* Field column — takes all remaining space */
.form-horizontal .form-group.row > .col-md-9,
.form-horizontal .form-group.row > .col-md-10,
.form-horizontal .form-group.row > .col-md-1 {
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Settings file upload zones */
.form-group .dropify-wrapper {
  border: 2px dashed #dde3ec !important;
  border-radius: 10px !important;
  background: #fafcff !important;
  max-width: 420px !important;
}
.form-group .dropify-wrapper:hover {
  border-color: var(--am-primary) !important;
}

/* Settings submit button row */
.form-horizontal .form-group.row:last-of-type {
  padding-top: 16px !important;
  border-top: 1px solid #f8f7ff !important;
  margin-top: 12px !important;
}

/* Settings section title dividers */
.settings-section-title {
  display: flex !important;
  align-items: center !important;
  margin: 28px 0 18px !important;
  gap: 12px !important;
}

.settings-section-title::before {
  content: '' !important;
  display: block !important;
  width: 4px !important;
  height: 18px !important;
  background: var(--am-primary) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

.settings-section-title span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

.settings-section-title::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #e8edf4 !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 9 — SERVICE TYPES
   Issues: table clean, icons size consistent
───────────────────────────────────────────────────────────── */

/* Service type icon in table */
.table td img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 1px solid #e8edf4 !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 10 — REQUEST DETAIL
   Issues: key-value layout, map container, overall spacing
───────────────────────────────────────────────────────────── */

/* Request detail card outer */
.content-area .box.box-block .request-details,
.content-area .request-details {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8edf4 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
}

/* Key-value row */
.request-details .form-group.row,
.request-details dl dt,
.request-details dl dd {
  padding: 10px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f8f7ff !important;
}

/* Key cell (label) */
.request-details .col-sm-4,
.request-details dl dt {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  background: #faf9ff !important;
}

/* Value cell */
.request-details .col-sm-8,
.request-details dl dd {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #130f28 !important;
  background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 12/13 — COMPANY LIST & CREATE
   Issues: empty state, simple form
───────────────────────────────────────────────────────────── */

/* "No data available in table" */
.dataTables_empty,
td.dataTables_empty {
  text-align: center !important;
  padding: 60px 20px !important;
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  font-style: italic !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 15 — PROFILE
   Issues: looks good — minor polish only
───────────────────────────────────────────────────────────── */

/* Disabled/readonly inputs — clear but not harsh */
.form-control[disabled],
.form-control[readonly] {
  background: #f8f7ff !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE 16 — PROVIDER / DRIVER SHOW
   Issues: .btn-large oversized, section cards
───────────────────────────────────────────────────────────── */

/* Override .btn-large (custom class in provider docs) */
.btn.btn-large,
.btn-large {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Provider show section cards */
.content-area .box.box-block.mb-2 {
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(226,232,240,.8) !important;
}

/* Provider show section title rows */
.content-area .box.box-block h3,
.content-area .box.box-block .box-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #130f28 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #f8f7ff !important;
  background: linear-gradient(to right, #faf9ff, #fff) !important;
  border-left: 4px solid var(--am-primary) !important;
  margin: 0 !important;
  letter-spacing: -.1px !important;
}

/* Input group btn (View/Delete in doc table) */
.input-group-btn {
  display: inline-flex !important;
  gap: 4px !important;
}

.input-group-btn .btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — fix &copy; entity rendering
───────────────────────────────────────────────────────────── */
.site-footer,
footer.footer {
  background: #fff !important;
  border-top: 1px solid #f8f7ff !important;
  padding: 14px 28px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

footer.footer p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Dropdown menus (action ⋮ menus in request table)
───────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid #e8edf4 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
  padding: 6px !important;
  min-width: 140px !important;
  background: #fff !important;
}

.dropdown-item {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #2d2454 !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  transition: background .1s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.dropdown-item:hover {
  background: #f5f3ff !important;
  color: var(--am-primary) !important;
}

.dropdown-item i.fa-trash {
  color: #ef4444 !important;
}

.dropdown-item:has(i.fa-trash):hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Alert/notification inline styling cleanup
───────────────────────────────────────────────────────────── */

/* Suppress any remaining inline style overrides on alerts */
.alert[style],
.alert-success[style],
.alert-danger[style] {
  background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Page header with consistent title + action button
───────────────────────────────────────────────────────────── */

/* Top row of a listing page: <h3/h4> title + btn on right */
.content-area .container-fluid > .row:first-child h3,
.content-area .container-fluid > .row:first-child h4,
.content-area > .container-fluid > h3,
.content-area > .container-fluid > h4 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #130f28 !important;
  letter-spacing: -.4px !important;
  margin: 0 0 18px !important;
  line-height: 1.2 !important;
}

/* Consistent "Add New X" primary action button */
.content-area .btn.btn-primary:not(.am-scroll-btn):not([type="submit"]) {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(124,77,255,.28) !important;
  letter-spacing: .1px !important;
  color: #fff !important;
}

.content-area .btn.btn-primary:not(.am-scroll-btn):not([type="submit"]):hover {
  background: linear-gradient(135deg, #6B3FE0 0%, #0369a1 100%) !important;
  box-shadow: 0 4px 14px rgba(124,77,255,.38) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — am-icon-btn (ellipsis action button in request table)
───────────────────────────────────────────────────────────── */
.am-icon-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: #faf9ff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  transition: all .15s ease !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.am-icon-btn:hover {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: var(--am-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Toggle switch (Manual Assigning etc)
───────────────────────────────────────────────────────────── */
.toggle.btn {
  min-width: 70px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  height: 26px !important;
}

.toggle.btn-success {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
}

.toggle-handle {
  padding: 0 5px !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — Pagination (consistent across all pages)
───────────────────────────────────────────────────────────── */
.pagination {
  margin: 12px 0 4px !important;
}

.pagination > li > a,
.pagination > li > span {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  margin: 0 2px !important;
  transition: all .12s ease !important;
  font-weight: 500 !important;
}

.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--am-primary) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(124,77,255,.3) !important;
}

.pagination > li > a:hover {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: var(--am-primary) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-color: var(--am-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(124,77,255,.3) !important;
  border-radius: 7px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROVIDER DOCUMENTS & STATEMENT STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── Provider docs: status label pills (label.btn.btn-block used as badges) ── */
td label.btn.btn-block,
td label.btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 80px !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  border: none !important;
  cursor: default !important;
  line-height: 1.6 !important;
  text-align: center !important;
  box-shadow: none !important;
}
td label.btn-success  { background: #dcfce7 !important; color: #166534 !important; }
td label.btn-danger   { background: #fef2f2 !important; color: #991b1b !important; }
td label.btn-warning  { background: #fef9c3 !important; color: #854d0e !important; }
td label.btn-info     { background: #dbeafe !important; color: #1e40af !important; }
td label.btn-dark     { background: #f8f7ff !important; color: #2d2454 !important; }
td label.btn-secondary,
td label.btn-default  { background: #f8f7ff !important; color: #64748b !important; }

/* ── Provider docs: action buttons (View / Delete) — keep small ── */
.input-group-btn .btn-large,
.input-group-btn .btn-lg,
td .input-group-btn a .btn-large,
td .input-group-btn .btn-large {
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
/* View button */
.input-group-btn .btn-success,
td .btn-success.btn-large {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}
.input-group-btn .btn-success:hover {
  background: #bbf7d0 !important;
  color: #14532d !important;
}
/* Delete button */
.input-group-btn .btn-danger,
td .btn-danger.btn-large {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}
.input-group-btn .btn-danger:hover {
  background: #fecaca !important;
  color: #7f1d1d !important;
}

/* ── Provider docs: plain-text STATUS column — style via CSS attr ── */
td[data-status] { /* fallback — plain text in td gets standard treatment */ }

/* ── Statement page: override inline blue text for earnings summary ── */
.box.box-block > div[style*="color"],
.box.box-block > .clearfix + div {
  color: var(--am-text) !important;
  font-size: 15px !important;
  background: #faf9ff !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  padding: 16px 24px !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}
.box.box-block > div[style*="color"] p,
.box.box-block > .clearfix + div p {
  color: var(--am-text) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.7 !important;
}
.box.box-block > div[style*="color"] strong,
.box.box-block > .clearfix + div strong {
  color: var(--am-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ── Statement: date-range filter form ── */
.content-area .box.box-block > .clearfix {
  background: #faf9ff !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.content-area .box.box-block > .clearfix .form-group.row {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.content-area .box.box-block > .clearfix .col-form-label {
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--am-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 60px !important;
}
.content-area .box.box-block > .clearfix .form-control {
  height: 34px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}
.content-area .box.box-block > .clearfix .btn-primary {
  height: 34px !important;
  font-size: 12px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT SETTINGS — Remove Bootstrap card-inverse blue backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* Strip the blue from card-inverse/card-primary/card-info blocks */
.card.card-block,
.card.card-inverse,
.card.card-primary,
.card.card-info,
.card.card-block.card-inverse,
.card.card-block.card-inverse.card-primary,
.card.card-block.card-inverse.card-info,
.box.box-block .card {
  background: #faf9ff !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 10px !important;
  color: var(--am-text) !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

/* Strip inline background override too */
.card[style*="background-color"] {
  background: #faf9ff !important;
}

.card .card-blockquote {
  border-left: none !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  color: var(--am-text) !important;
}

/* Stripe / Cash icons inside payment mode cards */
.card .fa-cc-stripe,
.card .fa-money {
  color: var(--am-primary) !important;
  font-size: 22px !important;
}

/* Fix label colors inside card — inline black color override */
.card .col-form-label span[style*="color:#000000"],
.card .col-form-label span[style*="color: #000000"] {
  color: var(--am-text-muted) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Payment Settings — label col alignment */
.box.box-block .card .form-group.row {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
.box.box-block .card .form-group.row .col-xs-4 {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  padding-right: 14px !important;
}
.box.box-block .card .form-group.row .col-xs-4 .col-form-label,
.box.box-block .card .form-group.row > .col-xs-4 > label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding-top: 9px !important;
  line-height: 1.5 !important;
}
.box.box-block .card .form-group.row .col-xs-6,
.box.box-block .card .form-group.row .col-xs-8 {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Payment modes h5 title */
.box.box-block > form > h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--am-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 0 10px !important;
  margin: 12px 0 10px !important;
  border-bottom: 1px solid var(--am-border) !important;
}

/* Payment page submit / back row */
.box.box-block > form > .form-group.row:last-child {
  display: flex !important;
  gap: 12px !important;
  padding-top: 16px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--am-border) !important;
}
.box.box-block > form > .form-group.row:last-child .col-xs-4 {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}
.box.box-block > form > .form-group.row:last-child .btn-block {
  display: inline-block !important;
  width: auto !important;
  min-width: 140px !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ── Provider docs: section header h5 spacing ── */
.box.box-block > h5.mb-1 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--am-border) !important;
}

/* ── Provider docs: service-type allocation inline form ── */
.box.box-block .row > [class*="col-xs-"] .form-control.input,
.box.box-block .row > [class*="col-xs-"] > .form-control {
  height: 36px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}
.box.box-block .row > [class*="col-xs-"] > .btn-block.btn-primary {
  height: 36px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  padding: 0 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME REFINEMENTS

   ═══════════════════════════════════════════════════════════════ */

/* ── Nunito font for all UI elements ── */
body, div, p, span, a, label, input, textarea, select, button,
table, thead, tbody, tr, th, td, ul, ol, li,
h1, h2, h3, h4, h5, h6, small, strong, em, blockquote, pre, code,
.form-control, .btn, .badge, .tag, .nav, .navbar, .dropdown-menu {
  font-family: 'Nunito', 'Segoe UI', -apple-system, sans-serif !important;
}
/* Restore Themify icon font */
[class^="ti-"]::before, [class*=" ti-"]::before {
  font-family: 'themify' !important;
}
/* Restore FontAwesome */
.fa::before, [class^="fa-"]::before, [class*=" fa-"]::before {
  font-family: 'FontAwesome' !important;
}
/* Restore Bootstrap Glyphicons */
[class^="glyphicon-"]::before, [class*=" glyphicon-"]::before {
  font-family: 'Glyphicons Halflings' !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', 'Segoe UI', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  letter-spacing: -.2px !important;
}

/* ── Sidebar: purple gradient ── */
.site-sidebar {
  background: linear-gradient(180deg, #1a1a35 0%, #16122c 100%) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
}

/* Sidebar logo / brand area — subtle purple glow */
.site-sidebar .navbar-brand,
.site-sidebar .sidebar-brand,
.site-sidebar > .navbar {
  border-bottom: 1px solid rgba(124,77,255,.2) !important;
  padding-bottom: 12px !important;
}

/* Sidebar menu title sections */
.sidebar-menu .menu-title {
  color: #5a5a7a !important;
  font-size: 9.5px !important;
  letter-spacing: 1.6px !important;
  padding-top: 22px !important;
}

/* Sidebar icons — purple tint when active */
.sidebar-menu > li.active > a .s-icon,
.sidebar-menu > li > a.active .s-icon {
  color: var(--am-primary) !important;
  opacity: 1 !important;
}

/* ── Header: clean white with purple accent ── */
.site-header {
  border-bottom: 2px solid var(--am-primary-light) !important;
  box-shadow: 0 2px 12px rgba(124,77,255,.06) !important;
}

/* Header notification bell — purple on hover */
.site-header .ti-bell {
  color: var(--am-text-muted) !important;
}
.site-header .nav-link:hover .ti-bell {
  color: var(--am-primary) !important;
}

/* Header avatar — transparent, image handles its own appearance */
.site-header .avatar.box-32 {
  background: transparent !important;
  border: none !important;
}

/* ── Content area spacing ── */
.content-area {
  background: var(--am-body-bg) !important;
}

/* ── Cards: elevated white ── */
.box.box-block,
.content-area .box.box-block {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(124,77,255,.08) !important;
  box-shadow: 0 4px 24px rgba(124,77,255,.07), 0 1px 4px rgba(0,0,0,.04) !important;
  margin-bottom: 20px !important;
}

/* ── Page title cards: left-accent ── */
.content-area .box.box-block > h5:first-child,
.content-area .box.box-block > .box-block > h5:first-child {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--am-text) !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(124,77,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.content-area .box.box-block > h5:first-child::before {
  content: '' !important;
  width: 4px !important;
  height: 20px !important;
  background: linear-gradient(180deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

/* ── DataTable headers ── */
.dataTable thead th {
  background: #faf9ff !important;
  color: var(--am-text) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  border-bottom: 2px solid rgba(124,77,255,.12) !important;
  padding: 12px 16px !important;
}
.dataTable tbody tr:hover {
  background: rgba(124,77,255,.03) !important;
}
.dataTable tbody td {
  border-top: 1px solid rgba(124,77,255,.06) !important;
  color: var(--am-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ── Buttons ── */
.btn {
  border-radius: 8px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}
.btn-primary {
  background: linear-gradient(135deg, #7C4DFF 0%, #6B3FE0 100%) !important;
  border-color: #7C4DFF !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.3) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C4DFF 100%) !important;
  box-shadow: 0 6px 20px rgba(124,77,255,.45) !important;
  transform: translateY(-1px) !important;
}

/* ── Stat tiles ── */
.tile.tile-1 {
  border-radius: 12px !important;
  border: 1px solid rgba(124,77,255,.08) !important;
  box-shadow: 0 4px 24px rgba(124,77,255,.07) !important;
  position: relative !important;
  overflow: hidden !important;
}
.tile.tile-1::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #7C4DFF, #6B3FE0) !important;
}
.tile .t-content h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--am-text) !important;
  letter-spacing: -.5px !important;
}
.tile .t-content h6 {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: var(--am-text-muted) !important;
}

/* ── Settings section dividers ── */
.settings-section-title {
  margin: 32px 0 20px !important;
}
.settings-section-title::before {
  background: linear-gradient(180deg, #7C4DFF, #6B3FE0) !important;
}
.settings-section-title span {
  color: var(--am-primary) !important;
  font-weight: 800 !important;
}

/* ── Form focus: purple ring ── */
.form-horizontal .form-control:focus {
  border-color: #7C4DFF !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.15) !important;
}

/* ── Pagination ── */
.pagination > li.active > a,
.pagination > li.active > span {
  background: linear-gradient(135deg, #7C4DFF, #6B3FE0) !important;
  border-color: #7C4DFF !important;
  box-shadow: 0 4px 12px rgba(124,77,255,.35) !important;
}

/* ── Status badges ── */
.req-status--started   { background: #ede9fe !important; color: #7C4DFF !important; }
.req-status--completed { background: #d1fae5 !important; color: #059669 !important; }
.req-status--cancelled { background: #ffe4e8 !important; color: #e11d48 !important; }
.req-status--scheduled { background: #fef3c7 !important; color: #d97706 !important; }

/* ── Dropdown menus ── */
.dropdown-menu {
  box-shadow: 0 8px 32px rgba(124,77,255,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(124,77,255,.1) !important;
  border-radius: 10px !important;
}

/* ── DataTables info text and length select ── */
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: var(--am-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Nunito', sans-serif !important;
}

/* ── Scrollbar: subtle purple tint ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f8f7ff; }
::-webkit-scrollbar-thumb {
  background: rgba(124,77,255,.25);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124,77,255,.45); }

/* ── Badge counts in sidebar ──
   inline-flex + line-height:1 forces the digit to vertically center
   inside the pill instead of inheriting the menu-link's line-height. */
.sidebar-menu .badge,
.sidebar-menu .menu-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 18px !important;
  padding: 0 7px !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #7C4DFF, #6B3FE0) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════════════════
   TARGETED FIXES — dropdown, tiles, datatables, layout
   ═══════════════════════════════════════════════════════════════ */

/* 1. Header z-index: must be above all content including transformed/transitioned tiles */
.site-header,
.fixed-header .site-header {
  z-index: 9999 !important;
}

/* Dropdown: prevent overflow beyond right edge + ensure it paints above all */
.dropdown-menu {
  max-width: calc(100vw - 32px) !important;
  z-index: 10000 !important;
}
.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}
.site-header .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

/* 2. Card tile icons: remove legacy padding-right from absolute-positioned era */
.tile-1 .t-content {
  padding-right: 0 !important;
}
.box.tile.tile-1 {
  align-items: center !important;
}
.box.tile.tile-1 .t-icon.right {
  align-self: center !important;
}

/* 3. DataTables Responsive: fix "+" expand icon overlapping row number.
   The vendor CSS sets padding-left:30px on td:first-child (no special class),
   but our global .table tbody td { padding: 12px 16px !important } overrides it. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
  padding-left: 30px !important;
  position: relative !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
  top: 50% !important;
  margin-top: -9px !important;
  left: 4px !important;
}

/* 4. Form pages: heading inside box-block needs padding when no .am-page-header */
.content-area .box.box-block > h3,
.content-area .box.box-block > h4,
.content-area .box.box-block > h5 {
  padding: 18px 24px 16px !important;
  border-bottom: 1px solid var(--am-border) !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
}

/* 5. Statement page inner sections: padding so content doesn't hug edges */
.content-area .box.box-block > .clearfix {
  padding: 20px 24px !important;
}
.content-area .box.box-block > .row {
  padding: 16px !important;
}
.content-area .box.box-block > .row.row-md {
  padding: 0 !important;
  margin: 0 !important;
}

/* 6. Statement inner table card */
.content-area .box.box-block .row.row-md.mb-2 {
  padding: 0 16px 16px !important;
  margin: 0 !important;
}

/* 7. Translation iframe: fill available space without 16:9 constraint */
.content-area .embed-responsive {
  height: 800px !important;
  padding-bottom: 0 !important;
  position: static !important;
}
.content-area .embed-responsive .embed-responsive-item {
  position: static !important;
  width: 100% !important;
  height: 800px !important;
}

/* 8. Sidebar badge-danger color fix */
.sidebar-menu .badge.badge-danger {
  background: var(--am-danger) !important;
  color: #fff !important;
}

/* 9. Table headers: clearly distinguishable from body rows
   High-specificity selectors needed to beat .box.bg-white .table th (0-3-1) */
.box.bg-white .table thead th,
.box.bg-white .dataTable thead th,
.content-area .table thead th,
.content-area .dataTable thead th {
  background: rgba(124,77,255,.08) !important;
  color: #3d2d7a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  border-top: none !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}
/* Border separator: applied on thead to avoid tr:last-child th override */
.box.bg-white .table thead,
.content-area .table thead {
  border-bottom: 2px solid rgba(124,77,255,.22) !important;
}
.box.bg-white .table tfoot th,
.box.bg-white .dataTable tfoot th,
.content-area .table tfoot th,
.content-area .dataTable tfoot th {
  background: rgba(124,77,255,.03) !important;
  color: #94a3b8 !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-top: 1px solid rgba(124,77,255,.12) !important;
  border-bottom: none !important;
}

/* ── DataTables: export buttons (Copy/Excel/CSV/PDF) ── */
.dt-buttons,
.dataTables_wrapper .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.dt-buttons .btn,
.dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  color: #64748b !important;
  letter-spacing: .2px !important;
  line-height: 30px !important;
  transition: all .15s !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  cursor: pointer !important;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover {
  background: rgba(124,77,255,.06) !important;
  border-color: rgba(124,77,255,.3) !important;
  color: var(--am-primary) !important;
  box-shadow: 0 1px 4px rgba(124,77,255,.12) !important;
}
/* Per-button accent colors */
.dt-buttons .btn:nth-child(1)::before,
.dt-buttons .dt-button:nth-child(1)::before { content: "\f0c5  "; font-family: 'FontAwesome'; }
.dt-buttons .btn:nth-child(2)::before,
.dt-buttons .dt-button:nth-child(2)::before { content: "\f1c3  "; font-family: 'FontAwesome'; color: #16a34a; }
.dt-buttons .btn:nth-child(3)::before,
.dt-buttons .dt-button:nth-child(3)::before { content: "\f1c9  "; font-family: 'FontAwesome'; color: #0284c7; }
.dt-buttons .btn:nth-child(4)::before,
.dt-buttons .dt-button:nth-child(4)::before { content: "\f1c1  "; font-family: 'FontAwesome'; color: #dc2626; }

/* ── DataTables Responsive: expanded child row panel ── */
tr.child td.child {
  padding: 0 !important;
}
tr.child td.child ul.dtr-details {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  background: rgba(124,77,255,.03) !important;
  border-top: 2px solid rgba(124,77,255,.1) !important;
  list-style: none !important;
  width: 100% !important;
}
tr.child td.child ul.dtr-details li {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 14px !important;
  border-right: 1px solid rgba(124,77,255,.07) !important;
  border-bottom: 1px solid rgba(124,77,255,.07) !important;
}
tr.child td.child ul.dtr-details li:last-child {
  border-right: none !important;
}
tr.child td.child ul.dtr-details li span.dtr-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: #94a3b8 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
tr.child td.child ul.dtr-details li span.dtr-data {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--am-text) !important;
  display: block !important;
}

/* ── Form labels — explicit class only, never auto-applied globally ──
   Using .am-form-label explicitly prevents overriding Switchery toggles,
   checkbox labels, and any other JS-bound label elements. */
.am-form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
  display: block !important;
}
/* ── Bootstrap 5 .form-label polyfill (BS4 doesn't define it) ── */
.form-label,
label.form-label {
  display: block !important;
  margin-top: 17px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: .3px !important;
}
/* When paired with .fw-semibold or inside filter/statement forms */
.form-label.fw-semibold,
.form-label.fw-bold {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
}

/* ── Toolbar row (showing X of Y + search) ── */
.am-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 20px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--am-border) !important;
}
.am-toolbar-info {
  font-size: 13px !important;
  color: #6b7280 !important;
}
.am-toolbar-search {
  border: 1px solid var(--am-border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  width: 220px !important;
  transition: border-color .2s !important;
}
.am-toolbar-search:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 2px rgba(124,77,255,.12) !important;
}

/* But don't re-pad if there's already explicit padding on the form */
.box.bg-white form[style*="padding"] {
  padding: 20px 24px !important;
}

/* ══════════════════════════════════════════════════════════════════
   FINAL AUTHORITATIVE: .am-page-header
   Overrides all earlier conflicting declarations (lines 1299, 3502,
   4253, 4610). One canonical style for every page header.
   ══════════════════════════════════════════════════════════════════ */
.am-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--am-border) !important;
  border-top: none !important;
  border-right: none !important;
  border-left: 4px solid var(--am-primary) !important;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
  background: #fff !important;
  flex-wrap: wrap !important;
  min-height: 58px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}
.am-page-header h1,
.am-page-header h2,
.am-page-header h3,
.am-page-header h4,
.am-page-header h5,
.am-page-header h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--am-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  letter-spacing: -.1px !important;
  border: none !important;
  background: none !important;
}
/* Buttons / actions on the right side of the header */
.am-page-header .btn,
.am-page-header a.btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* Any direct-child div becomes a flex row (back-btn group OR action-btn group) */
.am-page-header > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
/* First-child div = left group (back btn + title on form pages) — grows to fill space */
.am-page-header > div:first-child {
  flex: 1 !important;
}
/* Non-first div = right-side action group (btn-group etc.) — sizes to content only */
.am-page-header > div:not(:first-child) {
  flex: 0 0 auto !important;
  margin-left: auto !important; /* push hard right when h5 has no flex:1 */
}

/* ── Section divider heading inside a card (below am-page-header) ── */
.am-section-header {
  display: flex !important;
  align-items: center !important;
  padding: 10px 24px !important;
  background: rgba(124,77,255,.04) !important;
  border-top: 1px solid var(--am-border) !important;
  border-bottom: 1px solid var(--am-border) !important;
  margin-bottom: 0 !important;
}
.am-section-header span {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  color: var(--am-primary) !important;
}

/* ── Inline table action link ── */
a.am-table-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--am-primary) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(124,77,255,.25) !important;
  background: rgba(124,77,255,.05) !important;
  transition: all .15s !important;
}
a.am-table-link:hover {
  background: rgba(124,77,255,.12) !important;
  border-color: var(--am-primary) !important;
  text-decoration: none !important;
}

/* ── Legacy .tag .tag-* → styled identically to am-status-badge ──
   Applies across all pages using the old tag classes without blade changes */
span.tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
span.tag.tag-success {
  background: rgba(34,197,94,.1) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34,197,94,.2) !important;
}
span.tag.tag-danger {
  background: rgba(239,68,68,.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239,68,68,.2) !important;
}
span.tag.tag-warning {
  background: rgba(245,158,11,.1) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245,158,11,.2) !important;
}
span.tag.tag-info {
  background: rgba(59,130,246,.1) !important;
  color: #2563eb !important;
  border: 1px solid rgba(59,130,246,.2) !important;
}
span.tag.tag-primary {
  background: rgba(124,77,255,.1) !important;
  color: var(--am-primary) !important;
  border: 1px solid rgba(124,77,255,.2) !important;
}
span.tag.tag-muted,
span.tag.tag-default {
  background: rgba(148,163,184,.1) !important;
  color: #64748b !important;
  border: 1px solid rgba(148,163,184,.2) !important;
}

/* ── "No results" empty state ── */
h6.no-result,
.no-result {
  padding: 32px 24px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ── JS-toggled visibility: attribute selector beats display:flex !important ──
   Allows JS (element.style.display = 'none'/'block') to override the
   .form-horizontal .form-group.row { display: flex !important } rule above.
   Uses specificity 0,4,0 which beats the existing 0,3,0 rule. ── */
.form-horizontal .form-group.row[style*="display: none"],
.form-horizontal .form-group.row[style*="display:none"] {
  display: none !important;
}
.form-horizontal .form-group.row[style*="display: block"],
.form-horizontal .form-group.row[style*="display:block"] {
  display: flex !important;
}
/* Also handle div toggles that are not inside form-horizontal */
.form-group.row[style*="display: none"],
.form-group.row[style*="display:none"] {
  display: none !important;
}
.form-group.row[style*="display: block"],
.form-group.row[style*="display:block"] {
  display: block !important;
}

/* ── Translation iframe — ensure full height with no border ── */
.content-area iframe[src*="translations"] {
  width: 100% !important;
  min-height: 800px !important;
  border: none !important;
  border-radius: 8px !important;
  display: block !important;
}

/* ── Wide DataTable: prevent text wrapping on wide tables ── */
.table-responsive > .dataTable td,
.table-responsive > .dataTable th {
  white-space: nowrap !important;
}


/* =============================================================
   RESPONSIVE — Tablet & Mobile
   991px  tablet landscape  (iPad Air landscape, Surface)
   767px  tablet portrait / large phone
   480px  small phone
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   TABLET  ≤ 991px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Slightly tighter content area */
  .content-area.py-1 {
    padding: 16px !important;
  }

  /* Page header: tighter padding */
  .am-page-header {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* Toolbar: tighter padding */
  .box-container-fresh-css.tab-container-new-fresh-css {
    padding: 8px 16px !important;
  }

  /* Export buttons row */
  .dataTables_wrapper .dt-buttons {
    padding: 10px 16px !important;
  }

  /* Form padding */
  .content-area .box.box-block .form-horizontal,
  .content-area .box.box-block form.form-horizontal {
    padding: 20px 16px !important;
  }

  /* Form card padding */
  .box.box-block:has(.form-horizontal) {
    padding: 20px 16px 28px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE  ≤ 767px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Content wrapper ── */
  .content-area.py-1 {
    padding: 10px !important;
  }

  /* ── Page header: stack title above action buttons ── */
  .am-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .am-page-header h5 {
    flex: none !important;
    width: 100% !important;
  }

  .am-page-header .btn-group {
    align-self: flex-start !important;
  }

  /* ── Toolbar: stack left and right sections vertically ── */
  .box-container-fresh-css.tab-container-new-fresh-css {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .form-container-fresh-css.left-forms {
    flex: none !important;
    width: 100% !important;
  }

  .form-container-fresh-css.right-forms {
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Search input: fluid width */
  .form-container-fresh-css.right-forms input[type="search"],
  .form-container-fresh-css.right-forms input[type="text"] {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Search submit button: full width */
  .form-container-fresh-css.right-forms button[type="submit"],
  .form-container-fresh-css.right-forms .btn-primary[type="submit"] {
    width: 100% !important;
  }

  /* ── DataTables controls ── */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: none !important;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
  }

  .dataTables_wrapper .dt-buttons {
    padding: 8px 14px !important;
    gap: 4px !important;
  }

  /* ── Pagination row ── */
  .am-pagination-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .pagination {
    padding: 10px 14px !important;
    gap: 2px !important;
  }

  .pagination li > a,
  .pagination li > span {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  /* ── Form pages: reduce padding ── */
  .content-area .box.box-block .form-horizontal,
  .content-area .box.box-block form.form-horizontal {
    padding: 14px 12px !important;
  }

  .box.box-block:has(.form-horizontal) {
    padding: 14px 12px 20px !important;
  }

  /* col-xs-* are Bootstrap 3's "always applies" columns.
     col-xs-10 = 83% at every screen size including phones.
     Override to full width on mobile. */
  .form-horizontal .col-xs-10,
  .form-horizontal .col-xs-11 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* col-sm-10 / col-md-10 in forms */
  .form-horizontal .col-sm-10,
  .form-horizontal .col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Back button on form pages (absolute-positioned) — make it static */
  .box.box-block:has(.form-horizontal) > a.btn.pull-right,
  .box.box-block:has(.form-horizontal) > a.btn.pull-left {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
  }

  /* Remove the right-padding gap reserved for the absolute back button */
  .box.box-block:has(.form-horizontal) > h5 {
    padding-right: 0 !important;
  }

  /* Form action buttons row: stack vertically */
  .form-horizontal .form-group.row:last-child .col-xs-10 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .form-horizontal .form-group.row:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Checkbox / radio rows: wrap ── */
  .am-checkbox-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ── Info icons: larger tap target on touch ── */
  .am-info-icon {
    padding: 4px !important;
    font-size: 14px !important;
  }

  /* ── Scroll buttons: hide on touch (native scroll handles it) ── */
  .am-scroll-btn,
  .scroll-btn {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SMALL PHONE  ≤ 480px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .content-area.py-1 {
    padding: 8px !important;
  }

  .am-page-header {
    padding: 10px 10px !important;
  }

  .am-page-header h5 {
    font-size: 13px !important;
  }

  /* Larger tap target for action icon buttons */
  .am-icon-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  /* Tighter table cells */
  .table td,
  .table th {
    padding: 8px 6px !important;
    font-size: 12.5px !important;
  }

  .table thead th {
    font-size: 11.5px !important;
    padding: 8px 6px !important;
  }

  /* Form padding */
  .content-area .box.box-block .form-horizontal,
  .content-area .box.box-block form.form-horizontal {
    padding: 10px 8px !important;
  }

  /* Dashboard stat tiles */
  .tile h1 {
    font-size: 2rem !important;
  }

  /* Button group in page header: full width, stack */
  .am-page-header .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .am-page-header .btn-group .btn {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* =============================================================
   POLISH PASS — Minute detail fixes
   ============================================================= */

/* ── DataTables: hide the duplicate tfoot header row ──────────
   DataTables repeats <thead> column names inside <tfoot> for
   column-level searching. This panel doesn't use column search,
   so the footer row is pure visual clutter. Hide it globally.   */
.dataTable tfoot {
  display: none !important;
}

/* ── DataTables: "No data available in table" empty state ─────
   Style the bare text into a centred, muted, breathing message. */
.dataTables_wrapper .dataTables_empty,
table.dataTable tbody tr.odd td.dataTables_empty,
table.dataTable tbody tr.even td.dataTables_empty {
  text-align: center !important;
  color: var(--am-text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 48px 24px !important;
  font-style: italic !important;
  background: #fafbfd !important;
  letter-spacing: .1px !important;
}

/* ── Dashboard stat cards: consistent min-height ──────────────
   Prevents cards with longer labels (e.g. "NO. OF SERVICE TYPES")
   from being taller than neighbours, making the grid uneven.    */
.tile.tile-1 {
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* ── DataTables length/filter controls: unified gap row ───────
   The length selector and search box row gets inconsistent
   margin between pages — normalise it.                          */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 10px 24px !important;
}

.dataTables_wrapper .dataTables_length label {
  font-size: 13px !important;
  color: var(--am-text-muted) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--am-border) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  color: var(--am-text) !important;
  background: var(--am-input-bg) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--am-border) !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: var(--am-text) !important;
  background: var(--am-input-bg) !important;
  outline: none !important;
  transition: border-color .2s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--am-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.10) !important;
}

/* DataTables info + paginate row */
.dataTables_wrapper .dataTables_info {
  padding: 10px 24px !important;
  font-size: 12.5px !important;
  color: var(--am-text-muted) !important;
  font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 8px 24px !important;
}

/* ── Settings page: mask sensitive API key inputs ─────────────
   API keys and secrets in site settings should not display as
   plain readable text by default.                               */
input[name="map_key"],
input[name="fb_app_secret"],
input[name="fb_app_id"],
input[name="stripe_secret"],
input[name="stripe_key"],
input[name="twilio_auth_token"],
input[name="sendgrid_api_key"] {
  -webkit-text-security: disc !important;
  font-family: monospace !important;
  letter-spacing: 2px !important;
}

/* Restore on focus so admin can actually read/edit the value */
input[name="map_key"]:focus,
input[name="fb_app_secret"]:focus,
input[name="fb_app_id"]:focus,
input[name="stripe_secret"]:focus,
input[name="stripe_key"]:focus,
input[name="twilio_auth_token"]:focus,
input[name="sendgrid_api_key"]:focus {
  -webkit-text-security: none !important;
  letter-spacing: normal !important;
}

/* ── REASON / DESCRIPTION columns: prevent row-height explosion
   Long user-entered text in table cells wraps to many lines,
   making rows 3× taller than neighbours. Clamp to 2 lines.     */
.table tbody td.reason-cell,
.table tbody td.description-cell {
  max-width: 280px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
}

/* ── am-page-header: keep d-flex children (Back + title) aligned
   When Back btn + h5 are inside a nested d-flex div, the flex
   container needs gap so the two don't touch.                   */
.am-page-header .d-flex.align-items-center {
  gap: 12px !important;
}

/* ── Form info icon alignment: vertically center with label text */
.col-form-label .am-info-icon,
label .am-info-icon {
  vertical-align: middle !important;
  margin-left: 4px !important;
  font-size: 13px !important;
  color: var(--am-text-muted) !important;
  cursor: help !important;
  opacity: .75 !important;
  transition: opacity .15s ease !important;
}

.col-form-label .am-info-icon:hover,
label .am-info-icon:hover {
  opacity: 1 !important;
  color: var(--am-primary) !important;
}

/* ── Badge colour consistency: "Not Approved" should always be
   danger-red, not warning-orange, across all listing pages.     */
.badge.bg-warning.text-white {
  background: var(--am-warning) !important;
}

/* ── Fleet / Commercial Clients: ACCOUNT TYPE plain text cells
   Give them a subtle muted badge so they match STATUS column    */
.table tbody td .account-type-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: rgba(100,116,139,.10) !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

/* ── Floating scroll-right button: don't overlap last data column
   Push it to the far right edge, not over table content.        */
.am-scroll-btn.am-scroll-right,
.scroll-btn.scroll-right {
  right: 8px !important;
  transform: none !important;
}

/* ── Remove double border at am-page-header bottom on form pages */
.box.box-block .am-page-header + .form-horizontal {
  border-top: none !important;
}

/* ── Stripe / Parsley validation error messages: consistent style */
.parsley-errors-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
}

.parsley-errors-list li {
  font-size: 12px !important;
  color: var(--am-danger) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.parsley-errors-list li::before {
  content: "⚠";
  font-size: 11px !important;
}

/* ── Table: header sort arrows — tighten spacing ── */
.table thead th {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* ── Fix: content-area box border-radius on pages with am-page-header
   The top-left border radius was being clipped by overflow:hidden
   on the parent .box.box-block, leaving a sharp corner.         */
.content-area .box.box-block .am-page-header:first-child {
  border-radius: calc(var(--am-card-radius) - 1px) calc(var(--am-card-radius) - 1px) 0 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   GLOBAL PAGE CARD  (.page-card)
   White card matching the admin design system. Used on listing and
   form pages. Replaces legacy .box.box-block.bg-white pattern.
   ══════════════════════════════════════════════════════════════════ */
.page-card {
  background: #fff;
  border-radius: var(--am-card-radius);
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-bottom: 24px;
}

/* Make am-page-header flush with card edges (counters the 24px padding) */
.page-card > .am-page-header {
  margin: -24px -24px 24px -24px;
  border-radius: var(--am-card-radius) var(--am-card-radius) 0 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL FORM HELPERS
   Shared label, section-title and field patterns used across
   all commercialclient form pages.
   ══════════════════════════════════════════════════════════════════ */
.field-label {
  font-size: 11px;
  font-weight: 700;
  color: #adb5bd;
  text-transform: uppercase;
  letter-spacing: .6px;
  display: block;
  margin-bottom: 6px;
}
.field-label .required,
.field-label span[style*="dc3545"] { color: #dc3545; }

/* ══════════════════════════════════════════════════════════════════
   TABLE CONSISTENCY
   Ensure .table thead th always gets the right treatment inside
   .page-card even when packages.css is not loaded.
   ══════════════════════════════════════════════════════════════════ */
.page-card .table thead th {
  background: #eef2f7;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 2px solid #d1d5db;
  white-space: nowrap;
}
.page-card .table tbody td {
  font-size: 13px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════
   STATUS BADGE HELPERS (Bootstrap 4 badge-* colours)
   Ensure consistent badge rendering regardless of Bootstrap version
   ══════════════════════════════════════════════════════════════════ */
.badge-success  { background-color: #28a745; color: #fff; }
.badge-danger   { background-color: #dc3545; color: #fff; }
.badge-warning  { background-color: #ffc107; color: #212529; }
.badge-info     { background-color: #17a2b8; color: #fff; }
.badge-secondary{ background-color: #6c757d; color: #fff; }
.badge-primary  { background-color: #7c4dff; color: #fff; }

/* DataTables export buttons — keep them from breaking the page-card header */
.page-card .dt-buttons { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.page-card .dt-button {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  color: #374151 !important;
  font-weight: 600 !important;
}
.page-card .dt-button:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* ══════════════════════════════════════════════════════════════════
   LOGIN — FORGOT / REGISTER LINKS
   ════════��═════════════════════════════════════════════════════════ */
.login-forgot-row {
  text-align: right;
  margin-bottom: 16px;
}
.login-forgot-link {
  font-size: 13px;
  color: var(--am-primary);
  text-decoration: none;
}
.login-forgot-link:hover { text-decoration: underline; }

.login-register-row {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}
.login-register-link {
  color: var(--am-primary);
  text-decoration: none;
  font-weight: 600;
}
.login-register-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   HEADER — PROFILE TRIGGER (replaces inline styles)
   ══════════════════════════════════════════════════════════════════ */
.header-profile-trigger {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}
.header-profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
}
.header-profile-name {
  line-height: 1.2;
}
.header-name-text {
  font-weight: 600;
  color: #1e293b;
}
.header-ext-text {
  font-size: 12px;
  color: #777;
}

/* Hide Bootstrap dropdown caret on profile toggles */
.site-header .dropdown-toggle::after {
  display: none !important;
}

/* Notification empty state */
.notification .dropdown-menu p.text-muted {
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — use CSS variable, remove inline width override
   ══════════════════════════════════════════════════════════════════ */
.site-sidebar {
  width: var(--am-sidebar-width, 235px) !important;
}

/* core.css hardcodes margin-left:220px on .site-content for the
   fixed-sidebar layout. When we widened the sidebar (235→265),
   the content margin stayed at 220 — sidebar overlapped content
   by 45px on the left and pushed the dashboard tiles off the
   right edge. Tie content offset to the sidebar-width variable
   so any future sidebar resize stays in sync. */
@media (min-width: 768px) {
  .site-content {
    margin-left: var(--am-sidebar-width, 235px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TABLE-RESPONSIVE FIX — allow horizontal scroll
   ══════════════════════════════════════════════════════════════════ */
.content-area .table-responsive,
.page-card .table-responsive,
.box .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 1200px breakpoint (large tablets / small desktops)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .tile.tile-1 {
    min-width: 0 !important;
  }
  .content-area .table th,
  .content-area .table td {
    font-size: 12px !important;
    padding: 8px 6px !important;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 991px (tablet)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .site-sidebar {
    transform: translateX(-100%);
    position: fixed !important;
    z-index: 1050;
    transition: transform .25s ease;
  }
  /* JS adds body.site-sidebar-opened on hamburger click; .show / .sidebar-open
     are kept for any other code paths that may set them. */
  .site-sidebar.show,
  .sidebar-open .site-sidebar,
  .site-sidebar-opened .site-sidebar {
    transform: translateX(0);
  }
  .site-content {
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .site-header {
    margin-left: 0 !important;
  }
  /* Mobile header layout — flexbox with explicit order so visual order
     is independent of HTML order:
       order 1: logo  (margin-right:auto pushes the rest right)
       order 2: profile dropdown
       order 3: hamburger toggle

     overflow:visible on the navbar/header so Bootstrap's absolute-
     positioned dropdown-menu isn't clipped (otherwise the profile
     trigger feels "not clickable" — the click works but the menu
     is invisible). */
  .site-header,
  .site-header .navbar {
    overflow: visible !important;
  }
  .site-header .navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 6px 12px !important;
  }
  /* Force the desktop collapse-to-icons toggle out of the layout entirely
     on mobile — it should never render here. Belt-and-braces against any
     stray rule resetting display:none. */
  body .site-header .toggle-button.sidebar-toggle-second {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Make sure the hamburger lines inside the mobile <button> render —
     pseudo-elements need a non-empty inline-block in some browsers. */
  .site-header button.toggle-button .hamburger {
    display: inline-block !important;
    position: relative !important;
  }
  .site-header > .navbar > .navbar-left {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .site-header > .navbar > .navbar-right {
    order: 2 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .site-header > .navbar > .navbar-right .nav {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .site-header > .navbar > .toggle-button.sidebar-toggle-first {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  /* Profile block stays compact but keeps the name/ext text visible.
     Truncate over-long names so the row never wraps. */
  .site-header .header-profile-info {
    gap: 6px !important;
    padding: 0 !important;
    align-items: center !important;
  }
  .site-header .header-profile-name {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
    max-width: 110px !important;
  }
  .site-header .header-name-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .site-header .header-ext-text {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  /* Slim the logo so it doesn't crowd the hamburger on narrow phones. */
  .site-header .logo {
    width: 150px !important;
    height: 46px !important;
  }
  .site-header .navbar-brand {
    margin-right: 0 !important;
  }
  /* Hamburger sits naturally at the right end of the navbar (no absolute
     positioning needed once the row stops wrapping). */
  .site-header .toggle-button.sidebar-toggle-first {
    display: flex !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    margin-left: 4px !important;
  }
  /* Belt-and-braces — kill the desktop collapse-to-icons toggle on mobile.
     Hide both the wrapper and the inner hamburger span so nothing leaks. */
  .site-header .toggle-button.sidebar-toggle-second,
  .site-header .toggle-button.sidebar-toggle-second * {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Hide the fullscreen toggle on phones — single tap target plenty. */
  .site-header .nav-link.toggle-fullscreen {
    display: none !important;
  }
  /* Re-implement the dead BS3 `hidden-sm-down` class on phones. The blade
     templates use it on the notification bell (admin), referral-code badge
     (account), and a few other legacy nav items. BS4 doesn't honor the
     class, so without this rule every panel shows random grey boxes in
     the navbar on mobile. Profile dropdown intentionally kept visible —
     the avatar tap is the only access to sign-out / change-password. */
  .site-header .navbar-right .nav-item.hidden-sm-down:not(.dropdown):not(:has(.header-profile-info)) {
    display: none !important;
  }
  /* Belt-and-braces fallback for browsers without :has() — kill the two
     specific legacy widgets directly. */
  .site-header .navbar-right .nav-item.notification,
  .site-header .navbar-right .referral-box {
    display: none !important;
  }
}

/* Desktop default: hide the mobile-only slide-in hamburger. */
@media (min-width: 992px) {
  .site-header .toggle-button.sidebar-toggle-first {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 767px (mobile)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .content-area {
    padding: 10px !important;
  }
  .content-area .table th,
  .content-area .table td {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  /* Stack dashboard tiles */
  .tile.tile-1 {
    margin-bottom: 10px !important;
  }
  /* Login page responsive */
  .admin-login-page {
    flex-direction: column !important;
  }
  .login-brand-panel {
    display: none !important;
  }
  .login-form-panel {
    width: 100% !important;
    min-height: 100vh;
  }
  .login-form-inner {
    max-width: 100% !important;
    padding: 30px 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 767px (mobile) — override core.css's absolute-position
   on .navbar-toggleable-sm which yanks the profile block out of flow
   and pins it 60px below the navbar (visually as a second row).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .site-header .navbar .navbar-toggleable-sm {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px (small phone)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-form-inner {
    padding: 20px 15px !important;
  }
  .btn-login {
    font-size: 14px !important;
    padding: 10px !important;
  }
  .page-card {
    padding: 12px !important;
    margin: 8px !important;
  }
  /* Narrow-phone header — keep [logo][avatar+name][hamburger] in one row
     by trimming the logo, hamburger, name, and gaps. */
  .site-header .navbar {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .site-header .logo {
    width: 110px !important;
    height: 38px !important;
  }
  .site-header .toggle-button {
    width: 32px !important;
    height: 32px !important;
  }
  .site-header .header-profile-name {
    max-width: 80px !important;
  }
  .site-header .header-name-text {
    font-size: 12px !important;
  }
  .site-header .header-ext-text {
    font-size: 10px !important;
  }
  .site-header .avatar.box-32 {
    width: 28px !important;
    height: 28px !important;
  }
}

/* =============================================================
   NOTIFICATIONS PANEL (.am-notif-*)
   Header bell dropdown + /notifications inbox page styling.

   IMPORTANT: legacy rules in style_pagination.css + earlier blocks
   in this file target `.notification .dropdown-menu a` with
   !important (background, padding, display:block, :before bullet,
   plus max-height/overflow on the outer .dropdown-menu). They
   pre-date this panel and cannot be deleted without affecting
   other surfaces, so everything below is intentionally written
   with higher specificity and !important to win the cascade.
   ============================================================= */

/* Bell dropdown — fixed-width card with header, scrollable list, footer.
   Use higher-specificity selector + !important to override the legacy
   `.site-header .notification .dropdown-menu` rule above (line ~508)
   which sets max-height/overflow-y and creates the OUTER scrollbar. */
.site-header .notification .dropdown-menu.am-notif-panel,
.am-notif-panel {
  width: 380px !important;
  max-width: 92vw !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
  overflow: hidden !important;
  /* Outer panel must NOT scroll — .am-notif-list owns the scroll. */
  max-height: none !important;
  overflow-y: visible !important;
  margin-top: 8px !important;
  background: #fff !important;
}

/* Kill the legacy purple bullet (style_pagination.css:82) and the
   grey card-row background + padding (style_pagination.css:75) that
   leak into our flex items. */
.site-header .notification .am-notif-panel a:before,
.am-notif-panel a:before {
  content: none !important;
  display: none !important;
}
.site-header .notification .am-notif-panel a,
.am-notif-panel a {
  background: transparent !important;
  margin-bottom: 0 !important;
}

.am-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%);
  border-bottom: 1px solid #e2e8f0;
}
.am-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.am-notif-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  vertical-align: middle;
}
.am-notif-mark-all {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.am-notif-mark-all:hover { color: #4338ca; text-decoration: underline; }

.am-notif-list {
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
}
.am-notif-list::-webkit-scrollbar { width: 6px; }
.am-notif-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.am-notif-list::-webkit-scrollbar-track { background: transparent; }

/* Flex row beats `display: block !important` on the older
   `.site-header .notification .dropdown-menu a` rule. */
.site-header .notification .am-notif-panel .am-notif-item,
.am-notif-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  color: #1f2937 !important;
  background: #fff !important;
  transition: background 0.15s ease !important;
}
.site-header .notification .am-notif-panel .am-notif-item:last-child,
.am-notif-item:last-child { border-bottom: 0 !important; }
.site-header .notification .am-notif-panel .am-notif-item:hover,
.am-notif-item:hover {
  background: #f8fafc !important;
  text-decoration: none !important;
  color: #1f2937 !important;
}

.am-notif-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 50%;
  text-transform: uppercase;
  overflow: hidden;
}
.am-notif-avatar img { width: 100%; height: 100%; object-fit: cover; }

.am-notif-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.am-notif-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: #1f2937;
  /* Clamp to 2 lines so the dropdown items stay scannable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.am-notif-time {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

.am-notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
  margin: 0;
}

.am-notif-foot {
  display: block !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6366f1 !important;
  text-align: center !important;
  background: #fafbff !important;
  border-top: 1px solid #e2e8f0 !important;
  text-decoration: none !important;
}
.am-notif-foot:hover { background: #eef2ff !important; color: #4338ca !important; }
.am-notif-foot i { margin-right: 4px; font-size: 11px; }

/* /notifications inbox page — rows reuse the same chip styling. */
.am-notif-inbox-row {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 8px;
  text-decoration: none !important;
  color: #1f2937 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.am-notif-inbox-row:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(99,102,241,0.10);
  transform: translateY(-1px);
}
.am-notif-inbox-row.is-unread { border-left: 3px solid #6366f1; background: #f7f6ff; }
.am-notif-inbox-row .am-notif-avatar { width: 44px; height: 44px; font-size: 13px; }
.am-notif-inbox-row .am-notif-text { font-size: 14px; -webkit-line-clamp: unset; }
.am-notif-inbox-row .am-notif-time { font-size: 11.5px; }

/* Empty state on the inbox page */
.am-notif-empty { color: #94a3b8; text-align: center; }
.am-notif-empty p { margin: 0; color: #64748b; font-size: 14px; }