/* muaadh-core.css — generated by css:split. Loaded on every page (all roles). */ /* Font loading: handled at runtime by @themeStyles directive (reads theme_font_primary + theme_font_heading from ThemeService and emits the matching Google Fonts ). */ /* JS-bound class names — DO NOT rename without coordinated JS update. Authoritative list: docs/js-bound-classes.md (audit #5). Quick: muaadh-display-none, muaadh-state--{show,collapsed}, muaadh-menu__list, muaadh-mobile-overlay, muaadh-cart-count--updated, muaadh-search-hub__{panel,suggestion,tab}--active, muaadh-search-hub__input-wrap--loading, muaadh-vehicle-search__*, muaadh-vehicle-vin-dialog--open, muaadh-assistant-{panel,trigger}--open, muaadh-fullview-loader--active, muaadh-fullview-viewport--zoomed. */ /* ============================================================================ 1. VENDOR INLINED ============================================================================ */ /* ============================================================================ VENDOR CSS ============================================================================ */ /* ============================================================================ 2. TOKENS & ROOT VARS ============================================================================ */ /* ============================================================================ MUAADH DESIGN SYSTEM - Unified CSS ============================================================================ Structure: 1. TOKENS (CSS Variables) 2. BASE (Reset, Typography) 3. GRID (Layout Grid System) 4. ICONS 5. COMPONENTS (Buttons, Badges, Cards, Forms, Tables, Alerts, Modals, etc) 6. LAYOUT (Header, Footer, Shell) 7. PAGES (Home, Catalog, Cart, Blog, Dashboard) 8. UTILITIES 9. RESPONSIVE (Media Queries - MUST be last) Note: RTL styles are loaded separately when needed ============================================================================ */ /* ============================================================================ 1. TOKENS - CSS Variables ============================================================================ */ /* ============================================================================ SEMANTIC TOKENS ============================================================================ Layer 1: Maps raw --theme-* values (from muaadh-tokens.css) to semantic meaning. Loaded FIRST among project CSS. muaadh-tokens.css loads LAST to provide values. Token hierarchy: muaadh-tokens.css (raw values, auto-generated, loaded LAST) | tokens.css (semantic mapping, loaded FIRST) | Component files (consume tokens, NEVER define colors) ============================================================================ */ :root { --action-primary-light: var(--theme-primary-light); --action-primary-muted: var(--theme-primary-light); --action-danger-hover: var(--theme-danger-hover); --action-danger-light: var(--theme-danger-light); --action-success-light: var(--theme-success-light); --action-warning-hover: var(--theme-warning-hover); --action-warning-light: var(--theme-warning-light); --action-info-light: var(--theme-info-light); --surface-sunken: var(--theme-bg-gray); --surface-inverse: var(--theme-bg-dark); --text-body: var(--theme-text-primary); --text-link: var(--theme-link); --text-link-hover: var(--theme-link-hover); --text-on-primary: var(--theme-text-on-primary); --text-on-success: var(--theme-text-on-success); --text-on-danger: var(--theme-text-on-danger); --text-on-warning: var(--theme-text-on-warning); --text-on-info: var(--theme-text-on-info); --text-on-dark: var(--theme-text-on-dark); --border-color: var(--theme-border); --border-strong: var(--theme-border-dark); --border-focus: var(--theme-primary); --radius-sm: var(--chassis-radius-sm); --radius-md: var(--chassis-radius); --radius-lg: var(--chassis-radius-lg); --radius-xl: var(--chassis-radius-xl); --radius-full: var(--chassis-radius-pill); --shadow-sm: var(--chassis-shadow-sm); --shadow-lg: var(--chassis-shadow-lg); --focus-ring: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2); --transition-fast: var(--chassis-duration-fast) ease; --space-1: clamp(0.22rem, 0.05vw + 0.21rem, 0.25rem); --space-1-5: clamp(0.33rem, 0.075vw + 0.315rem, 0.375rem); /* peak 6px — fills the 1↔2 gap (audit #2) */ --space-2: clamp(0.44rem, 0.10vw + 0.42rem, 0.5rem); --space-2-5: clamp(0.55rem, 0.125vw + 0.525rem, 0.625rem); /* peak 10px — fills the 2↔3 gap (audit #2) */ --space-3: clamp(0.66rem, 0.15vw + 0.63rem, 0.75rem); --space-4: clamp(0.875rem, 0.20vw + 0.84rem, 1rem); --space-5: clamp(1.10rem, 0.25vw + 1.05rem, 1.25rem); --space-6: clamp(1.31rem, 0.30vw + 1.26rem, 1.5rem); --space-8: clamp(1.75rem, 0.40vw + 1.68rem, 2rem); --space-10: clamp(2.19rem, 0.50vw + 2.10rem, 2.5rem); --space-12: clamp(2.62rem, 0.60vw + 2.52rem, 3rem); /* Container gutter — fixed (intentionally non-fluid). Used by .muaadh-shell padding. */ --m-gutter: 0.75rem; --text-xs: clamp(0.6875rem, 0.10vw + 0.66rem, 0.75rem); --text-sm: clamp(0.8125rem, 0.12vw + 0.78rem, 0.875rem); --text-base: clamp(0.9375rem, 0.14vw + 0.90rem, 1rem); --text-lg: clamp(1.0625rem, 0.16vw + 1.02rem, 1.125rem); --text-xl: clamp(1.1875rem, 0.18vw + 1.14rem, 1.25rem); --text-2xl: clamp(1.375rem, 0.30vw + 1.30rem, 1.5rem); --text-3xl: clamp(1.625rem, 0.50vw + 1.50rem, 1.875rem); --text-4xl: clamp(1.875rem, 0.80vw + 1.65rem, 2.25rem); /* ----- Image size tiers — fluid square thumbs/avatars/logos ----- * Five tiers that cover every fixed-size image in the project. * Each class below references one of these tokens directly; no * alias chains, no shared selector groups — every class keeps * its own rule with an explicit token reference. * * tier use case example class * ---- -------- ------------- * --size-img-xs : tiny inline brand mark .muaadh-cart__quality-logo * --size-img-sm : small avatar/thumb in list .muaadh-brand-summary__avatar * --size-img-md : medium card/sidebar avatar .muaadh-shell-sidebar__profile-avatar * --size-img-lg : cart-line image / brand img .muaadh-cart__item-image * --size-img-xl : preview / gallery / upload .muaadh-image-preview--h200 */ /* Each tier's MAX matches the most common original value used in * components that share the tier; the MIN is ~70-80% of the max * so layouts stay readable at 768px without surprise growth on * desktop. */ --size-img-xs: clamp(14px, 0.3vw + 12px, 16px); /* peak 16 (cart quality, fitment marks) */ --size-img-sm: clamp(24px, 0.6vw + 20px, 32px); /* peak 32 (offer avatars, original-part thumb) */ --size-img-md: clamp(40px, 0.8vw + 34px, 48px); /* peak 48 (sidebar profile, fitment brand) */ --size-img-lg: clamp(64px, 1.2vw + 52px, 80px); /* peak 80 (cart-image, brand-img, thumbnail-80) */ --size-img-xl: clamp(140px, 4.0vw + 100px, 200px); /* peak 200 (image previews, upload-large) */ /* Control sizes — for buttons, inputs, icon-only triggers (audit #2.5). * Independent from --space-* (which is for padding/gap/margin) and * --size-img-* (which is for actual image elements). Use these for any * width:/height: on a square interactive element. */ --size-control-xxs: clamp(16px, 0.4vw + 14px, 20px); /* peak 20 (tiny icons inside tags/inputs) */ --size-control-xs: clamp(20px, 0.5vw + 16px, 24px); /* peak 24 (mini buttons, tag close) */ --size-control-sm: clamp(28px, 0.5vw + 24px, 32px); /* peak 32 (small buttons, icon triggers) */ --size-control-md: clamp(32px, 0.5vw + 28px, 36px); /* peak 36 (medium buttons, default trigger) */ --size-control-lg: clamp(36px, 0.5vw + 32px, 40px); /* peak 40 (large buttons, input height) */ --size-control-xl: clamp(40px, 0.6vw + 36px, 48px); /* peak 48 (extra-large buttons, fab) */ --theme-btn-primary-bg: var(--theme-primary); --theme-btn-primary-text: var(--theme-text-on-primary); --theme-btn-primary-hover-bg: var(--theme-primary-hover); --theme-link: var(--theme-primary); --theme-link-hover: var(--theme-primary-hover); --theme-footer-link-hover: var(--theme-primary); --theme-card-border: var(--theme-border-light); --theme-catalogItem-name: var(--theme-primary); --theme-input-bg: var(--theme-card-bg); --theme-text: var(--theme-text-primary); --theme-bg-lighter: var(--theme-bg-light); --theme-danger-dark-alt: var(--theme-danger-hover); --chassis-radius-circle: 50%; --theme-font-xs: 12px; --theme-transition-fast: all var(--chassis-duration-fast) ease; --theme-transition: all var(--chassis-duration-normal) ease; --m-topbar-h: clamp(48px, 1.6vw + 36px, 64px); --m-modal-gap: 1rem; /* Safe viewport height for any FIXED floating element (modal / panel / dialog). Subtracts the topbar so floating elements never crash up into it. Use the -dvh variant for mobile (browser chrome aware). */ --m-safe-vh: calc(100vh - var(--m-topbar-h)); --m-safe-dvh: calc(100dvh - var(--m-topbar-h)); /* Standard inset/gap for any floating element from the viewport edges. */ --m-floating-gap: var(--space-3); --pc-bg: var(--theme-card-bg); --pc-radius: 12px; --pc-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --pc-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --pc-transition: all var(--chassis-duration-normal) ease; --pc-primary: var(--theme-primary); --pc-danger: var(--theme-danger); --pc-text: var(--theme-text-primary); --pc-text-muted: var(--theme-text-muted); } /* ============================================================================ 3. GRID - Layout Grid System ============================================================================ */ /* ============================================================================ MUAADH GRID SYSTEM ============================================================================ 12-column flexbox grid matching Bootstrap 5 breakpoints. RTL-safe via flex (inherently respects dir="rtl"). Uses CSS custom properties for gutters. ============================================================================ */ /* --- Catalog Item Card --- */ /* ======================================== CSS Variables (Theme Integration) ======================================== */ /* ============================================================================ 3. RESET + BASE ============================================================================ */ /* @keyframes muaadh-fullview-spin moved to the consolidated FULLVIEW section below. */ /* ============================================================================ 2. BASE - Reset & Typography ============================================================================ */ /* ============================================================================ BASE - Reset, typography, scrollbar, Google Fonts import Source: style.css A01, A02, B02, B03 ============================================================================ */ /* ============================================================================ A01 — RESET & BASE ELEMENTS (was: A02; A01 IMPORTS moved to top of file) ============================================================================ */ /* FIX: Prevent horizontal scroll on mobile (RTL white space issue) */ html, body { /* `clip` instead of `hidden` — the spec forces overflow-y to auto when * overflow-x is hidden, which creates duplicate scroll containers and * clips absolutely-positioned descendants like dropdowns. */ overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--theme-font-primary); font-size: var(--text-base); line-height: var(--theme-line-height); color: var(--theme-text-primary); background-color: var(--theme-bg-body); } input { outline: 0; } select { outline: 0; border: 0; } a { text-decoration: none; transition: all var(--chassis-duration-normal); } ul { list-style-type: none; padding: 0; margin-bottom: 0; } button { border: 0; background-color: transparent; } h1, h2 { font-weight: var(--theme-font-bold); line-height: 120%; font-family: var(--theme-font-heading); padding: 0; margin: 0; } h3, h4, h5, h6 { font-weight: var(--theme-font-semibold); line-height: 130%; font-family: var(--theme-font-heading); padding: 0; margin: 0; } /* Heading scale — single fluid step from desktop down to ~768px. * No media-query overrides anywhere; clamp() handles the curve. */ h1 { font-size: clamp(2rem, 1.6vw + 1.40rem, 4rem); } h2 { font-size: clamp(1.5rem, 1.0vw + 1.10rem, 3rem); } h3 { font-size: clamp(1.25rem, 0.8vw + 0.95rem, 2.5rem); line-height: 120%; } h4 { font-size: clamp(1.125rem, 0.6vw + 0.88rem, 2rem); } h5 { font-size: var(--text-2xl); } h6 { font-size: var(--text-xl); } p { margin: 0; padding: 0; font-size: var(--text-base); line-height: 170%; font-weight: var(--theme-font-normal); font-family: var(--theme-font-primary); } /* === Animations from A05 === */ /* ============================================================================ A05 — THEME BASE (Colors & Backgrounds) ============================================================================ */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track); } /* --- Loading --- */ /* ============================================================================ LOADING - Spinners, skeletons, empty state Source: style.css B13, B14, B24 ============================================================================ */ /* ========================================================================== B13 — LOADING & SPINNER ========================================================================== */ /* ========================================================================== B14 — EMPTY STATE ========================================================================== */ /* === From style.css B24: Loading skeletons === */ /* ============================================================================ B24 — LOADING SKELETONS ============================================================================ */ /* Loading Skeletons */ /* Pulse Animation */ /* ----- Utility Classes ----- */ /* --- Shell (Main App Structure) --- */ /** * ======================================== * SHELL - Unified Layout CSS * ======================================== * Single stylesheet for ALL roles (Store, User, Merchant, Courier, Operator) * Uses CSS variables from muaadh-tokens.css * Class prefix: sh- */ /* ===== 1. CSS RESET / BASE ===== */ *, *::before, *::after { box-sizing: border-box; } /* @keyframes callout-pulse moved to public/assets/css/muaadh-callouts.css (Phase 14b, 2026-05-10) */ /* gs-data-table — REMOVED (unused, hardcoded Saira/Poppins fonts) */ table tr { border-top: var(--chassis-border-thin) solid var(--theme-border-light); border-bottom: var(--chassis-border-thin) solid var(--theme-border-light); } table td, table th { border-right: var(--chassis-border-thin) solid var(--theme-border-light); border-left: var(--chassis-border-thin) solid var(--theme-border-light); } /* From: includes/delivery-workflow-dto.blade.php */ /* Select Option Text - Replaces: style="color: #333;" */ select option { color: var(--text-primary); } html { } /* ============================================================================ 4. GRID SYSTEM ============================================================================ */ /* (Grid utilities live with core components in section 5 — .muaadh-grid / .muaadh-row / .muaadh-col) */ /* ============================================================================ 5. CORE COMPONENTS ============================================================================ */ /* UI container figure reset — prevents default browser margins (1em 40px) inside components */ /* ============================================================================ 4. ICONS ============================================================================ */ /* ========================================================================== Muaadh Icon System SVG icon styles replacing Font Awesome ========================================================================== */ /* Base icon */ /* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */ /* Size variants */ /* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */ /* Fixed width (replaces fa-fw) */ /* ============================================================================ 5. COMPONENTS ============================================================================ */ /* --- Buttons --- */ /* ============================================================================ BUTTONS — .muaadh-action (canonical: muaadh-action.css, Band 13 Wave 6) ============================================================================ */ /* ACTION (button) base component moved to muaadh-action.css in Phase 3 * Wave 6 (2026-05-13). 309 lines extracted, 60 rules. 9 context-specific * overrides (.X .muaadh-action) remain below in their owning sections. */ /* Soft Badges */ /* --- Cards --- */ /* PANEL (card container) component moved to muaadh-panel.css in * Phase 3 Wave 14 (2026-05-13). 41 lines extracted, 6 rules. */ /* INPUT base states + settings-row layout moved to muaadh-form.css Phase 3 Wave 9 (2026-05-13). */ input:disabled, input[readonly] { background-color: var(--theme-bg-light); opacity: 0.7; cursor: not-allowed; } /* === Legacy form components extracted from utilities.css === */ /* --- Alerts --- */ /* ============================================================================ ALERTS — .muaadh-notice (canonical: muaadh-notice.css, Band 13 Wave 13) ============================================================================ */ /* ============================================================================ SECTION 8: ALERT COMPONENT ============================================================================ */ /* NOTICE base (alert component + status variants) moved to muaadh-notice.css Phase 3 Wave 13 (2026-05-13). */ /* === From style.css C11: Flat modern alerts === */ /* ============================================================================ C11 — ALERTS (Flat Modern) ============================================================================ */ /* DIALOG (modal system) base moved to muaadh-dialog.css in Phase 3 Wave 8 * (2026-05-13). 153 lines extracted, 23 rules. Contextual dialog rules * (shipping, callout, container-type) remain below in their owning sections. */ /* .muaadh-callout-dialog__body .muaadh-roster rules moved to public/assets/css/muaadh-callouts.css (Phase 14b, 2026-05-10) */ /* Modal - No transparency */ /* ============================================================================ SHIPPING MODAL STYLES ============================================================================ */ /* Shipping route info card */ /* Form inputs in modal */ /* Alerts in modal */ /* Modal Footer */ /* From: components/google-maps-picker.blade.php */ /* From: operator/catalog-item/images.blade.php */ /* --- Dropdowns --- */ /* ============================================================================ DROPDOWNS Source: style.css C15 ============================================================================ */ /* ============================================================================ C15 — DROPDOWN (Flat Modern) ============================================================================ */ /* --- Pagination --- */ /* ============================================================================ PAGINATION Source: style.css C13 ============================================================================ */ /* ============================================================================ C13 — PAGINATION (Flat Modern) ============================================================================ */ /* === C02-C04: Flat modern header/nav === */ /* ============================================================================ C02 — TOPBAR (Flat Modern) ============================================================================ */ /* Catalog level card body — tinted background from theme */ /* ============================================================================ 8. UTILITIES ============================================================================ */ /* ============================================================================ UTILITIES — atomic helpers (canonical: muaadh-utilities.css, Band 13) ============================================================================ */ /* Themed surfaces — use instead of inline style="background:var(--theme-...)" */ /* ACTION rules at orig lines 765-780 moved to muaadh-action.css Phase 13 Wave 2 (2026-05-13). */ /* ============================================================================ SECTION: UTILITY CLASSES FOR INLINE STYLE REPLACEMENT ============================================================================ These classes replace common inline styles found in admin/vendor views Usage: Replace style="..." with appropriate class ============================================================================ */ /* Image Upload Area - Replaces: style="width: 100%; height: 285px; border: var(--chassis-border-thin) dashed #ddd; background: #f1f1f1;" */ /* Readonly Field Background - Replaces: style="background: #f5f5f5;" */ input[readonly], textarea[readonly] { background-color: var(--surface-elevated); cursor: not-allowed; } /* ============================================================================ 4. LINK COMPONENT ============================================================================ */ /* NOTICE dismissible extras moved to muaadh-notice.css Phase 3 Wave 13 (2026-05-13). */ /* ============================================================================ 6. FORM INPUT COMPONENT ============================================================================ */ /* INPUT canonical + textarea + select + input-group moved to muaadh-form.css Phase 3 Wave 9 (2026-05-13). */ /* List Link Items */ /* List with Dividers */ /* Compact List */ /* Responsive Spacing - XL */ /* ============================================================================ 22. TABS COMPONENT ============================================================================ */ /* Pills variant */ /* Vertical variant */ /* Tab Content Container */ /* ============================================================================ 23.8 BUTTON GROUP COMPONENT ============================================================================ */ /* ACTION rules at orig lines 870-886 moved to muaadh-action.css Phase 13 Wave 2 (2026-05-13). */ /* ============================================================================ 23. COLLAPSE / ACCORDION COMPONENT ============================================================================ */ /* Narrow input/select widths (filter selects). Replace inline `style="max-width:Npx"` and `style="min-width:Npx"`. */ /* INPUT width modifiers moved to muaadh-form.css Phase 3 Wave 9 (2026-05-13). */ /* Icon bubble — fixed-size circular container that holds an icon. Used for status indicators on shipment/track cards. The markup is expected to also include `m-rounded-full m-d-flex m-items-center m-justify-center` so the icon centers and the corners go full circle. Replaces inline `style="width:Npx; height:Npx"` on bubble divs. */ /* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */ /* Table column widths — small targeted family for fixed-width columns (image cells, action cells, status badges). Replaces inline `style="width:Npx"` on /. */ /* Textarea Sizes */ /* Code pre block (slow query display, request logs). Replace multi-property inline styles on 
. */

