/* ============================================================================
   responsive.css — ProviderAdmin-only mobile layer (mobile responsiveness sweep).

   Loads AFTER the demo1 theme and layering.css (see App.razor) so it may
   override theme selectors at phone widths. Opt-in primitives use ui-* names
   copied host-neutral from SpringFire.App/wwwroot/css/app-native.css so they
   can graduate to AppComponents.Shared/css/ui-kit.css later without markup
   changes. Nothing here restyles any selector at desktop widths.

   Frozen breakpoints (Bootstrap 5): 575.98 phone · 767.98 below-md · 991.98
   below-lg (the sidebar drawer boundary). Do not introduce new px values.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Bottom-sheet dialogs on phones. Applied to .modal-dialog via the
      ui-sheet class (ModalShell adds it when SheetOnPhone is true — the
      default). Inert above 575.98px. Ported from app-native.css:152-237
      (.ui-sheet selectors only); align-items:flex-end neutralises
      ModalShell's always-on modal-dialog-centered, and the grab handle uses
      a theme token so it reads in dark mode.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ui-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        align-items: flex-end;
        animation: ui-sheet-up .28s cubic-bezier(.2, .8, .2, 1);
    }

    .ui-sheet .modal-content {
        height: auto;
        max-height: 92vh;
        max-height: 92dvh;
        border: 0;
        border-radius: 18px 18px 0 0;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

        .ui-sheet .modal-content::before {
            content: "";
            display: block;
            flex: 0 0 auto;
            width: 40px;
            height: 4px;
            margin: 8px auto 0;
            border-radius: 2px;
            background: var(--bs-border-color, rgba(0, 0, 0, .18));
        }

    .ui-sheet .modal-header {
        border-radius: 0;
        flex: 0 0 auto;
    }

    .ui-sheet .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ui-sheet .modal-footer {
        flex: 0 0 auto;
    }
}

@keyframes ui-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-sheet {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   2. Stacked table. Opt-in (add ui-table-stack to a .table) for tables whose
      columns cannot share a phone screen: below md each row becomes a
      bordered block and its cells stack vertically. A cell renders its column
      label only when it carries data-label="..." — cells without one flow
      like card lines, so author/text/date feeds read naturally.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ui-table-stack thead {
        display: none;
    }

    .ui-table-stack tbody tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
    }

    .ui-table-stack tbody td {
        display: block;
        border: 0;
        width: auto !important;
        padding: .25rem 0;
    }

    .ui-table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--bs-secondary-color, #6c757d);
    }
}

/* ---------------------------------------------------------------------------
   3. End-of-sweep hardening — intentionally OFF while the sweep hunts
      overflows page by page (a day-1 guard would mask the very bugs being
      fixed). Uncomment in the final sweep commit. Never use overflow-x:hidden
      here: clip avoids creating a scroll container, so sticky descendants
      keep working.
   --------------------------------------------------------------------------- */
/*
@media (max-width: 991.98px) {
    .page-content {
        overflow-x: clip;
    }
}
*/