/* Mobile application layer. Every rule is viewport-scoped so the desktop
   console remains pixel-identical. */
@media (max-width: 900px) {
    html, body { max-width:100%; overflow-x:hidden; }
    .ignis-app-body { font-size:16px; }
    .shell-main, .shell-content, .main-content { min-width:0; max-width:100%; }
    .shell-content, .main-content { padding:1rem .85rem calc(5.5rem + env(safe-area-inset-bottom)); }

    .page-heading, .ui-page-toolbar, .section-heading-row, .ui-panel-header,
    .allowance-panel-heading, .dashboard-insight-header {
        align-items:flex-start; flex-direction:column; gap:.75rem;
    }
    .page-heading h1, .ui-page-title h1 { overflow-wrap:anywhere; font-size:clamp(1.8rem,8vw,2.45rem); line-height:1.08; }
    .page-heading p, .ui-page-title p { font-size:1rem; line-height:1.5; }
    .ui-page-toolbar-actions { display:grid; width:100%; grid-template-columns:1fr; gap:.6rem; }
    .ui-page-toolbar-actions > * { width:100%; }

    .ui-panel, .data-panel, .form-panel, .ui-form-panel, .exercise-panel,
    .duty-panel, .clothing-panel, .personnel-detail-card, .user-admin-card {
        min-width:0; max-width:100%; padding:1rem; border-radius:1rem;
    }
    .status-grid, .ui-summary-strip, .user-admin-grid, .personnel-module-grid,
    .personnel-age-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
    .status-card, .ui-summary-item { min-width:0; padding:.9rem; border-radius:.8rem; }

    .form-grid, .ui-form-grid, .exercise-form-grid, .detail-grid,
    .personnel-filter-grid, .earnings-grid, .radio-detail-grid {
        grid-template-columns:1fr !important; gap:.9rem;
    }
    .form-field, .ui-field, .exercise-form-field, .settings-field,
    .form-field-wide, .ui-field-wide { min-width:0; width:100%; grid-column:1/-1; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        width:100%; max-width:100%; min-height:3rem; padding:.7rem .8rem; font-size:16px;
    }
    textarea { min-height:7rem; resize:vertical; }
    input[type="checkbox"], input[type="radio"] { width:1.35rem; height:1.35rem; }
    label { line-height:1.35; }

    .form-actions, .ui-form-actions, .personnel-filter-actions {
        position:sticky; bottom:calc(.65rem + env(safe-area-inset-bottom)); z-index:12;
        display:grid; width:100%; grid-template-columns:1fr; gap:.55rem; padding:.7rem;
        border:1px solid #d4e0e5; border-radius:.9rem; background:rgb(255 255 255 / 96%);
        box-shadow:0 10px 30px rgb(14 44 58 / 18%); backdrop-filter:blur(12px);
    }
    .form-actions > *, .ui-form-actions > *, .personnel-filter-actions > *,
    .primary-button, .secondary-button, .ui-button, .button-link {
        min-height:3rem; font-size:.98rem; touch-action:manipulation;
    }

    .ui-table-wrapper, .table-wrapper {
        position:relative; width:100%; max-width:100%; overflow-x:auto;
        border-radius:.85rem; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch;
        box-shadow:inset -18px 0 18px -20px rgb(15 46 60 / 45%);
    }
    .ui-table, .data-table { width:max-content; min-width:100%; }
    .ui-table th, .ui-table td, .data-table th, .data-table td { min-height:3rem; padding:.75rem .65rem; }
    .row-actions, .action-icon-group { flex-wrap:nowrap; }
    .action-icon-button { min-width:2.75rem; min-height:2.75rem; }

    .tabs, .ui-tabs, .detail-tabs, .incident-tabs {
        max-width:100%; overflow-x:auto; flex-wrap:nowrap; overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch; scrollbar-width:thin;
    }
    .tabs > *, .ui-tabs > *, .detail-tabs > *, .incident-tabs > * { flex:0 0 auto; min-height:3rem; white-space:nowrap; }

    dialog, .modal, .ui-modal { width:calc(100vw - 1rem); max-width:none; max-height:calc(100dvh - 1rem); margin:.5rem; border-radius:1rem; }
    iframe { max-width:100%; }
}

@media (max-width: 520px) {
    .shell-content, .main-content { padding-inline:.65rem; }
    .status-grid, .ui-summary-strip, .user-admin-grid, .personnel-module-grid,
    .personnel-age-groups { grid-template-columns:1fr; }
    .ui-panel, .data-panel, .form-panel, .ui-form-panel, .exercise-panel,
    .duty-panel, .clothing-panel, .personnel-detail-card, .user-admin-card { padding:.85rem; }
}

@media (max-width: 900px) {
    .shell-environment { display:none !important; }

    :root[data-theme="dark"] .form-actions,
    :root[data-theme="dark"] .ui-form-actions,
    :root[data-theme="dark"] .personnel-filter-actions {
        border-color:#34414d; background:rgb(21 30 39 / 96%);
    }
}