/* ==========================================================================
   Arab Express CRM — Theme Layer
   Loads AFTER the template stylesheets and overrides them.
   Nothing here depends on Blade or the backend; safe to iterate on freely.
   ========================================================================== */

:root {
  /* Brand */
  --ae-green-900: #022b30;
  --ae-green-800: #00383e;
  --ae-green-700: #00484f;
  --ae-green-600: #006b76;
  --ae-green-500: #0f8996;
  --ae-green-400: #2ba7b4;
  --ae-green-300: #7fcbd4;
  --ae-green-200: #b8e3e8;
  --ae-green-100: #e0f3f5;
  --ae-green-50:  #f0fafb;

  /* Neutrals */
  --ae-ink:       #0c1c1f;
  --ae-body:      #44565a;
  --ae-muted:     #77898d;
  --ae-line:      #e0eaec;
  --ae-canvas:    #f5f9fa;
  --ae-white:     #ffffff;

  /* Status */
  --ae-danger:    #d1473f;
  --ae-warning:   #c98a14;
  --ae-info:      #2f7fb5;

  /* Glass */
  --ae-glass-bg:      rgba(255, 255, 255, 0.72);
  --ae-glass-bg-soft: rgba(255, 255, 255, 0.55);
  --ae-glass-border:  rgba(255, 255, 255, 0.85);
  --ae-glass-blur:    saturate(180%) blur(20px);

  /* Elevation — tinted, not grey */
  --ae-shadow-sm: 0 1px 2px rgba(2, 43, 48, 0.05), 0 1px 3px rgba(2, 43, 48, 0.04);
  --ae-shadow:    0 2px 4px rgba(2, 43, 48, 0.04), 0 8px 24px rgba(2, 43, 48, 0.07);
  --ae-shadow-lg: 0 4px 8px rgba(2, 43, 48, 0.05), 0 20px 48px rgba(2, 43, 48, 0.11);
  --ae-ring:      0 0 0 3px rgba(15, 137, 150, 0.18);

  /* Geometry */
  --ae-r-sm: 8px;
  --ae-r:    14px;
  --ae-r-lg: 20px;
  --ae-r-pill: 999px;

  /* Motion */
  --ae-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ae-fast: 140ms;
  --ae-med:  240ms;
}

/* ---------- Base ---------- */

body,
body.skin-green.fixed-layout {
  background: var(--ae-canvas);
  background-image:
    radial-gradient(1100px 620px at 8% -8%,  rgba(15, 137, 150, 0.10), transparent 60%),
    radial-gradient(900px 520px at 104% 4%, rgba(43, 167, 180, 0.09), transparent 62%);
  background-attachment: fixed;
  color: var(--ae-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6,
.card-title, .text-themecolor {
  color: var(--ae-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

a { color: var(--ae-green-600); transition: color var(--ae-fast) var(--ae-ease); }
a:hover { color: var(--ae-green-700); text-decoration: none; }

::selection { background: var(--ae-green-200); color: var(--ae-green-900); }

/* ---------- Page chrome ---------- */

.page-wrapper { background: transparent; }
.container-fluid { padding: 24px 28px 40px; }

.page-titles {
  background: transparent;
  box-shadow: none;
  margin: 0 0 22px;
  padding: 4px 0;
  border: 0;
}
.page-titles h4 { font-size: 22px; margin: 0; }

/* ---------- Glass surface primitive ---------- */

.card,
.ae-glass {
  background: var(--ae-glass-bg);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border: 1px solid var(--ae-glass-border);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow);
  transition: box-shadow var(--ae-med) var(--ae-ease),
              transform  var(--ae-med) var(--ae-ease);
  overflow: hidden;
  position: relative;
}

/* specular highlight along the top edge — what sells the glass */
.card::before,
.ae-glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.95) 22%,
    rgba(255, 255, 255, 0.95) 78%,
    transparent);
  pointer-events: none;
}

.card:hover { box-shadow: var(--ae-shadow-lg); }

.card-body { padding: 22px 24px; }

.card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* ---------- Sidebar ---------- */

.left-sidebar,
.left-sidebar .scroll-sidebar,
.left-sidebar .sidebar-nav {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border-right: 1px solid var(--ae-line);
}

.sidebar-nav ul li a {
  color: var(--ae-body);
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--ae-r-sm);
  margin: 2px 10px;
  padding: 10px 14px;
  position: relative;
  transition: background var(--ae-fast) var(--ae-ease),
              color      var(--ae-fast) var(--ae-ease),
              transform  var(--ae-fast) var(--ae-ease);
}

.sidebar-nav ul li a i {
  color: var(--ae-muted);
  transition: color var(--ae-fast) var(--ae-ease);
  width: 22px;
}

.sidebar-nav ul li a:hover {
  background: var(--ae-green-50);
  color: var(--ae-green-700);
  transform: translateX(2px);
}
.sidebar-nav ul li a:hover i { color: var(--ae-green-600); }

.sidebar-nav ul li a.active,
.sidebar-nav ul li.active > a {
  background: linear-gradient(135deg, var(--ae-green-600), var(--ae-green-500));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 107, 118, 0.28);
}
.sidebar-nav ul li a.active i,
.sidebar-nav ul li.active > a i { color: #fff; }

.sidebar-nav > ul > li > a.has-arrow::after { border-color: currentColor; opacity: 0.55; }

.user-profile .profile-img img { border-radius: var(--ae-r-pill); }

/* ---------- Topbar ---------- */

.topbar,
.topbar .navbar-header,
.topbar .top-navbar {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border-bottom: 1px solid var(--ae-line);
  box-shadow: none;
}
.topbar .navbar-header { border-right: 1px solid var(--ae-line); }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link { color: var(--ae-body); }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--ae-green-600); }

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--ae-r-sm);
  font-weight: 550;
  font-size: 14px;
  padding: 9px 18px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--ae-fast) var(--ae-ease),
              box-shadow var(--ae-fast) var(--ae-ease),
              background var(--ae-fast) var(--ae-ease),
              filter var(--ae-fast) var(--ae-ease);
}

.btn:focus, .btn.focus { box-shadow: var(--ae-ring); outline: none; }

/* press */
.btn:active { transform: scale(0.97); }

.btn-primary,
.btn-success,
.btn-themecolor {
  background: linear-gradient(135deg, var(--ae-green-600), var(--ae-green-500));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 107, 118, 0.24);
}
.btn-primary:hover,
.btn-success:hover,
.btn-themecolor:hover {
  background: linear-gradient(135deg, var(--ae-green-700), var(--ae-green-600));
  box-shadow: 0 6px 18px rgba(0, 107, 118, 0.32);
  transform: translateY(-1px);
  color: #fff;
}

.btn-secondary, .btn-default, .btn-light {
  background: var(--ae-glass-bg);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border-color: var(--ae-line);
  color: var(--ae-body);
  box-shadow: var(--ae-shadow-sm);
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
  background: #fff;
  border-color: var(--ae-green-300);
  color: var(--ae-green-700);
  transform: translateY(-1px);
}

.btn-danger  { background: var(--ae-danger);  border-color: transparent; }
.btn-warning { background: var(--ae-warning); border-color: transparent; color: #fff; }
.btn-info    { background: var(--ae-info);    border-color: transparent; }
.btn-danger:hover, .btn-warning:hover, .btn-info:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
  color: #fff;
}

.btn-outline-primary, .btn-outline-success {
  border-color: var(--ae-green-400);
  color: var(--ae-green-700);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background: var(--ae-green-600);
  border-color: var(--ae-green-600);
  color: #fff;
}

.btn-sm      { padding: 6px 12px; font-size: 13px; border-radius: 7px; }
.btn-rounded { border-radius: var(--ae-r-pill); }

/* ripple — injected by arabexpress-ui.js */
.ae-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: ae-ripple-out 560ms var(--ae-ease);
  pointer-events: none;
  z-index: 0;
}
.btn-secondary .ae-ripple,
.btn-default   .ae-ripple,
.btn-light     .ae-ripple { background: rgba(15, 137, 150, 0.22); }

@keyframes ae-ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- Forms ---------- */

.form-control, .custom-select, select.form-control {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-sm);
  color: var(--ae-ink);
  font-size: 14px;
  padding: 10px 14px;
  height: auto;
  box-shadow: none;
  transition: border-color var(--ae-fast) var(--ae-ease),
              box-shadow   var(--ae-fast) var(--ae-ease),
              background   var(--ae-fast) var(--ae-ease);
}
.form-control:focus, .custom-select:focus {
  background: #fff;
  border-color: var(--ae-green-400);
  box-shadow: var(--ae-ring);
  outline: none;
}
.form-control::placeholder { color: var(--ae-muted); }

