/* FLEET Design System Phase 3G — responsive without hidden data.
   Applied to the verified Phase 3F baseline. The semantic/resource palettes
   intentionally do NOT inherit the monochrome surface rules below. */
:root{
 --ui-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --ui-font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
 --ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;
 --ui-space-4:16px;--ui-space-5:20px;--ui-space-6:24px;--ui-space-8:32px;
 --ui-radius-control:8px;--ui-radius-card:12px;--ui-radius-chip:999px;
 --ui-sidebar-expanded:216px;--ui-sidebar-collapsed:64px;
 --ui-control-height:40px;--ui-button-height:40px;--ui-button-small-height:34px;
 --ui-chip-height:30px;--ui-nav-target:44px;--ui-row-height:52px;
 --ui-content-padding:clamp(12px,1.2vw,24px);
}
html[data-auth-theme="dark"]{
 color-scheme:dark;--ui-page:#000000;--ui-sidebar:#0b0b0b;
 --ui-surface:#101010;--ui-surface-2:#161616;--ui-surface-3:#1c1c1c;
 --ui-table-head:#171717;--ui-hover:#202020;--ui-selected:#252525;
 --ui-border:#303030;--ui-border-strong:#626262;
 --ui-text:#f5f5f5;--ui-text-2:#c4c4c4;--ui-text-muted:#a8a8a8;
 --ui-text-disabled:#858585;--ui-focus:#f5f5f5;--ui-input:#101010;
 --ui-button:#1b1b1b;--ui-button-hover:#292929;
}
html[data-auth-theme="light"]{
 color-scheme:light;--ui-page:#ffffff;--ui-sidebar:#fafafa;
 --ui-surface:#ffffff;--ui-surface-2:#f6f6f6;--ui-surface-3:#f0f0f0;
 --ui-table-head:#f3f3f3;--ui-hover:#ebebeb;--ui-selected:#e2e2e2;
 --ui-border:#d9d9d9;--ui-border-strong:#888888;
 --ui-text:#111111;--ui-text-2:#515151;--ui-text-muted:#626262;
 --ui-text-disabled:#777777;--ui-focus:#111111;--ui-input:#ffffff;
 --ui-button:#f5f5f5;--ui-button-hover:#eaeaea;
}
html{background:var(--ui-page);min-width:0;max-width:100%;}
body{background:var(--ui-page);max-width:100%;min-width:0;}
html.fleet-first-paint *,html.fleet-first-paint *::before,html.fleet-first-paint *::after{
 animation-duration:0s!important;transition:none!important;
}
body[data-auth-view="false"]{color:var(--ui-text);font-family:var(--ui-font);}
body[data-auth-view="false"] main{min-width:0;flex:1 1 0;max-width:100%;padding-inline:var(--ui-content-padding);background:var(--ui-page);}
body[data-auth-view="false"] #app{min-width:0;max-width:100%;}
body[data-auth-view="false"] #app :is(.card,.detailCard,.summaryCard,.jobListWrap,.accessRollout,.accessRolloutPlan,
 .webConsolePolicyGrid>div,.accessTableWrap,.jobTargetPanel,.jobDataBlock,.policyCard,
 .managedAccessGrid>div,.sshResultCols>div,.planStep,.backupWarning,.notificationPermission,
 .inventoryServers,.columnPicker>div,.providerAccountCard,.chart,.fleetMobileCard){
 border-color:var(--ui-border)!important;
 background:var(--ui-surface)!important;
 color:var(--ui-text)!important;
}
body[data-auth-view="false"] #app :is(.accessRolloutPlan,.webConsolePolicyGrid>div,.accessTableWrap,
 .jobListWrap,.jobTargetPanel,.jobDataBlock,.managedAccessGrid>div,.sshResultCols>div,.planStep,
 .backupWarning,.notificationPermission,.columnPicker>div){background:var(--ui-surface-2)!important;}
