portal-mojo 0.2.20 → 0.2.21

package/src/styles/components/admin-geolocation.css

@@ -0,0 +1,40 @@
+.geo-admin { display: grid; max-width: 880px; margin-inline: auto; gap: 20px; min-width: 0; overflow-wrap: anywhere; container-type: inline-size; }
+.geo-admin .page-header { display: flex; justify-content: space-between; margin: 0; align-items: start; flex-wrap: wrap; gap: 12px; }
+.geo-admin h1 { font-size: 26px; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; color: var(--ink-strong); margin: 4px 0 8px; }
+.geo-admin h2 { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink-strong); margin: 0; }
+.geo-admin-setup, .geo-admin-status { min-width: 0; }
+.geo-admin-form { padding: 24px; }
+.geo-admin-provider-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.geo-admin-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 22px; }
+.geo-admin .field { display: grid; gap: 8px; min-width: 0; }
+.geo-admin .field-label, .geo-admin-key-heading, .geo-admin-sharing { display: flex; gap: 8px; align-items: center; }
+.geo-admin .input { width: 100%; box-sizing: border-box; min-width: 0; }
+.geo-admin [hidden] { display: none !important; }
+.geo-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.geo-admin-actions .btn { white-space: normal; }
+.geo-admin-key { display: grid; gap: 12px; padding: 16px; background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
+.geo-admin-key p, .geo-admin-result p, .geo-admin-status p, .geo-admin-notice p { margin: 0; }
+.geo-admin-provider-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
+.geo-admin-provider-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
+.geo-admin-provider-list small { display: block; }
+.geo-admin-provider-list .btn { padding: 5px 8px; }
+.geo-admin-context, .geo-admin-result { margin: 0 24px 20px; }
+.geo-admin-result { display: grid; gap: 8px; }
+.geo-admin-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); }
+.geo-admin-status { padding: 18px 24px; display: grid; gap: 10px; }
+.geo-admin-status-heading, .geo-admin-activation { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
+.geo-admin-status-heading .btn { font-size: 12px; padding: 5px 8px; }
+.geo-admin-notice { border: 1px solid var(--line); background: var(--accent-soft); border-radius: 8px; padding: 12px; margin: 0; display: grid; gap: 6px; }
+.geo-admin-dialog dl { display: grid; gap: 14px; }
+.geo-admin-dialog dt { color: var(--mute); font-size: 12px; margin-bottom: 4px; }
+.geo-admin-dialog dd { margin: 0; overflow-wrap: anywhere; }
+@container (max-width: 420px) {
+    .geo-admin-provider-fields { grid-template-columns: 1fr; }
+    .geo-admin-form, .geo-admin-status { padding: 18px; }
+    .geo-admin-key { padding: 12px; }
+    .geo-admin-provider-list li { flex-wrap: wrap; }
+    .geo-admin-actions { gap: 6px; }
+    .geo-admin-footer { padding: 16px 18px; }
+    .geo-admin-context, .geo-admin-result { margin-inline: 18px; }
+    .geo-admin-sharing { align-items: start; }
+}

package/src/styles/components/admin-maintenance.css

@@ -0,0 +1,127 @@
+.admin-maintenance {
+    display: grid;
+    gap: 1.25rem;
+    max-width: 80rem;
+    margin: auto;
+    padding: 0;
+    overflow-wrap: anywhere;
+}
+.admin-maintenance header,
+.maintenance-resource {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+}
+.admin-maintenance section {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg, 0.75rem);
+    padding: 1.25rem;
+    min-width: 0;
+}
+.admin-maintenance h1,
+.admin-maintenance h2,
+.admin-maintenance h3 {
+    margin: 0 0 0.5rem;
+}
+.maintenance-resource {
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--line);
+}
+.maintenance-resource:last-child {
+    border-bottom: 0;
+}
+.admin-maintenance p {
+    margin: 0.5rem 0;
+}
+.admin-maintenance dl {
+    display: grid;
+    grid-template-columns: minmax(7rem, auto) 1fr;
+    gap: 0.5rem 1rem;
+}
+.admin-maintenance dd {
+    margin: 0;
+}
+.maintenance-warning {
+    color: var(--warn);
+}
+.maintenance-mode {
+    color: var(--mute);
+}
+.maintenance-dialog {
+    color: var(--ink);
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg, 0.75rem);
+    max-width: min(38rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+}
+.maintenance-dialog::backdrop {
+    background: rgb(0 0 0 / 0.6);
+}
+.maintenance-dialog-body {
+    padding: 1.25rem;
+    display: grid;
+    gap: 1rem;
+}
+.maintenance-dialog h2,
+.maintenance-dialog p {
+    margin: 0;
+}
+.maintenance-dialog fieldset {
+    display: grid;
+    gap: 0.75rem;
+}
+.maintenance-confirm-label {
+    display: grid;
+    gap: 0.5rem;
+}
+.maintenance-confirm-label input {
+    width: 100%;
+    min-width: 0;
+    background: var(--field-bg, var(--surface));
+    color: var(--ink);
+    border: 1px solid var(--line);
+    padding: 0.65rem;
+    border-radius: 0.35rem;
+}
+.maintenance-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+}
+@media (max-width: 600px) {
+    .admin-maintenance {
+        padding: 0;
+    }
+    .admin-maintenance header,
+    .maintenance-resource {
+        flex-direction: column;
+    }
+    .admin-maintenance section {
+        padding: 0.8rem;
+    }
+    .maintenance-actions {
+        flex-wrap: wrap;
+    }
+}
+
+.admin-maintenance h1{font-size:26px;font-weight:750;line-height:1.2;letter-spacing:-.025em;color:var(--ink-strong)}.admin-maintenance h2,.maintenance-dialog h2{font-size:18px;font-weight:700;line-height:1.35;color:var(--ink-strong)}.admin-maintenance h3{font-size:16px;font-weight:650;line-height:1.4;color:var(--ink-strong)}
+
+.maintenance-resource>div{min-width:0}.maintenance-resource>button{flex-shrink:0}.maintenance-resource-status{color:var(--mute)}.maintenance-details{margin-block:.65rem}.maintenance-details>summary{font-size:13px;font-weight:600;cursor:pointer;color:var(--mute)}.maintenance-details[open]>summary{margin-bottom:.65rem}.admin-maintenance .maintenance-framework-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.maintenance-framework-summary>div{min-width:0}.maintenance-framework-summary dt{font-size:12px;color:var(--mute);margin-bottom:4px}.maintenance-framework-summary dd{font-size:16px;font-weight:600;overflow-wrap:anywhere}.admin-maintenance .maintenance-resource h3{margin-bottom:.25rem}.admin-maintenance .maintenance-resource p{margin:.25rem 0}.admin-maintenance .maintenance-details p{margin:.5rem 0}@media(max-width:600px){.admin-maintenance .maintenance-framework-summary{grid-template-columns:1fr}.maintenance-resource>button{align-self:flex-start}}
+
+.admin-maintenance { gap: 24px; }
+.admin-maintenance header > div > p:last-child { color: var(--mute); }
+.admin-maintenance section.maintenance-scan { padding: 0; background: transparent; border: 0; }
+.maintenance-scan .ops-details > summary { padding: 0; }
+.maintenance-dialog { margin: auto; padding: 0; width: min(38rem, calc(100vw - 2rem)); }
+.maintenance-dialog fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
+.maintenance-dialog legend { padding-inline: 4px; font-weight: 600; }
+.maintenance-dialog-body { padding: 24px; gap: 20px; }
+
+.maintenance-dialog input[type="radio"] { margin-right: 6px; }
+
+/* Maintenance-only dialogs and compact progress. No shared Dashboard rules. */
+.maintenance-dialog-body{max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.maintenance-dialog-scroll{min-height:0;overflow:auto;display:grid;gap:16px;padding:2px}.maintenance-dialog .maintenance-actions{flex-shrink:0;padding-top:12px;align-items:center}.maintenance-dialog .maintenance-progress-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}.maintenance-progress-facts dt{color:var(--mute)}.maintenance-progress-facts dd{margin:0;overflow-wrap:anywhere}.maintenance-attempt-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.maintenance-attempt-row:last-of-type{border-bottom:0}.admin-maintenance .maintenance-actions{justify-content:flex-start;margin-top:16px;flex-wrap:wrap}.maintenance-dialog .maintenance-dialog-scroll>p{margin:0}.maintenance-dialog .maintenance-dialog-scroll fieldset{margin:0}.maintenance-dialog .maintenance-dialog-scroll .field{margin:0}.maintenance-attempt-row>div{min-width:0}@media(max-width:600px){.maintenance-dialog-body{padding:20px;gap:16px}.maintenance-attempt-row{align-items:flex-start;flex-direction:column}.maintenance-dialog .maintenance-actions{gap:8px}.maintenance-dialog .maintenance-actions .btn{max-width:100%;white-space:normal}}