label, .control-label {
  color: var(--ae-body);
  font-weight: 550;
  font-size: 13px;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

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

.input-group-text {
  background: var(--ae-green-50);
  border-color: var(--ae-line);
  color: var(--ae-green-700);
  border-radius: var(--ae-r-sm);
}

/* ---------- Tables ---------- */

.table {
  color: var(--ae-body);
  font-size: 14px;
  margin-bottom: 0;
}

.table thead th {
  background: rgba(244, 250, 247, 0.9);
  color: var(--ae-muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 0;
  border-bottom: 1px solid var(--ae-line);
  padding: 13px 16px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table tbody td {
  border-top: 1px solid var(--ae-line);
  padding: 13px 16px;
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--ae-fast) var(--ae-ease);
}
.table tbody tr:hover { background: var(--ae-green-50); }

.table-responsive { border-radius: var(--ae-r); }

/* numbers align and compare properly */
.table td.ae-num, .table td.text-right { font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */

.badge {
  border-radius: var(--ae-r-pill);
  font-weight: 600;
  font-size: 11.5px;
  padding: 5px 11px;
  letter-spacing: 0.01em;
}
.badge-success, .badge-primary { background: var(--ae-green-100); color: var(--ae-green-800); }
.badge-danger  { background: #fbeae9; color: #9b302a; }
.badge-warning { background: #fdf3e0; color: #8a5f0b; }
.badge-info    { background: #e8f2f9; color: #245c83; }
.badge-secondary, .badge-light { background: #eef2f0; color: var(--ae-body); }

/* ---------- Alerts ---------- */

.alert {
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r);
  background: var(--ae-glass-bg);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  box-shadow: var(--ae-shadow-sm);
  color: var(--ae-ink);
  padding: 14px 18px;
}
.alert-success { border-left: 3px solid var(--ae-green-500); }
.alert-danger  { border-left: 3px solid var(--ae-danger); }
.alert-warning { border-left: 3px solid var(--ae-warning); }
.alert-info    { border-left: 3px solid var(--ae-info); }

/* ---------- Modals ---------- */

.modal-content {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border: 1px solid var(--ae-glass-border);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-lg);
}
.modal-backdrop.show { background: rgba(2, 30, 33, 0.34); opacity: 1; }
.modal-header, .modal-footer { border-color: var(--ae-line); padding: 18px 24px; }
.modal-body { padding: 22px 24px; }

/* ---------- Pagination ---------- */

.pagination .page-link {
  border: 1px solid var(--ae-line);
  color: var(--ae-body);
  border-radius: var(--ae-r-sm);
  margin: 0 3px;
  padding: 8px 13px;
  transition: all var(--ae-fast) var(--ae-ease);
}
.pagination .page-link:hover {
  background: var(--ae-green-50);
  border-color: var(--ae-green-300);
  color: var(--ae-green-700);
}
.pagination .page-item.active .page-link {
  background: var(--ae-green-600);
  border-color: var(--ae-green-600);
  color: #fff;
}

/* ---------- Stat tiles ---------- */

.ae-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ae-stat__icon {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: var(--ae-r);
  background: var(--ae-green-100);
  color: var(--ae-green-700);
  font-size: 19px;
}
.ae-stat__value {
  font-size: 27px;
  font-weight: 650;
  color: var(--ae-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.ae-stat__label {
  font-size: 12.5px;
  color: var(--ae-muted);
  margin-top: 3px;
}

/* ---------- Login ---------- */

.ae-login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ae-login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  background: var(--ae-glass-bg);
  -webkit-backdrop-filter: var(--ae-glass-blur);
  backdrop-filter: var(--ae-glass-blur);
  border: 1px solid var(--ae-glass-border);
  border-radius: 26px;
  box-shadow: var(--ae-shadow-lg);
}

/* ---------- Page entrance ---------- */

@keyframes ae-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.container-fluid > .row > [class*="col-"],
.container-fluid > .card {
  animation: ae-rise var(--ae-med) var(--ae-ease) both;
}
.container-fluid > .row > [class*="col-"]:nth-child(2) { animation-delay: 40ms; }
.container-fluid > .row > [class*="col-"]:nth-child(3) { animation-delay: 80ms; }
.container-fluid > .row > [class*="col-"]:nth-child(4) { animation-delay: 120ms; }

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 137, 150, 0.26);
  border-radius: var(--ae-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 137, 150, 0.45); background-clip: content-box; }

/* ---------- Utilities ---------- */

.ae-muted { color: var(--ae-muted); }
.text-themecolor { color: var(--ae-green-700) !important; }

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}

/* Firefox and older Safari have no backdrop-filter — fall back to solid */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .ae-glass, .modal-content, .alert,
  .left-sidebar, .left-sidebar .scroll-sidebar, .left-sidebar .sidebar-nav,
  .topbar, .topbar .navbar-header, .topbar .top-navbar,
  .ae-login-card, .btn-secondary, .btn-default, .btn-light {
    background: #ffffff;
  }
}

/* ---------- Print ---------- */
@media print {
  .left-sidebar, .topbar, .btn { display: none !important; }
  .card { box-shadow: none; border: 1px solid var(--ae-line); background: #fff; }
  .page-wrapper { margin-left: 0 !important; }
}

/* ==========================================================================
   LIQUID GLASS — floating chrome
   Overrides the template's docked sidebar/topbar with detached glass panels.
   ========================================================================== */

:root {
  --ae-rail-w:     264px;
  --ae-rail-w-sm:  84px;      /* collapsed icon rail */
  --ae-gap:        16px;      /* float inset */
  --ae-topbar-h:   64px;

  /* Liquid Glass material — thinner and brighter than a plain card */
  --ae-lg-bg:     rgba(255, 255, 255, 0.55);
  --ae-lg-blur:   saturate(200%) blur(32px);
  --ae-lg-rim:    rgba(255, 255, 255, 0.9);
  --ae-lg-shadow:
      0 1px 1px rgba(2, 43, 48, 0.04),
      0 8px 24px rgba(2, 43, 48, 0.08),
      0 32px 64px rgba(2, 43, 48, 0.10);
  --ae-r-glass:   26px;
}

/* ---------- The material ---------- */

.ae-lg {
  background: var(--ae-lg-bg);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  border-radius: var(--ae-r-glass);
  box-shadow: var(--ae-lg-shadow);
  position: relative;
  isolation: isolate;
}

/* lensing: bright top-left rim fading to nothing bottom-right,
   plus an inner edge light. This is what reads as "glass" rather than "blur". */
.ae-lg::after,
.left-sidebar::after,
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.35) 26%,
      rgba(255,255,255,0.05) 52%,
      rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Floating sidebar ---------- */

.left-sidebar {
  position: fixed;
  top: var(--ae-gap);
  left: var(--ae-gap);
  bottom: var(--ae-gap);
  width: var(--ae-rail-w);
  height: auto;
  padding-top: 0;
  z-index: 60;

  background: var(--ae-lg-bg);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  border-right: 1px solid var(--ae-lg-rim);
  border-radius: var(--ae-r-glass);
  box-shadow: var(--ae-lg-shadow);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: width var(--ae-med) var(--ae-ease),
              transform var(--ae-med) var(--ae-ease);
}

.left-sidebar .scroll-sidebar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 18px;
  height: auto;
  position: relative;
  z-index: 2;
}

.left-sidebar .sidebar-nav {
  background: transparent;
  border: 0;
  padding: 0;
}

/* brand block pinned at the top of the panel */
.ae-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 20px 14px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.ae-brand__mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ae-green-600), var(--ae-green-400));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  box-shadow: 0 3px 10px rgba(0,107,118,0.32);
  flex: 0 0 34px;
}
.ae-brand__text { line-height: 1.15; overflow: hidden; }
.ae-brand__name {
  font-size: 14.5px; font-weight: 650; color: var(--ae-ink);
  letter-spacing: -0.02em; white-space: nowrap;
}
.ae-brand__sub {
  font-size: 11px; color: var(--ae-muted); white-space: nowrap;
}

/* nav items — concentric radii, inset from the panel edge */
.left-sidebar .sidebar-nav ul li a {
  margin: 2px 12px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13.5px;
  gap: 11px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* the active pill gets its own specular sheen */
.left-sidebar .sidebar-nav ul li a.active,
.left-sidebar .sidebar-nav ul li.active > a {
  background: linear-gradient(135deg,
      var(--ae-green-600) 0%,
      var(--ae-green-500) 55%,
      var(--ae-green-400) 100%);
  box-shadow:
      0 2px 6px rgba(0,107,118,0.28),
      0 8px 20px rgba(0,107,118,0.22),
      inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
}

/* section labels */
.ae-nav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ae-muted);
  padding: 18px 25px 7px;
  white-space: nowrap;
}

/* footer block (user / sign out) pinned to the bottom */
.ae-rail-foot {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(to top, rgba(255,255,255,0.4), transparent);
  position: relative;
  z-index: 2;
}

/* ---------- Floating topbar ---------- */

.topbar {
  position: fixed;
  top: var(--ae-gap);
  left: calc(var(--ae-rail-w) + var(--ae-gap) * 2);
  right: var(--ae-gap);
  height: var(--ae-topbar-h);
  z-index: 55;

  background: var(--ae-lg-bg);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  border-radius: 20px;
  box-shadow: var(--ae-lg-shadow);
  isolation: isolate;
  transition: left var(--ae-med) var(--ae-ease);
}
.topbar .navbar-header {
  display: none;              /* brand now lives in the rail */
}
.topbar .top-navbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  min-height: var(--ae-topbar-h);
  padding: 0 18px;
  position: relative;
  z-index: 2;
}
.topbar .top-navbar .navbar-collapse { padding: 0; }

/* ---------- Content offset ---------- */

.page-wrapper {
  margin-left: calc(var(--ae-rail-w) + var(--ae-gap) * 2);
  padding-top: calc(var(--ae-topbar-h) + var(--ae-gap) * 2);
  padding-right: var(--ae-gap);
  min-height: 100vh;
  transition: margin-left var(--ae-med) var(--ae-ease);
}
.page-wrapper > .container-fluid { padding: 0 10px 40px; }

/* ---------- Collapsed rail ---------- */

body.ae-rail-collapsed .left-sidebar { width: var(--ae-rail-w-sm); }
body.ae-rail-collapsed .topbar       { left: calc(var(--ae-rail-w-sm) + var(--ae-gap) * 2); }
body.ae-rail-collapsed .page-wrapper { margin-left: calc(var(--ae-rail-w-sm) + var(--ae-gap) * 2); }

body.ae-rail-collapsed .left-sidebar .hide-menu,
body.ae-rail-collapsed .ae-brand__text,
body.ae-rail-collapsed .ae-nav-label,
body.ae-rail-collapsed .left-sidebar .has-arrow::after { opacity: 0; pointer-events: none; }

body.ae-rail-collapsed .left-sidebar .sidebar-nav ul li a {
  justify-content: center;
  padding: 11px 0;
  margin: 2px 14px;
}
body.ae-rail-collapsed .ae-brand { justify-content: center; padding: 20px 0 14px; }

/* tooltip on hover when collapsed */
body.ae-rail-collapsed .left-sidebar .sidebar-nav ul li a[data-ae-tip]:hover::before {
  content: attr(data-ae-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(2, 30, 33, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 9px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  animation: ae-rise 160ms var(--ae-ease) both;
}

/* ---------- Rail toggle button ---------- */

.ae-rail-toggle {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--ae-line);
  background: rgba(255,255,255,0.7);
  color: var(--ae-body);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--ae-fast) var(--ae-ease);
  flex: 0 0 38px;
}
.ae-rail-toggle:hover {
  background: #fff;
  color: var(--ae-green-700);
  border-color: var(--ae-green-300);
}
.ae-rail-toggle:active { transform: scale(0.94); }

/* ---------- Cards sit slightly flatter against floating chrome ---------- */

.card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.66);
  margin-bottom: 20px;
}
/* a card that is the only child of its column should not double up the row gap */
.row > [class^="col"] > .card:last-child,
.row > [class*=" col"] > .card:last-child { margin-bottom: 20px; }

/* ---------- Mobile: rail becomes an overlay sheet ---------- */

@media (max-width: 1024px) {
  .left-sidebar {
    transform: translateX(calc(-100% - var(--ae-gap) * 2));
    box-shadow: none;
  }
  body.ae-rail-open .left-sidebar {
    transform: none;
    box-shadow: var(--ae-lg-shadow), 0 0 0 100vmax rgba(2,30,33,0.28);
  }
  .topbar       { left: var(--ae-gap); }
  .page-wrapper { margin-left: 0; padding-left: var(--ae-gap); }
  body.ae-rail-collapsed .topbar       { left: var(--ae-gap); }
  body.ae-rail-collapsed .page-wrapper { margin-left: 0; }
}

/* ---------- Rail scrollbar: hairline, appears on hover ---------- */

.left-sidebar .scroll-sidebar::-webkit-scrollbar { width: 6px; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
  border: 0;
}
.left-sidebar:hover .scroll-sidebar::-webkit-scrollbar-thumb {
  background: rgba(15, 137, 150, 0.3);
}

/* ==========================================================================
   RAIL v2 — no topbar, brand lockup, sections, accordion, user footer
   ========================================================================== */

/* Kill the template's floating header entirely */
.topbar { display: none !important; }

.page-wrapper {
  padding-top: var(--ae-gap) !important;
}

/* ---------- Brand lockup ---------- */

.ae-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 14px 14px 16px;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  border-bottom: 1px solid rgba(255,255,255,0.55);
}
.ae-brand__link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}
.ae-brand__mark-img {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  display: block;
  box-shadow: 0 3px 10px rgba(0,107,118,0.28);
}
.ae-brand__text {
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: opacity var(--ae-fast) var(--ae-ease),
              max-width var(--ae-med) var(--ae-ease);
  max-width: 160px;
}
.ae-brand__name {
  font-size: 13.5px; font-weight: 700; color: var(--ae-ink);
  letter-spacing: 0.02em; white-space: nowrap; line-height: 1.2;
}
.ae-brand__sub {
  font-size: 10.5px; color: var(--ae-muted); white-space: nowrap;
  letter-spacing: 0.02em;
}