/* ---------------------------------------------------------------------------
 * Card grid (Phase 0 — grid cleanup, 2026-05-08)
 *
 * Replaces the legacy `muaadh-grid-row + muaadh-grid-cell--6 muaadh-grid-cell--3`
 * markup in catalog pages. The phantom `cell--3` was the original pain point:
 * markup expected 2/row on mobile and 4/row on desktop, but no CSS rule for
 * `cell--3` existed, so every viewport rendered 2/row.
 *
 * Mobile-first: 2 columns by default, 4 columns at the project's single
 * breakpoint (768px, matching the only @media in this file).
 * `__empty` lets the @forelse empty-state span the full grid width.
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 *  GRID — form rows + split rows  (Phase 2 of the cell--N cleanup, 2026-05-09)
 * -------------------------------------------------------------------------
 *  The legacy `muaadh-grid-row > muaadh-grid-cell--N` system carried 5
 *  breakpoint conventions and 156+ phantom selectors (cell--3 / cell--7 /
 *  cell--8 / cell--wide-* — used in markup but never defined in CSS).
 *  Operator forms suffered the most: a `cell--3` (or `cell--4`) label
 *  paired with a phantom `cell--7` field, so the field's intended width
 *  silently fell back to flex defaults.
 *
 *  These two components fix the two dominant patterns explicitly:
 *
 *    .muaadh-form-row     — label + field, stacked on mobile, side-by-side
 *                           on desktop. Replaces `cell--3 + cell--7|8|9`.
 *
 *    .muaadh-split-row    — generic 2-column row. Modifiers shift the
 *                           ratio. Replaces `cell--6 + cell--6` /
 *                           `cell--4 + cell--8` etc.
 *
 *  Both are mobile-first single-column → desktop two-column at 768px,
 *  matching the only @media breakpoint in this file. Token-driven only —
 *  no hex colors, no role-specific assumptions.
 * ------------------------------------------------------------------------- */


