/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* ==================== Typography ==================== */

/* Arabic pages */
[lang="ar"] body,
[lang="ar-EG"] body,
[dir="rtl"] body {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.7;
}

/* English pages */
[lang="en"] body {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* Apply to text elements only � NOT icons */
[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] span:not([class*="icon"]),
[dir="rtl"] a, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] label,
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] button, [dir="rtl"] .btn, [dir="rtl"] .nav-text,
[dir="rtl"] .card-title, [dir="rtl"] .badge, [dir="rtl"] .nav-link,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 500;
}

[dir="ltr"] body, [dir="ltr"] p, [dir="ltr"] span:not([class*="icon"]),
[dir="ltr"] a, [dir="ltr"] td, [dir="ltr"] th, [dir="ltr"] label,
[dir="ltr"] input, [dir="ltr"] select, [dir="ltr"] textarea,
[dir="ltr"] button, [dir="ltr"] .btn, [dir="ltr"] .nav-text,
[dir="ltr"] .card-title, [dir="ltr"] .badge, [dir="ltr"] .nav-link,
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3,
[dir="ltr"] h4, [dir="ltr"] h5, [dir="ltr"] h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500;
}

/* Headings bolder */
h1, h2, h3, h4, h5, h6 { font-weight: 700 !important; }

/* Font weights mapping */
.font-light   { font-weight: 300 !important; }
.font-regular { font-weight: 400 !important; }
.font-medium  { font-weight: 500 !important; }
.font-semi    { font-weight: 600 !important; }
.font-bold    { font-weight: 700 !important; }

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: var(--qs-link);
}

/* Search buttons � dark blue with glow (high specificity to override theme) */
[id^="btnSearch"].btn,
[id^="btnSearch"] {
    background: var(--qs-primary) !important;
    background-color: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
    box-shadow: 0 0 14px rgba(var(--qs-primary-rgb), 0.6), 0 0 30px rgba(var(--qs-primary-rgb), 0.25) !important;
    transition: all 0.25s ease !important;
    height: auto !important;
    padding: .5rem .75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    /* 2026-08-16, take 3: earlier attempts (min-width 42px, then forcing min-width:100px
       + flex-shrink:0 + wrapping the row) all kept `width:100% !important` — meaning the
       button always tried to fill 100% of whatever sliver of column Bootstrap's flex-fill
       gave it, so it either got crushed, or (once shrink was blocked) forced its sibling
       clear button to overflow/wrap into an ugly disjointed second line. The actual fix:
       don't stretch the button to fill the column at all — size it to its own content
       (icon + Search label) via flex:0 0 auto. A content-sized button always has room next
       to the fixed 44px clear button in the same row, no shrinking and no wrapping needed. */
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

[id^="btnSearch"].btn:hover,
[id^="btnSearch"]:hover {
    background: var(--qs-primary-600) !important;
    background-color: var(--qs-primary-600) !important;
    border-color: var(--qs-primary-600) !important;
    box-shadow: 0 0 22px rgba(var(--qs-primary-rgb), 0.75), 0 0 44px rgba(var(--qs-primary-rgb), 0.3) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--qs-on-primary);
  background-color: var(--qs-primary);
  border-color: var(--qs-primary-600);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid var(--qs-border);
}
.border-bottom {
  border-bottom: 1px solid var(--qs-border);
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(var(--qs-shadow-rgb), .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}
.footer {
  position: relative;
  width: 100%;
}
/* ==================== Sidebar / Menu ==================== */

/* Sidebar base � same dark blue as outer frame */
.sidebar-dark {
    background: var(--qs-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.sidebar-dark .card-sidebar-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sidebar top padding */
.sidebar-content {
    padding-top: var(--qs-space-2);
}

/* Nav items.

   SIDEBAR HIERARCHY — every value below was measured against the real sidebar
   background (#173FA6), not chosen by eye.

   The problem this fixes: all 54 leaf labels rendered pure white at 9.14:1 while
   the ACTIVE item was only a 16% white wash. Every row shouted equally, so the eye
   had no anchor, and the one thing that should stand out — where you are — was the
   weakest signal on the panel.

   ONE hue, THREE deliberate levels:
     group header  #adc0ea   5.01:1  (quieter than the items it labels)
     leaf label    #c9d6f2   6.26:1  (clearly recessive vs pure white)
     ACTIVE label  #ffffff on a 26% white wash  4.70:1
   All three pass WCAG AA for normal text, so the hierarchy costs no accessibility. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link {
    color: var(--qs-nav-fg-leaf) !important;
    border-radius: 10px !important;
    margin: 2px 10px !important;
    padding: 10px 14px !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    /* Icons sit one step behind their label: they aid recognition, they are not the
       thing being read. They go full white on hover/active along with the text. */
    color: var(--qs-nav-fg-group);
    transition: color 0.18s ease;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(var(--qs-nav-fg-rgb), 0.12) !important;
    color: var(--qs-nav-fg) !important;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover i {
    color: var(--qs-nav-fg) !important;
}

/* Active item — clean, neutral highlight: a soft translucent-white fill with a crisp
   accent bar on the leading edge. No cyan glow/borders (which clashed with the blue). */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active {
    /* 0.16 -> 0.26: at 16% the active row was barely distinguishable from 53 pure-white
       neighbours. Now the labels are recessive AND the wash is stronger, so the current
       page is unmistakable at a glance. White on this wash is 4.70:1. */
    background: rgba(var(--qs-nav-fg-rgb), 0.26) !important;
    color: var(--qs-nav-fg) !important;
    font-weight: 600 !important;
    border: none !important;
    /* The cyan is REASSIGNED, not deleted. It used to be spread across 14 group headers
       where it competed with the blue and signified nothing in particular; it now appears
       exactly ONCE, here, where it means "you are here". One accent, one meaning.
       border-inline-start (not border-left) so it mirrors correctly in Arabic/RTL. */
    border-inline-start: 3px solid var(--qs-nav-section-fg) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--qs-nav-fg-rgb), .06);
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active i {
    color: var(--qs-nav-fg) !important;
}

/* Open submenu parent — same clean neutral highlight as the active item. */
.sidebar-dark .nav-item-submenu.nav-item-open > .nav-link {
    background: rgba(var(--qs-nav-fg-rgb), 0.16) !important;
    color: var(--qs-nav-fg) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    border: none !important;
    border-inline-start: 3px solid var(--qs-nav-fg) !important;
}
.sidebar-dark .nav-item-submenu.nav-item-open > .nav-link i {
    color: var(--qs-nav-fg) !important;
}
.sidebar-dark .nav-item-submenu.nav-item-open > .nav-link .nav-text {
    color: var(--qs-nav-fg) !important;
}

/* Submenu arrow — use logical CSS so it always lands at the far END of the nav item
   (physical right in LTR, physical left in RTL), clear conflicting positioned values */
.sidebar-dark .nav-item-submenu > .nav-link::after {
    color: var(--qs-nav-fg) !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -0.5rem !important;
    left: auto !important;
    right: auto !important;
    inset-inline-end: 14px !important;
}
.sidebar-dark .nav-item-submenu.nav-item-open > .nav-link::after {
    color: var(--qs-nav-fg) !important;
}
/* Reserve space so text doesn't reach the arrow */
.sidebar-dark .nav-sidebar > .nav-item.nav-item-submenu > .nav-link {
    padding-inline-end: 2.5rem !important;
}

/* Submenu container � white card */
.sidebar-dark .nav-group-sub {
    background: var(--qs-surface) !important;
    border-radius: 10px !important;
    margin: 3px var(--qs-space-2) 6px var(--qs-space-2) !important;
    padding: 5px !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(var(--qs-shadow-rgb), 0.25) !important;
}

/* Sub-item links � default */
.sidebar-dark .nav-group-sub .nav-item .nav-link,
.sidebar-dark .nav-group-sub .nav-item a {
    color: var(--qs-text) !important;
    padding: var(--qs-space-2) var(--qs-space-3) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 7px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--qs-space-2) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.sidebar-dark .nav-group-sub .nav-item .nav-link span {
    color: inherit !important;
    font-size: inherit !important;
    flex: 1;
}
/* Sub-item icon */
.sidebar-dark .nav-group-sub .nav-item .nav-link i {
    font-size: 13px !important;
    color: var(--qs-text-muted) !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}
.sidebar-dark .nav-group-sub .nav-item .nav-link::before {
    content: none !important;
}

/* Hover */
.sidebar-dark .nav-group-sub .nav-item .nav-link:hover {
    background: var(--qs-primary-subtle) !important;
    color: var(--qs-primary) !important;
}
.sidebar-dark .nav-group-sub .nav-item .nav-link:hover i {
    color: var(--qs-primary) !important;
}

/* Active */
.sidebar-dark .nav-group-sub .nav-item .nav-link.active {
    background: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(var(--qs-primary-rgb), 0.35) !important;
}
.sidebar-dark .nav-group-sub .nav-item .nav-link.active i {
    color: var(--qs-on-primary) !important;
}

/* Nested submenu (3rd level) */
.sidebar-dark .nav-group-sub .nav-group-sub {
    background: var(--qs-bg) !important;
    border: 1px solid var(--qs-border) !important;
    margin: 2px var(--qs-space-1) !important;
}
.sidebar-dark .nav-group-sub .nav-group-sub .nav-link {
    padding-inline-start: var(--qs-space-5) !important;
    font-size: 12px !important;
}

/* Force white text on top-level sidebar links � override theme defaults */
/* NOTE: nav-group-sub items intentionally excluded so inactive sub-item color (rgba 0.55) works */
/* THIS is the declaration that actually decides sidebar text colour — it is the last
   !important at this specificity, so it beat every earlier attempt. It used to force
   #fff on the link, EVERY span, the .nav-text and the icon alike, which is why all 54
   items rendered identically and no hierarchy was possible.

   It now carries the recessive level instead. Badges are excluded: they sit on their own
   coloured fills (red/emerald) where white is the legible choice, and dimming them would
   be a contrast regression, not a hierarchy. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link span:not(.badge):not([class*="badge"]),
.sidebar-dark .nav-sidebar > .nav-item > .nav-link .nav-text,
.sidebar-dark .nav-sidebar > .nav-item > a {
    color: var(--qs-nav-fg-leaf) !important;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link i {
    color: var(--qs-nav-fg-group) !important;
}

/* Hover and active go to full white — INCLUDING the inner .nav-text span. Without the
   span selectors here the label would stay recessive on the active row, because the
   rule above targets the span directly and inheritance never gets a say. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover span:not(.badge):not([class*="badge"]),
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover .nav-text,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover i,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active span:not(.badge):not([class*="badge"]),
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active .nav-text,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active i {
    color: var(--qs-nav-fg) !important;
}

/* Sidebar scrollbar */
.sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--qs-nav-fg-rgb), 0.25) transparent;
}
.sidebar-content::-webkit-scrollbar { width: 6px; }
.sidebar-content::-webkit-scrollbar-track { background: rgba(var(--qs-nav-fg-rgb), 0.04); border-radius: var(--qs-radius-xs); }
.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(var(--qs-nav-fg-rgb), 0.25);
    border-radius: var(--qs-radius-xs);
    transition: background 0.2s ease;
}
.sidebar-content::-webkit-scrollbar-thumb:hover { background: rgba(var(--qs-nav-fg-rgb), 0.4); }

