/* FLEET Visual Integrity — Phase 3E.
   A single final cascade for authenticated UI and the authentication pending
   lifecycle. No API, Agent, database or authentication logic is changed.
   Theme colors: brand monochrome, resource and severity colors semantic. */

/* UA [hidden] loses against the explicit .authPending{display:grid} in app.css.
   This bug caused the spinner to remain in the form AFTER authentication. */
#authShell .authPending[hidden],
#authShell [hidden] { display:none!important; }
#authShell .authPending:not([hidden]){min-height:88px!important;padding:0!important;place-items:center;}
#authShell .authPendingSpinner{display:block;}

/* Shared scale: 4/8/12/16 spacing, 38px controls, 13px body text.
   Do not change global html/body font size: login and special PTY views differ. */
body[data-auth-view="false"]{
 --ui-radius:9px;--ui-field-height:38px;--ui-chip-height:32px;
 --ui-focus:var(--text);--ui-subtle:var(--text-2);
 font-size:13px;line-height:1.45;
}
body[data-auth-view="false"] #app{
 color:var(--text);min-width:0;
}
body[data-auth-view="false"] #app :is(.card,.detailCard,.summaryCard,.authListItem,.roleMatrix>div,
 .notificationPermission,.notifChoiceGroup .checkLine,.notifInboxItem,.insightsHistoryTile,
 .renewalPlanningCard,.sshSafetyPanel,.sshSafetyCheck,.updateActive,.emptyMini){
 border-radius:var(--ui-radius);
}
body[data-auth-view="false"] #app :is(.card,.detailCard,.authListItem,.roleMatrix>div,
 .notificationPermission,.notifChoiceGroup .checkLine,.notifInboxItem,
 .insightsHistoryTile,.renewalPlanningCard,.sshSafetyPanel,.sshSafetyCheck,
 .updateActive,.emptyMini,.publicURLBox,.publicFields,.privacyNote,
 .notificationChannelCard,.secretBox,.secureNoteBody,.secureNoteEditor){
 background:var(--surface-1)!important;
 color:var(--text)!important;
 border-color:var(--border)!important;
}
body[data-auth-view="false"] #app :is(.authListItem,.roleMatrix>div,.notificationPermission,
 .notifChoiceGroup .checkLine,.notifInboxItem,.insightsHistoryTile,.renewalPlanningCard,
 .sshSafetyCheck,.emptyMini,.secretBox,.publicURLBox,.publicFields,.privacyNote){
 background:var(--surface-2)!important;
}
/* Keep security/code data in neutral, readable containers, never fixed near-black. */
body[data-auth-view="false"] #app :is(pre,.backupWarning pre,.secureNoteBody,
 .recoveryPrintHint,.notificationPermission,.authListItem,.sshSafetyPanel,
 .notifChoiceGroup .checkLine,.roleMatrix>div,.renewalPlanningCard){
 color:var(--text)!important;border-color:var(--border)!important;
}
body[data-auth-view="false"] #app :is(pre,.backupWarning pre,.recoveryPrintHint){
 background:var(--surface-2)!important;line-height:1.55;
}
body[data-auth-view="false"] #app :is(code,.updateRelease code,.secretBox code){
 color:var(--text)!important;
}
body[data-auth-view="false"] #app .backupWarning{
 background:var(--surface-2)!important;
 border-color:var(--border)!important;color:var(--text)!important;
}
body[data-auth-view="false"] #app .backupWarning>strong,
body[data-auth-view="false"] #app .warningText{color:var(--fleet-warn)!important;}

/* Account / RBAC. Earlier selectors used #05080c with default dark #0b0b0b text. */
body[data-auth-view="false"] #app .roleMatrix{
 grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
body[data-auth-view="false"] #app .roleMatrix>div{
 padding:13px 14px;min-height:78px;
}
body[data-auth-view="false"] #app .roleMatrix strong{
 color:var(--text)!important;font-size:13px!important;line-height:1.3;
}
body[data-auth-view="false"] #app .roleMatrix span{
 color:var(--text-2)!important;font-size:12px!important;line-height:1.5;
}
body[data-auth-view="false"] #app .authList{gap:8px;}
body[data-auth-view="false"] #app .authListItem{padding:12px 14px;gap:12px;}
body[data-auth-view="false"] #app .authListItem strong{color:var(--text)!important;font-size:13px!important;}
body[data-auth-view="false"] #app .authListItem small{
 color:var(--text-2)!important;font-size:12px!important;line-height:1.45;
}
body[data-auth-view="false"] #app .authListItem button{flex-shrink:0;}