/* Table Actions */
/* ============================================================================
   CSS RESTORATION — P1: TABLE CONTEXTUAL ROWS
   ============================================================================ */
/* ============================================================================
   CSS RESTORATION — P1: FORM VALIDATION
   ============================================================================ */
/* INPUT validation + rating widget moved to muaadh-form.css Phase 3 Wave 9 (2026-05-13). */
/* ACTION rules at orig lines 1048-1048 moved to muaadh-action.css Phase 13 Wave 2 (2026-05-13). */
/* ACTION rules at orig lines 1050-1050 moved to muaadh-action.css Phase 13 Wave 2 (2026-05-13). */
/* Preview / Upload areas */
/* Icon circles (e.g. How-it-works steps) */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* .muaadh-notice--closed moved to muaadh-notice.css Phase 13 Wave 4 (2026-05-13). */
/* Error log / pre-formatted blocks */
/* ============================================================================
   6. UTILITIES
   ============================================================================ */
/* Subtle Background Colors */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Shipping details box */
/* Focus state for keyboard navigation */
/* Loading State */
/* Error/Empty State */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Themed text colors — use instead of inline style="color:var(--theme-...)" */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Extra Spacing */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ============================================================================
   A04 — SPACING (Margin)
   ============================================================================ */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* === From style.css B18: Utility classes === */