.ae-rail-toggle {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex: 0 0 30px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ae-muted);
}
.ae-rail-toggle:hover {
  background: rgba(255,255,255,0.8);
  border-color: var(--ae-line);
  color: var(--ae-green-700);
}

/* ---------- Nav ---------- */

.ae-rail .sidebar-nav ul { list-style: none; margin: 0; padding: 0; }

.ae-rail .sidebar-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 10px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 520;
  color: var(--ae-body);
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}
.ae-ico { flex: 0 0 18px; color: var(--ae-muted); transition: color var(--ae-fast) var(--ae-ease); }
.ae-rail .sidebar-nav > ul > li > a:hover .ae-ico { color: var(--ae-green-600); }
.ae-rail .sidebar-nav > ul > li > a.active .ae-ico,
.ae-rail .sidebar-nav > ul > li.ae-open > a .ae-ico { color: inherit; }

.ae-rail .hide-menu {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--ae-fast) var(--ae-ease);
}

/* disclosure chevron */
.ae-rail .sidebar-nav a.has-arrow::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.45;
  margin-left: auto;
  flex: 0 0 6px;
  transition: transform var(--ae-med) var(--ae-ease), opacity var(--ae-fast) var(--ae-ease);
}
.ae-rail .sidebar-nav li.ae-open > a.has-arrow::after { transform: rotate(45deg); opacity: 0.8; }

/* submenu */
.ae-rail .sidebar-nav ul.collapse {
  display: block;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--ae-med) var(--ae-ease);
  margin: 0 10px;
}
.ae-rail .sidebar-nav li.ae-open > ul.collapse { max-height: 420px; }

.ae-rail .sidebar-nav ul.collapse li a {
  display: block;
  padding: 7px 12px 7px 41px;
  font-size: 12.8px;
  color: var(--ae-muted);
  border-radius: 9px;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: color var(--ae-fast) var(--ae-ease), background var(--ae-fast) var(--ae-ease);
}
.ae-rail .sidebar-nav ul.collapse li a::before {
  content: "";
  position: absolute;
  left: 21px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  transform: translateY(-50%);
}
.ae-rail .sidebar-nav ul.collapse li a:hover {
  color: var(--ae-green-700);
  background: var(--ae-green-50);
}
.ae-rail .sidebar-nav ul.collapse li a.active {
  color: var(--ae-green-700);
  background: var(--ae-green-100);
  font-weight: 600;
}

/* section labels */
.ae-rail .ae-nav-label {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ae-muted);
  padding: 16px 22px 6px;
  white-space: nowrap;
  opacity: 0.75;
  list-style: none;
}
.ae-rail .ae-nav-label:first-child { padding-top: 10px; }

/* ---------- Footer ---------- */

.ae-rail-foot {
  flex: 0 0 auto;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(to top, rgba(255,255,255,0.55), transparent);
  position: relative;
  z-index: 3;
}