/* Main page scrollbar (the whole window's scroll, on the light content side) —
   same slim/rounded treatment as the sidebar so scrolling looks consistent
   everywhere, not just inside the dark sidebar. */
html {
    scrollbar-width: thin;
    /* The scrollbar sits in the outer blue frame (html/body's own background is
       the same #173FA6 blue as the sidebar), NOT on white — so it needs the same
       light/white treatment the sidebar's own scrollbar uses to be visible there,
       not another blue that just blends into the frame around it. */
    scrollbar-color: rgba(var(--qs-nav-fg-rgb), 0.55) rgba(var(--qs-nav-fg-rgb), 0.12);
    /* Force the bar to always render (not just when content happens to overflow),
       so it's visible on every page the same way the sidebar's own bar always is. */
    overflow-y: scroll;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: rgba(var(--qs-nav-fg-rgb), 0.12); }
html::-webkit-scrollbar-thumb {
    background: rgba(var(--qs-nav-fg-rgb), 0.55);
    border-radius: var(--qs-radius-xs);
    transition: background 0.2s ease;
}
html::-webkit-scrollbar-thumb:hover { background: rgba(var(--qs-nav-fg-rgb), 0.8); }
html::before { left: 0; }
html::after { right: 0; }

/* Sidebar separator */
.sidebar-dark .nav-sidebar .nav-item-divider {
    border-color: rgba(var(--qs-nav-fg-rgb), 0.08) !important;
    margin: 6px 14px !important;
}

/* Desktop: disable sidebar toggle click */
@media (min-width: 768px) {
    .sidebar-main-toggle {
        pointer-events: none !important;
        cursor: default !important;
        opacity: 0.7;
    }
}

/* Collapsed sidebar: keep icons visible and centered */
@media (min-width: 768px) {
    .sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link {
        justify-content: center !important;
        padding: 10px 0 !important;
        margin: 2px 6px !important;
        gap: 0 !important;
    }
    .sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link > span,
    .sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link .nav-text {
        display: none !important;
    }
    .sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link i {
        margin: 0 !important;
    }
    .sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link::after {
        display: none !important;
    }
}

/* ==================== Page Header & Breadcrumb ==================== */
.page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    padding: 14px 20px !important;
    background: var(--qs-surface);
    border-bottom: none !important;
    margin-bottom: var(--qs-space-4) !important;
    min-height: 56px;
    border-radius: var(--qs-radius-lg) !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(var(--qs-shadow-rgb), 0.06);
    border-right: 4px solid var(--qs-primary) !important;
}
.page-header-content {
    display: flex;
    align-items: center;
    flex: 1;
}
.page-header .page-title {
    margin: 0 !important;
}
.page-header .page-title h1,
.page-header .page-title h4,
.page-header .page-title h5 {
    margin: 0 !important;
    font-size: 16px;
    color: var(--qs-primary);
    line-height: 1;
    font-weight: 700;
}

/* Breadcrumb */
.breadcrumb-line {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
.breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 13px;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--qs-text-muted) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.breadcrumb-item:hover { color: var(--qs-primary) !important; }
.breadcrumb-item.active { color: var(--qs-text) !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "�";
    color: var(--qs-border-strong);
    padding: 0 6px;
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 767px) {
    .page-header { padding: 10px 14px !important; }
    .breadcrumb { flex-wrap: wrap; }
}

/* ==================== Bookings Grouped Subtable ==================== */
.subtable-wrap table td,
.subtable-wrap table th {
    font-size: 12px !important;
    padding: var(--qs-space-1) 6px !important;
    white-space: nowrap;
}
.subtable-wrap table td .text-muted,
.subtable-wrap table td .text-size-sm {
    font-size: 11px !important;
}

/* ==================== AddEdit / List Page Header ==================== */
.addedit-page-header {
    background: transparent !important;
    /* 2026-08-18: trimmed the outer top/bottom spacing a touch to match the shrunk strip. */
    padding: var(--qs-space-2) 0 0 0 !important;
    margin-bottom: var(--qs-space-3) !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
}

/* 2026-08-18: shrunk site-wide, as asked (make the header a bit smaller everywhere) — this one rule governs
   the white page-header strip on every page, so reducing it here reduces it everywhere.
   min-height 64px -> 52px, padding 12px/18px -> 8px/16px. */