body[data-auth-view="false"] #app :is(.accessRolloutControls label,.accessRolloutPlan span,.accessRolloutPlan small,
 .accessTable td small,.webConsolePolicyGrid span,.policyCard dt,.detailPair dt,
 .detailCard dt,.accountDetails dt,.updateRelease dt,.backupSchedule label,
 .managedAccessGrid>div>span,.managedAccessGrid small,.renewalPlanningCard span){
 color:var(--ui-text-muted)!important;
}
body[data-auth-view="false"] #app .accessRolloutPlan strong{color:var(--ui-text)!important;}
body[data-auth-view="false"] #app :is(.accessTable,.detailTable,.jobTable,.inventoryTable,.notifRulesTable,
 .fleetTable) {background:var(--ui-surface)!important;border-color:var(--ui-border)!important;}
body[data-auth-view="false"] #app table thead th{
 background:var(--ui-table-head)!important;color:var(--ui-text-2)!important;
 border-color:var(--ui-border)!important;font-size:11px!important;line-height:1.35;
}
body[data-auth-view="false"] #app table tbody td{
 background:var(--ui-surface)!important;border-color:var(--ui-border)!important;
 color:var(--ui-text);font-size:13px;line-height:1.45;overflow-wrap:anywhere;
}
body[data-auth-view="false"] #app table tbody tr:hover > td{background:var(--ui-hover)!important;}
body[data-auth-view="false"] #app table tbody tr.selectedRow > td{background:var(--ui-selected)!important;}
/* Semantic states remain distinguishable in hovered rows. */
body[data-auth-view="false"] #app :is(.badge,.notifSeverity,.roleChip,.jobStatus,.statusBadge){isolation:isolate;}
body[data-auth-view="false"] #app :is(.jobStatus.bad,.jobStatus.cancelled):not(.ok):not(.warn){
 background:var(--ui-surface-3)!important;color:var(--ui-text)!important;border-color:var(--ui-border-strong)!important;
}
body[data-auth-view="false"] #app .jobStatus.ok{background:#14351e!important;color:#99f3ba!important;border-color:#397a54!important;}
html[data-auth-theme="light"] body[data-auth-view="false"] #app .jobStatus.ok{background:#e7f7ef!important;color:#0b713e!important;border-color:#83cfa7!important;}
body[data-auth-view="false"] #app :is(.webConsolePolicyGrid strong,.accessRollout strong,
 .accessTable strong,.policyCard strong,.accessRolloutPlan strong){color:var(--ui-text)!important;}
body[data-auth-view="false"] #app :is(.jobSearch,.fleetSearch,.accessFilters .jobSearch){
 background:var(--ui-input)!important;border:1px solid var(--ui-border)!important;
 box-shadow:none!important;min-width:0!important;width:100%;max-width:100%;height:var(--ui-control-height)!important;
 border-radius:var(--ui-radius-control)!important;
}
body[data-auth-view="false"] #app :is(.jobSearch,.fleetSearch) input{
 min-height:0!important;height:100%!important;width:100%!important;
 padding:0 12px!important;background:transparent!important;border:0!important;
 box-shadow:none!important;outline:0!important;color:var(--ui-text)!important;
}
body[data-auth-view="false"] #app :is(.jobSearch,.fleetSearch):focus-within{
 outline:2px solid var(--ui-focus)!important;outline-offset:2px;
}
body[data-auth-view="false"] #app :is(.fleetTools,.accessFilters,.inventoryFilters,.filterBar){
 min-width:0;max-width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
body[data-auth-view="false"] #app :is(.fleetTools,.accessFilters,.filterBar) :is(.fleetSearch,.jobSearch){
 flex:1 1 260px;min-width:160px!important;max-width:min(100%,600px)!important;
}
body[data-auth-view="false"] #app :is(select,input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea){
 border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-control);
 background:var(--ui-input)!important;color:var(--ui-text)!important;
 max-width:100%;font-size:13px!important;
}
body[data-auth-view="false"] #app select{height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;max-width:100%;}
body[data-auth-view="false"] #app :is(.fleetTools,.accessFilters) select{min-width:118px!important;flex:0 1 auto;max-width:100%;}
body[data-auth-view="false"] #app :is(input,select,textarea,button):focus-visible{
 outline:2px solid var(--ui-focus)!important;outline-offset:2px!important;
 box-shadow:none!important;
}
body[data-auth-view="false"] #app :is(.updateRelease,.detailPair,.policyCard dl){min-width:0;}
body[data-auth-view="false"] #app :is(dd,code,pre,.updateRelease dd,.backupWarning pre,.keyMaterial){
 overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