package/src/styles/components/admin-operational-fleet.css

@@ -0,0 +1,38 @@
+.operational-fleet{display:grid;gap:16px;min-width:0;container-type:inline-size;overflow-wrap:anywhere}.fleet-heading,.fleet-buttons{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fleet-heading h2{margin:0}.fleet-heading p{margin:4px 0 0}.fleet-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fleet-evidence{min-width:0;overflow:hidden}.fleet-evidence h3{padding:14px 16px;margin:0;border-bottom:1px solid var(--line)}.fleet-evidence-row{display:grid;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);min-width:0}.fleet-evidence-row:last-child{border-bottom:0}.fleet-evidence-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.fleet-evidence-row p{margin:2px 0 5px}.fleet-source-status{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--mute)}.fleet-status-healthy{color:var(--ok)}.fleet-status-unhealthy{color:var(--bad)}.fleet-status-degraded,.fleet-status-stale{color:var(--warn)}.fleet-availability{border-left:3px solid var(--mute)}.fleet-availability-ok{border-left-color:var(--ok)}.fleet-availability-down{border-left-color:var(--bad)}.fleet-capacity-facts summary{cursor:pointer;font-weight:600}.fleet-fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.fleet-member{display:block;margin:4px 0;color:var(--mute)}.fleet-scale{display:flex;flex-direction:column;max-height:calc(100dvh - 80px);min-height:0;overflow-wrap:anywhere}.fleet-scale-body{overflow:auto;min-height:0;padding-right:4px}.fleet-scale h3{margin:20px 0 8px}.fleet-scale-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fleet-scale-fields .field{min-width:0}.fleet-node{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.fleet-node small{display:block}.fleet-plan-steps{padding-left:24px}.fleet-plan-steps li{margin-bottom:14px}.fleet-progress-step{padding:10px 0;border-bottom:1px solid var(--line)}.fleet-scale .modal-actions{flex-shrink:0}.fleet-scale fieldset{border:0;margin:0;padding:0;min-width:0}@container (max-width:850px){.fleet-evidence-grid{grid-template-columns:1fr}.fleet-fact-grid{grid-template-columns:1fr}}@media(max-width:560px){.fleet-scale-fields{grid-template-columns:1fr}.fleet-node{align-items:flex-start;flex-direction:column}.fleet-scale{max-height:calc(100dvh - 48px)}}
+
+.fleet-page>.page-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.fleet-page h1{font-size:26px;font-weight:750;line-height:1.2;letter-spacing:-.025em;color:var(--ink-strong);margin:0}.fleet-heading h2{font-size:20px;font-weight:700;line-height:1.3;color:var(--ink-strong)}.fleet-evidence h3{font-size:16px;font-weight:700;color:var(--ink-strong)}.fleet-availability>strong{font-size:18px;line-height:1.35;font-weight:700;color:var(--ink-strong)}.fleet-scale h3{font-size:17px;font-weight:700;color:var(--ink-strong)}.fleet-scale h4,.fleet-fact-grid h4{font-size:15px;font-weight:650;color:var(--ink-strong)}.fleet-scale .fleet-scale-disclosure{border-top:1px solid var(--line);padding:12px 0}.fleet-scale-disclosure>summary{font-size:15px;font-weight:650;cursor:pointer;color:var(--ink-strong)}.fleet-scale-disclosure[open]>summary{margin-bottom:14px}.fleet-scale fieldset>h3:first-child{margin-top:12px}.fleet-scale fieldset>p{margin-bottom:12px}.fleet-scale fieldset>.fleet-scale-fields{margin-bottom:14px}
+
+.fleet-evidence-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+.fleet-evidence { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
+.fleet-evidence h3 { padding: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
+.fleet-evidence-row { grid-template-columns: minmax(130px, .7fr) minmax(0, 2fr) auto 62px; align-items: center; gap: 16px; padding: 17px 0; }
+.fleet-row-value { min-width: 0; color: var(--mute); }
+.fleet-detail-button { border: 0; padding: 4px 0; background: transparent; color: var(--accent); cursor: pointer; text-align: right; }
+.fleet-source-detail > p { margin: 14px 0; }
+.operational-fleet { gap: 24px; }
+@container (max-width: 600px) { .fleet-evidence-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } .fleet-row-value { grid-row: 2; } .fleet-source-status { grid-column: 2; grid-row: 1; } .fleet-detail-button { grid-column: 2; grid-row: 2; } }
+
+.fleet-capacity-tab { padding-top: 4px; }
+.fleet-scale-body .fleet-buttons { margin-block: 10px 18px; }
+.fleet-scale-body > fieldset { margin-block: 12px 20px; }
+.fleet-scale-body > section { margin-block: 16px; }
+.fleet-scale .modal-actions { padding-top: 16px; border-top: 1px solid var(--line); }
+.fleet-scale .input { width: 100%; min-width: 0; }
+
+.fleet-evidence.panel { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
+.fleet-evidence-row { padding-block: 14px; }
+
+.fleet-heading h2 { font-size: 26px; letter-spacing: -.025em; }
+
+.fleet-heading h1 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; color: var(--ink-strong); }
+
+.fleet-capacity-tab .panel > p { margin: 8px 0 16px; }
+.fleet-scale-fields .field { gap: 8px; }
+
+.fleet-capacity-dialog { display: flex; flex-direction: column; max-height: calc(100dvh - 64px); min-height: 0; overflow-wrap: anywhere; }
+.fleet-capacity-body { overflow: auto; min-height: 0; }
+.fleet-capacity-body p { margin: 8px 0; line-height: 1.5; }
+.fleet-capacity-body h4 { margin: 0 0 8px; }
+.fleet-capacity-body > .dim { margin: 0 0 18px; }
+.fleet-capacity-dialog .modal-actions { flex: none; padding-top: 16px; border-top: 1px solid var(--line); }
+@media (max-width: 560px) { .fleet-capacity-dialog .fleet-fact-grid { grid-template-columns: minmax(0, 1fr); } }

package/src/styles/components/admin-operations.css

@@ -0,0 +1,9 @@
+.ops-help { display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; background: transparent; color: var(--mute); cursor: pointer; vertical-align: middle; font-size: 14px; line-height: 1; border-radius: 4px; }
+.ops-help:hover, .ops-help[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
+.ops-help-content { width: min(340px, calc(100vw - 32px)); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
+.ops-help-content p { margin: 0 0 8px; }
+.ops-help-content p:last-child { margin-bottom: 0; }
+.ops-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mute); padding-block: 6px; }
+.ops-details[open] > summary { margin-bottom: 10px; }
+.ops-cell { display: grid; gap: 3px; min-width: 0; }
+.ops-cell small { color: var(--mute); font-size: 12px; }

package/src/styles/components/admin-signin.css

@@ -52,6 +52,8 @@ textarea.signin-code { resize: vertical; }
 .signin-note i { flex: none; color: var(--accent); }
 .signin-note.is-warning { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); }
 .signin-note.is-warning i { color: var(--warn); }
+.signin-note.is-danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-soft); }
+.signin-note.is-danger i { color: var(--bad); }
 .signin-provider-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
 
 @media (max-width: 1100px) { .signin-groups { grid-template-columns: 1fr; } }

