/* ============================================================================
   Mobile / tablet responsive overrides
   ============================================================================
   Loaded AFTER site.css and global-layout.css (see Server/Components/App.razor)
   so these media-scoped rules win over the fixed pixel widths that many
   components set inline (Radzen inline Style="" requires !important here).

   Breakpoints follow Radzen's own grid: sm 576px, md 768px, lg 1024px.
   Phones get the ≤767.98px rules; small tablets the ≤1023.98px ones.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Tablets (768px – 1199.98px): smaller global type
   ---------------------------------------------------------------------------
   The whole Radzen theme is sized in rem off --rz-root-font-size, so this one
   override scales text, paddings and controls down ~12.5% on iPad-class
   screens. Phones intentionally stay at 16px: iOS Safari auto-zooms into any
   focused input whose font-size is below 16px, which is worse than big text. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --rz-root-font-size: 10px;
        --rz-body-font-size : .75rem;

        /* Type scale for the 10px root. The theme's defaults use vw-based
           clamp()s tuned for desktop; fixed rem steps keep the heading
           hierarchy proportionate at this size (h4 = page titles = 15px). */
        --rz-text-h1-font-size: 2.4rem;
        --rz-text-h2-font-size: 2rem;
        --rz-text-h3-font-size: 1.7rem;
        --rz-text-h4-font-size: 1.5rem;
        --rz-text-h5-font-size: 1.25rem;
        --rz-text-h6-font-size: 1.1rem;
        --rz-text-display-h1-font-size: 3rem;
        --rz-text-display-h2-font-size: 2.4rem;
        --rz-text-display-h3-font-size: 2rem;
        --rz-text-display-h4-font-size: 1.7rem;
        --rz-text-display-h5-font-size: 1.4rem;
        --rz-text-display-h6-font-size: 1.15rem;
        --rz-text-subtitle1-font-size: 1rem;
        --rz-text-subtitle2-font-size: 0.9rem;
    }

    html {
        font-size: var(--rz-root-font-size);
    }
}

/* ---------------------------------------------------------------------------
   Laptops and below (≤ 1439.98px): list-page title toolbars
   --------------------------------------------------------------------------- */
@media (max-width: 1439.98px) {

    /* Elements marked rc-wide-only (e.g. the TaskBoard title's date-range
       text, which duplicates the SelectBar state) only show on wide desktops. */
    .rc-wide-only {
        display: none !important;
    }

    /* List-page toolbars (ListPageTitleComponent's right column: search box +
       date SelectBar + icon buttons) overflow LEFT over the page title when
       the window narrows, because the stack is end-justified and non-wrapping.
       Wrap to a second line under the title instead. !important because
       RadzenStack emits flex-wrap inline. */
    .rz-body [class*="rz-col"] > .rz-stack.rz-justify-content-flex-end {
        flex-wrap: wrap !important;
    }

    /* The toolbar search box is inline-styled to a fixed 350px; let it give
       way first so the SelectBar + buttons keep to one line. */
    .rz-body [class*="rz-col"] > .rz-stack.rz-justify-content-flex-end > .rz-textbox {
        width: auto !important;
        flex: 1 1 160px;
        min-width: 120px;
        max-width: 350px;
    }
}