.addedit-header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--qs-space-4) !important;
    width: 100% !important;
    background: var(--qs-surface);
    border-radius: var(--qs-radius-lg) !important;
    box-shadow: 0 2px 12px rgba(var(--qs-primary-rgb), 0.08), 0 1px 4px rgba(var(--qs-shadow-rgb), 0.05);
    border-inline-start: 0 !important;
    border-inline-end: 5px solid var(--qs-primary) !important;
    border-left: 0 !important;
    border-right: 5px solid var(--qs-primary) !important;
    padding: var(--qs-space-2) var(--qs-space-4) !important;
    min-height: 52px;
}
[dir="rtl"] .addedit-header-inner,
html.is-rtl .addedit-header-inner {
    flex-direction: row-reverse !important;
}

.addedit-hdr-icon {
    /* 2026-08-18: 42px -> 36px, matching the shrunk .addedit-header-inner above. */
    width: 36px;
    height: 36px;
    background: rgba(var(--qs-primary-rgb), 0.08);
    border-radius: 10px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--qs-primary);
}

.addedit-hdr-text {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: var(--qs-space-4) !important;
}
[dir="rtl"] .addedit-hdr-text,
html.is-rtl .addedit-hdr-text {
    direction: rtl !important;
}
[dir="ltr"] .addedit-hdr-text,
html.is-ltr .addedit-hdr-text {
    direction: ltr !important;
}

.addedit-header-title {
    margin: 0 !important;
    font-size: 17px !important;
    color: var(--qs-primary) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

[dir="rtl"] .addedit-header-title,
html.is-rtl .addedit-header-title {
    text-align: right !important;
}
[dir="ltr"] .addedit-header-title,
html.is-ltr .addedit-header-title {
    text-align: left !important;
}

.addedit-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: var(--qs-space-1) !important;
    font-size: 12.5px !important;
}
[dir="ltr"] .addedit-breadcrumb,
html.is-ltr .addedit-breadcrumb {
    justify-content: flex-start !important;
    direction: ltr !important;
}
[dir="rtl"] .addedit-breadcrumb,
html.is-rtl .addedit-breadcrumb {
    justify-content: flex-end !important;
    direction: rtl !important;
}

.addedit-header-actions {
    margin-left: auto !important;
}
[dir="rtl"] .addedit-header-actions,
html.is-rtl .addedit-header-actions {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.addedit-bc-item { display: flex; align-items: center; gap: var(--qs-space-1); white-space: nowrap; }
.addedit-bc-link {
    color: var(--qs-text-faint) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.15s;
}
.addedit-bc-link:hover { color: var(--qs-primary) !important; }
.addedit-bc-active { color: var(--qs-primary) !important; font-weight: 600; }
.addedit-bc-sep { color: var(--qs-border-strong); font-size: 14px; line-height: 1; }
/* ==================== Card Header ====================
   GPG redesign, app-wide: was a solid var(--qs-primary) fill with white text/buttons on
   EVERY .card-header in the app. The reference's equivalent (.card-head) is plain —
   transparent, dark text, a hairline bottom border, no color block — on every card, not
   just the dashboard's. .header-elements .btn used to be styled white-on-blue to read on
   that fill; switched to a normal neutral/bordered button since the header is no longer
   colored (white-tinted text+border would be near-invisible on the new transparent/white
   background). */
.card-header {
    background: transparent !important;
    color: var(--qs-text) !important;
    border-radius: var(--qs-radius-lg) var(--qs-radius-lg) 0 0 !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--qs-border) !important;
}
.card-header .card-title {
    color: var(--qs-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0 !important;
}
.card-header .header-elements .btn {
    border-radius: var(--qs-radius-md) !important;
    font-weight: 600 !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    background: var(--qs-surface-2) !important;
    color: var(--qs-text) !important;
    border: 1.5px solid var(--qs-border-strong) !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
.card-header .header-elements .btn:hover {
    background: var(--qs-surface) !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-primary) !important;
}

/* ==================== Content Spacing ==================== */
.content-wrapper {
    padding: var(--qs-space-4) 20px !important;
}
.content-wrapper .page-header {
    margin-bottom: var(--qs-space-4) !important;
}
.content-wrapper .content {
    padding: 0 !important;
}
.content-wrapper .card {
    border-radius: var(--qs-radius-lg) !important;
    box-shadow: 0 2px 12px rgba(var(--qs-shadow-rgb), 0.1) !important;
    border: 1px solid rgba(var(--qs-shadow-rgb), 0.07) !important;
}
@media (max-width: 767px) {
    .content-wrapper {
        padding: 10px var(--qs-space-3) !important;
    }
}

/* ==================== Main Navbar / Header ==================== */
[dir="rtl"] .navbar.navbar-expand-md.navbar-dark,
[dir="ltr"] .navbar.navbar-expand-md.navbar-dark,
.navbar.navbar-expand-md.navbar-dark {
    background: var(--qs-primary) !important;
    box-shadow: none;
    padding: 0 20px;
    min-height: 56px;
    border-bottom: none;
}

/* Brand */
.navbar.navbar-expand-md .navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0 var(--qs-space-3);
}
.navbar-brand-link {
    color: var(--qs-nav-fg) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Mobile toggle buttons */
.navbar-mobile-btn {
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    color: var(--qs-nav-fg) !important;
    font-size: 16px;
    flex-shrink: 0;
    align-self: center;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
}
.navbar-mobile-btn--sidebar {
    background: rgba(var(--qs-nav-fg-rgb), 0.15) !important;
    border-color: rgba(var(--qs-nav-fg-rgb), 0.25) !important;
}
.navbar-mobile-btn--sidebar:hover,
.navbar-mobile-btn--sidebar:active {
    background: rgba(var(--qs-nav-fg-rgb), 0.25) !important;
}
.navbar-mobile-btn--settings {
    background: linear-gradient(135deg, rgba(var(--qs-primary-rgb), 0.45), rgba(var(--qs-primary-rgb), 0.75)) !important;
    border-color: rgba(var(--qs-nav-fg-rgb), 0.3) !important;
}
.navbar-mobile-btn--settings:hover,
.navbar-mobile-btn--settings:active {
    background: linear-gradient(135deg, rgba(var(--qs-primary-rgb), 0.7), rgba(var(--qs-primary-rgb), 0.95)) !important;
}

/* Navbar itself � ensure vertical centering of all children */
.navbar.navbar-expand-md.navbar-dark {
    align-items: center !important;
}
.navbar.navbar-expand-md.navbar-dark > *,
.navbar.navbar-expand-md.navbar-dark .d-flex {
    align-self: center !important;
}

/* Nav links */
.navbar.navbar-expand-md .navbar-nav-link {
    color: rgba(var(--qs-nav-fg-rgb), 0.85) !important;
    border-radius: var(--qs-radius-md);
    padding: var(--qs-space-2) 10px !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.navbar.navbar-expand-md .navbar-nav-link:hover {
    background: rgba(var(--qs-nav-fg-rgb), 0.12) !important;
    color: var(--qs-nav-fg) !important;
}

/* Language selector glow */
.language-selector .navbar-nav-link {
    background: rgba(var(--qs-nav-fg-rgb), 0.10) !important;
    border: 1.5px solid rgba(var(--qs-nav-fg-rgb), 0.45) !important;
    box-shadow: 0 0 12px rgba(var(--qs-nav-fg-rgb), 0.18), inset 0 0 8px rgba(var(--qs-nav-fg-rgb), 0.07) !important;
    border-radius: 10px !important;
    color: var(--qs-nav-fg) !important;
    padding: 6px var(--qs-space-3) !important;
    transition: all 0.2s ease !important;
}
.language-selector .navbar-nav-link:hover {
    background: rgba(var(--qs-nav-fg-rgb), 0.20) !important;
    box-shadow: 0 0 20px rgba(var(--qs-nav-fg-rgb), 0.30), inset 0 0 10px rgba(var(--qs-nav-fg-rgb), 0.10) !important;
}

/* ==================== Orders tables (Admin + Provider) ==================== */
.orders-table-wrap .table-responsive {
    overflow-x: auto;
}
@media (min-width: 992px) {
    .orders-table-wrap .table-responsive {
        overflow-x: hidden;
    }
}
.orders-table-wrap table.dataTable thead th,
.orders-table-wrap table.dataTable tbody td {
    padding: var(--qs-space-3) 14px;
    vertical-align: middle;
    white-space: nowrap;
}
.orders-table-wrap .dataTables_wrapper {
    overflow: visible;
    padding: var(--qs-space-3) var(--qs-space-4);
}
.orders-table-wrap .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}
.orders-table-wrap table.dataTable {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
.orders-table-wrap .dataTables_wrapper .dataTables_length,
.orders-table-wrap .dataTables_wrapper .dt-buttons {
    padding-top: 2px;
    padding-bottom: 2px;
}
.orders-table-wrap .dataTables_wrapper .dataTables_length label,
.orders-table-wrap .dataTables_wrapper .dataTables_length select,
.orders-table-wrap .dataTables_wrapper .dt-buttons .btn,
.orders-table-wrap .dataTables_wrapper .dt-buttons .dt-button {
    margin: 0 !important;
}
.orders-table-wrap .dataTables_wrapper .dataTables_info,
.orders-table-wrap .dataTables_wrapper .dataTables_paginate {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Language selector inside navbar � hide any Select2 wrapper if applied */
.navbar.navbar-expand-md .language-selector .select2-container {
    display: none !important;
}
.navbar.navbar-expand-md .language-selector .navbar-nav-link {
    background: rgba(var(--qs-nav-fg-rgb), 0.12) !important;
    border: 1px solid rgba(var(--qs-nav-fg-rgb), 0.22) !important;
    border-radius: 10px !important;
    padding: 6px var(--qs-space-3) !important;
    color: var(--qs-nav-fg) !important;
    gap: 6px;
}
.navbar.navbar-expand-md .language-selector .navbar-nav-link:hover {
    background: rgba(var(--qs-nav-fg-rgb), 0.2) !important;
}
.navbar.navbar-expand-md .language-selector .img-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    vertical-align: middle;
}
.navbar.navbar-expand-md .language-selector .dropdown-toggle::after {
    border-top-color: rgba(var(--qs-nav-fg-rgb), 0.7);
}

/* Mobile language selector polish */
@media (max-width: 767px) {
    .navbar.navbar-expand-md .language-selector {
        margin: 0 !important;
    }
    .navbar.navbar-expand-md .language-selector .navbar-nav-link {
        background: linear-gradient(135deg, rgba(var(--qs-nav-fg-rgb), 0.18), rgba(var(--qs-nav-fg-rgb), 0.06)) !important;
        border: 1px solid rgba(var(--qs-nav-fg-rgb), 0.35) !important;
        border-radius: var(--qs-radius-pill) !important;
        padding: 6px 14px !important;
        box-shadow: 0 6px 18px rgba(var(--qs-shadow-rgb), 0.18), inset 0 0 10px rgba(var(--qs-nav-fg-rgb), 0.12) !important;
        font-weight: 600;
        letter-spacing: 0.2px;
    }
    .navbar.navbar-expand-md .language-selector .img-flag {
        width: 18px;
        height: 18px;
        border-radius: var(--qs-radius-circle);
        box-shadow: 0 0 0 2px rgba(var(--qs-nav-fg-rgb), 0.35);
    }
    .navbar.navbar-expand-md .language-selector .dropdown-toggle::after {
        margin-inline-start: 6px;
    }
}

/* Divider line between items */
.navbar .divider-line {
    width: 1px;
    height: 24px;
    background: rgba(var(--qs-nav-fg-rgb), 0.2);
    display: inline-block;
    margin: 0 var(--qs-space-2);
    vertical-align: middle;
}

/* User avatar / profile area */
.navbar .navbar-nav .nav-item .nav-link img,
.navbar .navbar-nav .nav-item img {
    border: 2px solid rgba(var(--qs-nav-fg-rgb), 0.4);
    border-radius: var(--qs-radius-circle);
}

/* ==================== App Footer ==================== */
.app-footer {
    background: linear-gradient(135deg, var(--qs-primary-600) 0%, var(--qs-primary) 100%);
    margin-top: auto;
    border-radius: 0 0 var(--qs-radius-xl) var(--qs-radius-xl);
    margin: 0;
}
/* Accent bar � hidden with rounded footer */
.app-footer__bar {
    display: none;
}
.app-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--qs-space-5);
    flex-wrap: wrap;
    gap: 10px;
}
/* Left: brand + copyright */
.app-footer__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.app-footer__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--qs-nav-fg);
}
.app-footer__brand-icon {
    color: rgba(var(--qs-nav-fg-rgb), 0.8);
    font-size: 16px;
}
.app-footer__copy {
    font-size: 12px;
    color: rgba(var(--qs-nav-fg-rgb), 0.65);
    padding-right: 22px;
}
/* Right: links + version */
.app-footer__right {
    display: flex;
    align-items: center;
    gap: var(--qs-space-4);
}