body[data-auth-view="false"] #app :is(.webConsolePolicyGrid,.accessRolloutControls,
 .notificationGrid,.detailGrid,.inventoryCatalog,.insightsColumns){min-width:0;max-width:100%;}
body[data-auth-view="false"] #app .webConsolePolicyGrid>div{min-width:0;}
/* Local SVG icon family; no Unicode pseudo-icons; same stroke in all views. */
body[data-auth-view="false"] aside{
 width:var(--ui-sidebar-expanded)!important;flex-basis:var(--ui-sidebar-expanded)!important;
 padding:14px 10px!important;background:var(--ui-sidebar)!important;
 border-color:var(--ui-border)!important;
}
body[data-auth-view="false"] nav{display:flex;flex-direction:column;gap:2px!important;min-width:0;}
body[data-auth-view="false"] nav a{display:flex!important;gap:10px;align-items:center!important;
 min-height:36px!important;padding:7px 10px!important;margin:0!important;
 color:var(--ui-text-2)!important;background:transparent!important;font-size:13px!important;
 border-radius:8px!important;}
body[data-auth-view="false"] nav a:is(:hover,:focus-visible){background:var(--ui-hover)!important;color:var(--ui-text)!important;}
body[data-auth-view="false"] nav a.active,body[data-auth-view="false"] nav a[aria-current="page"]{
 background:var(--ui-surface-3)!important;color:var(--ui-text)!important;
}
body[data-auth-view="false"] nav a::before{display:none!important;content:none!important;}
body[data-auth-view="false"] nav a .navIcon{
 width:18px!important;height:18px!important;min-width:18px!important;
 color:inherit!important;flex:none!important;display:block!important;
}
body[data-auth-view="false"] .navSection{color:var(--ui-text-muted)!important;font-size:10px!important;}
body[data-auth-view="false"] .sidebarToggle{color:var(--ui-text)!important;background:var(--ui-button)!important;border-color:var(--ui-border)!important;}
@media(min-width:801px){
 body[data-auth-view="false"][data-sidebar="collapsed"] aside{
  width:var(--ui-sidebar-collapsed)!important;flex-basis:var(--ui-sidebar-collapsed)!important;padding:12px 9px!important;
 }
 body[data-auth-view="false"][data-sidebar="collapsed"] nav a{
  width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;
  padding:0!important;margin:0!important;justify-content:center!important;gap:0!important;
 }
 body[data-auth-view="false"][data-sidebar="collapsed"] nav .navIcon{width:19px!important;height:19px!important;min-width:19px!important;}
 body[data-auth-view="false"][data-sidebar="collapsed"] nav .navLabel{display:none!important;}
 body[data-auth-view="false"][data-sidebar="collapsed"] .sidebarToggle{left:36px!important;}
 body[data-auth-view="false"][data-sidebar="hidden"] aside{width:0!important;flex-basis:0!important;padding:0!important;}
}
/* Responsive fleet columns: visible subset plus an IN-ROW expansion for all
   additional user-selected columns. Remove legacy hard min widths. */
