/* Approved reference layout. Presentation only; module permissions remain unchanged. */
#app-shell { --asm-sidebar-width: 230px; grid-template-columns:var(--asm-sidebar-width) minmax(0,1fr); background:var(--theme-bg); font-family:Arial,Helvetica,sans-serif; transition:grid-template-columns .2s ease; }
#app-shell .sidebar { background:#222d32; box-shadow:none; color:#b8c7ce; }
#app-shell .brand { min-height:50px; padding:0 16px; background:#367fa9; border:0; font-size:15px; white-space:nowrap; }
#app-shell .brand span { color:#fff; font-size:13px; }
#app-shell .account { padding:12px 10px; gap:10px; background:#222d32; border:0; }
#app-shell .avatar { width:36px; height:36px; flex-shrink:0; }
#app-shell .account strong {font-size:12px;} #app-shell .account small {font-size:11px;}
#app-shell #main-nav { background:#222d32; padding:0; scrollbar-color:#52656e #222d32; }
#app-shell .nav-console { position:relative; background:#1a2226; box-shadow:none; border:0; padding:7px 10px; }
#app-shell .nav-console label { height:28px; background:#374850; border:1px solid #465b65; border-radius:3px; color:#b8c7ce; }
#app-shell .nav-console input { color:#e4edf1; font-size:11px; } #app-shell .nav-console input::placeholder{color:#b8c7ce;}
#app-shell .nav-console>div { margin-top:5px; gap:4px; } #app-shell .nav-console button { background:#2c3b41; border:1px solid #435860; padding:3px; font-size:10px; font-weight:400; }
#app-shell .nav-console small {margin-top:5px;font-size:10px;}
#app-shell .nav-section-caption { padding:8px 12px; color:#8298a3; background:#1a2226; font-size:10px; font-weight:400; letter-spacing:0; }
#app-shell .nav-group {border:0;margin:0;} #app-shell .nav-group-title { min-height:37px; padding:8px 12px; font-size:12px; text-transform:none; letter-spacing:0; font-weight:400; background:#222d32; color:#b8c7ce; }
#app-shell .nav-group-title:hover,#app-shell .nav-group.has-active>.nav-group-title {background:#1e282c;color:#fff;}
#app-shell .group-name {gap:8px;} #app-shell .group-name>i {width:16px;height:16px;border:0;background:none;border-radius:0;box-shadow:none;color:inherit;}
#app-shell .group-meta {border:0;background:transparent;} #app-shell .group-meta b {font-size:15px;}
#app-shell .nav-children {background:#2c3b41;padding:3px 0 5px;}
#app-shell .nav-button {width:100%;margin:0;min-height:31px;padding:6px 12px 6px 24px;border-left:3px solid transparent;border-radius:0;background:transparent;color:#b8c7ce;font-weight:400;box-shadow:none;gap:7px;}
#app-shell .nav-button .menu-icon {background:none;border:0;border-radius:0;flex:0 0 14px;width:14px;height:14px;color:inherit;}
#app-shell .nav-label {font-size:11px!important;} #app-shell .nav-button.active {border-left-color:#3c8dbc;background:#1e282c;color:#fff;box-shadow:none;}
#app-shell .nav-button:hover {background:#24343b;border-left-color:#3c8dbc;} #app-shell .nav-unavailable {opacity:.5;} #app-shell .nav-badge {font-size:9px;background:transparent;border:0;color:#9ab0ba;padding:0;}
#app-shell .sidebar-foot {font-size:10px;padding:10px;border-color:#2c3b41;}
#app-shell .asm-ui-icon {width:16px;height:16px;vertical-align:middle;display:inline-block;}
#app-shell .topbar {height:50px;background:#3c8dbc;padding:0 12px 0 0;gap:8px;justify-content:flex-start;}
#app-shell .mobile-nav-toggle {display:flex;position:static;flex-shrink:0;justify-content:center;align-items:center;flex-direction:column;gap:3px;width:40px;min-width:40px;height:50px;border:0;border-radius:0;background:transparent;margin:0;padding:10px;}
#app-shell .mobile-nav-toggle span {display:block;width:14px;height:2px;background:white;}
#app-shell .topbar-left {gap:6px;} #app-shell .topbar-right {margin-left:auto;gap:8px;}
#app-shell .quick-action {height:34px;padding:6px 10px;font-size:12px;border-radius:2px;background:#00a65a;border-color:#008d4c;box-shadow:none;}
#app-shell .theme-toggle,#app-shell .top-icon {min-height:30px;height:32px;border:0;background:transparent;box-shadow:none;padding:4px;border-radius:0;}
#app-shell .theme-toggle span {display:none;} #app-shell .environment {font-size:10px;background:#367fa9;padding:4px 6px;}
#app-shell .top-profile-button {background:transparent;border:0;min-width:0;border-radius:0;padding:4px;gap:7px;box-shadow:none;}
#app-shell .profile-photo {width:30px;height:30px;} #app-shell .profile-copy strong {font-size:11px;} #app-shell .profile-copy small {font-size:10px;}
#app-shell .page {padding:12px 15px 28px;} #app-shell .safety-banner {margin:7px 15px 0;padding:5px 9px;font-size:11px;border-radius:2px;}
#app-shell .dashboard-title {display:none;} #app-shell .dashboard-highlights {gap:15px;margin-bottom:12px;}
#app-shell .kpi {border-radius:0;min-height:112px;padding:14px 12px 27px;box-shadow:none;overflow:hidden;} #app-shell .kpi.green{background:#00a65a;} #app-shell .kpi.yellow{background:#ffc000;color:#403900;} #app-shell .kpi.blue{background:#17a2b8;} #app-shell .kpi.red{background:#dd4b39;}
#app-shell .kpi strong{font-size:24px;margin:0 0 7px;position:relative;z-index:1;} #app-shell .kpi>span:not(.kpi-icon):not(.kpi-more){font-size:12px;position:relative;z-index:1;}
#app-shell .kpi-icon {position:absolute;right:12px;top:17px;opacity:.22;color:inherit;} #app-shell .kpi-icon svg {width:58px;height:58px;stroke-width:2;}
#app-shell .kpi-more {position:absolute;bottom:0;left:0;right:0;background:#00000018;text-align:center;padding:5px;font-size:11px;height:25px;}
#app-shell .mix-panel {background:var(--theme-surface);border:1px solid var(--theme-border);border-top:2px solid #00c0ef;border-radius:3px;box-shadow:none;}
#app-shell .dashboard-mode-tabs {display:flex;gap:0;padding:8px 10px 0;background:var(--theme-surface);border:0;border-bottom:1px solid var(--theme-border);}
#app-shell .dashboard-mode-tabs button {display:flex;gap:5px;min-height:34px;padding:7px 12px;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:#3c8dbc;transform:none;}
#app-shell .dashboard-mode-tabs button.active {background:var(--theme-surface);border-color:var(--theme-border);border-bottom-color:var(--theme-surface);color:var(--theme-text);margin-bottom:-1px;}
#app-shell .dashboard-mode-tabs button b {width:auto;height:auto;background:transparent;color:inherit;font-size:12px;} #app-shell .dashboard-mode-tabs button span {font-size:12px;font-weight:400;} #app-shell .dashboard-mode-tabs button small {display:none;}
#app-shell .mix-summary-layout {grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:24px;padding:15px;}
#app-shell .summary-icon-grid {gap:24px 18px;grid-template-columns:repeat(3,minmax(0,1fr));}
#app-shell .summary-stat {grid-template-columns:50px minmax(0,1fr);gap:12px;padding:0;background:transparent;border:0;box-shadow:none;min-height:56px;}
#app-shell .summary-icon {width:50px;height:50px;background:#d2d2d2;color:#606060;border:1px solid #b4b4b4;border-radius:4px;box-shadow:0 1px 2px #0002;}
#app-shell .summary-icon svg {width:30px;height:30px;stroke-width:2.3;}
#app-shell .summary-copy u {font-size:11px;font-weight:400;color:var(--theme-text);} #app-shell .summary-copy b {font-size:12px;font-weight:600;background:#d2d6de;color:#34414a;border-radius:5px;padding:1px 6px;margin-top:5px;}
#app-shell .service-panel {border:0;background:var(--theme-surface);box-shadow:none;} #app-shell .service-panel h2 {padding:0 0 10px;font-size:12px;font-weight:400;background:transparent;color:var(--theme-text);border:0;} #app-shell .service-panel h2 small{display:none;}
#app-shell .service-line,#app-shell .service-panel-strong .service-line {min-height:42px;padding:8px 9px;font-size:11px;border:0;background:var(--theme-surface-soft);}
#app-shell .service-line:nth-child(odd) {background:var(--theme-table-head);} #app-shell .service-line>b,#app-shell .service-panel-strong .service-line>b {font-size:11px;font-weight:400;color:var(--theme-text);letter-spacing:0;}
#app-shell .service-line.stacked {grid-template-columns:minmax(100px,.9fr) minmax(130px,1.2fr);gap:3px 8px;} #app-shell .service-line.stacked>span:last-child {font-size:11px;color:var(--theme-text);font-weight:400;}
#app-shell .service-bar {height:5px;border:0;box-shadow:none;} #app-shell .service-line .status{font-size:10px;padding:2px 5px;} #app-shell .service-line .status.pending{background:#f3dfa0;color:#655018;}
#app-shell .report-panel {margin-top:13px;padding:10px;} #app-shell .report-panel .mix-tabs {padding:0;background:transparent;} #app-shell .report-panel .mix-tabs button {font-size:11px;padding:8px 11px;} #app-shell .report-panel .data-table th {font-size:11px;background:var(--theme-surface);text-transform:none;font-weight:400;} #app-shell .report-panel .data-table td {font-size:12px;padding:9px;}
html[data-theme="light"] #app-shell {--theme-bg:#ecf0f5;--theme-surface:#fff;--theme-surface-soft:#f9f9f9;--theme-table-head:#eee;--theme-text:#444;--theme-border:#ddd;}
@media(min-width:1101px) and (orientation:landscape) {
 #app-shell.sidebar-collapsed {--asm-sidebar-width:50px;} #app-shell.sidebar-collapsed .sidebar {overflow:visible;z-index:40;} #app-shell.sidebar-collapsed #main-nav {overflow:visible;}
 #app-shell.sidebar-collapsed .brand {font-size:0;padding:0;justify-content:center;} #app-shell.sidebar-collapsed .brand:before {content:'ASM';font-size:12px;} #app-shell.sidebar-collapsed .brand span,#app-shell.sidebar-collapsed .account>div:last-child,#app-shell.sidebar-collapsed .nav-console,#app-shell.sidebar-collapsed .nav-section-caption,#app-shell.sidebar-collapsed .sidebar-foot,#app-shell.sidebar-collapsed .group-name>span,#app-shell.sidebar-collapsed .group-meta {display:none;}
 #app-shell.sidebar-collapsed .account{padding:12px 7px;} #app-shell.sidebar-collapsed .nav-group-title{justify-content:center;padding:10px 0;} #app-shell.sidebar-collapsed .group-name>i{width:18px;height:18px;}
 #app-shell.sidebar-collapsed .nav-group .nav-children {display:none;position:fixed;left:50px;width:240px;max-height:calc(100vh - 64px);overflow:auto;box-shadow:3px 5px 18px #0005;padding:8px 0;z-index:70;} #app-shell.sidebar-collapsed .nav-group.flyout-open .nav-children{display:block;}
}
@media(max-width:1450px){#app-shell .mix-summary-layout{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:16px;} #app-shell .summary-icon-grid{gap:20px 12px;} #app-shell .summary-stat{gap:8px;grid-template-columns:44px minmax(0,1fr);} #app-shell .summary-icon{width:44px;height:46px;}}
@media(max-width:1100px),(orientation:portrait){#app-shell {display:block;} #app-shell .sidebar{width:min(86vw,260px);overflow:hidden;} #app-shell .topbar {padding-left:0;} #app-shell .topbar-product-name{font-size:12px;} #app-shell .mix-summary-layout{grid-template-columns:1fr;} #app-shell .kpi strong{font-size:20px;} #app-shell .sidebar .brand{min-height:50px;}}
@media(min-width:761px){#app-shell .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:760px){#app-shell .dashboard-highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} #app-shell .summary-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));} #app-shell .service-line.stacked{grid-template-columns:1fr 1.2fr;} #app-shell .topbar-right{gap:4px;} #app-shell .profile-copy,#app-shell .environment{display:none;} #app-shell .quick-action{display:flex;font-size:11px;} #app-shell .page{padding:12px;} #app-shell .dashboard-mode-tabs button{padding:7px 9px;} #app-shell .topbar-product-name{display:none;} }
@media(prefers-reduced-motion:reduce){#app-shell{transition:none;}}
/* Accepted revision: readable navigation and service panel beside all dashboard tabs. */
#app-shell .brand,#app-shell .topbar{min-height:58px;height:58px;}
#app-shell .brand{font-size:17px;padding:0 15px;} #app-shell .brand span{font-size:14px;}
#app-shell .mobile-nav-toggle{height:58px;width:46px;min-width:46px;} #app-shell .mobile-nav-toggle span{width:17px;}
#app-shell .quick-action{height:42px;font-size:15px;padding:9px 13px;}
#app-shell .account{padding:17px 13px;gap:13px;min-height:84px;} #app-shell .avatar{width:48px;height:48px;font-size:20px;}
#app-shell .account strong{font-size:16px;} #app-shell .account small{font-size:12px;margin-top:7px;}
#app-shell .nav-section-caption{padding:13px 16px;font-size:12px;}
#app-shell .nav-group-title{min-height:53px;padding:14px 18px;font-size:16px;}
#app-shell .group-name{gap:10px;} #app-shell .group-name>i,#app-shell .group-name .asm-ui-icon{width:20px;height:20px;}
#app-shell .asm-ui-icon{stroke-width:2.6;} #app-shell .nav-button{min-height:41px;padding:10px 14px 10px 34px;gap:10px;}
#app-shell .nav-label{font-size:14px!important;} #app-shell .nav-button .menu-icon,#app-shell .nav-button .asm-ui-icon{width:17px;height:17px;flex-basis:17px;}
#app-shell .nav-badge{font-size:10px;} #app-shell .nav-console>div{grid-template-columns:1fr;} #app-shell .nav-console button{font-size:11px;padding:5px;} #app-shell .sidebar-foot{font-size:11px;}
#app-shell .dashboard-columns{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr);gap:24px;padding:14px;align-items:start;}
#app-shell .dashboard-primary{min-width:0;} #app-shell .dashboard-columns>.service-panel{margin:0;min-width:0;}
#app-shell .dashboard-primary .mix-summary-layout{display:block;padding:23px 4px;}
#app-shell .dashboard-mode-tabs{padding:0;min-height:48px;}
#app-shell .dashboard-mode-tabs button{min-height:48px;padding:12px 14px;gap:6px;} #app-shell .dashboard-mode-tabs button span{font-size:16px;} #app-shell .dashboard-mode-tabs button b{font-size:16px;}
#app-shell .summary-icon-grid{gap:34px 20px;} #app-shell .summary-stat{grid-template-columns:72px minmax(0,1fr);gap:16px;min-height:80px;}
#app-shell .summary-icon{width:72px;height:74px;background:#ccc;color:#555;border-color:#aaa;box-shadow:0 1px 3px #0004;}
#app-shell .summary-icon svg{width:45px;height:45px;stroke-width:3;}
#app-shell .summary-copy u{font-size:14px;line-height:1.35;} #app-shell .summary-copy b{font-size:18px;padding:2px 8px;margin-top:7px;}
#app-shell .service-panel h2{height:48px;margin:0;padding:12px 10px;font-size:16px;border-bottom:1px solid var(--theme-border);}
#app-shell .service-line,#app-shell .service-panel-strong .service-line{min-height:60px;padding:12px 11px;font-size:14px;}
#app-shell .service-line>b,#app-shell .service-panel-strong .service-line>b{font-size:14px;}
#app-shell .service-line.stacked{grid-template-columns:minmax(110px,.9fr) minmax(140px,1.2fr);gap:5px 12px;}
#app-shell .service-line.stacked>span:last-child{font-size:14px;} #app-shell .service-line .status{font-size:12px;padding:3px 7px;white-space:normal;}
#app-shell .service-bar{height:7px;} #app-shell .kpi{min-height:140px;padding:20px 14px 34px;} #app-shell .kpi strong{font-size:28px;margin-bottom:12px;}
#app-shell .kpi>span:not(.kpi-icon):not(.kpi-more){font-size:16px;} #app-shell .kpi-icon svg{width:72px;height:72px;stroke-width:2.8;} #app-shell .kpi-icon{top:20px;opacity:.25;}
#app-shell .kpi-more{font-size:14px;height:32px;padding:6px;} #app-shell .report-panel .mix-tabs button{font-size:14px;padding:12px 14px;}
@media(min-width:1101px) and (orientation:landscape){#app-shell.sidebar-collapsed .nav-group-title{min-height:53px;} #app-shell.sidebar-collapsed .group-name>i{width:20px;height:20px;}}
@media(max-width:1450px){#app-shell .dashboard-columns{grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:16px;} #app-shell .summary-stat{grid-template-columns:52px minmax(0,1fr);gap:10px;} #app-shell .summary-icon{width:52px;height:54px;} #app-shell .summary-icon svg{width:35px;height:35px;} #app-shell .summary-copy u{font-size:12px;} #app-shell .summary-copy b{font-size:15px;} #app-shell .summary-icon-grid{gap:28px 12px;} #app-shell .service-line.stacked{grid-template-columns:1fr 1.15fr;gap:4px 8px;} #app-shell .service-line>b,#app-shell .service-panel-strong .service-line>b,#app-shell .service-line.stacked>span:last-child{font-size:12px;} #app-shell .service-line{min-height:52px;} #app-shell .kpi strong{font-size:24px;}}
@media(min-width:801px) and (max-width:1100px){#app-shell .dashboard-columns{grid-template-columns:minmax(0,1.85fr) minmax(240px,1fr);} #app-shell .dashboard-primary .summary-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px){#app-shell .dashboard-columns{grid-template-columns:1fr;gap:14px;padding:10px;} #app-shell .summary-stat{grid-template-columns:54px minmax(0,1fr);} #app-shell .summary-icon{width:54px;height:56px;} #app-shell .summary-copy u{font-size:13px;} #app-shell .summary-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;} #app-shell .service-line.stacked{grid-template-columns:1fr 1.3fr;} #app-shell .service-line>b,#app-shell .service-panel-strong .service-line>b,#app-shell .service-line.stacked>span:last-child{font-size:14px;} #app-shell .kpi{min-height:130px;} #app-shell .kpi>span:not(.kpi-icon):not(.kpi-more){font-size:14px;} #app-shell .kpi-icon svg{width:52px;height:52px;} #app-shell .quick-action{font-size:13px;} #app-shell .dashboard-mode-tabs button{padding:9px 7px;} #app-shell .dashboard-mode-tabs button span{font-size:14px;}}
/* Accepted resource indicators and navigation cleanup. */
#app-shell .nav-count{display:block;color:#8298a3;text-align:center;padding:7px 10px;font-size:11px;}
#app-shell .dashboard-new{margin-left:auto;background:#00a65a;color:#fff;border-radius:3px;padding:1px 6px;font-size:12px;line-height:1.5;font-weight:600;}
#app-shell .nav-button[data-page="dashboard"] .asm-ui-icon{width:20px;height:20px;stroke-width:2.8;}
#app-shell .server-resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:18px 0;}
#app-shell .resource-indicator{display:flex;align-items:stretch;min-width:0;background:var(--theme-surface);border-radius:2px;box-shadow:0 1px 2px #0002;}
#app-shell .resource-indicator>b{display:flex;align-items:center;gap:5px;flex:0 0 auto;padding:10px 10px;background:#ccc;color:#444;font-size:14px;font-weight:400;white-space:nowrap;}
#app-shell .resource-indicator>b svg{width:18px;height:18px;flex-shrink:0;stroke-width:2.5;}
#app-shell .resource-indicator>span{display:flex;align-items:center;min-width:0;padding:10px 11px;color:var(--theme-text);font-size:14px;overflow-wrap:anywhere;}
html[data-theme="dark"] #app-shell .resource-indicator>b{background:var(--theme-surface-raised);color:var(--theme-text);}
@media(min-width:1101px) and (orientation:landscape){#app-shell.sidebar-collapsed .nav-count,#app-shell.sidebar-collapsed .dashboard-new{display:none;}}
@media(max-width:1450px){#app-shell .resource-indicator>b,#app-shell .resource-indicator>span{font-size:12px;padding:9px 7px;}#app-shell .server-resources{gap:12px;}}
@media(max-width:800px){#app-shell .server-resources{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){#app-shell .server-resources{grid-template-columns:1fr;}#app-shell .resource-indicator>b,#app-shell .resource-indicator>span{font-size:14px;}}
#app-shell .nav-button[data-page="dashboard"]{display:flex;flex-wrap:nowrap;align-items:center;}
#app-shell .nav-button[data-page="dashboard"] .dashboard-new{flex:0 0 auto;margin-left:auto;grid-column:auto;grid-row:auto;}