/* ============================================================================
   Dynamic Form Renderer — responsive stylesheet
   ----------------------------------------------------------------------------
   Two responsibilities:
     1. Universal mobile fixes for the public-survey chrome (AppBar height,
        logo size, wrapper padding) — applied regardless of the form's
        FormType so a Standard-Web form viewed on a phone is still usable.
     2. FormType-aware behaviour for the actual form body:
          .dyn-form--standard  — desktop-first, current behaviour
          .dyn-form--mobile    — always single-column, tight padding, small banner
          .dyn-form--adaptive  — Standard on >=600px, Mobile on <600px
   Breakpoint matches MudBlazor's Sm breakpoint (600px).
   ========================================================================== */


/* ── 1. Universal mobile chrome fixes ──────────────────────────────────── */

/* AnonymousSurveyLayout AppBar — 1.7.5 bumped to 96px for the enlarged logo,
   but that's too tall on a phone where it steals vertical real-estate. */
.anon-survey-appbar {
    height: 96px;
}
.anon-survey-logo {
    width: 200px !important;
    height: 80px !important;
}

@media (max-width: 600px) {
    .anon-survey-appbar {
        height: 56px !important;
    }
    .anon-survey-appbar .mud-toolbar {
        min-height: 56px !important;
    }
    .anon-survey-logo {
        width: 120px !important;
        height: 48px !important;
        margin-left: 8px !important;
        margin-right: 4px !important;
    }
    /* AnonymousSurveyLayout's inner wrapper had pa-16 ma-2 (=64px+8px = 72px
       horizontal padding per side, ate 144px of a 360px phone). The razor
       now uses pa-4 pa-md-16, but pin a hard ceiling here in case any other
       layout reuses these classes with fatter padding. */
    .anon-survey-wrap {
        padding: 12px !important;
        margin: 4px !important;
    }
}


/* ── 2. Dynamic-form body — default (applies to ALL FormTypes) ────────── */

.dyn-form {
    box-sizing: border-box;
}
.dyn-form *,
.dyn-form *::before,
.dyn-form *::after {
    box-sizing: border-box;
}

.dyn-form__banner {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 8px;
}

.dyn-form__section {
    /* Section MudPapers — Razor sets pa-4 (16px). FormType overrides below. */
}

/* DateTime row — used to be MudStack Row (always horizontal). Now a flex
   container that the FormType variants can flip to column. */
.dyn-form__dt-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}
.dyn-form__dt-row > * {
    flex: 1 1 200px;
    min-width: 0;
}


/* ── 3. .dyn-form--mobile — always single-column / tight ──────────────── */

.dyn-form--mobile .dyn-form__banner {
    max-height: 120px;
}
.dyn-form--mobile .dyn-form__section {
    padding: 12px !important;
}
.dyn-form--mobile .dyn-form__dt-row {
    flex-direction: column;
}
.dyn-form--mobile .dyn-form__dt-row > * {
    flex: 1 1 auto;
    width: 100%;
}


/* ── 4. .dyn-form--adaptive — Mobile behaviour below 600px ────────────── */

@media (max-width: 600px) {
    .dyn-form--adaptive .dyn-form__banner {
        max-height: 120px;
    }
    .dyn-form--adaptive .dyn-form__section {
        padding: 12px !important;
    }
    .dyn-form--adaptive .dyn-form__dt-row {
        flex-direction: column;
    }
    .dyn-form--adaptive .dyn-form__dt-row > * {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ── 5. Universal small-screen rendering safety net ───────────────────── */

/* Any form (Standard / Mobile / Adaptive), when viewed on a phone, should
   never overflow horizontally. MudBlazor inputs default to width:auto which
   can be wider than the viewport. */
@media (max-width: 600px) {
    .dyn-form .mud-input-control,
    .dyn-form .mud-slider,
    .dyn-form .mud-rating-root,
    .dyn-form .mud-radio-group,
    .dyn-form .mud-checkbox {
        max-width: 100%;
    }
    /* Submit button row should not push off-screen — flex-wrap lets the
       button drop to its own line on a very narrow phone. */
    .dyn-form .mud-button {
        flex-wrap: wrap;
    }
}