body[data-auth-view="false"] #app .fleetTableWrap{max-width:100%!important;width:100%!important;overflow-x:clip!important;}
body[data-auth-view="false"] #app .fleetTable,
body[data-auth-view="false"] #app .fleetTableWrap .fleetTable{
 width:100%!important;min-width:0!important;max-width:100%!important;
 table-layout:fixed!important;
}
body[data-auth-view="false"] #app .fleetTable :is(th,td){
 min-width:0!important;width:auto!important;padding:9px 7px!important;
 overflow-wrap:anywhere!important;white-space:normal;
}
body[data-auth-view="false"] #app .fleetTable th{font-size:11px!important;}
body[data-auth-view="false"] #app .fleetTable td{font-size:13px!important;}
body[data-auth-view="false"] #app .fleetTable .serverCell strong{font-size:13px!important;max-width:none!important;}
body[data-auth-view="false"] #app .fleetTable .osCell strong.osFullName{font-size:12px!important;max-width:none!important;}
body[data-auth-view="false"] #app .fleetTable .fleetDetailAction{width:78px!important;text-align:center;}
body[data-auth-view="false"] #app .fleetDetailRow[hidden]{display:none!important;}
body[data-auth-view="false"] #app .fleetDetailRow>td{background:var(--ui-surface-2)!important;}
body[data-auth-view="false"] #app .fleetInlineFields{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px;
 padding:10px 4px;min-width:0;
}
body[data-auth-view="false"] #app .fleetInlineField{
 display:grid;gap:5px;align-content:start;min-width:0;padding:9px;
 border:1px solid var(--ui-border);border-radius:8px;
}
body[data-auth-view="false"] #app .fleetInlineField>span{color:var(--ui-text-muted);font-size:12px;font-weight:650;}
body[data-auth-view="false"] #app .fleetInlineField>div{min-width:0;overflow-wrap:anywhere;}
body[data-auth-view="false"] #app .fleetExpandButton{height:34px;min-height:34px;padding:6px 9px;white-space:nowrap;}
body[data-auth-view="false"] #app .fleetMobileExtra{margin-top:9px;border-top:1px solid var(--ui-border);padding-top:10px;}
body[data-auth-view="false"] #app .fleetMobileExtra summary{cursor:pointer;font-size:13px;color:var(--ui-text-2);}
/* Adaptive legacy tables: browser adds labels from actual table headers, so
   wide rows become readable cards without deleting or truncating cells. */