.ae-impersonate {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px;
  margin-bottom: 8px;
  border-radius: 11px;
  background: #fdf3e0;
  color: #8a5f0b;
  font-size: 12.2px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ae-impersonate:hover { background: #fbe9c8; color: #6d4b08; }
.ae-impersonate .ae-ico { color: currentColor; }

.ae-user {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  transition: background var(--ae-fast) var(--ae-ease);
}
.ae-user:hover { background: rgba(255,255,255,0.75); }
.ae-user__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ae-green-600), var(--ae-green-400));
  color: #fff; font-size: 13px; font-weight: 650;
  overflow: hidden;
}
.ae-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ae-user__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ae-user__name {
  font-size: 12.8px; font-weight: 600; color: var(--ae-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.ae-user__role { font-size: 10.5px; color: var(--ae-muted); text-transform: capitalize; }
.ae-user__out {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ae-muted);
  transition: all var(--ae-fast) var(--ae-ease);
}
.ae-user__out:hover { background: #fbeae9; color: var(--ae-danger); }

/* ---------- Collapsed state ---------- */

body.ae-rail-collapsed .ae-brand { justify-content: center; padding: 16px 0 14px; }
body.ae-rail-collapsed .ae-brand__link { justify-content: center; }
body.ae-rail-collapsed .ae-brand__text { max-width: 0; opacity: 0; }
body.ae-rail-collapsed .ae-rail-toggle { display: none; }

body.ae-rail-collapsed .ae-rail .hide-menu,
body.ae-rail-collapsed .ae-rail .ae-nav-label { opacity: 0; pointer-events: none; }
body.ae-rail-collapsed .ae-rail .ae-nav-label { height: 10px; padding: 6px 0 0; overflow: hidden; }
body.ae-rail-collapsed .ae-rail .sidebar-nav a.has-arrow::after { display: none; }

body.ae-rail-collapsed .ae-rail .sidebar-nav > ul > li > a {
  justify-content: center;
  padding: 11px 0;
  margin: 3px 14px;
}
body.ae-rail-collapsed .ae-rail .sidebar-nav ul.collapse { max-height: 0 !important; }

body.ae-rail-collapsed .ae-user { justify-content: center; }
body.ae-rail-collapsed .ae-user__meta,
body.ae-rail-collapsed .ae-user__out,
body.ae-rail-collapsed .ae-impersonate .hide-menu { display: none; }
body.ae-rail-collapsed .ae-impersonate { justify-content: center; padding: 8px 0; }

/* expand-on-hover when collapsed — quick peek without committing */
body.ae-rail-collapsed .left-sidebar:hover { width: var(--ae-rail-w); }
body.ae-rail-collapsed .left-sidebar:hover .ae-brand__text,
body.ae-rail-collapsed .left-sidebar:hover .hide-menu,
body.ae-rail-collapsed .left-sidebar:hover .ae-nav-label { opacity: 1; pointer-events: auto; }
body.ae-rail-collapsed .left-sidebar:hover .ae-brand__text { max-width: 160px; }
body.ae-rail-collapsed .left-sidebar:hover .ae-nav-label { height: auto; padding: 16px 22px 6px; }
body.ae-rail-collapsed .left-sidebar:hover .ae-brand { justify-content: space-between; padding: 16px 14px 14px 16px; }
body.ae-rail-collapsed .left-sidebar:hover .ae-rail-toggle { display: grid; }
body.ae-rail-collapsed .left-sidebar:hover .sidebar-nav > ul > li > a { justify-content: flex-start; padding: 9px 12px; margin: 2px 10px; }
body.ae-rail-collapsed .left-sidebar:hover .sidebar-nav a.has-arrow::after { display: block; }
body.ae-rail-collapsed .left-sidebar:hover .ae-user { justify-content: flex-start; }
body.ae-rail-collapsed .left-sidebar:hover .ae-user__meta,
body.ae-rail-collapsed .left-sidebar:hover .ae-user__out { display: flex; }

/* ==========================================================================
   FIXES — rail overflow, chevrons, template footer, stat cards
   ========================================================================== */

/* 1. Rail scroll. A flex child won't scroll without min-height:0. */
.left-sidebar .scroll-sidebar {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.left-sidebar { max-height: calc(100vh - var(--ae-gap) * 2); }

/* the template's perfect-scrollbar sets inline height/position — override */
.left-sidebar .scroll-sidebar.ps,
.left-sidebar .scroll-sidebar {
  height: auto !important;
  position: relative !important;
}

/* 2. Chevron: the template sets all four borders, giving a diamond.
      Reset, then draw only two edges. */
.ae-rail .sidebar-nav a.has-arrow::after {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  width: 6px !important;
  height: 6px !important;
  right: auto !important;
  top: auto !important;
  position: static !important;
  transform: rotate(-45deg) !important;
  margin-right: 2px;
}
.ae-rail .sidebar-nav li.ae-open > a.has-arrow::after { transform: rotate(45deg) !important; }

/* 3. Template footer — was overlapping the rail */
.footer {
  position: static !important;
  margin-left: 0;
  background: transparent;
  border: 0;
  color: var(--ae-muted);
  font-size: 12px;
  text-align: center;
  padding: 18px 0 26px;
  left: auto; right: auto; bottom: auto;
}

/* 4. Stat cards */
.ae-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.ae-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  box-shadow: var(--ae-shadow);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--ae-med) var(--ae-ease),
              box-shadow var(--ae-med) var(--ae-ease);
}
.ae-stat-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 24%, rgba(255,255,255,0.95) 76%, transparent);
}
.ae-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ae-shadow-lg);
  text-decoration: none;
}
.ae-stat-card__ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 13px;
  display: grid; place-items: center;
}
.ae-stat-card__ico .ae-ico { width: 20px; height: 20px; color: inherit; }
.ae-stat-card__body { display: flex; flex-direction: column; min-width: 0; }
.ae-stat-card__value {
  font-size: 26px; font-weight: 650; line-height: 1.1;
  color: var(--ae-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.ae-stat-card__label {
  font-size: 12.5px; color: var(--ae-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ae-tone-brand  { background: var(--ae-green-100); color: var(--ae-green-700); }
.ae-tone-danger { background: #fbeae9; color: #b1372f; }
.ae-tone-warn   { background: #fdf3e0; color: #a8720f; }
.ae-tone-info   { background: #e8f2f9; color: #2a6d99; }

/* 5. Give the glass something to refract — stronger canvas tint */
body, body.skin-green.fixed-layout {
  background-image:
    radial-gradient(1200px 680px at 4% -10%,  rgba(15, 137, 150, 0.16), transparent 58%),
    radial-gradient(1000px 560px at 100% 2%,  rgba(43, 167, 180, 0.13), transparent 60%),
    radial-gradient(900px 700px at 60% 110%,  rgba(0, 107, 118, 0.10), transparent 62%);
}

/* 6. Page title row */
.page-titles h4 { font-size: 20px; }
.page-titles .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12.5px; }

/* 7. Kill leftover template inline colour on nav text */
.ae-rail font { color: inherit !important; }

/* perfect-scrollbar applies `overflow: hidden !important` to .ps — beat it */
.left-sidebar .scroll-sidebar,
.left-sidebar .scroll-sidebar.ps {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}
/* hide perfect-scrollbar's own rails, we use the native one */
.left-sidebar .ps__rail-x, .left-sidebar .ps__rail-y { display: none !important; }

/* fade the last item under the footer instead of cutting it hard */
.ae-rail-foot { box-shadow: 0 -10px 16px -10px rgba(2,43,48,0.10); }

/* ---------- Hover-to-peek: deliberate, and suppressed right after a toggle ---------- */

/* only expand after a sustained hover, and collapse back immediately on leave */
body.ae-rail-collapsed .left-sidebar { transition-delay: 0ms; }
body.ae-rail-collapsed .left-sidebar:hover { transition-delay: 420ms; }
body.ae-rail-collapsed .left-sidebar:hover .ae-brand__text,
body.ae-rail-collapsed .left-sidebar:hover .hide-menu,
body.ae-rail-collapsed .left-sidebar:hover .ae-nav-label { transition-delay: 460ms; }

/* after clicking the toggle, don't peek until the pointer has left the rail */
body.ae-no-peek .left-sidebar:hover { width: var(--ae-rail-w-sm) !important; }
body.ae-no-peek .left-sidebar:hover .ae-brand__text { max-width: 0 !important; opacity: 0 !important; }
body.ae-no-peek .left-sidebar:hover .hide-menu,
body.ae-no-peek .left-sidebar:hover .ae-nav-label { opacity: 0 !important; }
body.ae-no-peek .left-sidebar:hover .ae-brand { justify-content: center !important; padding: 16px 0 14px !important; }
body.ae-no-peek .left-sidebar:hover .ae-rail-toggle { display: none !important; }
body.ae-no-peek .left-sidebar:hover .sidebar-nav > ul > li > a { justify-content: center !important; padding: 11px 0 !important; margin: 3px 14px !important; }
body.ae-no-peek .left-sidebar:hover .ae-user { justify-content: center !important; }
body.ae-no-peek .left-sidebar:hover .ae-user__meta,
body.ae-no-peek .left-sidebar:hover .ae-user__out { display: none !important; }

/* when collapsed, a floating re-expand button so the control is never hidden */
.ae-rail-expand {
  display: none;
  position: fixed;
  left: calc(var(--ae-rail-w-sm) + var(--ae-gap) + 10px);
  top: calc(var(--ae-gap) + 14px);
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--ae-lg-rim);
  background: var(--ae-lg-bg);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  box-shadow: var(--ae-shadow-sm);
  color: var(--ae-muted);
  place-items: center;
  cursor: pointer;
  z-index: 70;
  transition: all var(--ae-fast) var(--ae-ease);
}
body.ae-rail-collapsed .ae-rail-expand { display: grid; }
.ae-rail-expand:hover { color: var(--ae-green-700); border-color: var(--ae-green-300); }
.ae-rail-expand:active { transform: scale(0.94); }

/* ---------- Collapsed rail: corrections ---------- */

/* labels must not reserve width, or icons sit off-centre */
body.ae-rail-collapsed .ae-rail .hide-menu,
body.ae-no-peek .ae-rail .hide-menu {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .hide-menu {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 200px !important;
  opacity: 1 !important;
}
body.ae-no-peek .left-sidebar:hover .hide-menu {
  flex: 0 0 0 !important; width: 0 !important; max-width: 0 !important; opacity: 0 !important;
}

body.ae-rail-collapsed .ae-rail .sidebar-nav > ul > li > a {
  gap: 0;
  padding: 11px 0 !important;
  margin: 3px 12px !important;
}

/* section labels collapse to a hairline divider instead of empty space */
body.ae-rail-collapsed .ae-rail .ae-nav-label {
  height: 1px;
  padding: 0;
  margin: 12px 22px;
  background: var(--ae-line);
  font-size: 0;
  overflow: hidden;
}
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-nav-label {
  height: auto; background: none; font-size: 10px;
  padding: 16px 22px 6px; margin: 0;
}

/* the toggle stays in the rail when collapsed — no floating button over content */
.ae-rail-expand { display: none !important; }

body.ae-rail-collapsed .ae-brand {
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 12px !important;
}
body.ae-rail-collapsed .ae-rail-toggle { display: grid !important; }
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-brand {
  flex-direction: row;
  padding: 16px 14px 14px 16px !important;
}

/* ==========================================================================
   LEGACY INLINE COLOURS
   The old views hard-code background-color in style="" attributes, which wins
   over any stylesheet. Attribute selectors + !important neutralise them until
   the views themselves are rewritten. Delete a rule once its view is redone.
   ========================================================================== */

/* primary action */
.btn-info {
  background: linear-gradient(135deg, var(--ae-green-600), var(--ae-green-500)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,107,118,0.24);
}
.btn-info:hover {
  background: linear-gradient(135deg, var(--ae-green-700), var(--ae-green-600)) !important;
  box-shadow: 0 6px 18px rgba(0,107,118,0.32);
}

/* export / success green (#0b8203, #093) */
.btn[style*="#0b8203"], .btn[style*="#093"], [style*="background-color:#093"] {
  background: linear-gradient(135deg, var(--ae-green-700), var(--ae-green-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* destructive red (#f30303, #ED060A) */
.btn[style*="#f30303"], .btn[style*="#ED060A"] {
  background: var(--ae-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* pending amber (#F79103) */
.btn[style*="#F79103"], [style*="background-color:#F79103"] {
  background: var(--ae-warning) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* legacy teal chrome (#00545d) and tan (#cca15b) */
/* removed: it repainted TEXT colour declarations as backgrounds — see form headings below */
.btn[style*="#cca15b"] {
  background: var(--ae-green-500) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* grey panel fills */
[style*="background-color:#f0f0f0"],
[style*="background-color: #f1f1f1"],
[style*="background-color:#f1f1f1"] {
  background-color: transparent !important;
}

/* icon-font glyphs inside brand buttons stay white */
.btn i[style*="color"] { color: #fff !important; }

/* status pills rendered as inline-styled spans */
[style*="padding:6px 20px"] {
  border-radius: var(--ae-r-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-block;
  padding: 5px 13px !important;
  color: #fff !important;
}

/* select2 — used across the list pages */
.select2-container--default .select2-selection--single,
.select2-selection--single {
  height: auto !important;
  padding: 7px 10px !important;
  border: 1px solid var(--ae-line) !important;
  border-radius: var(--ae-r-sm) !important;
  background: rgba(255,255,255,0.85) !important;
}
.select2-dropdown {
  border-color: var(--ae-line) !important;
  border-radius: var(--ae-r) !important;
  overflow: hidden;
  box-shadow: var(--ae-shadow);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ae-green-600) !important;
}

/* toolbar row on list pages */
.card-body > .row:first-child .btn { margin-left: 8px; }

/* ==========================================================================
   AUTH — sign in / reset
   ========================================================================== */

body.ae-auth {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background: var(--ae-canvas);
  background-image:
    radial-gradient(760px 520px at 12% 8%,   rgba(15, 137, 150, 0.22), transparent 60%),
    radial-gradient(680px 480px at 88% 22%,  rgba(43, 167, 180, 0.20), transparent 62%),
    radial-gradient(900px 620px at 50% 108%, rgba(0, 107, 118, 0.16),  transparent 64%);
  background-attachment: fixed;
}

.ae-auth__wrap {
  width: 100%;
  max-width: 408px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ae-auth__card {
  width: 100%;
  padding: 34px 32px 30px;
  border-radius: 28px;
  animation: ae-rise 380ms var(--ae-ease) both;
}

/* brand */
.ae-auth__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 2;
}
.ae-auth__mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 107, 118, 0.3);
}
.ae-auth__name {
  font-size: 14px; font-weight: 700; color: var(--ae-ink);
  letter-spacing: 0.03em; line-height: 1.2;
}
.ae-auth__sub { font-size: 11px; color: var(--ae-muted); letter-spacing: 0.02em; }

.ae-auth__form { position: relative; z-index: 2; }

.ae-auth__title {
  font-size: 23px; font-weight: 650; color: var(--ae-ink);
  letter-spacing: -0.028em; margin: 0 0 5px;
}
.ae-auth__lede {
  font-size: 13.5px; color: var(--ae-muted); margin: 0 0 24px; line-height: 1.5;
}

/* fields */
.ae-field { margin-bottom: 16px; }
.ae-field label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--ae-body);
  margin-bottom: 7px; letter-spacing: -0.004em;
}
.ae-field .form-control {
  width: 100%;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--ae-line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ae-ink);
}
.ae-field .form-control:focus {
  background: #fff;
  border-color: var(--ae-green-400);
  box-shadow: var(--ae-ring);
  outline: none;
}
.ae-field__wrap { position: relative; }
.ae-field__wrap .form-control { padding-right: 44px; }
.ae-field__reveal {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--ae-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--ae-fast) var(--ae-ease), background var(--ae-fast) var(--ae-ease);
}
.ae-field__reveal:hover { color: var(--ae-green-700); background: var(--ae-green-50); }
.ae-field__reveal.is-on { color: var(--ae-green-600); }

/* submit */
.ae-auth__submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: 12px;
}

/* secondary link */
.ae-auth__link {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--ae-green-700);
  font-size: 13px;
  font-weight: 550;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--ae-fast) var(--ae-ease), color var(--ae-fast) var(--ae-ease);
}
.ae-auth__link:hover { background: var(--ae-green-50); color: var(--ae-green-800); }

/* alert */
.ae-auth__alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: #fbeae9;
  color: #9b302a;
  font-size: 13px;
  line-height: 1.45;
  border-left: 3px solid var(--ae-danger);
  position: relative; z-index: 2;
  animation: ae-rise 240ms var(--ae-ease) both;
}
.ae-auth__alert svg { flex: 0 0 16px; margin-top: 1px; }

/* success variant, e.g. after a completed password reset */
.ae-auth__alert.is-ok {
  background: var(--ae-green-50, rgba(0, 132, 138, 0.08));
  color: var(--ae-green-800, #00545d);
  border-left-color: var(--ae-green-700, #00646b);
}

.ae-auth__foot {
  font-size: 11.5px;
  color: var(--ae-muted);
  margin: 0;
  text-align: center;
  letter-spacing: 0.01em;
}

@media (max-width: 420px) {
  .ae-auth__card { padding: 28px 22px 24px; border-radius: 22px; }
  .ae-auth__title { font-size: 21px; }
}

/* The auth page loads without Bootstrap, so it has no global box-sizing reset. */
body.ae-auth *, body.ae-auth *::before, body.ae-auth *::after { box-sizing: border-box; }
body.ae-auth .form-control { display: block; width: 100%; max-width: 100%; font-family: inherit; }
body.ae-auth .btn { font-family: inherit; }

/* ==========================================================================
   BRAND MARKS — real Arab Express logo
   ========================================================================== */

.ae-brand__mark-img {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.ae-brand__full {
  height: 30px;
  width: auto;
  max-width: 158px;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--ae-fast) var(--ae-ease),
              max-width var(--ae-med) var(--ae-ease);
}
/* expanded: full lockup only. collapsed: mark only. */
.ae-brand__mark-img { display: none; }
body.ae-rail-collapsed .ae-brand__mark-img { display: block; }
body.ae-rail-collapsed .ae-brand__full { max-width: 0; opacity: 0; }
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-brand__mark-img { display: none; }
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-brand__full { max-width: 158px; opacity: 1; }
body.ae-no-peek .left-sidebar:hover .ae-brand__mark-img { display: block !important; }
body.ae-no-peek .left-sidebar:hover .ae-brand__full { max-width: 0 !important; opacity: 0 !important; }

.ae-brand__link { gap: 0; }

/* login lockup */
.ae-auth__logo {
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.ae-auth__brand { display: block; }

/* ==========================================================================
   SINGLE SCROLLBAR
   The page, the wrapper and the rail were each able to scroll. Only the rail's
   inner list should.
   ========================================================================== */

html, body { overflow-x: hidden; }
#main-wrapper { overflow: visible; }
.left-sidebar { overflow: hidden; }
.left-sidebar .sidebar-nav,
.left-sidebar .sidebar-nav > ul { overflow: visible !important; height: auto !important; }

/* one scrollable element in the rail, styled as a hairline */
.left-sidebar .scroll-sidebar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.left-sidebar:hover .scroll-sidebar { scrollbar-color: rgba(15,137,150,0.32) transparent; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar { width: 5px; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-track { background: transparent; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.left-sidebar:hover .scroll-sidebar::-webkit-scrollbar-thumb { background: rgba(15,137,150,0.32); }

/* kill every perfect-scrollbar rail, wherever it mounted */
.ps__rail-x, .ps__rail-y, .ps__thumb-x, .ps__thumb-y,
.slimScrollBar, .slimScrollRail { display: none !important; }

/* ==========================================================================
   PAGE SCROLL — only the rail scrolls unless content is genuinely taller
   The wrapper was 100vh tall with the footer *after* it, so every page
   overflowed by exactly the footer's height and showed a second scrollbar.
   ========================================================================== */

#main-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-wrapper {
  min-height: 0;        /* was 100vh — that plus the footer caused the overflow */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.page-wrapper > .container-fluid { flex: 1 1 auto; }
.footer { flex: 0 0 auto; margin-left: calc(var(--ae-rail-w) + var(--ae-gap) * 2); transition: margin-left var(--ae-med) var(--ae-ease); }
body.ae-rail-collapsed .footer { margin-left: calc(var(--ae-rail-w-sm) + var(--ae-gap) * 2); }
@media (max-width: 1024px) { .footer { margin-left: 0; } }

/* ---------- Brand marks: a touch larger, better optical balance ---------- */
.ae-brand__full { height: 34px; max-width: 168px; }
.ae-brand__mark-img { width: 38px; height: 38px; flex: 0 0 38px; }
.ae-brand { padding: 14px 12px 13px 16px; }
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-brand__full { max-width: 168px; }
.ae-auth__logo { height: 52px; }

/* Trim the fixed vertical padding that pushed content 6px past the viewport */
.page-wrapper > .container-fluid { padding: 0 10px 20px; }
.footer { padding: 12px 0 16px; }

/* ==========================================================================
   RAIL v3 — hover to peek, click to pin, shrink button only when expanded
   ========================================================================== */

/* Collapsed and untouched: a clean icon strip, no controls. */
body.ae-rail-collapsed .ae-rail-toggle { display: none !important; }

/* Peeking (hovering a collapsed rail) or expanded: the control appears. */
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-rail-toggle { display: grid !important; }
body:not(.ae-rail-collapsed) .ae-rail-toggle { display: grid !important; }

/* The control is a pin while peeking, a shrink while pinned open. */
.ae-rail-toggle .ae-ico-shrink { display: block; }
.ae-rail-toggle .ae-ico-pin    { display: none; }
body.ae-rail-collapsed .ae-rail-toggle .ae-ico-shrink { display: none; }
body.ae-rail-collapsed .ae-rail-toggle .ae-ico-pin    { display: block; }

/* while peeking the whole rail is clickable to pin — show that */
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) { cursor: default; }
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-rail-toggle {
  background: var(--ae-green-50);
  border-color: var(--ae-green-200);
  color: var(--ae-green-700);
}

/* Submenus must work while peeking — previously forced shut when collapsed. */
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .sidebar-nav li.ae-open > ul.collapse {
  max-height: 420px !important;
}

/* A peeked rail floats above the page rather than pushing it */
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) {
  box-shadow:
      0 1px 1px rgba(2,43,48,0.04),
      0 12px 32px rgba(2,43,48,0.10),
      0 40px 80px rgba(2,43,48,0.14);
  z-index: 80;
}

/* hint strip: subtle affordance that the rail can be clicked to pin */
.ae-pin-hint {
  display: none;
  padding: 8px 14px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ae-muted);
  opacity: 0.7;
  white-space: nowrap;
  text-align: center;
}
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-pin-hint { display: block; }

/* restore the icon/label gap while peeking (it is zeroed for the icon strip) */
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .sidebar-nav > ul > li > a {
  gap: 11px !important;
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  margin: 2px 10px !important;
}
body.ae-rail-collapsed .left-sidebar:hover:not(.ae-no-peek) .ae-ico { flex: 0 0 18px; }

/* ==========================================================================
   ACTIVE STATE — the filled pill marks the CURRENT PAGE only
   An open accordion parent is a disclosure state, not a location. It gets a
   quiet tint so you can see what's open without competing with where you are.
   ========================================================================== */

/* never let a disclosure trigger look like the current page */
.ae-rail .sidebar-nav > ul > li > a.has-arrow.active,
.ae-rail .sidebar-nav > ul > li.ae-open > a.has-arrow {
  background: transparent;
  color: var(--ae-body);
  box-shadow: none;
  font-weight: 520;
}
.ae-rail .sidebar-nav > ul > li.ae-open > a.has-arrow {
  background: rgba(15, 137, 150, 0.07);
  color: var(--ae-green-800);
}
.ae-rail .sidebar-nav > ul > li.ae-open > a.has-arrow .ae-ico { color: var(--ae-green-600); }

/* a parent whose open submenu holds the current page: a marker, not a fill */
.ae-rail .sidebar-nav > ul > li.ae-has-current > a.has-arrow {
  background: rgba(15, 137, 150, 0.09);
  color: var(--ae-green-800);
  font-weight: 600;
}
.ae-rail .sidebar-nav > ul > li.ae-has-current > a.has-arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 17px;
  margin-top: -8.5px;
  border-radius: 0 3px 3px 0;
  background: var(--ae-green-500);
}

/* the filled pill: only a leaf link that IS the current page */
.ae-rail .sidebar-nav > ul > li > a:not(.has-arrow).active {
  background: linear-gradient(135deg,
      var(--ae-green-600) 0%, var(--ae-green-500) 55%, var(--ae-green-400) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow:
      0 2px 6px rgba(0,107,118,0.28),
      0 8px 20px rgba(0,107,118,0.22),
      inset 0 1px 0 rgba(255,255,255,0.4);
}
.ae-rail .sidebar-nav > ul > li > a:not(.has-arrow).active .ae-ico { color: #fff; }

/* submenu leaf that is the current page */
.ae-rail .sidebar-nav ul.collapse li a.active {
  background: var(--ae-green-100);
  color: var(--ae-green-800);
  font-weight: 600;
}
.ae-rail .sidebar-nav ul.collapse li a.active::before { opacity: 0.9; }

/* ==========================================================================
   DASHBOARD — headline figures + document expiry meters
   Status ramp validated against a white card surface:
     critical #b3261e · serious #d97706 · upcoming #0898a8
   (adjacent ΔE 16.8 deutan / 18.7 normal, all ≥3:1 contrast)
   Only genuine urgency is warm; the 60-day tier is brand teal, because a third
   warm step cannot be told apart from amber by anyone, CVD or not.
   ========================================================================== */

:root {
  --ae-crit:      #b3261e;
  --ae-crit-bg:   #fdeceb;
  --ae-serious:   #d97706;
  --ae-serious-bg:#fdf3e3;
  --ae-upcoming:  #0898a8;
  --ae-upcoming-bg:#e3f6f8;
  --ae-track:     #eef3f4;
}

/* ---------- Headline row ---------- */

.ae-hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.ae-hero {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  box-shadow: var(--ae-shadow);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--ae-med) var(--ae-ease), box-shadow var(--ae-med) var(--ae-ease);
}
.ae-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 24%, rgba(255,255,255,.95) 76%, transparent);
}
.ae-hero:hover { transform: translateY(-2px); box-shadow: var(--ae-shadow-lg); text-decoration: none; }

.ae-hero__top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ae-hero__ico {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--ae-green-100); color: var(--ae-green-700);
}
.ae-hero__ico .ae-ico { width: 16px; height: 16px; color: inherit; }
.ae-hero__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ae-muted);
}

/* hero figure: proportional figures, not tabular — tabular looks loose this big */
.ae-hero__value {
  font-size: 46px; font-weight: 650; line-height: 1;
  color: var(--ae-ink); letter-spacing: -0.035em;
  font-variant-numeric: proportional-nums;
}
.ae-hero__meta { font-size: 13px; color: var(--ae-muted); margin-top: 6px; }

/* enquiry pipeline: part-to-whole, so a stacked bar */
.ae-hero__bar {
  display: flex; height: 7px; margin-top: 16px;
  border-radius: 99px; overflow: hidden; background: var(--ae-track);
  gap: 2px;                      /* 2px surface gap between fills */
}
.ae-seg { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.ae-seg--quote   { background: var(--ae-green-300); }
.ae-seg--confirm { background: var(--ae-green-500); }
.ae-seg--done    { background: var(--ae-green-700); }

.ae-hero__legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 10px; font-size: 11.5px; color: var(--ae-muted);
}
.ae-hero__legend span { display: inline-flex; align-items: center; gap: 5px; }

.ae-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
.ae-dot--quote   { background: var(--ae-green-300); }
.ae-dot--confirm { background: var(--ae-green-500); }
.ae-dot--done    { background: var(--ae-green-700); }
.ae-dot--expired { background: var(--ae-crit); }
.ae-dot--due30   { background: var(--ae-serious); }
.ae-dot--due60   { background: var(--ae-upcoming); }

/* ---------- Section head ---------- */

.ae-section-head {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin: 0 2px 14px;
}
.ae-section-title {
  font-size: 15px; font-weight: 650; color: var(--ae-ink);
  letter-spacing: -0.015em; margin: 0;
}
.ae-section-note { font-size: 12.5px; color: var(--ae-muted); margin: 0; display: flex; align-items: center; gap: 8px; }
.ae-section-sep { opacity: 0.5; }

.ae-flag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ae-flag--critical { color: var(--ae-crit); }
.ae-flag--clear    { color: var(--ae-green-700); }

/* ---------- Expiry meters ---------- */

.ae-meters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}

.ae-meter {
  display: flex; flex-direction: column;
  padding: 17px 19px 15px;
  border-radius: 18px;
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  box-shadow: var(--ae-shadow);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform var(--ae-med) var(--ae-ease), box-shadow var(--ae-med) var(--ae-ease);
}
.ae-meter:hover { transform: translateY(-2px); box-shadow: var(--ae-shadow-lg); text-decoration: none; }

/* severity reads on the card itself, not only in the bar */
.ae-meter::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
.ae-meter--critical::after { background: var(--ae-crit); }
.ae-meter--serious::after  { background: var(--ae-serious); }

.ae-meter__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ae-meter__ico {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--ae-green-100); color: var(--ae-green-700);
}
.ae-meter--critical .ae-meter__ico { background: var(--ae-crit-bg);     color: var(--ae-crit); }
.ae-meter--serious  .ae-meter__ico { background: var(--ae-serious-bg);  color: #a8590a; }
.ae-meter__ico .ae-ico { width: 15px; height: 15px; color: inherit; }

.ae-meter__label {
  font-size: 13.5px; font-weight: 600; color: var(--ae-ink);
  flex: 1 1 auto; letter-spacing: -0.008em;
}

/* status never travels by colour alone — chip carries an icon or a word */
.ae-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 650; padding: 3px 9px;
  border-radius: 99px; white-space: nowrap; flex: 0 0 auto;
}
.ae-chip--critical { background: var(--ae-crit-bg);    color: var(--ae-crit); }
.ae-chip--serious  { background: var(--ae-serious-bg); color: #a8590a; }
.ae-chip--clear    { background: var(--ae-green-100);  color: var(--ae-green-700); }

.ae-meter__figures { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.ae-meter__value {
  font-size: 30px; font-weight: 650; line-height: 1;
  color: var(--ae-ink); letter-spacing: -0.03em;
}
.ae-meter--critical .ae-meter__value { color: var(--ae-crit); }
.ae-meter__of { font-size: 12px; color: var(--ae-muted); }

/* the meter: filled portion carries severity, track is a light step of the ramp */
.ae-meter__track {
  display: flex; height: 8px;
  background: var(--ae-track);
  border-radius: 99px; overflow: hidden;
  gap: 2px;
  margin-bottom: 11px;
}
.ae-bar { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.ae-bar--expired { background: var(--ae-crit); }
.ae-bar--due30   { background: var(--ae-serious); }
.ae-bar--due60   { background: var(--ae-upcoming); }

.ae-meter__key {
  display: flex; flex-wrap: wrap; gap: 3px 13px;
  font-size: 11.5px; color: var(--ae-body);
}
.ae-meter__key span { display: inline-flex; align-items: center; gap: 5px; }
.ae-meter__key .is-zero { color: var(--ae-muted); opacity: 0.55; }

@media (max-width: 560px) {
  .ae-hero__value { font-size: 38px; }
  .ae-meters, .ae-hero-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DASHBOARD SPACING — even columns, consistent rhythm
   `auto-fill minmax(310px)` gave 4 columns for 6 tiles, so the second row was
   half empty. Six tiles want 3 or 2 across, never 4.
   ========================================================================== */

.ae-hero-row,
.ae-meters { gap: 16px; }

/* Heroes: two equal columns, content spread so neither card has a void */
.ae-hero-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 30px;
}
.ae-hero {
  justify-content: space-between;
  min-height: 176px;
  padding: 22px 24px;
}
.ae-hero__value { margin-top: 2px; }
.ae-hero__meta  { margin-top: 5px; }
.ae-hero__bar   { margin-top: auto; }          /* pin the pipeline to the bottom */
.ae-hero__legend { margin-top: 9px; }

/* Meters: explicit column counts so rows always fill evenly */
.ae-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1480px) { .ae-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .ae-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  {
  .ae-hero-row { grid-template-columns: 1fr; }
  .ae-hero { min-height: 0; }
}
@media (max-width: 620px)  { .ae-meters { grid-template-columns: 1fr; } }

/* Section rhythm */
.ae-section-head { margin: 0 2px 16px; }
.ae-meters { margin-bottom: 30px; }

/* the legacy "Other Services" card picks up the same rhythm */
.page-wrapper .container-fluid > .row > [class*="col-"] > .card,
.page-wrapper .container-fluid > .card { margin-bottom: 20px; }
/* the dashboard's last card sits flush against the footer */
.page-wrapper .container-fluid > .row:last-of-type > [class*="col-"] > .card:only-child { margin-bottom: 20px; }

/* equalise the meter internals so cards line up row to row */
.ae-meter { min-height: 168px; justify-content: space-between; }
.ae-meter__head    { margin-bottom: 0; }
.ae-meter__figures { margin: 14px 0 12px; }
.ae-meter__track   { margin-bottom: 12px; }
.ae-meter__key     { margin-top: auto; }

/* ==========================================================================
   ONE SCROLLBAR, ALWAYS
   The bundled perfect-scrollbar is an older build using ps__scrollbar-y /
   ps__scrollbar-y-rail (not the modern ps__rail-y / ps__thumb-y), so its grey
   thumb kept drawing beside the native teal one. Cover BOTH naming generations
   plus slimScroll and mCustomScrollbar, everywhere — not just the rail.
   ========================================================================== */

[class*="ps__scrollbar"],
[class*="ps__rail"],
[class*="ps__thumb"],
.ps__scrollbar-x, .ps__scrollbar-y,
.ps__scrollbar-x-rail, .ps__scrollbar-y-rail,
.ps__rail-x, .ps__rail-y, .ps__thumb-x, .ps__thumb-y,
.slimScrollBar, .slimScrollRail,
.mCSB_scrollTools {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* perfect-scrollbar pads the host to make room for its rail — reclaim it */
.left-sidebar .scroll-sidebar.ps { padding-right: 0 !important; }

/* the native scrollbar is the only one: hairline, teal, visible on hover */
.left-sidebar .scroll-sidebar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--ae-med) var(--ae-ease);
}
.left-sidebar:hover .scroll-sidebar { scrollbar-color: rgba(15,137,150,0.34) transparent; }

.left-sidebar .scroll-sidebar::-webkit-scrollbar        { width: 6px; background: transparent; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-track  { background: transparent; border: 0; box-shadow: none; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-corner { background: transparent; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
  border: 1px solid transparent;
  background-clip: content-box;
  transition: background var(--ae-fast) var(--ae-ease);
}
.left-sidebar:hover .scroll-sidebar::-webkit-scrollbar-thumb {
  background: rgba(15,137,150,0.34);
  background-clip: content-box;
}
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(15,137,150,0.55);
  background-clip: content-box;
}

/* ==========================================================================
   FORM SECTION HEADINGS
   The legacy markup is:
     <h2 style="font-size:20px; border-bottom:1px solid #ccc; color:#00545d; ...">
   Too large, too heavy, and competing with the page title. A section heading
   inside a form is a signpost, not a headline — small, quiet and uppercase
   reads faster and stops fighting the field labels.
   ========================================================================== */

.page-wrapper h2[style*="font-size: 20px"],
.page-wrapper h2[style*="#00545d"],
.ae-form-section {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  color: var(--ae-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ae-line) !important;
  padding: 0 0 9px !important;
  margin: 34px 0 20px !important;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.4 !important;
}
.page-wrapper h2[style*="font-size: 20px"]:first-child,
.page-wrapper h2[style*="#00545d"]:first-child { margin-top: 4px !important; }

/* a small brand tick so the section still reads as a divider, not a stray label */
.page-wrapper h2[style*="font-size: 20px"]::before,
.page-wrapper h2[style*="#00545d"]::before,
.ae-form-section::before {
  content: "";
  width: 3px; height: 12px;
  border-radius: 2px;
  background: var(--ae-green-500);
  flex: 0 0 3px;
}

/* the stray 6px teal divider bars the template used between blocks */
.page-wrapper [style*="height: 6px"][style*="#00545d"] {
  height: 1px !important;
  width: 100% !important;
  background: var(--ae-line) !important;
  margin: 26px 0 !important;
}

/* inline text that was simply brand-coloured stays text, not a block */
.page-wrapper [style*="color: #00545d"],
.page-wrapper [style*="color:#00545d"] { color: var(--ae-green-700) !important; background: transparent !important; }

/* ---------- File inputs: the default control is unreadable at this density ---------- */

.page-wrapper input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--ae-body);
  padding: 9px 12px;
  background: rgba(255,255,255,0.75);
  border: 1px dashed var(--ae-line);
  border-radius: var(--ae-r-sm);
  cursor: pointer;
  transition: border-color var(--ae-fast) var(--ae-ease), background var(--ae-fast) var(--ae-ease);
}
.page-wrapper input[type="file"]:hover {
  border-color: var(--ae-green-300);
  background: var(--ae-green-50);
}
.page-wrapper input[type="file"]:focus {
  outline: none;
  border-color: var(--ae-green-400);
  box-shadow: var(--ae-ring);
}
.page-wrapper input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  margin-right: 12px;
  padding: 6px 13px;
  border: 0;
  border-radius: 7px;
  background: var(--ae-green-100);
  color: var(--ae-green-700);
  cursor: pointer;
  transition: background var(--ae-fast) var(--ae-ease);
}
.page-wrapper input[type="file"]::file-selector-button:hover {
  background: var(--ae-green-200);
}

/* required marker */
.page-wrapper label span[style*="color: red"],
.page-wrapper label > span.text-danger { color: var(--ae-danger) !important; font-weight: 600; }

/* ==========================================================================
   QUOTATIONS — line item editor, totals, repeatable lists
   ========================================================================== */

.ae-quote-form .card { margin-bottom: 16px; }
.ae-quote-form .card-body { padding: 20px 22px 22px; }

/* field grid */
.ae-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 4px;
}
.ae-grid + .ae-grid { margin-top: 14px; }
.ae-span-2 { grid-column: span 2; }
@media (max-width: 900px) { .ae-grid { grid-template-columns: 1fr; } .ae-span-2 { grid-column: auto; } }

.ae-quote-form .ae-field { margin-bottom: 0; }
.ae-quote-form .ae-field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ae-body); margin-bottom: 6px;
}
.ae-quote-form .req { color: var(--ae-danger); }
.ae-muted { color: var(--ae-muted); font-weight: 400; }