package/src/styles/components/combobox.css

@@ -1,7 +1,6 @@
 /* ComboBox — styles for portal-mojo <ComboBox> (packages/portal-mojo/src/ui/ComboBox.tsx).
    Tokens only; reads correctly under data-theme="light" AND "dark".
-   NOT imported yet — the orchestrator adds `@import "./theme/combobox.css";`
-   to theme.css at merge. */
+   */
 
 .combo { position: relative; width: 100%; }
 .combo-input-wrap { position: relative; }
@@ -30,6 +29,8 @@
 /* Keyboard highlight (.combo-hot) and hover share one look — there is only
    one "pointed at" state. */
 .combo-option:hover, .combo-option.combo-hot { background: var(--surface2); color: var(--ink-strong); }
+.combo-option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: transparent; }
+.combo-input[aria-invalid="true"] { border-color: var(--bad); }
 .combo-option-main { flex: 1; min-width: 0; }
 .combo-option-label { font-weight: 550; }
 .combo-option-desc { font-size: 12px; color: var(--mute); margin-top: 1px; }
@@ -40,3 +41,12 @@
 /* The <mark> around the matched substring — override the UA's yellow/black
    so it stays legible on both themes. */
 .combo-mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
+
+.page-size .combo { width: 78px; }
+.combo { min-width: 0; }
+.combo-input { width: 100%; min-width: 0; }
+.combo-pop { max-height: min(300px, calc(100dvh - 16px)); min-width: min(260px, calc(100vw - 16px)); }
+
+.page-size .combo-input { min-height: 30px; padding: 5px 30px 5px 9px; font-size: 12px; }
+.combo.gran-select { width: 110px; }
+.gran-select .combo-input { min-height: 30px; padding: 5px 30px 5px 9px; font-size: 12px; }