/* ==========================================================================
   B18 — UTILITY CLASSES
   ========================================================================== */
/* Text Colors */
/* Background Colors */
/* Border */
/* Shadow */
/* Radius */
/* === From style.css B21: Custom project styles === */
/* ==========================================================================
   B21 — CUSTOM PROJECT STYLES
   ========================================================================== */
/* Input Box with Icon */
/* List Styles */
/* Category/Subcategory Option Styling */
/* ============================================================================
   SECTION: COMPREHENSIVE DESIGN TOKENS & UTILITY CLASSES
   ============================================================================
   Complete color system unification layer.
   All colors MUST go through this layer - no hardcoded values.
   ============================================================================ */
/* ============================================================================
   1. SURFACE (BACKGROUND) UTILITY CLASSES
   ============================================================================ */
/* Action Surfaces */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Neutral Background Colors */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Hover State Surfaces */
/* ============================================================================
   2. TEXT COLOR UTILITY CLASSES
   ============================================================================ */
/* Primary Text Colors */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Link Colors */
/* Action Text Colors */
/* Text on Colored Backgrounds (WCAG Safe) */
/* Hover State Text Colors */
/* ============================================================================
   3. BORDER COLOR UTILITY CLASSES
   ============================================================================ */
/* Base Borders */
/* Colored Borders */
/* Directional Borders */
/* Left Accent Borders (for cards/alerts) */
/* RTL Support - Right Accent Borders */
/* Hover State Borders */
/* Focus State Border */
/* ============================================================================
   3.5 MIGRATED UTILITIES (consolidated from former Section 9)
   ============================================================================ */