.app-footer__version {
    font-size: 11.5px;
    color: var(--qs-nav-fg);
    background: rgba(var(--qs-nav-fg-rgb), 0.15);
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 600;
    border: 1px solid rgba(var(--qs-nav-fg-rgb), 0.25);
}
@media (max-width: 767px) {
    .app-footer__inner {
        justify-content: center;
        text-align: center;
        padding: var(--qs-space-3) var(--qs-space-4);
    }
    .app-footer__copy { padding-right: 0; }
    .app-footer__links { justify-content: center; }
}

button.btn.bg-info-800.btn-block {
    color: var(--qs-text) !important;
    background-color: var(--qs-info-solid) !important;
}

/* ==================== Select2 Theme Override ==================== */
/* Match text inputs to the select2 dropdown height so filter/search rows
   (Status dropdown + inputs) line up and look consistent. Textareas keep
   their natural height; small/large input variants are left untouched. */
input.form-control:not(.form-control-sm):not(.form-control-lg),
select.form-control:not(.form-control-sm):not(.form-control-lg) {
    height: var(--qs-tap-min);
}

/* GPG redesign: the base theme's .form-control ships a flat, un-themed gray
   border (~#ccc) and a default Bootstrap blue focus ring, neither of which
   ever picked up the --qs-* token restyle other controls got (buttons already
   use --qs-primary via the .btn-primary block above). Bring inputs/selects/
   textareas onto the same tokens so "inputs" actually match the reference,
   not just buttons. */
.form-control,
.custom-select {
    background-color: var(--qs-surface) !important;
    border-color: var(--qs-border-strong) !important;
    color: var(--qs-text) !important;
    border-radius: var(--qs-radius-md);
}
.form-control::placeholder { color: var(--qs-text-faint); }
.form-control:focus,
.custom-select:focus {
    border-color: var(--qs-primary) !important;
    box-shadow: 0 0 0 3px var(--qs-primary-subtle) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--qs-surface-2) !important;
    opacity: .7;
}
.select2-container--default .select2-selection--single {
    box-sizing: border-box;          /* keep total height at 44px incl. border + padding */
    display: flex;                   /* vertically centre the text/arrow regardless of metrics */
    align-items: center;
    border: 2px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-lg);
    height: var(--qs-tap-min);
    padding: 0 var(--qs-space-3);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    color: var(--qs-text);
    padding-left: var(--qs-space-1);
    padding-right: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;                    /* arrow fills the box height and stays centred */
    top: 0;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--qs-primary);
    box-shadow: 0 0 6px rgba(var(--qs-primary-rgb), 0.4);
    outline: none;
}
.select2-dropdown {
    border: 2px solid var(--qs-primary);
    border-radius: var(--qs-radius-lg);
    box-shadow: 0 4px 12px rgba(var(--qs-shadow-rgb), 0.1);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--qs-surface-2) !important;
    color: var(--qs-text) !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-md);
    padding: 6px 10px !important;
}
/* Remove the icomoon search icon injected by the Limitless theme */
.select2-search--dropdown:after {
    display: none !important;
}

/* ==================== Mobile / Responsive Fixes ==================== */

