/* UX4-A shared foundation. Loaded only by the server capability; the root scope
   is a second isolation boundary. 480 / 768 / 1024 are the shared breakpoints. */
html.ui4-foundation-document { --ui4-gutter: 12px; --ui4-gap: 12px; overflow-x: visible; }
html.ui4-foundation-document body { width: 100%; min-width: 0; overflow-x: visible; }
html.ui4-foundation-document *, html.ui4-foundation-document *::before,
html.ui4-foundation-document *::after { box-sizing: border-box; }
html.ui4-foundation-document :where(.ui4-stack, .ui4-cluster, .ui4-grid, .ui4-card,
.ui4-card-body, .ui4-card-header, .ui4-page-header, .ui4-page-header-main,
.ui4-page-header-tools, .ui4-action-bar, .ui4-action-bar-main, .ui4-action-bar-controls, .admin-section-stack, .ui4-editor-workspace,
.bookmark-toolbar-controls, .tools-main-stack, .tools-side-stack) > * { min-width: 0; }
html.ui4-foundation-document :where(.ui4-card, .ui4-card-body, .ui4-filter-row,
.ui4-editor-pane, .ux-ref-section, .ui4-table-shell) { min-width: 0; max-width: 100%; }
html.ui4-foundation-document .ui4-stack { display: flex; flex-direction: column; gap: var(--ui4-gap); }
html.ui4-foundation-document .ui4-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ui4-foundation-document .ui4-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--ui4-gap); }
html.ui4-foundation-document :where(.ui4-local-scroll, .ui4-table-shell) {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    overflow: auto; overscroll-behavior-inline: contain;
}
/* Explicit IDs outrank the legacy fixed widths, including the tablet gap.
   Preserve the released desktop maximum; apply outer gutters only below 1024. */
html.ui4-foundation-document .ui4-container,
html.ui4-foundation-document #wrapper {
    width: 100%; max-width: 942px; margin-inline: auto;
}
html.ui4-foundation-document .ui4-container {
    padding-left: max(var(--ui4-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ui4-gutter), env(safe-area-inset-right));
}
html.ui4-foundation-document #inner_main,
html.ui4-foundation-document #inner_main_centre,
html.ui4-foundation-document #inner_body_container { width: 100%; max-width: 100%; min-width: 0; }
html.ui4-foundation-document #inner_body_container { display: flex; flex-wrap: wrap; gap: 0; }
html.ui4-foundation-document #left_section { flex: 0 0 148px; }
html.ui4-foundation-document #inner_body_container #middle_section.command-center { flex: 1 1 0; width: auto; min-width: 0; max-width: 100%; }
/* The released #middle_section .page_details rule fixes this nested shell at
   762px. Match its ID specificity inside the capability boundary, so every
   pilot's content shrinks with its parent rather than widening the document. */
html.ui4-foundation-document #middle_section .page_details.mx-admin-container {
    width: 100%; min-width: 0; max-width: 100%;
}
html.ui4-foundation-document .ui_4_theme_shell { overflow-wrap: anywhere; }
html.ui4-foundation-document :where(.ui4-card-header, .ui4-card-header-tools,
.ui4-page-header-tools, .ui4-action-bar, .ui4-action-bar-main, .ui4-action-bar-controls, .ui4-modal-actions, .ui4-composer-toolbar) { flex-wrap: wrap; }
html.ui4-foundation-document .ui_4_theme_shell :is(button, .admin-btn, .ui4-tab, .tools-link-card,
.ui4-theme-option, .ui4-sidebar-surface-toggle, input[type="submit"]) {
    min-width: 44px; min-height: 44px; max-width: 100%; white-space: normal;
}
html.ui4-foundation-document .ui_4_theme_shell :is(input, select, textarea) { max-width: 100%; min-width: 0; min-height: 44px; }
html.ui4-foundation-document :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ui4-focus, #175cd3); outline-offset: 2px;
}
html.ui4-foundation-document :where(img, video, canvas) { max-width: 100%; height: auto; }
/* Contain the grid itself, not only its table. Availability needs the full lane. */
html.ui4-foundation-document .tools-columns.ui4-stack { display: flex; }
html.ui4-foundation-document :where(.tools-column-main, .tools-column-side) { width: 100%; min-width: 0; }
html.ui4-foundation-document .tools-side-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
html.ui4-foundation-document .tools-side-stack .tools-card-span-2 { grid-column: auto; }
html.ui4-foundation-document :where(.tools-nations-table, .tools-availability-table) { min-width: 680px; }
html.ui4-foundation-document .ui4-editor-workspace.ui4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ui4-foundation-document .ui4-editor-preview { overflow-wrap: anywhere; }
html.ui4-foundation-document .ui4-editor-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Native selects stay native. Custom disclosure panels scroll within the viewport. */
html.ui4-foundation-document .ui4-menu-panel { max-width: 100%; max-height: 50vh; max-height: 50dvh; overflow: auto; }
html.ui4-foundation-document .ui4-modal-overlay {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: auto;
}
html.ui4-foundation-document :where(.ui4-modal-dialog, .ui4-modal-card) {
    width: min(100%, 640px); min-width: 0; max-width: 100%;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto; margin: auto;
}
html.ui4-foundation-document .ui4-modal-body { min-height: 0; overflow: auto; }
/* The controller also marks the interactive refresh button as a status host.
   Only passive indicators use the compact/visually-hidden presentation. */
