/* =============================================================================
   Al-Maudiyat Admin — "Sapphire" design system overlay
   -----------------------------------------------------------------------------
   Loaded LAST in _ThemeCssScriptsPartial so it overrides the Limitless vendor
   theme without editing any vendor file. bootstrap / bootstrap_limitless /
   components / layout / colors stay untouched and remain upgradable.

   Palette change: the legacy cyan (#00a8b7) + grey-to-black button gradients are
   replaced by an indigo primary on a midnight-navy chrome, with a cyan accent
   used sparingly for markers and gradient ends.

   Bidi: the app ships two vendor builds (assets/ = LTR, assets-AR/ = RTL) and
   Bootstrap 4 spacing utilities are physical (ml-* / mr-*). Everything
   directional below uses CSS logical properties, so it mirrors automatically;
   the few places that cannot are mirrored explicitly under [dir="rtl"].
   ============================================================================= */

/* ----------------------------------------------------------------- tokens -- */
:root {
    /* Brand — indigo. 600 is the primary; white on it clears AA for UI text. */
    --brand-50:  #EEF1FF;
    --brand-100: #E0E5FF;
    --brand-200: #C6CEFE;
    --brand-300: #A5B0FC;
    --brand-400: #8189F8;
    --brand-500: #6366F1;
    --brand-600: #4F46E5;   /* primary */
    --brand-700: #4338CA;
    --brand-800: #372FA6;
    --brand-900: #272166;

    /* Accent — cyan. Markers, gradient ends, focus sparkle. Never body text. */
    --accent-300: #67E8F9;
    --accent-400: #22D3EE;
    --accent-500: #06B6D4;
    --accent-600: #0891B2;

    /* Ink — midnight navy with a violet cast, used for navbar + sidebar. */
    --ink-950: #070B18;
    --ink-900: #0B1022;
    --ink-800: #121A32;
    --ink-700: #1B2440;
    --ink-600: #263054;

    /* Neutrals — slate, tuned to sit under indigo without going muddy. */
    --n-0:   #FFFFFF;
    --n-25:  #FBFCFE;
    --n-50:  #F5F7FB;
    --n-100: #EDF0F7;
    --n-200: #E2E7F0;
    --n-300: #CBD3E1;
    --n-400: #94A3B8;
    --n-500: #64748B;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1E293B;
    --n-900: #0F172A;

    /* Semantic */
    --ok:     #10B981;  --ok-bg:     #ECFDF5;  --ok-fg:     #047857;
    --warn:   #F59E0B;  --warn-bg:   #FFFBEB;  --warn-fg:   #B45309;
    --danger: #EF4444;  --danger-bg: #FEF2F2;  --danger-fg: #B91C1C;
    --info:   #3B82F6;  --info-bg:   #EFF6FF;  --info-fg:   #1D4ED8;

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow:    0 6px 18px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
    --shadow-md: 0 12px 28px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.05);
    --shadow-lg: 0 24px 56px rgba(11,16,34,.18);

    --ring: 0 0 0 3px rgba(79,70,229,.16);

    /* One stack for both scripts: Latin resolves from Inter, Arabic falls
       through to Cairo per-glyph, so no direction switch is needed. */
    --font-sans: 'Inter', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-num:  'Inter', 'Segoe UI', Arial, sans-serif;

    /* Categorical chart ramp — consumed by the dashboard scripts. */
    --chart-1: #4F46E5;
    --chart-2: #06B6D4;
    --chart-3: #F59E0B;
    --chart-4: #10B981;
    --chart-5: #EC4899;
    --chart-6: #8B5CF6;
}

