/* AqaryPro Skin — v1
 * Bootstrap 4 / Pixinvent Modern Admin overrides.
 * Loaded AFTER all vendor CSS so this layer wins the cascade.
 * All rules are wrapped in @media screen so they never touch print views.
 *
 * Sections:
 *  1. Body / Typography
 *  2. Buttons
 *  3. Forms (inputs, labels, Select2)
 *  4. Cards
 *  5. Tables
 *  6. Badges / Status pills
 *  7. Alerts
 *  8. Modals & Dropdowns
 *  9. Breadcrumbs
 * 10. Sidebar (.main-menu)
 * 11. Topbar (.header-navbar)
 * 12. Page background
 * 13. Utility helpers
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@media screen {

/* ══════════════════════════════════════════════
   1. BODY / TYPOGRAPHY
══════════════════════════════════════════════ */

html body {
  font-family: var(--aq-font-body) !important;
  background-color: var(--aq-surface) !important;
  color: var(--aq-ink-800) !important;
  -webkit-font-smoothing: antialiased;
}

/* Latin/numeric runs keep Inter for crisper rendering */
.latin { font-family: var(--aq-font-latin) !important; }
.mono  { font-family: var(--aq-font-mono)  !important; }
.tabular-nums { font-variant-numeric: tabular-nums !important; }

/* Page headings — dark grey (not pure black), calibrated weights */
h1, h2, h3, h4, h5, h6 { color: var(--aq-ink-700); }
h1, h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }


/* ══════════════════════════════════════════════
   2. BUTTONS
   Strategy: use body-prefixed selectors so specificity beats
   Pixinvent's single-class `.btn-*` rules without excessive !important.
   On background-image we always use !important to kill gradient overrides.
══════════════════════════════════════════════ */