/* Notifications: labels and pills must not turn into invisible navy-on-black. */
body[data-auth-view="false"] #app .notificationPermission{
 grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 12px;font-size:12px;
}
body[data-auth-view="false"] #app .notificationPermission strong{
 color:var(--text)!important;font-size:12px!important;
}
body[data-auth-view="false"] #app .notificationPermission span{
 color:var(--text-2)!important;font-size:12px!important;
}
body[data-auth-view="false"] #app .notifChoiceGroup{gap:8px;}
body[data-auth-view="false"] #app .notifChoiceGroup>span{
 color:var(--text-2)!important;font-size:11px!important;
}
body[data-auth-view="false"] #app .notifChoiceGroup .checkLine{
 min-height:31px;padding:5px 9px;font-size:12px!important;
 color:var(--text)!important;line-height:1.35;cursor:pointer;
}
body[data-auth-view="false"] #app .notifChoiceGroup .checkLine:hover,
body[data-auth-view="false"] #app .notifChoiceGroup .checkLine:focus-within{
 background:var(--surface-hover)!important;color:var(--text)!important;
 border-color:var(--text-3)!important;
}
body[data-auth-view="false"] #app .notifInboxItem{padding:10px 12px;}
body[data-auth-view="false"] #app .notifInboxItem.unread{
 background:var(--surface-2)!important;border-color:var(--text-3)!important;
}

/* Insights: historical charts can retain their colored series, never their
   hardcoded navy canvas/labels in the Light theme. */
body[data-auth-view="false"] #app .insightsHistoryTile,
body[data-auth-view="false"] #app .renewalPlanningCard{
 background:var(--surface-2)!important;color:var(--text)!important;
 border:1px solid var(--border)!important;
}
body[data-auth-view="false"] #app :is(.insightsHistoryTileHead span,.insightsHistoryStats,
 .renewalPlanningCard>span,.renewalPlanningCard small,.renewalPlanningCard p,
 .insightsHistoryEmpty){color:var(--text-2)!important;}
body[data-auth-view="false"] #app :is(.insightsHistoryStats b,.renewalPlanningCard>strong){
 color:var(--text)!important;
}
body[data-auth-view="false"] #app .insightsHistoryEmpty{
 background:var(--surface-2)!important;border-color:var(--border)!important;
}
body[data-auth-view="false"] #app .insightsHistoryTile svg text{
 fill:var(--text-2)!important;
}
body[data-auth-view="false"] #app .insightsHistoryTile svg :is(.axis,.gridline){
 stroke:var(--border)!important;
}

/* Underline interactive links in data tables; keep semantic success/error. */
body[data-auth-view="false"] #app :is(.roleMatrix,.authListItem,.notificationPermission,
 .notifChoiceGroup,.insightsHistoryTile,.renewalPlanningCard,.sshSafetyPanel,
 .secureNoteBody) :is(h2,h3,h4,strong){color:var(--text);}
body[data-auth-view="false"] #app a:not(.catalogChip):not(.tagChip):not(.taxManageLink){
 color:var(--fleet-link)!important;
 text-decoration-color:var(--border);
}
body[data-auth-view="false"] #app a:not(.catalogChip):not(.tagChip):hover{
 color:var(--text)!important;
 text-decoration:underline;
 text-decoration-thickness:1px;
}

/* Shared control rhythm; excludes check/radio/file/color, form-mounted tokens. */
body[data-auth-view="false"] #app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),select,textarea){
 background:var(--fleet-field)!important;color:var(--text)!important;
 border:1px solid var(--border)!important;border-radius:8px;
 font-size:13px!important;line-height:1.4;
 min-height:var(--ui-field-height);
}
body[data-auth-view="false"] #app :is(input:not([type="checkbox"]):not([type="radio"]),textarea)::placeholder{
 color:var(--text-3)!important;opacity:1;
}
body[data-auth-view="false"] #app select{appearance:auto;padding:7px 11px;}
body[data-auth-view="false"] #app option{background:var(--surface-1);color:var(--text);}
body[data-auth-view="false"] #app :is(input,select,textarea):hover{
 border-color:var(--text-3)!important;
}
body[data-auth-view="false"] #app :is(input,select,textarea):focus-visible{
 border-color:var(--text)!important;outline:2px solid var(--text)!important;
 outline-offset:2px;
}
body[data-auth-view="false"] #app button:not(.tagChip):not(.catalogChip),
body[data-auth-view="false"] #app .columnPicker summary{
 min-height:34px;line-height:1.25;font-size:12px;
}
body[data-auth-view="false"] #app button:not(.primary):not(.danger):not(.dangerButton):hover{
 background:var(--surface-hover)!important;
 border-color:var(--text-3)!important;color:var(--text)!important;
 filter:none!important;
}
body[data-auth-view="false"] #app button:disabled{opacity:.55;cursor:not-allowed;}
body[data-auth-view="false"] #app .dangerButton{
 background:color-mix(in srgb,var(--fleet-critical) 9%,var(--surface-1))!important;
 border-color:color-mix(in srgb,var(--fleet-critical) 48%,var(--border))!important;
 color:var(--fleet-critical)!important;
}
body[data-auth-view="false"] #app .dangerButton:hover{
 background:color-mix(in srgb,var(--fleet-critical) 16%,var(--surface-1))!important;
}
body[data-auth-view="false"] #app :is(.taxonomyScope,.organizationCard) :is(.catalogChip,.tagChip){
 min-height:var(--ui-chip-height)!important;font-size:12px!important;
 padding:6px 11px!important;
}
body[data-auth-view="false"] #app :is(.taxonomyScope,.organizationCard) .rowActions button:not(.catalogChip):not(.tagChip){
 min-height:30px!important;padding:5px 9px!important;font-size:11px!important;
}
body[data-auth-view="false"] #app .fleetTools :is(select,button){min-height:38px;}

/* Tables: equal rhythm, readable hover, never set text to inherit for semantic
   statuses, never force a completely black table on light. */
body[data-auth-view="false"] #app :is(table,.tableWrap,.fleetTableWrap){
 border-color:var(--border)!important;
}
body[data-auth-view="false"] #app table th{
 color:var(--text-2)!important;
 font-size:11px!important;font-weight:700!important;letter-spacing:.025em;
 background:var(--fleet-table-head)!important;
}
body[data-auth-view="false"] #app table tbody td{
 color:var(--text);border-color:var(--border-soft)!important;
 font-size:12px;line-height:1.45;
}
body[data-auth-view="false"] #app table tbody tr:hover td{
 background:var(--surface-hover)!important;
}
body[data-auth-view="false"] #app table tbody tr:hover :is(.ok,.bad,.warn,.warningText){
 filter:none!important;
}
body[data-auth-view="false"] #app :is(.rowActions,.buttonRow){gap:7px;}
body[data-auth-view="false"] #app .fleetTable .ipText,
body[data-auth-view="false"] #app .fleetTable td[data-col="ip"] code,
body[data-auth-view="false"] #app .inventoryIP code{
 font-size:14px!important;font-weight:700!important;
 letter-spacing:0!important;font-variant-numeric:tabular-nums;
 color:var(--text)!important;
}

/* Compact overview. 11 cards = 6 + 5 without wasting 105px height. */
body[data-auth-view="false"] #app .summaryGrid:not(.inventorySummary):not(.insightsSummary)
 .summaryCard{
 min-height:74px!important;padding:10px 12px!important;
 border-radius:10px!important;
}
body[data-auth-view="false"] #app .summaryGrid:not(.inventorySummary):not(.insightsSummary)
 .summaryCard strong{font-size:24px!important;margin:3px 0 1px!important;}
body[data-auth-view="false"] #app .summaryGrid:not(.inventorySummary):not(.insightsSummary)
 .summaryCard :is(small,span){line-height:1.3;}

/* Restore alignment in responsive account and notifications views. */
@media(max-width:1000px){
 body[data-auth-view="false"] #app .roleMatrix{grid-template-columns:1fr;}
 body[data-auth-view="false"] #app .notificationPermission{grid-template-columns:1fr;}
 body[data-auth-view="false"] #app .notificationPermission button{justify-self:start;}
}
@media(max-width:700px){
 body[data-auth-view="false"] #app .authListItem{flex-direction:column;align-items:stretch;}
 body[data-auth-view="false"] #app .authListItem button{align-self:flex-end;}
 body[data-auth-view="false"] #app .notifChoiceGroup .checkLine{min-height:36px;}
 body[data-auth-view="false"] #app :is(.notificationGrid,.insightsColumns){grid-template-columns:minmax(0,1fr);}
}
/* Prevent old select/toolbar rules from shrinking dropdowns to 36/37px. */
body[data-auth-view="false"] #app .fleetTools select,
body[data-auth-view="false"] #app .inventoryFilters select,
body[data-auth-view="false"] #app .fleetTaxFilterGrid select{
 box-sizing:border-box!important;min-height:40px!important;height:40px!important;
}
/* Brand actions are grayscale even when their legacy classes reference the
   CPU blue accent. Taxonomy labels themselves remain user-defined colors. */
body[data-auth-view="false"] #app :is(.taxonomyScope button.taxonomyCreate,
 .organizationCard #addGroup,.organizationCard #addTag){
 background:var(--fleet-button)!important;
 border-color:var(--border)!important;color:var(--text)!important;
}
body[data-auth-view="false"] #app :is(.taxonomyScope button.taxonomyCreate,
 .organizationCard #addGroup,.organizationCard #addTag):hover{
 background:var(--surface-hover)!important;border-color:var(--text-3)!important;
 color:var(--text)!important;filter:none!important;
}
body[data-auth-view="false"] #app :is(input[type="checkbox"],input[type="radio"]){
 accent-color:var(--text)!important;
}
body[data-auth-view="false"] #app :is(.notificationRules,.detailTable,
 .jobsTable,.inventoryServers,.auditTable) tbody tr:hover td{
 background:var(--surface-hover)!important;color:var(--text)!important;
}
/* Stable server detail light surface + readable metadata, no inherited
   fixed dark gradient from the pre-monochrome serverHero. */
html[data-auth-theme="light"] body[data-auth-view="false"] #app .serverHero{
 background:var(--surface-2)!important;
 color:var(--text)!important;border-color:var(--border)!important;
}
html[data-auth-theme="light"] body[data-auth-view="false"] #app .serverHero :is(.serverIdentity h2,.serverIdentity p,.serverIdentity strong,.heroFact strong,.heroFact small){
 color:var(--text)!important;
}
html[data-auth-theme="light"] body[data-auth-view="false"] #app .serverHero :is(.statusBadge,.ok){
 color:#147b4b!important;
}