/* ==========================================================================
   Storex design system for the LMS panel

   The two panels are one product, so this file carries the Storex look over:
   every token below is copied verbatim from the Storex admin build
   (storex/public/assets/css/styles.min.css — the Modernize theme) so the
   colours, radii, shadows and typography match rather than approximate.

   It is applied *on top of* the vendored Bootstrap 5.3 this panel already
   loads instead of pulling in that 350 KB theme build, because the theme
   ships an LTR-only Bootstrap that would break the Arabic layout and pulls
   its webfont from Google Fonts. Both constraints matter here:
   the panel is used from locker sites with flaky internet, and Arabic is a
   supported locale. The font is vendored under public/vendor/fonts instead.

   Bootstrap 5.3 drives most components from CSS custom properties, so the
   :root block does the bulk of the work; the sections after it override the
   handful of components that hardcode their colours.
   ========================================================================== */

/* ── Plus Jakarta Sans — the Storex typeface ───────────────────────────────
   Variable build (weights 200-800 in one file), vendored locally, matching
   how Cairo is handled for Arabic below. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-variable.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Theme tokens ─────────────────────────────────────────────────────────
   Storex's palette, typography and shape scale. Everything Bootstrap drives
   off custom properties — links, borders, radii, focus rings, alerts, subtle
   backgrounds, form validation, text/bg utilities — picks these up for free. */
:root,
[data-bs-theme='light'] {
    --bs-primary: #5D87FF;
    --bs-secondary: #49BEFF;
    --bs-success: #13DEB9;
    --bs-info: #539BFF;
    --bs-warning: #FFAE1F;
    --bs-danger: #FA896B;
    --bs-light: #F6F9FC;
    --bs-dark: #2A3547;

    --bs-primary-rgb: 93, 135, 255;
    --bs-secondary-rgb: 73, 190, 255;
    --bs-success-rgb: 19, 222, 185;
    --bs-info-rgb: 83, 155, 255;
    --bs-warning-rgb: 255, 174, 31;
    --bs-danger-rgb: 250, 137, 107;
    --bs-light-rgb: 246, 249, 252;
    --bs-dark-rgb: 42, 53, 71;

    /* Storex's pastel tints — used by alerts and every *-subtle utility. */
    --bs-primary-text-emphasis: #253666;
    --bs-secondary-text-emphasis: #1d4c66;
    --bs-success-text-emphasis: #08594a;
    --bs-info-text-emphasis: #213e66;
    --bs-warning-text-emphasis: #66460c;
    --bs-danger-text-emphasis: #64372b;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;

    --bs-primary-bg-subtle: #dfe7ff;
    --bs-secondary-bg-subtle: #dbf2ff;
    --bs-success-bg-subtle: #d0f8f1;
    --bs-info-bg-subtle: #ddebff;
    --bs-warning-bg-subtle: #ffefd2;
    --bs-danger-bg-subtle: #fee7e1;
    --bs-light-bg-subtle: #fbfcfe;
    --bs-dark-bg-subtle: #7C8FAC;

    --bs-primary-border-subtle: #becfff;
    --bs-secondary-border-subtle: #b6e5ff;
    --bs-success-border-subtle: #a1f2e3;
    --bs-info-border-subtle: #bad7ff;
    --bs-warning-border-subtle: #ffdfa5;
    --bs-danger-border-subtle: #fdd0c4;
    --bs-light-border-subtle: #EAEFF4;
    --bs-dark-border-subtle: #5A6A85;

    --bs-font-sans-serif: 'Plus Jakarta Sans', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: #5A6A85;
    --bs-body-color-rgb: 90, 106, 133;
    --bs-heading-color: #2A3547;
    --bs-emphasis-color: #2A3547;

    --bs-secondary-color: rgba(90, 106, 133, 0.75);
    --bs-secondary-color-rgb: 90, 106, 133;
    --bs-secondary-bg: #EAEFF4;
    --bs-secondary-bg-rgb: 234, 239, 244;
    --bs-tertiary-color: rgba(90, 106, 133, 0.5);
    --bs-tertiary-color-rgb: 90, 106, 133;
    --bs-tertiary-bg: #F6F9FC;
    --bs-tertiary-bg-rgb: 246, 249, 252;

    --bs-link-color: #5D87FF;
    --bs-link-color-rgb: 93, 135, 255;
    --bs-link-hover-color: #4a6ccc;
    --bs-link-hover-color-rgb: 74, 108, 204;

    --bs-border-color: #ebf1f6;
    --bs-border-radius: 7px;
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: 15px;
    --bs-border-radius-xl: 12px;

    --bs-focus-ring-color: rgba(93, 135, 255, 0.25);
    --bs-form-valid-color: #13DEB9;
    --bs-form-valid-border-color: #13DEB9;
    --bs-form-invalid-color: #FA896B;
    --bs-form-invalid-border-color: #FA896B;

    /* Storex's shell geometry. */
    --storex-sidebar-width: 270px;
    --storex-topbar-height: 70px;
}