/* --- Base reset --- */
.btn {
  border-radius: var(--aq-r-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  padding: 8px 16px !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
.btn.btn-sm, .btn-group-sm > .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
}
.btn.btn-lg, .btn-group-lg > .btn {
  padding: 11px 22px !important;
  font-size: 15px !important;
}

/* Strip Pixinvent's raised / waves effects */
.btn.btn-raised, .btn.waves-effect {
  box-shadow: none !important;
}

/* --- Primary (brand blue) --- */
body .btn-primary,
body a.btn-primary {
  background-color: var(--aq-brand-500) !important;
  background-image: none !important;
  border-color: var(--aq-brand-500) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active,
body .btn-primary.active,
body .open > .dropdown-toggle.btn-primary {
  background-color: var(--aq-brand-600) !important;
  background-image: none !important;
  border-color: var(--aq-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(12,132,209,.40) !important;
}

/* Gradient opt-in for hero CTAs */
.btn-grad-primary {
  background: linear-gradient(270deg, var(--aq-brand-500), var(--aq-brand-600)) !important;
  background-image: linear-gradient(270deg, var(--aq-brand-500), var(--aq-brand-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--aq-shadow-elev) !important;
}
.btn-grad-primary:hover {
  background: linear-gradient(270deg, var(--aq-brand-600), var(--aq-brand-700)) !important;
  background-image: linear-gradient(270deg, var(--aq-brand-600), var(--aq-brand-700)) !important;
}

/* --- Info (treated as brand alias — same palette, consistent look) --- */
body .btn-info,
body a.btn-info {
  background-color: var(--aq-brand-500) !important;
  background-image: none !important;
  border-color: var(--aq-brand-500) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .btn-info:hover,
body .btn-info:focus,
body .btn-info:active {
  background-color: var(--aq-brand-600) !important;
  background-image: none !important;
  border-color: var(--aq-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(12,132,209,.40) !important;
}

/* --- Success (emerald green) --- */
body .btn-success,
body a.btn-success {
  background-color: var(--aq-success-600) !important;
  background-image: none !important;
  border-color: var(--aq-success-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .btn-success:hover,
body .btn-success:focus,
body .btn-success:active {
  background-color: var(--aq-success-700) !important;
  background-image: none !important;
  border-color: var(--aq-success-700) !important;
  color: #fff !important;
}

/* --- Danger (red) --- */
body .btn-danger,
body a.btn-danger {
  background-color: var(--aq-danger-600) !important;
  background-image: none !important;
  border-color: var(--aq-danger-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .btn-danger:hover,
body .btn-danger:focus,
body .btn-danger:active {
  background-color: var(--aq-danger-700) !important;
  background-image: none !important;
  border-color: var(--aq-danger-700) !important;
  color: #fff !important;
}

/* --- Warning (amber) --- */
body .btn-warning,
body a.btn-warning {
  background-color: var(--aq-warning-600) !important;
  background-image: none !important;
  border-color: var(--aq-warning-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .btn-warning:hover,
body .btn-warning:focus,
body .btn-warning:active {
  background-color: var(--aq-warning-700) !important;
  background-image: none !important;
  border-color: var(--aq-warning-700) !important;
  color: #fff !important;
}

/* --- Light / default (neutral outline-style) --- */
body .btn-light,
body .btn-default,
body a.btn-light,
body a.btn-default {
  background-color: var(--aq-ink-100) !important;
  background-image: none !important;
  border-color: var(--aq-surface-border) !important;
  color: var(--aq-ink-700) !important;
  box-shadow: none !important;
}
body .btn-light:hover,
body .btn-default:hover {
  background-color: var(--aq-ink-200) !important;
  background-image: none !important;
  color: var(--aq-ink-800) !important;
}

/* --- Secondary (neutral) ---
 * Was --aq-ink-100 (#F1F4F8) at rest — only ~4% luminance step off
 * --aq-surface-card's white, so against a white card it read as an
 * unfilled outline button even though it technically had a fill. Bumped
 * one step on the ink scale (rest = ink-200, hover = ink-300) so the fill
 * is clearly visible without needing a global .btn-light change too —
 * .btn-light/.btn-default keep the original pale ink-100 fill, that name
 * implies deliberately subtle. */
body .btn-secondary,
body a.btn-secondary {
  background-color: var(--aq-ink-200) !important;
  background-image: none !important;
  border-color: var(--aq-ink-200) !important;
  color: var(--aq-ink-700) !important;
  box-shadow: none !important;
}
body .btn-secondary:hover,
body .btn-secondary:focus,
body .btn-secondary:active {
  background-color: var(--aq-ink-300) !important;
  border-color: var(--aq-ink-300) !important;
  background-image: none !important;
  color: var(--aq-ink-800) !important;
}

/* --- Outline variants --- */
body .btn-outline-primary {
  color: var(--aq-brand-500) !important;
  border-color: var(--aq-brand-500) !important;
  background-color: transparent !important;
  background-image: none !important;
}
body .btn-outline-primary:hover {
  background-color: var(--aq-brand-500) !important;
  color: #fff !important;
}
body .btn-outline-danger {
  color: var(--aq-danger-700) !important;
  border-color: var(--aq-danger-500) !important;
  background-color: transparent !important;
  background-image: none !important;
}
body .btn-outline-danger:hover {
  background-color: var(--aq-danger-500) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════
   3. FORMS
══════════════════════════════════════════════ */

/* --- Input / textarea / select universal --- */
.form-control {
  border-radius: var(--aq-r-lg) !important;
  border: 1px solid var(--aq-surface-border) !important;
  background-color: #fff !important;
  color: var(--aq-ink-800) !important;
  font-size: 14px !important;
  font-family: var(--aq-font-body) !important;
  padding: 10px 14px !important;
  min-height: 42px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--aq-ink-400) !important; }
.form-control:focus {
  border-color: var(--aq-brand-400) !important;
  box-shadow: var(--aq-shadow-focus) !important;
  background-color: #fff !important;
  outline: none !important;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--aq-surface) !important;
  color: var(--aq-ink-400) !important;
  border-color: var(--aq-ink-200) !important;
}
.form-control:disabled {
  cursor: not-allowed;
}
.form-control[readonly] {
  cursor: pointer;
}
.custom-date[readonly],
.hijri-date[readonly] {
  cursor: pointer !important;
}

/* --- Labels --- */
.form-group label,
label.col-form-label,
label.control-label,
.col-form-label {
  color: var(--aq-ink-700) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px;
  display: block;
}

/* Horizontal form label (col-md-4 pattern) keeps alignment */
.form-group [class*="col-"] label {
  padding-top: 10px;
}

/* Required marker normalization */
.form-group .text-danger,
label .text-danger,
.required-mark {
  color: var(--aq-danger-500) !important;
  font-weight: 600 !important;
}

/* --- Select2 restyling to match form-control --- */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: var(--aq-r-lg) !important;
  height: 42px !important;
  padding: 0 14px !important;
  display: flex;
  align-items: center;
  font-size: 14px;
  background-color: var(--aq-surface-card) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  color: var(--aq-ink-800) !important;
  padding: 0 !important;
  flex: 1;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--aq-ink-300) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  top: 1px !important;
  width: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--aq-ink-400) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--aq-ink-400) transparent !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--aq-brand-500) !important;
  box-shadow: var(--aq-shadow-focus) !important;
  outline: none !important;
}
.select2-dropdown {
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: var(--aq-r-md) !important;
  box-shadow: var(--aq-shadow-elev) !important;
  background-color: var(--aq-surface-card) !important;
  overflow: hidden;
}
.select2-results__option {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--aq-ink-700) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--aq-brand-500) !important;
  color: var(--aq-surface-card) !important;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
  color: var(--aq-ink-300) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: var(--aq-r-sm) !important;
  padding: 6px 10px;
  font-size: 13px;
  background-color: var(--aq-surface-card) !important;
  color: var(--aq-ink-800) !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--aq-brand-500) !important;
  box-shadow: var(--aq-shadow-focus) !important;
  outline: none;
}

/* Multiple select */
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: var(--aq-r-lg) !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
  background-color: var(--aq-surface-card) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--aq-brand-500) !important;
  box-shadow: var(--aq-shadow-focus) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--aq-brand-50) !important;
  border: 1px solid var(--aq-brand-100) !important;
  color: var(--aq-brand-700) !important;
  border-radius: var(--aq-r-xs) !important;
  font-size: 12px !important;
}

