/*
 * Doctor Phone Pro - mobile shell calibration (v2.2)
 * Loaded after the inline styles. Tailwind (CDN) injects its own <style> later at runtime, so overrides of
 * Tailwind utilities use `:root` for higher specificity instead of !important.
 *
 * 1. Dynamic viewport units: overlays and tall panels follow the *visible* viewport, so the mobile URL bar
 *    collapsing/expanding no longer clips sheets or makes them jump.
 * 2. Safe areas: bottom sheets and fixed bottom bars clear the home-indicator / gesture bar.
 * 3. Scroll containment: dragging an internal list never triggers pull-to-refresh or scroll-chains to the page.
 */

/* 1. dynamic viewport ------------------------------------------------------------------------- */
html { height: 100%; }
body { min-height: 100vh; min-height: 100dvh; }

@supports (height: 100dvh) {
    :root .min-h-screen { min-height: 100dvh; }
    :root .h-screen { height: 100dvh; }
    :root .fixed.inset-0 { height: 100dvh; }
    :root .max-h-\[55vh\] { max-height: 55dvh; }
    :root .max-h-\[60vh\] { max-height: 60dvh; }
    :root .max-h-\[90vh\] { max-height: 90dvh; }
    :root .max-h-\[92vh\] { max-height: 92dvh; }
    :root .max-h-\[94vh\] { max-height: 94dvh; }
    :root .h-\[92vh\] { height: 92dvh; }
}

/* 2. safe areas ---------------------------------------------------------------------------------- */
/* bottom-anchored sheets (overlays that align their panel to the bottom edge) */
:root .fixed.inset-0.items-end > :first-child { margin-bottom: env(safe-area-inset-bottom, 0px); }
/* floating bottom widgets: lift them above the gesture bar (additive: 0 on devices without an inset) */
:root .fixed.bottom-4 { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
:root .fixed.bottom-16 { bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
/* (overlay/bar padding is left to the markup: overriding Tailwind padding here would remove spacing on
   devices without a notch; the page itself already pads body with env(safe-area-inset-*)) */

/* 3. scroll containment ------------------------------------------------------------------------- */
.overflow-y-auto, .overflow-auto, .overflow-y-scroll, .history-scroll {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.fixed.inset-0 { overscroll-behavior: contain; }

/* sync badge states (Saving -> Synced) ---------------------------------------------------------- */
#networkStatusText[data-sync-state="saving"]  { color: #fbbf24; }
#networkStatusText[data-sync-state="synced"]  { color: #34d399; }
#networkStatusText[data-sync-state="offline"] { color: #f87171; }
#networkStatusText[data-sync-state="failed"]  { color: #f87171; }

/* accessibility: honour reduced-motion for the app's decorative animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* touch targets (measured with Chromium at 360/390/430 px): enlarge the TAP AREA to >= 44x44 with an invisible
   hit-slop, so the 360 px header keeps its exact layout (no extra width that could overflow) ------------------ */
@media (pointer: coarse) {
    #headerBackBtn, #headerHomeBtn, #headerAdminBadge, #btnHeaderMessages, #btnHeaderNotifications, #btnHeaderManagement,
    #deviceStationBadge, #btnManualSync, [id^="publicLangBtn_"] { position: relative; }

    /* header: 36 px icons with 6 px gaps cannot host non-overlapping 44 px targets, so on touch screens they become
       40 px (the flexible identity badge absorbs the width) and get a 2 px slop -> 44 px, no overlap (gap 6 > 2+2).
       ::after is laid out from the PADDING box, so the 1 px border is compensated: inset -3px = 2 px slop + 1 px border */
    :root #headerBackBtn, :root #btnHeaderMessages, :root #btnHeaderNotifications, :root #btnHeaderManagement,
    :root #deviceStationBadge { min-width: 40px; width: 40px; height: 40px; }
    :root #headerHomeBtn { height: 40px; }
    /* the identity badge clips its children (overflow hidden for the truncated name), so no slop: size it directly */
    :root #headerAdminBadge { height: 44px; min-width: 44px; }
    #headerBackBtn::after, #headerHomeBtn::after,
    #btnHeaderMessages::after, #btnHeaderNotifications::after, #btnHeaderManagement::after {
        content: ""; position: absolute; inset: -3px;
    }
    /* small badges / pills */
    #deviceStationBadge::after { content: ""; position: absolute; inset: -3px; }
    #btnManualSync::after { content: ""; position: absolute; inset: -7px -2px; }
    [id^="publicLangBtn_"]::after { content: ""; position: absolute; inset: -10px -2px; }

    /* inputs cannot carry a pseudo-element: give them the height directly */
    #quickDirectCodeInput, #publicSearchInput { min-height: 44px; }
    button[onclick="executeQuickDirectSearch()"] { min-height: 44px; }
}

/* admin floating sync widget (v2.4): it covered the primary right-aligned card actions (e.g. «بيع») in the thumb
   zone. Now a single 44 px round icon on the LEFT edge (RTL: away from primary actions); the textual sync state is
   already shown by the header badge. Tabs get bottom padding so the last card can always scroll clear of it. */
:root #manualSyncContainer { right: auto; left: 10px; }
:root #manualSyncContainer #dataHubSyncIndicator { display: none; }
:root #btnManualSync { width: 44px; height: 44px; padding: 0; border-radius: 999px; justify-content: center; }
:root #btnManualSync span { display: none; }
:root #btnManualSync svg { width: 18px; height: 18px; }
:root #adminApp .tab-content { padding-bottom: 72px; }

/* thumb-zone forms (v2.5) ----------------------------------------------------------------------------------------
   intake + edit: every field and button >= 44 px on touch screens, money/phone fields open the numeric keypad,
   the intake Save button stays pinned just above the footer while you scroll the form. */
@media (pointer: coarse) {
    #tab-new input:not([type="checkbox"]):not([type="radio"]), #tab-new select, #tab-new button,
    #adminEditModal input:not([type="checkbox"]):not([type="radio"]), #adminEditModal select, #adminEditModal button { min-height: 44px; }
    /* quick-issue chips: one horizontally scrolling row of 44 px chips instead of a wrapped wall of 22 px pills */
    #repairIssuesListContainer div:has(> button[onclick^="setQuickIssueText"]) { flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; }
    #repairIssuesListContainer button[onclick^="setQuickIssueText"] { white-space: nowrap; flex: 0 0 auto; padding-inline: 12px; }
}
:root #btnSaveNewPhone { position: sticky; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); z-index: 25; box-shadow: 0 -8px 24px rgba(2, 6, 23, .55); }
#intakeDraftNote:not(.hidden) { display: flex; }

/* the floating manual-sync button only on the home screen: sync is automatic, and on work screens it covered
   primary actions (the pinned intake Save button, card actions) */
body[data-tab]:not([data-tab="home"]) #manualSyncContainer { display: none !important; }