package/src/styles/components/fleet-page.css

@@ -0,0 +1,9 @@
+/* Standalone Fleet only. Dashboard FleetOverview retains its own presentation. */
+.fleet-page .fp-workspace{display:flex;flex-direction:column;gap:20px;min-width:0}.fleet-page .fp-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.fleet-page .fp-header h1{margin:3px 0 4px}.fleet-page .fp-header p{margin:0}.fleet-page .fp-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.fleet-page .fp-health{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-left:3px solid var(--ok)}.fleet-page .fp-health-down{border-left-color:var(--bad)}.fleet-page .fp-health-unknown{border-left-color:var(--warn)}.fleet-page .fp-health p{margin:6px 0 0}.fleet-page .fp-evidence-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0}.fleet-page .fp-section{overflow:hidden;padding:8px 18px}.fleet-page .fp-section .mojo-tab-panel{padding:4px 0}.fleet-page .fp-section .mojo-tab-list{margin:0 2px}.fleet-page .fp-section h2{font-size:14px;margin:0;padding:18px 20px;border-bottom:1px solid var(--line)}.fleet-page .fp-source{padding:14px 12px;border-bottom:1px solid var(--line);min-width:0}.fleet-page .fp-source:nth-last-child(-n+2){border-bottom:0}.fleet-page .fp-source:last-child{border-bottom:0}.fleet-page .fp-source p{margin:5px 0 3px}.fleet-page .fp-row,.fleet-standalone-dialog .fp-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.fleet-page .fp-source-meta{font-size:11px;color:var(--mute);gap:8px;flex-wrap:wrap}.fleet-page .fp-state,.fleet-standalone-dialog .fp-state{font-size:12px;font-weight:600;text-transform:capitalize}.fleet-page .fp-capacity-strip{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;padding:18px 24px;gap:18px}.fleet-page .fp-capacity-strip>div{display:flex;flex-direction:column;gap:4px}.fleet-page .fp-capacity-strip strong{font-size:23px;line-height:1.3}.fleet-page .fp-capacity-context{justify-content:center;align-items:flex-end}.fleet-page .fp-operation{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px}.fleet-page .fp-operation p{margin:6px 0 0}.fleet-page .fp-restricted{padding:16px 20px;margin:0}.fleet-page .fp-access-note{font-size:12px;margin:0}.fleet-standalone-dialog{display:flex;flex-direction:column;max-height:min(850px,calc(100dvh - 60px));min-width:0}.fleet-standalone-dialog .fleet-standalone-body{overflow:auto;min-height:0;overscroll-behavior:contain;padding:2px 2px 12px}.fleet-standalone-dialog .modal-message{flex-shrink:0}.fleet-standalone-dialog .modal-actions{flex-shrink:0}.fleet-standalone-dialog fieldset{min-width:0;border:0;padding:0;margin:0}.fleet-standalone-dialog .fp-stack{display:flex;flex-direction:column;gap:16px}.fleet-standalone-dialog .fp-stack>p,.fleet-standalone-dialog .fp-resource p,.fleet-standalone-dialog .fp-resource h3{margin:0}.fleet-standalone-dialog .mojo-tab-panel{padding-top:20px}.fleet-standalone-dialog .fp-resource{border:1px solid var(--line);border-radius:10px;padding:18px;overflow-wrap:anywhere}.fleet-standalone-dialog .fp-resource>p+small,.fleet-standalone-dialog .fp-resource>p+p{display:block;margin-top:8px}.fleet-standalone-dialog .fp-resource h3{font-size:14px}.fleet-standalone-dialog .fp-member{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}.fleet-standalone-dialog .fp-member:last-child{border-bottom:0}.fleet-standalone-dialog .fp-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.fleet-standalone-dialog .fp-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.6}.fleet-standalone-dialog .fp-check input{flex:none;margin-top:4px}.fleet-standalone-dialog .fp-toolbar{margin:0 0 18px;flex-wrap:wrap}.fleet-standalone-dialog .fp-empty{margin:20px 0 4px}.fleet-standalone-dialog .fp-plan{display:flex;flex-direction:column;gap:14px;padding-left:24px;margin:0}.fleet-standalone-dialog .fp-plan p{margin:6px 0 0}.fleet-standalone-dialog pre{white-space:pre-wrap;font-family:var(--font-mono,monospace);font-size:12px}.fleet-standalone-dialog .field-help{line-height:1.6}.fleet-standalone-dialog .input{width:100%;min-width:0}.fleet-standalone-dialog .modal-title{overflow-wrap:anywhere}.fleet-standalone-dialog .fp-member .fp-fields{margin-top:8px}
+@media(max-width:700px){.fleet-page .fp-header{align-items:flex-start;flex-direction:column;gap:16px}.fleet-page .fp-actions{justify-content:flex-start}.fleet-page .fp-evidence-grid{grid-template-columns:1fr}.fleet-page .fp-capacity-strip{grid-template-columns:repeat(3,1fr);padding:16px;gap:16px}.fleet-page .fp-capacity-context{grid-column:1/-1;align-items:flex-start}.fleet-page .fp-health,.fleet-page .fp-operation{padding:18px;align-items:flex-start}.fleet-page .fp-operation{flex-direction:column}.fleet-standalone-dialog{max-height:calc(100dvh - 32px)}.fleet-standalone-dialog .fp-fields{grid-template-columns:1fr}.fleet-standalone-dialog .fp-resource>.fp-row{align-items:flex-start;flex-wrap:wrap}.fleet-standalone-dialog .fp-resource{padding:14px}.fleet-page .fp-source{padding:12px 4px}.fleet-page .fp-source:nth-last-child(2){border-bottom:1px solid var(--line)}.fleet-page .fp-section{padding:8px 14px}}
+/* Keep every inspection tab visible within a narrow native dialog. */
+@media(max-width:700px){.fleet-standalone-dialog .mojo-tab-list{flex-wrap:wrap;overflow:visible}}
+
+/* Destination names are actions; keep evidence-only labels visually distinct. */
+.fleet-page .fp-source strong a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
+.fleet-page .fp-source strong a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

