/* ============================================================
   Dismissal Supervisor Panel — Responsive + Cross-Browser CSS
   ------------------------------------------------------------
   Loaded after Tailwind CDN so these overrides win.

   Scope: ONLY pages under /dismissal/* (body[data-panel="dismissal"]).
   Goal: professional layout across every viewport (320px → 4K)
         and every modern browser (Chrome, Safari, Firefox, Edge,
         Samsung Internet, iOS Safari, Android Chrome).

   Strategy:
     1. Mobile-first sizing — small screens get tighter spacing
        and full-bleed cards so content gets every pixel.
     2. Safe-area-inset support for notched/punch-hole devices.
     3. iOS-specific: prevent input zoom + smooth scrolling +
        contain rubber-band on inner scrollers.
     4. Cross-browser fallbacks for bg-opacity, sticky, backdrop.
     5. Touch targets enforced at 44×44 minimum (WCAG AAA).
     6. Tables → responsive cards on ≤768px via data-attribute hint.

   File is namespaced with `body[data-panel="dismissal"]` so it
   never bleeds into other panels (school/teacher/seller/admin).
   Theme: emerald green accent (#10B981 / #059669).
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. ROOT + GENERAL CROSS-BROWSER NORMALISATION
   ───────────────────────────────────────────────────────────── */

