/* Shared presentation layer: no telemetry, permissions or alarm behavior. */
/* Keep page navigation stable instead of fading every panel from invisible. */
.app-layout .panel { animation:none; }
.app-breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;color:var(--clr-text-dim);font-size:12px;line-height:1.6}
.app-breadcrumbs a{color:var(--clr-primary);min-height:44px;display:inline-flex;align-items:center}
.app-breadcrumbs [aria-current=page]{color:var(--clr-text);font-weight:600}
.nav-section-title{line-height:1.5}
.sidebar{height:100dvh}
.ui-operational-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.ui-operational-summary .panel { display:flex; flex-direction:column; gap:8px; padding:24px; }
.ui-status-card { --status-color:var(--clr-text-muted); }
.ui-status-card > strong { color:var(--status-color); }
.ui-status-card.ui-state-success { --status-color:#22c55e; }
.ui-status-card.ui-state-warning { --status-color:#f59e0b; }
.ui-status-card.ui-state-high { --status-color:#f97316; }
.ui-status-card.ui-state-danger { --status-color:#ef4444; }
.ui-status-card.ui-state-neutral { --status-color:#94a3b8; }
:root[data-theme="light"] .ui-status-card.ui-state-success { --status-color:#15803d; }
:root[data-theme="light"] .ui-status-card.ui-state-warning { --status-color:#a16207; }
:root[data-theme="light"] .ui-status-card.ui-state-high { --status-color:#c2410c; }
:root[data-theme="light"] .ui-status-card.ui-state-danger { --status-color:#b91c1c; }
.ui-auto-status { color:var(--clr-text-muted); font-size:.84rem; }
.ui-auto-status strong { color:var(--clr-text-muted); font-size:inherit; }
.ui-auto-status strong.is-on { color:#22c55e; }
.ui-auto-status strong.is-off { color:#f59e0b; }
:root[data-theme="light"] .ui-auto-status strong.is-on { color:#15803d; }
:root[data-theme="light"] .ui-auto-status strong.is-off { color:#a16207; }
.ui-operational-summary strong { font-size:1.4rem; line-height:1.3; overflow-wrap:anywhere; }
.ui-summary-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--clr-text-muted); }
.ui-status-guidance { font-size:.875rem; margin-bottom:24px; color:var(--clr-text-muted); }
.ui-control-notice { grid-column:1 / -1; border-left:4px solid var(--clr-warning); padding:16px; background:var(--clr-surface-2); border-radius:8px; }
.ui-table-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; }
.ui-table-search input { width:min(320px,100%); }
.ui-table-search span { font-size:.875rem; color:var(--clr-text-muted); }
.ui-skip-link { position:fixed; left:16px; top:-100px; z-index:10000; background:var(--clr-surface); color:var(--clr-text); padding:16px; border:2px solid var(--clr-primary); }
.ui-skip-link:focus { top:16px; }
.sidebar-toggle,.flash-close,.theme-toggle { min-width:44px; min-height:44px; }
.main-wrapper { min-width:0; }
.data-table tr[hidden] { display:none; }
@media(max-width:1024px) { .ui-operational-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .ui-operational-summary { grid-template-columns:1fr; } .ui-operational-summary .panel { padding:16px; } .topbar { flex-wrap:wrap; gap:8px; } .topbar-right { flex-wrap:wrap; } .content-body { padding:16px; } }
:root { --ui-space:8px; --ui-radius:12px; --clr-text-muted:#94a3b8; }
:root[data-theme="light"] { --clr-text-muted:#526278; }
body { font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
.app-layout .main-content, .content-wrapper, main { min-width:0; }
.page-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }
.page-title { font-size:clamp(1.4rem,2.2vw,1.85rem); font-weight:750; letter-spacing:-.025em; line-height:1.25; }
.page-subtitle { margin-top:8px; line-height:1.6; max-width:80ch; }
.panel { border-radius:var(--ui-radius); box-shadow:0 4px 16px rgba(0,0,0,.06); min-width:0; }
.panel-header { gap:16px; flex-wrap:wrap; }
.panel-title { font-size:1.05rem; font-weight:700; }
.btn { min-height:44px; padding:10px 16px; border-radius:8px; font-weight:650; transition:background-color .15s,border-color .15s; }
.btn-primary { background:#0369a1; color:#fff; }
.btn-primary:hover { background:#075985; color:#fff; }
.btn:disabled { opacity:.65; cursor:not-allowed; }
.nav-item { min-height:44px; border-radius:8px; }
.nav-item:hover { background:var(--clr-primary-dim); }
.nav-item.active { font-weight:700; }
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid #0284c7; outline-offset:3px; }
.form-input:not([type="checkbox"]):not([type="radio"]) { min-height:44px; border-radius:8px; font:inherit; }
.form-label { font-size:.875rem; font-weight:650; margin-bottom:8px; }
.form-group { margin-bottom:16px; }
.table-responsive { max-width:100%; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.data-table :is(th,td) { padding:16px; vertical-align:top; }
.data-table tbody tr:hover { background:var(--clr-primary-dim); }
.data-table td { overflow-wrap:anywhere; }
.badge { border-radius:6px; font-size:.75rem; font-weight:700; letter-spacing:.025em; }
.ui-details-dialog { width:min(760px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; background:var(--clr-surface); color:var(--clr-text); border:1px solid var(--clr-border); border-radius:16px; padding:24px; margin:auto; }
.ui-details-dialog::backdrop { background:rgba(2,6,23,.7); }
.ui-details-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:24px; }
.ui-details-body pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.7; margin:16px 0; }
.ui-details-body p { margin:12px 0; }
.ui-details-body a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:767px) { .page-header { margin-bottom:16px; } .data-table :is(th,td) { padding:12px; } .ui-details-dialog { padding:16px; } .page-header > .btn { width:100%; } }
@media(prefers-reduced-motion:reduce) { .btn,.nav-item { transition:none; } }