/* Fix page scroll on mobile � layout uses overflow:auto on content-wrapper */
@media (max-width: 991px) {
    /* Let body handle vertical scrolling on mobile instead of content-wrapper —
       but never allow horizontal scroll/overflow at the page level. A plain
       "overflow: auto" here permitted a horizontal scrollbar to appear the
       moment ANY element anywhere on the page was even 1px wider than the
       viewport (e.g. a badge/label fighting for space in the sidebar) instead
       of that element being clipped/shrunk to fit — split the axes so only
       vertical scroll is ever possible. */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh;
        max-width: 100vw;
    }
    .page-content {
        display: block !important;
        min-height: calc(100vh - 56px);
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    .content-wrapper {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: auto;
        max-width: 100vw;
    }
}

/* ==================== DataTable Toolbar ==================== */

/* Toolbar row */
.dt-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--qs-space-2);
    margin-bottom: 14px;
    background: var(--qs-bg);
    border-radius: var(--qs-radius-lg);
    padding: 10px var(--qs-space-4);
    border: 1px solid var(--qs-border);
}

/* Length selector � FIRST in DOM so it lands at flex-start (physical RIGHT in RTL) */
.dt-length-wrap {
    flex-shrink: 0;
}
.dataTables_wrapper .dataTables_length {
    float: none !important;
    white-space: nowrap;
}
.dataTables_wrapper .dataTables_length label {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--qs-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--qs-radius-md) !important;
    border: 1px solid var(--qs-border) !important;
    background: var(--qs-surface) !important;
    color: var(--qs-text) !important;
    padding: var(--qs-space-1) var(--qs-space-2) !important;
    font-size: 13px;
    background: var(--qs-surface);
    box-shadow: 0 1px 4px rgba(var(--qs-shadow-rgb), 0.06);
}

/* Buttons � SECOND in DOM so it lands at flex-end (physical LEFT in RTL) */
.dt-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* DataTable buttons � rounded and spaced on ALL screen sizes */
.dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons-wrap .dt-button,
.dt-buttons-wrap .btn {
    border-radius: 10px !important;
    margin: 0 3px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
}

/* ServiceProviders table compact */
#table td, #table th {
    font-size: 11px !important;
    padding: var(--qs-space-1) 5px !important;
}
#table td .badge {
    font-size: 10px !important;
    padding: 3px 5px !important;
}
.sp-email-cell {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Table scrolls horizontally within its own wrapper when it's wider than the
   available space (e.g. many visible columns via colvis) — a table-local scroller,
   not a page-level one; the page itself stays clipped (see the "no horizontal
   scroll at ANY width" rule further down) so a wide table can never spawn a
   page-wide horizontal scrollbar. */
/* Every DataTable scroll container — regardless of markup variant:
     • .dt-table-scroll   → AppTable / grouped custom dom (col-12 flex child)
     • .table-responsive  → pages that wrap the <table> themselves (ProviderOrders,
                            AdminProviderFinancial/Refunds, etc.); note DataTables inserts
                            its .dataTables_wrapper INSIDE this div, so the old
                            ".dataTables_wrapper .table-responsive" selector never matched
                            them — it must be a top-level selector.
   min-width:0 + max-width:100% are ESSENTIAL: these are often flex children, and a flex
   item's default min-width:auto lets a wide table stretch the container instead of
   triggering overflow — so no scrollbar appears and the page-level overflow-x:hidden just
   clips it (you then have to zoom out). Forcing min-width:0 lets the wrapper be narrower
   than its content, so it actually scrolls. */
.dt-table-scroll,
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    padding-bottom: var(--qs-space-1);
    /* Firefox: thin, always-styled scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: var(--qs-text-faint) var(--qs-surface-2);
}

/* Styled, always-visible horizontal scrollbar (the "scroll indicator" under the table). */
.dt-table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 10px;
}
.dt-table-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: var(--qs-surface-2);
    border-radius: var(--qs-radius-md);
}
.dt-table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--qs-text-faint);
    border-radius: var(--qs-radius-md);
    border: 2px solid var(--qs-surface-2);
}
.dt-table-scroll::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--qs-text-muted);
}

/* Let the table size to its natural content width and overflow the container (which
   scrolls) instead of crushing columns to fit 100%. min-width:100% keeps narrow tables
   filling the container; when content is wider than the screen the .dt-table-scroll
   wrapper shows its horizontal scrollbar. Applies at ALL widths (was mobile-only before,
   which is why wide tables were squeezed unreadably on desktop with no scrollbar). */
table.dataTable {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
}

/* ==================== DataTable Footer Bar ==================== */
.dt-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--qs-bg);
    border-radius: var(--qs-radius-lg);
    padding: 10px var(--qs-space-4);
    margin-top: var(--qs-space-4);
    border: 1px solid var(--qs-border);
    flex-wrap: wrap;
    gap: var(--qs-space-2);
}

/* Info text */
.dt-info-col {
    display: flex;
    align-items: center;
}
.dataTables_wrapper .dataTables_info {
    font-size: 12.5px;
    color: var(--qs-text-faint);
    padding-top: 0;
    font-weight: 500;
    white-space: nowrap;
}

/* Pagination */
.dt-paginate-col,
.dt-paginate-top-wrap {
    display: flex;
    align-items: center;
}
.dataTables_wrapper .dataTables_paginate {
    text-align: left;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    margin: 0 2px;
    border-radius: var(--qs-radius-md) !important;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--qs-border) !important;
    background: var(--qs-surface) !important;
    color: var(--qs-text-muted) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 34px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
    border-color: var(--qs-primary) !important;
    box-shadow: 0 3px 8px rgba(var(--qs-primary-rgb), 0.3);
    transform: translateY(-1px);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--qs-primary), var(--qs-primary-600)) !important;
    color: var(--qs-on-primary) !important;
    border-color: var(--qs-primary-600) !important;
    box-shadow: 0 3px 10px rgba(var(--qs-primary-rgb), 0.4);
    transform: translateY(-1px);
}
/* 2026-08 audit remediation (G2): #c0c8d8 on white measured 1.68:1 — the exact
   ratio the audit reported, and the worst contrast failure in the whole app.
   Two things had to change together: the color token (--qs-text-disabled
   resolves to 4.83:1) AND deleting `opacity: 0.7`, which was silently
   multiplying that ratio back down to ~3.2:1 and would have re-failed the
   audit even with a passing color underneath it. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--qs-surface) !important;
    color: var(--qs-text-disabled) !important;
    border-color: var(--qs-border) !important;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--qs-text-disabled);
    line-height: 34px;
}

/* ==================== DataTable Rows & Badges ==================== */

/* Table � standard collapse, no floating rows */
table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Header */
table.dataTable thead th {
    background: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 11px 10px !important;
    border: none !important;
    white-space: normal;
    vertical-align: middle;
    text-align: center;
}

/* 2026-08 sortable-column fix (C1 follow-up). The vendor theme (components.css)
   reserves padding-right:2.5rem (padding-left in the AR asset) on sortable header
   cells specifically, so the sort arrow — absolutely positioned at 1.25rem from
   that same edge — always has clear space. The rule above overrides `padding`
   with `!important` for EVERY header cell, sortable or not, which wipes that
   reserved space out. With no gap carved out, a long centered label like "PHONE
   NUMBER" spans the full cell width and the arrow renders on top of the last
   letter instead of beside it.
   padding-inline-end (not padding-right) is deliberate: it resolves to the
   correct physical side in both languages by itself, matching what the vendor
   theme does with two separate EN/AR files, without needing an [dir] override here. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    padding-inline-end: 2.5rem !important;
}
/* ==================== Global Primary Color Override ====================
   2026-08-20 (L2 adoption sweep). This block used to RE-DECLARE the brand:

       :root { --qs-primary: #173FA6; --qs-primary-600: #2150B8; }

   site.css loads after qs-tokens.css and the selector is the identical bare
   `:root`, so later-wins put THIS copy in charge of the whole app. Editing the
   brand in qs-tokens.css changed nothing in light mode — the single most direct
   possible instance of "a brand change needs hundreds of edits", sitting in the
   one place the token system was supposed to have fixed.

   Deleted. The rules below now consume --qs-primary / --qs-primary-600 from
   qs-tokens.css, which is where they are defined once. Light-mode rendering is
   byte-identical (the token file seeds the same two hexes); dark mode now
   correctly picks up the dark brand instead of being pinned to the light one.
   ====================================================================== */

