/* ============================================
   MDM — Responsive layer
   Loaded AFTER app.css on purpose: several base rules (.app-footer, .footer-content,
   .user-info, .detail-panel) are declared late in app.css, so same-specificity overrides
   have to come later in the cascade to win. Keeping every breakpoint rule here also means
   there is one place to look when something misbehaves on a small screen.

   Breakpoints
     <= 1023px  tablet portrait and below — sidebar becomes an off-canvas drawer
     <=  599px  phones — single-column forms
     pointer: coarse — touch input at any width
   ============================================ */

/* ============================================
   Tablet and below — sidebar becomes an off-canvas drawer
   ============================================ */
@media (max-width: 1023px) {
    :root {
        --content-padding-x: 16px;
        --grid-gap: 16px;
    }

    .sidebar {
        position: fixed;
        top: var(--header-height);
        bottom: 0;
        left: 0;
        z-index: var(--z-drawer);
        width: min(280px, 85vw);
        min-width: 0;
        max-width: none;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
    }

    .app-layout.nav-open .sidebar {
        transform: none;
    }

    /* The rail never applies below 1024: the drawer is either open or off-canvas, always with labels. */
    .app-layout.nav-collapsed .sidebar {
        width: min(280px, 85vw);
        min-width: 0;
        max-width: none;
    }

    .app-layout.nav-collapsed .nav-header,
    .app-layout.nav-collapsed .nav-item span,
    .app-layout.nav-collapsed .nav-item .chevron,
    .app-layout.nav-collapsed .nav-children {
        display: revert;
    }

    .app-layout.nav-collapsed .nav-item {
        justify-content: flex-start;
        padding: 7px 10px;
    }

    .app-layout.nav-collapsed .nav-children {
        padding-left: 8px;
        margin-left: 0;
        border-left: none;
    }

    .app-layout.nav-collapsed .nav-item.child {
        padding: 8px 12px;
    }

    .app-layout.nav-collapsed .nav-item.child img.nav-icon,
    .app-layout.nav-collapsed .nav-item.child fluent-icon,
    .app-layout.nav-collapsed .nav-item.child svg {
        width: 20px;
        height: 20px;
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: var(--z-scrim);
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .app-layout.nav-open .nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* The real scroller is .main-content, not body. */
    .app-layout.nav-open .main-content {
        overflow: hidden;
    }

    .brand-subtitle,
    .header-center {
        display: none;
    }

    /* Name + role next to the avatar wrap into the logo at phone widths; the avatar alone still
       opens the same menu and the name is repeated inside it. */
    .user-info,
    .persona__name,
    .user-trigger .fluent-persona .name {
        display: none;
    }

    .header-solar-logo {
        height: 30px;
    }

    /* Forms reflow by available width instead of a fixed column count. min() keeps the track from
       overflowing when the container is narrower than the preferred field width.
       The doubled class is a deliberate specificity bump (0-2-0): several detail pages redefine
       .detail-grid in an inline <style> block, which the browser injects after this file, so a
       single-class selector here would always lose regardless of source order. */
    .detail-grid.detail-grid,
    .detail-grid.two-col,
    .detail-grid.four-col {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--field-min)), 1fr));
    }

    /* The detail panel is a side-by-side pane on desktop; there is no room for that here, so it
       becomes a full-screen sheet over the master list. */
    .master-panel.has-detail {
        flex: 1;
    }

    .detail-panel.open {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        z-index: var(--z-drawer);
        border-left: none;
    }

    /* Action bars hold several buttons; let them wrap rather than overflow the viewport. */
    .detail-header-toolbar,
    .page-header-content,
    .page-header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* The footer is informational; stacked over four lines it eats a quarter of a phone screen. */
    .app-footer {
        padding: 6px 12px;
    }

    .footer-content {
        gap: 2px 12px;
        justify-content: center;
        row-gap: 2px;
    }

    .footer-divider,
    .footer-label {
        display: none;
    }

    .footer-info-item {
        font-size: 11px;
    }

    .footer-copyright {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    /* Repeated inside the query: the :has() rule outranks a plain .main-content selector. */
    .main-content:has(.detail-header-toolbar) {
        padding-top: 0;
    }

    /* Dialogs mount at body level and default to widths wider than a phone. */
    fluent-dialog::part(control) {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    /* Dropdown listboxes are positioned at runtime and can be computed off-screen. */
    fluent-select::part(listbox),
    fluent-combobox::part(listbox) {
        max-width: calc(100vw - 16px);
        max-height: 50dvh;
    }

    /* The sync status panel is a fixed 520px drawer. */
    .ssp-host-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   Phones
   ============================================ */
@media (max-width: 599px) {
    :root {
        --content-padding-x: 12px;
        --content-padding-top: 12px;
    }

    .app-header {
        padding: 0 12px;
    }

    .page-title {
        font-size: 22px;
    }

    /* Single column: two 140px fields side by side are unusable for data entry. */
    .detail-grid.detail-grid,
    .detail-grid.two-col,
    .detail-grid.four-col {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .detail-content.detail-content {
        padding: var(--content-padding-x);
        gap: 16px;
    }

    /* Fields carry ~500 inline width declarations across 32 pages (mostly 100%, some fixed px).
       An author !important beats an inline declaration, so a single rule neutralises them all
       without editing every page. Scoped to form containers so toolbars and dialogs are untouched.
       .lookup-combobox is NOT a Fluent custom element: StrictLookupCombobox renders a plain div
       (display:inline-block in app.css) and it is the control most of these forms actually use, so
       it has to be listed explicitly or the fixed widths survive. */
    .detail-grid .lookup-combobox,
    .form-section .lookup-combobox,
    .detail-grid fluent-text-field,
    .detail-grid fluent-text-area,
    .detail-grid fluent-select,
    .detail-grid fluent-combobox,
    .detail-grid fluent-number-field,
    .detail-grid fluent-search,
    .detail-grid fluent-date-picker,
    .form-section fluent-text-field,
    .form-section fluent-text-area,
    .form-section fluent-select,
    .form-section fluent-combobox,
    .form-section fluent-number-field,
    .form-section fluent-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .detail-grid .lookup-combobox,
    .form-section .lookup-combobox {
        display: block !important;
    }

    /* Some Fluent components do not propagate the host width down to the inner control. */
    .detail-grid fluent-text-field::part(root),
    .detail-grid fluent-number-field::part(root),
    .detail-grid fluent-select::part(control),
    .detail-grid fluent-combobox::part(control),
    .form-section fluent-text-field::part(root),
    .form-section fluent-select::part(control) {
        width: 100%;
        box-sizing: border-box;
    }

    /* Radios are slotted into a shadow part, so stacking has to target the part, not the host. */
    .detail-grid fluent-radio-group::part(positioning-region),
    .form-section fluent-radio-group::part(positioning-region) {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Reclaim horizontal room: card + accordion padding alone ate ~56px of a 360px screen. */
    .detail-section {
        padding: 14px !important;
    }

    .accordion-content {
        padding: 12px;
    }

    /* 11px uppercase with letter-spacing turns a long label into three lines of micro-text. */
    .detail-label {
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-primary);
    }

    /* ── Action bar ────────────────────────────────────────────────────────
       The toolbar cannot hold Back + record name + Save + Save & Close at this
       width. The actions are lifted out of it into a bar pinned to the bottom,
       within thumb reach. Same markup, only repositioned: no duplicate buttons.
       z-index sits on --z-sticky so #blazor-error-ui (1000) still covers it. */
    .detail-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky);
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    }

    /* The primary action takes the room; secondary ones stay tappable but compact. */
    .detail-actions > fluent-button:first-child {
        flex: 1;
    }

    .detail-actions fluent-button {
        margin: 0 !important;
    }

    /* Keep the last fields reachable above the fixed bar. */
    .detail-content {
        padding-bottom: 76px;
    }

    /* The page also renders an inline submit card at the bottom; with the fixed bar the same
       actions would appear twice. */
    .detail-submit-card {
        display: none !important;
    }

    /* Two flex-grow spacers inside a wrapping toolbar each claim a full row. */
    .detail-header-toolbar fluent-spacer {
        display: none;
    }

    /* ── Compact read-only presentation ────────────────────────────────────
       Mobile is mostly used to consult records and approve staging, so read-only
       values drop their grey box and fixed height. The control type is unchanged
       (view/edit/create parity is about the control, not its skin) — this only
       removes chrome that was eating roughly a third of the vertical scroll. */
    .detail-value {
        padding: 0;
        background: transparent;
        min-height: 0;
        font-size: 15px;
    }

    .detail-grid .lookup-combobox [readonly],
    .detail-grid fluent-text-field[readonly]::part(root),
    .detail-grid fluent-text-area[readonly]::part(root) {
        background: transparent;
        border-color: transparent;
        padding-inline: 0;
    }

    /* Hero card: a 64px icon plus badges, persona and sync pills pushed the first
       real field several screens down. */
    .detail-icon {
        display: none;
    }

    .detail-header-card fluent-stack > .stack-horizontal,
    .detail-header-card .stack-horizontal {
        padding: 12px !important;
    }

    .main-content:has(.detail-header-toolbar) {
        padding-top: 0;
    }
}

/* ============================================
   Touch input — keyed off pointer type, not width, so a 1080px touch screen
   gets large targets and a narrow desktop window keeps its density.
   ============================================ */
@media (pointer: coarse) {
    fluent-button::part(control) {
        min-height: 44px;
        /* Without this the control keeps the 32px height app.css pins, so the box grows but the
           internal padding stays calibrated for 32px. */
        height: auto;
        padding-inline: 16px;
    }

    /* Lightweight buttons are inline affordances inside running text (the "Apply" in
       DecodedFieldHint sits in an 11px line). Forcing 44px there turns them into a block that
       breaks the line instead of improving the tap target. */
    fluent-button[appearance="lightweight"]::part(control),
    .nexus-filter-chip fluent-button::part(control) {
        min-height: 0;
        height: auto;
        padding-inline: 4px;
    }

    /* 16px is the threshold below which iOS Safari zooms the viewport on focus. */
    fluent-text-field::part(control),
    fluent-number-field::part(control),
    fluent-search::part(control),
    fluent-text-area::part(control) {
        min-height: 44px;
        font-size: 16px;
    }

    fluent-select::part(control),
    fluent-combobox::part(control) {
        min-height: 44px;
    }

    fluent-option,
    fluent-menu-item {
        min-height: 44px;
    }

    fluent-tab {
        min-height: 44px;
    }

    fluent-accordion-item::part(button) {
        min-height: 44px;
    }

    .nav-item,
    .nav-item.child {
        min-height: 44px;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
    }

    /* Avoid the 300ms double-tap zoom delay on controls. */
    button,
    fluent-button,
    .nav-item,
    .nexus-card-title {
        touch-action: manipulation;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .nav-scrim {
        transition: none;
    }
}