/* GARUDA / NMS — complete application layout.
   Based on the supplied MyGaruda customer app and Garuda design tokens.
   Existing inputs, actions, data, permissions and module state stay connected. */
body.gan-app { --sidebar-width:264px; --header-height:76px; --content-width:1440px; font:14px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; }
body.gan-app :is(button,input,select,textarea) { font-family:var(--font-sans); }
body.gan-app :is(h1,h2,h3) { text-wrap:balance; }
body.gan-app [hidden] { display:none!important; }
body.gan-app .gan-eyebrow { margin:0 0 10px; color:var(--accent); font:600 10px/1.5 var(--font-display); letter-spacing:.13em; text-transform:uppercase; }
body.gan-app button { transition:background-color .15s,border-color .15s; }
body.gan-app :is(button,a,input,select,textarea):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* Full-height split login, matching the supplied app kit. */
body.gan-app.locked .gan-login { display:grid; grid-template-columns:1.05fr 1fr; grid-template-rows:none; min-height:100dvh; padding:0; width:100%; background:var(--panel); }
.gan-login-brand { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:70px; min-height:100dvh; padding:56px clamp(32px,5vw,80px); background:var(--neutral-950); color:white; }
.gan-login-logo { display:block; align-self:flex-start; }
.gan-login-logo img { width:232px; max-width:100%; height:auto; display:block; }
.gan-login-story { max-width:520px; }
body.gan-app .gan-login-story .gan-eyebrow { color:var(--red-400); font-size:11px; margin-bottom:22px; }
body.gan-app .gan-login-story h1 { margin:0 0 24px; color:white; font:600 clamp(30px,3.2vw,46px)/1.2 var(--font-display); letter-spacing:-.02em; }
.gan-login-story h1 em { color:var(--red-400); font-style:normal; }
.gan-login-story > p:last-child { font-size:16px; line-height:1.8; color:var(--neutral-400); margin:0; max-width:410px; }
.gan-login-points { display:grid; gap:18px; }
.gan-login-points > div { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--neutral-300); }
.gan-login-points img { width:20px; height:20px; filter:brightness(0) invert(1); opacity:.7; }
.gan-login-watermark { position:absolute; width:540px; height:auto; right:-195px; bottom:-145px; z-index:-1; opacity:.15; pointer-events:none; }
.gan-login-form-side { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:112px 48px 88px; }
.gan-login-options { position:absolute; right:32px; top:30px; }
.gan-login-form-wrap { width:100%; max-width:380px; }
.gan-login-form-title { margin:0 0 32px; }
body.gan-app .gan-login-form-title h2 { font:600 27px/1.35 var(--font-display); letter-spacing:-.02em; margin:0 0 12px; }
.gan-login-form-title > p { margin:0; font-size:14px; color:var(--muted); }
body.gan-app .gan-login .login-field { margin-bottom:22px; gap:8px; }
body.gan-app .gan-login .login-field label { font-size:13px; font-weight:700; }
body.gan-app .gan-login .login-field input { height:48px; padding:0 14px; font-size:14px; border-radius:8px; background:var(--panel); }
body.gan-app .gan-login .login-field small { font-size:11px; line-height:1.5; color:var(--muted); }
body.gan-app .gan-login .login-password button { height:42px; top:3px; }
body.gan-app .gan-login .login-error:empty { min-height:0; padding:0; }
body.gan-app .gan-login .login-submit { height:48px; border-radius:8px; font-size:14px; margin-top:8px; }
body.gan-app .gan-login .login-notice { font-size:11px; margin-top:22px; }
.gan-login-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; position:absolute; bottom:28px; left:32px; right:32px; color:var(--muted); font-size:10px; }

/* Application shell: full sidebar, content-only topbar. */
@media(min-width:901px) {
  body.gan-app.shell-ready:not(.locked) > header { left:var(--sidebar-width); right:0; width:auto; height:var(--header-height); grid-template-columns:minmax(0,1fr); border:0; border-bottom:1px solid var(--line); background:var(--panel); }
  body.gan-app.shell-ready:not(.locked) > header .app-brand { display:none; }
  body.gan-app.shell-ready > header .toolbar { height:var(--header-height); padding:0 32px; gap:16px; }
  body.gan-app.shell-ready .shell-context { display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.4; }
  body.gan-app.shell-ready .shell-context span { display:block; font-size:10px; color:var(--muted); }
  body.gan-app.shell-ready .shell-context strong { font:600 15px/1.4 var(--font-display); max-width:320px; }
  body.gan-app.shell-ready .shell-context strong::before { content:none; }
  body.gan-app .shell-desktop-tools { gap:10px; }
  body.gan-app .shell-desktop-tools button { height:38px; min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); font-size:12px; }
  body.gan-app .shell-desktop-tools button:nth-child(2) { width:190px; justify-content:flex-start; background:var(--panel-2); border-color:transparent; color:var(--muted); }
  body.gan-app .shell-desktop-tools .shell-router-context { max-width:220px; margin-right:0; }
  body.gan-app.shell-ready:not(.locked) > .shell-sidebar { inset:0 auto 0 0; z-index:80; width:var(--sidebar-width); padding:30px 16px 18px; gap:20px; border:0; background:var(--neutral-950); }
  body.gan-app .gan-sidebar-brand { display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:0 10px 4px; text-decoration:none; }
  body.gan-app .gan-sidebar-brand img { display:block; width:204px; height:auto; max-width:100%; }
  body.gan-app .gan-sidebar-brand span { font:400 9px/1.4 var(--font-mono); color:var(--neutral-500); letter-spacing:.12em; }
  body.gan-app .shell-sidebar > .shell-menu-search { border:1px solid var(--neutral-800); background:var(--neutral-900); border-radius:8px; padding:0 10px; margin:0; }
  body.gan-app .shell-sidebar .shell-menu-search input { font-size:12px!important; height:36px!important; color:var(--neutral-100); }
  body.gan-app .shell-sidebar .shell-menu-search input::placeholder { color:var(--neutral-400); }
  body.gan-app .shell-sidebar .shell-menu-group { padding:0; border:0; margin:0 0 20px; }
  body.gan-app .shell-sidebar .shell-menu-group > summary { min-height:30px; padding:6px 12px 10px; color:var(--neutral-500); font:400 10px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
  body.gan-app .shell-sidebar .shell-menu-group > summary:hover { color:var(--neutral-200); }
  body.gan-app .shell-sidebar .shell-menu-items { gap:4px; }
  body.gan-app .shell-sidebar .shell-menu-items button { min-height:42px; padding:11px 12px; border-radius:8px; font:400 13px/1.4 var(--font-sans); border:0; color:var(--neutral-400); }
  body.gan-app .shell-sidebar .shell-menu-items button.active { font-weight:700; color:white; background:var(--red-600); box-shadow:none; }
  body.gan-app .shell-sidebar .shell-menu-items button:hover { background:var(--neutral-900); color:white; }
  body.gan-app .shell-sidebar .shell-menu-items button.active:hover { background:var(--red-700); }
  body.gan-app .shell-sidebar .shell-menu-items .mobile-icon { width:18px; height:18px; color:inherit; }
  body.gan-app .shell-sidebar > footer { display:flex; align-items:center; gap:10px; padding:12px; border:0; background:var(--neutral-900); border-radius:12px; }
  body.gan-app .shell-sidebar > footer > div { flex:1; min-width:0; }
  body.gan-app .shell-sidebar footer strong { font-size:12px; color:white; max-width:128px; }
  body.gan-app .shell-sidebar footer small { color:var(--neutral-400); font-size:10px; }
  body.gan-app .shell-sidebar footer button { background:transparent; border:0; padding:5px; color:var(--neutral-400); }
  body.gan-app.shell-ready:not(.locked) > main { width:calc(100% - var(--sidebar-width)); margin-left:var(--sidebar-width); padding:calc(var(--header-height) + 34px) 32px 48px; min-height:100dvh; background:var(--bg); }
}
.gan-account-avatar { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; background:var(--red-600); color:white; border-radius:50%; font:600 13px var(--font-display); }
body.gan-app .gan-page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:26px; }
body.gan-app .gan-page-heading h1 { font:600 27px/1.3 var(--font-display); letter-spacing:-.02em; margin:0 0 10px; }
body.gan-app .gan-page-heading .gan-eyebrow { margin-bottom:10px; font-size:9px; }
body.gan-app .gan-page-description { color:var(--muted); margin:0; font-size:14px; }
body.gan-app .gan-page-action { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; color:var(--text); white-space:nowrap; font-size:12px; }
body.gan-app .gan-page-action .mobile-icon { width:16px; height:16px; color:var(--muted); }
body.gan-app.shell-ready .status-line { border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:12px 16px; margin:0 auto 22px; color:var(--muted); font:400 12px/1.6 var(--font-sans); }
body.gan-app.shell-ready .status-line.error { color:var(--down); border-color:var(--red-200); background:var(--nav); }

