/* Shared telecom workbench layout. Feature styles build on these surfaces. */
html[data-tiandi-theme="forest"] .shell,
html[data-tiandi-theme="forest"] body:has(.shell) > .modal {
  --bg: #f3f6f8;
  --surface: #fff;
  --surface-muted: #f5f7f9;
  --surface-hover: #ecf5f3;
  --ink: #172d38;
  --muted: #4e6572;
  --line: #cdd9e0;
  --line-soft: #e4ebef;
  --border-strong: #aebfca;
  --green: #076b5e;
  --green-dark: #143e3a;
  --accent-hover: #07554b;
  --nav-active: #e2f3ee;
  --nav-active-ink: #07554b;
  --shadow: none;
}
#app .shell {
  --rail-width: 224px;
  --workspace-inset: clamp(16px, 2.2vw, 38px);
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}
#app .shell .sidebar {
  width: var(--rail-width);
  padding: 22px 12px 16px;
  background: var(--surface);
  color: var(--ink);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#app .shell .sidebar .brand {padding: 0 8px 17px;min-width:0}
#app .shell .sidebar .brand-name {color:var(--ink);font-size:20px;line-height:1.2}
#app .shell .sidebar .brand-caption {color:var(--muted);font-size:11px}
#app .shell .nav-label {margin:0 8px 8px;color:var(--muted);font-size:13px}
#app .shell .navigation {display:grid;align-content:start;gap:4px;overflow:visible}
#app .shell .nav-button {
  min-height:42px;
  padding:8px 10px;
  gap:9px;
  border:1px solid transparent;
  border-radius:6px;
  box-shadow:none;
  color:var(--ink);
  font-size:15px;
  line-height:1.3;
}
#app .shell .nav-button:is(:hover,[aria-expanded=true]) {background:var(--surface-muted)}
#app .shell .nav-button[aria-current=page] {background:var(--nav-active);color:var(--nav-active-ink);font-weight:750}
#app .shell .nav-icon {color:inherit;font-size:16px}
#app .shell .product-category-navigation:not([hidden]) {margin:3px 0 8px 14px;padding:2px 0 2px 8px;border-left:1px solid var(--line)}
#app .shell .category-nav-item {
  width:100%;
  min-height:36px;
  margin:0;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