/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--aq-surface-muted) !important;
  border-color: var(--aq-surface-border) !important;
  cursor: not-allowed !important;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: var(--aq-ink-400) !important;
}


/* ══════════════════════════════════════════════
   4. CARDS
══════════════════════════════════════════════ */

.card {
  border-radius: var(--aq-r-2xl) !important;
  border: 1px solid var(--aq-surface-border) !important;
  box-shadow: var(--aq-shadow-card) !important;
  background-color: var(--aq-surface-card) !important;
  overflow: hidden;
}
.card > .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--aq-ink-100) !important;
  padding: 16px 20px !important;
  border-radius: 0 !important;
}
.card > .card-body {
  padding: 20px !important;
}
.card > .card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--aq-ink-100) !important;
  padding: 14px 20px !important;
}
.card .card-title {
  color: var(--aq-ink-700) !important;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.card .card-subtitle {
  color: var(--aq-ink-500) !important;
  font-size: 13px;
}
/* Remove Pixinvent's card-variant bg overrides */
.card.bg-white { background-color: #fff !important; }


/* ══════════════════════════════════════════════
   5. TABLES + DATATABLES
══════════════════════════════════════════════ */

/* --- Base table --- */
.table thead th {
  background-color: var(--aq-ink-100) !important;
  color: var(--aq-ink-900) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-bottom: 1px solid var(--aq-surface-border) !important;
  border-top: none !important;
  padding: 10px 14px !important;
  vertical-align: middle !important;
}
.table tbody td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--aq-surface-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--aq-ink-600) !important;
  font-size: 0.875rem !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background-color: var(--aq-ink-200) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #F8F9FA; }
.table tbody tr.selected td { background-color: #EDF2F7 !important; }

/* Opt-in utility for name/primary columns — darker + semi-bold */
.table .table-primary-col {
  color: #111827 !important;
  font-weight: 600 !important;
}



/* ══════════════════════════════════════════════
   6. BADGES / STATUS PILLS
══════════════════════════════════════════════ */

.badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  line-height: 1.5 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  vertical-align: middle;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.badge-primary, .badge-info {
  background-color: var(--aq-brand-50)  !important;
  color: var(--aq-brand-700) !important;
  box-shadow: inset 0 0 0 1px var(--aq-brand-100) !important;
}
.badge-success {
  background-color: var(--aq-success-50) !important;
  color: var(--aq-success-700) !important;
  box-shadow: inset 0 0 0 1px #BBF7D0 !important;
}
.badge-warning {
  background-color: var(--aq-warning-50) !important;
  color: var(--aq-warning-700) !important;
  box-shadow: inset 0 0 0 1px #FDE68A !important;
}
.badge-danger {
  background-color: var(--aq-danger-50)  !important;
  color: var(--aq-danger-700) !important;
  box-shadow: inset 0 0 0 1px #FECACA !important;
}
.badge-secondary, .badge-default, .badge-light {
  background-color: var(--aq-ink-100)    !important;
  color: var(--aq-ink-600) !important;
  box-shadow: inset 0 0 0 1px var(--aq-surface-border) !important;
}
.badge-dark {
  background-color: var(--aq-ink-800)    !important;
  color: #fff !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════
   7. ALERTS
══════════════════════════════════════════════ */

.alert {
  border-radius: var(--aq-r-xl) !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 14px;
}
.alert-success {
  background-color: var(--aq-success-50) !important;
  color: var(--aq-success-700) !important;
  border-left: 3px solid var(--aq-success-500) !important;
}
.alert-warning {
  background-color: var(--aq-warning-50) !important;
  color: var(--aq-warning-700) !important;
  border-left: 3px solid var(--aq-warning-500) !important;
}
.alert-danger {
  background-color: var(--aq-danger-50)  !important;
  color: var(--aq-danger-700) !important;
  border-left: 3px solid var(--aq-danger-500) !important;
}
.alert-info {
  background-color: var(--aq-info-50) !important;
  color: var(--aq-info-700) !important;
  border-left: 3px solid var(--aq-info-500) !important;
}
.alert .close { color: inherit !important; }


/* ══════════════════════════════════════════════
   8. MODALS & DROPDOWNS
══════════════════════════════════════════════ */

.modal-content {
  border-radius: var(--aq-modal-radius) !important;
  border: none !important;
  box-shadow: var(--aq-modal-elev) !important;
  font-family: var(--aq-modal-font) !important;
  overflow: hidden; /* NO !important — payment modal overrides to visible for datepickers */
}
.modal-header {
  background-color: var(--aq-modal-surface-tint) !important;
  border-bottom: 1px solid var(--aq-modal-border-soft) !important;
  padding: 18px 24px !important;
  align-items: center !important;
}
.modal-body {
  padding: 20px 24px !important;
}
.modal-footer {
  border-top: 1px solid var(--aq-modal-border-soft) !important;
  padding: 12px 24px !important;
  background-color: transparent !important;
  gap: 8px;
}
.modal-title {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: var(--aq-modal-ink) !important;
  font-family: var(--aq-modal-font) !important;
}
.modal-title i { color: var(--aq-modal-accent); font-size: 1.1rem; }
.modal-header .close {
  color: var(--aq-modal-muted) !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1;
  text-shadow: none !important;
  transition: color .15s ease;
}
.modal-header .close:hover { color: var(--aq-modal-ink) !important; opacity: 1 !important; }
.modal-header .close i.ph { font-size: 1rem; vertical-align: middle; }
.modal-content > .modal-body:first-child,
.modal-content > form:first-child > .modal-body:first-child {
  border-radius: var(--aq-modal-radius) var(--aq-modal-radius) 0 0;
}

.dropdown-menu {
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: var(--aq-r-xl) !important;
  box-shadow: var(--aq-shadow-elev) !important;
  padding: 6px !important;
  min-width: 180px;
  background-color: #fff !important;
}
.dropdown-item {
  border-radius: var(--aq-r-sm) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--aq-ink-700) !important;
  transition: background .12s;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--aq-ink-100) !important;
  color: var(--aq-ink-900) !important;
}
.dropdown-divider {
  border-top-color: var(--aq-ink-100) !important;
  margin: 4px 0 !important;
}


/* ══════════════════════════════════════════════
   9. BREADCRUMBS
══════════════════════════════════════════════ */

.breadcrumb {
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  font-size: 13px;
  box-shadow: none !important;
  font-family: var(--aq-font-body) !important;
}
.breadcrumb-item a {
  color: var(--aq-ink-500) !important;
  text-decoration: none;
  transition: color .12s;
}
.breadcrumb-item a:hover { color: var(--aq-ink-800) !important; }
.breadcrumb-item.active  { color: var(--aq-ink-800) !important; font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--aq-ink-300) !important; }