/* --------------------------------------------------------------- base/type */
body {
    font-family: var(--font-sans);
    background: var(--n-50);
    color: var(--n-700);
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .card-title {
    color: var(--n-900);
    font-weight: 600;
    letter-spacing: -.011em;
}

a { color: var(--brand-600); transition: color .15s ease; }
a:hover, a:focus { color: var(--brand-700); text-decoration: none; }

hr { border-top-color: var(--n-200); }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* Slim scrollbars everywhere except the dark chrome, which gets its own below. */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

/* ------------------------------------------------------------------ navbar */
.navbar-dark,
.navbar.navbar-expand-md.navbar-dark {
    background: linear-gradient(96deg, var(--ink-950) 0%, var(--ink-800) 55%, var(--brand-900) 145%);
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px -18px rgba(11,16,34,.9);
    padding-top: .45rem;
    padding-bottom: .45rem;
    z-index: 1030;
}

.navbar-dark .navbar-brand,
.navbar-brand { padding-top: 0 !important; padding-bottom: 0 !important; }

.navbar-brand a {
    color: #fff !important;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .005em;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* Hairline separating the brand lockup from the nav, mirrors with direction. */
.navbar-dark .navbar-brand { position: relative; }
@media (min-width: 768px) {
    .navbar-dark .navbar-brand::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        top: 18%;
        bottom: 18%;
        width: 1px;
        background: rgba(255,255,255,.10);
    }
}

.navbar-dark .navbar-nav-link {
    color: rgba(255,255,255,.70);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    transition: background .16s ease, color .16s ease;
}
.navbar-dark .navbar-nav-link:hover,
.navbar-dark .navbar-nav-link:focus,
.navbar-dark .navbar-nav-link.active,
.navbar-dark .show > .navbar-nav-link {
    color: #fff;
    background: rgba(255,255,255,.09);
}

.navbar-dark .sidebar-control { color: rgba(255,255,255,.62); }
.navbar-dark .sidebar-control:hover { color: #fff; }

/* The username trigger; the vendor rule pushes it down with a % padding. */
li.nav-item.dropdown.dropdown-user a.navbar-nav-link.dropdown-toggle {
    padding-top: .5rem !important;
    padding-bottom: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}

/* Notification bell count. */
li#container_noticiation span.badge {
    top: 2px;
    inset-inline-end: 2px;
    right: auto;
    background: var(--danger) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--ink-900);
    font-weight: 700;
}

/* ----------------------------------------------------------------- sidebar */
.sidebar-dark,
.sidebar-dark .card,
.sidebar-dark .card-sidebar-mobile {
    background: var(--ink-900);
    border: 0;
    box-shadow: none;
}

.sidebar-dark { border-inline-end: 1px solid rgba(255,255,255,.06); }

.sidebar-dark .sidebar-content { padding-top: .5rem; }

.sidebar-dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.sidebar-dark * { scrollbar-color: rgba(255,255,255,.14) transparent; }