body {
    background-color: ghostwhite;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
}

/* Bootstrap's .text-muted resolves to --bs-secondary-color; the panel leans on
   it heavily for table meta, so anchor it to the Storex muted grey. */
.text-muted {
    color: #5A6A85 !important;
    opacity: .75;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Bootstrap compiles literal colours into each variant, so the theme's
   variants are restated here. */
.btn {
    --bs-btn-border-radius: 7px;
    --bs-btn-font-weight: 400;
}

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: #5D87FF; --bs-btn-border-color: #5D87FF;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4f73d9; --bs-btn-hover-border-color: #4a6ccc;
    --bs-btn-focus-shadow-rgb: 117, 153, 255;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #4a6ccc; --bs-btn-active-border-color: #4665bf;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5D87FF; --bs-btn-disabled-border-color: #5D87FF;
}

.btn-secondary {
    --bs-btn-color: #fff; --bs-btn-bg: #49BEFF; --bs-btn-border-color: #49BEFF;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3ea2d9; --bs-btn-hover-border-color: #3a98cc;
    --bs-btn-focus-shadow-rgb: 100, 200, 255;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #3a98cc; --bs-btn-active-border-color: #378fbf;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #49BEFF; --bs-btn-disabled-border-color: #49BEFF;
}

.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: #13DEB9; --bs-btn-border-color: #13DEB9;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #10bd9d; --bs-btn-hover-border-color: #0fb294;
    --bs-btn-focus-shadow-rgb: 54, 227, 196;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0fb294; --bs-btn-active-border-color: #0ea78b;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #13DEB9; --bs-btn-disabled-border-color: #13DEB9;
}

.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #539BFF; --bs-btn-border-color: #539BFF;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4784d9; --bs-btn-hover-border-color: #427ccc;
    --bs-btn-focus-shadow-rgb: 109, 170, 255;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #427ccc; --bs-btn-active-border-color: #3e74bf;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #539BFF; --bs-btn-disabled-border-color: #539BFF;
}

.btn-warning {
    --bs-btn-color: #fff; --bs-btn-bg: #FFAE1F; --bs-btn-border-color: #FFAE1F;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d9941a; --bs-btn-hover-border-color: #cc8b19;
    --bs-btn-focus-shadow-rgb: 255, 186, 65;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #cc8b19; --bs-btn-active-border-color: #bf8317;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #FFAE1F; --bs-btn-disabled-border-color: #FFAE1F;
}

.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: #FA896B; --bs-btn-border-color: #FA896B;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d5745b; --bs-btn-hover-border-color: #c86e56;
    --bs-btn-focus-shadow-rgb: 251, 155, 129;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #c86e56; --bs-btn-active-border-color: #bc6750;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #FA896B; --bs-btn-disabled-border-color: #FA896B;
}

.btn-light {
    --bs-btn-color: #2A3547; --bs-btn-bg: #F6F9FC; --bs-btn-border-color: #F6F9FC;
    --bs-btn-hover-color: #2A3547; --bs-btn-hover-bg: #d1d4d6; --bs-btn-hover-border-color: #c5c7ca;
    --bs-btn-focus-shadow-rgb: 209, 212, 214;
    --bs-btn-active-color: #2A3547; --bs-btn-active-bg: #c5c7ca; --bs-btn-active-border-color: #b9bbbd;
    --bs-btn-disabled-color: #2A3547; --bs-btn-disabled-bg: #F6F9FC; --bs-btn-disabled-border-color: #F6F9FC;
}

.btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: #2A3547; --bs-btn-border-color: #2A3547;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #242d3c; --bs-btn-hover-border-color: #222a39;
    --bs-btn-focus-shadow-rgb: 74, 83, 99;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #222a39; --bs-btn-active-border-color: #202835;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #2A3547; --bs-btn-disabled-border-color: #2A3547;
}

.btn-outline-primary {
    --bs-btn-color: #5D87FF; --bs-btn-border-color: #5D87FF;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5D87FF; --bs-btn-hover-border-color: #5D87FF;
    --bs-btn-focus-shadow-rgb: 93, 135, 255;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #5D87FF; --bs-btn-active-border-color: #5D87FF;
    --bs-btn-disabled-color: #5D87FF; --bs-btn-disabled-border-color: #5D87FF;
}

/* The panel's default "quiet" button. Bootstrap's outline-secondary would be
   sky blue under this palette, which reads as a primary action — keep it a
   neutral grey outline so toolbars stay calm, as they do in Storex. */
.btn-outline-secondary {
    --bs-btn-color: #5A6A85; --bs-btn-border-color: #DFE5EF;
    --bs-btn-hover-color: #5D87FF; --bs-btn-hover-bg: #ECF2FF; --bs-btn-hover-border-color: #becfff;
    --bs-btn-focus-shadow-rgb: 93, 135, 255;
    --bs-btn-active-color: #5D87FF; --bs-btn-active-bg: #ECF2FF; --bs-btn-active-border-color: #becfff;
    --bs-btn-disabled-color: #5A6A85; --bs-btn-disabled-border-color: #DFE5EF;
}

.btn-outline-success {
    --bs-btn-color: #13DEB9; --bs-btn-border-color: #13DEB9;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #13DEB9; --bs-btn-hover-border-color: #13DEB9;
    --bs-btn-focus-shadow-rgb: 19, 222, 185;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #13DEB9; --bs-btn-active-border-color: #13DEB9;
    --bs-btn-disabled-color: #13DEB9; --bs-btn-disabled-border-color: #13DEB9;
}

.btn-outline-warning {
    --bs-btn-color: #FFAE1F; --bs-btn-border-color: #FFAE1F;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #FFAE1F; --bs-btn-hover-border-color: #FFAE1F;
    --bs-btn-focus-shadow-rgb: 255, 174, 31;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #FFAE1F; --bs-btn-active-border-color: #FFAE1F;
    --bs-btn-disabled-color: #FFAE1F; --bs-btn-disabled-border-color: #FFAE1F;
}

.btn-outline-danger {
    --bs-btn-color: #FA896B; --bs-btn-border-color: #FA896B;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #FA896B; --bs-btn-hover-border-color: #FA896B;
    --bs-btn-focus-shadow-rgb: 250, 137, 107;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #FA896B; --bs-btn-active-border-color: #FA896B;
    --bs-btn-disabled-color: #FA896B; --bs-btn-disabled-border-color: #FA896B;
}

/* ── Cards ────────────────────────────────────────────────────────────────
   Storex cards are borderless with a soft double shadow. */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: 7px;
    --bs-card-inner-border-radius: 7px;
    --bs-card-title-color: #2A3547;
    --bs-card-subtitle-color: #2A3547;
    --bs-card-cap-padding-y: 15px;
    box-shadow: rgba(145, 158, 171, 0.2) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
}

/* Several views pair .card with .shadow-sm; let the theme shadow win. */
.card.shadow-sm {
    box-shadow: rgba(145, 158, 171, 0.2) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px !important;
}

.card-header {
    color: #2A3547;
    font-weight: 600;
    border-bottom-color: #ebf1f6;
}

/* ── Forms ────────────────────────────────────────────────────────────────*/
.form-label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2A3547;
}

.form-control,
.form-select {
    color: #5A6A85;
    border-color: #DFE5EF;
    border-radius: 7px;
}

.form-control:focus,
.form-select:focus {
    color: #5A6A85;
    border-color: #aec3ff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(93, 135, 255, 0.25);
}

.form-check-input:checked {
    background-color: #5D87FF;
    border-color: #5D87FF;
}

.form-check-input:focus {
    border-color: #aec3ff;
    box-shadow: 0 0 0 0.25rem rgba(93, 135, 255, 0.25);
}

