/* =====================================================================
   FusionMD — global mobile responsiveness (WI-63 P0 "zoom out" pass)
   Loaded LAST so it overrides MudBlazor + the page stylesheets.

   Strategy: MudBlazor and our shells are largely rem-based, so shrinking
   the root font-size scales the whole UI down proportionally on small
   screens (the "make everything smaller" ask). Paired with tighter page
   gutters and horizontally-scrollable data grids so wide tables stay
   usable instead of crushing their columns.

   The app header and the calendar are the worst offenders and get their
   own dedicated treatment in later phases — this file is the global base.
   ===================================================================== */

/* ---- Progressive "zoom out" with a readable floor ----
   Below 960px the root font-size scales DOWN smoothly as the screen shrinks (so the
   whole rem-based UI gets proportionally smaller), but it is clamped so it never becomes
   unreadable: floored at 13.5px and capped at 15.5px near the 960px boundary. The curve is
   ~15.5px @960px → ~13.5px @≤400px, then it holds at 13.5px no matter how small.
   Desktop (>960px) keeps the browser default 16px. */
@media (max-width: 960px) {
    html { font-size: clamp(13.5px, 12.05px + 0.357vw, 15.5px); }
}

/* ---- Reclaim horizontal space on phones: trim page gutters ---- */
@media (max-width: 600px) {
    .csc-page-container,
    .mud-container.mud-container-maxwidth-false {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Cards / papers lose their big inner padding on phones. */
    .mud-paper.pa-4 { padding: 12px !important; }
}

/* ---- List grids: keep them as horizontally-scrollable ROWS, not stacked cards ----
   MudBlazor cards a table by adding .mud-xs/sm/md-table to the wrapper, which sets the cells
   to display:flex with a ::before data-label and hides the header row. Undo exactly those
   rules (same selectors + !important so we win the cascade), then give the table a min-width
   inside a horizontally-scrollable container. Covers all three breakpoint classes. */
@media (max-width: 960px) {
    .mud-xs-table .mud-table-root .mud-table-head .mud-table-row,
    .mud-sm-table .mud-table-root .mud-table-head .mud-table-row,
    .mud-md-table .mud-table-root .mud-table-head .mud-table-row { display: table-row !important; }

    .mud-xs-table .mud-table-cell,
    .mud-sm-table .mud-table-cell,
    .mud-md-table .mud-table-cell {
        display: table-cell !important;
        justify-content: normal !important;
        align-items: normal !important;
    }

    .mud-xs-table .mud-table-cell::before,
    .mud-sm-table .mud-table-cell::before,
    .mud-md-table .mud-table-cell::before { content: "" !important; display: none !important; }

    /* Hide the small-screen "sort by" dropdown the card view injects. */
    .mud-xs-table .mud-table-smalldevices-sortselect,
    .mud-sm-table .mud-table-smalldevices-sortselect,
    .mud-md-table .mud-table-smalldevices-sortselect { display: none !important; }

    /* Scroll sideways + keep column shape. */
    .mud-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .mud-table-root { min-width: 760px !important; }
}

/* ---- Dialogs use the full small-screen width (less wasted margin) ---- */
@media (max-width: 600px) {
    .mud-dialog { margin: 8px !important; }
    .mud-dialog-width-sm,
    .mud-dialog-width-md { max-width: calc(100vw - 16px) !important; }
}

/* ---- Honor the notch / safe areas now that viewport-fit=cover is set ---- */
@media (max-width: 600px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* =====================================================================
   P1 — App header (the worst offender on mobile)
   Tighten the bar so the trailing action cluster + search don't overflow.
   ===================================================================== */
@media (max-width: 600px) {
    /* Trim the bar's own gutters + the trailing-cluster gaps/dividers. */
    .csc-appbar { padding-left: 4px !important; padding-right: 4px !important; }
    .csc-appbar-trailing { gap: 0 !important; }
    .csc-appbar-divider { display: none !important; }
    /* Shrink ghost icon buttons a touch so 3-4 fit without wrapping. */
    .csc-appbar-trailing .mud-icon-button { padding: 6px; }

    /* Context bar: smaller, and let the breadcrumbs scroll rather than push width. */
    .csc-context-bar { padding-top: 4px !important; padding-bottom: 4px !important; }
    .csc-context-breadcrumbs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .csc-context-breadcrumbs .mud-breadcrumbs { flex-wrap: nowrap; }
}

/* ---- Org chip: shrink the clinic name as the screen shrinks ----
   Desktop shows the full name ("FusionMD Cosmetic Surgery"); medium screens show just the first
   word ("FusionMD"); small screens show its capital-letter acronym ("FMD"). Only one span renders
   at a time. */
.csc-context-org-med,
.csc-context-org-short { display: none; }
@media (max-width: 960px) {
    .csc-context-org-full { display: none; }
    .csc-context-org-med { display: inline; }
}
@media (max-width: 600px) {
    .csc-context-org-med { display: none; }
    .csc-context-org-short { display: inline; }
}

/* Keep the breadcrumb trail on the smallest screens too — the org chip now collapses to its
   short "FMD" form so there's room, and the trail already scrolls horizontally (see the
   .csc-context-breadcrumbs overflow rule above) rather than forcing the row wider. */

/* ---- Guarantee every header button stays ON-SCREEN on small windows ----
   The middle (search) cluster shrinks first; the trailing action cluster never
   shrinks or wraps, so theme/bell/language/user always stay inside the viewport. */
@media (max-width: 600px) {
    .csc-appbar { flex-wrap: nowrap; overflow: hidden; }
    .csc-appbar-leading { min-width: 0; flex-shrink: 1; }
    .csc-clinic-logo { max-height: 30px !important; }
    .csc-appbar-brand-spacer { display: none !important; }
    .csc-appbar-search-cluster { min-width: 0; flex-shrink: 1; }
    .csc-appbar-trailing { flex-shrink: 0; flex-wrap: nowrap; }
}
/* Tightest screens: drop the niche language switcher so the essentials (theme,
   bell, user menu) are guaranteed to fit. Language stays reachable in Settings. */
@media (max-width: 430px) {
    .csc-appbar-lang { display: none !important; }
}

/* =====================================================================
   P2 — Calendar: expand to fill the available space on every screen size.
   The month table is width:100% and the week/day grid columns are 1fr, so the
   calendar already fills its wrapper — the waste is the scheduler's nested
   padding. Trim it so the calendar runs as wide as possible.
   ===================================================================== */
/* =====================================================================
   Header redesign (WI-63) — SMALL SCREENS ONLY. Regular desktop is unchanged:
   it keeps the full search bar, the clock, and the theme/appearance/language
   buttons. Below 960px the original CSS already collapses search to the
   magnifying-glass icon; here we only drop the small-screen (compact) clock.
   The theme/appearance/language move into the profile menu via MudHidden in
   markup, gated to SmAndDown. Desktop is untouched.
   ===================================================================== */
.csc-appbar-clock-outside--compact { display: none !important; }

/* ---- Fix the small-screen search overlay ----
   The scrim and the search flyout are both children of the app bar (same stacking context),
   and the scrim's z-index was painting OVER the flyout: the input sat behind it (couldn't
   type), tapping hit the scrim (closing it), and the backdrop-filter blurred the whole header.
   Raise the flyout above the scrim and replace the blur with a light dim. */
/* Make it a wide, comfortable search bar that spans almost the full width near the top of the
   screen (not the short pill confined to the compact cluster), sitting above the scrim. */
.csc-narrow-search-flyout {
    z-index: 1106 !important;
    position: fixed !important;
    top: 8px;
    left: 10px;
    right: 10px;
    transform: none !important;
    padding: 0 !important;
}
.csc-narrow-search-flyout-paper {
    z-index: 1106 !important;
    position: relative;
    width: 100% !important;
    min-height: 48px;
}
.csc-narrow-search-flyout .csc-search-shell,
.csc-narrow-search-flyout .csc-search-shell--popout { max-width: 100% !important; }
.csc-narrow-search-scrim {
    backdrop-filter: none !important;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) !important;
}
/* Search RESULTS dropdown: make it as wide as the overlay bar (it otherwise inherits the old
   narrow input width). Anchored at the input's left (~10px), so 100vw - 20px lines up. */
@media (max-width: 960px) {
    .csc-global-search-popover.mud-popover {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        z-index: 1110 !important;
    }
}

/* =====================================================================
   P2 — Calendar fill (kept from earlier)
   ===================================================================== */
.bp-calendar { width: 100%; }
.scheduler-card .pa-2 { padding: 4px !important; }

@media (max-width: 900px) {
    /* Phones/tablets: edge-to-edge. Cancel the page-container gutter + wrapper padding. */
    .scheduler-card { margin-left: -6px; margin-right: -6px; }
    .scheduler-card .pa-2 { padding: 0 !important; }
    .bp-cal-time-grid-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* The calendar toolbar (prev/next/today/hours/view) wraps tightly instead of overflowing. */
    .bp-calendar .mud-toolbar,
    .bp-calendar .mud-stack { row-gap: 6px; }
}