/* ---------- items table ---------- */

.ae-items {
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r);
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.ae-items__head,
.ae-item-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 92px 130px 124px 38px;
  gap: 10px;
  align-items: center;
}
.ae-items__head {
  padding: 10px 14px;
  background: rgba(240,250,251,0.9);
  border-bottom: 1px solid var(--ae-line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ae-muted);
}
.ae-items__head .num, .ae-item-row .num { text-align: right; }

.ae-item-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ae-line);
  transition: background var(--ae-fast) var(--ae-ease);
}
.ae-item-row:last-child { border-bottom: 0; }
.ae-item-row:hover { background: rgba(240,250,251,0.6); }

.ae-item-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ae-item-title { font-weight: 550; }
.ae-item-desc  { font-size: 12.5px; }
.ae-item-row .form-control { padding: 8px 11px; font-size: 13.5px; }
.ae-item-row input.num { text-align: right; font-variant-numeric: tabular-nums; }

.ae-item-amount {
  font-weight: 650; color: var(--ae-ink);
  font-variant-numeric: tabular-nums; font-size: 14px;
}

.ae-item-remove {
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ae-muted);
  display: grid; place-items: center; cursor: pointer;
  transition: all var(--ae-fast) var(--ae-ease);
}
.ae-item-remove:hover { background: #fdeceb; color: var(--ae-crit); }

.ae-add-row { margin-top: 12px; }
.ae-add-row svg { margin-right: 5px; vertical-align: -2px; }

@media (max-width: 760px) {
  .ae-items__head { display: none; }
  .ae-item-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--ae-line);
  }
  .ae-item-main { grid-column: 1 / -1; }
  .ae-item-amount { text-align: right; align-self: center; }
}