.input-group-text {
    border-color: #DFE5EF;
    background-color: #F6F9FC;
    color: #5A6A85;
}

/* ── Tables ───────────────────────────────────────────────────────────────*/
.table {
    --bs-table-border-color: #ebf1f6;
    --bs-table-striped-bg: #F6F9FC;
    --bs-table-hover-bg: #F6F9FC;
    --bs-table-color: #5A6A85;
}

.table > thead {
    color: #2A3547;
}

.table > thead th {
    font-weight: 600;
    white-space: nowrap;
}

/* make scroll horizontal in tables */
.table-responsive {
    overflow-x: auto;
    white-space: nowrap;
}

/* ── Badges, pills, pagination, list groups ───────────────────────────────*/
.badge {
    --bs-badge-padding-x: 10px;
    --bs-badge-padding-y: 5px;
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 4px;
}

.nav-pills {
    --bs-nav-pills-border-radius: 7px;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #5D87FF;
}

.pagination {
    --bs-pagination-color: #5A6A85;
    --bs-pagination-border-color: #ebf1f6;
    --bs-pagination-border-radius: 7px;
    --bs-pagination-hover-color: #5D87FF;
    --bs-pagination-hover-bg: #ECF2FF;
    --bs-pagination-hover-border-color: #ebf1f6;
    --bs-pagination-focus-color: #5D87FF;
    --bs-pagination-focus-bg: #ECF2FF;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(93, 135, 255, 0.25);
    --bs-pagination-active-bg: #5D87FF;
    --bs-pagination-active-border-color: #5D87FF;
}

.list-group {
    --bs-list-group-border-color: #ebf1f6;
    --bs-list-group-border-radius: 7px;
    --bs-list-group-color: #5A6A85;
    --bs-list-group-action-hover-bg: #F6F9FC;
    --bs-list-group-active-bg: #5D87FF;
    --bs-list-group-active-border-color: #5D87FF;
}

.dropdown-menu {
    --bs-dropdown-border-color: #ebf1f6;
    --bs-dropdown-border-radius: 7px;
    --bs-dropdown-link-active-bg: #5D87FF;
    --bs-dropdown-link-hover-bg: #ECF2FF;
    box-shadow: rgba(145, 158, 171, 0.2) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
}

.alert {
    --bs-alert-border-radius: 7px;
}

