/* =========================================================================
   density-rtl.css  —  Quick N Fresh admin density + RTL correction layer
   -------------------------------------------------------------------------
   Loaded LAST in <head> (after style.css) so these overrides win by source
   order — almost no !important needed. Purely additive: revert by removing
   the single <link> in layouts/admin/app.blade.php. Keep this file the only
   place density/RTL tweaks live so they stay reversible and auditable.

   Source of truth for the values below: multi-agent UX review (2026-06-24).
   Primary goal: kill the "every UI feels big, content is small" bloat by
   right-sizing controls, cards, tables and spacing — without touching layout
   structure or vendor theme files.
   ========================================================================= */

:root {
    /* Density tokens (tighter than the vendor 45px / 1.3125rem / 1rem scale) */
    --d-input-height: 38px;          /* was 45px */
    --d-input-sm-height: 32px;
    --d-card-padding: 0.875rem;      /* was 1.3125rem (21px) */
    --d-card-header-padding: 0.75rem 0.875rem;
    --d-table-cell-padding: 0.5rem 0.75rem;   /* was 0.96rem / 1rem */
    --d-form-group-margin: 12px;     /* was 16–25px */
    --d-label-margin: 4px;
    --d-content-top: 0.8rem;         /* was 1.2rem */
}

/* ---------------------------------------------------------------- *
 * 1. Form controls — the single biggest "everything is big" driver *
 * ---------------------------------------------------------------- */
div.form-control,
input.form-control,
select.form-control {
    height: var(--d-input-height);
}
.custom-select {
    height: var(--d-input-height);
    line-height: 22px;
}
textarea.form-control {
    height: auto;
    min-height: 80px;
}
.form-control-sm,
.custom-select-sm {
    height: var(--d-input-sm-height);
}

/* select2 single — keep in lockstep with native inputs */
.select2-container--default .select2-selection--single {
    height: var(--d-input-height);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: var(--d-input-height);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
/* multi-select: shorter floor, capped height so many tags scroll instead of growing */
.select2-container--default .select2-selection--multiple {
    min-height: 36px;
    max-height: 120px;
    overflow-y: auto;
}

/* ----------------------------------------- *
 * 2. Cards                                   *
 * ----------------------------------------- */
.card-body {
    padding: var(--d-card-padding);
}
.card-header {
    padding: var(--d-card-header-padding);
}
.card-header h3,
.card-header h5 {
    margin-bottom: 2px;
    font-size: 15px;
}
.card-header p {
    margin-bottom: 0;
    font-size: 12px;
}

/* ----------------------------------------- *
 * 3. Tables                                  *
 * ----------------------------------------- */
.table th,
.table td {
    padding: var(--d-table-cell-padding);
}
.space-around-16 .table th,
.space-around-16 .table td {
    padding: var(--d-table-cell-padding);
}
.card-table th,
.card-table td {
    padding-inline: 0.6rem;
}
.table .badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ----------------------------------------- *
 * 4. Toolbars / buttons                      *
 * ----------------------------------------- */
.search--button-wrapper {
    margin: 0 -4px;
}
.search--button-wrapper > * {
    margin: 4px;
}
.search--button-wrapper *[class*="btn--"] {
    padding: 8px 14px;
    font-size: 0.875rem;
}

/* ----------------------------------------- *
 * 5. Forms                                   *
 * ----------------------------------------- */
.form-group {
    margin-bottom: var(--d-form-group-margin);
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-label,
.input-label {
    margin-bottom: var(--d-label-margin);
    font-size: 13px;
}
.mb-20 {
    margin-bottom: var(--d-form-group-margin);
}

/* ----------------------------------------- *
 * 6. Page chrome                             *
 * ----------------------------------------- */
.page-header {
    padding-bottom: 6px;
}
.page-header-title {
    margin-bottom: 4px;
}
.page-header .btn--primary {
    margin-bottom: 4px;
}
.main .content {
    padding-top: var(--d-content-top);
}
aside .navbar-nav > .nav-item:not(:first-child) {
    margin-top: 8px;
}

/* ----------------------------------------- *
 * 7. Dashboard stat cards                     *
 * ----------------------------------------- */
.__dashboard-card-2 {
    padding: 14px;
}
.__dashboard-card-2 img {
    margin-bottom: 8px;
}
.__dashboard-card-2 .name,
.__dashboard-card-2 .count {
    margin-bottom: 3px;
}
/* min-heights that pinned cards larger than their content */
.order--card {
    min-height: 55px;
    padding: 12px 14px;
}
.top--deliveryman {
    min-height: 108px;
    padding: 8px;
}
.top--rated-food {
    min-height: 115px;
    padding: 8px;
}
.dashboard--card {
    min-height: 112px;
}

/* ----------------------------------------- *
 * 8. Image upload drop zones                  *
 * ----------------------------------------- */
.upload-file__wrapper {
    block-size: 80px;
    min-inline-size: 80px;
}
.inputDnD .form-control-file {
    min-block-size: 80px;
}

/* ----------------------------------------- *
 * 9. Modals                                  *
 * ----------------------------------------- */
.modal-body {
    padding: 1rem;
}
.modal-body.pb-4,
.modal-body.pb-5 {
    padding-bottom: 1rem;
}

/* ----------------------------------------- *
 * 10. Pagination                             *
 * ----------------------------------------- */
.page-item .page-link {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}
.pagination {
    gap: 2px;
}

/* ----------------------------------------- *
 * 11. Toggle switches (row height only —      *
 *     keep knob geometry to avoid misalign)   *
 * ----------------------------------------- */
.toggle-switch-sm {
    min-height: 32px;
}

/* ----------------------------------------- *
 * 12. Loading overlay — give it a backdrop    *
 * ----------------------------------------- */
#loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}
#loading.initial-hidden,
#loading.hidden,
#loading[style*="display: none"] {
    display: none;
}

/* =========================================================================
   RTL CORRECTIONS  —  all gated under [dir="rtl"] so LTR is untouched
   ========================================================================= */

/* Arabic readability: taller line-height (Arabic needs room for tashkeel).
   The self-hosted Arabic webfont (Alexandria) is defined via @font-face below.
   We intentionally do NOT set letter-spacing (breaks ligatures). */
html[dir="rtl"] {
    line-height: 1.8;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    line-height: 1.7;
}

/* Mirror directional nav icons so prev/next + collapse point the right way.
   Tight allow-list: ONLY horizontal directional glyphs. Vertical arrows
   (up/down carets, downloads), search, globe, clear/X and other symmetric
   glyphs are intentionally excluded — never blanket-flip [class*="tio-arrow"]. */
[dir="rtl"] .tio-chevron-left,
[dir="rtl"] .tio-chevron-right,
[dir="rtl"] .tio-first-page,
[dir="rtl"] .tio-last-page,
[dir="rtl"] .tio-arrow-forward,
[dir="rtl"] .tio-arrow-backward {
    display: inline-block;
    transform: scaleX(-1);
}

/* File-delete / edit-pen buttons hardcoded to the right edge → start side */
[dir="rtl"] .remove-file-button,
[dir="rtl"] .image-delete-icon {
    right: auto;
    left: 15px;
}

/* Sticky action footer rounded corner lands on the correct side */
[dir="rtl"] .footer-sticky {
    border-radius: 0 15px 0 0;
}

/* Custom checkbox label spacing → logical so the tick sits on the start side */
.custom_checkbox .label-text {
    padding-inline-start: 22px;
    padding-left: unset;
}

/* Language dropdown anchored to the correct side in RTL */
[dir="rtl"] .dropdown-menu.lang-menu {
    left: 0;
    right: unset;
}

/* Sidebar order-count badges (Bootstrap 4 .ml-1 is a physical margin-left,
   never mirrored by dir="rtl"). In LTR it sits between the label text and
   the badge; in RTL the inline flow reverses so the badge renders to the
   *left* of the label, and an un-mirrored margin-left then pushes it away
   from its own label instead of anchoring it — the badge visually detaches
   from what it is counting. Scoped to the sidebar badge wrapper only. */
[dir="rtl"] .sidebar--badge-container .badge.ml-1 {
    margin-left: 0;
    margin-right: .25rem;
}

/* Global-search modal Esc dismiss button: `position-absolute right-0` is a
   physical CSS position, never mirrored by dir="rtl", so it keeps anchoring
   to the physical right edge — which is now the *reading-start* edge in
   RTL, sitting on top of the search input instead of at its far end. */
[dir="rtl"] #staticBackdrop .position-absolute.right-0 {
    right: auto;
    left: 0;
}