/* ---------- totals ---------- */

.ae-totals { display: flex; justify-content: flex-end; margin-top: 18px; }
.ae-totals__box {
  width: 100%; max-width: 380px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r);
  padding: 6px 16px;
}
.ae-total-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--ae-line);
  font-size: 13.5px; color: var(--ae-body);
}
.ae-total-row:last-child { border-bottom: 0; }
.ae-total-row b { font-variant-numeric: tabular-nums; color: var(--ae-ink); font-weight: 650; }
.ae-total-row.is-off { opacity: 0.45; }
.ae-total-row.is-off input { pointer-events: none; }

.ae-total-row--grand {
  padding: 14px 0 12px;
  font-size: 15px; font-weight: 650; color: var(--ae-ink);
}
.ae-total-row--grand b { font-size: 21px; letter-spacing: -0.02em; color: var(--ae-green-700); }
.ae-total-row--grand small { font-size: 12px; font-weight: 600; color: var(--ae-muted); }

.ae-total-input { display: flex; align-items: center; gap: 10px; }
.ae-total-input .form-control { width: 96px; padding: 5px 9px; font-size: 13px; text-align: right; }
.ae-mini-select, .ae-mini-input {
  border: 1px solid var(--ae-line); border-radius: 7px;
  padding: 3px 6px; font-size: 12px; margin-left: 6px;
  background: #fff; color: var(--ae-body);
}
.ae-mini-input { width: 54px; text-align: right; }