/* Buttons */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: var(--qs-primary) !important;
    background-color: var(--qs-primary) !important;
    background-image: none !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background: var(--qs-primary-600) !important;
    background-color: var(--qs-primary-600) !important;
    background-image: none !important;
    border-color: var(--qs-primary-600) !important;
    color: var(--qs-on-primary) !important;
}
.btn-outline-primary {
    color: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}

/* Background + text */
.bg-primary { background-color: var(--qs-primary) !important; }
.text-primary { color: var(--qs-primary) !important; }
.border-primary { border-color: var(--qs-primary) !important; }

/* Badges */
.badge.badge-primary,
.badge.bg-primary {
    background-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}

/* Tabs / pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}

/* Tables (bootstrap) */
.table thead th,
table.table thead th {
    background: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}

/* DataTables buttons.
   2026-08 audit remediation (I2): "Three inconsistent button treatments sit in one toolbar
   ... side by side with no governing rule."

   This rule USED to paint every toolbar button filled primary with !important. That made
   them consistent with each other but wrong against the page: a grid's Export/Print/Columns
   utilities were shouting as loudly as the page's actual primary action (Add), and the
   !important meant no per-button class could say otherwise.

   The governing rule (see datatable-helper.js, where the classes are assigned):
     - ONE filled, high-emphasis button per view: the primary action. Never a toolbar utility.
     - Toolbar utilities share one low-emphasis outline treatment.
     - A destructive action stays distinguishable, but outlined, so it cannot out-shout the
       primary action.

   The !important is retained only because it must beat the same vendor Buttons styling the
   old rule was beating; the declarations are token-valued so the dark theme follows for free. */
.dt-buttons .dt-button,
.dt-buttons .btn {
    background-color: transparent !important;
    border-color: var(--qs-border) !important;
    color: var(--qs-text) !important;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover {
    background-color: var(--qs-surface-2) !important;
    border-color: var(--qs-primary-600) !important;
    color: var(--qs-primary-600) !important;
}
/* Destructive stays semantically coloured - this is the one place colour carries meaning
   rather than decoration, which is exactly what the audit asked for. */
.dt-buttons .btn-outline-danger {
    border-color: var(--qs-danger-solid) !important;
    color: var(--qs-danger-solid) !important;
}
.dt-buttons .btn-outline-danger:hover {
    background-color: var(--qs-danger-solid) !important;
    border-color: var(--qs-danger-solid) !important;
    color: var(--qs-on-danger) !important;
}

/* ==================== Password Eye Toggle ==================== */
.password-field-wrap {
    position: relative;
}
.password-field-wrap .form-control {
    padding-inline-end: 2.5rem;
}
.password-eye-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--qs-text-faint);
    line-height: 1;
    z-index: 5;
}
.password-eye-toggle:hover {
    color: var(--qs-primary);
}

/* ==================== ColVis Dropdown ==================== */
/* Allow the colvis dropdown to escape any overflow:hidden ancestor */
.dataTables_wrapper,
.dataTables_wrapper .dt-buttons,
.card-body,
.card {
    overflow: visible !important;
}

/* Defense-in-depth for the ColVis backdrop bug (primary fix is `background:false`
   in datatable-helper.js). The DataTables Buttons library appends a fixed, dark,
   z-index:1040 <div class="dt-button-background"> click-catcher to <body>; because
   the popover menu is inserted inside .dt-buttons it gets trapped below that backdrop
   whenever an ancestor card forms a stacking context (qs-signature entrance/hover
   animations), so the backdrop paints over the open menu as a dark sheet and blocks
   clicks on the column toggles. Neutralize it globally: make it invisible and let
   pointer events pass straight through to the menu beneath. The library's separate
   body-level outside-click / ESC handlers still close the popover, so this is safe. */
div.dt-button-background {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

div.dt-button-collection {
    background: var(--qs-surface) !important;
    border-radius: var(--qs-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(var(--qs-shadow-rgb), 0.12) !important;
    padding: var(--qs-space-2) !important;
    min-width: 190px !important;
    border: 1px solid var(--qs-border) !important;
}

div.dt-button-collection .dt-button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: start !important;
    border-radius: var(--qs-radius-md) !important;
    margin: 2px 0 !important;
    padding: 9px var(--qs-space-3) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--qs-text) !important;
    transition: background 0.15s !important;
    cursor: pointer !important;
}

/* Checkbox indicator */
div.dt-button-collection .dt-button::before {
    content: '' !important;
    flex-shrink: 0 !important;
    width: 17px !important;
    height: 17px !important;
    border: 2px solid var(--qs-border-strong) !important;
    border-radius: var(--qs-radius-xs) !important;
    background: var(--qs-surface) !important;
    transition: all 0.15s !important;
    display: inline-block !important;
}

div.dt-button-collection .dt-button:hover {
    background-color: var(--qs-bg) !important;
    color: var(--qs-text) !important;
}

div.dt-button-collection .dt-button:hover::before {
    border-color: var(--qs-primary) !important;
}

/* Checked state */
div.dt-button-collection .dt-button.active {
    background-color: var(--qs-primary-subtle) !important;
    color: var(--qs-primary) !important;
    font-weight: 600 !important;
}

div.dt-button-collection .dt-button.active::before {
    background-color: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
}

div.dt-button-collection .dt-button.active:hover {
    background-color: var(--qs-primary-subtle) !important;
}

/* ==================== Unified Tabs (Nav Tabs/Pills) ====================

   2026-08-20 (L1). Every declaration in this block used to carry !important - 28 of
   them. Nothing here needs it, and it was actively harmful:

     - site.css is linked AFTER all six Limitless vendor sheets (see
       _ThemeCssScriptsPartial.cshtml), so on equal specificity it already wins by
       source order. The !important was buying nothing against the vendor.
     - What it DID do was force every downstream sheet to match it. qs-theme-dark.css
       says so in its own header: "any override - dark mode or otherwise - must also use
       !important or it silently no-ops." That is finding L1 stated by the codebase
       about itself, and finding L5 was the cost: the dark theme set colour and
       border-color on .nav-tabs .nav-link but not background, so this rule's
       background:#f7f9fc survived into dark mode on every unselected tab.

   With the wall gone, the dark/density/a11y overrides of these same selectors drop
   their !important too (done in the same change), so the count falls on BOTH sides
   rather than one sheet exporting its problem to the next.

   SCOPE, deliberately: this is one block, not a site.css-wide de-!important pass. The
   rest is a real refactor across 2,156 lines with no visual-diff harness, which the
   report itself recommends scoping as its own initiative. What is defensible in one
   change is the block that two open findings both name - and it is verified by
   measuring every pill on ten pages in both themes before and after.
   ==================================================================== */

.nav-tabs,
.nav-pills {
    border-bottom: none;
    gap: var(--qs-space-2);
    flex-wrap: wrap;
}
.nav-tabs::after,
.nav-pills::after {
    content: none;
}
.nav-tabs {
    box-shadow: none;
}
.nav-tabs .nav-item,
.nav-pills .nav-item {
    margin-bottom: 0;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
    border: 1px solid var(--qs-border);
    background: var(--qs-bg);
    color: var(--qs-text-muted);
    border-radius: 10px;
    padding: 6px var(--qs-space-3);
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    background: var(--qs-primary-subtle);
    border-color: var(--qs-primary-subtle-border);
    color: var(--qs-primary);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: var(--qs-on-primary);
    box-shadow: 0 4px 12px rgba(var(--qs-primary-rgb), 0.25);
}
.nav-tabs .nav-link .badge,
.nav-pills .nav-link .badge {
    background: rgba(var(--qs-nav-fg-rgb), 0.2);
    color: inherit;
    border-radius: var(--qs-radius-pill);
    font-size: 11px;
    padding: 2px 7px;
}