/* Section heading */
.sidebar-dark .nav-item-header {
    color: rgba(255,255,255,.34);
    padding: 1rem 1.4rem .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-dark .nav-item-header > div {
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 700;
}

/* Top-level items become pills with room to breathe. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link {
    color: rgba(255,255,255,.66);
    border-radius: var(--radius-sm);
    margin: 2px .65rem;
    padding: .6rem .8rem;
    font-weight: 500;
    font-size: .82rem;
    transition: background .16s ease, color .16s ease;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link > i { opacity: .8; }

.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:focus {
    background: rgba(255,255,255,.07);
    color: #fff;
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover > i { opacity: 1; }

/* Active: indigo-tinted pill plus a cyan edge marker. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active:hover,
.sidebar-dark .nav-sidebar > .nav-item.nav-item-open > .nav-link {
    background: linear-gradient(90deg, rgba(79,70,229,.42), rgba(79,70,229,.12));
    color: #fff;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(129,137,248,.24);
}
[dir="rtl"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
[dir="rtl"] .sidebar-dark .nav-sidebar > .nav-item.nav-item-open > .nav-link {
    background: linear-gradient(270deg, rgba(79,70,229,.42), rgba(79,70,229,.12));
}

.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    top: 24%;
    bottom: 24%;
    inset-inline-start: -.65rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-400);
    box-shadow: 0 0 10px rgba(34,211,238,.7);
}
[dir="rtl"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active::before {
    border-radius: 3px 0 0 3px;
}

.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active > i { opacity: 1; color: var(--accent-300); }

/* Sub-menus */
.sidebar-dark .nav-group-sub {
    background: rgba(0,0,0,.26);
    border-radius: var(--radius-sm);
    margin: 2px .65rem .35rem;
    padding: .25rem 0;
}
.sidebar-dark .nav-group-sub .nav-link {
    color: rgba(255,255,255,.56);
    font-size: .8rem;
    padding: .42rem 1.1rem;
}
.sidebar-dark .nav-group-sub .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-dark .nav-group-sub .nav-link.active {
    color: var(--accent-300);
    font-weight: 600;
    background: transparent;
}

/* ------------------------------------------------------------- page header */
.page-header-light,
.page-header.page-header-light {
    background: var(--n-0);
    border-bottom: 1px solid var(--n-200);
    box-shadow: none;
}

.page-header .page-header-content { padding-top: 1.15rem; padding-bottom: 1.15rem; }
.page-header .page-title h4 {
    font-size: 1.1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: .1rem;
}
.page-header .page-title h4 > i { color: var(--brand-600); }

.breadcrumb-line-light { background: transparent; border-top: 1px solid var(--n-100); }
.breadcrumb-item, .breadcrumb-item a { color: var(--n-500); font-size: .8rem; }
.breadcrumb-item a:hover { color: var(--brand-600); }
.breadcrumb-item.active { color: var(--n-800); font-weight: 600; }

.content-wrapper { background: var(--n-50); }
.content { padding: 1.25rem 1.25rem 1.5rem; }

/* ------------------------------------------------------------------- cards */
.card {
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--n-0);
    margin-bottom: 1.25rem;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--n-100);
    padding: .95rem 1.25rem;
    border-radius: var(--radius) var(--radius) 0 0;
}
.card-title { font-size: .92rem; font-weight: 600; }
.card-body { padding: 1.25rem; }
.card-footer { background: var(--n-25); border-top: 1px solid var(--n-100); }

/* Header colour blocks used across the CRUD screens. */
.card-header.bg-info,
.card-header.bg-info-700,
.modal-header.bg-info,
.modal-header.bg-info-700 {
    background: linear-gradient(96deg, var(--brand-700), var(--brand-600) 65%, var(--brand-500)) !important;
    color: #fff !important;
    border-bottom: 0;
}
.card-header.bg-info .card-title,
.modal-header.bg-info-700 .modal-title,
.modal-header.bg-info .modal-title { color: #fff !important; }

/* --------------------------------------------------------------- modals -- */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--n-100); background: var(--n-25); }

/* ---------------------------------------------------------------- buttons */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .005em;
    padding: .5rem .95rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:focus, .btn.focus { box-shadow: var(--ring); }
.btn:active { transform: translateY(1px); }

/* style.css shipped grey-to-black gradients on the semantic buttons; these
   replace them with flat brand colour (the !important matches its own). */
.btn-primary,
.btn-info,
.bg-info:not(.badge):not(.card-header):not(.modal-header) {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
    background-image: none !important;
}
.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-info:focus {
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
    box-shadow: 0 6px 16px -6px rgba(79,70,229,.65);
}

.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
    background-image: none !important;
}
.btn-danger:hover { background: #DC2626 !important; border-color: #DC2626 !important; }

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

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

.btn-light, .btn-default {
    background: var(--n-0);
    border-color: var(--n-300);
    color: var(--n-700);
}
.btn-light:hover, .btn-default:hover { background: var(--n-100); border-color: var(--n-300); color: var(--n-900); }

.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-300); }
.btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.text-primary, .text-primary-600 { color: var(--brand-600) !important; }
.text-info { color: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-400) !important; }