package/src/styles/index.css

@@ -24,6 +24,13 @@
 @import "./components/admin-assistant.css" layer(portal-mojo);
 @import "./components/admin-security.css" layer(portal-mojo);
 @import "./components/admin-dashboard.css" layer(portal-mojo);
+@import "./components/admin-operational-fleet.css" layer(portal-mojo);
+@import "./components/fleet-page.css" layer(portal-mojo);
+@import "./components/admin-maintenance.css" layer(portal-mojo);
+@import "./components/admin-deployments.css" layer(portal-mojo);
+@import "./components/admin-domains.css" layer(portal-mojo);
+@import "./components/admin-operations.css" layer(portal-mojo);
+@import "./components/admin-geolocation.css" layer(portal-mojo);
 @import "./components/admin-cloudwatch.css" layer(portal-mojo);
 @import "./components/admin-monitoring.css" layer(portal-mojo);
 @import "./components/admin-bouncer.css" layer(portal-mojo);

package/src/ui/ComboBox.tsx

@@ -18,7 +18,7 @@
 //   (web-mojo strict-equalled `data-value` strings against numbers).
 // - Popover is the sole outside-click/Escape owner. ComboBox owns only the
 //   meaning of each dismissal (settle outside, revert on Escape).
-import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
 import { Popover } from './Popover';
 
 export type ComboValue = string | number;