/* Action Text Colors */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Neutral Text Colors (token-only — no hardcoded values) */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Text Decoration / Alignment / Size */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Semantic Surface */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Border helpers */
/* Padding scale */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Margin scale */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Gap scale */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Cursor */
/* Selected State */
/* ============================================================================
   13. OVERLAY UTILITIES
   ============================================================================ */
/* ============================================================================
   14. DIVIDER UTILITIES
   ============================================================================ */
/* ============================================================================
   15. ICON COLOR UTILITIES
   ============================================================================ */
/* Icon inherits parent color */
/* ============================================================================
   16. SHADOW UTILITIES
   ============================================================================ */
/* shadow consolidated (Wave 28). */
/* ============================================================================
   17. RADIUS UTILITIES
   ============================================================================ */
/* ============================================================================
   18. DISPLAY UTILITIES
   ============================================================================ */
/* `display: none !important` — sole sanctioned use of !important in our CSS:
   .muaadh-display-none is a JS-toggled runtime state utility (see audit #5,
   docs/js-bound-classes.md). Bare-class specificity (0,1,0) is matched by any
   single-class component rule that declares its own display: (e.g.
   `.muaadh-loader__spinner-border { display: inline-block }`); without
   !important the utility cannot reliably hide such components, leaving the
   spinner visible permanently and the search-hub "smart-hint" ghost row
   showing under the search button. Industry standard pattern (Bootstrap
   .d-none, Tailwind .hidden). Do NOT replicate !important on other
   utilities — only the runtime-toggle ones below earn it. */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Responsive Display - XL */