/* ---------------------------------------------------------------------------
   Tablet and below (≤ 1023.98px)
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    /* The global search box is inline-styled to a fixed 320px in MainLayout;
       let it shrink with the viewport so the banner's right-side controls
       (mail / bell / assistant / profile) stay on screen. */
    .app-main-header .global-search-input {
        width: clamp(130px, 26vw, 320px) !important;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------------
   Phones (≤ 767.98px)
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* ---- Typography ------------------------------------------------------ */

    /* The root stays 16px on phones (see the tablet block's note on iOS input
       auto-zoom), and --rz-body-font-size must stay 1rem for the same reason:
       --rz-input-font-size inherits from it. Headings/subtitles are safe to
       compress, and need it — the theme's clamp() minimums are desktop-sized
       (an H4 page title would still be 20px on a 414px-wide phone). */
    :root {
        --rz-text-h1-font-size: 1.75rem;
        --rz-text-h2-font-size: 1.5rem;
        --rz-text-h3-font-size: 1.25rem;
        --rz-text-h4-font-size: 1.125rem;
        --rz-text-h5-font-size: 1rem;
        --rz-text-h6-font-size: 0.875rem;
        --rz-text-display-h1-font-size: 2.25rem;
        --rz-text-display-h2-font-size: 1.875rem;
        --rz-text-display-h3-font-size: 1.625rem;
        --rz-text-display-h4-font-size: 1.375rem;
        --rz-text-display-h5-font-size: 1.125rem;
        --rz-text-display-h6-font-size: 1rem;
        --rz-text-subtitle1-font-size: 0.9375rem;
        --rz-text-subtitle2-font-size: 0.8125rem;
    }

    /* ---- App banner ------------------------------------------------------ */

    /* Tenant logo has no size constraint of its own. */
    .app-main-header img {
        max-width: 32vw;
        height: auto;
    }

    /* Date-range select bars (Today / Yesterday / …) wrap their buttons
       instead of clipping off the viewport's left edge in end-justified rows. */
    .rz-body .rz-selectbar {
        flex-basis: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* ---- Footer ---------------------------------------------------------- */

    /* Branding + build info isn't worth the vertical space on a phone. */
    .rz-footer {
        display: none;
    }

    /* ---- Tab strips ------------------------------------------------------ */

    /* Scroll the tab strip horizontally instead of wrapping tab labels into
       three-line towers ("Plans Needing Review"). */
    .rz-tabview-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .rz-tabview-nav a,
    .rz-tabview-nav .rz-tabview-title {
        white-space: nowrap;
    }

    /* ---- Dialogs --------------------------------------------------------- */

    /* Centered dialogs (patient detail popup, wizards, …) go full screen.
       Side panels keep their own sizing; confirm/alert boxes stay small. */
    .rz-dialog-wrapper .rz-dialog:not(.rz-dialog-side):not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* The global-search suggestion panel is forced to 560px in site.css for
       the desktop row template; cap it to the viewport on phones. */
    .rz-autocomplete-panel:has(.global-search-row) {
        min-width: 0 !important;
    }

    .global-search-row {
        min-width: 0;
    }

    /* ---- FilterCard summary chips (TaskBoard, Patients, Devices, …) ------ */

    /* Pages lay these out with a fixed Size="2"/Size="3" column (one row at
       every width). Reflow the row's columns to 2 per row on phones without
       touching each page. Formula mirrors Radzen's own rz-col-6 gap-aware
       width so the row's Gap keeps working. */
    .rz-row:has(> [class*="rz-col"] > .filter-card) > [class*="rz-col"] {
        max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)) !important;
        flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)) !important;
    }

    /* ---- Horizontal stacks ----------------------------------------------- */

    /* Toolbars/title rows built as horizontal RadzenStacks overflow instead
       of wrapping. Let them wrap inside page content and dialogs. The app
       banner is deliberately excluded — it manages its own fixed row.
       !important because RadzenStack emits flex-wrap as an inline style. */
    .rz-body .rz-stack.rz-flex-row,
    .rz-dialog .rz-stack.rz-flex-row {
        flex-wrap: wrap !important;
    }
}

/* Small tablets / large phones (576px – 1023.98px): 3 chips per row reads
   better than 2 on phones and than 6-across on a portrait iPad. */
@media (min-width: 576px) and (max-width: 1023.98px) {
    .rz-row:has(> [class*="rz-col"] > .filter-card) > [class*="rz-col"] {
        max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)) !important;
        flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)) !important;
    }
}

/* The profile menu's name/email text clips against the viewport edge up to
   ~1200px (the gravatar stays); tablets keep the avatar only. */
@media (max-width: 1199.98px) {
    .app-main-header .rz-profile-menu b {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Small phones (≤ 575.98px) — the banner needs a harder squeeze
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .app-main-header .global-search-input {
        width: clamp(90px, 22vw, 130px) !important;
    }

    .app-main-header img {
        max-width: 26vw;
    }

    .app-main-header .notification-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
}