/* R3 slice 9/14 (40-modals-mobile.css) — extracted VERBATIM from styles.css lines 5175-5628. modal backdrop/base, app-wide responsive blocks (max-width 900/600/640px) + reduced-motion. Link order in index.html is load-bearing: cascade tie-breaks depend on it. Do not reorder. */ .modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(12, 18, 14, .28); backdrop-filter: blur(8px); } .modal { width: min(560px, 100%); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; } .modal-form { overflow-y: auto; overflow-x: hidden; } .modal-form .field { width: 100%; max-width: 100%; } .modal-error { min-height: 18px; color: #b84432; font-size: 12px; } svg { display: block; } @media (max-width: 900px) { .shell { padding: 10px; gap: 10px; } .sidebar { width: var(--sidebar-w-collapsed); } .logo-text-wrap, .nav-item span:not(.nav-ico):not(.nav-badge):not(.badge), .nav-badge, .phase-tag, .nav-section, .nav-label, .collapse-label { width: 0 !important; opacity: 0 !important; } .bento, .two-col, .settings-grid, .dashboard-bento, .dashboard-bento-secondary, .dashboard-bento-tertiary, .bank-account-grid { grid-template-columns: 1fr; } /* Bottom row: collapse 2-col layout at tablet */ .dashboard-bento-primary { grid-template-columns: 1fr; gap: 12px; } .dashboard-bento-primary > .delivery-card { grid-column: auto; grid-row: auto; order: 1; height: auto; } .dashboard-bento-primary > .chart-card:not(.delivery-card):not(.delivery-mix-card) { grid-column: auto; grid-row: auto; order: 3; height: auto; } .dashboard-bento-primary > .delivery-mix-card { grid-column: auto; grid-row: auto; order: 2; height: auto; } .geo-layout { grid-template-columns: 1fr; } .geo-map-card { display: none; } .geo-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .geo-lga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sponsor-flow { grid-template-columns: 1fr; } .kpi-strip, .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .sponsor-filter-grid { grid-template-columns: 1fr; } .search { margin-left: 0; } } @media (max-width: 600px) { /* The document scrolls on . must NOT be a scroll container, or position:sticky on the topbar silently breaks (a non-scrolling scroll container becomes the sticky reference and the bar scrolls away). Keep the off-canvas drawer's horizontal clip on ; body stays fully visible. Note: overflow-x:hidden + overflow-y:visible computes to auto, so body must be `overflow: visible` on both axes to avoid re-creating a scroll container. */ html { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; } body { height: auto; min-height: 100%; overflow: visible; } .view { overflow-y: visible; } .panel-header, .section-header { flex-direction: column; align-items: stretch; } .panel-actions { width: 100%; } /* Sponsor-school review: collapse the inline 1.2fr/1fr grid (inline style needs !important to override) so cost/impact stack under the details. */ .sponsor-review-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* Track Feeding: the school-list / detail and calendar / day-detail grids are defined with fixed px columns inline (280px 1fr, 1fr 280px, 340px 1fr). At phone width that squeezes the detail column to ~88px (cramped). Stack to one column. !important is required to beat the inline grid-template-columns. */ .track-feeding-layout, .calendar-panel-wrapper { grid-template-columns: 1fr !important; gap: 16px !important; } /* alert banner — already flex column, item collapses badge+content then buttons wrap */ .active-alert-item { grid-template-columns: auto 1fr; } .active-alert-item .row-actions { grid-column: 1 / -1; justify-content: flex-start; } .shell { min-height: 100vh; height: auto; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; } /* Mobile nav: full labeled sidebar as a slide-in drawer */ .topbar .nav-toggle { display: inline-flex; margin-right: auto; } .sidebar { position: fixed; top: 0; left: 0; right: auto; bottom: 0; z-index: 60; width: min(82vw, 300px); height: 100%; min-height: 0; border-radius: 0 18px 18px 0; padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform .28s cubic-bezier(.16, 1, .3, 1); } body.nav-open .sidebar { transform: translateX(0); box-shadow: 24px 0 48px -24px rgba(0, 0, 0, .55); } body.nav-open { overflow: hidden; } .nav-backdrop { display: block; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } /* Drawer shows full labels (override the <=900 icon-collapse) */ .sidebar .logo-text-wrap, .sidebar .nav-item span:not(.nav-ico):not(.nav-badge):not(.badge), .sidebar .nav-badge, .sidebar .phase-tag, .sidebar .nav-section, .sidebar .nav-label { width: auto !important; opacity: 1 !important; } .sidebar .collapse-btn { display: none; } .main { min-height: calc(100vh - 16px); } .topbar { width: 100%; align-self: auto; border-radius: 12px; justify-content: flex-end; position: sticky; /* Match the shell's 8px top padding so the bar stays put when it sticks — top:0 would yank it up 8px on the first scroll. */ top: 8px; z-index: 40; } .page-title { font-size: 22px; } .kpi-strip, .kpi-grid { grid-template-columns: 1fr; gap: 10px; } .kpi-card { padding: 16px 18px; } .kpi-value { font-size: 34px; } .table-card { overflow-x: auto; } .table { min-width: 760px; } .dashboard-bento, .settings-grid, .dashboard-bento-secondary, .dashboard-bento-tertiary, .bank-account-grid { grid-template-columns: 1fr; min-height: 0; } .dashboard-bento-primary > .delivery-card { min-height: 0; } .delivery-bars .bars-area { min-height: 160px; } .mini-chart-card { min-height: 320px; height: auto; } .sponsor-flow { grid-template-columns: 1fr; min-height: 0; } .alert-rules-list { max-height: none; } .chart-body { flex-direction: column; } .chart-left { width: auto; padding-bottom: 0; } .rate-ring-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .geo-zone-legend { grid-template-columns: 1fr; } .geo-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .geo-lga-grid { grid-template-columns: 1fr; } .calendar-weekdays, .sponsor-calendar { gap: 4px; } .calendar-day, .calendar-pad { min-height: 54px; } .calendar-day { padding: 6px; } .toolbar { padding: 12px; } .field, .primary-btn { width: 100%; } /* Filter selects stack full-width on mobile (override the desktop cap). */ select.compact-field { width: 100%; } /* Wizard footer (Back/Next): keep Next a normal-sized button, not full-width */ .wizard-actions .primary-btn, .wizard-actions .ghost-btn { width: auto; flex: 0 0 auto; } } /* State Management table -> stacked cards on phones (no horizontal scroll, per 02-geography Mobile) */ @media (max-width: 640px) { .table-wrap .state-mgmt-table { min-width: 0; } .state-mgmt-table thead { display: none; } .state-mgmt-table, .state-mgmt-table tbody { display: block; width: 100%; } .state-mgmt-table tr { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; margin-bottom: 12px; } .state-mgmt-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border: none; text-align: right; } .state-mgmt-table tbody td + td { border-top: 1px solid var(--border); } .state-mgmt-table tbody td::before { content: attr(data-label); font-family: var(--font-display-new); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { /* `*` does not match pseudo-elements, so ::before/::after are listed explicitly — this keeps every pulse (live dot halo, stepper ring, sdt ring/flow, suggested-card pulse, …) disabled for reduced-motion users, including the ones that now animate on pseudo-elements. */ .live-dot, .bar, .bar-fill, .spinner, *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }