/* Final layout pass: one Garuda red/neutral visual system across every NMS module. */
body.shell-ready {
  --sidebar-width:264px;
  --header-height:68px;
  --content-width:1360px;
  --bg:#f8f8f7;
  --panel:#fff;
  --panel-2:#f5f5f3;
  --text:#252525;
  --muted:#656565;
  --line:#e3e1de;
  --accent:#bf0000;
  --nav-active:#bf0000;
  --nav:#ffe7e7;
  --brand-border:#f0aaaa;
  font-size:13px;
  line-height:1.6;
}
body.shell-ready.theme-dark {
  --bg:#181817;
  --panel:#242321;
  --panel-2:#2c2a28;
  --text:#f2eded;
  --muted:#b3aea8;
  --line:#45413d;
  --accent:#ff7373;
  --nav-active:#bf0000;
  --nav:#3c2020;
  --brand-border:#803939;
}

body.shell-ready:not(.locked) > header { box-shadow:0 1px 0 rgba(40, 20, 20,.03); }
body.shell-ready:not(.locked) > main { background:linear-gradient(180deg,#fff 0,#f8f8f7 230px); }
body.shell-ready.theme-dark:not(.locked) > main { background:linear-gradient(180deg,#22211f 0,#181817 250px); }

/* Navigation is deliberately quiet, while the active task is unmistakable. */
body.shell-ready .shell-sidebar { padding-inline:12px; }
body.shell-ready .shell-sidebar > .shell-menu-search { border-radius:9px; background:var(--panel-2); }
body.shell-ready .shell-menu-group { margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid var(--line); }
body.shell-ready .shell-menu-group:last-child { border-bottom:0; }
body.shell-ready .shell-menu-group > summary { min-height:34px; padding:7px 9px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.045em; text-transform:uppercase; }
body.shell-ready .shell-menu-group > summary::after { opacity:.65; }
body.shell-ready .shell-menu-items { gap:3px; }
body.shell-ready .shell-menu-items button { min-height:38px; border-radius:8px; border-left-width:0; padding:8px 10px; font-weight:520; }
body.shell-ready .shell-menu-items button.active { box-shadow:inset 3px 0 0 var(--nav-active); border-left-color:transparent; background:var(--nav); color:#bf0000; }
body.shell-ready.theme-dark .shell-menu-items button.active { color:var(--accent); }
body.shell-ready .shell-sidebar > footer { margin-inline:3px; padding-inline:5px; }

/* Stable content rhythm for data, management, automation, and infrastructure pages. */
body.shell-ready #cards { gap:22px; }
body.shell-ready #cards :is(.card,.admin-form,.settings-fields,.vpn,.ipam,.up,.ops-view>header,.health-view>header,.px-panel,.tg-panel,.ns-panel,.rr-panel,.mpls-heading,.sdwan-heading,.sdwan-panel,.shzt,.workspaces-panel,.services-sites-panel) {
  border-radius:12px;
  box-shadow:0 1px 2px rgba(35, 24, 24,.035),0 8px 28px rgba(35, 24, 24,.025);
}
body.shell-ready #cards :is(.ops-view>header,.health-view>header) { padding:24px; border:1px solid var(--line); background:var(--panel); }
body.shell-ready #cards :is(.ops-view>header,.health-view>header) h2 { font-size:24px; letter-spacing:-.025em; }
body.shell-ready #cards :is(.px-heading,.tg-heading,.ns-heading,.rr-heading) { margin-top:4px; margin-bottom:26px; }
body.shell-ready #cards :is(.px-heading h1,.tg-page h1,.ns-page h1,.rr-heading h1) { letter-spacing:-.035em; }

/* Forms keep the same density and focus behaviour regardless of the feature module. */
body.shell-ready #cards :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  border-color:var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:8px;
}
body.shell-ready #cards :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus {
  border-color:var(--nav-active);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--nav-active) 15%,transparent);
  outline:0;
}
body.shell-ready #cards button { border-radius:8px; }
body.shell-ready #cards :is(.admin-form,.settings-fields,.tg-panel,.px-panel,.ns-form,.rr-panel) > :is(h2,h3):first-child { margin-top:0; }

/* Tables, metrics, notices, and dialogs share a clearer boundary. */
body.shell-ready #cards :is(.admin-table,.ops-scroll,.health-scroll,.px-table-scroll,.tg-table-scroll,.ns-table-wrap,.ns-scroll,.up-scroll) {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
}
body.shell-ready #cards :is(.admin-table th,.ops-view th,.health-view thead th,.px-table-scroll th,.tg-page th,.ns-page th) { background:var(--panel-2); }
body.shell-ready #cards :is(.summary,.health-metrics) { border-color:var(--line); }
body.shell-ready #cards :is(.summary .metric,.health-metric) { min-width:0; }
body.shell-ready #cards :is(.empty-note,.ops-note,.health-band,.tg-guide,.ns-message,.px-message,.rr-message) { border-radius:10px; }
body.shell-ready :is(.ops-dialog,.ns-dialog,.tg-dialog) { border-radius:14px; border-color:var(--line); box-shadow:0 24px 70px rgba(25, 14, 14,.22); }
body.shell-ready :is(.ops-dialog,.ns-dialog,.tg-dialog)::backdrop { background:rgba(33, 22, 22,.46); }

/* Prevent the dashboard from looking cramped at intermediate widths. */
@media (min-width:901px) and (max-width:1240px) {
  body.shell-ready { --sidebar-width:236px; }
  body.shell-ready:not(.locked) > main { padding-inline:24px; }
  body.shell-ready > header .toolbar { padding-inline:20px; }
}
@media (max-width:900px) {
  body.shell-ready:not(.locked) > main { background:var(--bg); padding-inline:14px; }
  body.shell-ready #cards { gap:16px; }
  body.shell-ready #cards :is(.ops-view>header,.health-view>header) { padding:18px; border-radius:11px; }
  body.shell-ready #cards :is(.px-page,.tg-page,.ns-page,.rr-page) { padding-inline:0; }
  body.shell-ready #cards :is(.px-heading h1,.tg-page h1,.ns-page h1,.rr-heading h1) { font-size:28px; }
  body.shell-ready .mobile-menu-list .shell-menu-items { grid-template-columns:1fr; }
  body.shell-ready .mobile-menu-list .shell-menu-items button { min-height:50px; border:1px solid var(--line); background:var(--panel); }
  body.shell-ready .mobile-menu-list .shell-menu-items button.active { border-color:var(--brand-border); box-shadow:inset 3px 0 0 var(--nav-active); }
}
/* Compact typography: retain a clear reading size and full-size touch inputs. */
body.shell-ready .shell-menu-group > summary { font-weight:650; letter-spacing:.03em; }
body.shell-ready .shell-menu-items button { font-size:12px; line-height:1.5; font-weight:500; }
body.shell-ready .shell-menu-items button.active { font-weight:600; }
body.shell-ready .app-brand h1 { font-size:14px; }
body.shell-ready .console-welcome h2 { font-size:27px; line-height:1.3; letter-spacing:-.025em; }
body.shell-ready #cards :is(.px-heading h1,.tg-page h1,.ns-page h1,.rr-heading h1,.ss-heading h1,.ws-heading h1,.nms-docs-hero h2,.ai-hero h2,.mpls-heading h2,.sdwan-heading h2) {
  font-size:25px; line-height:1.3; font-weight:600; letter-spacing:-.025em;
}
body.shell-ready #cards :is(.ops-view>header h2,.health-view>header h2,.settings-heading h2,.card-head .site) { font-size:20px; line-height:1.4; }
body.shell-ready.traffic-view #cards .card-head .site { font-size:14px; }
body.shell-ready #cards :is(.px-section-head h2,.tg-panel-title h2,.rr-section-head h2,.mpls-box-head h3,.nms-docs-section h3,.ai-composer h3) { font-size:17px; line-height:1.4; font-weight:600; }
body.shell-ready #cards :is(.px-heading p,.tg-heading p,.ns-heading p,.rr-heading p,.nms-docs-hero p,.ai-hero p,.nms-docs-card p,.nms-docs-step p) { font-size:13px; line-height:1.65; color:var(--muted); }
body.shell-ready #cards :is(.admin-table td,.px-table-scroll td,.ns-page td,.ops-view td,.health-view td) { font-size:12px; line-height:1.6; }
body.shell-ready #cards :is(.px-form label,.tg-fields label,.ns-form label,.rr-action-row label,.rr-check label) { font-size:12px; font-weight:550; line-height:1.5; }
body.shell-ready #cards :is(.px-form button,.px-actions button,.rr-primary,.rr-danger,.tg-primary,.ns-primary,.admin-actions button) { font-size:12px; font-weight:600; line-height:1.5; }
body.shell-ready #cards :is(.px-heading,.tg-heading,.ns-heading,.rr-heading) { margin-bottom:20px; }
body.shell-ready .summary .value { font-size:22px; line-height:1.4; }
body.shell-ready #cards :is(.traffic-value,.px-metrics strong,.ss-count strong) { font-size:23px; font-variant-numeric:tabular-nums; }
/* Small SD-WAN labels need more legibility even in the compact theme. */
body.shell-ready #cards .sdwan :is(.sdwan-badge,.sdwan-panel-head small,.sdwan-instance-meta span,.sdwan-instance-name small,.sdwan-network-name small,.sdwan-summary small) { font-size:11px; letter-spacing:.02em; }
body.shell-ready #cards .sdwan :is(.sdwan-instance-meta code,.sdwan-instance-meta strong) { font-size:12px; }
body.shell-ready .login-intro h1 { font-size:32px; line-height:1.25; }
body.shell-ready .login-identity h2 { font-size:23px; line-height:1.35; }
body.shell-ready .login-lede { font-size:13px; line-height:1.65; }
@media (min-width:901px) {
  body.shell-ready #cards :is(.admin-form,.px-form,.tg-fields,.ns-form,.rr-action-row,.rr-check) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:13px; line-height:1.5; }
}
@media (max-width:900px) {
  body.shell-ready .console-welcome h2 { font-size:24px; }
  body.shell-ready #cards :is(.px-heading h1,.tg-page h1,.ns-page h1,.rr-heading h1,.ss-heading h1,.ws-heading h1,.nms-docs-hero h2,.ai-hero h2,.mpls-heading h2,.sdwan-heading h2) { font-size:23px; }
  body.shell-ready .mobile-menu-list .shell-menu-items button { font-size:13px; min-height:46px; }
  body.shell-ready #cards :is(input:not([type=checkbox]):not([type=radio]),select,textarea),body.shell-ready .login-field input { font-size:16px; }
  body.shell-ready .login-intro h1 { font-size:27px; }
}
/* Animate paint properties only: monitoring updates must not move the layout. */
@media (prefers-reduced-motion:no-preference) {
  body.shell-ready :is(button,input,select,textarea,.shell-menu-group>summary) {
    transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out,box-shadow 160ms ease-out;
  }
  body.shell-ready .shell-menu-group > summary::after { transition:transform 180ms ease-out; }
  body.shell-ready #cards tbody tr { transition:background-color 160ms ease-out; }
  body.shell-ready #mobilePanel[open] { animation:nms-panel-enter 180ms ease-out; }
  body.shell-ready #mobilePanel[open]::backdrop { animation:nms-backdrop-enter 180ms ease-out; }
}
@keyframes nms-panel-enter { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }
@keyframes nms-backdrop-enter { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  body.shell-ready *, body.shell-ready *::before, body.shell-ready *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}