/* Bootstrap's .text-bg-* utilities hardcode their colours too. */
.text-bg-primary { color: #fff !important; background-color: RGBA(93, 135, 255, var(--bs-bg-opacity, 1)) !important; }
.text-bg-secondary { color: #fff !important; background-color: RGBA(73, 190, 255, var(--bs-bg-opacity, 1)) !important; }
.text-bg-success { color: #fff !important; background-color: RGBA(19, 222, 185, var(--bs-bg-opacity, 1)) !important; }
.text-bg-info { color: #fff !important; background-color: RGBA(83, 155, 255, var(--bs-bg-opacity, 1)) !important; }
.text-bg-warning { color: #fff !important; background-color: RGBA(255, 174, 31, var(--bs-bg-opacity, 1)) !important; }
.text-bg-danger { color: #fff !important; background-color: RGBA(250, 137, 107, var(--bs-bg-opacity, 1)) !important; }
.text-bg-light { color: #2A3547 !important; background-color: RGBA(246, 249, 252, var(--bs-bg-opacity, 1)) !important; }
.text-bg-dark { color: #fff !important; background-color: RGBA(42, 53, 71, var(--bs-bg-opacity, 1)) !important; }

/* ── Admin shell ──────────────────────────────────────────────────────────
   Sidebar is static from 992px up and an offcanvas drawer below. Storex's is
   white with the wordmark on top and pill-shaped nav rows. */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0; /* lets wide tables/canvas scroll inside instead of widening the page */
    display: flex;
    flex-direction: column;
}

.admin-sidebar {
    --bs-offcanvas-width: var(--storex-sidebar-width);
    background-color: #fff;
}

@media (min-width: 992px) {
    /* offcanvas-lg goes static here and force-clears its background — restore the fill */
    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        flex: 0 0 var(--storex-sidebar-width);
        width: var(--storex-sidebar-width);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        background-color: #fff !important;
        border-inline-end: 1px solid #ebf1f6;
    }

    /* Let the nav column fill the full height so the language switch at the
       bottom of the partial actually lands at the bottom. */
    .admin-sidebar .offcanvas-body {
        flex: 1 1 auto;
    }
}

/* Brand block — matches the 70px .brand-logo band in Storex. The "LMS" tag
   next to the wordmark is what tells the two panels apart at a glance. */
.admin-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--storex-topbar-height);
}

.admin-sidebar .sidebar-brand img {
    width: 150px;
    max-width: 100%;
    height: auto;
}

.admin-sidebar .sidebar-brand-tag {
    padding: 2px 7px;
    border-radius: 4px;
    background-color: #ECF2FF;
    color: #5D87FF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 18px;
}

.admin-sidebar .offcanvas-header {
    padding-inline: 24px;
}

.admin-sidebar .offcanvas-body {
    padding: 0 24px 24px;
}

/* Storex's .nav-small-cap section captions. */
.admin-sidebar .sidebar-heading {
    margin-top: 24px;
    padding: 3px 12px;
    color: #2A3547;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
}

/* Storex's .sidebar-link rows. */
.admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 2px;
    padding: 10px;
    border-radius: 7px;
    color: #2A3547;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    white-space: nowrap;
}

.admin-sidebar .nav-link i {
    font-size: 20px;
    line-height: 1;
}

.admin-sidebar .nav-link:hover {
    background-color: #ECF2FF;
    color: #5D87FF;
}

.admin-sidebar .nav-link.active {
    background-color: #5D87FF;
    color: #fff;
}

/* Topbar — Storex's .app-header: white, 70px, borderless with the content
   below it carrying the separation. */
.admin-main > .navbar {
    min-height: var(--storex-topbar-height);
    padding-inline: 25px;
    background-color: #fff;
    border-bottom: 1px solid #ebf1f6;
}

.admin-main > .navbar .avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Per-locker tab strip ─────────────────────────────────────────────────
   Chrome rendered by components/locker-nav.blade.php on all four per-locker
   screens. Logical properties throughout so the Arabic (RTL) build mirrors
   without a second rule set. */
.locker-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Room for the descenders of the active tab's bottom border while
       scrolled, and no scrollbar flash on desktop. */
    scrollbar-width: thin;
}

.locker-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #2A3547;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.locker-tabs .nav-link:hover {
    background-color: #ECF2FF;
    color: #5D87FF;
}

.locker-tabs .nav-link.active {
    color: #5D87FF;
    font-weight: 600;
}

.locker-tabs .locker-tab-icon {
    font-size: 16px;
    line-height: 1;
}

/* The affordance for the tooltip: muted until the tab is under the cursor,
   so the strip stays calm but the "there is help here" hint is always drawn. */
.locker-tabs .locker-tab-info {
    font-size: 13px;
    line-height: 1;
    opacity: .4;
}

.locker-tabs .nav-link:hover .locker-tab-info,
.locker-tabs .nav-link.active .locker-tab-info {
    opacity: .85;
}

.locker-tabs .badge {
    font-size: 11px;
    font-weight: 600;
}

/* Same sentence as the active tab's tooltip, kept on the page because the
   locker-site touchscreens have no hover. */
.locker-tab-hint {
    max-width: 90ch;
    margin-top: 12px;
    margin-bottom: 0;
}

/* ── Login ────────────────────────────────────────────────────────────────
   Storex's soft pastel wash behind the sign-in card. */
.radial-gradient {
    position: relative;
}

.radial-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% / 400% 400%;
}

.radial-gradient > * {
    position: relative;
}

/* ── Misc ─────────────────────────────────────────────────────────────────*/
/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: lightblue;
}

/* Overlay button on the 404 page */
.overlay .btn {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ── Arabic (RTL) typography ───────────────────────────────────────────────
   Self-hosted Cairo (woff2 under public/vendor/fonts/cairo), consistent with
   the offline-first vendoring of bootstrap — no CDN dependency. Applies only
   when the panel is in RTL (Arabic selected); LTR/English is untouched. The
   system Arabic stack is the fallback if a woff2 fails to load. */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/cairo/cairo-arabic-400-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/cairo/cairo-arabic-700-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/cairo/cairo-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/cairo/cairo-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[dir="rtl"] body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
}