html.ui4-foundation-document .ui4-refresh-status:not(.ui4-refresh-trigger) { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
html.ui4-foundation-document .ui4-refresh-status:not(.ui4-refresh-trigger)[data-state="updated"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
html.ui4-foundation-document .ui4-refresh-status:not(.ui4-refresh-trigger)[data-state="error"],
html.ui4-foundation-document .ui4-refresh-status:not(.ui4-refresh-trigger)[data-state="offline"] { color: var(--ui4-state-error); }
@media (max-width: 480px) {
    /* Keep titles readable when the shared refresh command occupies a second row. */
    html.ui4-foundation-document .ui_4_theme_shell .ui4-page-header-main:has(.ui4-refresh-control) { flex-wrap: wrap; }
    html.ui4-foundation-document .ui_4_theme_shell .ui4-page-header-main:has(.ui4-refresh-control) .ui4-page-header-title { flex-basis: 100%; }
    html.ui4-foundation-document .ui_4_theme_shell .ui4-page-header-main:has(.ui4-refresh-control) .ui4-page-header-tools { max-width: 100%; }
}
@media (max-width: 1024px) {
    html.ui4-foundation-document #wrapper {
        float: none;
        padding-left: max(var(--ui4-gutter), env(safe-area-inset-left));
        padding-right: max(var(--ui4-gutter), env(safe-area-inset-right));
    }
    /* The wrapper alone owns phone/tablet gutters. All migrated page families
       keep the same content lane instead of adding a second inner margin. */
    html.ui4-foundation-document #middle_section .page_details.mx-admin-container { padding:0 0 20px; }
    html.ui4-foundation-document #header { display: flex; gap: 8px; width: 100%; height: auto; min-height: 68px; padding: 8px 0; }
    html.ui4-foundation-document #header > a { flex: 0 0 145px; max-width: 38%; }
    html.ui4-foundation-document #header .logo { float: none; width: 100%; max-width: 145px; height: auto; }
    html.ui4-foundation-document #header .right_details { flex: 1 1 0; float: none; width: auto; min-width: 0; }
    html.ui4-foundation-document #header .top_menu { float: none; width: 100%; padding: 0; overflow: visible; }
    html.ui4-foundation-document #header .top_menu ul { display: flex; flex-wrap: wrap; width: 100%; min-width: 0; padding: 0; }
    html.ui4-foundation-document #header .top_menu ul li { float: none; height: auto; padding: 0; }
    html.ui4-foundation-document #header .top_menu ul li a { width: 44px; height: 44px; }
    html.ui4-foundation-document #header .users_online { float: none; width: 100%; padding: 4px 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    html.ui4-foundation-document #inner_body_container { display: block; padding: 52px 0 max(24px, env(safe-area-inset-bottom)); }
    html.ui4-foundation-document #inner_body_container #left_section { float: none; width: 100%; max-width: 100%; max-height: 65vh; max-height: 65dvh; margin: 0 0 12px; overflow: auto; }
    html.ui4-foundation-document #inner_body_container #admin_hamburger_menu { left: 0; right: auto; top: 4px; width: 44px; height: 44px; line-height: 42px; }
    html.ui4-foundation-document #inner_body_container #middle_section.command-center { float: none; width: 100%; }
    html.ui4-foundation-document #footer { width: 100%; }
    html.ui4-foundation-document #footer .wrapper { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 0 var(--ui4-gutter); }
    html.ui4-foundation-document #footer .cols { width: 50%; float: none; padding: 0 10px 18px; }
    html.ui4-foundation-document .ui_4_theme_shell :is(input, select, textarea) { font-size: 16px; }
}
@media (max-width: 768px) {
    html.ui4-foundation-document .ui_4_theme_shell :is(.tools-main-stack, .ui4-editor-workspace.ui4-grid) { grid-template-columns: minmax(0, 1fr); }
    html.ui4-foundation-document .mx-tools-layout .tools-card-span-2 { grid-column: auto; }
    html.ui4-foundation-document .tools-availability-form-table :where(tbody, tr, td) { display: block; width: 100%; }
    html.ui4-foundation-document .tools-availability-form-table select { width: 100%; }
}
@media (max-width: 480px) {
    html.ui4-foundation-document { --ui4-gutter: 8px; --ui4-gap: 8px; }
    html.ui4-foundation-document #footer .cols { width: 100%; }
    html.ui4-foundation-document .ui4-modal-actions > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html.ui4-foundation-document .ui4-refresh-status * { animation: none; }
}

html.ui4-foundation-document .ui_4_theme_shell :is(.ui4-touch-target, .ui4-table a) {
    display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
}

@media (max-width:480px){
    html.ui4-foundation-document #header { flex-wrap:wrap; gap:4px; }
    html.ui4-foundation-document #header > a { flex:0 0 120px; max-width:120px; }
    html.ui4-foundation-document #header .logo { max-width:120px; }
    html.ui4-foundation-document #header .right_details { flex:1 1 100%; }
}

html.ui4-foundation-document .ui4-composer-toolbar{gap:2px;}
@media (min-width:1025px) and (pointer:fine){
    html.ui4-foundation-document .ui_4_theme_shell .ui4-composer-button{min-width:34px;min-height:34px;width:34px;height:34px;}
}
@media (max-width:480px){
    html.ui4-foundation-document #header .users_online{min-height:44px;padding:12px 0 12px 52px;}
    html.ui4-foundation-document #inner_body_container{padding-top:0;}
    html.ui4-foundation-document #inner_body_container #admin_hamburger_menu{top:-48px;}
}

/* Tools alone: balanced secondary rows, stable icon slots, unchanged wide geometry. */
@media(max-width:1024px){
 html.ui4-foundation-document .mx-tools-layout .tools-quick-actions-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;align-items:stretch;}
 html.ui4-foundation-document .mx-tools-layout .tools-quick-actions .ui4-action-bar-main{width:100%;}
 html.ui4-foundation-document .mx-tools-layout .tools-quick-btn{display:grid;grid-template-columns:1.4em minmax(0,1fr);align-items:center;gap:8px;min-height:44px;height:100%;width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;}
 html.ui4-foundation-document .mx-tools-layout .tools-quick-btn.is-action-primary{grid-column:1/-1;}
 html.ui4-foundation-document .mx-tools-layout .tools-btn-icon{width:1.4em;text-align:center;}
 html.ui4-foundation-document .mx-tools-layout .admin-metric-value,html.ui4-foundation-document .mx-tools-layout .admin-metric-label{overflow-wrap:anywhere;}
}
@media(max-width:480px){
 html.ui4-foundation-document .mx-tools-layout .tools-quick-actions-buttons{grid-template-columns:minmax(0,1fr);}
}

/* Only the KPI wrapper is a query container; fixed dialogs remain outside it. */
html.ui4-foundation-document .mx-tools-layout .tools-metrics-container{container-type:inline-size;container-name:tools-metrics;min-width:0;}
@container tools-metrics (max-width:720px){
 .tools-metrics-container .admin-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container tools-metrics (max-width:360px){
 .tools-metrics-container .admin-metrics-row{grid-template-columns:minmax(0,1fr);}
}