/* ============================================================================
   19. FLEX DIRECTION & WRAP UTILITIES
   ============================================================================ */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Self alignment */
/* ============================================================================
   21. RESPONSIVE SPACING
   ============================================================================
   Pattern: .m-{prop}-{bp}-{size}
   Sizes: 0=0, 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem, 5=1.25rem, 6=1.5rem, 8=2rem, auto
   Properties use margin-inline-start/end for RTL support (ms/me/ps/pe)
   ============================================================================ */
/* Extended base spacing (adding missing sizes) */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Padding directional */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ============================================================================
   AUDIT 4 — UTILITY GAP FILLERS
   ============================================================================
   Added 2026-05-04: utilities used in blade with no CSS rule. Each follows
   the existing scale/naming pattern. Component-level gaps (cart BEM tree,
   newsletter section, catalog quickview) are tracked separately in
   docs/system-audit-2026-05-04.md and need designer input. */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* foreground consolidated (Wave 28). */
/* ACTION rules at orig lines 1331-1331 moved to muaadh-action.css Phase 13 Wave 2 (2026-05-13). */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ----- Typography utilities (audit-12 — replaces inline font-* styles) */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Empty-state icon — large faded icon used in empty list/grid placeholders. */
/* ============================================================================
   AUDIT 10 — REMAINING COMPONENT GAPS
   ========================================================================== */
/* Wayfinder — tab-style step navigation. Pairs with .muaadh-switch on the
   parent ul; .muaadh-wayfinder__step is each clickable a/li link. */

/* Form — minimal wrappers for vertically-stacked fields + footer actions row. */

/* Dialog backdrop — was the legacy `.modal-backdrop` equivalent. */

/* Field check — wrapper for a checkbox/radio + its label. */

/* Menu — dropdown / context menu block (BEM root).
   __list, __trigger, __item, __divider live in §23.7 (full styling). */

/* State — collapsed flag (replaces the legacy .collapsed class). */

/* Accordion toggle — chevron-rotation handled by JS. */

/* Responsive utility variants (gap-fillers — were used in blade with no rule). */

/* Icon-clock — shorthand utility for setting clock icon size in places
   that wrap an inline svg without using the  component. */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */

/* ============================================================================
   24. TEXT & LAYOUT UTILITIES
   ============================================================================ */
/* Text alignment - RTL-safe */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Position */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Overflow */
/* overflow consolidated (Wave 28). */
/* Visibility */
/* Opacity */
/* opacity consolidated (Wave 28). */
/* Min-width / min-height utilities — small targeted family. */
/* Flex-1 — needed alongside m-min-w-0 to let a flex child shrink past its
   intrinsic content width (text overflow ellipsis pattern). */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* Typography Size */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ============================================================================
   CSS RESTORATION — P1: BORDER & BG UTILITIES
   ============================================================================ */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ============================================================================
   P3: SPACING + SIZING UTILITY ALIASES
   ============================================================================ */