/* Remove legacy highlight line on top of tabs */
.nav-tabs-highlight .nav-link::before,
.nav-tabs-top .nav-link::before,
.nav-tabs-bottom .nav-link::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: transparent !important;
}

/* Rows */
table.dataTable tbody tr {
    background: var(--qs-surface);
    transition: background 0.15s ease;
}
table.dataTable tbody tr:nth-child(even) {
    background: var(--qs-bg);
}
table.dataTable tbody tr:hover {
    background: var(--qs-primary-subtle) !important;
}

/* Cells */
table.dataTable tbody td {
    border-top: none !important;
    border-bottom: 1px solid var(--qs-surface-2) !important;
    padding: 9px 10px !important;
    font-size: 13px;
    vertical-align: middle !important;
}

/* ---- Badges / Status pills ---- */
table.dataTable .badge,
.badge {
    border-radius: 20px !important;
    padding: var(--qs-space-1) var(--qs-space-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    gap: var(--qs-space-1);
    white-space: nowrap;
}

/* Flat badge colors — no gradient, no shadow.
   2026-08 audit remediation (G1): the old literal hex values measured 2.14-3.35:1
   against white (audit reported 2.16/2.3 for warning/info) — well under the 4.5:1
   WCAG AA minimum. Replaced with the qs-tokens.css semantic palette, which was
   chosen specifically to pass (success 5.07:1, danger 5.62:1, info 5.80:1,
   secondary/neutral 5.40:1; warning keeps its recognizable amber fill but pairs
   it with dark text via --qs-on-warning for 8.5:1 instead of darkening the fill
   itself, which would have destroyed the color's meaning).
   !important removed along with the literals — qs-theme-dark.css never had a
   dark override for these rules anyway (0 hits), and removing !important here
   is what makes that legitimately safe to do (site.css's own cascade contract:
   a dark override is only REQUIRED to carry !important when the light rule it's
   fighting also has one). */
.badge.badge-success, .badge.bg-success { background: var(--qs-success-solid); color: var(--qs-on-success); }
.badge.badge-warning, .badge.bg-warning { background: var(--qs-warning-solid); color: var(--qs-on-warning); }
.badge.badge-danger,  .badge.bg-danger  { background: var(--qs-danger-solid); color: var(--qs-on-danger); }
.badge.badge-info,    .badge.bg-info    { background: var(--qs-info-solid); color: var(--qs-on-info); }
.badge.badge-primary, .badge.bg-primary { background: var(--qs-primary); color: var(--qs-on-primary); }
.badge.badge-secondary,.badge.bg-secondary{ background: var(--qs-neutral-solid); color: var(--qs-on-neutral); }

/* Action buttons inside table */
table.dataTable .btn-icon.btn-action {
    border-radius: 10px !important;
    margin: 1px 2px;
    transition: opacity 0.15s ease;
}
table.dataTable .btn-icon.btn-action:hover {
    opacity: 0.85;
}

/* Card/panel padding reduction on mobile */
@media (max-width: 767px) {
    .content-wrapper {
        padding: 10px !important;
    }
    .card-body {
        padding: 10px !important;
    }
    /* Prevent action buttons from overflowing */
    .btn-icon.btn-action {
        padding: 5px 7px !important;
        font-size: 12px !important;
    }
    /* DataTable length selector and buttons full-width */
    .dataTables_length {
        text-align: center;
    }
    .dt-buttons-wrap {
        justify-content: center;
    }
    /* Navbar adjustments */
    .navbar-brand a {
        font-size: 14px !important;
    }
    /* Force ALL grid columns to stack vertically on mobile */
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Fix modal width */
    .modal-dialog {
        margin: 10px;
    }
    /* Prevent page-level horizontal overflow */
    .content {
        overflow-x: hidden;
    }
    /* Row negative margins fix */
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* provider-financial-spacing */
#transactionsTable_wrapper .dataTables_length,
#transactionsTable_wrapper .dataTables_info,
#transactionsTable_wrapper .dataTables_paginate { padding: 0 var(--qs-space-3) var(--qs-space-3); }
#transactionsTable_wrapper .dataTables_info { padding-top: 6px; }
#transactionsTable_wrapper .dataTables_length { padding-top: var(--qs-space-2); }

/* ==================== Dark Frame Layout (Mavis-style) ==================== */

/* ==================== Blue Frame Layout ==================== */

/* Single consistent dark blue for entire outer frame */
html,
body {
 /* background: var(--qs-primary) !important;*/  
}

/* Page-content: same dark blue + padding */
.page-content {
    background: var(--qs-primary) !important;
    padding-top: var(--qs-space-3) !important;
    padding-bottom: var(--qs-space-4) !important;
    padding-inline-end: var(--qs-space-4) !important;
    padding-inline-start: 0 !important;
    min-height: calc(100vh - 56px) !important;
}

/* Content-wrapper: floating white card */
.content-wrapper {
    background: var(--qs-surface) !important;
    border-radius: var(--qs-radius-xl) !important;
    box-shadow: 0 4px 32px rgba(var(--qs-shadow-rgb), 0.25), 0 1px 6px rgba(var(--qs-shadow-rgb), 0.15) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    /* CRITICAL for wide-table horizontal scroll: as a flex item, the content column
       defaults to min-width:auto, so a table wider than the viewport stretches this whole
       white card past the screen edge (which .page-content then clips — that's why you had
       to zoom out to see the rest, with no scrollbar). min-width:0 lets the column stay
       viewport-width, so the wide table overflows into its own .dt-table-scroll wrapper
       and that wrapper shows its horizontal scrollbar instead. */
    min-width: 0 !important;
}

/* Same reasoning down the chain — keep every block between the content column and the
   table scroll-wrapper from being widened by the table's intrinsic width. */
.content-wrapper .content,
.content-wrapper .content > .card,
.content-wrapper .content > .card > .card-body,
.content-wrapper .card > .card-body > .dataTables_wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Footer: flush bottom of white card */
.content-wrapper .app-footer {
    margin: 0 !important;
    border-radius: 0 0 var(--qs-radius-xl) var(--qs-radius-xl) !important;
}

/* Sidebar: floats in blue frame with outer rounded corners */
.sidebar.sidebar-dark.sidebar-main {
    margin-top: var(--qs-space-3) !important;
    margin-bottom: var(--qs-space-4) !important;
    border-radius: 0 var(--qs-radius-xl) var(--qs-radius-xl) 0 !important;
    overflow: hidden !important;
}
[dir="rtl"] .sidebar.sidebar-dark.sidebar-main {
    border-radius: var(--qs-radius-xl) 0 0 var(--qs-radius-xl) !important;
}
.sidebar.sidebar-dark.sidebar-main .sidebar-content {
    overflow-y: auto !important;
}

/* -- Mobile: collapse card effect -- */
@media (max-width: 991px) {
    html, body { background: var(--qs-primary) !important; }
    .page-content { background: var(--qs-primary) !important; }
    .page-content {
        padding: 0 !important;
        min-height: auto !important;
    }
    .content-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .content-wrapper .app-footer {
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .sidebar.sidebar-dark.sidebar-main {
        border-radius: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }
}































/* Hide header/breadcrumb icons as requested */
.addedit-hdr-icon { display: none !important; }




/* HelpManagement & ProviderSupport - unified curved controls */
.support-curve-btns .btn,
.help-curve-btns .btn,
.support-search .form-control,
.support-search .input-group-text,
.support-search .btn,
.help-search .form-control,
.help-search .input-group-text,
.help-search .btn {
    border-radius: var(--qs-radius-pill) !important;
}
.support-search .input-group-text,
.help-search .input-group-text {
    background: var(--qs-surface) !important;
}
.support-search .form-control,
.help-search .form-control {
    box-shadow: none !important;
}

/* Rounded status filter buttons (Help/Support) */
.help-curve-btns.btn-group,
.support-curve-btns.btn-group {
    display: flex !important;
    gap: var(--qs-space-2) !important;
}
.help-curve-btns.btn-group .btn,
.support-curve-btns.btn-group .btn {
    border-radius: var(--qs-radius-pill) !important;
    margin: 0 !important;
}
/* Ensure correct mobile/desktop toggle visibility */
@media (max-width: 767px) {
    .navbar-nav.d-none.d-md-flex {
        display: none !important;
    }
    .d-md-none {
        display: flex !important;
    }
    .sidebar-main-toggle {
        display: none !important;
    }
}

/* ==================== ProviderFinancial Transactions Table — Compact ==================== */
#transactionsTable_wrapper .table-responsive {
    overflow-x: hidden !important;
}
#transactionsTable thead th {
    font-size: 10px !important;
    padding: 7px 5px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
#transactionsTable tbody td {
    font-size: 10.5px !important;
    padding: 5px var(--qs-space-1) !important;
    vertical-align: middle !important;
    white-space: nowrap;
}
/* Compact badges inside transactions table */
#transactionsTable .badge {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
    border-radius: 5px !important;
}
/* Amount cells — no gap wasted */
#transactionsTable td:nth-child(5),
#transactionsTable td:nth-child(6),
#transactionsTable td:nth-child(7),
#transactionsTable td:nth-child(8),
#transactionsTable td:nth-child(9),
#transactionsTable td:nth-child(10) {
    white-space: nowrap;
    text-align: center !important;
}
/* Customer name — allow wrap to save width */
#transactionsTable td:nth-child(4) {
    white-space: normal !important;
    max-width: 90px;
    word-break: break-word;
}