/* ---------------------------------------------------------------- *
 * Arabic font — Alexandria (self-hosted variable TTF, OFL).        *
 * The vendor theme ships Open Sans (Latin-first, weak Arabic       *
 * coverage). Alexandria is added as the Arabic-glyph fallback      *
 * everywhere, and as the PRIMARY family when the panel is RTL.     *
 * ---------------------------------------------------------------- */
/* The new Saudi Riyal sign (U+20C1, SAMA 2025) — Alexandria has no glyph
 * for it. A 2 KB font holding only the sign, the bidi marks and the narrow
 * no-break space the price text uses. `unicode-range` means the browser
 * downloads it only on a page that actually shows one of those characters,
 * and uses it for nothing else. Listed FIRST in the family below. */
@font-face {
    font-family: 'SaudiRiyal';
    src: url('../fonts/saudi-riyal/SaudiRiyal.woff2') format('woff2'),
         url('../fonts/saudi-riyal/SaudiRiyal.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1, U+202F, U+200E-200F, U+2066-2069;
}

@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/alexandria/Alexandria.ttf') format('truetype');
    font-weight: 200 900;   /* variable axis */
    font-style: normal;
    font-display: swap;
}

/* Alexandria as the UNIVERSAL admin font — content + navigation, everywhere.
   Overrides the vendor Inter / Poppins / Roboto / Public Sans stacks.
   EXCLUDES icon fonts (tio = 'The-Icon-of', FontAwesome, Material) and
   monospace/code so glyphs and code blocks keep their own family. Icon
   glyphs live in ::before (not matched by *), so they are safe regardless. */
body,
body *:not([class*="tio-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.material-icons):not(pre):not(code):not(kbd):not(samp) {
    font-family: 'SaudiRiyal', 'Alexandria', 'Open Sans', sans-serif !important;
}

/* =========================================================================
   HIDE vendor onboarding / multi-vertical cruft (single-vertical KSA grocery)
   ========================================================================= */
/* Guided product-tour launcher button (bootstrap-tour walkthrough) */
.toggle-tour {
    display: none !important;
}
/* Top-navbar module switcher — Grocery is the only active module */
.__nav-item:has(> .module--nav-icon) {
    display: none !important;
}