/* UTILITIES (margin/padding/text/background/icon/display/flex/position/gap) consolidated into muaadh-utilities.css (Phase 13 Wave 15, 2026-05-13). */
/* ============================================================================
   7. SHELL
   ============================================================================ */
/* ============================================================================
   1. CONTAINERS
   ============================================================================ */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* Sections 2-5 (LAYOUT GRID + SIDEBAR + TOPBAR + FOOTER) moved to
 * muaadh-shell.css in Phase 3 Wave 2 (2026-05-13). 664 lines extracted.
 * Shell sub-sections still here (CONTENT WRAPPER, MOBILE ENHANCEMENTS,
 * OLD CONTENT AREA fixes) start at section 16b below. */
/* ===== 16b. DASHBOARD TABLE IMAGES ===== */
/* ===== 17. NOTIFICATION DROPDOWN ===== */
/* ==========================================================================
   18. CONTENT WRAPPER ADJUSTMENTS
   ==========================================================================
   Content views (user/*, courier/*) use .muaadh-dashboard-user-panel-review > .muaadh-shell.
   Bootstrap .muaadh-shell constrains max-width, which is redundant inside
   the shell (sidebar already takes space). Remove the constraint.
   ========================================================================== */
/* Background handled by .muaadh-shell-content */
/* Bootstrap .muaadh-shell max-width is too narrow inside shell layout */
/* ==========================================================================
   19. TOPBAR - MOBILE ENHANCEMENTS
   ========================================================================== */
/* Prevent horizontal overflow in content area only.
   DO NOT set overflow on .muaadh-shell-main - it breaks topbar sticky positioning. */
/* ==========================================================================
   21. OLD CONTENT AREA RESPONSIVE FIXES
   ========================================================================== */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* Table responsiveness inside old wrapper */
/* account-info-box: used in courier dashboard */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* Ensure old .muaadh-roster styles work well inside shell */
/* ============================================================================
   11. GRID + SHELL UTILITIES
   ============================================================================ */
/* Container aliases */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* ═══════════════════════════════════════════════════════════════
   Breadcrumb — Page Header with Title + Trail
   ═══════════════════════════════════════════════════════════════ */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* ═══════════════════════════════════════════════════════════════
   Loading Overlays — Shared Utilities
   ═══════════════════════════════════════════════════════════════ */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* Status Dropdowns */
/* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */
/* ============================================================================
   8. PAGE COMPONENTS
   ============================================================================ */
/* ============================================================================
/* FULLVIEW component (muaadh-fullview.js image viewer) moved to
 * muaadh-fullview.css in Phase 3 Wave 3 (2026-05-13). 245 lines extracted. */
/* === Scrollbar from B02 === */
::selection { background-color: var(--theme-selection-bg); color: var(--theme-selection-text); }
::-moz-selection { background-color: var(--theme-selection-bg); color: var(--theme-selection-text); }

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--chassis-scrollbar-width);
    height: var(--chassis-scrollbar-width);
    background: transparent;
}
::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track);
    border-radius: var(--chassis-radius-sm);
}
::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb);
    border-radius: var(--chassis-radius-sm);
    border: var(--chassis-border-normal) solid var(--theme-scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--theme-scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
    background: var(--theme-scrollbar-track);
}
/* === Typography from B03 === */
/* ============================================================================
   B03 — BASE TYPOGRAPHY
   ============================================================================ */
/* Base body styles inherited from style.css */
/* ============================================================================
   WCAG CONTRAST & THEMING FIXES
   ============================================================================ */
/* ============================================================================
   BLOG & FRONTEND SVG ICON THEMING
   ============================================================================ */
/* Blog Page Icons */
/* Radio Button Icons (CatalogItem Options) */
/* Success Page Icons */
/* Checkout Radio Buttons */
/* ========== UNIFIED LOADING SYSTEM ========== */
/* Spinner Element */
/* Loading Overlay */
/* ============================================================================
   END SECTION 2: BUTTON COMPONENT
   ============================================================================ */
/* Deal of Day Countdown */
/* Menu Item Active/Hover */
/* Dropdown Menu Hover */
/* Mobile Menu Active/Hover */
/* CatalogItem Quick View */
/* CatalogItem Compare Button */
/* Footer Section */
/* Subscribe Button */
/* Text Primary Utility */
/* Link Colors */
/* Counter Section */
/* Testimonial Section */
/* Vendor Dashboard Active Menu */
/* Progress Bar */
/* Rating Stars Active */
/* Quantity Buttons */
/* Filter/Sort Active */
/* Checkout Steps Active */
/* Payment Method Selected */
/* Order Status Badge */
/* === Legacy buttons extracted from utilities.css === */
/* Card Variants */
/* ============================================================================
   SECTION 5: PRODUCT CARD COMPONENT
   - NOTE: Moved to Section 50 for Modern Design. This section reserved for future use.
   ============================================================================ */
/* === From style.css C05-C06: Flat modern cards === */
/* ============================================================================
   C05 — CARDS (Flat Modern)
   ============================================================================ */