/* ------------------------------------------------------------------- forms */
.form-control, .custom-select {
    border-radius: var(--radius-sm);
    border-color: var(--n-300);
    color: var(--n-800);
    background-color: var(--n-0);
    padding: .5rem .8rem;
    height: auto;
    font-size: .85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder { color: var(--n-400); }
.form-control:focus, .custom-select:focus {
    border-color: var(--brand-400);
    box-shadow: var(--ring);
    background-color: var(--n-0);
}

/* style.css painted read-only inputs yellow; a muted fill reads as disabled
   without shouting. */
.form-control:read-only,
input:read-only {
    background-color: var(--n-100) !important;
    color: var(--n-600);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--n-100); }

label, .col-form-label { color: var(--n-700); font-weight: 600; font-size: .82rem; margin-bottom: .3rem; }

.input-group-text {
    background: var(--n-100);
    border-color: var(--n-300);
    color: var(--n-600);
    border-radius: var(--radius-sm);
}

.form-control-feedback { color: var(--n-400); }

.field-validation-error, .error, span.field-validation-error {
    color: var(--danger) !important;
    font-size: .78rem;
    display: inline-block;
    margin-top: .3rem;
    font-weight: 500;
}
.input-validation-error { border-color: var(--danger) !important; }

/* select2 — used on nearly every form in the app. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-sm) !important;
    border-color: var(--n-300) !important;
    min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-400) !important;
    box-shadow: var(--ring);
}
.select2-dropdown { border-color: var(--n-200); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-600) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--brand-50) !important;
    border-color: var(--brand-200) !important;
    color: var(--brand-700) !important;
    border-radius: var(--radius-xs) !important;
}

/* Uniform-styled checkboxes/radios */
.checker span.checked, .choice span.checked { border-color: var(--brand-600); }

/* ------------------------------------------------------------------ tables */
.table thead th {
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200) !important;
    border-top: 0;
    color: var(--n-600);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .7rem 1rem;
    white-space: nowrap;
}
.table td {
    padding: .75rem 1rem;
    border-top-color: var(--n-100);
    color: var(--n-700);
    vertical-align: middle;
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--brand-50); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--n-200); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-xs);
    border: 1px solid var(--n-300);
    padding: .35rem .6rem;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand-400); box-shadow: var(--ring); outline: 0; }
.dataTables_wrapper .dataTables_info { color: var(--n-500); font-size: .8rem; }

.paginate_button {
    border-radius: var(--radius-xs) !important;
    color: var(--n-600) !important;
    font-size: .8rem;
}
.paginate_button:hover { background: var(--n-100) !important; color: var(--n-900) !important; }
.paginate_button.current,
.pagination .page-item.active .page-link {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}
.pagination .page-link { color: var(--n-600); border-radius: var(--radius-xs); border-color: var(--n-200); }

.dt-buttons .btn { margin-inline-end: .35rem; }