body[data-auth-view="false"] #app :is(.tableWrap,.accessTableWrap){max-width:100%!important;min-width:0!important;overflow-x:clip!important;}
body[data-auth-view="false"] #app table.fleet3gCardTable{
 display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;
 border:0!important;table-layout:auto!important;
}
body[data-auth-view="false"] #app .fleet3gCardTable thead{position:absolute;clip-path:inset(50%);overflow:hidden;width:1px;height:1px;}
body[data-auth-view="false"] #app .fleet3gCardTable tbody{display:grid!important;gap:10px;max-width:100%;}
body[data-auth-view="false"] #app .fleet3gCardTable tbody tr{
 display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr));
 border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-card)!important;
 background:var(--ui-surface)!important;min-width:0;max-width:100%;padding:8px;gap:6px;
}
body[data-auth-view="false"] #app .fleet3gCardTable tbody td{
 width:auto!important;min-width:0!important;max-width:100%!important;display:flex!important;
 flex-direction:column;gap:4px;justify-content:center;
 padding:8px 10px!important;border:0!important;background:transparent!important;
 overflow-wrap:anywhere;white-space:normal!important;
}
body[data-auth-view="false"] #app .fleet3gCardTable tbody td::before{
 content:attr(data-label);font-size:11px;line-height:1.3;color:var(--ui-text-muted);
 font-weight:700;text-transform:uppercase;letter-spacing:.02em;
}
body[data-auth-view="false"] #app .fleet3gCardTable tbody td[colspan]::before{content:none;}
body[data-auth-view="false"] #app .fleet3gCardTable tbody td :is(button,select,input){max-width:100%;}
/* Viewport-safe forms and card grids. */
body[data-auth-view="false"] #app :is(.backupSchedule,.backupScheduleFields,.accessRolloutControls,
 .webConsolePolicyGrid,.insightsHistoryGrid,.renewalPlanGrid){
 max-width:100%;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
body[data-auth-view="false"] #app :is(.accessRolloutPlan,.webConsolePolicyGrid>div) span{color:var(--ui-text-muted)!important;}
body[data-auth-view="false"] #app :is(.accessRolloutPlan,.webConsolePolicyGrid>div){background:var(--ui-surface-2)!important;}
body[data-auth-view="false"] #app :is(.fleetTools .fleetSearch,.accessFilters .jobSearch){max-width:600px!important;}
body[data-auth-view="false"] #app :is(.fleetTools input,.accessFilters input){min-width:0!important;}
@media(max-width:800px){
 body[data-auth-view="false"] aside{position:fixed!important;width:min(86vw,310px)!important;flex-basis:auto!important;}
 body[data-auth-view="false"] main,body[data-auth-view="false"][data-sidebar="hidden"] main{width:100%;max-width:100%;padding:58px 12px 18px!important;}
 body[data-auth-view="false"] nav a{min-height:40px!important;padding:9px 12px!important;}
 body[data-auth-view="false"] #app :is(.accessRolloutControls,.webConsolePolicyGrid,.detailGrid,.notificationGrid){grid-template-columns:minmax(0,1fr)!important;}
 body[data-auth-view="false"] #app :is(.fleetTools,.accessFilters,.filterBar){align-items:stretch;}
 body[data-auth-view="false"] #app :is(.fleetTools select,.accessFilters select){flex:1 1 130px;min-width:0!important;}
 body[data-auth-view="false"] #app :is(.fleetTools .fleetSearch,.accessFilters .jobSearch){flex:1 1 100%;max-width:100%!important;}
 body[data-auth-view="false"] #app .summaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:360px){body[data-auth-view="false"] #app .summaryGrid{gap:8px!important;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms!important;scroll-behavior:auto!important;transition-duration:0s!important;}}
/* Fixed-layout table still honors weighted <col> percentages: reserve more
   room for server identity and full IP, instead of evenly shrinking 9 cells. */
body[data-auth-view="false"] #app .fleetTable td[data-col="name"] :is(strong,small),
body[data-auth-view="false"] #app .fleetTable td[data-col="ip"] :is(code,span,strong){
 max-width:100%!important;white-space:normal!important;
 overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;
}
body[data-auth-view="false"] #app .fleetTable td[data-col="ip"] code{
 display:inline-block;min-width:0;font-family:var(--ui-font-mono);font-size:14px!important;
 font-weight:700!important;line-height:1.4;
}
/* Non-table wide controls: reflow tabs and metadata within the panel. */
body[data-auth-view="false"] #app .serverTabs{
 display:flex!important;flex-wrap:wrap!important;align-items:center!important;
 min-width:0!important;max-width:100%!important;
 overflow-x:clip!important;margin-inline:0!important;padding-inline:0!important;gap:3px 5px;
}
body[data-auth-view="false"] #app .serverTabs :is(button,a){flex:0 1 auto;min-width:0;white-space:normal!important;}
body[data-auth-view="false"] #app :is(.chart,.insightsHistoryTile,.historyGraph,.chartWrap){max-width:100%!important;min-width:0!important;}
body[data-auth-view="false"] #app :is(.chart,.insightsHistoryTile,.historyGraph,.chartWrap) svg{max-width:100%;height:auto;}
body[data-auth-view="false"] #app :is(.jobSearch,.fleetSearch) input{
 border:0!important;box-shadow:none!important;background:transparent!important;
}
/* Non-semantic (remaining legacy) blue is replaced only on ordinary info surfaces. */
body[data-auth-view="false"] #app :is(.accessTableWrap,.jobListWrap,.chart,
 .webConsolePolicyGrid>div,.accessRolloutPlan,.accessTable tr.selectedRow td,
 .jobTable tr.selectedRow td,.notifInboxItem.unread){
 background:var(--ui-surface-2)!important;border-color:var(--ui-border)!important;
}
body[data-auth-view="false"] #app :is(.webConsolePolicyGrid span,.accessRolloutControls label,
 .accessRolloutPlan span,.accessRolloutPlan small,.accessTable td small,
 .detailPair dt,.updateRelease dt,.backupSchedule label){color:var(--ui-text-muted)!important;}
body[data-auth-view="false"] #app :is(.accessRollout,.jobHero){
 background:var(--ui-surface)!important;border-color:var(--ui-border)!important;
}