/* ══════════════════════════════════════════════
   10. SIDEBAR (.main-menu)
   Override Pixinvent's vertical-menu.css
   Direction: flush rows + 3px brand accent bar
══════════════════════════════════════════════ */

/* Panel — clean border-right instead of box-shadow ring */
.main-menu,
.main-menu.menu-light {
  background: var(--aq-surface-card) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--aq-surface-border) !important;
}

/* UL reset */
.main-menu .navigation,
.main-menu .navigation-main {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Idle top-level rows ─────────────────────────────── */
.main-menu .navigation > li > a,
.main-menu .navigation li.has-sub > a {
  display: flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  color: var(--aq-ink-600) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background .12s, color .12s !important;
}

/* Idle icon — mute the inline text-primary so icons are grey at rest */
.main-menu .navigation > li > a > i,
.main-menu .navigation li.has-sub > a > i {
  color: var(--aq-ink-400) !important;
  transition: color .12s !important;
}

/* ── Submenu items ───────────────────────────────────── */
.main-menu .navigation li ul.menu-content > li > a,
.main-menu .navigation li ul.menu-content li > a.menu-item {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 8px 14px 8px 46px !important;
  font-size: 13px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--aq-ink-600) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background .12s, color .12s !important;
}

/* Bullet dot from the empty <i> in each submenu link */
.main-menu .navigation li ul.menu-content > li > a > i,
.main-menu .navigation li ul.menu-content li > a.menu-item > i {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--aq-ink-300) !important;
  font-size: 0 !important;
  flex: none !important;
  color: transparent !important;
  transition: background .12s !important;
}