/* ==================== No horizontal scroll at ANY width ====================
   The ≤991px block already guards html/body/page-content/content-wrapper against
   horizontal overflow, but desktop (≥992px) had NO such guard — a too-wide sidebar
   row or element could spawn a page-level horizontal scrollbar. Clip it at the
   viewport on every width; wide tables keep their OWN inner .table-responsive
   {overflow-x:auto} scrollers, so nothing scrollable is lost. */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
.page-content {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* ==================== Notifications page redesign ====================
   Shared by ProviderNotifications/Index.cshtml and AdminNotifications/Index.cshtml
   so both pages stay visually identical. */

/* Tabs as pills instead of underlined nav-tabs */
.notif-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qs-space-2);
}
.notif-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    background: var(--qs-surface-2);
    color: var(--qs-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.notif-tab-pill:hover {
    background: var(--qs-surface-2);
    color: var(--qs-text-muted);
    text-decoration: none;
}
.notif-tab-pill.active {
    background: var(--qs-primary);
    color: var(--qs-on-primary);
}
.notif-tab-pill .badge {
    font-size: 11px;
}

/* Notification list rows as cards */
.notif-card {
    display: flex;
    align-items: flex-start;
    gap: var(--qs-space-3);
    padding: 14px var(--qs-space-4);
    border-bottom: 1px solid var(--qs-surface-2);
    transition: background 0.15s ease;
}
.notif-card:last-child { border-bottom: none; }
.notif-card.notif-unread { background: var(--qs-primary-subtle); }
.notif-card .notif-icon-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--qs-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.notif-card .notif-title { font-weight: 600; margin-bottom: 2px; }
.notif-card .notif-message { color: var(--qs-text-muted); font-size: 13px; margin-bottom: 2px; }
.notif-card .notif-time { color: var(--qs-text-faint); font-size: 12px; }
.notif-card .notif-actions-menu .dropdown-toggle::after { display: none; }
.notif-card .notif-actions-menu .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--qs-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Bulk-actions bar pill buttons — wrap instead of squeezing labels (Arabic strings run
   longer than English, so no-wrap + flex-shrink was compressing button text illegibly) */
.notif-bulk-bar .card-body > div {
    flex-wrap: wrap;
}
.notif-bulk-bar .btn-sm {
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Pagination — rounded pill numbers */
.notif-pagination .page-link { border-radius: var(--qs-radius-circle) !important; margin: 0 3px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; }
.notif-pagination .page-item.active .page-link { background-color: var(--qs-primary); border-color: var(--qs-primary); }

/* Compact "Show N" page-size picker, placed before Select All in the bulk-actions bar.
   !important needed: the theme's `select.form-control` rule (element+class specificity)
   otherwise beats this plain class selector and forces width:100%. */
select.notif-page-size {
    width: auto !important;
    min-width: 64px !important;
    max-width: 78px !important;
    flex-shrink: 0 !important;
    height: 30px !important;
    padding: 2px 10px !important;
    border-radius: var(--qs-radius-xl) !important;
    font-size: 13px !important;
}
/* "Show [N] entries" wrapper — margin lives on the label now, not the bare select,
   so the two text fragments and the dropdown all read as one clearly-labeled unit
   instead of an unlabeled "25" the user could mistake for the selected-count badge. */
.notif-page-size-label { margin-inline-end: var(--qs-space-2); font-size: 13px; }

/* Selection toolbar buttons are always visible now (never hidden); disabled state
   communicates "nothing selected yet" instead of the button disappearing. */
.notif-bulk-bar .btn-sm:disabled { opacity: .45; }
.notif-actions-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(var(--qs-shadow-rgb), .12);
    margin: 0 var(--qs-space-1);
}

/* Out-of-stock product rows (Products list) — subtle red tint + left accent so providers
   spot unavailable products at a glance without hunting the Stock column. */
tr.qs-row-out-of-stock > td {
    background-color: var(--qs-danger-subtle-bg) !important;
}
tr.qs-row-out-of-stock > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--qs-danger-solid);
}




/* ==================== Fixed side menu only; header scrolls normally (desktop) ==============
   The ONLY pinned element is the side menu (position:FIXED — viewport-anchored, reliable, doesn't
   depend on any ancestor's overflow). The header/navbar stays in normal flow and scrolls away with
   the page. Content scrolls the window normally, full length. Scoped to >=992px; the <=991px
   mobile block is untouched. Logical properties keep it correct in LTR and RTL. */
@media (min-width: 992px) {
    .sidebar.sidebar-dark.sidebar-main {
        position: fixed !important;
        /* Scroll-driven top (set by the script in _Layout): at rest = navbar height + 12px gap so
           the menu sits below the header; as you scroll it rises and pins at 12px so the menu fills
           the top instead of leaving a blue band. Fallback (pre-script) = the resting value. */
        top: var(--qs-sidebar-top, calc(var(--qs-navbar-h, 56px) + 12px)) !important;
        bottom: 16px !important;          /* frame bottom gap */
        inset-inline-start: 0 !important;
        width: 16.875rem !important;      /* the template's standard sidebar width */
        height: auto !important;          /* top + bottom define the height */
        margin: 0 !important;
        border-radius: 0 var(--qs-radius-xl) var(--qs-radius-xl) 0 !important;   /* floating-card corners (leading edge flush) */
        z-index: 1020 !important;         /* above page content, below modals (1040+) */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;      /* clip; the inner list scrolls */
    }
    [dir="rtl"] .sidebar.sidebar-dark.sidebar-main {
        border-radius: var(--qs-radius-xl) 0 0 var(--qs-radius-xl) !important;   /* mirror the rounded corners in RTL */
    }
    /* The menu list scrolls inside the fixed rail only when it overflows the viewport height. */
    .sidebar.sidebar-dark.sidebar-main .sidebar-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    /* The rail is out of normal flow, so shift the content over by the rail width (+ a small gap
       for the old floating-card spacing). Content + header still scroll the window normally. */
    .content-wrapper {
        margin-inline-start: calc(16.875rem + 12px) !important;
        overflow: visible !important;
    }
    /* .page-content keeps its inline-start padding at 0 (rail sits at the very edge). */
    .page-content { padding-inline-start: 0 !important; }
}