@@ -28,11 +28,13 @@ export interface ComboOption {
     label: string;
     /** Muted second line in the dropdown (rendered while `showDescription`). */
     description?: string;
+    /** Visible but unavailable; cannot be committed by pointer, typing or keyboard. */
+    disabled?: boolean;
     /** Opaque payload handed back through onSelect — rule-builder hook. */
     meta?: Record<string, unknown>;
 }
 
-export interface ComboBoxProps {
+export interface ComboBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'title' | 'autoFocus' | 'name'> {
     /** Committed value. The input DISPLAYS the matching option's label. */
     value?: ComboValue | null;
     /** Bare strings normalize to { value: s, label: s }. */
@@ -54,6 +56,7 @@ export interface ComboBoxProps {
     required?: boolean;
     id?: string;
     className?: string;
+    inputRef?: Ref<HTMLInputElement>;
 }
 
 function normalizeOptions(input: ReadonlyArray<ComboOption | string>): ComboOption[] {
@@ -66,6 +69,7 @@ function normalizeOptions(input: ReadonlyArray<ComboOption | string>): ComboOpti
         const opt: ComboOption = { value: raw.value, label: raw.label || String(raw.value) };
         if (raw.description) opt.description = raw.description;
         if (raw.meta) opt.meta = raw.meta;
+        if (raw.disabled) opt.disabled = true;
         out.push(opt);
     }
     return out;
@@ -115,6 +119,8 @@ export function ComboBox({
     required = false,
     id,
     className,
+    inputRef: externalInputRef,
+    ...inputAttributes
 }: ComboBoxProps) {
     // `draft` is the uncommitted typed text; null = not editing, display the
     // committed value's label. This split IS the one-pipeline fix.
@@ -123,6 +129,11 @@ export function ComboBox({
     const [highlight, setHighlight] = useState(-1);
     const wrapRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
+    const setInputRef = useCallback((node: HTMLInputElement | null) => {
+        inputRef.current = node;
+        if (typeof externalInputRef === 'function') return externalInputRef(node);
+        if (externalInputRef) externalInputRef.current = node;
+    }, [externalInputRef]);
     // Mirror of `draft`, nulled synchronously on commit/revert so the
     // mousedown-outside + blur pair can both call settle() without
     // double-committing (blur fires before React re-renders).
@@ -152,6 +163,9 @@ export function ComboBox({
     }
 
     const canOpen = !disabled && !readOnly;
+    useEffect(() => {
+        if (!canOpen) { draftRef.current = null; setDraft(null); setOpen(false); setHighlight(-1); }
+    }, [canOpen]);
     const displayValue = draft ?? (selected ? selected.label : value == null ? '' : String(value));
 
     const setDraftBoth = (d: string | null) => { draftRef.current = d; setDraft(d); };
@@ -159,12 +173,15 @@ export function ComboBox({
 
     // ── the ONE committed pipeline ───────────────────────────────────────
     const commitOption = (opt: ComboOption) => {
+        if (!canOpen || inputRef.current?.matches(':disabled')) return;
         setDraftBoth(null);
         close();
+        if (opt.disabled) return;
         if (opt.value !== value) onChange?.(opt.value, opt);
         onSelect?.(opt);
     };
     const commitCustom = (text: string) => {
+        if (!canOpen || inputRef.current?.matches(':disabled')) return;
         setDraftBoth(null);
         close();
         if (text !== (value == null ? '' : String(value))) onChange?.(text);
@@ -193,18 +210,27 @@ export function ComboBox({
         document.getElementById(`combo-opt-${uid}-${highlight}`)?.scrollIntoView({ block: 'nearest' });
     }, [highlight, uid]);
 
+    const moveHighlight = (direction: 1 | -1) => setHighlight((current) => {
+        let next = current < 0 && direction === -1 ? 0 : current;
+        for (let count = 0; count < visible.length; count++) {
+            next = (next + direction + visible.length) % visible.length;
+            if (!visible[next].disabled) return next;
+        }
+        return -1;
+    });
+
     const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         switch (e.key) {
             case 'ArrowDown':
                 if (!canOpen) break;
                 e.preventDefault();
                 if (!open) setOpen(true);
-                else if (visible.length > 0) setHighlight((h) => (h + 1) % visible.length);
+                else moveHighlight(1);
                 break;
             case 'ArrowUp':
                 if (!open) break;
                 e.preventDefault();
-                if (visible.length > 0) setHighlight((h) => (h <= 0 ? visible.length - 1 : h - 1));
+                moveHighlight(-1);
                 break;
             case 'Enter':
                 if (open && highlight >= 0 && highlight < visible.length) {
@@ -251,7 +277,8 @@ export function ComboBox({
         <div className={`combo${className ? ` ${className}` : ''}`} ref={wrapRef}>
             <div className="combo-input-wrap">
                 <input
-                    ref={inputRef}
+                    {...inputAttributes}
+                    ref={setInputRef}
                     id={id}
                     type="text"
                     className="input combo-input"
@@ -267,6 +294,7 @@ export function ComboBox({
                     readOnly={readOnly}
                     required={required}
                     onFocus={() => { if (canOpen) setOpen(true); }}
+                    onClick={() => { if (canOpen) setOpen(true); }}
                     onBlur={(e) => {
                         if (wrapRef.current && e.relatedTarget && wrapRef.current.contains(e.relatedTarget as Node)) return;
                         settle();
@@ -287,7 +315,8 @@ export function ComboBox({
                         type="button"
                         className="combo-toggle"
                         tabIndex={-1}
-                        aria-label="Toggle dropdown"
+                        aria-hidden="true"
+                        title="Show options"
                         onMouseDown={(e) => e.preventDefault() /* keep input focus */}
                         onClick={onToggle}
                     >
@@ -297,7 +326,7 @@ export function ComboBox({
             </div>
             <Popover
                 anchorRef={wrapRef}
-                open={open}
+                open={open && canOpen}
                 onClose={(reason) => reason === 'escape' ? revert() : settle()}
                 id={listId}
                 className="combo-pop"
@@ -316,9 +345,11 @@ export function ComboBox({
                                 id={optionId(i)}
                                 role="option"
                                 aria-selected={isSelected}
+                                data-value={opt.value}
+                                aria-disabled={opt.disabled || undefined}
                                 className={`combo-option${i === highlight ? ' combo-hot' : ''}${isSelected ? ' combo-selected' : ''}`}
                                 onMouseDown={(e) => e.preventDefault() /* option click must not blur-settle first */}
-                                onClick={() => commitOption(opt)}
+                                onClick={() => { if (!opt.disabled) commitOption(opt); }}
                             >
                                 <div className="combo-option-main">
                                     <div className="combo-option-label">{highlightLabel(opt.label, (draft ?? '').trim())}</div>

package/src/ui/FilterBar.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from './ComboBox';
 // FilterBar — web-mojo's filter UX: an "Add filter" menu listing every
 // available filter with a per-type icon and a check on the active ones, each
 // opening a type-appropriate dialog; applied filters become editable pills.
@@ -126,13 +127,10 @@ function FilterForm({ def, current, onDone }: {
                     ))}
                 </div>
             ) : def.type === 'select' || def.type === 'boolean' ? (
-                <select className="input" value={text} onChange={(e) => setText(e.target.value)} autoFocus>
-                    <option value="">Select…</option>
-                    {(def.type === 'boolean'
+                <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(text)} onChange={(selectedValue) => setText(String(selectedValue))} autoFocus options={[({ value: "", label: "Select…" }), ...((def.type === 'boolean'
                         ? [{ value: 'true', label: def.trueLabel ?? 'True' }, { value: 'false', label: def.falseLabel ?? 'False' }]
                         : def.options ?? []
-                    ).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
-                </select>
+                    ).map((o) => ({ value: String(o.value), label: String(o.label) })) ?? [])]} />
             ) : (
                 <input
                     className="input"

package/src/ui/ModelTable.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from './ComboBox';
 // ModelTable — schema-driven server table at web-mojo TableView fidelity
 // (ListView.js / TableView.js / TablePage.js port). No table library: sort,
 // filter, search and paging are all wire params django-mojo processes, so
@@ -986,14 +987,7 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
                     )}
                     <label className="page-size">
                         <span className="dim">Rows</span>
-                        <select
-                            className="input input-compact"
-                            value={p.size}
-                            onChange={(e) => p.setSize(Number(e.target.value))}
-                            aria-label="Rows per page"
-                        >
-                            {PAGE_SIZES.map((s) => <option key={s} value={s}>{s}</option>)}
-                        </select>
+                        <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(p.size)} onChange={(selectedValue) => p.setSize(Number(String(selectedValue)))} aria-label="Rows per page" options={[...(PAGE_SIZES.map((s) => ({ value: String(s), label: String(s) })) ?? [])]} />
                     </label>
                 </div>
             </div>

package/src/ui/Popover.tsx

@@ -26,7 +26,7 @@
 // flagged autofocus, and we don't. Typing in an anchored input keeps
 // working; per-option focus retention (e.g. preventDefault on option
 // mousedown) belongs to the consuming control.
-import { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type RefObject } from 'react';
+import { useLayoutEffect, useRef, type HTMLAttributes, type RefObject } from 'react';
 import { createPortal } from 'react-dom';
 
 export type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
@@ -52,6 +52,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
 
 const PLACEMENTS: readonly PopoverPlacement[] = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
 const VIEWPORT_INSET = 8; // px breathing room at viewport edges (source parity)
+const openPopovers: HTMLDivElement[] = [];
 
 const SUPPORTS_POPOVER =
     typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
@@ -71,7 +72,7 @@ export function Popover({
     // Latest-callback ref so an inline `onClose` doesn't churn the document
     // listeners (and their deferred attach) on every parent render.
     const onCloseRef = useRef(onClose);
-    useEffect(() => { onCloseRef.current = onClose; });
+    useLayoutEffect(() => { onCloseRef.current = onClose; });
 
     // ── Show + position ──────────────────────────────────────────────
     // Layout effect: promote to the top layer and position BEFORE paint, so
@@ -146,8 +147,11 @@ export function Popover({
     }, [open, placement, gap, anchorRef]);
 
     // ── Outside-mousedown + Escape ───────────────────────────────────
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!open) return;
+        const popover = popRef.current;
+        if (!popover) return;
+        openPopovers.push(popover);
 
         const onDocDown = (event: MouseEvent) => {
             const target = event.target as Node;
@@ -159,7 +163,9 @@ export function Popover({
             onCloseRef.current('outside');
         };
         const onKey = (event: KeyboardEvent) => {
-            if (event.key !== 'Escape') return;
+            if (event.key !== 'Escape' || event.defaultPrevented || openPopovers.at(-1) !== popover) return;
+            const targetDialog = event.target instanceof popover.ownerDocument.defaultView!.Element ? event.target.closest('dialog') : null;
+            if (targetDialog && targetDialog !== anchorRef.current?.closest('dialog')) return;
             // Capture phase + preventDefault: when the anchor lives inside
             // an open <dialog>, the first Escape must close the popover
             // ONLY — preventing default stops the dialog's cancel/close
@@ -170,16 +176,18 @@ export function Popover({
             onCloseRef.current('escape');
         };
 
-        // Defer attach so the interaction that opened the popover can't
-        // immediately close it (source parity).
+        // Escape must be active in the opening frame, before native dialog
+        // cancellation. Only outside-click registration waits out the opener.
+        document.addEventListener('keydown', onKey, true);
         const timer = window.setTimeout(() => {
             document.addEventListener('mousedown', onDocDown, true);
-            document.addEventListener('keydown', onKey, true);
         }, 0);
         return () => {
             window.clearTimeout(timer);
             document.removeEventListener('mousedown', onDocDown, true);
             document.removeEventListener('keydown', onKey, true);
+            const index = openPopovers.indexOf(popover);
+            if (index !== -1) openPopovers.splice(index, 1);
         };
     }, [open, anchorRef]);
 

package/src/ui/date/TimePicker.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from '../ComboBox';
 // TimePicker — HH:MM time input with the stepper panel and optional IANA
 // timezone. Ported from web-mojo src/core/forms/inputs/TimePicker.js (648
 // lines, read in full) + the `.mojo-time-*` block of calendar.css.
@@ -25,7 +26,7 @@
 //
 // Timezone-picker SEAM: this component owns every bit of the zone's value and
 // serialization logic but renders the picker through `renderTimezoneSelect`.
-// Without that prop it falls back to a plain token-styled <select> built from
+// Without that prop it falls back to a searchable ComboBox built from
 // Intl.supportedValuesOf('timeZone'), so the feature is complete standalone.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
@@ -92,7 +93,7 @@ export interface TimePickerProps {
     timezones?: string[] | null;
     /** Default 'iso'. Unknown values warn + fall back. */
     outputFormat?: TimeOutputFormat;
-    /** Zone-picker slot. Absent → the built-in fallback <select>. */
+    /** Zone-picker slot. Absent → the built-in ComboBox. */
     renderTimezoneSelect?: (props: TimezoneSelectSlotProps) => ReactNode;
     /** Fires on COMMIT only, and only when the serialized value changed. */
     onChange?: (event: TimeChangeEvent) => void;
@@ -252,18 +253,7 @@ function FallbackTimezoneSelect({ value, onChange, timezones, disabled }: Timezo
     }, [known, value]);
 
     return (
-        <select
-            className="input mojo-time-tz-select"
-            aria-label="Timezone"
-            value={value ?? ''}
-            disabled={disabled}
-            onChange={(e) => onChange(e.currentTarget.value || null)}
-        >
-            <option value="">(no timezone)</option>
-            {/* A value the list doesn't carry still shows — never render nothing. */}
-            {!known && value ? <option value={value}>{value}</option> : null}
-            {zones.map((z) => <option key={z} value={z}>{z}</option>)}
-        </select>
+        <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} className="mojo-time-tz-select" aria-label="Timezone" value={String(value ?? '')} disabled={disabled} onChange={(selectedValue) => onChange(String(selectedValue) || null)} options={[({ value: "", label: "(no timezone)" }), ...(!known && value ? [({ value: String(value), label: String(value) })] : []), ...(zones.map((z) => ({ value: String(z), label: String(z) })) ?? [])]} />
     );
 }