/* Extra indent for 3rd-level nested items (Reports submenu) */
.main-menu .navigation li ul.menu-content li > ul li > a.menu-item {
  padding-left: 60px !important;
}
.main-menu .navigation li ul.menu-content li > ul li > a.menu-item > i {
  left: 36px !important;
}

/* ── Hover ───────────────────────────────────────────── */
.main-menu .navigation > li > a:hover,
.main-menu .navigation li.has-sub > a:hover {
  background-color: var(--aq-ink-100) !important;
  background-image: none !important;
  color: var(--aq-ink-800) !important;
}
.main-menu .navigation > li > a:hover > i,
.main-menu .navigation li.has-sub > a:hover > i {
  color: var(--aq-ink-600) !important;
}
.main-menu .navigation li ul.menu-content > li > a:hover,
.main-menu .navigation li ul.menu-content li > a.menu-item:hover {
  background-color: var(--aq-ink-100) !important;
  background-image: none !important;
  color: var(--aq-ink-800) !important;
}
.main-menu .navigation li ul.menu-content > li > a:hover > i,
.main-menu .navigation li ul.menu-content li > a.menu-item:hover > i {
  background: var(--aq-ink-400) !important;
}

/* ── Kill base-theme translateX shifts that create a white gap on hover ── */
/* The base theme shifts > i by 6px and > span by 4px on top-level hover,  */
/* and shifts the entire submenu a by -4px when .hover class is added by JS */
.main-menu .navigation > li:hover > a > i,
.main-menu .navigation > li.hover > a > i,
.main-menu .navigation > li.active > a > i {
  transform: none !important;
  -webkit-transform: none !important;
}
.main-menu .navigation > li:hover > a > span,
.main-menu .navigation > li.hover > a > span,
.main-menu .navigation > li.active > a > span {
  transform: none !important;
  -webkit-transform: none !important;
}
.main-menu .navigation > li.open .hover > a,
.main-menu .navigation li ul.menu-content li.hover > a,
.main-menu .navigation li ul.menu-content li > a.menu-item:hover {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ── Base-theme active reset (prevents gradient/shadow bleed-through) ── */
.main-menu .navigation li.active > a,
.main-menu .navigation > li.active > a {
  background-image: none !important;
}

/* ── Active: standalone top-level item (Home / SMS / Users) ── */
/* Targets nav-item <li> that is NOT an open group               */
.main-menu .navigation > li.nav-item:not(.open) > a.active {
  background-color: var(--aq-brand-50) !important;
  background-image: none !important;
  color: var(--aq-brand-700) !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 var(--aq-brand-500) !important;
}
.main-menu .navigation > li.nav-item:not(.open) > a.active > i {
  color: var(--aq-brand-500) !important;
}

/* ── Active: leaf submenu item ──────────────────────── */
.main-menu .navigation li ul.menu-content a.menu-item.active {
  background-color: var(--aq-brand-50) !important;
  background-image: none !important;
  color: var(--aq-brand-700) !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 var(--aq-brand-500) !important;
}
.main-menu .navigation li ul.menu-content a.menu-item.active > i {
  background: var(--aq-brand-500) !important;
}

/* ── Active: group parent row — soft trail, no bar ──── */
/* Only the leaf carries the strong accent bar           */
.main-menu .navigation > li.nav-item.open > a.active {
  background-color: var(--aq-brand-50) !important;
  background-image: none !important;
  color: var(--aq-brand-700) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.main-menu .navigation > li.nav-item.open > a.active > i {
  color: var(--aq-brand-500) !important;
}

/* ── Active: group parent when no leaf matches — restore bar ── */
/* e.g. /agreements/Add opens Property Management but no leaf   */
/* :has() is universally supported in 2026                      */
.main-menu .navigation > li.nav-item.open:not(:has(a.menu-item.active)) > a.active {
  box-shadow: inset 3px 0 0 var(--aq-brand-500) !important;
}

/* ── Active: nested Reports parent row (li.active in menu-content) ── */
.main-menu .navigation li ul.menu-content > li.active > a {
  color: var(--aq-brand-700) !important;
  font-weight: 500 !important;
  background-color: var(--aq-brand-50) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.main-menu .navigation li ul.menu-content > li.active > a > i {
  background: var(--aq-brand-500) !important;
}

/* ── Nav section header labels ──────────────────────── */
.main-menu .navigation .navigation-header span,
.main-menu .navigation-header span {
  color: var(--aq-ink-400) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* ── Sub-menu container ─────────────────────────────── */
.main-menu .navigation li ul.menu-content,
.main-menu .navigation li .menu-content {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Collapsed rail (60px icon-only) ────────────────── */
body.menu-collapsed .main-menu .navigation > li > a {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.menu-collapsed .main-menu .navigation > li.nav-item:not(.open) > a.active {
  background-color: var(--aq-brand-50) !important;
  box-shadow: inset 3px 0 0 var(--aq-brand-500) !important;
}
body.menu-collapsed .main-menu .navigation > li.nav-item:not(.open) > a.active > i {
  color: var(--aq-brand-500) !important;
}

/* Fly-out popout card in collapsed state */
body.menu-collapsed .main-menu .navigation li ul.menu-content {
  background: var(--aq-surface-card) !important;
  border-radius: var(--aq-r-lg) !important;
  box-shadow: var(--aq-shadow-elev) !important;
  border: 1px solid var(--aq-surface-border) !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
  min-width: 200px !important;
}
body.menu-collapsed .main-menu .navigation li ul.menu-content > li > a,
body.menu-collapsed .main-menu .navigation li ul.menu-content li > a.menu-item {
  padding: 8px 16px 8px 38px !important;
}
body.menu-collapsed .main-menu .navigation li ul.menu-content > li > a > i,
body.menu-collapsed .main-menu .navigation li ul.menu-content li > a.menu-item > i {
  left: 16px !important;
}


/* ══════════════════════════════════════════════
   11. TOPBAR (.header-navbar)
══════════════════════════════════════════════ */

.header-navbar,
.header-navbar.navbar-with-menu {
  /* bg-info (Bootstrap blue) is the intended navbar color — no override */
  border-bottom: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  min-height: 64px !important;
  font-family: var(--aq-font-body) !important;
}
.header-navbar .navbar-wrapper,
.header-navbar .navbar-header {
  min-height: 64px !important;
}

/* Nav-links are action buttons (menu toggle, maximize…) — white text, no hover bg */
.header-navbar .navbar-container .nav-item .nav-link {
  color: rgba(255,255,255,0.85) !important;
  border-radius: 0 !important;
  transition: color .12s;
}
.header-navbar .navbar-container .nav-item .nav-link:hover {
  background-color: transparent !important;
  color: #fff !important;
}

/* Admin/user dropdown — frosted-glass pill so it reads on the blue navbar.
   order:10 pushes it last in the flex row → rightmost in LTR, leftmost in RTL */
.header-navbar .navbar-container ul.navbar-nav.float-right .dropdown-user {
  order: 10;
}
.header-navbar .navbar-container .dropdown-user .btn.dropdown-toggle {
  background: rgba(255,255,255,0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  box-shadow: none !important;
}
.header-navbar .navbar-container .dropdown-user .btn.dropdown-toggle:hover,
.header-navbar .navbar-container .dropdown-user .btn.dropdown-toggle:focus,
.header-navbar .navbar-container .dropdown-user .btn.dropdown-toggle:active {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════
   12. PAGE BACKGROUND
══════════════════════════════════════════════ */

.app-content .content-wrapper,
.app-content,
.content-wrapper {
  background-color: var(--aq-surface) !important;
}

/* Content header */
.content-header .content-header-title {
  color: var(--aq-ink-700) !important;
  font-weight: 600;
  font-size: 20px;
}


/* ══════════════════════════════════════════════
   13. UTILITY HELPERS (non-conflicting additions)
══════════════════════════════════════════════ */

/* Soft status pill classes (usable in new views) */
.pill-success { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:500; background:var(--aq-success-50); color:var(--aq-success-700); box-shadow:inset 0 0 0 1px #BBF7D0; }
.pill-warning { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:500; background:var(--aq-warning-50); color:var(--aq-warning-700); box-shadow:inset 0 0 0 1px #FDE68A; }
.pill-danger  { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:500; background:var(--aq-danger-50);  color:var(--aq-danger-700);  box-shadow:inset 0 0 0 1px #FECACA; }
.pill-info    { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:500; background:var(--aq-info-50);    color:var(--aq-info-700);    box-shadow:inset 0 0 0 1px #BAE6FD; }
.pill-neutral { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:500; background:var(--aq-ink-100);   color:var(--aq-ink-600);     box-shadow:inset 0 0 0 1px var(--aq-surface-border); }

/* Interactive pill toggle buttons (filter bars) */
.aq-pill-group { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.aq-pill-toggle {
  display:inline-flex; align-items:center;
  border-radius:9999px;
  padding:5px 14px;
  font-size:12px; font-weight:500;
  background:#fff;
  color:var(--aq-ink-700);
  border:1px solid var(--aq-surface-border);
  cursor:pointer;
  line-height:1.4;
  transition: background .15s, color .15s, border-color .15s;
}
.aq-pill-toggle:hover { background:var(--aq-ink-100); }
.aq-pill-toggle.active {
  background:var(--aq-info-500);
  color:#fff;
  border-color:var(--aq-info-500);
  font-weight:600;
}
.aq-pill-toggle:focus-visible {
  outline:none;
  box-shadow:var(--aq-shadow-focus);
}

/* Smooth focus ring for interactive elements */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--aq-shadow-focus);
}

/* ── In-button loading state (shared; login-v3.css handles .aq-login-submit) */
@keyframes aq-btn-spin {
  to { transform: rotate(360deg); }
}

.btn.is-loading {
  opacity: 0.92;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-loading .aq-btn-spinner {
  display: inline-block !important;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: aq-btn-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-inline-end: 5px;
}

.btn.is-loading > i.ph {
  display: none;
}

.btn.is-loading .aq-submit-label-default {
  display: none;
}

.btn.is-loading .aq-submit-label-loading {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .aq-btn-spinner {
    animation: none;
  }
}

} /* end @media screen */

/* ═══════════════════════════════════════════════════════════════
   VENDOR OVERRIDES — Bootstrap 4 + Select2 + Fonts
   All values reference --aq-* tokens. Only #fff is permitted as a hex literal.
   ═══════════════════════════════════════════════════════════════ */

/* §1  Font guarantee ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--aq-font-body) !important;
}

.form-control,
.input-group-text,
.custom-select,
.btn,
.navigation,
select,
input,
textarea,
button {
  font-family: var(--aq-font-body) !important;
}

.modal-title,
.card-title,
.popover-header,
.tooltip-inner {
  font-family: var(--aq-font-body) !important;
}

.select2-results__option,
.select2-selection__rendered,
.select2-search--dropdown .select2-search__field {
  font-family: var(--aq-font-body) !important;
}

/* §2  Bootstrap color overrides ─────────────────────────────── */

/* Color utilities */
.text-primary, .text-info {
  color: var(--aq-brand-600) !important;
}
.bg-primary, .bg-info {
  background-color: var(--aq-brand-500) !important;
}
.border-primary {
  border-color: var(--aq-brand-500) !important;
}

/* Alert — primary variant (info variant already covered) */
.alert-primary {
  background-color: var(--aq-brand-50) !important;
  border-left: 3px solid var(--aq-brand-500) !important;
  color: var(--aq-brand-700) !important;
}

/* Navigation */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--aq-brand-500) !important;
  border-color: var(--aq-brand-500) !important;
  color: #fff !important;
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--aq-brand-500) !important;
  border-color: var(--aq-brand-500) !important;
  color: #fff !important;
}
.page-link {
  color: var(--aq-brand-500) !important;
}
.page-link:focus {
  box-shadow: var(--aq-shadow-focus) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--aq-brand-500) !important;
}

/* Dropdown active state */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--aq-brand-500) !important;
  color: #fff !important;
}

/* §3  Bootstrap form controls ───────────────────────────────── */

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--aq-brand-500) !important;
  border-color: var(--aq-brand-500) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--aq-shadow-focus) !important;
}

.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb {
  background-color: var(--aq-brand-500) !important;
}

/* §4  Link color ─────────────────────────────────────────────── */
/* No !important — bare `a` should yield to more-specific nav/dropdown rules */

a {
  color: var(--aq-brand-500);
}
a:hover {
  color: var(--aq-brand-600);
}

/* §5  Datepicker — force LTR navigation ─────────────────────────
   RTL page direction causes bootstrap-datetimepicker to swap the
   prev/next button positions while the arrow icons keep their own
   direction, making them visually contradictory (→ on left = next,
   ← on right = prev). All major calendar UIs use LTR nav convention
   regardless of page direction. The scoped modal overrides below
   are superseded by this global rule.                             */
.bootstrap-datetimepicker-widget {
  direction: ltr !important;
}
/* direction:ltr makes the UA stylesheet resolve padding-inline-start
   → padding-left on inner <ul>, which Bootstrap's padding-left:0
   does not override. Zero both physical and logical properties.   */
.bootstrap-datetimepicker-widget .list-unstyled {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}