.muaadh-panel,
/* ============================================================================
   C06 — PRODUCT CARDS (Flat Modern)
   REMOVED 2026-05-27: the .muaadh-catalog-item-tile grid-card family was
   deleted (grid view retired 2026-05-19; the catalog list table —
   muaadh-catalogitem-list +  — is the sole surface).
   ============================================================================ */
/* === From style.css C09: Flat modern forms === */
/* ============================================================================
   C09 — FORMS (Flat Modern)
   ============================================================================ */
/* Form Group */
/* Labels */
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
/* Table Variants */
/* Borderless Table */
/* Hover Table */
/* Small Table */
/* Backdrop (created by JS) */
/* === From style.css B53-B54: Maps + location picker === */
/* ============================================================================
   B53 — GOOGLE MAPS MODAL STYLES
   ط¸â€¦ط¸ث†ط·آ¯ط·آ§ط¸â€‍ ط·آ®ط·آ±ط·آ§ط·آ¦ط·آ· ط·آ¬ط¸ث†ط·آ¬ط¸â€‍ - google-maps-modal.blade.php
   ============================================================================ */
/* Map Container */
/* Map Search Input */
/* PlaceAutocompleteElement styling */
/* Buttons Container */
/* Location Info Box */
/* Address */
/* Footer */
/* Alerts */
/* Sync Progress Overlay */
/* Tryoto Shipping Info Section */
/* —•â€‌—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•—
   —•â€ک  PART C: FLAT MODERN LAYER                                                   —•â€ک
   —•â€ک  ========================================================================    —•â€ک
   —•â€ک  Merged from new/*.css - Uses --color-* aliases linked to Admin Panel        —•â€ک
   —•â€ک  These rules use tokens that now reference --theme-* via muaadh-tokens.css    —•â€ک
   —•ع‘—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•ع¯—•‌ */
/* === B25: Callout modal === */
/* B25 — CALLOUT MODAL block moved to public/assets/css/muaadh-callouts.css (Phase 14b, 2026-05-10) */
/* Callout Action Buttons */
/* Ensure modal has proper z-index */
/* Shipping provider tabs */
/* Tab content styling */
/* Tracking modal status badges */
/* From: components/fitment-brands-modal.blade.php */
/* Fitment Modal Styles */
/* Fitment Badge Button in Cards */
/* PHOTO management UI moved to muaadh-photo.css in Phase 3 Wave 11
 * (2026-05-13). 128 lines extracted, 19 rules. */
/* BREADCRUMB (.muaadh-trail) moved to muaadh-wayfinder.css Phase 3 Wave 5 (2026-05-13). */
/* --- Quantity Control --- */
/* ============================================================================
   QUANTITY CONTROL - v1 + v2
   Source: style.css B12, B37
   ============================================================================ */
/* ==========================================================================
   B12 — QUANTITY CONTROL
   ========================================================================== */
/* === From style.css B37: Quantity control V2 === */
/* ============================================================================
   B37 — QUANTITY CONTROL
   ============================================================================ */
/* --- Filter Modal --- */
/* ============================================================================
   FILTER MODAL STYLES
   ============================================================================
   Isolated CSS for the catalog filter modal and related components
   File: public/assets/css/filter-modal.css
   ============================================================================ */
/* ============================================================================
   SECTION: FILTER SCROLL BOX (auto, content-driven)
   ============================================================================
   Filter sidebar lists (.muaadh-warranty-type) auto-scroll when they hold more
   than 3 checkbox items. The activation is driven purely by the DOM —
   no PHP counting, no JS counting, and no manual class on the wrapper.
   AJAX-injected items (e.g. branches) flip the rule the moment they
   land in the list.

   The `:has()` selector chains four sibling .muaadh-dashboard-checkbox-
   wrapper li's to mean "the 4th checkbox exists" — i.e. count > 3.
   ============================================================================ */

/* Activate the scroll box only when 4+ checkbox items exist.
 * Audit #4: simplified from 4-sibling :has() chain (173 chars,
 * specificity 0,5,1) to :nth-child(4) (~75 chars, specificity 0,2,1).
 * Behavior identical given the foreach in filter-checkbox-list.blade.php
 * generates only li.muaadh-dashboard-checkbox-wrapper elements. */
/* ============================================================================
   SECTION: FILTER WIDGET
   ----------------------------------------------------------------------------
   Used by the filter-modal groups (5-step selector, merchant list, branch
   list, quality-brand list). Padding was halved 2026-05-11 because the
   original var(--space-6) var(--space-4) made the 3 groups in the filter
   modal feel widely-spaced inside an already-roomy dialog. The widget-name
   got margin-bottom so the title doesn't butt against the form content
   below it (Tier 2-α.5 of the /brands audit).
   ============================================================================ */
/* ============================================================================
   SECTION: CATEGORY WIDGET (Tree Dropdowns)
   ============================================================================ */
/* ============================================================================
   SECTION: CATEGORY STEP SELECTOR (Multi-Level Dropdowns)
   ============================================================================ */
/* Selectors target both the .muaadh-select utility wrapper AND the raw