body[data-panel="dismissal"] {
    /* Prevent the iOS "smart zoom" on input focus by ensuring
       16px+ font-size everywhere (see input rule below). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* iOS swipe-back gesture conflicts with horizontal scrolls
       on the body — opt out. */
    overscroll-behavior-y: none;
    /* Smooth font rendering on macOS Chrome + Safari. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tap highlight on iOS turns links/buttons grey on tap — kill it
   and rely on our hover/active states instead. */
body[data-panel="dismissal"] a,
body[data-panel="dismissal"] button {
    -webkit-tap-highlight-color: transparent;
}

/* Inputs ≥ 16px to defeat iOS auto-zoom on focus. The Tailwind
   `text-sm` (14px) on most dismissal inputs triggers it. We bump
   form controls to 16px on touch devices ONLY so desktop still
   gets the compact look. */
@media (max-width: 768px) {
    body[data-panel="dismissal"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body[data-panel="dismissal"] select,
    body[data-panel="dismissal"] textarea {
        font-size: 16px !important;
    }
    /* Date/time pickers on Safari iOS render weirdly without
       this — force native appearance + correct line-height. */
    body[data-panel="dismissal"] input[type="date"],
    body[data-panel="dismissal"] input[type="time"],
    body[data-panel="dismissal"] input[type="datetime-local"] {
        min-height: 44px;
        -webkit-appearance: none;
        appearance: none;
    }
}


/* ─────────────────────────────────────────────────────────────
   2. SAFE-AREA-INSET FOR NOTCHED / PUNCH-HOLE DEVICES
   ───────────────────────────────────────────────────────────── */

body[data-panel="dismissal"] {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}


/* ─────────────────────────────────────────────────────────────
   3. SCROLLBARS — slim + non-intrusive across browsers
   ───────────────────────────────────────────────────────────── */

body[data-panel="dismissal"] {
    scrollbar-width: thin;          /* Firefox */
    scrollbar-color: #cbd5e1 transparent;
}
body[data-panel="dismissal"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body[data-panel="dismissal"] ::-webkit-scrollbar-track {
    background: transparent;
}
body[data-panel="dismissal"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
body[data-panel="dismissal"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* ─────────────────────────────────────────────────────────────
   4. SIDEBAR — tighter on mobile, smoother transitions
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    /* On mobile the sidebar slides over content as a drawer.
       Cap width so even iPhone SE (375px) shows a sliver of
       the overlay/main content behind it. */
    body[data-panel="dismissal"] aside {
        width: min(86vw, 320px) !important;
        max-width: 320px;
        border-radius: 0 !important;
        margin: 0 !important;
        /* Smooth iOS momentum scroll inside the sidebar. */
        -webkit-overflow-scrolling: touch;
        /* Prevent the sidebar from triggering body scroll when
           the user reaches its top/bottom. */
        overscroll-behavior: contain;
        /* GPU-accelerated transform — smoother than left/right. */
        will-change: transform;
        /* Bigger shadow when open so it feels detached. */
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35);
    }
    /* Sidebar nav items: enforce 44px tap target. */
    body[data-panel="dismissal"] aside nav a {
        min-height: 44px;
    }
    /* Overlay darker on mobile for better contrast vs the
       white-heavy content area underneath. */
    body[data-panel="dismissal"] aside + div {
        /* placeholder — overlay handled by Alpine */
    }
}


/* ─────────────────────────────────────────────────────────────
   5. TOPBAR / HEADER — tighter margins on small screens
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* The Tailwind layout uses `m-4 mb-0 p-4 rounded-3xl` on the
       header. That's 32px of horizontal margin + 32px of inner
       padding = 64px lost — on a 360px screen that's 18% gone.
       Tighten it for sub-640px. */
    body[data-panel="dismissal"] header.shadow-card {
        margin: 0.75rem 0.75rem 0 0.75rem !important;
        padding: 0.75rem !important;
        border-radius: 1.25rem !important;
    }
    body[data-panel="dismissal"] main {
        padding: 0.75rem !important;
    }
    /* Title text scales down. */
    body[data-panel="dismissal"] header.shadow-card h2 {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }
    body[data-panel="dismissal"] header.shadow-card p {
        font-size: 0.7rem !important;
    }
    /* Lang toggle chips tighter. */
    body[data-panel="dismissal"] header.shadow-card [role="group"] {
        padding: 2px;
    }
    body[data-panel="dismissal"] header.shadow-card [role="group"] a {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Bell + avatar dropdowns: prevent overflow on small screens.
   The default `w-80 md:w-96` (320/384px) overflows a 360px viewport
   once the end-anchored panel is positioned. Constrain by viewport. */
@media (max-width: 480px) {
    body[data-panel="dismissal"] [x-data*="disNotifBell"] > div[x-show="open"] {
        width: calc(100vw - 1.5rem) !important;
        max-width: 360px !important;
    }
    /* User avatar dropdown */
    body[data-panel="dismissal"] header.shadow-card .relative > div[x-show="open"] {
        max-width: calc(100vw - 1.5rem) !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   6. CARDS — tighter padding + edge-bleed on sub-640px
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Big rounded cards: keep the rounding but tighten padding
       so content has room to breathe. */
    body[data-panel="dismissal"] main .rounded-3xl {
        border-radius: 1.25rem;
    }
    body[data-panel="dismissal"] main .p-5,
    body[data-panel="dismissal"] main .p-6 {
        padding: 1rem !important;
    }
    body[data-panel="dismissal"] main .p-8 {
        padding: 1.25rem !important;
    }
    /* Welcome / hero cards keep extra padding on top */
    body[data-panel="dismissal"] main .p-6.md\:p-8,
    body[data-panel="dismissal"] main .p-5.md\:p-6 {
        padding: 1.25rem !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   7. TOUCH TARGETS — enforce 44×44 on every interactive control
   ───────────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    body[data-panel="dismissal"] button:not(.no-touch-min),
    body[data-panel="dismissal"] a.inline-flex:not(.no-touch-min),
    body[data-panel="dismissal"] [role="button"]:not(.no-touch-min) {
        min-height: 44px;
    }
    /* Quantity steppers + tiny chips stay compact intentionally */
    body[data-panel="dismissal"] .qty-stepper button,
    body[data-panel="dismissal"] .chip button,
    body[data-panel="dismissal"] .pin-keypad button {
        min-height: unset;
    }
}


/* ─────────────────────────────────────────────────────────────
   8. TABLES — responsive cards on ≤640px
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Opt-in: any table marked with `data-mobile-card` collapses
       to a card-per-row layout. We don't apply globally because
       some tables (calculator grids, etc.) shouldn't change. */
    body[data-panel="dismissal"] table[data-mobile-card] {
        display: block;
    }
    body[data-panel="dismissal"] table[data-mobile-card] thead {
        display: none;
    }
    body[data-panel="dismissal"] table[data-mobile-card] tbody,
    body[data-panel="dismissal"] table[data-mobile-card] tr {
        display: block;
        width: 100%;
    }
    body[data-panel="dismissal"] table[data-mobile-card] tr {
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 1rem;
        padding: 0.875rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body[data-panel="dismissal"] table[data-mobile-card] td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border: 0;
        text-align: start !important;
        flex-wrap: wrap;
    }
    body[data-panel="dismissal"] table[data-mobile-card] td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        color: #5b5b5b;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
    /* Cells with no data-label (e.g. the row-actions cell) get
       full width, button block. */
    body[data-panel="dismissal"] table[data-mobile-card] td:not([data-label]) {
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid #f3f4f6;
        margin-top: 0.25rem;
    }
}

/* For tables that stay table-shaped on mobile (`.overflow-x-auto`
   parent), make the scroll feel native + indicate scrollability. */
body[data-panel="dismissal"] .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}


/* ─────────────────────────────────────────────────────────────
   9. POS PAGE — sticky cart + tighter grid on phones
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    /* The cart on mobile shows BELOW the menu. Make the
       confirm-sale section sticky to the bottom so the cashier
       always has the action button in reach. Opt-in via class. */
    body[data-panel="dismissal"] .pos-cart-mobile-sticky {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: #fff;
        box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.12);
    }
}

/* Menu grid on very small phones (≤360px): keep 2 cols but
   shrink padding/text so cards don't blow out. */
@media (max-width: 360px) {
    body[data-panel="dismissal"] .pos-menu-grid {
        gap: 0.5rem !important;
    }
    body[data-panel="dismissal"] .pos-menu-item {
        padding: 0.625rem !important;
    }
    body[data-panel="dismissal"] .pos-menu-item .name {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   10. MODALS — full-width on small screens
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Any modal panel with .modal-panel class gets full-bleed
       sides + bottom-anchored sheet appearance on mobile. */
    body[data-panel="dismissal"] .modal-panel {
        margin: 0.75rem !important;
        max-width: calc(100vw - 1.5rem) !important;
        max-height: calc(100vh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ─────────────────────────────────────────────────────────────
   11. DASHBOARD — KPI tweaks for tiny screens
   ───────────────────────────────────────────────────────────── */

@media (max-width: 360px) {
    /* On <360px (rare but exists: Galaxy Fold closed, ancient
       Androids), the 2-col KPI grid forces text wrapping that
       looks broken. Drop to 1 col. */
    body[data-panel="dismissal"] .dashboard-kpis {
        grid-template-columns: 1fr !important;
    }
    body[data-panel="dismissal"] .dashboard-kpis p.text-2xl,
    body[data-panel="dismissal"] .dashboard-kpis p.md\:text-3xl {
        font-size: 1.5rem !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   12. FILTER BARS — wrap nicely on mobile
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Forms that use flex-col md:flex-row should already wrap.
       Make sure the submit + reset buttons span full width on
       mobile so they're easy to hit. */
    body[data-panel="dismissal"] form.filter-bar > .flex,
    body[data-panel="dismissal"] form.filter-bar > .flex.gap-2 {
        width: 100%;
        flex-direction: row;
    }
    body[data-panel="dismissal"] form.filter-bar > .flex > button,
    body[data-panel="dismissal"] form.filter-bar > .flex > a {
        flex: 1;
        text-align: center;
    }
}


/* ─────────────────────────────────────────────────────────────
   13. STICKY POSITION FALLBACK (older Safari)
   ───────────────────────────────────────────────────────────── */

/* ⚠️ 2026-05-26 critical layout fix:
   The OLD selector `[class*="sticky"]` was matching the SUBSTRING
   "sticky" inside `lg:sticky` (and `md:sticky`, `xl:sticky`, etc.)
   — applying `position: sticky` to every element with a responsive
   sticky variant REGARDLESS of viewport.

   The dismissal sidebar uses `fixed lg:sticky`. On mobile, `.fixed`
   should win (position:fixed, out of flow). But this catch-all
   selector overrode it with `position: sticky` (in flow), making
   the sidebar take 320px of horizontal flex space at every
   viewport — squishing main content to 70px on iPhone 12 Pro.

   Fix: scope to the bare `.sticky` class only AND to
   `.pos-cart-mobile-sticky` (our explicitly-opted-in class). All
   `lg:sticky` / `md:sticky` etc. should NOT be force-sticky here
   — they're already handled by Tailwind's own @media rules.

   Modern Safari (16+) supports `position: sticky` natively so the
   `-webkit-` prefix is only defense-in-depth for iOS 13-15. */
body[data-panel="dismissal"] .sticky,
body[data-panel="dismissal"] .pos-cart-mobile-sticky {
    position: -webkit-sticky;
    position: sticky;
}


/* ─────────────────────────────────────────────────────────────
   14. PRINT — clean printouts for receipts/reports
   ───────────────────────────────────────────────────────────── */

@media print {
    body[data-panel="dismissal"] aside,
    body[data-panel="dismissal"] header,
    body[data-panel="dismissal"] footer,
    body[data-panel="dismissal"] .no-print {
        display: none !important;
    }
    body[data-panel="dismissal"] main {
        margin: 0 !important;
        padding: 0 !important;
    }
    body[data-panel="dismissal"] .shadow-card,
    body[data-panel="dismissal"] .shadow-2xl,
    body[data-panel="dismissal"] .shadow-lg {
        box-shadow: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   15. FOCUS-VISIBLE — accessibility (keyboard users)
   ───────────────────────────────────────────────────────────── */

body[data-panel="dismissal"] button:focus-visible,
body[data-panel="dismissal"] a:focus-visible,
body[data-panel="dismissal"] input:focus-visible,
body[data-panel="dismissal"] select:focus-visible,
body[data-panel="dismissal"] textarea:focus-visible {
    outline: 2px solid #10B981;
    outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   16. ANIMATIONS — respect prefers-reduced-motion
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body[data-panel="dismissal"] *,
    body[data-panel="dismissal"] *::before,
    body[data-panel="dismissal"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   17. iOS PWA / standalone mode adjustments
   ───────────────────────────────────────────────────────────── */

@media (display-mode: standalone) {
    /* When added to home screen the topbar needs extra top
       padding because there's no browser chrome covering it. */
    body[data-panel="dismissal"] header.shadow-card {
        margin-top: max(1rem, env(safe-area-inset-top));
    }
}


/* ─────────────────────────────────────────────────────────────
   18. FIREFOX-SPECIFIC FIXES
   ───────────────────────────────────────────────────────────── */

@-moz-document url-prefix() {
    /* Firefox renders backdrop-filter inconsistently across
       versions — fallback to solid background. */
    body[data-panel="dismissal"] .backdrop-blur,
    body[data-panel="dismissal"] [class*="backdrop-blur"] {
        background-color: rgba(255, 255, 255, 0.95);
    }
}


/* ─────────────────────────────────────────────────────────────
   19. EDGE/SAMSUNG INTERNET — input number arrows
   ───────────────────────────────────────────────────────────── */

body[data-panel="dismissal"] input[type="number"]::-webkit-inner-spin-button,
body[data-panel="dismissal"] input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body[data-panel="dismissal"] input[type="number"] {
    -moz-appearance: textfield;
}


/* ─────────────────────────────────────────────────────────────
   20. RTL-SPECIFIC: scrollbar position in Safari
   ───────────────────────────────────────────────────────────── */

[dir="rtl"] body[data-panel="dismissal"] {
    /* Safari historically positions scrollbar on the left in RTL
       which conflicts with the sidebar. Force right. */
    direction: rtl;
}


/* ─────────────────────────────────────────────────────────────
   21. PAGE-SHELL TIGHTENING (2026-05-23 v2)
   ─────────────────────────────────────────────────────────────
   The owner reported inner pages (categories / suppliers / reports
   / damages / shares / purchases / inventory) looked unprofessional
   on mobile. Root causes spotted across every screen:

     A. `max-w-5xl/6xl/7xl mx-auto p-4 md:p-6` wrappers on inner
        views ADD a 16px padding on top of <main class="p-4">.
        That's 32px of horizontal space lost on a 360px phone —
        nearly 10% of the viewport.

     B. `flex items-center justify-between` toolbars on inner
        pages don't wrap, so a 2xl title sits on the same row as
        a CTA button. On 380px the button overflows or the title
        gets clipped to a single letter.

     C. Inner cards use `p-5` or `p-6` AND sit inside the main
        padding — that's effectively 40-48px of horizontal space
        consumed by chrome before any content.

     D. Inline 2xl headings (`text-2xl font-bold`) are ~24px in
        Tailwind which wraps badly with Arabic on a narrow screen.

   The rules below are scoped tight enough to fix every inner page
   without touching POS, Menu, Dashboard, or Daily Summary which
   already have their own tuning. We only target inner views that
   share the same shell pattern.
   ───────────────────────────────────────────────────────────── */

/* A. Collapse `max-w-*` page wrappers on small screens so the
      content uses the full viewport. The wrappers still keep their
      mx-auto centring on desktop where the cap is intentional. */
@media (max-width: 1023px) {
    body[data-panel="dismissal"] main > .max-w-3xl,
    body[data-panel="dismissal"] main > .max-w-4xl,
    body[data-panel="dismissal"] main > .max-w-5xl,
    body[data-panel="dismissal"] main > .max-w-6xl,
    body[data-panel="dismissal"] main > .max-w-7xl {
        max-width: 100% !important;
    }
}

/* A2. On phones, kill the double-padding caused by both
      <main class="p-4"> AND a `.p-4 md:p-6` wrapper inside it. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main > div.p-4,
    body[data-panel="dismissal"] main > div.p-6,
    body[data-panel="dismissal"] main > div.p-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Same for the explicit "p-4 md:p-6" combo Tailwind compiles. */
    body[data-panel="dismissal"] main > div[class*="p-4"][class*="md:p-6"],
    body[data-panel="dismissal"] main > div[class*="p-5"][class*="md:p-6"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* B. Page header rows: `flex items-center justify-between` on the
      top-level inner-page header. Force wrap so a 2xl title + CTA
      stack on phones. Children get full width by default; the CTA
      button (only direct anchor/button inside the right group)
      stretches to fill its line. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main .flex.items-center.justify-between,
    body[data-panel="dismissal"] main .flex.items-start.justify-between {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    /* When a header inside main has a title block + a single CTA
       sibling, give each line full width so they stack cleanly. */
    body[data-panel="dismissal"] main > .max-w-3xl > .flex.items-center.justify-between > *,
    body[data-panel="dismissal"] main > .max-w-4xl > .flex.items-center.justify-between > *,
    body[data-panel="dismissal"] main > .max-w-5xl > .flex.items-center.justify-between > *,
    body[data-panel="dismissal"] main > .max-w-6xl > .flex.items-center.justify-between > *,
    body[data-panel="dismissal"] main > .max-w-7xl > .flex.items-center.justify-between > * {
        width: 100%;
    }
    /* And make the action(s) full-width pills inside any such row
       so they're easy to tap. */
    body[data-panel="dismissal"] main > .max-w-3xl > .flex.items-center.justify-between > a.inline-flex,
    body[data-panel="dismissal"] main > .max-w-4xl > .flex.items-center.justify-between > a.inline-flex,
    body[data-panel="dismissal"] main > .max-w-5xl > .flex.items-center.justify-between > a.inline-flex,
    body[data-panel="dismissal"] main > .max-w-6xl > .flex.items-center.justify-between > a.inline-flex,
    body[data-panel="dismissal"] main > .max-w-7xl > .flex.items-center.justify-between > a.inline-flex,
    body[data-panel="dismissal"] main > .max-w-3xl > .flex.items-center.justify-between > button,
    body[data-panel="dismissal"] main > .max-w-4xl > .flex.items-center.justify-between > button,
    body[data-panel="dismissal"] main > .max-w-5xl > .flex.items-center.justify-between > button,
    body[data-panel="dismissal"] main > .max-w-6xl > .flex.items-center.justify-between > button,
    body[data-panel="dismissal"] main > .max-w-7xl > .flex.items-center.justify-between > button {
        width: 100%;
        justify-content: center;
    }
}

/* C. Page titles (h1) tighten on phones so long Arabic titles like
      "تصنيفات قائمة الطعام" don't break the row layout. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main h1.text-2xl {
        font-size: 1.25rem !important;       /* 20px instead of 24px */
        line-height: 1.3 !important;
    }
    body[data-panel="dismissal"] main h1.text-lg {
        font-size: 1.0625rem !important;
        line-height: 1.3 !important;
    }
    /* Section sub-titles (h2/h3 lg) too — same rationale. */
    body[data-panel="dismissal"] main h2.text-lg,
    body[data-panel="dismissal"] main h3.text-base {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }
}

/* D. Toolbar grids that explicitly target `md:grid-cols-4`,
      `md:grid-cols-5`, `md:grid-cols-6` collapse to a single column
      on phones — already true for `grid-cols-1 md:...` but some
      forms used `grid-cols-2 md:grid-cols-4` which leaves Date1/Date2
      side-by-side at 160px each which is impossible to use. Allow
      Tailwind defaults to win there; just enforce minimum control
      height for tappability. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main form select,
    body[data-panel="dismissal"] main form input[type="text"],
    body[data-panel="dismissal"] main form input[type="email"],
    body[data-panel="dismissal"] main form input[type="tel"],
    body[data-panel="dismissal"] main form input[type="number"],
    body[data-panel="dismissal"] main form input[type="date"],
    body[data-panel="dismissal"] main form input[type="time"],
    body[data-panel="dismissal"] main form input[type="datetime-local"],
    body[data-panel="dismissal"] main form textarea {
        min-height: 44px;
    }
    /* "Apply" / submit buttons inside narrow form rows: ensure they
       get a full-width tap target on the last line. */
    body[data-panel="dismissal"] main form button[type="submit"],
    body[data-panel="dismissal"] main form button:not([type]) {
        min-height: 44px;
    }
}

/* E. Filter chips wrap: notifications, reports period filters,
      sources — these use flex-wrap already but the gap is too tight
      on tiny screens. Bump it. */
@media (max-width: 480px) {
    body[data-panel="dismissal"] main .flex.flex-wrap {
        gap: 0.5rem;
    }
}

/* F. KPI grids: very dense 4-5 columns get rough on phones even
      after `grid-cols-2`. On <380px stack to 1-col for the densest
      ones (5-col). */
@media (max-width: 380px) {
    body[data-panel="dismissal"] main .grid.md\:grid-cols-5,
    body[data-panel="dismissal"] main .grid[class*="md:grid-cols-5"] {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* G. The "show purchase" page header had a 4-col grid (number /
      date / supplier / total). On phones it became 2-col which
      packed names + numbers into tiny cells. Allow it but tighten
      typography. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main .grid.grid-cols-2 > div > p.text-xs {
        font-size: 0.65rem !important;
    }
    body[data-panel="dismissal"] main .grid.grid-cols-2 > div > p.font-bold {
        font-size: 0.875rem !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }
}

/* H. Tables that don't carry `data-mobile-card` (legacy ones we
      can't easily refactor) — force horizontal scroll behaviour
      with a visible hint and prevent the page from breaking. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main .bg-white > table:not([data-mobile-card]) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    /* Inside .overflow-x-auto, the table can be its natural width
       and the wrapper handles the scroll. */
    body[data-panel="dismissal"] main .overflow-x-auto > table:not([data-mobile-card]) {
        white-space: nowrap;
    }
}

/* I. "Back" breadcrumb links inside inner pages: stretch tap area
      so the user has something useful to hit on mobile. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main a.inline-flex.items-center.gap-1.text-xs {
        padding: 6px 8px;
        margin-inline-start: -8px;        /* visual alignment */
        margin-block-end: 0.5rem !important;
    }
}

/* J. Inner cards that wrap form sections (e.g., shares add-form,
      damages add-form, supplier form): tighten internal padding on
      phones so the form fields get real estate to render. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main form.bg-white.shadow-sm,
    body[data-panel="dismissal"] main form.bg-white[class*="shadow-"] {
        padding: 1rem !important;
    }
    body[data-panel="dismissal"] main form.bg-white[class*="shadow-"] h3 {
        font-size: 0.95rem !important;
    }
}

/* K. Notifications + inventory header strips: title + CTA share a
      row that uses `flex-wrap` but the CTA chip stays on the same
      line and overflows. Force the CTA card to full width. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main .flex.items-start.justify-between.flex-wrap > .inline-flex {
        width: 100%;
        justify-content: flex-start;
    }
}

/* L. Pagination links: Laravel's default pagination renders a long
      strip of numbers which overflows on tiny screens. Allow
      horizontal scroll with a slim scrollbar so it stays usable. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] main nav[role="navigation"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[data-panel="dismissal"] main nav[role="navigation"] > div,
    body[data-panel="dismissal"] main nav[role="navigation"] > .flex {
        flex-wrap: nowrap;
        min-width: max-content;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Sections M-U added 2026-05-26 (Accessibility audit Phase 2).
   These close the gaps the responsive overhaul (4371a80+62fab23) left:
     M. Sidebar drawer focus management (WCAG 2.4.3)
     N. Firefox backdrop-filter login regression
     O. Mobile-card pattern: <tfoot> totals row support
     P. POS sticky cart respects iOS notch safe-area-inset-bottom
     Q. PIN pad fat-finger floor (AAA target size)
     R. Number-input standard appearance for Safari Tech Preview
     S. Print: hide flash banners + timezone warnings
     T. Login screen safe-area top padding in iOS PWA standalone mode
     U. Focus-visible rings on icon-only header buttons
   ═══════════════════════════════════════════════════════════════════ */

/* M. Sidebar drawer aria-hidden support — when JS toggles aria-hidden
      we visually hide AND make it un-clickable. The wrapper Alpine
      Tailwind `translate-x-full` handles visual slide; this rule
      catches the keyboard navigation case so Tab doesn't leak onto
      invisible drawer links. */
@media (max-width: 1023px) {
    body[data-panel="dismissal"] aside[aria-hidden="true"] {
        visibility: hidden;
        pointer-events: none;
    }
}

/* N. Firefox-only backdrop-filter regression — section 18 already
      forces opaque background on every `[class*="backdrop-blur"]`,
      but that nuke also hits the login hero's decorative .shape
      divs and turns them solid white over the gradient. This rule
      keeps them subtly translucent. */
@-moz-document url-prefix() {
    body[data-panel="dismissal"] .hero-bg .shape,
    body[data-panel="dismissal"] [class*="hero"] [class*="backdrop-blur"] {
        background-color: rgba(255, 255, 255, 0.10) !important;
    }
}

/* O. Mobile-card pattern — extend section 8 to support <tfoot> rows
      so totals + grand-total bars render with the highlight they need
      on mobile. The OLD section 8 only stylized <tbody> rows. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] table[data-mobile-card] tfoot {
        display: block;
        margin-top: 0.5rem;
    }
    body[data-panel="dismissal"] table[data-mobile-card] tfoot tr {
        display: block;
        background: #f0fdf4;
        border: 2px solid #10b981;
        border-radius: 12px;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
    body[data-panel="dismissal"] table[data-mobile-card] tfoot td {
        display: flex;
        justify-content: space-between;
        padding: 0.35rem 0.25rem;
        font-weight: 700;
        font-size: 0.85rem;
        border: 0;
    }
    body[data-panel="dismissal"] table[data-mobile-card] tfoot td[data-label]::before {
        content: attr(data-label);
        color: #6b7280;
        font-weight: 600;
    }
    /* Hide columns that have neither data-label nor content on mobile. */
    body[data-panel="dismissal"] table[data-mobile-card] tfoot td[colspan]:empty {
        display: none;
    }
}

/* P. POS sticky cart respects iOS notch — section 9 anchors the cart
      to bottom: 0 but on notched iPhones that overlaps the home
      indicator. env(safe-area-inset-bottom) pushes the cart up by the
      indicator height (returns 0 on non-notched devices, so no double
      padding). */
@media (max-width: 1023px) {
    body[data-panel="dismissal"] .pos-cart-mobile-sticky {
        bottom: env(safe-area-inset-bottom, 0) !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
    }
    /* On-screen calculator anchored bottom: same treatment. */
    body[data-panel="dismissal"] [data-pos-calculator] {
        bottom: env(safe-area-inset-bottom, 0) !important;
        padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0));
    }
}

/* Q. PIN pad AAA target size — section 7 intentionally removed the
      44px floor on .pin-keypad button, but the keys are still the
      highest fat-finger risk surface in the panel (a wrong PIN locks
      the card). Push to WCAG 2.5.5 AAA minimum 48×48px on touch
      devices where the parent grid permits. */
@media (hover: none) and (pointer: coarse) {
    body[data-panel="dismissal"] .pin-keypad button,
    body[data-panel="dismissal"] [data-pin-pad] button,
    body[data-panel="dismissal"] [data-pos-calculator] button {
        min-height: 48px;
        min-width: 48px;
    }
}

/* R. Number-input standard appearance — section 19 already covers
      -webkit-/-moz- but Safari Tech Preview enforces the standard
      `appearance` property too. Two-byte fix. */
body[data-panel="dismissal"] input[type="number"] {
    appearance: textfield;
}

/* S. Print stylesheet — section 14 hides nav + footer. Also hide
      flash banners + timezone warnings so a printed receipt isn't
      polluted with success/error/info boxes from the screen view. */
@media print {
    body[data-panel="dismissal"] main > .bg-green-50.border-success,
    body[data-panel="dismissal"] main > .bg-red-50.border-danger,
    body[data-panel="dismissal"] main > .bg-amber-50,
    body[data-panel="dismissal"] [data-no-print] {
        display: none !important;
    }
}

/* T. Login screen safe-area top padding in iOS PWA standalone mode —
      auth/login.blade.php doesn't extend the main layout so section
      17's `header.shadow-card` selector doesn't apply. Target the
      form column directly so the supervisor isn't blocked by the
      iOS status bar when re-opening the home-screen app. */
@media (display-mode: standalone) and (max-width: 1023px) {
    body[data-panel="dismissal"] > .min-h-screen > .flex-1,
    body[data-panel="dismissal"] > .min-h-screen.flex > .flex-1 {
        padding-top: max(1.5rem, env(safe-area-inset-top, 0));
    }
}

/* U. Focus-visible rings on icon-only buttons inside the bell + avatar
      dropdowns — required for keyboard navigation (WCAG 2.4.7). The
      ring contrast vs the gradient header strip uses a soft white
      shadow. */
body[data-panel="dismissal"] header button:focus-visible,
body[data-panel="dismissal"] aside a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════
   Sections V-AB — professional mobile polish (audit 2026-05-26).

   UI Designer agent identified 17 polish opportunities focused on
   premium mobile feel (benchmarked against Square POS / Toast POS /
   Shopify POS mobile interfaces). These sections apply the highest-
   impact fixes that can land via pure CSS:

     V.  Dashboard welcome banner — small-phone truncation
     W.  POS menu density — 9-12 items per viewport on phones
     X.  KPI numbers — tabular-nums + nowrap + ellipsis
     Y.  Layered card shadows — premium depth feel
     Z.  Table headers — transparent with strong bottom border
     AA. POS cart sticky on phones (paired with .pos-cart-mobile-sticky
         markup in pos.blade.php)
     AB. Status badge utility (.dis-status-*) + skeleton loader

   Plus targeted overflow fixes on Bookings + Purchases mobile lists.
   ═══════════════════════════════════════════════════════════════════ */

/* V. Welcome banner small-phone polish.
      The bilingual "أهلاً، {name}" can produce 30+ character strings
      that line-wrap awkwardly inside the gradient banner at 360-380px.
      Drop the heading size + clamp the school name to a single line
      with ellipsis so the banner stays clean. */
@media (max-width: 480px) {
    body[data-panel="dismissal"] main > .space-y-4 > .bg-gradient-to-l h2,
    body[data-panel="dismissal"] main > .space-y-4 > .bg-gradient-to-l > div h2 {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
        word-break: break-word;
    }
    body[data-panel="dismissal"] main > .space-y-4 > .bg-gradient-to-l p,
    body[data-panel="dismissal"] main > .space-y-4 > .bg-gradient-to-l > div p {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* W. POS menu density — Square POS shows 9-12 items at 375×667; we
      were showing 6 because `min-h-[140px]` is too tall. Drop the floor
      to 112px on phones + tighten image well + scale name. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] .pos-menu-item,
    body[data-panel="dismissal"] [data-pos-menu-item] {
        min-height: 112px !important;
        padding: 0.625rem !important;
    }
    body[data-panel="dismissal"] .pos-menu-item > div:first-child {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 0.375rem !important;
    }
    body[data-panel="dismissal"] .pos-menu-item .name,
    body[data-panel="dismissal"] .pos-menu-item p {
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }
}

/* X. KPI numbers — tabular figures + no-wrap with ellipsis.
      The dashboard KPI tile uses `text-3xl break-all` which wraps a
      currency total like "1,234.500" to two lines on 360px. Square POS
      treats currency totals as one indivisible glyph block. */
body[data-panel="dismissal"] .dashboard-kpis p,
body[data-panel="dismissal"] .num-en,
body[data-panel="dismissal"] main td.num-en,
body[data-panel="dismissal"] main p.num-en,
body[data-panel="dismissal"] main p.font-bold[class*="text-"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
@media (max-width: 480px) {
    body[data-panel="dismissal"] .dashboard-kpis p.break-all,
    body[data-panel="dismissal"] main .grid p[class*="num-en"][class*="break-all"] {
        word-break: normal !important;
        overflow-wrap: anywhere;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-panel="dismissal"] .dashboard-kpis p span.text-xs,
    body[data-panel="dismissal"] .dashboard-kpis p span.text-base {
        font-size: 0.6rem !important;
    }
}

/* Y. Layered card shadows — premium depth feel.
      The OLD `shadow-card` is a single soft `0px 4px 40px -24px rgba`
      which produces a "Material 2014" flatness. Replace with a 3-layer
      stack: hairline 1px ring + tight contact shadow + soft ambient.
      Lift on hover. */
body[data-panel="dismissal"] main .shadow-card,
body[data-panel="dismissal"] main .shadow-sm {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -16px rgba(15, 23, 42, 0.12) !important;
}
body[data-panel="dismissal"] main .shadow-card:hover {
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.08),
        0 4px 8px -2px rgba(15, 23, 42, 0.06),
        0 16px 32px -16px rgba(15, 23, 42, 0.16) !important;
}

/* Z. Table headers — transparent with stronger border-bottom instead
      of `bg-gray-50` chrome that competes with the card background.
      Cleaner + more "data table" feel. */
body[data-panel="dismissal"] main table thead {
    background: transparent !important;
}
body[data-panel="dismissal"] main table thead tr {
    border-bottom: 2px solid #e5e7eb;
}
body[data-panel="dismissal"] main table thead th {
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    padding-bottom: 0.625rem !important;
}
[dir="rtl"] body[data-panel="dismissal"] main table thead th {
    /* keep readable AR small-caps look without text-transform */
    text-transform: none;
    letter-spacing: 0;
}

/* AA. POS cart sticky on phones — paired with .pos-cart-mobile-sticky
       class applied to the cart container in pos.blade.php. The class
       was defined here but never applied in markup (audit issue #8).
       Now: cart floats at bottom of the screen with safe-area-aware
       padding + soft top shadow + slight transparency for premium feel. */
@media (max-width: 1023px) {
    body[data-panel="dismissal"] .pos-cart-mobile-sticky {
        position: sticky;
        bottom: 0;
        z-index: 30;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        box-shadow:
            0 -1px 2px rgba(15, 23, 42, 0.04),
            0 -12px 32px -8px rgba(15, 23, 42, 0.18) !important;
        backdrop-filter: saturate(180%);
        -webkit-backdrop-filter: saturate(180%);
        background: rgba(255, 255, 255, 0.97) !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0)) !important;
    }
}

/* AB. Status badge utility — consistent shape + iconography across
       sales / bookings / purchases / damages views. Use as:
         <span class="dis-status-badge dis-status-success">Delivered</span>
       The ::before dot communicates state at a glance without an SVG. */
body[data-panel="dismissal"] .dis-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.2;
}
body[data-panel="dismissal"] .dis-status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}
body[data-panel="dismissal"] .dis-status-success { background: #ecfdf5; color: #047857; }
body[data-panel="dismissal"] .dis-status-warning { background: #fffbeb; color: #b45309; }
body[data-panel="dismissal"] .dis-status-danger  { background: #fef2f2; color: #b91c1c; }
body[data-panel="dismissal"] .dis-status-info    { background: #eff6ff; color: #1d4ed8; }
body[data-panel="dismissal"] .dis-status-purple  { background: #faf5ff; color: #6d28d9; }
body[data-panel="dismissal"] .dis-status-neutral { background: #f8fafc; color: #475569; }

/* Skeleton loader for filter-form submits + lazy lists. Apply to a
   placeholder div via class="dis-skeleton h-4 w-3/4 rounded". */
body[data-panel="dismissal"] .dis-skeleton {
    background: linear-gradient(90deg,
        rgba(229, 231, 235, 0.5) 0%,
        rgba(229, 231, 235, 0.9) 50%,
        rgba(229, 231, 235, 0.5) 100%);
    background-size: 200% 100%;
    animation: dis-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
}
@keyframes dis-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* AC. Bookings list — action buttons grid on small phones so تسليم +
       إلغاء don't overflow horizontally on 360px. */
@media (max-width: 480px) {
    body[data-panel="dismissal"] main .divide-y > div .flex.items-center.gap-2.mt-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    body[data-panel="dismissal"] main .divide-y > div .flex.items-center.gap-2.mt-3 > form,
    body[data-panel="dismissal"] main .divide-y > div .flex.items-center.gap-2.mt-3 > button {
        width: 100%;
    }
    body[data-panel="dismissal"] main .divide-y > div .flex.items-center.gap-2.mt-3 > form > button {
        width: 100%;
        justify-content: center;
    }
}

/* AD. Purchases KPI strip — 3-col on phones produces ~107px tiles
       which wrap "إجمالي الشهر" awkwardly. Drop to 2-col with the
       primary KPI spanning both columns. */
@media (max-width: 480px) {
    body[data-panel="dismissal"] main > .space-y-4 > .grid.grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }
    body[data-panel="dismissal"] main > .space-y-4 > .grid.grid-cols-3 > div:first-child {
        grid-column: span 2 / span 2;
    }
}

/* AE. Section divider helper — a horizontal hairline with a small caps
       label above grouped cards. Pair with .dis-section-label markup:
         <div class="dis-section-divider">
           <h3 class="dis-section-label">{{ __('dismissal.dashboard.section_today') }}</h3>
         </div>
       This is the "section labels with caps over card groups" pattern
       Shopify POS uses to signal hierarchy without adding chrome. */
body[data-panel="dismissal"] .dis-section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.25rem;
}
body[data-panel="dismissal"] .dis-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
body[data-panel="dismissal"] .dis-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
}
[dir="rtl"] body[data-panel="dismissal"] .dis-section-label {
    text-transform: none;
    letter-spacing: 0.05em;
    color: #64748b;
}


/* ═══════════════════════════════════════════════════════════════════
   AF. CRITICAL bell + avatar dropdown mobile sheets (audit 2026-05-26
   evening — user-reported overflow on actual mobile).

   The bell + avatar buttons live in the right cluster of the header.
   In RTL (Arabic), that cluster renders visually on the LEFT side of
   the viewport. The dropdowns use `absolute end-0` which in RTL maps
   to `left: 0` — anchoring the dropdown's LEFT edge to the button's
   LEFT edge. Then `w-80 = 320px` extends the dropdown RIGHTWARD from
   that left position. On a 393px viewport with the button at x≈80,
   the dropdown spans x=80 to x=400 — OVERFLOWING the right edge.

   Fix: on viewports ≤640px, flip the dropdown to `position: fixed`
   anchored to viewport edges via `inset-inline: 0.75rem`. This makes
   it a true sheet that always fits, regardless of where the trigger
   button is on screen. Works identically in LTR and RTL because
   `inset-inline` is logical (sets both inline-start AND inline-end).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body[data-panel="dismissal"] .dis-notif-dropdown,
    body[data-panel="dismissal"] .dis-avatar-dropdown {
        position: fixed !important;
        top: 4.75rem !important;
        inset-inline: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 5.5rem - env(safe-area-inset-bottom, 0)) !important;
        margin: 0 !important;
        /* Keep the soft shadow but stronger so it reads as a sheet not
           a tooltip; subtle border for definition on the white card. */
        box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.32) !important;
    }
    /* Notifications dropdown can be tall — let body scroll. */
    body[data-panel="dismissal"] .dis-notif-dropdown > div.flex-1 {
        max-height: calc(100vh - 12rem) !important;
    }
}

/* AG. Toast notification position on mobile — same constraint as the
       dropdown: keep within viewport edges. The toast is fired by
       dis-notification-toast.window event. */
@media (max-width: 640px) {
    body[data-panel="dismissal"] [x-show="open"][class*="fixed"][class*="top-6"] {
        top: 4.75rem !important;
        inset-inline: 0.75rem !important;
        max-width: none !important;
    }
}