/* ---------- repeatable lists ---------- */

.ae-list { display: flex; flex-direction: column; gap: 8px; }
.ae-list-row { display: flex; gap: 8px; align-items: center; }
.ae-list-row .form-control { flex: 1 1 auto; }

/* ---------- sticky action bar ---------- */

.ae-form-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px;
  margin: 4px 0 0;
  background: rgba(255,255,255,0.75);
  -webkit-backdrop-filter: var(--ae-lg-blur);
  backdrop-filter: var(--ae-lg-blur);
  border: 1px solid var(--ae-lg-rim);
  border-radius: var(--ae-r);
  box-shadow: var(--ae-shadow);
}

/* ---------- quotation list, show, shared table bits ---------- */

.ae-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ae-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.ae-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ae-muted); }
.ae-search .form-control { padding-left: 36px; }

.ae-filter-chips { display: flex; gap: 6px; }
.ae-chip-link {
  padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 550;
  color: var(--ae-body); border: 1px solid var(--ae-line); background: rgba(255,255,255,.7);
  text-decoration: none; transition: all var(--ae-fast) var(--ae-ease);
}
.ae-chip-link:hover { border-color: var(--ae-green-300); color: var(--ae-green-700); text-decoration: none; }
.ae-chip-link.on { background: var(--ae-green-600); border-color: var(--ae-green-600); color: #fff; }

.ae-table td { vertical-align: middle; }
.ae-strong { display: block; font-weight: 600; color: var(--ae-ink); }
.ae-sub { display: block; font-size: 12px; color: var(--ae-muted); margin-top: 2px; }
.ae-num { font-variant-numeric: tabular-nums; }
.ae-code { font-weight: 650; color: var(--ae-green-700); font-variant-numeric: tabular-nums; }
.ae-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ae-row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.ae-inline { display: inline; margin: 0; }
.ae-act {
  border: 0; background: transparent; padding: 5px 9px; border-radius: 7px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ae-body);
  cursor: pointer; text-decoration: none; transition: all var(--ae-fast) var(--ae-ease);
}
.ae-act:hover { background: var(--ae-green-50); color: var(--ae-green-700); text-decoration: none; }
.ae-act--danger:hover { background: #fdeceb; color: var(--ae-crit); }

.ae-pagination { margin-top: 16px; display: flex; justify-content: flex-end; }

.ae-empty { text-align: center; padding: 54px 20px 46px; }
.ae-empty__icon {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--ae-green-100); color: var(--ae-green-600);
}
.ae-empty h3 { font-size: 15.5px; font-weight: 650; color: var(--ae-ink); margin: 0 0 5px; }
.ae-empty p  { font-size: 13.5px; color: var(--ae-muted); margin: 0 0 16px; }

/* show page */
.ae-quote-actions .card-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px; }
.ae-email-form { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.ae-email-form .form-control { width: 220px; padding: 7px 11px; font-size: 13px; }

.ae-quote-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.ae-quote-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ae-muted); font-weight: 700; margin-bottom: 4px; }
.ae-quote-party { font-size: 17px; font-weight: 650; color: var(--ae-ink); }
.ae-quote-meta { text-align: right; font-size: 13px; }
.ae-quote-meta div { margin-bottom: 4px; }
.ae-quote-meta span { color: var(--ae-muted); margin-right: 10px; }
.ae-quote-meta b { color: var(--ae-ink); font-variant-numeric: tabular-nums; }

.ae-quote-subject {
  background: var(--ae-green-50); border-left: 3px solid var(--ae-green-500);
  padding: 10px 14px; border-radius: 0 10px 10px 0; font-weight: 600;
  color: var(--ae-ink); margin-bottom: 18px;
}
.ae-quote-items { margin-bottom: 4px; }
.ae-quote-text { font-size: 13.5px; color: var(--ae-body); white-space: pre-line; margin: 0; }
.ae-quote-list { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ae-body); }
.ae-quote-list li { margin-bottom: 5px; }

.ae-revisions { display: flex; flex-direction: column; gap: 7px; }
.ae-revision {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border: 1px solid var(--ae-line); border-radius: var(--ae-r-sm);
  text-decoration: none; color: var(--ae-body); font-size: 13.5px;
  transition: all var(--ae-fast) var(--ae-ease);
}
.ae-revision:hover { border-color: var(--ae-green-300); background: var(--ae-green-50); text-decoration: none; }
.ae-revision.on { border-color: var(--ae-green-400); background: var(--ae-green-50); }
.ae-revision b { color: var(--ae-ink); min-width: 32px; }
.ae-revision .ae-num { margin-left: auto; font-weight: 600; color: var(--ae-ink); }

/* ---------- per-line VAT toggle ---------- */

.ae-items__head, .ae-item-row {
  grid-template-columns: minmax(0,1fr) 84px 118px 54px 116px 38px;
}
.ae-items__head .vat { text-align: center; }

.ae-vat-toggle {
  display: grid; place-items: center; margin: 0; cursor: pointer;
}
.ae-vat-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ae-vat-toggle span {
  width: 34px; height: 20px; border-radius: 99px;
  background: var(--ae-line); position: relative;
  transition: background var(--ae-fast) var(--ae-ease);
}
.ae-vat-toggle span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(2,43,48,.25);
  transition: transform var(--ae-med) var(--ae-ease);
}
.ae-vat-toggle input:checked + span { background: var(--ae-green-500); }
.ae-vat-toggle input:checked + span::after { transform: translateX(14px); }
.ae-vat-toggle input:focus-visible + span { box-shadow: var(--ae-ring); }

/* an exempt line reads as deliberately different, not broken */
.ae-item-row.is-exempt .ae-item-amount { color: var(--ae-body); }
.ae-item-row.is-exempt::after {
  content: "no VAT";
  position: absolute; right: 52px; bottom: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ae-muted); opacity: .75;
}
.ae-item-row { position: relative; }

.ae-vat-note { display: block; font-size: 10.5px; color: var(--ae-muted); font-weight: 500; margin-top: 2px; }

@media (max-width: 760px) {
  .ae-items__head, .ae-item-row { grid-template-columns: 1fr 1fr; }
  .ae-vat-toggle { justify-self: start; }
  .ae-item-row.is-exempt::after { position: static; display: block; margin-top: 4px; }
}

.ae-vat-yes { font-size: 11.5px; font-weight: 650; color: var(--ae-green-700); }
.ae-vat-no  { color: var(--ae-muted); }

/* ==========================================================================
   CHOSEN FILES — preview + remove, under every file input
   ========================================================================== */

.ae-files { display: none; }
.ae-files.has-files {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}

.ae-file {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 7px;
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-sm);
  background: rgba(255,255,255,0.8);
  animation: ae-rise 180ms var(--ae-ease) both;
}