/* ------------------------------------------------------------------ badges */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .7rem;
    padding: .35em .72em;
    letter-spacing: .01em;
}
.badge.bg-success, .badge-success { background-color: var(--ok) !important; color: #fff !important; }
.badge.bg-danger,  .badge-danger  { background-color: var(--danger) !important; color: #fff !important; }
.badge.bg-warning, .badge-warning, .badge.bg-warning-400 { background-color: var(--warn) !important; color: #fff !important; }
.badge.bg-info,    .badge-info    { background-color: var(--brand-600) !important; color: #fff !important; }
.badge.bg-secondary, .badge-secondary { background-color: var(--n-400) !important; color: #fff !important; }

/* Soft status pills — readable at small sizes, colour never carries meaning
   on its own because the label is always present. */
.pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .28rem .7rem; font-size: .74rem; font-weight: 600; }
.pill-ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.pill-warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.pill-danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill-info   { background: var(--brand-50);  color: var(--brand-700); }

/* ---------------------------------------------------------------- dropdown */
.dropdown-menu {
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .4rem;
    font-size: .84rem;
}
.dropdown-item { border-radius: var(--radius-xs); padding: .5rem .7rem; color: var(--n-700); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--brand-50); color: var(--brand-700); }
.dropdown-item > i { color: var(--n-400); margin-inline-end: .5rem; }
.dropdown-item:hover > i { color: var(--brand-600); }
.dropdown-header { color: var(--n-400); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }

/* Notification list inside the bell dropdown */
.media-list .media { border-radius: var(--radius-xs); padding: .6rem .7rem; }
.media-list .media:hover { background: var(--n-50); }

/* ------------------------------------------------------------------ alerts */
.alert { border-radius: var(--radius); border: 1px solid transparent; font-size: .84rem; }
.alert-success { background: var(--ok-bg);     border-color: #A7F3D0; color: var(--ok-fg); }
.alert-danger  { background: var(--danger-bg); border-color: #FECACA; color: var(--danger-fg); }
.alert-warning { background: var(--warn-bg);   border-color: #FDE68A; color: var(--warn-fg); }
.alert-info    { background: var(--brand-50);  border-color: var(--brand-200); color: var(--brand-700); }

/* ============================================================================
   DASHBOARD
   ============================================================================ */

/* Hero strip: greeting + context, sets the tone for the whole panel. */
.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(112deg, var(--ink-950) 0%, var(--ink-800) 46%, var(--brand-800) 100%);
    color: #fff;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
}
.hero-panel .hero-inner { position: relative; z-index: 1; }
.hero-panel h3 { color: #fff; margin-bottom: .3rem; font-size: 1.3rem; font-weight: 700; }
.hero-panel p  { color: rgba(255,255,255,.70); margin-bottom: 0; font-size: .86rem; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-300);
    margin-bottom: .55rem;
}
.hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-400);
    box-shadow: 0 0 0 3px rgba(34,211,238,.22);
}

.hero-actions .btn-hero {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: .5rem .9rem;
    font-weight: 600;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.hero-actions .btn-hero:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Decorative wash — the elements carry aria-hidden in markup. */
.hero-orb, .hero-orb-2 { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-orb {
    width: 280px; height: 280px;
    top: -110px; inset-inline-end: -60px;
    background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.55), rgba(99,102,241,0) 66%);
}
.hero-orb-2 {
    width: 220px; height: 220px;
    bottom: -120px; inset-inline-end: 22%;
    background: radial-gradient(circle, rgba(34,211,238,.30), rgba(34,211,238,0) 68%);
}

/* ---- KPI tiles ---- */
.stat-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    background: var(--n-0);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--n-300); }

/* Top rule carries the tile's accent; always paired with an icon and a label,
   so colour is never the only signal. */
.stat-tile::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tile-accent, var(--brand-600));
}

.stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.stat-label {
    color: var(--n-500);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.stat-value {
    color: var(--n-900);
    font-family: var(--font-num);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: .5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat-meta { color: var(--n-500); font-size: .76rem; margin-top: .25rem; }

.stat-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    background: var(--tile-bg, var(--brand-50));
    color: var(--tile-accent, var(--brand-600));
}

/* Shimmer while the chart endpoints are still in flight. */
.is-loading {
    color: transparent !important;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 37%, var(--n-100) 63%);
    background-size: 400% 100%;
    animation: stat-shimmer 1.3s ease infinite;
    display: inline-block;
    min-width: 4.2rem;
}
@keyframes stat-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- chart cards ---- */
.chart-card .card-header { display: flex; align-items: center; justify-content: space-between; }
.chart-card .chart-sub { color: var(--n-500); font-size: .76rem; font-weight: 400; margin-top: .15rem; }
.chart-container { position: relative; }
.chart.has-fixed-height { height: 320px; }
.chart-tall.has-fixed-height { height: 360px; }

/* Empty state shown when an endpoint returns no rows. */
.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--n-400);
    font-size: .84rem;
    text-align: center;
}
.chart-empty i { font-size: 1.6rem; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .stat-tile, .stat-tile:hover { transition: none; transform: none; }
    .is-loading { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================================
   AUTH / LOGIN
   The shared login layout owns <body>, so the shell is fixed-position to escape
   the .page-content / .content-wrapper padding without a body class.
   ============================================================================ */
.auth-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    background: var(--n-50);
    z-index: 10;
    overflow: auto;
}

/* ---- brand side ---- */
.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem;
    background: linear-gradient(145deg, var(--ink-950) 0%, var(--ink-800) 42%, var(--brand-800) 100%);
    color: #fff;
}