/* Real monitoring data in individual metric cards. */
body.gan-app.shell-ready .summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 auto 26px; padding:0; border:0; }
body.gan-app.shell-ready .summary .metric { min-height:110px; margin:0; padding:20px 22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 5px #0b0b0d03; }
body.gan-app.shell-ready .summary .metric .label { color:var(--muted); font-size:12px; text-transform:none; font-weight:400; }
body.gan-app.shell-ready .summary .value { font:600 25px/1.3 var(--font-mono); letter-spacing:-.03em; margin-top:13px; color:var(--text); }
body.gan-app.shell-ready .summary .metric:nth-child(2) .value { color:var(--up); }
body.gan-app.shell-ready .summary .metric:nth-child(3) .value { color:var(--down); }
body.gan-app.shell-ready #cards { gap:20px; }
body.gan-app.traffic-view #cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.gan-app.shell-ready #cards > .card { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 5px #0b0b0d03; }
body.gan-app.traffic-view .card-head { gap:16px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:18px; }
body.gan-app.traffic-view .card-head .site { font:600 15px/1.5 var(--font-sans); }
body.gan-app .interface-status { border-radius:999px; min-height:26px; font-size:10px; padding:4px 10px; }
body.gan-app.traffic-view .traffic-box { background:var(--panel-2); border:0; border-radius:10px; padding:14px; }
body.gan-app.traffic-view .traffic-value { font:600 22px/1.4 var(--font-mono); }
body.gan-app .chart.rt-chart { margin-top:18px; border-radius:12px; }
body.gan-app .mobile-overview { padding:0; margin-bottom:24px; }
body.gan-app #topTraffic { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; }
body.gan-app #topTraffic h2 { font:600 18px/1.4 var(--font-display); margin:0 0 20px; }
body.gan-app #topTraffic :is(h3,.tt-interface) { font-family:var(--font-sans); }
body.gan-app .interface-focus { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:18px; }

/* Permission-aware quick links sit below the live monitoring area. */
body.gan-app .console-welcome { margin-top:32px; padding:0; }
body.gan-app .gan-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
body.gan-app .gan-section-heading h2 { text-align:left; font:600 19px/1.4 var(--font-display); margin:0; }
body.gan-app .console-welcome-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
body.gan-app .console-welcome-grid > section { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
body.gan-app .console-section-title { color:var(--muted); font:400 11px/1.4 var(--font-sans); margin-bottom:12px; padding:0; }
body.gan-app .console-welcome-grid section > button { min-height:66px; gap:12px; border:0; border-radius:8px; padding:10px 0; }
body.gan-app .console-welcome-grid section > button:last-child { border:0; }
body.gan-app .console-welcome-grid section > button strong { font-size:13px; font-weight:700; }
body.gan-app .console-welcome-grid section > button small { font-size:11px; line-height:1.6; }
body.gan-app .console-welcome-grid .console-home-icon { width:18px; height:18px; color:var(--accent); }

/* Common module layout: headers, surfaces, tables, forms and tabs. */
body.gan-app #cards :is(.settings-heading,.resource-heading,.px-heading,.tg-page>header,.ns-heading,.rr-heading,.ops-view>header,.health-view>header,.mpls-heading,.sdwan-heading,.ss-heading,.ws-heading,.vpn>header,.ipam>header,.up>header) { padding:22px 24px; margin:0 0 22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:none; }
body.gan-app #cards :is(.settings-heading h2,.resource-heading h2,.px-heading h1,.tg-page h1,.ns-heading h1,.rr-heading h1,.ops-view>header h2,.health-view>header h2,.mpls-heading h2,.sdwan-heading h2,.ss-heading h1,.ws-heading h1) { font:600 21px/1.4 var(--font-display); letter-spacing:-.015em; margin:0 0 8px; color:var(--text); }
body.gan-app #cards :is(.settings-heading p,.resource-heading p,.px-heading p,.tg-page>header p,.ns-heading p,.rr-heading p,.ss-heading p) { font-size:13px; line-height:1.6; color:var(--muted); }
body.gan-app #cards :is(.admin-form,.settings-fields,.vpn,.ipam,.up,.sdwan-panel,.ztc-panel,.mpls-panel,.mpls-box,.px-panel,.tg-panel,.ns-panel,.ns-form,.rr-panel,.ws-panel,.ws-card,.two-factor-panel,.health-band,.ops-panel) { border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); padding:24px; box-shadow:0 2px 5px #0b0b0d03; }
body.gan-app #cards :is(.sdwan-panel-head,.ztc-head,.px-panel-head,.mpls-box-head,.ns-panel-head) { padding:0 0 18px; margin-bottom:18px; border:0; border-bottom:1px solid var(--line); background:transparent; }
body.gan-app #cards :is(.admin-table,.ops-scroll,.health-scroll,.px-table-scroll,.ns-table-wrap,.tg-table-scroll,.up-scroll) { border-radius:12px; border:1px solid var(--line); background:var(--panel); }
body.gan-app #cards table { border-collapse:separate; border-spacing:0; font-size:13px; width:100%; }
body.gan-app #cards table th { padding:13px 16px; background:var(--panel-2); color:var(--muted); font-size:11px; font-weight:700; line-height:1.5; border-bottom:1px solid var(--line); text-align:left; }
body.gan-app #cards table td { padding:14px 16px; border-bottom:1px solid var(--line); line-height:1.6; vertical-align:middle; }
body.gan-app #cards table tbody tr:last-child td { border-bottom:0; }
body.gan-app #cards table tbody tr:hover td { background:color-mix(in srgb,var(--panel-2) 60%,var(--panel)); }
body.gan-app #cards :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea) { border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:10px 12px; font:400 13px/1.4 var(--font-sans); min-height:42px; max-width:100%; }
body.gan-app #cards :is(input,select,textarea):focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); outline:0; }
body.gan-app #cards input[type=checkbox],body.gan-app #cards input[type=radio] { accent-color:var(--red-600); width:16px; height:16px; min-height:0; }
body.gan-app #cards :is(.admin-form label,.settings-fields label,.ns-form label,.tg-panel label,.px-panel label) { font-size:12px; color:var(--muted); font-weight:700; gap:8px; }
body.gan-app #cards button { font:700 12px/1.4 var(--font-sans); border-radius:8px; min-height:36px; padding:9px 13px; }
body.gan-app #cards :is(button[type=submit],button.primary,.sdwan-primary,.mpls-primary,.px-primary,.ns-primary,.tg-primary,.rr-primary) { background:var(--red-600); color:#fff; border:1px solid var(--red-600); box-shadow:none; }
body.gan-app #cards :is(button[type=submit],button.primary,.sdwan-primary,.mpls-primary,.px-primary,.ns-primary,.tg-primary,.rr-primary):hover:not(:disabled) { background:var(--red-700); border-color:var(--red-700); transform:none; }
body.gan-app #cards :is(.vpn-tabs,.ipam-tabs,.up-tabs,.px-tabs,.tg-tabs,.ns-tabs,.ws-tabs,.sdwan-tabs) { display:flex; flex-wrap:wrap; gap:4px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); margin-bottom:22px; }
body.gan-app #cards :is(.vpn-tabs,.ipam-tabs,.up-tabs,.px-tabs,.tg-tabs,.ns-tabs,.ws-tabs,.sdwan-tabs) button { border:0; border-radius:7px; background:transparent; color:var(--muted); padding:10px 15px; }
body.gan-app #cards :is(.vpn-tabs,.ipam-tabs,.up-tabs,.px-tabs,.tg-tabs,.ns-tabs,.ws-tabs,.sdwan-tabs) button.active { background:var(--panel); color:var(--accent); box-shadow:0 1px 4px #0b0b0d12; }
body.gan-app #cards :is(.empty-note,.ss-empty,.ops-note,.tg-guide,.ns-message) { border:1px dashed var(--line); background:var(--panel); border-radius:12px; padding:24px; color:var(--muted); line-height:1.7; }
body.gan-app #cards :is(.resource-overview,.resource-metrics,.health-metrics,.sdwan-summary,.ss-counts,.px-metrics) { gap:18px; margin-block:22px; }
body.gan-app #cards .resource-overview { border:0; padding:0; }
body.gan-app #cards .resource-overview > div,body.gan-app #cards :is(.resource-metric,.resource-cores,.health-metric,.ss-count,.sdwan-summary article,.px-metric) { padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:none; }
body.gan-app #cards .resource-metric { --resource-color:var(--red-600); }
body.gan-app #cards .resource-overview strong { font-family:var(--font-mono); font-size:16px; }
body.gan-app #cards .ss-router { border-radius:16px; }
body.gan-app #cards .ss-router summary { padding:20px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
body.gan-app #cards .ss-router-history { padding:22px 24px 16px; }
body.gan-app #cards .ss-services { padding-inline:24px; }
body.gan-app :is(.ops-dialog,.ns-dialog,.tg-dialog,.px-dialog,.rr-dialog,dialog:not(.mobile-panel)) { border:1px solid var(--line); border-radius:20px; background:var(--panel); color:var(--text); box-shadow:0 24px 80px #0b0b0d33; padding:28px; }
body.gan-app dialog::backdrop { background:#0b0b0d66; backdrop-filter:blur(3px); }
body.gan-app #mobilePanel { border-radius:20px 0 0 20px; border-left:1px solid var(--line); padding:0 28px 28px; width:min(480px,100%); }
body.gan-app #mobilePanel .mobile-panel-head h2 { font:600 19px/1.5 var(--font-display); }
body.gan-app #mobilePanel .shell-control-section { border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; background:var(--panel); }
body.gan-app #mobilePanel .shell-control-section h3 { font:700 13px/1.5 var(--font-sans); margin:0 0 14px; }
body.gan-app #mobilePanel .control-bar :is(input,select,button) { border-radius:8px; min-height:40px; }
body.gan-app #mobilePanel .shell-control-field > label { font-size:11px; color:var(--muted); }
body.gan-app #mobilePanel .shell-control-description { font-size:13px; margin-bottom:24px; }

/* Responsive layouts retain every operational control. */
@media(min-width:1700px) { body.gan-app.shell-ready .summary { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(min-width:901px) and (max-width:1250px) {
  body.gan-app { --sidebar-width:236px; }
  body.gan-app.shell-ready > header .toolbar { padding-inline:24px; }
  body.gan-app .shell-desktop-tools button:nth-child(2) { width:auto; }
  body.gan-app .shell-desktop-tools .shell-router-context { max-width:165px; }
  body.gan-app .shell-context strong { max-width:205px; }
  body.gan-app.shell-ready:not(.locked)>main { padding-inline:24px; }
  body.gan-app .console-welcome-grid { grid-template-columns:1fr; }
  body.gan-app .console-welcome-grid > section { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  body.gan-app .console-section-title { grid-column:1/-1; margin:0; }
}
@media(max-width:1000px) {
  .gan-login-brand { padding:42px 32px; gap:48px; }
  .gan-login-form-side { padding-inline:32px; }
  body.gan-app .gan-login-story h1 { font-size:32px; }
}
@media(max-width:900px) {
  body.gan-app.locked .gan-login { grid-template-columns:1fr; }
  .gan-login-brand { min-height:0; padding:30px 28px 36px; gap:34px; }
  .gan-login-logo img { width:190px; }
  body.gan-app .gan-login-story h1 { font-size:30px; margin-bottom:16px; }
  .gan-login-story > p:last-child { font-size:14px; max-width:520px; }
  .gan-login-points { display:none; }
  .gan-login-watermark { width:330px; right:-100px; bottom:-140px; }
  .gan-login-form-side { padding:86px 28px 90px; }
  .gan-login-options { top:22px; right:28px; }
  .gan-login-footer { bottom:20px; left:28px; right:28px; font-size:9px; }
  body.gan-app.shell-ready:not(.locked)>header { padding:12px 18px; background:var(--panel); border-top:3px solid var(--red-600); border-bottom:1px solid var(--line); }
  body.gan-app .app-brand h1 { font-family:var(--font-display); font-size:13px; }
  body.gan-app .app-brand .subtitle { display:none; }
  body.gan-app .mobile-account { color:var(--muted); font-size:10px; }
  body.gan-app.shell-ready:not(.locked)>main { padding:26px 18px 100px; margin:0; width:100%; }
  body.gan-app .gan-page-heading { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:22px; }
  body.gan-app .gan-page-heading h1 { font-size:24px; }
  body.gan-app .gan-page-description { font-size:13px; }
  body.gan-app .gan-page-action { align-self:flex-start; }
  body.gan-app.shell-ready .summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  body.gan-app.shell-ready .summary .metric { padding:16px; min-height:96px; border-radius:12px; }
  body.gan-app.shell-ready .summary .value { font-size:21px; }
  body.gan-app.traffic-view #cards { grid-template-columns:1fr; }
  body.gan-app #cards>.card { padding:20px; }
  body.gan-app .console-welcome-grid { grid-template-columns:1fr; }
  body.gan-app .mobile-nav { border-top:1px solid var(--line); padding:8px 10px max(8px,env(safe-area-inset-bottom)); box-shadow:0 -6px 24px #0b0b0d06; }
  body.gan-app .mobile-nav button { border-radius:10px; min-height:48px; }
  body.gan-app .mobile-nav button.active { background:var(--nav); color:var(--accent); }
  body.gan-app .mobile-nav button.active::before { display:none; }
  body.gan-app .mobile-tools button { border-radius:8px; }
  body.gan-app .mobile-menu-list .shell-menu-items { grid-template-columns:1fr; }
  body.gan-app .mobile-menu-list .shell-menu-items button { border:0; border-radius:8px; min-height:46px; }
  body.gan-app .mobile-menu-list .shell-menu-items button.active { background:var(--red-600); color:white; }
  body.gan-app .mobile-menu-list .shell-menu-items button.active .mobile-icon { color:white; }
  body.gan-app #cards :is(.settings-heading,.resource-heading,.px-heading,.ns-heading,.ss-heading,.mpls-heading,.sdwan-heading) { padding:20px; }
  body.gan-app #cards :is(.admin-form,.settings-fields,.vpn,.ipam,.up,.sdwan-panel,.ztc-panel,.px-panel,.tg-panel,.ns-panel,.ns-form) { padding:18px; }
  body.gan-app #cards :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:16px; min-height:44px; }
  body.gan-app #cards table :is(td,th) { padding:12px; }
}
@media(max-width:540px) {
  body.gan-app.shell-ready .summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.gan-app .gan-page-heading h1 { font-size:21px; }
  body.gan-app #cards :is(.settings-heading h2,.resource-heading h2,.px-heading h1,.tg-page h1,.ns-heading h1,.rr-heading h1,.ss-heading h1,.mpls-heading h2,.sdwan-heading h2) { font-size:18px; }
  body.gan-app #mobilePanel { border-radius:0; padding-inline:20px; }
  body.gan-app #cards .resource-overview { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { body.gan-app *,body.gan-app *::before,body.gan-app *::after { transition:none!important; animation:none!important; } }

body.gan-app #mobilePanel .shell-control-section h3::before { display:none; }

/* Keep the page inside the viewport, including installed mobile web apps.
   Wide tables and code retain their own local scroll area. */
html { overflow-x:hidden; overscroll-behavior-x:none; }
body.gan-app { width:100%; max-width:100%; min-width:0; overflow-x:hidden; overscroll-behavior-x:none; }
@supports (overflow:clip) {
  html,body.gan-app { overflow-x:clip; }
}
body.gan-app :is(main,#cards,#cards>*,.summary,.metric,.card,.card-head,.gan-page-heading,.gan-page-heading>div,.console-welcome-grid,.console-welcome-grid>section,.zt-console,.zt-panel) { min-width:0; max-width:100%; }
body.gan-app :is(.admin-table,.access-table-scroll,.ops-scroll,.health-scroll,.px-table-scroll,.ns-table-wrap,.tg-table-scroll,.up-scroll,.zt-table-wrap) { min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
body.gan-app pre { min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
@media(max-width:900px) {
  body.gan-app :is(.site,.details,.gan-page-heading,.status-line,.zt-facts,.zt-title) { overflow-wrap:anywhere; }
  body.gan-app :is(.toolbar,.app-brand,.mobile-account,.zt-title>div,.zt-actions,.gan-login-brand,.gan-login-form-wrap) { min-width:0; max-width:100%; }
  body.gan-app :is(.zt-title,.zt-actions,.card-head) { flex-wrap:wrap; }
  body.gan-app :is(img,video,canvas) { max-width:100%; }
  body.gan-app dialog { box-sizing:border-box; max-width:calc(100% - 24px); }
  body.gan-app #mobilePanel { max-width:100%; }
}