.ae-file__thumb {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 7px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--ae-green-100); color: var(--ae-green-700);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.ae-file__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-file__thumb--pdf { background: #fdeceb; color: var(--ae-crit); }
.ae-file__thumb--doc { background: #e8f2f9; color: #2a6d99; }

.ae-file__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ae-file__name {
  font-size: 12.8px; font-weight: 550; color: var(--ae-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ae-file__size { font-size: 11px; color: var(--ae-muted); margin-top: 1px; }

.ae-file__remove {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; background: transparent;
  color: var(--ae-muted); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 7px; flex: 0 0 auto;
  transition: all var(--ae-fast) var(--ae-ease);
}
.ae-file__remove:hover { background: #fdeceb; color: var(--ae-crit); border-color: #f6d6d4; }
.ae-file__remove:active { transform: scale(0.96); }

@media (max-width: 520px) {
  .ae-file__remove span { display: none; }
  .ae-file__remove { padding: 6px; }
}

/* ---------- filter toolbar (services listing) ---------- */

.ae-toolbar--filters { margin-bottom: 18px; }

.ae-select-wrap { position: relative; }
.ae-select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 34px 10px 14px;
  min-width: 210px;
  cursor: pointer;
}
.ae-select-wrap svg {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ae-muted); pointer-events: none;
}

.ae-clear-filters {
  border: 1px solid var(--ae-line); background: rgba(255,255,255,.7);
  color: var(--ae-body); font: inherit; font-size: 13px; font-weight: 550;
  padding: 9px 15px; border-radius: 99px; cursor: pointer;
  transition: all var(--ae-fast) var(--ae-ease);
}
.ae-clear-filters:hover { border-color: var(--ae-green-300); color: var(--ae-green-700); background: var(--ae-green-50); }

.ae-filter-count { font-size: 12.5px; color: var(--ae-muted); margin-left: auto; }

#table_data { transition: opacity var(--ae-fast) var(--ae-ease); position: relative; }
#table_data.is-loading { opacity: .45; pointer-events: none; }

/* ---------- existing document link on edit forms ---------- */
.ae-doc-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; margin-bottom: 8px;
  border: 1px solid var(--ae-line); border-radius: var(--ae-r-sm);
  background: rgba(255,255,255,.8);
  font-size: 12.8px; font-weight: 600; color: var(--ae-green-700);
  text-decoration: none; transition: all var(--ae-fast) var(--ae-ease);
}
.ae-doc-link:hover { border-color: var(--ae-green-300); background: var(--ae-green-50); text-decoration: none; }
.ae-replace-note { font-size: 11.5px; color: var(--ae-muted); margin: 0 0 8px; }

/* ── Licence detail: stat tiles ─────────────────────────────────────── */
.ae-stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 20px;
}
@media (min-width: 768px)  { .ae-stat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ae-stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.ae-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 86px;
  padding: 14px 16px;
  border-radius: var(--ae-radius-md, 14px);
  border: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
  background: var(--ae-surface, #fff);
  box-shadow: var(--ae-shadow-sm, 0 1px 2px rgba(16, 40, 44, 0.06));
}
.ae-stat-tile__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ae-muted, #6b7d80);
}
.ae-stat-tile__value {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ae-text, #10282c);
  word-break: break-word;
}

/* ── Licence detail: horizontal document bar ────────────────────────── */
.ae-docbar {
  padding: 16px 18px 18px;
  margin: 0 0 24px;
  border-radius: var(--ae-radius-md, 14px);
  border: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
  background: var(--ae-surface, #fff);
  box-shadow: var(--ae-shadow-sm, 0 1px 2px rgba(16, 40, 44, 0.06));
}
.ae-docbar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ae-docbar__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-text, #10282c);
}
.ae-docbar__count { font-size: 11.5px; color: var(--ae-muted, #6b7d80); }
.ae-docbar__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.ae-doc-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
  background: var(--ae-green-50, rgba(0, 132, 138, 0.05));
}
.ae-doc-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--ae-green-700, #00646b);
  font-size: 15px;
}
.ae-doc-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ae-doc-item__label {
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--ae-text, #10282c);
}
.ae-doc-item__meta { font-size: 11px; color: var(--ae-muted, #6b7d80); }
.ae-doc-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ae-green-300, rgba(0, 132, 138, 0.35));
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ae-green-700, #00646b);
  text-decoration: none;
  transition: background var(--ae-fast) var(--ae-ease), color var(--ae-fast) var(--ae-ease);
}
a.ae-doc-btn:hover, a.ae-doc-btn:focus {
  background: var(--ae-green-700, #00646b);
  border-color: var(--ae-green-700, #00646b);
  color: #fff;
  text-decoration: none;
}
.ae-doc-item.is-empty {
  background: transparent;
  border-style: dashed;
}
.ae-doc-item.is-empty .ae-doc-item__icon { background: rgba(16, 40, 44, 0.04); color: rgba(16, 40, 44, 0.32); }
.ae-doc-item.is-empty .ae-doc-item__label { color: var(--ae-muted, #6b7d80); }
.ae-doc-btn.is-disabled {
  border-color: rgba(16, 40, 44, 0.12);
  background: rgba(16, 40, 44, 0.04);
  color: rgba(16, 40, 44, 0.34);
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .ae-docbar__strip { grid-auto-columns: minmax(200px, 84%); }
  .ae-stat-tiles { gap: 12px; }
}

/* ── Licence detail: page header ────────────────────────────────────── */
.ae-page-head { margin: 0 0 22px; padding-top: 14px; }
.ae-page-head__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.ae-page-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ae-text, #10282c);
}
.ae-page-head__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--ae-green-300, rgba(0, 132, 138, 0.35));
  background: var(--ae-green-50, rgba(0, 132, 138, 0.07));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ae-green-700, #00646b);
}
.ae-page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}
.ae-page-head__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ae-page-head__item dt {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ae-muted, #6b7d80);
}
.ae-page-head__item dd {
  margin: 0;
  font-size: 13px;
  color: var(--ae-text, #10282c);
  overflow-wrap: anywhere;
}

/* ── Card heading used above tables ─────────────────────────────────── */
.ae-card-head {
  margin: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-text, #10282c);
}
.ae-card-head + .card-body { padding-top: 18px; }

/* ── Saving overlay ─────────────────────────────────────────────────── */
.ae-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  opacity: 0;
  transition: opacity 180ms var(--ae-ease, ease);
}
.ae-overlay.is-on { opacity: 1; }
.ae-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ae-overlay__text {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ae-muted, #6b7d80);
}
.ae-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(0, 132, 138, 0.16);
  border-top-color: var(--ae-green-700, #00646b);
  animation: ae-spin 720ms linear infinite;
}
@keyframes ae-spin { to { transform: rotate(360deg); } }

/* ── Saved confirmation popup ───────────────────────────────────────── */
.ae-toasts {
  position: fixed;
  z-index: 3100;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.ae-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 232px;
  max-width: 360px;
  padding: 13px 14px 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--ae-glass-border, rgba(16, 40, 44, 0.12));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 14px 34px rgba(16, 40, 44, 0.16);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 220ms var(--ae-ease, ease), transform 220ms var(--ae-ease, ease);
}
.ae-toast.is-on { opacity: 1; transform: none; }
.ae-toast__tick {
  flex: 0 0 auto;
  position: relative;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--ae-green-700, #00646b);
}
.ae-toast__tick::after {
  content: '';
  position: absolute;
  left: 7px; top: 4px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ae-toast__text {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ae-text, #10282c);
}
.ae-toast__close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--ae-muted, #6b7d80);
  cursor: pointer;
}
.ae-toast__close:hover { color: var(--ae-text, #10282c); }

/* failure variant, e.g. a rejected upload */
.ae-toast.is-error { border-left: 3px solid var(--ae-danger, #c0392b); }
.ae-toast.is-error .ae-toast__tick { background: var(--ae-danger, #c0392b); }
.ae-toast.is-error .ae-toast__tick::after {
  left: 9px; top: 5px;
  width: 2px; height: 11px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 0 #fff;
  transform: none;
  border-radius: 1px;
}
.ae-toast.is-error .ae-toast__tick::before {
  content: '';
  position: absolute;
  left: 9px; bottom: 3px;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
}

@media (max-width: 575.98px) {
  .ae-toasts { right: 12px; left: 12px; bottom: 12px; }
  .ae-toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-overlay, .ae-toast { transition: none; }
  .ae-spinner { animation-duration: 1.6s; }
}

/* ── Background upload progress ─────────────────────────────────────── */
.ae-uploads { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ae-upload {
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
  background: var(--ae-surface, #fff);
}
.ae-upload__top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
}
.ae-upload__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; font-weight: 600;
  color: var(--ae-text, #10282c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ae-upload__size { flex: 0 0 auto; font-size: 11px; color: var(--ae-muted, #6b7d80); }
.ae-upload__x {
  flex: 0 0 auto;
  border: 0; background: none; padding: 0 2px;
  font-size: 16px; line-height: 1;
  color: var(--ae-muted, #6b7d80); cursor: pointer;
}
.ae-upload__x:hover { color: var(--ae-danger, #c0392b); }
.ae-upload__track {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(16, 40, 44, 0.08);
}
.ae-upload__bar {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--ae-green-700, #00646b);
  transition: width 160ms linear;
}
.ae-upload__note { margin-top: 6px; font-size: 11px; color: var(--ae-muted, #6b7d80); }

.ae-upload.is-done .ae-upload__track { display: none; }
.ae-upload.is-done .ae-upload__note { color: var(--ae-green-700, #00646b); font-weight: 600; }
.ae-upload.is-failed { border-color: rgba(192, 57, 43, 0.35); background: #fdf3f2; }
.ae-upload.is-failed .ae-upload__track { display: none; }
.ae-upload.is-failed .ae-upload__note { color: var(--ae-danger, #c0392b); }

/* ── Required-field errors ──────────────────────────────────────────── */
.ae-invalid-note {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ae-danger, #c0392b);
}
.ae-invalid .form-control,
.ae-invalid .select2-selection {
  border-color: var(--ae-danger, #c0392b) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10);
}
.ae-invalid > label { color: var(--ae-danger, #c0392b); }

/* ── Expiry range filter boxes ──────────────────────────────────────── */
/* Colours reuse the status palette already used by the dashboard meters, so a
   red box here means the same thing as a red meter there. Every filled state
   was checked against white text: red 6.54, amber 5.12, green 5.02, slate 7.71
   - all above the 4.5 AA threshold. The label text carries the meaning as well
   as the colour, so the red/green pair is still readable with colour blindness. */
:root {
  --ae-ok:     #15803d;
  --ae-ok-bg:  #e9f6ed;
  --ae-amber:  #a8590a;
  --ae-amber-bg:#fdf3e3;
  --ae-slate:  #44565a;
  --ae-slate-bg:#eef1f2;
}

.ae-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--ae-border, rgba(16, 40, 44, 0.10));
}

.ae-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform var(--ae-fast) var(--ae-ease),
              box-shadow var(--ae-fast) var(--ae-ease);
}
.ae-filter:hover,
.ae-filter:focus {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 40, 44, 0.12);
}
.ae-filter:active { transform: translateY(0); }

.ae-filter__count {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ae-filter__label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.85;
}

/* resting state: tinted, coloured text */
.ae-filter--expired { background: var(--ae-crit-bg);  color: var(--ae-crit);  }
.ae-filter--due30   { background: var(--ae-amber-bg); color: var(--ae-amber); }
.ae-filter--due60   { background: var(--ae-ok-bg);    color: var(--ae-ok);    }
.ae-filter--all     { background: var(--ae-slate-bg); color: var(--ae-slate); }

/* selected: filled, white text */
.ae-filter.is-on { color: #fff; }
.ae-filter--expired.is-on { background: var(--ae-crit);  }
.ae-filter--due30.is-on   { background: var(--ae-amber); }
.ae-filter--due60.is-on   { background: var(--ae-ok);    }
.ae-filter--all.is-on     { background: var(--ae-slate); }
.ae-filter.is-on .ae-filter__label { opacity: 0.92; }

@media (max-width: 991.98px) { .ae-filterbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .ae-filterbar { grid-template-columns: 1fr; } }


/* ===========================================================================
   Tax & VAT module
   ---------------------------------------------------------------------------
   One colour language shared by the filter buckets, the client calendar and
   the status pills, so "amber" means the same thing on every screen.
   =========================================================================== */

:root {
  --ae-indigo:    #5b4bb7;
  --ae-indigo-bg: #eeecfa;
}

/* fifth filter bucket — "Not Done" is a state, not a deadline, so it gets a
   colour of its own rather than borrowing the red/amber/green scale */
.ae-filter--notdone      { background: var(--ae-indigo-bg); color: var(--ae-indigo); }
.ae-filter--notdone.is-on{ background: var(--ae-indigo); }

/* --- filing calendar ----------------------------------------------------- */
.ae-taxgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.ae-taxcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--ae-slate-bg, #eef1f2);
  color: var(--ae-slate, #44565a);
}
.ae-taxcell__type   { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.ae-taxcell__period { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.ae-taxcell__due    { font-size: 12px; font-weight: 600; }
.ae-taxcell__state  { font-size: 11.5px; opacity: .85; }

.ae-taxcell--overdue { background: var(--ae-crit-bg);   color: var(--ae-crit);   border-color: rgba(179, 38, 30, .22); }
.ae-taxcell--due30   { background: var(--ae-amber-bg);  color: var(--ae-amber);  border-color: rgba(168, 89, 10, .22); }
.ae-taxcell--due60   { background: var(--ae-ok-bg);     color: var(--ae-ok);     border-color: rgba(21, 128, 61, .20); }
.ae-taxcell--done    { background: var(--ae-ok-bg);     color: var(--ae-ok);     border-color: rgba(21, 128, 61, .20); }
.ae-taxcell--done .ae-taxcell__period { text-decoration: line-through; text-decoration-thickness: 1px; }
.ae-taxcell--future,
.ae-taxcell--none    { background: var(--ae-slate-bg);  color: var(--ae-slate); }

/* --- inline status pill -------------------------------------------------- */
.ae-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--ae-slate-bg, #eef1f2);
  color: var(--ae-slate, #44565a);
}
.ae-pill--overdue { background: var(--ae-crit-bg);  color: var(--ae-crit);  }
.ae-pill--due30   { background: var(--ae-amber-bg); color: var(--ae-amber); }
.ae-pill--due60,
.ae-pill--done    { background: var(--ae-ok-bg);    color: var(--ae-ok);    }

/* --- checkbox label ------------------------------------------------------ */
.ae-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.ae-check input { width: 16px; height: 16px; }

/* keep the inline status dropdown from stretching the expiry table */
.ae-status-form { margin: 0; }
.ae-status-form select { min-width: 150px; }

/* page head used by the tax screens: title left, actions right */
.ae-page-head > h4 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ae-text, #10282c);
}
.ae-page-head:has(> .ae-page-head__actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ae-page-head__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .ae-page-head__actions { margin-left: 0; width: 100%; } }

/* inline preview of the quarters a VAT cycle will generate */
.ae-preview {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ae-slate-bg, #eef1f2);
  font-size: 12.5px;
  color: var(--ae-slate, #44565a);
}
.ae-preview__head {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 5px;
}
.ae-preview ul { margin: 0; padding-left: 16px; }
.ae-preview li { margin-bottom: 2px; }