#app .shell .category-nav-item:hover {background:var(--surface-muted);color:var(--ink)}
#app .shell .category-nav-item[aria-current=page] {color:var(--nav-active-ink);background:var(--nav-active);font-weight:700}
#app .shell .workspace {min-width:0}
#app .shell .topbar {
  height:auto;
  min-height:62px;
  padding:10px var(--workspace-inset);
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
#app .shell .breadcrumb {flex:1;min-width:0;color:var(--muted);font-size:14px}
#app .shell .breadcrumb b {color:var(--ink);font-size:15px}
#app .shell .topbar-right {display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
#app .shell .topbar-right .logout {padding:7px 10px;min-height:36px;color:var(--ink);font-size:14px}
#app .shell .topbar-menu {position:relative;min-width:0}
#app .shell .topbar-menu > summary {
  cursor:pointer; display:flex; align-items:center; gap:7px;
  list-style:none; padding:7px 11px; min-height:36px;
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); font-size:14px; font-weight:650;
}
#app .shell .topbar-account-name {max-width:min(160px,30vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .shell .topbar-menu > summary::-webkit-details-marker {display:none}
#app .shell .topbar-menu > summary::after {content:"▾";color:var(--muted);font-size:12px}
#app .shell .topbar-menu[open] > summary {background:var(--surface-hover);border-color:var(--green)}
#app .shell .topbar-menu-list {
  position:absolute; right:0; top:calc(100% + 6px); z-index:25;
  display:grid; gap:4px; width:max-content; min-width:196px; max-width:calc(100vw - 32px);
  padding:6px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); box-shadow:0 10px 26px #152b3b26;
}
#app .shell .topbar-menu-list .logout {display:block;width:100%;text-align:left;white-space:normal}
#app .shell .topbar-menu-list .logout:hover {background:var(--surface-hover)}
#app .shell .topbar-menu-list .theme-picker {padding:6px 9px;gap:6px;flex-wrap:wrap;max-width:100%}
#app .shell .topbar-menu-list .theme-picker select {min-height:34px}
#app .shell .workspace-tabs {padding:0 var(--workspace-inset);background:var(--surface-muted)}
#app .shell .workspace-tabs-list {padding:5px 2px;gap:5px}
#app .shell .workspace-tab {border-radius:5px}
#app .shell .workspace-tab-label {font-size:14px}
#app .shell .content {width:100%;max-width:none;min-width:0;margin:0;padding:24px var(--workspace-inset) 36px}
#app .shell .content > * {min-width:0}
#app .shell .page-heading {align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:0 0 18px}
#app .shell .page-heading h1 {margin:0;font-size:clamp(25px,2.1vw,32px);line-height:1.22;letter-spacing:0}
#app .shell .date-note {font-size:14px;color:var(--muted)}
#app .shell :is(.panel,.section-card) {border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:none}
#app .shell :is(.panel-head,.panel-foot) {flex-wrap:wrap;gap:10px;padding:13px 16px;background:var(--surface-muted)}
#app .shell :is(.panel-title,.section-card h2) {font-size:18px;line-height:1.4}
#app .shell :is(.actions,.table-actions,.row-actions) {flex-wrap:wrap;gap:6px}
#app .shell .tabs {display:flex;flex-wrap:wrap;gap:3px 16px}
#app .shell .tab {min-height:39px;padding:8px 4px;font-size:15px;color:var(--muted)}
#app .shell .tab[aria-selected=true] {color:var(--green);font-weight:700}
#app .shell :is(.button,.field input,.field select,.field textarea) {font-size:14px}
#app .shell .button {min-height:36px;line-height:1.35;white-space:normal}
#app .shell .button.small {min-height:32px;font-size:14px}
#app .shell :is(.field,.field label,.field-label,.field-hint,.row-sub,.selection-note,.setting-label) {font-size:14px;line-height:1.45}
#app .shell :is(.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea) {
  min-width:0;max-width:100%;min-height:38px;color:var(--ink);background:var(--surface);border-color:var(--border-strong);
}
#app .shell :is(.table-scroll,.table-wrap) {width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
#app .shell .data-table:not(.catalog-listing-table) {white-space:normal;color:var(--ink)}
#app .shell .data-table:not(.catalog-listing-table) :is(th,td) {
  padding:11px 13px;color:var(--ink);font-size:14px;line-height:1.45;vertical-align:middle;
  overflow:visible;text-overflow:clip;overflow-wrap:anywhere;border-color:var(--line-soft);
}
#app .shell .data-table:not(.catalog-listing-table) th {font-weight:700;background:var(--surface-muted)}
#app .shell .data-table:not(.catalog-listing-table) .row-sub {margin-top:4px;color:var(--muted)}
#app .shell :is(.pagination,.panel-foot,.catalog-pagination) {max-width:100%;flex-wrap:wrap}
#app .shell :is(a,button,input,select,textarea,summary):focus-visible {outline:2px solid var(--green);outline-offset:2px}
body:has(.shell) > dialog.modal {max-width:min(700px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border-radius:9px;color:var(--ink);font-size:15px}
body:has(.shell) > dialog.modal-wide {max-width:min(1120px,calc(100vw - 28px))}
body:has(.shell) > dialog.modal[open] {display:flex;flex-direction:column}
body:has(.shell) > dialog.modal :is(.modal-head,.modal-foot) {flex:none;padding:13px 17px;gap:8px}
body:has(.shell) > dialog.modal .modal-foot {flex-wrap:wrap}
body:has(.shell) > dialog.modal .modal-head h2 {min-width:0;font-size:20px;line-height:1.35;overflow-wrap:anywhere}
body:has(.shell) > dialog.modal .modal-body {min-height:0;max-height:none;padding:17px;overflow:auto;overscroll-behavior:contain}
body:has(.shell) > dialog.modal :is(.button,.field label,.field input,.field select,.field textarea,.field-hint) {font-size:14px}
body:has(.shell) > dialog.modal .button {min-height:34px;white-space:normal}
body:has(.shell) > dialog.modal .table-scroll {width:100%;overflow:auto}
@media (max-width: 900px) {
  #app .shell {display:block}
  #app .shell .sidebar {position:fixed;inset:0 auto 0 0;z-index:30;transform:translateX(-100%);visibility:hidden}
  #app .shell.nav-open .sidebar {transform:translateX(0);visibility:visible}
  #app .shell .mobile-menu {display:inline-grid;place-items:center;min-height:36px;min-width:38px;z-index:auto}
  #app .shell.nav-open .mobile-menu {position:fixed;left:calc(var(--rail-width) + 8px);top:10px;z-index:31}
  #app .shell .topbar {column-gap:8px}
  #app .shell .content {padding-top:18px}
}
@media (max-width: 560px) {
  #app .shell {--workspace-inset:12px}
  #app .shell .topbar-right {flex-basis:100%;justify-content:flex-end}
  #app .shell .page-heading h1 {font-size:24px}
  #app .shell .date-note {font-size:13px}
  body:has(.shell) > dialog.modal .modal-body {padding:12px}
}

body:has(.shell) > dialog.modal::backdrop {background:#172d3866;backdrop-filter:none}