/* Faint grid so the large dark field is not flat. Decorative. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 78%);
    pointer-events: none;
}

.auth-glow-a, .auth-glow-b { position: absolute; border-radius: 50%; pointer-events: none; }
.auth-glow-a {
    width: 520px; height: 520px;
    top: -180px; inset-inline-end: -160px;
    background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.50), rgba(99,102,241,0) 66%);
}
.auth-glow-b {
    width: 400px; height: 400px;
    bottom: -160px; inset-inline-start: -120px;
    background: radial-gradient(circle, rgba(34,211,238,.26), rgba(34,211,238,0) 68%);
}

.auth-brand-inner { position: relative; z-index: 1; max-width: 31rem; }

.auth-logo { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 2.4rem; }
.auth-logo img { height: 52px; width: auto; filter: invert(1); }
.auth-logo-text { font-size: 1.1rem; font-weight: 700; letter-spacing: .01em; }

.auth-brand h1 {
    color: #fff;
    font-size: 2.05rem;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: .85rem;
    letter-spacing: -.02em;
}
.auth-lede { color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.75; margin-bottom: 2.2rem; }

.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.auth-points li { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.88); font-size: .89rem; }
.auth-tick {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--accent-300);
    font-size: .8rem;
}

.auth-brand-foot {
    position: relative;
    z-index: 1;
    margin-top: 2.6rem;
    color: rgba(255,255,255,.42);
    font-size: .76rem;
}

/* ---- form side ---- */
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; }

.auth-card {
    width: 100%;
    max-width: 26.5rem;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.3rem 2.2rem;
}

.auth-mark { display: none; }   /* small screens only — see media query */

.auth-title { font-size: 1.45rem; font-weight: 700; color: var(--n-900); margin-bottom: .3rem; letter-spacing: -.02em; }
.auth-sub   { color: var(--n-500); font-size: .88rem; margin-bottom: 1.7rem; }

/* Icon-in-field. Logical inset keeps it on the correct side in both scripts. */
.auth-field { position: relative; margin-bottom: 1rem; }
.auth-field .form-control {
    padding-inline-start: 2.75rem;
    padding-inline-end: 2.6rem;
    height: 46px;
    background: var(--n-25);
}
.auth-field .form-control:focus { background: var(--n-0); }
.auth-field-icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 23px;
    transform: translateY(-50%);
    color: var(--n-400);
    font-size: .95rem;
    pointer-events: none;
    transition: color .15s ease;
    z-index: 2;
}
.auth-field .form-control:focus ~ .auth-field-icon { color: var(--brand-600); }

.auth-toggle-pw {
    position: absolute;
    inset-inline-end: .5rem;
    top: 23px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: .4rem .5rem;
    color: var(--n-400);
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    z-index: 2;
}
.auth-toggle-pw:hover { color: var(--brand-600); background: var(--n-100); }
.auth-toggle-pw:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }

.auth-validation { display: block; color: var(--danger); font-size: .78rem; margin-top: .3rem; }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .35rem 0 1.3rem;
}
.auth-row .custom-control-label, .auth-row label { margin: 0; font-weight: 500; color: var(--n-600); font-size: .84rem; }
.auth-row a { font-size: .84rem; font-weight: 600; }

.auth-check { display: inline-flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--brand-600); margin: 0; cursor: pointer; }

.btn-auth {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(100deg, var(--brand-700), var(--brand-600) 55%, var(--brand-500)) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: .93rem;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: filter .16s ease, transform .12s ease, box-shadow .16s ease;
    box-shadow: 0 8px 20px -6px rgba(79,70,229,.55);
}
.btn-auth:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -6px rgba(79,70,229,.62); color: #fff; }
.btn-auth:active { transform: translateY(1px); }
.btn-auth:focus-visible { outline: 2px solid var(--brand-800); outline-offset: 2px; }

