/* ============================================================
   TCW Responsive / Mobile Interaction Stylesheet — F46 Plan 46-03
   ============================================================
   Owner:  V02 / F46 / Plan 46-03
   Scope:  Mobile interaction patterns — layout/UX concerns separate from a11y.css.
           Loaded after a11y.css in App.razor cascade.

   Design contract:
   - All values use var(--tcw-*) tokens. Zero inline hex.
   - Three breakpoint concerns:
       768px — iOS input zoom prevention
       640px — SfGrid card stack (narrow viewports)
       600px — SfDialog bottom-sheet (phone-width viewports)
   ============================================================ */

/* ============================================================
   A. iOS input zoom prevention
   iOS Safari auto-zooms when input font-size < 16px. Prevent by
   enforcing a minimum of 16px on all inputs at narrow viewports.
   max() ensures the value never drops below 16px while still
   honoring larger token values on larger swatches.
   ============================================================ */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: max(16px, var(--tcw-font-size-base, 16px));
    }
}

/* ============================================================
   B. SfGrid mobile card stack
   Stacks each SfGrid row as a Riser-colored card at narrow viewports (< 640px).
   Uses --tcw-riser background and --tcw-radius-comfortable corners.
   Row data-labels applied via Syncfusion's responsive column mode (AllowResizing).
   This CSS enables the visual card treatment; Syncfusion handles DOM reflow.
   ============================================================ */
@media (max-width: 640px) {
    .e-grid .e-row {
        display: flex;
        flex-direction: column;
        background-color: var(--tcw-riser);
        border-radius: var(--tcw-radius-comfortable, 12px);
        margin-block-end: var(--tcw-space-3, 12px);
        padding: var(--tcw-space-3, 12px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .e-grid .e-row .e-rowcell {
        border: none;
        padding-block: var(--tcw-space-1, 4px);
    }
}

/* ============================================================
   C. SfDialog bottom-sheet on mobile
   Slides the SfDialog to the bottom of the viewport at phone-width (< 600px).
   Rounded top corners only — the bottom-sheet pattern familiar from iOS/Material.
   Primary action button gets full-width accent-1 treatment for prominent CTA.
   Syncfusion SfDialog root class is .e-dialog.
   ============================================================ */
@media (max-width: 600px) {
    .e-dialog {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--tcw-radius-pronounced, 16px) var(--tcw-radius-pronounced, 16px) 0 0 !important;
        margin: 0 !important;
    }

    /* Primary action button at bottom of sheet — full-width accent-1 treatment */
    .e-dialog .e-footer-content .e-primary.e-btn {
        background-color: var(--tcw-accent-1);
        color: var(--tcw-text-on-accent);
        width: 100%;
        border-radius: var(--tcw-radius-subtle);
    }
}