/* Dev responsive workspace: same routes and server-side permissions at every size. */
.mobile-workspace, .mobile-dock { display: none; }
@media screen and (max-width: 1100px) {
    .ignis-app-body { --mobile-panel: var(--console-panel, #fff); --mobile-text: var(--console-text, #183b4c); }
    .ignis-app-body .shell-main { margin-left: 0; width: 100%; min-width: 0; }
    .ignis-app-body .shell-content { padding: 20px 20px calc(96px + env(safe-area-inset-bottom)); }
    .ignis-app-body .shell-topbar { height: auto; min-height: 72px; padding: 8px 16px 8px 64px; gap: 12px; }
    .ignis-app-body .mobile-rail-toggle { display: none; }
    .ignis-app-body .app-rail { width: min(320px, 88vw); }
    .ignis-app-body .rail-brand { min-height: 72px; padding: 12px 20px 12px 70px; }
    .ignis-app-body .rail-navigation { padding: 8px; }
    .ignis-app-body .rail-item { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 54px; padding: 12px; border-radius: 10px; }
    .ignis-app-body .rail-label { font-size: 15px; white-space: normal; }
    .ignis-app-body .mobile-nav-toggle { top: 14px; left: 12px; width: 44px; height: 44px; border-radius: 12px; background: var(--mobile-panel); color: var(--mobile-text); }
    .ignis-app-body .topbar-start { flex: 0 0 auto; }
    .ignis-app-body .topbar-platform-logo { width: 36px; height: 36px; object-fit: contain; }
    .ignis-app-body .topbar-department-selector { position: relative; left: auto; top: auto; translate: none; min-width: 0; flex: 1; max-width: 460px; }
    .ignis-app-body .topbar-department-selector summary { min-height: 44px; min-width: 0; }
    .ignis-app-body .topbar-department-selector strong { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; }
    .ignis-app-body .topbar-department-menu { width: min(400px, calc(100vw - 28px)); max-height: 65dvh; overflow: auto; }
    .ignis-app-body .shell-topbar-actions { flex: 0 0 auto; gap: 4px; }
    .ignis-app-body .shell-user { max-width: 120px; min-height: 44px; }
    .ignis-app-body .shell-user small { display: none; }
    .ignis-app-body .theme-toggle { min-width: 44px; min-height: 44px; }
    .mobile-workspace { display: grid; gap: 18px; margin-bottom: 24px; }
    .mobile-workspace-heading { padding: 24px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #103a50, #156987); }
    .mobile-workspace-heading > span { font-weight: 800; letter-spacing: .04em; font-size: 13px; }
    .mobile-brand-accent { color: #ff9471; }
    .mobile-workspace-heading h2 { margin: 10px 0 6px; color: #fff; font-size: 26px; }
    .mobile-workspace-heading p { color: #d7eaf2; margin: 0; font-size: 14px; line-height: 1.5; }
    .mobile-workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .ignis-app-body .mobile-workspace-tile { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 12px; padding: 18px; min-height: 100px; min-width: 0; border: 1px solid var(--console-border, #d7e2e8); border-radius: 16px; background: var(--mobile-panel); color: var(--mobile-text); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 4px 16px rgb(20 50 70 / 4%); }
    .mobile-workspace-tile strong { font-size: 15px; overflow-wrap: anywhere; }
    .mobile-workspace-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #e9f4fa; color: #12749c; }
    .mobile-workspace-icon svg { width: 24px; height: 24px; }
    .mobile-workspace-arrow { color: #568095; }
    .mobile-dock { position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--console-border, #d7e2e8); background: var(--mobile-panel); box-shadow: 0 -4px 20px rgb(20 50 70 / 6%); }
    .mobile-dock > * { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; width: min(240px, 45%); border: 0; border-radius: 12px; background: transparent; color: var(--mobile-text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
    .mobile-dock button { background: #e9f4fa; color: #146b8e; }
    .mobile-dock svg { width: 22px; height: 22px; }
    .mobile-workspace-tile:focus-visible, .mobile-dock > :focus-visible { outline: 3px solid #078dcb; outline-offset: 3px; }
    .ignis-app-body .flyout-link { min-height: 56px !important; }
    .ignis-app-body .module-flyout .flyout-link { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: start; }
    .ignis-app-body.navigation-flyout-open .mobile-nav-toggle { visibility: hidden; }
    .ignis-app-body .flyout-close, .ignis-app-body .flyout-back { min-height: 44px; min-width: 44px; }
    .ignis-app-body .module-flyout .flyout-content { padding-bottom: env(safe-area-inset-bottom); }
    .ignis-app-body :is(.exercise-form-grid, .form-grid, .ui-form-grid, .instruction-form-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ignis-app-body :is(input, select, textarea) { max-width: 100%; box-sizing: border-box; }
    .ignis-app-body :is(.ui-table-wrapper, .table-wrapper, .personnel-table-wrapper) { max-width: 100%; overflow-x: auto; }
    .ignis-app-body :is(.form-actions, .ui-form-actions, .personnel-filter-actions) { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .ignis-app-body :is(.ui-tabs, .incident-tabs, .detail-tabs) { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .ignis-app-body :is(.ui-tabs, .incident-tabs, .detail-tabs) > * { flex-shrink: 0; min-height: 44px; }
    :root[data-theme="dark"] .mobile-workspace-icon, :root[data-theme="dark"] .mobile-dock button { background: #203e50; color: #8ed5f4; }
    :root[data-theme="dark"] .ignis-app-body a.mobile-workspace-tile,
    :root[data-theme="dark"] .ignis-app-body .mobile-dock > a { color: #e3edf3 !important; }
    :root[data-theme="dark"] .ignis-app-body .topbar-suggestion-button { background: transparent; color: #8ed5f4; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
    .ignis-app-body :is(.exercise-form-grid, .form-grid, .ui-form-grid, .instruction-form-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ignis-app-body .module-flyout .flyout-panel:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ignis-app-body .module-flyout .flyout-column { min-width: 0; border-right: 1px solid var(--ignis-nav-border); }
}
@media screen and (max-width: 700px) {
    .ignis-app-body .shell-content { padding: 14px 12px calc(88px + env(safe-area-inset-bottom)); }
    .ignis-app-body .shell-topbar { flex-wrap: wrap; padding-left: 64px; padding-right: 10px; }
    .ignis-app-body .topbar-start { display: none; }
    .ignis-app-body .topbar-department-selector { max-width: none; flex-basis: 100%; }
    .ignis-app-body .shell-topbar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .ignis-app-body .topbar-department-selector summary small { font-size: 10px; }
    .ignis-app-body .shell-topbar-actions .topbar-suggestion-button { min-width: 44px; min-height: 44px; }
    .ignis-app-body .shell-user { max-width: 70px; font-size: 11px; }
    .ignis-app-body .module-flyout .flyout-back > span:last-child { display: none; }
    .ignis-app-body .module-flyout .flyout-heading h2 { font-size: 20px; white-space: normal; overflow: visible; line-height: 1.2; }
    .mobile-workspace-heading { padding: 20px; border-radius: 16px; }
    .mobile-workspace-heading h2 { font-size: 24px; }
    .mobile-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ignis-app-body .mobile-workspace-tile { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; min-height: 122px; }
    .mobile-workspace-icon { grid-column: 1; }
    .mobile-workspace-tile strong { grid-row: 2; grid-column: 1 / -1; font-size: 14px; }
    .mobile-workspace-arrow { grid-row: 1; grid-column: 2; }
    .ignis-app-body :is(.exercise-form-grid, .exercise-form-content-grid, .form-grid, .ui-form-grid, .instruction-form-grid) { grid-template-columns: minmax(0, 1fr) !important; }
    .ignis-app-body :is(.ui-page-toolbar, .page-heading) { padding: 16px 12px; }
    .ignis-app-body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
    .ignis-app-body .dashboard-celebration-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .ignis-app-body .dashboard-celebration-content { grid-column: 1 / -1; grid-row: 2; }
    .ignis-app-body .dashboard-celebration-countdown { grid-column: 2; grid-row: 1; }
}
@media print {
    .mobile-workspace, .mobile-dock, .mobile-nav-toggle { display: none !important; }
}

/* One continuous mobile visual language, including module and record pages. */
@media screen and (max-width: 1100px) {
    .ignis-app-body .shell-content { background: var(--console-background, #eef3f6); }
    .ignis-app-body .mobile-workspace ~ .ui-page-toolbar { display: none; }
    .ignis-app-body .app-rail { width: min(620px, 100vw); background: var(--mobile-panel); color: var(--mobile-text); }
    .ignis-app-body .rail-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; align-content: start; }
    .ignis-app-body .rail-item { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 110px; border: 1px solid var(--console-border, #d7e2e8); background: var(--mobile-panel); color: var(--mobile-text); border-radius: 16px; text-align: center; }
    .ignis-app-body .rail-item.is-active { background: #e9f4fa; color: #146b8e; }
    .ignis-app-body .rail-label { font-size: 14px; }
    .ignis-app-body .module-flyout { background: var(--mobile-panel); }
    .ignis-app-body .module-flyout .flyout-panel:not([hidden]) { display: grid; grid-template-columns: 1fr; gap: 20px; }
    .ignis-app-body .module-flyout .flyout-column { border: 0; padding: 0; }
    .ignis-app-body .module-flyout .flyout-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ignis-app-body .module-flyout .flyout-link { display: flex !important; flex-direction: column; justify-content: flex-start; padding: 18px !important; min-height: 130px !important; border: 1px solid var(--console-border, #d7e2e8) !important; border-radius: 16px !important; background: var(--mobile-panel); }
    .ignis-app-body :is(.ui-panel, .panel, .card, .dashboard-command-panel, .dashboard-insight-panel) { min-width: 0; max-width: 100%; border: 1px solid var(--console-border, #d7e2e8); border-radius: 18px; padding: 18px; background: var(--mobile-panel); box-shadow: 0 4px 16px rgb(20 50 70 / 4%); }
    .ignis-app-body :is(.ui-tabs, .incident-tabs, .detail-tabs) { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; padding: 8px; border: 0; white-space: normal; }
    .ignis-app-body :is(.ui-tabs, .incident-tabs, .detail-tabs) > * { display: flex; justify-content: center; align-items: center; min-height: 58px; border: 1px solid var(--console-border, #d7e2e8); border-radius: 12px; background: var(--mobile-panel); text-align: center; }
    .ignis-app-body :is(.ui-page-toolbar, .page-heading) { border-radius: 16px; margin-bottom: 16px; }
    .ignis-app-body :is(.ui-button, .primary-button, .secondary-button) { border-radius: 12px; min-height: 44px; }
    .ignis-app-body .shell-content fieldset { min-width: 0; border: 1px solid var(--console-border, #d7e2e8); border-radius: 16px; padding: 16px; }
    .ignis-app-body .mobile-record-cards { display: block; min-width: 0 !important; width: 100% !important; background: transparent; border: 0; }
    .ignis-app-body .mobile-record-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ignis-app-body .mobile-record-cards > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ignis-app-body .mobile-record-cards > tbody > tr { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--console-border, #d7e2e8); border-radius: 16px; background: var(--mobile-panel); box-shadow: 0 4px 16px rgb(20 50 70 / 4%); }
    .ignis-app-body .mobile-record-cards > tbody > tr > :is(td, th) { display: block; width: auto !important; min-width: 0 !important; max-width: 100%; padding: 10px 0; border: 0; white-space: normal; overflow-wrap: anywhere; background: transparent; }
    .ignis-app-body .mobile-record-cards > tbody > tr > :is(td, th)::before { content: attr(data-mobile-label); display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--mobile-text); opacity: .75; }
    .ignis-app-body .mobile-matrix-card { width: 100%; max-width: 100%; overflow: auto; border: 1px solid var(--console-border, #d7e2e8); border-radius: 16px; background: var(--mobile-panel); }
    :root[data-theme="dark"] .ignis-app-body .rail-item.is-active { background: #203e50; color: #8ed5f4; }
    .ignis-app-body .module-flyout .flyout-links > .flyout-link { background: var(--mobile-panel) !important; color: var(--mobile-text) !important; box-shadow: 0 4px 16px rgb(0 0 0 / 8%); }
    .ignis-app-body .mobile-record-cards > tbody > tr > :is(td, th) { height: auto !important; flex-shrink: 0; overflow: visible; }
    .ignis-app-body :is(.exercise-form-grid, .form-grid, .ui-form-grid, .instruction-form-grid) > label:not(:has(input[type="checkbox"], input[type="radio"])) { display: grid; gap: 8px; }
    .ignis-app-body :is(.exercise-form-grid, .form-grid, .ui-form-grid, .instruction-form-grid) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 44px; border-radius: 10px; }
}
@media screen and (max-width: 700px) {
    .ignis-app-body .mobile-record-cards > tbody { grid-template-columns: minmax(0, 1fr); }
    .ignis-app-body :is(.dashboard-command-grid, .dashboard-insight-grid) { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (min-width: 1101px), print {
    .mobile-matrix-card { display: contents; }
}