/* The submit glyph points at the reading direction, so it flips with it. */
[dir="rtl"] .auth-arrow { transform: scaleX(-1); }

.auth-foot {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--n-100);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
}
.auth-foot a { color: var(--n-500); font-size: .8rem; }
.auth-foot a:hover { color: var(--brand-600); }
.auth-foot .auth-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--n-300); }

/* Legacy hook kept so the old .login-bg wrapper cannot re-add its border. */
.login-bg .card { border: 0; box-shadow: none; }

/* ---- responsive: the brand side is decorative, so it drops first ---- */
@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-panel { padding: 1.5rem 1.15rem; }
    .auth-mark { display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
    .auth-mark img { height: 58px; width: auto; }
}

@media (max-width: 400px) {
    .auth-card { padding: 1.6rem 1.25rem; }
    .auth-title { font-size: 1.3rem; }
}

/* --------------------------------------------------------- misc overrides */
/* blockUI, used on every form submit. The plugin's grey box and dark scrim are
   both dropped: the overlay stays fully transparent (it still swallows clicks,
   which is the whole point of blocking) and a single centred spinner carries the
   "working" signal instead of dimming the page. Markup + inline styling come
   from the $.blockUI.defaults block in wwwroot/js/site.js.
   style.css already forces .blockOverlay transparent; repeated here so this file
   stays the single place the loader is described. */
.blockOverlay { background: transparent !important; backdrop-filter: none !important; }

.app-loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: var(--n-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.app-loader-orb {
    position: relative;
    width: 48px;
    height: 48px;
}

/* Halo — breathes underneath the arcs so the card reads as "alive" even in the
   first frames, before a full rotation has had time to register. */
.app-loader-orb::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,70,229,.14), rgba(79,70,229,0) 70%);
    animation: app-halo 1.8s ease-in-out infinite;
}

/* Each arc is a conic gradient masked into a ring, so the stroke fades out
   along its own length. A plain border-based spinner can only do a hard-edged
   single-colour quarter, which is what makes it look cheap at this size. */
.app-loader-arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 90deg, rgba(79,70,229,0) 0deg, rgba(79,70,229,.18) 110deg, var(--brand-500) 270deg, var(--brand-700) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: app-spin .9s linear infinite;
}

/* Counter-rotating, cyan, and on a deliberately non-multiple duration — the two
   arcs drift in and out of phase instead of locking into one rigid figure. */
.app-loader-arc--inner {
    inset: 11px;
    background: conic-gradient(from 90deg, rgba(6,182,212,0) 0deg, rgba(6,182,212,.2) 120deg, var(--accent-500) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: app-spin 1.4s linear infinite reverse;
}

.app-loader-core {
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: var(--brand-600);
    animation: app-pulse 1.4s ease-in-out infinite;
}

@keyframes app-spin  { to { transform: rotate(360deg); } }
@keyframes app-halo  { 0%, 100% { transform: scale(.9);  opacity: .45; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes app-pulse { 0%, 100% { transform: scale(.6);  opacity: .3;  } 50% { transform: scale(1);   opacity: 1; } }

/* Slow everything right down rather than freezing it — a motionless spinner
   reads as a hung request, which is the opposite of what it is there to say. */
@media (prefers-reduced-motion: reduce) {
    .app-loader-arc   { animation-duration: 3s; }
    .app-loader-arc--inner { animation-duration: 4s; }
    .app-loader-orb::before,
    .app-loader-core  { animation-duration: 3s; }
}

/* SweetAlert confirm button follows the brand. */
.sweet-alert button.confirm { background-color: var(--brand-600) !important; border-radius: var(--radius-sm) !important; }
.sweet-alert button.cancel  { border-radius: var(--radius-sm) !important; }
.sweet-alert { border-radius: var(--radius-lg) !important; }

/* Footer bar in the main layout. */
.content-wrapper > .navbar.navbar-light {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--n-200);
    color: var(--n-500);
    font-size: .78rem;
    padding: .9rem 1.25rem;
}
.content-wrapper > .navbar.navbar-light .navbar-text { color: var(--n-500); }