:root {
  color-scheme: light;
  --bg: #eaf3fb;
  --panel: #ffffff;
  --panel-soft: #f4f8fc;
  --ink: #17202a;
  --muted: #6b7583;
  --line: #d6e5f2;
  --primary: #005eb8;
  --primary-dark: #003f7a;
  --accent: #b35b18;
  --danger: #b42318;
  --ok: #237a46;
  --warn: #9a6700;
  --sidebar-bg: linear-gradient(180deg, #005eb8 0%, #004b93 52%, #003f7a 100%);
  --sidebar-ink: #f4fbff;
  --sidebar-muted: #c8ddf0;
  --nav-bg: rgba(255,255,255,0.10);
  --nav-active: rgba(255,255,255,0.18);
  --nav-border: rgba(255,255,255,0.24);
  --button-secondary-bg: #e8eef2;
  --button-secondary-ink: #26323a;
  --shadow: 0 14px 32px rgba(0, 63, 122, 0.09);
  --theme-bg-image: url('./assets/themes/theme-default.svg');
  --theme-bg-opacity: .16;
  --theme-panel-alpha: .94;
  --theme-soft-alpha: .88;
  --theme-glass: rgba(255,255,255,.88);
  --theme-card-glow: rgba(47,143,232,.12);
}

html[data-theme="tech"] {
  color-scheme: light;
  --bg: #e7f4ff;
  --panel: #fbfdff;
  --panel-soft: #eff8ff;
  --ink: #102033;
  --muted: #5c6f82;
  --line: #bfd8ef;
  --primary: #0b73d9;
  --primary-dark: #063f8f;
  --accent: #00a0ff;
  --sidebar-bg: linear-gradient(180deg, #096ed2 0%, #0759b3 48%, #053875 100%);
  --sidebar-ink: #f5fbff;
  --sidebar-muted: #cce8ff;
  --nav-bg: rgba(255,255,255,0.12);
  --nav-active: rgba(89,190,255,0.30);
  --nav-border: rgba(162,218,255,0.36);
  --button-secondary-bg: #e6f2fb;
  --button-secondary-ink: #17476f;
  --shadow: 0 16px 34px rgba(11, 115, 217, 0.15);
  --theme-bg-image: url('./assets/themes/theme-tech.svg');
  --theme-bg-opacity: .18;
  --theme-panel-alpha: .90;
  --theme-soft-alpha: .82;
  --theme-glass: rgba(248,252,255,.86);
  --theme-card-glow: rgba(74,222,255,.18);
}
html[data-theme="cute"] {
  color-scheme: light;
  --bg: #fff1f7;
  --panel: #fffdfd;
  --panel-soft: #fff7fb;
  --ink: #3d2633;
  --muted: #8a6675;
  --line: #f2cddd;
  --primary: #df6fa3;
  --primary-dark: #b94e80;
  --accent: #7cb7e8;
  --sidebar-bg: linear-gradient(180deg, #f092bd 0%, #df6fa3 52%, #b94e80 100%);
  --sidebar-ink: #fffafd;
  --sidebar-muted: #ffe5f0;
  --nav-bg: rgba(255,255,255,0.18);
  --nav-active: rgba(255,255,255,0.34);
  --nav-border: rgba(255,255,255,0.42);
  --button-secondary-bg: #f8e8f0;
  --button-secondary-ink: #7a3659;
  --shadow: 0 14px 30px rgba(223, 111, 163, 0.16);
  --theme-bg-image: url('./assets/themes/theme-cute.svg');
  --theme-bg-opacity: .18;
  --theme-panel-alpha: .93;
  --theme-soft-alpha: .86;
  --theme-glass: rgba(255,253,253,.88);
  --theme-card-glow: rgba(223,111,163,.14);
}
html[data-theme="simple"] {
  color-scheme: light;
  --bg: #f3f6f8;
  --panel: #ffffff;
  --panel-soft: #f7f9fb;
  --ink: #1f2933;
  --muted: #66727f;
  --line: #d9e1e8;
  --primary: #3c73a8;
  --primary-dark: #2a527a;
  --accent: #687d92;
  --sidebar-bg: linear-gradient(180deg, #4d6f91 0%, #3d5d7d 55%, #2d455d 100%);
  --sidebar-ink: #f8fbfd;
  --sidebar-muted: #d9e4ec;
  --nav-bg: rgba(255,255,255,0.10);
  --nav-active: rgba(255,255,255,0.20);
  --nav-border: rgba(255,255,255,0.30);
  --button-secondary-bg: #e9eef2;
  --button-secondary-ink: #2f3c47;
  --shadow: 0 12px 28px rgba(44, 62, 80, 0.10);
  --theme-bg-image: url('./assets/themes/theme-simple.svg');
  --theme-bg-opacity: .14;
  --theme-panel-alpha: .95;
  --theme-soft-alpha: .88;
  --theme-glass: rgba(255,255,255,.90);
  --theme-card-glow: rgba(60,115,168,.10);
}
html[data-theme="eye"] {
  color-scheme: light;
  --bg: #eef8f2;
  --panel: #ffffff;
  --panel-soft: #f5fbf7;
  --ink: #173026;
  --muted: #62766b;
  --line: #cfe7d8;
  --primary: #2f8f68;
  --primary-dark: #1f654a;
  --accent: #3b82c4;
  --sidebar-bg: linear-gradient(180deg, #39a77a 0%, #2f8f68 52%, #1f654a 100%);
  --sidebar-ink: #f6fff9;
  --sidebar-muted: #d7f1df;
  --nav-bg: rgba(255,255,255,0.14);
  --nav-active: rgba(255,255,255,0.26);
  --nav-border: rgba(255,255,255,0.34);
  --button-secondary-bg: #e8f3ec;
  --button-secondary-ink: #254d39;
  --shadow: 0 14px 30px rgba(47, 143, 104, 0.12);
  --theme-bg-image: url('./assets/themes/theme-eye.svg');
  --theme-bg-opacity: .17;
  --theme-panel-alpha: .94;
  --theme-soft-alpha: .88;
  --theme-glass: rgba(255,255,255,.89);
  --theme-card-glow: rgba(47,143,104,.13);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

.mobile-month-list {
  display: none;
}

#orders .mobile-month-list + .monthly-groups,
#workorders .mobile-month-list + .monthly-groups {
  display: block;
}

.month-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
  background: var(--panel);
}

.month-group-head,
.mobile-collapse-head {
  width: 100%;
  border: 0;
  background: var(--panel-soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  text-align: left;
}

.month-group-head b,
.mobile-collapse-head b {
  color: var(--primary);
  font-size: 13px;
}

.month-group-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.mobile-list-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mobile-card-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 13px;
}

.mobile-card-check.disabled {
  opacity: 0.55;
}

.mobile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.mobile-card-actions button {
  min-height: 36px;
  padding: 8px 10px;
}

.mobile-list-card span,
.mobile-list-card small {
  color: var(--muted);
}

.mobile-list-card .route-progress {
  margin-top: 8px;
  padding: 4px 2px 2px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.mobile-list-card .route-progress .route-node {
  min-width: 52px;
}

.mobile-list-card .route-progress .route-node i {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.mobile-list-card .route-progress .route-node b {
  max-width: 58px;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mobile-collapse {
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
}

.mobile-collapse-body {
  padding: 8px;
}

.purchase-summary .compact-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(0, 94, 184, 0.96), rgba(0, 63, 122, 0.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 58px);
}

.auth-card {
  width: min(440px, 100%);
  background: var(--panel);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(10, 38, 70, 0.28);
  display: grid;
  gap: 14px;
}

.auth-card h1 {
  font-size: 28px;
  line-height: 1.18;
}

.auth-card h1 span,
.auth-card h1 small {
  display: block;
}

.auth-card h1 small {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
}

.app-footer-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.shell-footer {
  position: fixed;
  left: 248px;
  right: 0;
  bottom: 4px;
  pointer-events: none;
}

.auth-card p {
  color: var(--muted);
  line-height: 1.65;
}

.login-accounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.login-accounts div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
}

.login-accounts span,
.login-accounts small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.login-accounts strong {
  display: block;
  margin: 4px 0;
  color: var(--primary-dark);
  font-size: 18px;
}

.login-worker-only .login-accounts,
.login-admin-only .login-accounts {
  grid-template-columns: 1fr;
}

.login-worker-only .admin-account,
.login-admin-only .worker-account {
  display: none;
}

.auth-card label span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.full { width: 100%; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mark {
  width: 48px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--primary-dark);
  font-weight: 800;
  border-radius: 8px;
}

.brand strong {
  display: block;
  max-width: 170px;
  line-height: 1.2;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand span, .topbar p, .login-box label { color: var(--sidebar-muted); font-size: 13px; display: block; margin-top: 4px; }
nav {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.branch-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: var(--nav-bg);
}

.branch-switch button {
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-ink);
  font-size: 12px;
}

.branch-switch button.active {
  background: var(--panel);
  color: var(--primary-dark);
}

button, select, input, textarea {
  font: inherit;
}

button {
  border: 0;
  background: var(--primary);
  color: #fff;
  min-height: 40px;
  border-radius: 7px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
}

button.secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-ink);
}

button.ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--line);
}

button.danger { background: var(--danger); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  color: var(--sidebar-ink);
  text-align: left;
  border: 1px solid transparent;
}
.nav-order-tools {
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
nav button:hover .nav-order-tools,
nav button.active .nav-order-tools {
  opacity: 1;
}
.nav-order-tools i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  flex: 0 0 auto;
}
nav button.active, nav button:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}

.login-box {
  margin-top: auto;
  background: rgba(255,255,255,0.11);
  border-radius: 8px;
  padding: 12px;
}

select, input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 38px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
}
.smart-entry {
  position: relative;
  width: 100%;
}
.smart-entry > input {
  padding-right: 42px;
}
.smart-entry-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  width: 38px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
}
.smart-entry-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgba(12, 50, 82, .20);
}
.smart-entry-menu[hidden] { display: none; }
.smart-entry-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.smart-entry-menu button:hover,
.smart-entry-menu button:focus {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
}
.smart-entry-menu .smart-entry-manual {
  border-top: 1px solid var(--line);
  color: var(--primary);
}

.login-box select { margin-top: 8px; }

main {
  margin-left: 248px;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: 0; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.message-bell-host {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.message-bell {
  position: relative;
  min-width: 78px;
  padding-inline: 12px;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.message-bell span {
  position: static;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d83b3b;
  color: var(--sidebar-ink);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}

.message-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(420px, calc(100vw - 28px));
  max-height: min(76vh, 620px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(10, 38, 70, 0.22);
}

.message-menu-head,
.reminder-menu-section h3,
.reminder-menu-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.reminder-menu-section summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.reminder-menu-section summary::-webkit-details-marker {
  display: none;
}

.reminder-menu-section summary::before {
  content: "\25B6";
  order: 3;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.reminder-menu-section[open] summary::before {
  content: "\25BC";
}

.reminder-menu-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.reminder-menu-section .reminder-detail-list {
  max-height: min(34vh, 260px);
  overflow: auto;
  padding-right: 4px;
}

.reminder-menu-section + .reminder-menu-section {
  margin-top: 10px;
}
.view { display: none; }
.view.active { display: grid; gap: 18px; }

.command-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 8px;
  color: var(--sidebar-ink);
  background:
    linear-gradient(135deg, rgba(0, 94, 184, 0.97), rgba(0, 63, 122, 0.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 58px);
  box-shadow: 0 18px 46px rgba(16, 55, 65, 0.24);
  min-height: 150px;
}

.command-hero h2 {
  font-size: 32px;
  margin: 6px 0 8px;
}

.command-hero p {
  color: #d7e9ed;
  max-width: 680px;
}

.eyebrow {
  display: inline-block;
  color: #89c6ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.executive-stats {
  margin-top: -34px;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}

.jobshop-stats {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin-bottom: 16px;
}

.stat, .panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.stat {
  padding: 16px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.stat span { color: var(--muted); font-size: 13px; }
.stat strong { display: block; font-size: 28px; margin-top: 8px; }
.executive-stats .stat {
  border: 0;
  box-shadow: 0 16px 34px rgba(22, 42, 54, 0.13);
}
.executive-stats .stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--primary);
}
.kpi-2::after { background: #2f80ed !important; }
.kpi-3::after { background: #00a0ff !important; }
.kpi-4::after { background: #7aa7d9 !important; }
.kpi-5::after { background: #1a66d9 !important; }
.kpi-6::after { background: #5ca9ff !important; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.35fr);
  gap: 18px;
}

.panel { padding: 16px; overflow: hidden; }
.command-panel, .overview-grid .panel {
  border: 0;
  box-shadow: 0 14px 36px rgba(28, 44, 56, 0.1);
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.chart-panel {
  min-height: 320px;
}

.wide-chart {
  overflow: hidden;
}

.columns-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 240px;
}

.column-item {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-items: end;
}

.column-value {
  font-size: 12px;
  color: var(--primary-dark);
  min-height: 16px;
}

.column-track {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, #f8fbff, #edf4fb);
  border: 1px solid #dce8f5;
  border-radius: 8px 8px 6px 6px;
  padding: 8px 8px 0;
}

.column-track i {
  width: 72%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #66a9ff, #005eb8);
  box-shadow: 0 10px 18px rgba(0, 94, 184, 0.18);
}

.column-item span {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.settlement-year-groups {
  margin-top: 12px;
}

.settlement-year-groups .table-scroll-control {
  position: static;
  box-shadow: none;
}

.settlement-cost-actions {
  min-width: 220px;
  width: auto;
}

.settlement-cost-actions .inline-actions {
  gap: 4px;
}

.settlement-cost-actions .inline-actions button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.1;
}

.settlement-combo-chart {
  min-height: 360px;
}

.settlement-chart-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.settlement-combo-chart svg {
  min-width: 860px;
  width: 100%;
  height: auto;
  display: block;
}

.settlement-axis,
.settlement-gridline {
  stroke: #cad8e6;
  stroke-width: 1;
}

.settlement-gridline {
  stroke-dasharray: 4 6;
}

.settlement-combo-bar {
  rx: 4;
}

.settlement-combo-bar.output {
  fill: #2f80ed;
}

.settlement-combo-bar.totalCost {
  fill: #e5483b;
}

.settlement-combo-bar.saving {
  fill: #7c3aed;
}

.settlement-saving-line {
  fill: none;
  stroke: #0f8f5f;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.settlement-rate-point circle {
  fill: #0f8f5f;
  stroke: white;
  stroke-width: 2;
}

.settlement-rate-point text,
.settlement-axis-label {
  font-size: 12px;
  fill: var(--muted);
  text-anchor: middle;
}

.line-chart {
  width: 100%;
  height: auto;
  display: block;
}

.grid-lines line {
  stroke: #d7e4f0;
  stroke-width: 1;
}

.trend {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area {
  fill: url(#lineFill);
}

.point circle {
  fill: white;
  stroke: var(--primary);
  stroke-width: 2.5;
}

.point text {
  fill: var(--primary-dark);
  font-size: 11px;
  text-anchor: middle;
}

.point .axis-label {
  fill: var(--muted);
  font-size: 10px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.panel-head .toolbar,
.directory-actions,
.directory-toolbar-row,
.maintenance-toolbar,
.workorder-maintenance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-head .toolbar,
.directory-actions {
  justify-content: flex-end;
}

.directory-toolbar-row,
.maintenance-toolbar,
.workorder-maintenance-toolbar {
  justify-content: flex-start;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.directory-toolbar-row .muted,
.maintenance-toolbar .muted,
.workorder-maintenance-toolbar .muted {
  flex: 1 1 180px;
}

.sticky-action-toolbar {
  position: sticky;
  top: 8px;
  z-index: 18;
  box-shadow: 0 8px 18px rgba(15, 45, 80, 0.08);
}

.sticky-panel-head {
  position: sticky;
  top: 0;
  z-index: 32;
  padding: 10px 0;
  background: rgba(244, 249, 253, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 18px rgba(15, 45, 80, 0.08);
}

.floating-selection-bar {
  position: fixed;
  top: 76px;
  right: 24px;
  left: 280px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #b8d8f2;
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.96);
  box-shadow: 0 12px 26px rgba(15, 45, 80, 0.16);
  backdrop-filter: blur(8px);
}

.floating-selection-bar strong {
  margin-right: auto;
  color: var(--ink);
}

.month-selection-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

@media (max-width: 720px) {
  .floating-selection-bar {
    left: 10px;
    right: 10px;
    top: 64px;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

.reminder-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #cfe4f7;
  border-radius: 8px;
  background: #f1f8ff;
}
.reminder-panel strong {
  color: var(--primary-dark);
}
.reminder-panel span {
  color: var(--muted);
  flex: 1 1 auto;
}
.security-reminder {
  border-color: #ffd79a;
  background: #fff8e8;
}
.security-reminder strong {
  color: #8a4b00;
}
.reminder-panel > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.reminder-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.reminder-detail-list button {
  min-height: 0;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  text-align: left;
  font-weight: 600;
}
.reminder-detail-list b,
.reminder-detail-list em,
.reminder-detail-list small {
  display: block;
  overflow-wrap: anywhere;
}
.reminder-detail-list em {
  color: var(--primary);
  font-style: normal;
  font-size: 12px;
}
.reminder-detail-list small,
.reminder-panel small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.progress-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 156px;
}

.ring {
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, white 0 55%, transparent 56%),
    conic-gradient(var(--primary) calc(var(--pct) * 1%), #e5ebef 0);
  box-shadow: inset 0 0 0 1px rgba(22, 107, 122, 0.12), 0 10px 24px rgba(22, 107, 122, 0.14);
}

.ring span {
  font-size: 27px;
  font-weight: 800;
  color: var(--primary-dark);
}

.progress-card strong {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.mini-metrics span {
  background: #f5f8fa;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.mini-metrics strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-top: 4px;
}

.bar-list {
  display: grid;
  gap: 11px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.9fr) minmax(140px, 1.8fr) minmax(58px, auto);
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 12px;
  background: #e8eef2;
  border-radius: 999px;
  overflow: hidden;
}

.bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #4f9f78);
}

.bar-row strong {
  text-align: right;
  font-size: 13px;
}

.table-wrap { overflow-x: auto; }
.table-scroll-control {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 38px minmax(220px, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(0, 63, 122, 0.08);
}
body.table-scroll-floating {
  padding-bottom: 76px;
}
.table-scroll-control.floating-table-scroll-active {
  position: fixed;
  left: calc(248px + 18px);
  right: 18px;
  top: auto;
  bottom: 14px;
  z-index: 120;
  margin: 0;
  box-shadow: 0 16px 38px rgba(0, 63, 122, 0.18);
}
.table-scroll-control span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.table-scroll-control input[type="range"] {
  width: 100%;
  min-height: 28px;
}
.table-scroll-control button {
  width: 38px;
  min-width: 38px;
  height: 32px;
  padding: 0;
}
table { width: max-content; min-width: 100%; border-collapse: collapse; }
.wide-scroll-table {
  table-layout: auto;
}
th, td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
}
th { color: var(--muted); background: #f8fafb; font-weight: 700; }
td small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.narrow-col { width: 44px; }
.mini-icon {
  width: 30px;
  min-height: 30px;
  font-size: 18px;
}
.detail-row td {
  background: var(--panel-soft);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.detail-grid div {
  padding: 10px;
  border: 1px solid #dbe9f6;
  border-radius: 7px;
  background: var(--panel);
}
.detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}
.detail-grid strong {
  overflow-wrap: anywhere;
}
.detail-split {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 0.75fr);
  gap: 14px;
}
.column-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.column-config label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbff;
}
.column-config input {
  width: auto;
  min-width: 0;
}

.sort-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  padding: 0;
  min-height: 0;
  font-weight: 800;
  text-align: left;
  white-space: normal;
}

.sort-btn:hover {
  color: var(--primary);
  background: transparent;
}

.selected-row td {
  background: #eef8fb;
}

.bulk-preview {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

.operation-progress {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #cfe4f7;
  border-radius: 8px;
  background: #f1f8ff;
  color: var(--primary-dark);
  font-weight: 700;
}

.operation-progress[hidden] {
  display: none;
}

.operation-progress i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #2ea8df, var(--primary));
  background-size: 200% 100%;
  animation: progress-stripe 1.1s linear infinite;
}

.submit-progress {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(47,143,232,.22);
  border-radius: 8px;
  background: rgba(239,248,255,.94);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}
.submit-progress span {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(47,143,232,.14);
  position: relative;
  margin-bottom: 6px;
}
.submit-progress span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: submit-progress-slide 1.05s linear infinite;
}
.submit-progress b { display: block; }
button.submitting {
  opacity: .78;
  cursor: progress;
}

.global-progress-toast {
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 18px;
  transform: translate(-50%, -120%);
  width: min(520px, calc(100vw - 28px));
  padding: 14px 16px 12px;
  border: 1px solid rgba(47,143,232,.35);
  border-radius: 10px;
  background: rgba(245,251,255,.98);
  color: var(--primary-dark);
  box-shadow: 0 18px 42px rgba(5,42,84,.22);
  display: grid;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.global-progress-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.global-progress-toast strong {
  font-size: 15px;
}
.global-progress-toast span {
  color: var(--muted);
  font-size: 13px;
}
.global-progress-toast i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #56c3ff, var(--primary));
  background-size: 220% 100%;
  animation: progress-stripe 1s linear infinite;
}
@keyframes submit-progress-slide {
  to { transform: translateX(365%); }
}

.purchase-import-progress i {
  width: var(--progress, 0%);
  max-width: 100%;
}

@keyframes progress-stripe {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf3f6;
  color: #28404b;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.badge.ok { background: #e7f5ec; color: var(--ok); }
.badge.warn { background: #fff3d8; color: var(--warn); }
.badge.danger { background: #fde8e5; color: var(--danger); }
.badge.info { background: #e2f3f6; color: var(--primary-dark); }

.route-progress {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: max(360px, calc(var(--route-steps, 1) * 72px));
  overflow: visible;
  padding: 3px 0;
}
.route-node {
  display: grid;
  justify-items: center;
  gap: 4px;
  position: relative;
  min-width: 54px;
  color: var(--muted);
}
.route-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 19px);
  width: 24px;
  height: 2px;
  background: #c7d8e8;
}
.route-node i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #c7d8e8;
  background: var(--panel);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}
.route-node b {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.route-node.done i {
  border-color: #12b981;
  color: #07845b;
  background: #e8fff6;
  font-size: 18px;
}
.route-node.active i {
  border-color: var(--primary);
  color: var(--primary);
  background: #eef7ff;
}
.route-node.danger i {
  border-color: var(--danger);
  color: var(--danger);
  background: #fff0ef;
  font-size: 18px;
}
.route-node.done:not(:last-child)::after { background: #12b981; }
.route-progress.compact {
  min-width: max(340px, calc(var(--route-steps, 1) * 64px));
}
.route-stack {
  display: grid;
  gap: 8px;
}
.route-stack-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid #dbe9f6;
  border-radius: 7px;
  background: var(--panel);
}
.route-stack-row span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #edf4fb;
  color: var(--muted);
  font-weight: 900;
}
.route-stack-row.done span { background: #e8fff6; color: #07845b; }
.route-stack-row.active span { background: #eef7ff; color: var(--primary); }
.route-stack-row.danger span { background: #fff0ef; color: var(--danger); }
.route-stack-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.bigscreen {
  min-height: calc(100vh - 48px);
  margin: -4px;
  padding: 20px;
  border-radius: 8px;
  color: #e8f5ff;
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 160, 255, 0.28), transparent 28%),
    linear-gradient(135deg, #031c45, #003f7a 56%, #03244d);
  box-shadow: 0 22px 52px rgba(0, 38, 82, 0.25);
}
.screen-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.screen-head span {
  color: #72c7ff;
  font-weight: 900;
  letter-spacing: 0;
}
.screen-head h2 {
  font-size: 34px;
  margin-top: 4px;
}
.screen-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.screen-kpi,
.screen-card {
  background: rgba(3, 30, 68, 0.78);
  border: 1px solid rgba(130, 202, 255, 0.22);
  border-radius: 8px;
  box-shadow: inset 0 0 28px rgba(0, 160, 255, 0.08);
}
.screen-kpi {
  padding: 14px;
}
.screen-kpi span {
  display: block;
  color: #9ed2ff;
  font-size: 13px;
}
.screen-kpi strong {
  display: block;
  margin-top: 6px;
  color: var(--sidebar-ink);
  font-size: 30px;
}
.screen-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 14px;
}
.screen-card {
  padding: 14px;
}
.screen-card.wide {
  grid-column: span 1;
}
.screen-card h3 {
  color: var(--sidebar-ink);
  margin-bottom: 12px;
}
.screen-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.screen-list-head h3 {
  margin-bottom: 0;
}
.screen-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.screen-list-actions button {
  min-height: 32px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.14);
  color: #e8f5ff;
  border: 1px solid rgba(130, 202, 255, 0.28);
}
.screen-list-card.collapsed .screen-table {
  display: none;
}
.screen-chart,
.screen-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #e8f5ff;
}
.bigscreen .panel-head h2,
.bigscreen .column-value,
.bigscreen .point text,
.bigscreen .bar-row strong {
  color: #e8f5ff;
}
.bigscreen .muted,
.bigscreen .column-item span,
.bigscreen .axis-label,
.bigscreen .bar-row span {
  color: #a9cce8;
}
.bigscreen .column-track,
.bigscreen .bar-track {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
}
.screen-table {
  display: grid;
  gap: 8px;
}
.screen-table.scrollable {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.screen-table.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.screen-table.scrollable::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}
.screen-table.scrollable::-webkit-scrollbar-thumb {
  background: rgba(190, 225, 255, 0.7);
  border-radius: 999px;
}
.screen-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.2fr) minmax(260px, 2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(130, 202, 255, 0.18);
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
}
.value-screen .screen-row {
  grid-template-columns: minmax(110px, 0.8fr) minmax(180px, 1.3fr) 110px 100px auto;
}
.screen-row span {
  color: #cfe6f8;
}
.danger-text {
  color: #ffaaa4 !important;
  font-weight: 900;
}
.donut {
  width: min(220px, 70vw);
  aspect-ratio: 1;
  margin: 8px auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #062956 0 54%, transparent 55%),
    conic-gradient(var(--segments));
}
.donut span {
  color: var(--sidebar-ink);
  font-size: 30px;
  font-weight: 900;
}
.screen-legend {
  display: grid;
  gap: 7px;
}
.screen-legend span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #cfe6f8;
}
.screen-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.board-panel {
  background: #f8fafb;
}

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
}
.lane {
  background: #ffffff;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 12px;
  min-height: 220px;
  box-shadow: inset 0 3px 0 var(--primary);
}
.lane.collapsed {
  min-height: 0;
}
.lane-warn { box-shadow: inset 0 3px 0 var(--warn); }
.lane-ok { box-shadow: inset 0 3px 0 var(--ok); }
.lane-danger { box-shadow: inset 0 3px 0 var(--danger); }
.lane-toggle {
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #33414a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
}
.lane-title {
  font-size: 16px;
  font-weight: 800;
}
.lane-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  border-radius: 999px;
  background: #eef3f6;
  color: #26343d;
  font-size: 12px;
  font-weight: 800;
}
.lane.collapsed .lane-toggle {
  margin-bottom: 0;
}
.lane.collapsed .lane-body {
  display: none;
}
.card {
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px rgba(28, 44, 56, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(28, 44, 56, 0.12);
}
.card small { color: var(--muted); display: block; margin-top: 4px; }
.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.wo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wo-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  background: #f5f8fa;
  border-radius: 7px;
  color: #33414a;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.full { grid-column: 1 / -1; }

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(860px, calc(100vw - 28px));
}

dialog.modal-max {
  width: min(1280px, calc(100vw - 24px));
}

dialog.modal-max {
  height: calc(100vh - 24px);
}

dialog::backdrop { background: rgba(15, 25, 32, 0.48); }
.modal-card {
  background: var(--panel);
  border-radius: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: min(86vh, 920px);
  overflow: auto;
}

dialog.modal-max .modal-card {
  max-height: calc(100vh - 28px);
  height: 100%;
}

.modal-head {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding: 0 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.modal-head-actions {
  display: flex;
  gap: 8px;
}
.icon {
  width: 36px;
  min-height: 36px;
  padding: 0;
  background: #eef2f4;
  color: #1f2a31;
  font-size: 22px;
}

.modal-size-btn {
  width: auto;
  min-width: 64px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
}
.qr {
  width: 132px;
  height: 132px;
  border: 8px solid white;
  background:
    linear-gradient(90deg, #111 10px, transparent 10px 18px, #111 18px 26px, transparent 26px),
    linear-gradient(#111 10px, transparent 10px 18px, #111 18px 26px, transparent 26px),
    repeating-linear-gradient(45deg, #111 0 8px, #fff 8px 14px);
  background-size: 44px 44px, 44px 44px, 22px 22px;
  box-shadow: inset 0 0 0 1px #111;
}
.qr-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qr-img {
  width: 260px;
  height: 260px;
  border: 12px solid white;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(28, 44, 56, 0.1);
}
.qr-img-large {
  width: min(420px, calc(100vw - 80px));
  height: min(420px, calc(100vw - 80px));
}
.qr-card-large {
  justify-content: center;
}
.qr-link {
  max-width: 360px;
  overflow-wrap: anywhere;
  margin-top: 8px;
}
.system-qr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.system-qr-modal-grid {
  max-height: min(68vh, 680px);
  overflow: auto;
  padding-right: 4px;
}
.system-qr-card {
  align-items: flex-start;
  margin-bottom: 0;
}
.system-qr-card .qr-img {
  width: 150px;
  height: 150px;
}
.system-qr-card .inline-actions {
  margin-top: 10px;
}
.muted { color: var(--muted); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.materials-layout {
  display: grid;
  gap: 18px;
  align-items: start;
}

.materials-layout.qr-hidden > .panel:last-child {
  display: none;
}

.materials-layout > .panel {
  min-width: 0;
  resize: horizontal;
  overflow: auto;
}

.materials-layout > .panel:last-child .qr-img {
  width: var(--material-qr-size, 220px);
  height: var(--material-qr-size, 220px);
}

.materials-layout > .panel:last-child .qr-card {
  align-items: center;
}

.range-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.range-tool input {
  width: 150px;
}

.list-toolbar {
  align-items: center;
}

.list-window-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.list-window-tool select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 0 8px;
  font: inherit;
}

.list-search {
  max-width: 360px;
  min-width: 220px;
}

.monthly-groups {
  display: grid;
  gap: 12px;
}

.month-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.month-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.inline-actions button {
  min-height: 32px;
  padding: 6px 10px;
  min-width: 86px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.row-action-menu {
  position: relative;
  display: inline-block;
  min-width: 74px;
}

.row-action-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #eef5fb;
  color: var(--primary-dark);
  font-weight: 800;
}

.row-action-menu summary::-webkit-details-marker {
  display: none;
}

.row-action-menu summary::after {
  content: "▼";
  font-size: 10px;
  color: var(--muted);
}

.row-action-menu[open] summary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.row-action-menu[open] summary::after {
  color: #fff;
}

.row-action-panel {
  position: absolute;
  z-index: 40;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 6px;
  min-width: 128px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0, 63, 122, 0.16);
}

.row-action-panel button {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 7px 10px;
  white-space: nowrap;
}

.action-cell {
  min-width: 86px;
  width: auto;
}

.sample-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sample-card-width, 420px)), 1fr));
  gap: 14px;
  margin-top: 16px;
}

.sample-layout-vertical {
  grid-template-columns: 1fr;
}

.sample-layout-large {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--sample-card-width, 520px), 520px)), 1fr));
}

.sample-layout-compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.sample-project-card {
  display: grid;
  gap: 12px;
  position: relative;
  min-width: 0;
  max-height: 620px;
  overflow: auto;
}

.sample-project-card * {
  min-width: 0;
}

.sample-card-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}

.sample-card-resizer::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 45%;
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: #c8ddec;
}

.sample-project-card h3 {
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sample-dashboard-panel .panel-head {
  align-items: flex-start;
}

.sample-dashboard-stats {
  margin-top: 8px;
  padding: 0;
  grid-template-columns: repeat(5, minmax(108px, 1fr));
}

.sample-dashboard-stats .stat {
  min-height: 72px;
  padding: 10px 14px;
}

.sample-dashboard-stats .stat strong {
  font-size: 24px;
  margin-top: 5px;
}

.sample-board-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.segmented {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.segmented button.active {
  background: var(--primary);
  color: var(--sidebar-ink);
}

.sample-card-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.sample-card-size input {
  width: 180px;
  min-height: 32px;
}

.sample-stage-line {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.sample-stage-line span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 70px;
  color: var(--muted);
  font-size: 12px;
}

.sample-stage-line span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 20px);
  width: 34px;
  height: 2px;
  background: #c8ddec;
}

.sample-stage-line i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #c8ddec;
  background:
    conic-gradient(var(--primary) calc(var(--pct, 0) * 1%), #edf4fb 0);
}

.sample-stage-line i::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: inherit;
  background: var(--panel);
}

.sample-stage-line b {
  max-width: 112px;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 12px;
  line-height: 1.25;
}

.sample-stage-line.large {
  padding: 14px 4px;
  margin: 10px 0;
  border: 1px solid #dbe9f6;
  border-radius: 8px;
  background: #f6fbff;
}

.sample-stage-line.large span {
  min-width: 112px;
}

.sample-stage-line.large i {
  width: 46px;
  height: 46px;
}

.sample-stage-line.large i::after {
  width: 28px;
  height: 28px;
}

.sample-stage-line.large small {
  color: var(--primary-dark);
  font-weight: 800;
}

.progress-mini {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eff8;
}

.progress-mini i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #00a0ff);
}

.sample-machining-progress {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe9f6;
  border-radius: 8px;
  background: #f7fbff;
}

.sample-all-stage-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid #dbe9f6;
  border-radius: 8px;
  background: #f7fbff;
}

.sample-all-stage-progress section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sample-all-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--primary-dark);
}

.sample-all-stage-progress i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2edf7;
}

.sample-all-stage-progress i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #005eb8, #00a0ff);
}

.sample-all-stage-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sample-all-stage-items span {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-all-stage-items b {
  color: var(--primary);
}

.sample-workorder-list {
  display: grid;
  gap: 12px;
}

.sample-workorder-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfe4f5;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(0, 63, 122, 0.07);
}

.sample-workorder-head,
.sample-workorder-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sample-workorder-head small,
.sample-workorder-meta {
  color: var(--muted);
}

.sample-operation-line {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 8px;
}

.sample-op-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 76px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  z-index: 1;
}

.sample-op-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 24px);
  width: 28px;
  height: 2px;
  background: #c8ddec;
  pointer-events: none;
}

.sample-op-node i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #c8ddec;
  background: var(--panel);
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.sample-op-node b {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.sample-op-node small {
  font-size: 11px;
}

.sample-op-node.active i {
  border-color: var(--primary);
  color: var(--primary);
  background: #eef7ff;
}

.sample-op-node.done i {
  border-color: #12b981;
  color: #07845b;
  background: #e8fff6;
  font-size: 18px;
}

.sample-op-node.done:not(:last-child)::after {
  background: #12b981;
}

.sample-op-node.danger i {
  border-color: var(--danger);
  color: var(--danger);
  background: #fff0ef;
}

.sample-route-text {
  line-height: 1.55;
}

.sample-operation-editor {
  display: grid;
  gap: 10px;
}

.sample-operation-edit {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.8fr) minmax(110px, 0.8fr) minmax(96px, 0.7fr) 80px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbff;
}

.sample-entry-panel {
  min-width: 0;
}

.sample-qr-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sample-qr-grid .system-qr-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: start;
}

.sample-qr-grid .qr-link {
  max-width: 100%;
}

.sample-op-qr-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.sample-op-qr-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
}

.sample-op-qr-card .qr-img {
  width: 120px;
  height: 120px;
  border-width: 8px;
}

.sample-machining-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--primary-dark);
}

.sample-machining-progress-head span {
  color: var(--muted);
  font-size: 12px;
}

.sample-machining-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.sample-part-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sample-part-progress div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.sample-part-progress strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-part-progress span {
  color: var(--primary);
  font-weight: 900;
}

.sample-part-progress i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2edf7;
}

.sample-part-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #005eb8, #00a0ff);
}

.sample-part-progress small {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sample-stage-list,
.sample-route-editor,
.sample-task-edit-list {
  display: grid;
  gap: 12px;
}

.sample-stage-card,
.sample-editor-stage {
  border: 1px solid #dbe9f6;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.sample-editor-head,
.sample-task-edit {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.sample-task-edit {
  grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 0.55fr) minmax(110px, 0.8fr) minmax(220px, 1.6fr) minmax(180px, 1.2fr) auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.sample-machining-stage {
  background: linear-gradient(180deg, #f7fbff, #eef7ff);
  border-color: #c7e0f5;
}

.sample-machining-wrap table {
  min-width: 1180px;
}

.sample-route-cell {
  min-width: 260px;
  line-height: 1.55;
}

.sample-file-list {
  display: grid;
  gap: 5px;
  min-width: 150px;
}

.sample-file-list a {
  display: block;
  color: var(--primary);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sample-file-list small {
  color: var(--muted);
  font-weight: 400;
}

.sample-upload-inline {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbff;
}

.scan-shell {
  margin: 0;
  padding: 18px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #eef4fb;
}

.scan-card {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid #d9e7f5;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 63, 122, 0.16);
  padding: 20px;
}

.delivery-receive-card {
  width: min(620px, 100%);
}

.delivery-search-form {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.delivery-receive-results {
  margin-top: 12px;
}

.delivery-receive-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.delivery-receive-rules select {
  min-height: 40px;
}

.delivery-route-progress {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 10px;
  padding-top: 8px;
  overflow-x: auto;
}

.delivery-route-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 68px;
  color: var(--muted);
  font-size: 12px;
}

.delivery-route-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  border-top: 2px solid var(--line);
}

.delivery-route-node i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #c7d9eb;
  border-radius: 50%;
  background: var(--panel);
  color: var(--primary);
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
}

.delivery-route-node.done i,
.delivery-route-node.active i {
  border-color: var(--primary);
}

.delivery-route-node.done i {
  background: var(--primary);
  color: #fff;
}

.delivery-route-node b {
  max-width: 72px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.delivery-route-node em {
  max-width: 76px;
  color: #315f86;
  font-style: normal;
  font-size: 9px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.delivery-route-node small {
  max-width: 90px;
  color: var(--muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.scan-head span {
  color: var(--primary);
  font-weight: 800;
}

.scan-card h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.scan-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.scan-info div {
  background: var(--panel-soft);
  border: 1px solid #dbe9f6;
  border-radius: 7px;
  padding: 10px;
}

.scan-info span,
.scan-card label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.scan-info strong {
  font-size: 15px;
}

.scan-card label {
  display: block;
  margin-bottom: 12px;
}

.scan-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.current-op-box {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  background: #eef7ff;
}

.current-op-box span {
  color: var(--primary);
  font-weight: 800;
}

.current-op-box strong {
  font-size: 22px;
}

.current-op-box p {
  color: #395466;
  line-height: 1.5;
}

.current-op-box.done {
  border-color: var(--ok);
  background: #effaf3;
}

.completed-ops {
  display: grid;
  gap: 8px;
}

.completed-ops div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #dbe9f6;
  border-radius: 7px;
  background: var(--panel);
}

.completed-ops span {
  color: var(--muted);
  font-size: 12px;
}

.completed-ops em {
  color: var(--danger);
  font-style: normal;
  font-size: 12px;
}

.camera-scan-box {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.camera-scan-box video {
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  background: #111;
}

.result-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.result-item {
  width: 100%;
  min-height: 58px;
  background: #f5f8fa;
  color: var(--ink);
  border: 1px solid var(--line);
  text-align: left;
  display: grid;
  gap: 4px;
}

.result-item strong {
  font-size: 15px;
}

.result-item span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.trace-box {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid #dbe9f6;
  border-radius: 7px;
  font-size: 13px;
}

.trace-box p {
  line-height: 1.45;
}

.modal-record-scroll {
  max-height: 180px;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
}

.modal-record-scroll p {
  margin: 0;
}

.gp-gantt {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.gp-gantt-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(260px, 1fr) minmax(150px, auto);
  gap: 10px;
  align-items: center;
  min-width: 620px;
}

.gp-gantt-name,
.gp-gantt-date {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.gp-gantt-track {
  position: relative;
  height: 24px;
  border-radius: 999px;
  background: #e6eef5;
  overflow: hidden;
}

.gp-gantt-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b65b9, #2ea8df);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.general-project-inline-detail {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8e7f3;
  border-radius: 8px;
  background: #f8fbfd;
}

.general-project-inline-detail h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

.general-dashboard {
  display: grid;
  gap: 18px;
}

.general-stats-compact {
  display: grid;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 10px;
}

.general-stats-compact > div {
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(4, 64, 112, .06);
}

.general-stats-compact span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.general-stats-compact strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
}

.route-editor-wrap table {
  min-width: 780px;
}

.route-editor-wrap input {
  min-width: 120px;
}

.check-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.check-cell input {
  width: auto;
  min-width: 0;
}

@media (max-width: 1020px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .jobshop-stats { grid-template-columns: repeat(3, 1fr); }
  .grid, .board, .overview-grid, .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-stats { margin-top: 0; padding: 0; }
  .screen-kpis { grid-template-columns: repeat(2, 1fr); }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-row,
  .value-screen .screen-row { grid-template-columns: 1fr; }
  .detail-split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 36;
    padding: 8px 10px;
    gap: 6px;
    max-height: 118px;
    overflow: hidden;
  }
  .brand { display: none; }
  .branch-switch {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 4px;
    border-radius: 8px;
    scrollbar-width: none;
  }
  .branch-switch::-webkit-scrollbar,
  nav::-webkit-scrollbar,
  .actions::-webkit-scrollbar {
    display: none;
  }
  .branch-switch button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 14px;
  }
  nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
    min-height: 0;
  }
  nav button {
    white-space: nowrap;
    min-width: 68px;
    min-height: 34px;
    padding: 7px 10px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 14px;
  }
  .nav-order-tools {
    display: none;
  }
  .login-box {
    display: none;
  }
  main { margin-left: 0; padding: 10px; }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
  }
  .topbar h1 {
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
  }
  .actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .actions button { flex: 0 0 auto; }
  .message-bell-host {
    order: -1;
    margin-left: auto;
  }
  .message-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 70vh;
  }
  .sticky-panel-head,
  .sticky-action-toolbar {
    position: static;
    z-index: auto;
    box-shadow: none;
  }
  .panel-head {
    align-items: flex-start;
    gap: 8px;
  }
  .panel-head h2 {
    font-size: 22px;
    line-height: 1.2;
  }
  .directory-actions,
  .directory-toolbar-row,
  .maintenance-toolbar,
  .workorder-maintenance-toolbar,
  .list-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 8px;
  }
  .directory-actions > *,
  .directory-toolbar-row > *,
  .maintenance-toolbar > *,
  .workorder-maintenance-toolbar > *,
  .list-toolbar > * {
    flex: 0 0 auto;
  }
  .directory-toolbar-row .muted,
  .maintenance-toolbar .muted,
  .workorder-maintenance-toolbar .muted {
    flex: 0 0 auto;
  }
  .materials-layout {
    grid-template-columns: 1fr !important;
  }
  .materials-layout > .panel {
    resize: vertical;
  }
  .reminder-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .reminder-panel button {
    width: 100%;
  }
  h1 { font-size: 23px; }
  .command-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  .command-hero h2 { font-size: 25px; }
  .hero-actions { width: 100%; justify-content: stretch; }
  .hero-actions button { flex: 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .sample-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sample-dashboard-stats .stat {
    min-height: 62px;
    padding: 8px 10px;
  }
  .sample-dashboard-stats .stat strong {
    font-size: 22px;
  }
  .general-stats-compact {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .general-stats-compact > div {
    flex: 0 0 142px;
  }
  .jobshop-stats { grid-template-columns: repeat(2, 1fr); }
  .grid, .board, .overview-grid, .charts-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .progress-card { grid-template-columns: 108px minmax(0, 1fr); }
  .ring { width: 108px; }
  .mini-metrics { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(72px, 1fr) minmax(90px, 1.2fr) auto; }
  .panel { padding: 12px; }
  .qr-card { align-items: flex-start; flex-direction: column; }
  .system-qr-grid { grid-template-columns: 1fr; }
  .system-qr-modal-grid { max-height: 62vh; }
  .system-qr-card .qr-img {
    width: min(240px, 100%);
    height: min(240px, 70vw);
  }
  .scan-info { grid-template-columns: 1fr; }
  .sample-detail-head,
  .sample-stage-card .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .sample-board-toolbar {
    align-items: stretch;
  }
  .segmented {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .segmented button {
    flex: 0 0 auto;
  }
  .sample-card-size {
    display: none;
  }
  .sample-project-grid,
  .sample-layout-auto,
  .sample-layout-large,
  .sample-layout-compact,
  .sample-layout-vertical {
    grid-template-columns: 1fr;
  }
  .sample-layout-compact .sample-project-card {
    max-height: 360px;
  }
  .sample-layout-large .sample-project-card {
    max-height: none;
  }
  .sample-card-resizer {
    display: none;
  }
  .sample-project-card {
    max-height: 520px;
  }
  .sample-stage-line {
    flex-direction: column;
    overflow-x: visible;
  }
  .sample-stage-line span {
    grid-template-columns: 42px 1fr auto;
    justify-items: start;
    min-width: 0;
    width: 100%;
  }
  .sample-stage-line span:not(:last-child)::after {
    top: 38px;
    left: 17px;
    width: 2px;
    height: 18px;
  }
  .sample-stage-line.large span {
    min-width: 0;
  }
  .sample-stage-line b {
    max-width: none;
    white-space: normal;
  }
  .sample-editor-head,
  .sample-task-edit,
  .sample-operation-edit,
  .sample-qr-grid .system-qr-card,
  .sample-op-qr-card {
    grid-template-columns: 1fr;
  }
  .sample-operation-line {
    flex-direction: column;
    overflow-x: visible;
  }
  .sample-op-node {
    grid-template-columns: 48px 1fr auto;
    justify-items: start;
    width: 100%;
    min-width: 0;
  }
  .sample-op-node:not(:last-child)::after {
    top: 42px;
    left: 20px;
    width: 2px;
    height: 14px;
  }
  .sample-op-node b {
    max-width: none;
  }
  .responsive-table {
    overflow: visible;
  }
  .responsive-table table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    margin-bottom: 10px;
    padding: 8px;
    box-shadow: 0 8px 18px rgba(0, 63, 122, 0.07);
  }
  .responsive-table td {
    border-bottom: 0;
    padding: 7px 4px;
  }
  .responsive-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 3px;
  }
  .responsive-table .narrow-col {
    display: inline-block;
    width: auto;
  }
  .responsive-table .detail-row {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  table:not(.wide-scroll-table) { min-width: 620px; }
  .wide-scroll-table {
    min-width: 100% !important;
  }
  .route-progress { min-width: 0; }
  .route-node { min-width: 48px; }
  .bigscreen {
    min-height: auto;
    padding: 14px;
  }
  .screen-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .screen-head h2 {
    font-size: 26px;
  }
  .screen-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .screen-kpi strong {
    font-size: 23px;
  }
  .shell-footer {
    left: 0;
  }
  .table-scroll-control.floating-table-scroll-active {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 32px minmax(120px, 1fr) 32px;
    gap: 8px;
  }
  .table-scroll-control.floating-table-scroll-active span {
    display: none;
  }
  #orders .mobile-month-list,
  #workorders .mobile-month-list {
    display: block;
  }
  #orders .mobile-month-list + .monthly-groups,
  #workorders .mobile-month-list + .monthly-groups {
    display: none;
  }
  #orders > .responsive-table,
  #workorders > .responsive-table,
  #orders .panel > .responsive-table,
  #workorders .panel > .responsive-table {
    display: none;
  }
  .purchase-summary .compact-stats {
    grid-template-columns: 1fr;
  }
  dialog {
    width: 92vw;
    max-width: 92vw;
  }
  dialog.modal-max {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }
  .modal-card {
    max-height: 82vh;
    padding: 14px;
  }
  dialog.modal-max .modal-card {
    max-height: calc(100vh - 12px);
  }
  .modal-head {
    top: -14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  button,
  input,
  select,
  textarea {
    min-height: 42px;
  }
  .toolbar button,
  .inline-actions button,
  .modal-head-actions button {
    min-height: 42px;
  }
  .form-grid {
    gap: 12px;
  }
}


.screen-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bigscreen .screen-grid {
  position: relative;
  display: block;
  min-height: calc(100vh - 145px);
}
.screen-free-tile {
  position: absolute;
  min-width: 52px;
  min-height: 34px;
  resize: none;
  overflow: hidden;
  cursor: move;
  touch-action: none;
}
.screen-free-tile.dragging {
  z-index: 30;
  box-shadow: 0 26px 58px rgba(0,0,0,0.34), inset 0 0 28px rgba(0,160,255,0.1);
}
.screen-free-tile > .screen-card,
.screen-free-tile > .screen-list-card,
.screen-free-tile > .screen-chart,
.screen-free-tile > .screen-inner {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: max(3px, calc(14px * var(--tile-scale, 1)));
}
.screen-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  border-right: 3px solid rgba(210,235,255,0.9);
  border-bottom: 3px solid rgba(210,235,255,0.9);
  border-bottom-right-radius: 8px;
  opacity: 0.9;
}
.screen-workorder-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.screen-workorder-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.screen-workorder-row b {
  color: #86c8ff;
  font-size: 11px;
  font-weight: 800;
}
.screen-workorder-row .route-progress {
  min-width: 0;
}
.screen-list-fullscreen {
  position: fixed !important;
  inset: 14px !important;
  z-index: 1000;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  background: #03244d !important;
}
.screen-list-fullscreen .screen-table.scrollable {
  max-height: calc(100vh - 120px);
}
.screen-list-autoscroll .screen-table.scrollable {
  scroll-behavior: auto;
}
@media (max-width: 900px) {
  .bigscreen .screen-grid {
    min-height: 1200px;
  }
  .screen-free-tile {
    width: calc(100% - 24px) !important;
    left: 12px !important;
  }
}

.sample-fixed-screen .fixed-sample-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  min-height: auto;
}
.sample-fixed-screen .screen-card.wide {
  grid-column: span 2;
}
.sample-fixed-screen .screen-list-card {
  grid-column: span 2;
}
.sample-progress-screen .screen-list-card {
  padding: 14px;
  min-height: calc(100vh - 140px);
}
.sample-progress-scroll {
  max-height: calc(100vh - 170px) !important;
  gap: 12px;
}
.sample-screen-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(130, 202, 255, 0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.sample-screen-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sample-screen-row-head strong {
  color: #fff;
  font-size: 18px;
}
.sample-screen-row-head span,
.sample-screen-row p,
.sample-screen-stage small {
  color: #cfe6f8;
}
.sample-screen-overall i,
.sample-screen-stage i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.sample-screen-overall b,
.sample-screen-stage b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b76d1, #33d0ff);
}
.sample-screen-stage {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}
.sample-screen-stage > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 900px) {
  .sample-fixed-screen .fixed-sample-grid {
    grid-template-columns: 1fr;
  }
  .sample-fixed-screen .screen-card.wide,
  .sample-fixed-screen .screen-list-card {
    grid-column: span 1;
  }
}

.screen-free-tile {
  font-size: calc(16px * var(--tile-scale, 1));
}
.screen-free-tile .screen-kpi strong {
  font-size: calc(30px * var(--tile-scale, 1));
}
.screen-free-tile .screen-kpi span,
.screen-free-tile .screen-row,
.screen-free-tile .screen-workorder-row b,
.screen-free-tile .screen-workorder-row span,
.screen-free-tile .bar-row,
.screen-free-tile .sample-screen-row {
  font-size: calc(1em * var(--tile-scale, 1));
}
.screen-free-tile .screen-list-head h3,
.screen-free-tile .screen-card h3 {
  font-size: calc(19px * var(--tile-scale, 1));
}
.bigscreen .screen-grid {
  min-height: calc(100vh - 155px);
}
.screen-resize-handle {
  position: absolute;
  z-index: 6;
  opacity: 0.9;
  border: 0;
  background: transparent;
}
.screen-resize-n,
.screen-resize-s {
  left: 18px;
  right: 18px;
  height: 10px;
  cursor: ns-resize;
}
.screen-resize-n { top: 0; }
.screen-resize-s { bottom: 0; }
.screen-resize-e,
.screen-resize-w {
  top: 18px;
  bottom: 18px;
  width: 10px;
  cursor: ew-resize;
}
.screen-resize-e { right: 0; }
.screen-resize-w { left: 0; }
.screen-resize-ne,
.screen-resize-nw,
.screen-resize-se,
.screen-resize-sw {
  width: 24px;
  height: 24px;
}
.screen-resize-ne { top: 0; right: 0; cursor: nesw-resize; border-top: 3px solid rgba(210,235,255,0.9); border-right: 3px solid rgba(210,235,255,0.9); }
.screen-resize-nw { top: 0; left: 0; cursor: nwse-resize; border-top: 3px solid rgba(210,235,255,0.9); border-left: 3px solid rgba(210,235,255,0.9); }
.screen-resize-se { bottom: 0; right: 0; cursor: nwse-resize; border-bottom: 3px solid rgba(210,235,255,0.9); border-right: 3px solid rgba(210,235,255,0.9); }
.screen-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; border-bottom: 3px solid rgba(210,235,255,0.9); border-left: 3px solid rgba(210,235,255,0.9); }
.sample-fixed-screen .fixed-sample-grid {
  position: relative;
  display: block;
  min-height: calc(100vh - 155px);
}



.screen-free-tile .screen-table,
.screen-free-tile .screen-table *:not(button),
.screen-free-tile .screen-row,
.screen-free-tile .screen-row *,
.screen-free-tile .screen-workorder-row,
.screen-free-tile .screen-workorder-row *,
.screen-free-tile .sample-screen-row,
.screen-free-tile .sample-screen-row *,
.screen-free-tile .bar-row,
.screen-free-tile .bar-row *,
.screen-free-tile .screen-legend,
.screen-free-tile .screen-legend *,
.screen-free-tile .badge {
  font-size: calc(14px * var(--tile-scale, 1)) !important;
  line-height: 1.18;
}
.screen-free-tile .screen-list-actions button,
.screen-free-tile .screen-tile-picker summary,
.screen-free-tile button.secondary {
  font-size: calc(13px * var(--tile-scale, 1)) !important;
  min-height: max(16px, calc(32px * var(--tile-scale, 1)));
  padding: calc(5px * var(--tile-scale, 1)) calc(8px * var(--tile-scale, 1));
}
.screen-free-tile .screen-table.scrollable {
  max-height: none;
  height: calc(100% - max(24px, calc(58px * var(--tile-scale, 1))));
}
.screen-free-tile .screen-row {
  gap: calc(8px * var(--tile-scale, 1));
  padding: calc(8px * var(--tile-scale, 1));
  grid-template-columns: repeat(auto-fit, minmax(max(42px, calc(95px * var(--tile-scale, 1))), 1fr));
}
.screen-free-tile .screen-list-head {
  gap: calc(8px * var(--tile-scale, 1));
  margin-bottom: calc(10px * var(--tile-scale, 1));
}
.screen-free-tile .screen-list-head h3 {
  font-size: calc(22px * var(--tile-scale, 1)) !important;
}
.screen-list-fullscreen {
  font-size: clamp(10px, 1.15vw, 18px);
}
.screen-list-fullscreen .screen-table,
.screen-list-fullscreen .screen-table *:not(button) {
  font-size: clamp(10px, 1.15vw, 18px) !important;
  line-height: 1.2;
}
.screen-list-fullscreen .screen-row,
.screen-list-fullscreen .screen-workorder-row {
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
}
.screen-tile-picker {
  position: relative;
}
.screen-tile-picker summary {
  list-style: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(130, 202, 255, 0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  color: #e8f5ff;
  font-weight: 900;
  cursor: pointer;
}
.screen-tile-picker summary::-webkit-details-marker { display: none; }
.screen-tile-picker div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: 220px;
  max-height: 360px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(130, 202, 255, 0.32);
  border-radius: 8px;
  background: #06315f;
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}
.screen-tile-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8f5ff;
  font-size: 13px;
}

.sample-project-card .sample-machining-progress,
.sample-project-card .sample-machining-progress *,
.sample-project-card .sample-part-progress,
.sample-project-card .sample-part-progress *,
.sample-project-card .sample-all-stage-progress,
.sample-project-card .sample-all-stage-progress * {
  font-size: clamp(10px, calc(14px * var(--sample-card-scale, 1)), 15px) !important;
  line-height: 1.2;
}
.sample-project-card .sample-machining-progress-head strong,
.sample-project-card .sample-all-stage-head strong {
  font-size: clamp(11px, calc(15px * var(--sample-card-scale, 1)), 16px) !important;
}
.screen-free-tile .sample-machining-progress,
.screen-free-tile .sample-machining-progress *,
.screen-free-tile .sample-part-progress,
.screen-free-tile .sample-part-progress *,
.screen-free-tile .sample-all-stage-progress,
.screen-free-tile .sample-all-stage-progress * {
  font-size: calc(13px * var(--tile-scale, 1)) !important;
  line-height: 1.16;
}
.screen-free-tile .sample-part-progress,
.screen-free-tile .sample-all-stage-progress section {
  padding: calc(8px * var(--tile-scale, 1));
  gap: calc(6px * var(--tile-scale, 1));
}
.screen-free-tile .sample-machining-progress-grid,
.screen-free-tile .sample-all-stage-items {
  gap: calc(6px * var(--tile-scale, 1));
}

.screen-free-tile.kpi-tile .screen-kpi {
  display: grid;
  align-content: center;
  gap: calc(5px * var(--tile-scale, 1));
}
.screen-free-tile.kpi-tile .screen-kpi span {
  font-size: clamp(9px, calc(16px * var(--tile-scale, 1)), 18px) !important;
  line-height: 1.15;
  min-height: 1em;
  white-space: nowrap;
}
.screen-free-tile.kpi-tile .screen-kpi strong {
  font-size: clamp(14px, calc(30px * var(--tile-scale, 1)), 42px) !important;
  line-height: 1;
}
.screen-style-picker {
  position: relative;
}
.screen-style-picker summary {
  list-style: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(130, 202, 255, 0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  color: #e8f5ff;
  font-weight: 900;
  cursor: pointer;
}
.screen-style-picker summary::-webkit-details-marker { display: none; }
.screen-style-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  width: 260px;
  max-height: 380px;
  overflow: auto;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(130, 202, 255, 0.32);
  border-radius: 8px;
  background: #06315f;
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}
.screen-style-menu span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.screen-style-menu button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(130, 202, 255, 0.28);
  border-radius: 7px;
  background: rgba(255,255,255,0.14);
  color: #e8f5ff;
  font-weight: 800;
  text-align: left;
}
.screen-style-menu .danger-mini {
  color: #ffd2d0;
}
.screen-style-menu small {
  color: #a9cce8;
}

.screen-free-tile .screen-resize-handle { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.bigscreen.layout-editing .screen-free-tile:hover .screen-resize-handle,
.bigscreen.layout-editing .screen-free-tile.selected .screen-resize-handle { opacity: .9; pointer-events: auto; }
.bigscreen.layout-editing .screen-free-tile.selected { outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; z-index: 20; }
.screen-head.collapsed { margin-bottom: 4px; min-height: 34px; }
.screen-head.collapsed > div:first-child { display: none; }
.screen-head.collapsed .screen-head-actions { width: 100%; justify-content: flex-end; }
.screen-filter-picker { position: relative; }
.screen-filter-picker summary { list-style: none; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(130,202,255,.28); border-radius: 8px; background: rgba(255,255,255,.14); color: #e8f5ff; font-weight: 900; cursor: pointer; }
.screen-filter-picker summary::-webkit-details-marker { display: none; }
.screen-filter-picker div { position: absolute; right: 0; top: calc(100% + 8px); z-index: 95; width: 240px; display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(130,202,255,.32); border-radius: 8px; background: #06315f; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.screen-filter-picker label { display: grid; gap: 4px; color: #e8f5ff; font-size: 13px; font-weight: 800; }
.screen-filter-picker select { min-height: 30px; border-radius: 7px; border: 1px solid rgba(130,202,255,.28); background: #082b56; color: #fff; }
.screen-filter-picker button { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(130,202,255,.28); border-radius: 7px; background: rgba(255,255,255,.14); color: #e8f5ff; font-weight: 800; }
.combo-value-block { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; height: 100%; }
.combo-value-block .screen-chart { min-height: 0; }
.combo-value-block .panel-head h2 { font-size: calc(18px * var(--tile-scale, 1)); }
.combo-value-block .line-chart { max-height: 45%; }

body.screen-cast-mode .sidebar,
body.screen-cast-mode .topbar,
body.screen-cast-mode .app-footer-note,
body.screen-cast-mode .shell-footer,
body.screen-cast-mode #pageTitle {
  display: none !important;
}
body.screen-cast-mode .app-shell {
  display: block;
  min-height: 100vh;
  background: #00172f;
}
body.screen-cast-mode main {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
  overflow: auto;
  background: #00172f;
}
body.screen-cast-mode .view.active {
  height: 100vh;
}
body.screen-cast-mode .bigscreen {
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: 100vh;
  box-shadow: none;
}
.screen-cast-exit {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3000;
  display: grid;
  justify-items: end;
  gap: 8px;
}
.screen-cast-exit summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(130,202,255,.34);
  border-radius: 999px;
  background: rgba(3,31,68,.42);
  color: rgba(255,255,255,.72);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.screen-cast-exit summary::-webkit-details-marker {
  display: none;
}
.screen-cast-exit[open] summary,
.screen-cast-exit summary:hover {
  background: rgba(3,31,68,.9);
  color: #fff;
}
.screen-cast-exit button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(130,202,255,.36);
  border-radius: 8px;
  background: rgba(3,31,68,.92);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
body.screen-cast-mode .screen-head.collapsed,
body.screen-cast-mode .screen-head {
  display: none !important;
}
.bigscreen:not(.layout-editing) .screen-free-tile .screen-resize-handle,
.screen-free-tile:not(.selected):not(:hover) .screen-resize-handle {
  opacity: 0 !important;
  pointer-events: none !important;
  border-color: transparent !important;
}

.bigscreen.layout-locked .screen-free-tile {
  cursor: default;
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}
.bigscreen.layout-locked .screen-free-tile .screen-resize-handle,
.bigscreen.layout-locked .screen-free-tile:hover .screen-resize-handle,
.bigscreen.layout-locked .screen-free-tile.selected .screen-resize-handle {
  opacity: 0 !important;
  pointer-events: none !important;
  border-color: transparent !important;
}
.bigscreen.layout-locked .screen-free-tile.selected,
.bigscreen:not(.layout-editing) .screen-free-tile.selected {
  outline: 0 !important;
}
@media (max-width: 900px) {
  .bigscreen {
    min-height: max(100vh, var(--screen-mobile-height, 2200px));
    overflow: visible;
    padding-bottom: 120px;
  }
  .bigscreen .screen-grid {
    min-height: max(2200px, calc(100vh - 80px)) !important;
    height: auto !important;
    overflow: visible;
  }
  .screen-free-tile {
    max-width: calc(100vw - 44px);
  }
  .screen-free-tile > .screen-card,
  .screen-free-tile > .screen-list-card,
  .screen-free-tile > .screen-chart,
  .screen-free-tile > .screen-inner {
    overflow: hidden;
  }
  body.screen-cast-mode main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  body.screen-cast-mode .view.active {
    height: auto;
    min-height: 100vh;
  }
}@media (max-width: 900px) {
  .screen-free-tile[style] {
    width: var(--mobile-keep-width, auto);
  }
}

.screen-filter-multi div {
  width: 300px;
  max-height: 420px;
  overflow: auto;
}
.screen-filter-multi strong,
.screen-filter-multi small {
  color: #e8f5ff;
}
.screen-filter-multi section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.screen-filter-multi label {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.screen-filter-multi input {
  width: 16px;
  height: 16px;
}

.screen-filter-multi div {
  width: 340px;
  max-height: min(520px, 70vh);
  overflow: auto;
}
.screen-filter-year {
  border: 1px solid rgba(130,202,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.screen-filter-year summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  color: #e8f5ff;
  font-weight: 900;
  cursor: pointer;
}
.screen-filter-year summary span {
  color: #9ed2ff;
  font-size: 12px;
}
.screen-filter-year section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 8px;
  padding: 6px 8px 8px;
}
.command-hero .screen-filter-picker {
  align-self: center;
}
.command-hero .screen-filter-picker summary {
  background: rgba(255,255,255,.18);
}

@media (max-width: 900px) {
  .screen-head-actions {
    position: relative;
    overflow: visible;
  }
  .screen-style-picker,
  .screen-tile-picker,
  .screen-filter-picker {
    position: static;
  }
  .screen-style-picker[open] summary,
  .screen-tile-picker[open] summary,
  .screen-filter-picker[open] summary {
    position: relative;
    z-index: 120;
  }
  .screen-style-picker .screen-style-menu,
  .screen-tile-picker div,
  .screen-filter-picker div {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: 150px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62vh, 560px) !important;
    overflow: auto !important;
    z-index: 3000 !important;
    box-sizing: border-box;
  }
  .screen-filter-multi div {
    width: auto !important;
  }
  .screen-filter-year section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.screen-cast-mode .screen-style-picker .screen-style-menu,
  body.screen-cast-mode .screen-tile-picker div,
  body.screen-cast-mode .screen-filter-picker div {
    top: 64px !important;
  }
}




.sample-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.sample-card-title h3 { margin: 4px 0 0; }
.sample-card-meta,
.sample-card-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sample-card-meta span {
  padding: 4px 8px;
  border-radius: 6px;
  background: #f3f7fb;
  color: #425466;
  font-size: 12px;
}
.sample-card-kpis span {
  min-width: 64px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #eef6ff;
}
.sample-card-kpis b { display: block; font-size: 17px; color: #12324a; }
.sample-card-kpis small { color: #5f7083; }
.sample-attention {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-left: 3px solid #2f80ed;
  border-radius: 6px;
  background: #f6faff;
}
.sample-attention small,
.sample-attention span { color: #627084; }
.sample-project-risk { border-color: #f5a3a3; }
.sample-project-cell { display: grid; gap: 4px; min-width: 240px; }
.sample-project-cell span,
.sample-project-cell small { color: #65758a; }
.sample-project-manage-row small { display: block; margin-top: 3px; color: #6b7a90; }
.danger-text { color: #b42318 !important; }
.progress-cell { min-width: 110px; display: grid; gap: 4px; }
.progress-cell i { display: block; height: 7px; border-radius: 999px; background: #e6edf5; overflow: hidden; }
.progress-cell b { display: block; height: 100%; border-radius: inherit; background: #2f80ed; }
@media (max-width: 720px) {
  .sample-card-kpis span { min-width: 54px; padding: 5px 7px; }
  .sample-card-kpis b { font-size: 15px; }
  .sample-project-cell { min-width: 190px; }
}

.sample-resource-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.sample-resource-summary span {
  padding: 7px 10px;
  border-radius: 6px;
  background: #eef6ff;
  color: #24415f;
  font-weight: 700;
}
.sample-operation-detail {
  margin-top: 8px;
  overflow-x: auto;
  border: 1px solid #d9e6f2;
  border-radius: 6px;
  background: #fbfdff;
}
.sample-operation-detail table {
  margin: 0;
  min-width: 820px;
}
.sample-workorder-card .sample-operation-detail td,
.sample-workorder-card .sample-operation-detail th {
  padding: 7px 8px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .sample-resource-summary span { flex: 1 1 42%; font-size: 12px; }
  .sample-operation-detail table { min-width: 760px; }
}

.screen-floating-return {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 3200;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(130,202,255,.38);
  border-radius: 8px;
  background: rgba(3,31,68,.92);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
}

.sample-stage-line span:not(:last-child)::after,
.sample-stage-line i::after,
.sample-op-node:not(:last-child)::after {
  pointer-events: none;
}

.sample-stage-line span,
.sample-stage-line i,
.sample-stage-line b,
.sample-op-node,
.sample-op-node i,
.sample-op-node b,
.sample-op-node small {
  position: relative;
  z-index: 2;
}

.sample-op-node {
  min-height: 74px;
  border: 0;
}

.sample-operation-detail button.ghost {
  position: relative;
  z-index: 3;
}

/* Beta V17: DV/PV mobile separation and action menu expansion */
.sample-branch-active .actions {
  gap: 8px;
}

.sample-page-head {
  align-items: flex-start;
}

.sample-page-actions {
  justify-content: flex-end;
}

.sample-projects-panel,
.sample-projects-panel .table-wrap,
.sample-projects-panel table,
.sample-projects-panel tbody,
.sample-projects-panel tr,
.sample-master-panel,
.sample-master-panel .table-wrap {
  overflow: visible;
}

.sample-projects-panel .row-action-menu,
.sample-master-panel .row-action-menu {
  position: relative;
  z-index: 20;
}

.sample-projects-panel .row-action-panel,
.sample-master-panel .row-action-panel {
  z-index: 30;
}

@media (max-width: 720px) {
  body.sample-branch-active .sidebar {
    padding: 10px 14px 8px;
  }

  body.sample-branch-active .brand {
    margin-bottom: 8px;
  }

  body.sample-branch-active .branch-switch {
    display: flex;
    gap: 6px;
    padding: 5px;
    margin-bottom: 6px;
  }

  body.sample-branch-active .branch-switch button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 13px;
  }

  body.sample-branch-active nav {
    gap: 5px;
    padding: 0 0 4px;
  }

  body.sample-branch-active nav button {
    min-width: auto;
    min-height: 30px;
    padding: 5px 9px;
    font-size: 13px;
  }

  body.sample-branch-active .topbar {
    gap: 6px;
    margin-bottom: 8px;
  }

  body.sample-branch-active .topbar h1 {
    font-size: 22px;
  }

  body.sample-branch-active .actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    width: 100%;
  }

  body.sample-branch-active .actions button,
  body.sample-branch-active .message-bell-host > button {
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  body.sample-branch-active .message-bell-host {
    order: 0;
    margin-left: 0;
  }

  .sample-projects-panel .panel-head,
  .sample-master-panel .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: start;
  }

  .sample-projects-panel .panel-head h2,
  .sample-master-panel .panel-head h2 {
    font-size: 24px;
    line-height: 1.15;
  }

  .sample-projects-panel .panel-head .toolbar,
  .sample-master-panel .panel-head .toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  .sample-projects-panel .panel-head .toolbar button,
  .sample-master-panel .panel-head .toolbar button {
    min-height: 44px;
    padding: 8px;
    font-size: 15px;
  }

  .sample-projects-panel .table-wrap,
  .sample-master-panel .table-wrap {
    overflow: visible !important;
  }

  .sample-project-manage-row .row-action-menu,
  .sample-master-panel .row-action-menu {
    display: block;
    width: 100%;
  }

  .sample-project-manage-row .row-action-menu summary,
  .sample-master-panel .row-action-menu summary {
    width: 100%;
    min-height: 38px;
  }

  .sample-project-manage-row .row-action-panel,
  .sample-master-panel .row-action-panel {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid #cfe4f5;
  }

  .sample-project-manage-row .row-action-menu:not([open]) .row-action-panel,
  .sample-master-panel .row-action-menu:not([open]) .row-action-panel {
    display: none;
  }
}

@media (max-width: 720px) {
  .list-toolbar .list-window-tool {
    display: flex !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 76, 129, .18);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
  }
  .list-toolbar .list-window-tool select {
    min-width: 120px;
    flex: 0 0 auto;
  }
}

.mobile-window-bar { display: none; }
@media (max-width: 720px) {
  .mobile-window-bar {
    display: block;
    margin: 0 0 10px 0;
    padding: 8px 10px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15, 76, 129, .16);
    border-radius: 8px;
  }
  .mobile-window-bar .list-window-tool {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-window-bar select { min-width: 128px; }
}

/* Mobile adaptive search width */
@media (max-width: 720px) {
  .list-toolbar .list-search {
    flex: 0 0 clamp(128px, calc(var(--search-ch, 10) * 1ch + 52px), min(92vw, 520px));
    width: clamp(128px, calc(var(--search-ch, 10) * 1ch + 52px), min(92vw, 520px));
    min-width: 128px;
    max-width: min(92vw, 520px);
    transition: width .18s ease, flex-basis .18s ease;
  }
  .list-toolbar .list-search:focus {
    flex-basis: clamp(180px, calc(var(--search-ch, 14) * 1ch + 76px), min(92vw, 520px));
    width: clamp(180px, calc(var(--search-ch, 14) * 1ch + 76px), min(92vw, 520px));
  }
  .scan-code-label {
    width: auto;
  }
  .scan-code-label .adaptive-search {
    display: block;
    width: clamp(150px, calc(var(--search-ch, 10) * 1ch + 64px), 100%);
    min-width: 150px;
    max-width: 100%;
    transition: width .18s ease;
  }
  .scan-code-label .adaptive-search:focus {
    width: clamp(210px, calc(var(--search-ch, 14) * 1ch + 86px), 100%);
  }
}

.excel-order-picker {
  max-height: 260px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  padding: 6px 2px;
}
.excel-order-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid #d6e4f2;
  border-radius: 8px;
  background: var(--panel);
}
.excel-order-option input { margin-top: 3px; }
.excel-order-option span { display: grid; gap: 2px; min-width: 0; }
.excel-order-option small { color: #64748b; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .excel-order-picker { grid-template-columns: 1fr; max-height: 45vh; }
}

.analytics-more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.analytics-more summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.analytics-more .table-wrap { margin-top: 8px; }


.purchase-import-suggestions {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 76, 129, .14);
  border-radius: 8px;
  background: #f8fbff;
}
.purchase-import-suggestions strong { color: #12385f; }
.purchase-import-suggestions .suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.purchase-import-suggestions .suggest-row > span {
  min-width: 58px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.purchase-import-suggestions .chip {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #cfe0f3;
  background: var(--panel);
  color: #0f4c81;
  font-size: 12px;
}

.compact-check-list { max-height: 148px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--panel); }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 4px; font-size: 13px; }
.check-row input { width: auto; min-width: auto; }

/* Beta V22 visual analytics enhancements */
.empty-chart {
  min-height: 210px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff, #eef6fd);
}
.visual-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.visual-kpi {
  position: relative;
  min-height: 108px;
  padding: 16px;
  border: 1px solid rgba(0, 94, 184, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,254,.96)),
    radial-gradient(circle at 92% 12%, rgba(0,94,184,.16), transparent 32%);
  box-shadow: 0 14px 30px rgba(0, 63, 122, .08);
  overflow: hidden;
}
.visual-kpi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #36b6a2);
}
.visual-kpi.warn::after { background: linear-gradient(90deg, #d98b00, #f2c94c); }
.visual-kpi.danger::after { background: linear-gradient(90deg, #b42318, #ff7a70); }
.visual-kpi.ok::after { background: linear-gradient(90deg, #237a46, #36b37e); }
.visual-kpi span { color: var(--muted); font-size: 13px; font-weight: 700; }
.visual-kpi strong { display: block; margin-top: 8px; font-size: clamp(22px, 3vw, 32px); color: #071b33; }
.visual-kpi small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.4; }
.visual-gauge {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(0,94,184,.14);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f5faff);
}
.visual-gauge h3 { margin: 0 0 6px; font-size: 20px; }
.dashboard-visual .chart-panel,
.analytics-grid .chart-panel,
.operation-time-visual .panel {
  border-color: rgba(0,94,184,.14);
}
.analytics-grid .panel.full:first-child,
.operation-time-visual > .panel.full {
  background: linear-gradient(135deg, #fff, #f6fbff);
}
.risk-visual-list {
  display: grid;
  gap: 8px;
}
.risk-visual-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.3fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.risk-visual-item strong { color: var(--primary-dark); }
.risk-visual-item small { color: var(--muted); }
.bigscreen .screen-kpi,
.bigscreen .screen-card {
  backdrop-filter: blur(4px);
}
.bigscreen .screen-kpi strong { text-shadow: 0 0 16px rgba(80,185,255,.35); }
@media (max-width: 720px) {
  .visual-gauge { grid-template-columns: 1fr; justify-items: start; }
  .risk-visual-item { grid-template-columns: 1fr; }
}

/* Beta V22 stronger visible dashboard band */
.visual-command-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(0, 94, 184, .22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(236,247,255,.98), rgba(255,255,255,.94) 46%, rgba(239,252,248,.98)),
    radial-gradient(circle at 8% 10%, rgba(0,94,184,.16), transparent 28%);
  box-shadow: 0 20px 46px rgba(0, 63, 122, .14);
  overflow: hidden;
}
.command-band-main {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.command-ring,
.ring {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#005eb8 calc(var(--pct, 0) * 1%), #d9ecfb 0);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.9), 0 12px 28px rgba(0,94,184,.16);
}
.command-ring span,
.ring span {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--panel);
  color: #06315f;
  font-size: 26px;
  font-weight: 800;
}
.command-band-main h2 {
  margin: 4px 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0;
  color: #071b33;
}
.command-band-main p { margin: 0; color: #38556f; line-height: 1.55; }
.command-band-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.command-chip {
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid rgba(0,94,184,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,63,122,.08);
}
.command-chip span,
.visual-meter span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.command-chip strong { display: block; margin-top: 6px; font-size: 24px; color: #071b33; }
.command-chip small { display: block; margin-top: 4px; color: var(--muted); }
.command-chip.ok { border-color: rgba(35,122,70,.22); }
.command-chip.warn { border-color: rgba(217,139,0,.28); }
.command-chip.danger { border-color: rgba(180,35,24,.26); }
.command-band-meters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.visual-meter {
  padding: 10px 12px;
  border: 1px solid rgba(0,94,184,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}
.visual-meter > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.visual-meter strong { color: #071b33; font-size: 13px; white-space: nowrap; }
.visual-meter i {
  display: block;
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #005eb8 calc(var(--value, 0) * 1%), #dcebf7 0);
}
.visual-meter.ok i { background: linear-gradient(90deg, #237a46 calc(var(--value, 0) * 1%), #dcebf7 0); }
.visual-meter.warn i { background: linear-gradient(90deg, #d98b00 calc(var(--value, 0) * 1%), #dcebf7 0); }
.visual-meter.danger i { background: linear-gradient(90deg, #b42318 calc(var(--value, 0) * 1%), #dcebf7 0); }
@media (max-width: 920px) {
  .visual-command-band,
  .command-band-main,
  .command-band-meters { grid-template-columns: 1fr; }
  .command-band-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .command-band-side { grid-template-columns: 1fr; }
  .command-ring { width: 104px; height: 104px; }
  .command-ring span { width: 68px; height: 68px; font-size: 22px; }
}

/* Beta V22 tech cockpit visual pass */
.command-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(91, 192, 255, .28);
  background:
    linear-gradient(120deg, rgba(0,63,122,.98), rgba(0,94,184,.92) 48%, rgba(0,145,176,.88)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 46px);
  box-shadow: 0 18px 42px rgba(0, 63, 122, .22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.command-hero::before,
.visual-command-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.22) 48%, transparent 56%);
  transform: translateX(-120%);
  animation: cockpit-scan 6s linear infinite;
}
.command-hero::after,
.visual-command-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 75%);
}
@keyframes cockpit-scan {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.visual-command-band {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(49, 179, 255, .36);
  background:
    radial-gradient(circle at 8% 18%, rgba(56,189,248,.22), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(20,184,166,.18), transparent 28%),
    linear-gradient(135deg, rgba(238,248,255,.96), rgba(255,255,255,.88) 48%, rgba(232,250,247,.94)),
    repeating-linear-gradient(90deg, rgba(0,94,184,.05) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(0,94,184,.04) 0 1px, transparent 1px 38px);
  box-shadow: 0 24px 58px rgba(0,63,122,.18), inset 0 0 34px rgba(66,153,225,.10);
}
.command-band-main,
.command-band-side,
.command-band-meters,
.visual-command-band > * { position: relative; z-index: 1; }
.command-band-main h2 {
  color: #061a33;
  text-shadow: 0 0 18px rgba(0,94,184,.18);
}
.command-band-main .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0075d6;
  letter-spacing: .08em;
}
.command-band-main .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #20d6ff;
  box-shadow: 0 0 12px #20d6ff;
}
.command-ring,
.ring {
  position: relative;
  background:
    radial-gradient(circle, #fff 0 48%, transparent 49%),
    conic-gradient(#00c2ff calc(var(--pct, 0) * 1%), #15c59f calc(var(--pct, 0) * 1%), #d8ebf7 0);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.92), 0 0 0 1px rgba(0,194,255,.28), 0 0 30px rgba(0,194,255,.32);
}
.command-ring::before,
.ring::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px dashed rgba(0,117,214,.34);
}
.command-ring::after,
.ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,194,255,.20);
}
.command-ring span,
.ring span {
  color: #003f7a;
  box-shadow: inset 0 0 18px rgba(0,117,214,.10);
  z-index: 1;
}
.command-chip,
.visual-kpi,
.visual-meter,
.command-panel,
.analytics-grid .panel,
.operation-time-visual .panel {
  border-color: rgba(0, 143, 213, .24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,248,255,.82)),
    linear-gradient(90deg, rgba(0,194,255,.08), transparent 40%);
  box-shadow: 0 14px 34px rgba(0,63,122,.11), inset 0 0 0 1px rgba(255,255,255,.68);
}
.command-chip,
.visual-kpi {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.visual-kpi::before,
.command-chip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,194,255,.72), transparent);
}
.command-chip strong,
.visual-kpi strong {
  color: #061a33;
  text-shadow: 0 0 14px rgba(0,117,214,.14);
}
.visual-kpi::after {
  height: 5px;
  background: linear-gradient(90deg, #005eb8, #00c2ff, #14b8a6);
  box-shadow: 0 0 14px rgba(0,194,255,.35);
}
.visual-meter i {
  height: 12px;
  background:
    linear-gradient(90deg, #0064c8 calc(var(--value, 0) * 1%), rgba(218,235,247,.92) 0),
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 2px, transparent 2px 10px);
  box-shadow: inset 0 0 0 1px rgba(0,94,184,.08);
}
.visual-meter i::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--value, 0) * 1%);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0,194,255,.42);
}
.charts-grid .panel,
.overview-grid .panel,
.panel.board-panel {
  border-color: rgba(0,143,213,.18);
  box-shadow: 0 12px 30px rgba(0,63,122,.08);
}
.bar-track,
.column-track {
  background: linear-gradient(90deg, #e2eef7, #f4fbff);
  box-shadow: inset 0 0 0 1px rgba(0,94,184,.05);
}
.bar-fill,
.column-fill {
  background: linear-gradient(180deg, #0a84ff, #00c2ff 55%, #14b8a6);
  box-shadow: 0 0 14px rgba(0,194,255,.30);
}
.risk-visual-item {
  border-color: rgba(0,143,213,.18);
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(241,249,255,.90));
  box-shadow: inset 4px 0 0 rgba(0,194,255,.46);
}
.bigscreen .screen-kpi,
.bigscreen .screen-card {
  border-color: rgba(74, 222, 255, .32);
  box-shadow: 0 18px 44px rgba(0,0,0,.20), inset 0 0 28px rgba(74,222,255,.06);
}
@media (prefers-reduced-motion: reduce) {
  .command-hero::before,
  .visual-command-band::before { animation: none; display: none; }
}

/* Beta V22 compact chart refinement */
.visual-command-band {
  grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.35fr);
  padding: 14px 16px;
  gap: 12px;
}
.command-band-main {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
}
.command-band-main h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 6px; }
.command-band-main p { font-size: 13px; line-height: 1.45; }
.command-ring,
.ring { width: 88px; height: 88px; }
.command-ring span,
.ring span { width: 58px; height: 58px; font-size: 20px; }
.command-ring::before,
.ring::before { inset: -6px; }
.command-band-side {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.command-chip {
  min-height: 64px;
  padding: 9px 10px;
}
.command-chip strong { font-size: 19px; margin-top: 4px; }
.command-chip small { font-size: 11px; }
.command-band-meters { gap: 8px; }
.visual-meter { padding: 8px 10px; }
.visual-meter i { height: 8px; margin-top: 7px; }
.visual-kpi-grid.dashboard-visual {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.dashboard-capacity-warning {
  border-color: rgba(47, 143, 232, .24);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,248,255,.9));
}
.dashboard-capacity-warning.warn {
  border-color: rgba(245, 158, 11, .36);
  background: linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,255,255,.9));
}
.dashboard-capacity-warning.danger {
  border-color: rgba(220, 38, 38, .38);
  background: linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,255,255,.9));
}
.capacity-warning-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.8fr);
  gap: 14px;
  align-items: stretch;
}
.capacity-warning-status {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(120, 154, 186, .24);
}
.capacity-warning-status strong { font-size: 22px; color: var(--text); }
.capacity-warning-status p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.capacity-light {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: block;
  background: #10b981;
  box-shadow: 0 0 0 8px rgba(16,185,129,.12), 0 0 22px rgba(16,185,129,.32);
}
.capacity-light.warn {
  background: #f59e0b;
  box-shadow: 0 0 0 8px rgba(245,158,11,.14), 0 0 22px rgba(245,158,11,.36);
}
.capacity-light.danger {
  background: #dc2626;
  box-shadow: 0 0 0 8px rgba(220,38,38,.14), 0 0 22px rgba(220,38,38,.38);
}
.capacity-warning-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.capacity-warning-kpis div,
.capacity-group-chip {
  border: 1px solid rgba(120,154,186,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}
.capacity-warning-kpis div { padding: 12px; }
.capacity-warning-kpis span,
.capacity-group-chip small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.capacity-warning-kpis strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 22px;
}
.capacity-group-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.capacity-group-chip {
  text-align: left;
  padding: 10px 12px;
  min-height: 82px;
  color: var(--text);
}
.capacity-group-chip strong,
.capacity-group-chip span { display: flex; justify-content: space-between; gap: 8px; }
.capacity-group-chip span {
  margin-top: 6px;
  font-weight: 800;
  color: var(--primary-dark);
}
.capacity-group-chip i {
  display: block;
  height: 7px;
  margin: 7px 0;
  border-radius: 99px;
  background: #10b981;
}
.capacity-group-chip.warn i { background: #f59e0b; }
.capacity-group-chip.danger i { background: #dc2626; }
.capacity-operation-summary {
  overflow: hidden;
}
.capacity-operation-summary.embedded {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(120,154,186,.25);
}
.capacity-summary-head {
  align-items: flex-start;
}
.capacity-summary-head > div:first-child {
  display: grid;
  gap: 5px;
}
.capacity-summary-total {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 2px 0 10px;
  padding: 9px 11px;
  color: var(--muted);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(120,154,186,.2);
  border-radius: 6px;
}
.capacity-summary-total strong {
  margin-left: 4px;
  color: var(--text);
}
.capacity-operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.capacity-operation-card {
  width: 100%;
  min-width: 0;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  text-align: left;
  color: var(--text);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(120,154,186,.25);
  border-radius: 8px;
}
.capacity-operation-card:hover {
  border-color: var(--primary);
  box-shadow: 0 7px 18px rgba(0,94,184,.12);
}
.capacity-operation-card > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.capacity-operation-card strong,
.capacity-operation-card b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.capacity-operation-card b {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 20px;
}
.capacity-operation-card small {
  color: var(--muted);
  line-height: 1.4;
}
.capacity-operation-card > i {
  display: block;
  height: 7px;
  overflow: hidden;
  background: rgba(120,154,186,.18);
  border-radius: 99px;
}
.capacity-operation-card > i > em {
  display: block;
  height: 100%;
  background: #10b981;
  border-radius: inherit;
}
.capacity-operation-card.warn > i > em { background: #f59e0b; }
.capacity-operation-card.danger > i > em { background: #dc2626; }
.capacity-summary-modal .compact-stats {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}
.dashboard-visual .visual-kpi {
  min-height: 78px;
  padding: 11px 12px;
}
.dashboard-visual .visual-kpi strong { font-size: 23px; margin-top: 5px; }
.dashboard-visual .visual-kpi small { margin-top: 5px; font-size: 11px; }
.visual-dashboard-row {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: 12px;
  align-items: stretch;
}
.compact-progress-panel .visual-gauge {
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 10px;
}
.compact-progress-panel .visual-gauge h3 { font-size: 17px; }
.visual-donut-panel,
.visual-mini-chart,
.compact-progress-panel {
  min-height: 206px;
  border-color: rgba(0,143,213,.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,248,255,.86)),
    repeating-linear-gradient(90deg, rgba(0,94,184,.035) 0 1px, transparent 1px 32px);
  box-shadow: 0 14px 32px rgba(0,63,122,.10), inset 0 0 0 1px rgba(255,255,255,.7);
}
.visual-donut-wrap {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.tech-donut.donut {
  width: 118px;
  height: 118px;
  box-shadow: 0 0 24px rgba(0,194,255,.24), inset 0 0 0 10px rgba(255,255,255,.86);
}
.tech-donut.donut span { font-size: 22px; color: #003f7a; }
.visual-donut-legend {
  display: grid;
  gap: 7px;
  font-size: 12px;
}
.visual-donut-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #29445f;
}
.visual-donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 8px currentColor;
}
.visual-donut-legend span::first-letter { color: inherit; }
.visual-donut-legend b { margin-left: auto; color: #061a33; }
.mini-column-chart {
  min-height: 134px;
  display: grid;
  grid-template-columns: repeat(8, minmax(22px, 1fr));
  gap: 8px;
  align-items: end;
  padding-top: 10px;
}
.mini-column {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 4px;
  align-items: end;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.mini-column i {
  width: 100%;
  height: var(--h);
  min-height: 6px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #00c2ff, #0064c8 58%, #14b8a6);
  box-shadow: 0 0 14px rgba(0,194,255,.26);
}
.mini-column b {
  font-size: 10px;
  color: #003f7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-combo-chart {
  min-height: 168px;
  padding: 8px 4px 0;
}
.mini-combo-plot {
  position: relative;
  height: 112px;
  margin: 0 8px;
  border-bottom: 1px solid rgba(38, 114, 171, .35);
  background: repeating-linear-gradient(to top, rgba(61, 131, 181, .10) 0 1px, transparent 1px 28px);
}
.mini-column-bars,
.mini-column-labels {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(34px, 1fr));
  gap: 8px;
}
.mini-column-bars {
  position: absolute;
  inset: 0;
  align-items: end;
}
.mini-column-bar {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.mini-column-bar i {
  display: block;
  width: min(64%, 42px);
  height: var(--h);
  min-height: 5px;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(180deg, #75c9ff, #2789df 62%, #0870bd);
  box-shadow: 0 3px 10px rgba(20, 112, 184, .22);
}
.mini-trend-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mini-trend-line polyline {
  fill: none;
  stroke: #e15436;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mini-column-labels {
  margin: 6px 8px 0;
}
.mini-column-label {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
  color: #43647f;
}
.mini-column-label em {
  font-size: 11px;
  font-style: normal;
}
.mini-column-label b {
  overflow: hidden;
  color: #1d5f93;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-chart-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
}
@media (max-width: 720px) {
  .mini-combo-chart { overflow-x: auto; }
  .mini-combo-plot,
  .mini-column-labels { min-width: calc(var(--columns, 3) * 54px); }
}
@media (max-width: 1180px) {
  .command-band-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-dashboard-row { grid-template-columns: 1fr; }
  .capacity-warning-main,
  .capacity-warning-kpis { grid-template-columns: 1fr; }
  .capacity-summary-modal .compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .visual-command-band { grid-template-columns: 1fr; }
  .command-band-main { grid-template-columns: 1fr; }
  .visual-donut-wrap { grid-template-columns: 1fr; }
  .capacity-operation-grid,
  .capacity-summary-modal .compact-stats { grid-template-columns: 1fr; }
  .capacity-summary-head .toolbar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* Beta V22 chart sizing and filter fixes */
.command-hero,
.hero-actions,
.screen-filter-picker { overflow: visible; }
.command-hero { z-index: 40; }
.command-hero .screen-filter-picker { position: relative; z-index: 260; }
.command-hero .screen-filter-picker div,
.screen-filter-picker[open] div { z-index: 999; }
.visual-command-band { z-index: 1; }
.command-band-main p { display: none; }
.command-ring span,
.ring span { font-size: 15px; letter-spacing: 0; }
.visual-donut-panel .tech-donut.donut {
  background:
    radial-gradient(circle, #fff 0 48%, transparent 49%),
    conic-gradient(var(--segments));
}
.visual-donut-panel .tech-donut.donut span {
  color: #1f5f96;
  background: rgba(255,255,255,.92);
}
.visual-donut-panel .visual-donut-wrap {
  grid-template-columns: 112px minmax(0, 1fr);
}
.visual-donut-panel .tech-donut.donut { width: 104px; height: 104px; }
.visual-donut-legend { font-size: 11px; }
.columns-chart {
  min-height: clamp(220px, 22vh, 340px);
  align-items: end;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}
.column-item {
  min-width: 88px;
}
.column-track {
  min-height: 180px;
}
.line-chart {
  min-height: clamp(230px, 24vh, 360px);
}
.chart-panel.wide-chart,
.chart-panel {
  min-height: 330px;
}
.visual-mini-chart .mini-column-chart {
  min-height: 122px;
}
.visual-mini-chart .mini-column i {
  background: linear-gradient(180deg, #7dc8ff, #2f8fe8 58%, #31c7b2);
  box-shadow: 0 0 10px rgba(90,174,245,.20);
}
.visual-mini-chart .mini-column b,
.visual-mini-chart .mini-column span {
  color: #43647f;
}
@media (max-width: 900px) {
  .columns-chart { min-height: 220px; }
  .column-track { min-height: 170px; }
  .line-chart { min-height: 230px; }
}

/* Beta V22 chart proportion refinement */
html, body { max-width: 100%; overflow-x: hidden; }
.app-main, main, .content, .grid, .charts-grid, .overview-grid, .visual-dashboard-row, .panel { min-width: 0; }
.chart-panel { min-height: 380px; }
.chart-panel.wide-chart { min-height: 400px; }
.columns-chart {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 16px;
  min-height: 300px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 12px 12px;
}
.column-item {
  flex: 0 0 clamp(132px, 16vw, 210px);
  max-width: 220px;
  min-width: 132px;
}
.column-track {
  width: 100%;
  height: 230px;
  min-height: 230px;
  padding: 10px 12px 0;
}
.column-track i {
  width: min(72%, 112px);
  max-width: 112px;
  background: linear-gradient(180deg, #82c6ff, #2f8fe8 58%, #0d74cc);
}
.line-chart {
  width: 100%;
  height: clamp(300px, 31vh, 430px);
  min-height: 300px;
}
.visual-mini-chart .mini-column-chart {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(42px, 74px));
  min-height: 150px;
}
.screen-filter-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 900px) {
  .chart-panel, .chart-panel.wide-chart { min-height: 340px; }
  .columns-chart { justify-content: flex-start; min-height: 260px; }
  .column-track { height: 205px; min-height: 205px; }
  .line-chart { height: 300px; }
}

/* Beta V23 theme-driven navigation */
.sidebar {
  background: var(--sidebar-bg);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18), 10px 0 28px rgba(0,0,0,.10);
}
.brand span, .topbar p, .login-box label { color: var(--sidebar-muted); }
nav button { color: var(--sidebar-ink); }
nav button.active, nav button:hover {
  background: var(--nav-active);
  border-color: var(--nav-border);
}
.branch-switch,
.login-box { background: var(--nav-bg); border-color: var(--nav-border); }
.merged-combo-panel.full { grid-column: 1 / -1; }
.merged-combo-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 4px;
}
.merged-combo-chart {
  min-width: min(100%, 760px);
  height: clamp(320px, 34vh, 460px);
  display: block;
}
.merged-combo-bar {
  rx: 6px;
  filter: drop-shadow(0 8px 12px rgba(47,143,232,.18));
}
.merged-combo-line path {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px rgba(0,94,184,.18));
}
.merged-combo-line text {
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
}
.merged-combo-chart .axis-label {
  font-size: 12px;
  fill: #526b82;
  text-anchor: middle;
}
.analytics-time-row {
  grid-column: 1 / -1;
  grid-template-columns: minmax(520px, 2fr) minmax(260px, 1fr) minmax(260px, 1fr);
}
.settlement-cost-row {
  grid-template-columns: minmax(320px, 1fr);
}
@media (max-width: 1100px) {
  .analytics-time-row { grid-template-columns: 1fr; }
}

/* Beta V22 compact dashboard risk list */
.compact-risk-panel {
  padding: 12px 14px;
}
.compact-risk-panel .panel-head {
  margin-bottom: 8px;
}
.compact-risk-panel .risk-visual-list {
  gap: 5px;
}
.compact-risk-panel .risk-visual-item {
  min-height: 38px;
  padding: 6px 8px;
  grid-template-columns: minmax(110px, .8fr) minmax(180px, 1.4fr) 110px 80px auto;
  font-size: 12px;
  border-radius: 6px;
}
.compact-risk-panel .risk-visual-item .badge {
  min-height: 22px;
  padding: 2px 7px;
}
.compact-risk-panel h2 { font-size: 17px; }
@media (max-width: 900px) {
  .compact-risk-panel .risk-visual-item { grid-template-columns: 1fr; }
}

/* Beta V22 dashboard lower horizontal layout */
.dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(620px, 1.28fr);
  gap: 12px;
  align-items: stretch;
}
.dashboard-rank-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}
.dashboard-rank-stack .panel {
  min-height: 0;
  padding: 12px 14px;
}
.dashboard-rank-stack .panel-head {
  margin-bottom: 8px;
}
.dashboard-rank-stack .bar-list {
  display: grid;
  gap: 6px;
}
.dashboard-rank-stack .bar-row {
  grid-template-columns: minmax(46px, 88px) minmax(120px, 1fr) minmax(58px, auto);
  gap: 8px;
  font-size: 12px;
}
.dashboard-lower-grid .compact-risk-panel {
  min-width: 0;
}
.dashboard-lower-grid .compact-risk-panel .risk-visual-list {
  gap: 5px;
}
.dashboard-lower-grid .compact-risk-panel .risk-visual-item {
  min-height: 31px;
  padding: 5px 8px;
  grid-template-columns: minmax(105px, .55fr) minmax(240px, 1.5fr) 100px 76px auto;
}
@media (max-width: 1180px) {
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .dashboard-rank-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 760px) {
  .dashboard-rank-stack { grid-template-columns: 1fr; }
  .dashboard-lower-grid .compact-risk-panel .risk-visual-item { grid-template-columns: 1fr; }
}

/* Beta V22 scrollable risk list */
.dashboard-lower-grid .compact-risk-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 390px;
}
.dashboard-lower-grid .compact-risk-panel .risk-visual-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.dashboard-lower-grid .compact-risk-panel .risk-visual-list::-webkit-scrollbar { width: 8px; }
.dashboard-lower-grid .compact-risk-panel .risk-visual-list::-webkit-scrollbar-thumb { background: rgba(47,143,232,.38); border-radius: 999px; }

.operation-threshold-tool {
  position: relative;
  z-index: 5;
}
.operation-threshold-tool summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(0,94,184,.18);
  border-radius: 8px;
  background: linear-gradient(135deg, #f5fbff, #ffffff);
  color: #123a5f;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.operation-threshold-tool summary::-webkit-details-marker { display: none; }
.operation-threshold-tool summary strong { color: var(--primary); }
.operation-threshold-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 86vw);
  padding: 12px;
  border: 1px solid rgba(0,94,184,.2);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgba(0, 47, 92, .16);
}
.operation-threshold-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.operation-threshold-row input {
  width: 96px;
  min-width: 0;
}
.operation-threshold-popover p {
  margin: 8px 0 0;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .operation-threshold-tool { width: 100%; }
  .operation-threshold-tool summary { width: 100%; justify-content: center; }
  .operation-threshold-popover { left: 0; right: auto; }
}

.operation-time-order-fold {
  border-bottom: 1px solid #d4e3ee;
  background: var(--panel);
}
.operation-time-order-fold:first-child {
  border-top: 1px solid #d4e3ee;
}
.operation-time-order-fold summary {
  display: grid;
  grid-template-columns: 34px minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}
.operation-time-order-fold summary::-webkit-details-marker { display: none; }
.operation-time-order-fold summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #eef5fb;
  color: #0c4f8f;
  font-size: 18px;
  font-weight: 900;
}
.operation-time-order-fold[open] summary::before { content: "-"; }
.operation-time-order-fold summary input[type="checkbox"] {
  grid-column: 1;
  justify-self: end;
  width: 18px;
  height: 18px;
  margin-right: -2px;
  z-index: 1;
}
.operation-time-order-fold summary::before { grid-column: 1; }
.operation-time-order-fold summary strong {
  grid-column: 2;
  min-width: 0;
  color: #061827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operation-time-order-fold summary span {
  grid-column: 3;
  color: #20384e;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.operation-time-order-actions {
  grid-column: 4;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.operation-time-order-actions button {
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}.operation-time-order-fold:hover summary { background: #f6fbff; }
.operation-time-order-body {
  padding: 0 12px 10px 58px;
  background: #fbfdff;
}
.operation-time-order-body .table-wrap { margin-top: 0; }
@media (max-width: 900px) {
  .operation-time-order-fold summary {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .operation-time-order-fold summary span,
  .operation-time-order-actions {
    grid-column: 2;
    white-space: normal;
  }
  .operation-time-order-actions { justify-content: flex-start; flex-wrap: wrap; }
  .operation-time-order-body { padding-left: 12px; }
}


.theme-select {
  display: inline-grid;
  grid-template-columns: auto minmax(120px, 180px);
  align-items: center;
  gap: 8px;
}
.theme-select span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.theme-select select {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 6px 10px;
}
.theme-select-compact {
  grid-template-columns: minmax(110px, 150px);
}
.theme-select-compact span { display: none; }
html[data-theme="tech"] .visual-command-band,
html[data-theme="tech"] .screen-card,
html[data-theme="tech"] .screen-kpi {
  box-shadow: 0 0 0 1px rgba(11, 115, 217, 0.10), 0 16px 36px rgba(11, 115, 217, 0.16);
}
html[data-theme="eye"] .message-bell span { background: var(--primary); }







/* Beta V23 theme background and full-surface skin enhancement */
body {
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 90%, #ffffff), var(--bg));
  position: relative;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  background-image: var(--theme-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--theme-bg-opacity);
}
body::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), transparent 34%, color-mix(in srgb, var(--bg) 78%, transparent)),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 30%);
  opacity: .72;
}
.app-shell,
.auth-screen,
.toast-container,
.modal-mask,
.reminder-popover,
.employee-message-panel {
  position: relative;
  z-index: 1;
}
.app-main,
main,
.content,
.panel,
.chart-panel,
.visual-command-band,
.analytics-grid .panel,
.operation-time-visual .panel,
.sample-dashboard-panel,
.month-group,
.mobile-list-card,
.modal,
.drawer,
.employee-message-panel,
.dropdown-menu,
.table-wrap {
  background-color: var(--theme-glass);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent), inset 0 1px 0 rgba(255,255,255,.52);
}
.panel-soft,
.month-group-head,
.mobile-collapse-head,
thead,
.summary-card,
.stat,
.visual-kpi,
.kpi-card,
.toolbar,
.filter-bar,
.form-grid,
.lane,
.board-column {
  background-color: color-mix(in srgb, var(--panel-soft) 88%, transparent);
}
.sidebar {
  background: var(--sidebar-bg), var(--theme-bg-image);
  background-size: cover;
  background-position: center;
  box-shadow: 14px 0 34px color-mix(in srgb, var(--primary) 16%, transparent);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%, rgba(0,0,0,.08));
}
.sidebar > * { position: relative; z-index: 1; }
.bigscreen,
.screen-cast-mode .bigscreen {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 18%, var(--bg)), color-mix(in srgb, var(--bg) 82%, #ffffff)),
    var(--theme-bg-image);
  background-size: cover;
  background-position: center;
}
.bigscreen .screen-card,
.bigscreen .screen-kpi,
.screen-free-tile,
.workorder-card,
.order-card,
.kanban-card {
  background-color: color-mix(in srgb, var(--panel) 82%, transparent);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 15%, transparent), inset 0 0 24px var(--theme-card-glow);
}
html[data-theme="tech"] .bigscreen,
html[data-theme="tech"] .screen-cast-mode .bigscreen {
  background:
    linear-gradient(135deg, rgba(4,18,42,.94), rgba(6,58,108,.86)),
    var(--theme-bg-image);
  background-size: cover;
  background-position: center;
}
html[data-theme="tech"] .bigscreen .screen-card,
html[data-theme="tech"] .bigscreen .screen-kpi,
html[data-theme="tech"] .screen-free-tile {
  background-color: rgba(6, 28, 58, .78);
  color: #e8f5ff;
}
html[data-theme="cute"] .sidebar { background-blend-mode: soft-light, normal; }
html[data-theme="simple"] .sidebar { background-blend-mode: multiply, normal; }
html[data-theme="eye"] .sidebar { background-blend-mode: soft-light, normal; }
@media (max-width: 760px) {
  :root,
  html[data-theme="tech"],
  html[data-theme="cute"],
  html[data-theme="simple"],
  html[data-theme="eye"] {
    --theme-bg-opacity: .09;
    --theme-panel-alpha: .96;
    --theme-soft-alpha: .92;
  }
  body::after { opacity: .86; }
  .sidebar { background-size: 180% auto; }
}


/* Beta V23 theme contrast fix: keep non-tech themes readable and theme the command hero */
:root {
  --hero-bg: linear-gradient(120deg, #07559f 0%, #0b73d9 54%, #27b8c7 100%);
  --hero-ink: #ffffff;
  --hero-muted: #e6f6ff;
  --hero-border: rgba(47,143,232,.42);
}
html[data-theme="tech"] {
  --hero-bg: linear-gradient(120deg, #051a3c 0%, #0759b3 50%, #00a0ff 100%);
  --hero-ink: #f5fbff;
  --hero-muted: #cce8ff;
  --hero-border: rgba(74,222,255,.42);
}
html[data-theme="cute"] {
  --sidebar-bg: linear-gradient(180deg, #d95791 0%, #c3447c 54%, #8f2e5d 100%);
  --sidebar-ink: #fffafd;
  --sidebar-muted: #ffe0ee;
  --hero-bg: linear-gradient(120deg, #b93f78 0%, #df6fa3 52%, #7cb7e8 100%);
  --hero-ink: #fffafd;
  --hero-muted: #ffe8f3;
  --hero-border: rgba(223,111,163,.46);
  --theme-glass: rgba(255,255,255,.94);
}
html[data-theme="simple"] {
  --sidebar-bg: linear-gradient(180deg, #405d77 0%, #324b63 56%, #24394d 100%);
  --sidebar-ink: #f8fbfd;
  --sidebar-muted: #d9e4ec;
  --hero-bg: linear-gradient(120deg, #2d455d 0%, #4d6f91 58%, #8ca3b8 100%);
  --hero-ink: #ffffff;
  --hero-muted: #edf4f8;
  --hero-border: rgba(60,115,168,.42);
  --theme-glass: rgba(255,255,255,.95);
}
html[data-theme="eye"] {
  --sidebar-bg: linear-gradient(180deg, #24845d 0%, #1f6f50 56%, #174e3a 100%);
  --sidebar-ink: #f6fff9;
  --sidebar-muted: #d7f1df;
  --hero-bg: linear-gradient(120deg, #1f654a 0%, #2f8f68 54%, #7bc79c 100%);
  --hero-ink: #f6fff9;
  --hero-muted: #dcf6e5;
  --hero-border: rgba(47,143,104,.46);
  --theme-glass: rgba(255,255,255,.94);
}
.command-hero {
  background: var(--hero-bg) !important;
  border-color: var(--hero-border) !important;
  color: var(--hero-ink) !important;
}
.command-hero h2,
.command-hero .eyebrow {
  color: var(--hero-ink) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.command-hero p { color: var(--hero-muted) !important; }
.command-hero .screen-filter-picker summary { color: var(--hero-ink); border-color: rgba(255,255,255,.26); }
.sidebar,
.sidebar button,
.sidebar .nav-item,
.sidebar .branch-tab,
.sidebar a {
  color: var(--sidebar-ink);
}
.sidebar .muted,
.sidebar small,
.sidebar .nav-section-title { color: var(--sidebar-muted); }
.sidebar::after {
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02) 34%, rgba(0,0,0,.18));
}
html:not([data-theme="tech"]) .bigscreen .panel-head h2,
html:not([data-theme="tech"]) .bigscreen .column-value,
html:not([data-theme="tech"]) .bigscreen .point text,
html:not([data-theme="tech"]) .bigscreen .bar-row strong,
html:not([data-theme="tech"]) .bigscreen .screen-card,
html:not([data-theme="tech"]) .bigscreen .screen-kpi,
html:not([data-theme="tech"]) .bigscreen .workorder-card,
html:not([data-theme="tech"]) .bigscreen .order-card,
html:not([data-theme="tech"]) .bigscreen .kanban-card {
  color: var(--ink) !important;
}
html:not([data-theme="tech"]) .bigscreen .muted,
html:not([data-theme="tech"]) .bigscreen .column-item span,
html:not([data-theme="tech"]) .bigscreen .axis-label,
html:not([data-theme="tech"]) .bigscreen .bar-row span {
  color: var(--muted) !important;
}
html:not([data-theme="tech"]) .bigscreen .screen-card,
html:not([data-theme="tech"]) .bigscreen .screen-kpi,
html:not([data-theme="tech"]) .screen-free-tile {
  background: rgba(255,255,255,.92) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
}
html:not([data-theme="tech"]) .bigscreen {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 86%, #ffffff), color-mix(in srgb, var(--primary) 10%, var(--bg))),
    var(--theme-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
html[data-theme="cute"] body::before,
html[data-theme="eye"] body::before { opacity: .11; }
html[data-theme="simple"] body::before { opacity: .09; }

/* Beta V23 readable theme hard override */
html[data-theme="cute"] {
  --sidebar-bg: linear-gradient(180deg, rgba(255,246,250,.96) 0%, rgba(255,229,240,.94) 52%, rgba(246,212,226,.95) 100%);
  --sidebar-ink: #6f2449;
  --sidebar-muted: #8a4767;
  --ink: #321827;
  --muted: #78546a;
  --line: #efadc9;
  --panel: #fffdfd;
  --panel-soft: #fff4f9;
}
html[data-theme="eye"] {
  --sidebar-bg: linear-gradient(180deg, rgba(244,255,248,.96) 0%, rgba(218,243,227,.94) 54%, rgba(199,229,213,.95) 100%);
  --sidebar-ink: #174832;
  --sidebar-muted: #3f6d55;
  --ink: #132d22;
  --muted: #526b5d;
  --line: #9bd1b4;
  --panel: #ffffff;
  --panel-soft: #f2fbf5;
}
html[data-theme="simple"] {
  --ink: #182433;
  --muted: #536373;
  --line: #aebfce;
  --panel: #ffffff;
  --panel-soft: #f2f6f9;
}
html[data-theme="cute"] .sidebar,
html[data-theme="eye"] .sidebar {
  color: var(--sidebar-ink) !important;
  border-right: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
}
html[data-theme="cute"] .sidebar *,
html[data-theme="eye"] .sidebar * {
  color: inherit;
  text-shadow: none !important;
}
html[data-theme="cute"] .sidebar .nav-item,
html[data-theme="cute"] .sidebar .branch-tab,
html[data-theme="eye"] .sidebar .nav-item,
html[data-theme="eye"] .sidebar .branch-tab {
  color: var(--sidebar-ink) !important;
  background: rgba(255,255,255,.34);
  border-color: rgba(255,255,255,.42);
}
html[data-theme="cute"] .sidebar .nav-item.active,
html[data-theme="cute"] .sidebar .branch-tab.active {
  background: #ffffff !important;
  color: #9d2f66 !important;
  border-color: #e98ab7 !important;
}
html[data-theme="eye"] .sidebar .nav-item.active,
html[data-theme="eye"] .sidebar .branch-tab.active {
  background: #ffffff !important;
  color: #1f654a !important;
  border-color: #7cc49c !important;
}
html[data-theme="cute"] .sidebar .user-card,
html[data-theme="eye"] .sidebar .user-card {
  background: rgba(255,255,255,.58) !important;
  color: var(--sidebar-ink) !important;
  border-color: rgba(255,255,255,.62) !important;
}
html[data-theme="cute"] .sidebar .user-card button,
html[data-theme="eye"] .sidebar .user-card button {
  background: rgba(255,255,255,.82) !important;
  color: var(--sidebar-ink) !important;
}
html[data-theme="cute"] .bigscreen,
html[data-theme="eye"] .bigscreen,
html[data-theme="simple"] .bigscreen,
html[data-theme="cute"] body.screen-cast-mode .bigscreen,
html[data-theme="eye"] body.screen-cast-mode .bigscreen,
html[data-theme="simple"] body.screen-cast-mode .bigscreen {
  color: var(--ink) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, #ffffff), color-mix(in srgb, var(--primary) 8%, var(--bg))),
    var(--theme-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
html[data-theme="cute"] .bigscreen *,
html[data-theme="eye"] .bigscreen *,
html[data-theme="simple"] .bigscreen * {
  text-shadow: none !important;
}
html[data-theme="cute"] .bigscreen .screen-card,
html[data-theme="cute"] .bigscreen .screen-kpi,
html[data-theme="cute"] .screen-free-tile,
html[data-theme="eye"] .bigscreen .screen-card,
html[data-theme="eye"] .bigscreen .screen-kpi,
html[data-theme="eye"] .screen-free-tile,
html[data-theme="simple"] .bigscreen .screen-card,
html[data-theme="simple"] .bigscreen .screen-kpi,
html[data-theme="simple"] .screen-free-tile {
  background: rgba(255,255,255,.96) !important;
  color: var(--ink) !important;
  box-shadow: 0 14px 34px rgba(18,45,80,.13), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
html[data-theme="cute"] .bigscreen .screen-card,
html[data-theme="cute"] .bigscreen .screen-kpi,
html[data-theme="cute"] .screen-free-tile { border-color: #df6fa3 !important; }
html[data-theme="eye"] .bigscreen .screen-card,
html[data-theme="eye"] .bigscreen .screen-kpi,
html[data-theme="eye"] .screen-free-tile { border-color: #2f8f68 !important; }
html[data-theme="simple"] .bigscreen .screen-card,
html[data-theme="simple"] .bigscreen .screen-kpi,
html[data-theme="simple"] .screen-free-tile { border-color: #3c73a8 !important; }
html[data-theme="cute"] .bigscreen .panel-head h2,
html[data-theme="cute"] .bigscreen h1,
html[data-theme="cute"] .bigscreen h2,
html[data-theme="cute"] .bigscreen h3,
html[data-theme="cute"] .bigscreen strong,
html[data-theme="cute"] .bigscreen b,
html[data-theme="cute"] .bigscreen .column-value,
html[data-theme="cute"] .bigscreen .bar-row strong,
html[data-theme="eye"] .bigscreen .panel-head h2,
html[data-theme="eye"] .bigscreen h1,
html[data-theme="eye"] .bigscreen h2,
html[data-theme="eye"] .bigscreen h3,
html[data-theme="eye"] .bigscreen strong,
html[data-theme="eye"] .bigscreen b,
html[data-theme="eye"] .bigscreen .column-value,
html[data-theme="eye"] .bigscreen .bar-row strong,
html[data-theme="simple"] .bigscreen .panel-head h2,
html[data-theme="simple"] .bigscreen h1,
html[data-theme="simple"] .bigscreen h2,
html[data-theme="simple"] .bigscreen h3,
html[data-theme="simple"] .bigscreen strong,
html[data-theme="simple"] .bigscreen b,
html[data-theme="simple"] .bigscreen .column-value,
html[data-theme="simple"] .bigscreen .bar-row strong {
  color: var(--ink) !important;
}
html[data-theme="cute"] .bigscreen .muted,
html[data-theme="cute"] .bigscreen span,
html[data-theme="cute"] .bigscreen small,
html[data-theme="cute"] .bigscreen .axis-label,
html[data-theme="cute"] .bigscreen .column-item span,
html[data-theme="eye"] .bigscreen .muted,
html[data-theme="eye"] .bigscreen span,
html[data-theme="eye"] .bigscreen small,
html[data-theme="eye"] .bigscreen .axis-label,
html[data-theme="eye"] .bigscreen .column-item span,
html[data-theme="simple"] .bigscreen .muted,
html[data-theme="simple"] .bigscreen span,
html[data-theme="simple"] .bigscreen small,
html[data-theme="simple"] .bigscreen .axis-label,
html[data-theme="simple"] .bigscreen .column-item span {
  color: var(--muted) !important;
}
html[data-theme="cute"] .bigscreen a,
html[data-theme="cute"] .bigscreen .link { color: #b93f78 !important; }
html[data-theme="eye"] .bigscreen a,
html[data-theme="eye"] .bigscreen .link { color: #1f654a !important; }
html[data-theme="simple"] .bigscreen a,
html[data-theme="simple"] .bigscreen .link { color: #2a527a !important; }
html[data-theme="cute"] .bigscreen .status-pill,
html[data-theme="eye"] .bigscreen .status-pill,
html[data-theme="simple"] .bigscreen .status-pill {
  background: color-mix(in srgb, var(--primary) 12%, #ffffff) !important;
  color: var(--primary-dark) !important;
}

/* Beta V23 final bigscreen readability override for cute and eye themes */
html[data-theme="cute"] body .bigscreen,
html[data-theme="cute"] body .bigscreen :not(button):not(.primary):not(.danger):not(.secondary),
html[data-theme="eye"] body .bigscreen,
html[data-theme="eye"] body .bigscreen :not(button):not(.primary):not(.danger):not(.secondary) {
  color: var(--ink) !important;
  text-shadow: none !important;
}
html[data-theme="cute"] body .bigscreen .muted,
html[data-theme="cute"] body .bigscreen small,
html[data-theme="cute"] body .bigscreen .axis-label,
html[data-theme="cute"] body .bigscreen .column-item span,
html[data-theme="cute"] body .bigscreen .bar-row span,
html[data-theme="eye"] body .bigscreen .muted,
html[data-theme="eye"] body .bigscreen small,
html[data-theme="eye"] body .bigscreen .axis-label,
html[data-theme="eye"] body .bigscreen .column-item span,
html[data-theme="eye"] body .bigscreen .bar-row span {
  color: var(--muted) !important;
}
html[data-theme="cute"] body .bigscreen .screen-card,
html[data-theme="cute"] body .bigscreen .screen-kpi,
html[data-theme="cute"] body .bigscreen .panel,
html[data-theme="eye"] body .bigscreen .screen-card,
html[data-theme="eye"] body .bigscreen .screen-kpi,
html[data-theme="eye"] body .bigscreen .panel {
  background: rgba(255,255,255,.98) !important;
  color: var(--ink) !important;
}
html[data-theme="cute"] body .bigscreen .screen-head button,
html[data-theme="cute"] body .bigscreen .toolbar button,
html[data-theme="cute"] body .bigscreen button.secondary {
  color: #7a3659 !important;
  background: rgba(255,244,249,.96) !important;
  border-color: #efadc9 !important;
}
html[data-theme="eye"] body .bigscreen .screen-head button,
html[data-theme="eye"] body .bigscreen .toolbar button,
html[data-theme="eye"] body .bigscreen button.secondary {
  color: #174832 !important;
  background: rgba(242,251,245,.96) !important;
  border-color: #9bd1b4 !important;
}
html[data-theme="cute"] body .bigscreen button.primary,
html[data-theme="cute"] body .bigscreen .primary {
  color: #fff !important;
  background: #c3447c !important;
}
html[data-theme="eye"] body .bigscreen button.primary,
html[data-theme="eye"] body .bigscreen .primary {
  color: #fff !important;
  background: #1f6f50 !important;
}

/* Beta V23 ultra readability patch for light themes */
html[data-theme="cute"] .sidebar,
html[data-theme="cute"] .sidebar :is(button, a, span, div, strong, b, small, label, p),
html[data-theme="eye"] .sidebar,
html[data-theme="eye"] .sidebar :is(button, a, span, div, strong, b, small, label, p) {
  color: var(--sidebar-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="cute"] .sidebar .nav-item.active,
html[data-theme="cute"] .sidebar .branch-tab.active,
html[data-theme="eye"] .sidebar .nav-item.active,
html[data-theme="eye"] .sidebar .branch-tab.active {
  background: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
}
html[data-theme="cute"] .bigscreen .screen-free-tile,
html[data-theme="cute"] .bigscreen .screen-free-tile *,
html[data-theme="cute"] .bigscreen .screen-card,
html[data-theme="cute"] .bigscreen .screen-card *,
html[data-theme="cute"] .bigscreen .screen-kpi,
html[data-theme="cute"] .bigscreen .screen-kpi *,
html[data-theme="cute"] .bigscreen .panel,
html[data-theme="cute"] .bigscreen .panel *,
html[data-theme="cute"] .bigscreen .workorder-card,
html[data-theme="cute"] .bigscreen .workorder-card *,
html[data-theme="eye"] .bigscreen .screen-free-tile,
html[data-theme="eye"] .bigscreen .screen-free-tile *,
html[data-theme="eye"] .bigscreen .screen-card,
html[data-theme="eye"] .bigscreen .screen-card *,
html[data-theme="eye"] .bigscreen .screen-kpi,
html[data-theme="eye"] .bigscreen .screen-kpi *,
html[data-theme="eye"] .bigscreen .panel,
html[data-theme="eye"] .bigscreen .panel *,
html[data-theme="eye"] .bigscreen .workorder-card,
html[data-theme="eye"] .bigscreen .workorder-card *,
html[data-theme="simple"] .bigscreen .screen-free-tile,
html[data-theme="simple"] .bigscreen .screen-free-tile *,
html[data-theme="simple"] .bigscreen .screen-card,
html[data-theme="simple"] .bigscreen .screen-card *,
html[data-theme="simple"] .bigscreen .screen-kpi,
html[data-theme="simple"] .bigscreen .screen-kpi *,
html[data-theme="simple"] .bigscreen .panel,
html[data-theme="simple"] .bigscreen .panel * {
  color: var(--ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="cute"] .bigscreen .muted,
html[data-theme="cute"] .bigscreen .muted *,
html[data-theme="cute"] .bigscreen small,
html[data-theme="cute"] .bigscreen .axis-label,
html[data-theme="eye"] .bigscreen .muted,
html[data-theme="eye"] .bigscreen .muted *,
html[data-theme="eye"] .bigscreen small,
html[data-theme="eye"] .bigscreen .axis-label,
html[data-theme="simple"] .bigscreen .muted,
html[data-theme="simple"] .bigscreen .muted *,
html[data-theme="simple"] .bigscreen small,
html[data-theme="simple"] .bigscreen .axis-label {
  color: var(--muted) !important;
  opacity: 1 !important;
}
html[data-theme="cute"] .bigscreen .screen-free-tile,
html[data-theme="cute"] .bigscreen .screen-card,
html[data-theme="cute"] .bigscreen .screen-kpi {
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(255,246,250,.97)) !important;
  border-color: #d95791 !important;
}
html[data-theme="eye"] .bigscreen .screen-free-tile,
html[data-theme="eye"] .bigscreen .screen-card,
html[data-theme="eye"] .bigscreen .screen-kpi {
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(244,255,248,.97)) !important;
  border-color: #24845d !important;
}
html[data-theme="simple"] .bigscreen .screen-free-tile,
html[data-theme="simple"] .bigscreen .screen-card,
html[data-theme="simple"] .bigscreen .screen-kpi {
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(242,246,249,.97)) !important;
  border-color: #405d77 !important;
}
html[data-theme="cute"] .bigscreen button,
html[data-theme="eye"] .bigscreen button,
html[data-theme="simple"] .bigscreen button {
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="cute"] .bigscreen .status-pill,
html[data-theme="cute"] .bigscreen .badge,
html[data-theme="eye"] .bigscreen .status-pill,
html[data-theme="eye"] .bigscreen .badge,
html[data-theme="simple"] .bigscreen .status-pill,
html[data-theme="simple"] .bigscreen .badge {
  color: var(--primary-dark) !important;
  background: color-mix(in srgb, var(--primary) 14%, #ffffff) !important;
}

/* Beta V23 default bigscreen readability patch */
html:not([data-theme="tech"]) body .bigscreen,
html:not([data-theme="tech"]) body .bigscreen .screen-free-tile,
html:not([data-theme="tech"]) body .bigscreen .screen-free-tile *,
html:not([data-theme="tech"]) body .bigscreen .screen-card,
html:not([data-theme="tech"]) body .bigscreen .screen-card *,
html:not([data-theme="tech"]) body .bigscreen .screen-kpi,
html:not([data-theme="tech"]) body .bigscreen .screen-kpi *,
html:not([data-theme="tech"]) body .bigscreen .panel,
html:not([data-theme="tech"]) body .bigscreen .panel *,
html:not([data-theme="tech"]) body .bigscreen .workorder-card,
html:not([data-theme="tech"]) body .bigscreen .workorder-card *,
html:not([data-theme="tech"]) body .bigscreen .order-card,
html:not([data-theme="tech"]) body .bigscreen .order-card *,
html:not([data-theme="tech"]) body .bigscreen .kanban-card,
html:not([data-theme="tech"]) body .bigscreen .kanban-card * {
  color: var(--ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html:not([data-theme="tech"]) body .bigscreen .muted,
html:not([data-theme="tech"]) body .bigscreen .muted *,
html:not([data-theme="tech"]) body .bigscreen small,
html:not([data-theme="tech"]) body .bigscreen .axis-label,
html:not([data-theme="tech"]) body .bigscreen .column-item span,
html:not([data-theme="tech"]) body .bigscreen .bar-row span {
  color: var(--muted) !important;
  opacity: 1 !important;
}
html:not([data-theme="tech"]) body .bigscreen .screen-free-tile,
html:not([data-theme="tech"]) body .bigscreen .screen-card,
html:not([data-theme="tech"]) body .bigscreen .screen-kpi,
html:not([data-theme="tech"]) body .bigscreen .panel {
  background: linear-gradient(135deg, rgba(255,255,255,.99), color-mix(in srgb, var(--panel-soft) 72%, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line)) !important;
  box-shadow: 0 14px 34px rgba(0,63,122,.14), inset 0 0 0 1px rgba(255,255,255,.86) !important;
}
html:not([data-theme="tech"]) body .bigscreen .screen-free-tile .screen-head,
html:not([data-theme="tech"]) body .bigscreen .screen-card .panel-head,
html:not([data-theme="tech"]) body .bigscreen .panel .panel-head {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
}
html:not([data-theme="tech"]) body .bigscreen button.secondary,
html:not([data-theme="tech"]) body .bigscreen .screen-head button,
html:not([data-theme="tech"]) body .bigscreen .toolbar button {
  color: var(--primary-dark) !important;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
  opacity: 1 !important;
}
html:not([data-theme="tech"]) body .bigscreen button.primary,
html:not([data-theme="tech"]) body .bigscreen .primary {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  opacity: 1 !important;
}

/* Beta V23 bigscreen themed tiles and donut number contrast */
html:not([data-theme="tech"]) body .bigscreen .donut span,
html:not([data-theme="tech"]) body .bigscreen .tech-donut.donut span,
html:not([data-theme="tech"]) body .bigscreen .visual-donut-panel .tech-donut.donut span {
  color: #ffffff !important;
  background: transparent !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
}
html:not([data-theme="tech"]) body .bigscreen .donut,
html:not([data-theme="tech"]) body .bigscreen .tech-donut.donut {
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.92), 0 14px 28px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
html:not([data-theme="tech"]) body .bigscreen .screen-free-tile,
html:not([data-theme="tech"]) body .bigscreen .screen-card,
html:not([data-theme="tech"]) body .bigscreen .screen-kpi,
html:not([data-theme="tech"]) body .bigscreen .panel {
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, #ffffff), color-mix(in srgb, var(--panel-soft) 88%, #ffffff)),
    var(--theme-bg-image) !important;
  background-size: auto, cover !important;
  background-position: center !important;
  background-blend-mode: normal, soft-light !important;
}
html[data-theme="default"] body .bigscreen .screen-free-tile,
html[data-theme="default"] body .bigscreen .screen-card,
html[data-theme="default"] body .bigscreen .screen-kpi,
html:not([data-theme]) body .bigscreen .screen-free-tile,
html:not([data-theme]) body .bigscreen .screen-card,
html:not([data-theme]) body .bigscreen .screen-kpi {
  border-color: #2f8fe8 !important;
  box-shadow: 0 16px 38px rgba(0,94,184,.18), inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
html[data-theme="cute"] body .bigscreen .screen-free-tile,
html[data-theme="cute"] body .bigscreen .screen-card,
html[data-theme="cute"] body .bigscreen .screen-kpi,
html[data-theme="cute"] body .bigscreen .panel {
  background-image:
    linear-gradient(135deg, rgba(255,244,249,.98), rgba(255,255,255,.94)),
    var(--theme-bg-image) !important;
  border-color: #d95791 !important;
  box-shadow: 0 16px 38px rgba(195,68,124,.16), inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
html[data-theme="eye"] body .bigscreen .screen-free-tile,
html[data-theme="eye"] body .bigscreen .screen-card,
html[data-theme="eye"] body .bigscreen .screen-kpi,
html[data-theme="eye"] body .bigscreen .panel {
  background-image:
    linear-gradient(135deg, rgba(242,251,245,.98), rgba(255,255,255,.94)),
    var(--theme-bg-image) !important;
  border-color: #24845d !important;
  box-shadow: 0 16px 38px rgba(31,111,80,.16), inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
html[data-theme="simple"] body .bigscreen .screen-free-tile,
html[data-theme="simple"] body .bigscreen .screen-card,
html[data-theme="simple"] body .bigscreen .screen-kpi,
html[data-theme="simple"] body .bigscreen .panel {
  background-image:
    linear-gradient(135deg, rgba(242,246,249,.98), rgba(255,255,255,.94)),
    var(--theme-bg-image) !important;
  border-color: #405d77 !important;
  box-shadow: 0 16px 38px rgba(45,69,93,.15), inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
html:not([data-theme="tech"]) body .bigscreen .screen-row,
html:not([data-theme="tech"]) body .bigscreen .screen-workorder-row,
html:not([data-theme="tech"]) body .bigscreen .sample-screen-row,
html:not([data-theme="tech"]) body .bigscreen .bar-row {
  background: rgba(255,255,255,.58) !important;
  border-color: color-mix(in srgb, var(--primary) 14%, var(--line)) !important;
}

/* Beta V23 bigscreen toolbar disabled-button readability */
body .bigscreen .screen-head button,
body .bigscreen .screen-head .secondary,
body .bigscreen .screen-head-actions button,
body .bigscreen .toolbar button,
body .bigscreen button.secondary {
  color: var(--primary-dark) !important;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line)) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body .bigscreen .screen-head button:disabled,
body .bigscreen .screen-head .secondary:disabled,
body .bigscreen .screen-head-actions button:disabled,
body .bigscreen .toolbar button:disabled,
body .bigscreen button.secondary:disabled,
body .bigscreen button[disabled] {
  color: color-mix(in srgb, var(--primary-dark) 58%, #51606f) !important;
  background: rgba(255,255,255,.76) !important;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line)) !important;
  opacity: .88 !important;
  filter: none !important;
}
html[data-theme="cute"] body .bigscreen button:disabled,
html[data-theme="cute"] body .bigscreen button[disabled] {
  color: #8a4767 !important;
  background: rgba(255,247,251,.82) !important;
  border-color: #efc0d5 !important;
}
html[data-theme="eye"] body .bigscreen button:disabled,
html[data-theme="eye"] body .bigscreen button[disabled] {
  color: #3f6d55 !important;
  background: rgba(246,255,249,.82) !important;
  border-color: #b8dec8 !important;
}
html[data-theme="simple"] body .bigscreen button:disabled,
html[data-theme="simple"] body .bigscreen button[disabled] {
  color: #536373 !important;
  background: rgba(248,251,253,.84) !important;
  border-color: #c9d5df !important;
}
body .bigscreen .screen-head a,
body .bigscreen .screen-head span,
body .bigscreen .screen-head strong,
body .bigscreen .screen-head-actions,
body .bigscreen .screen-toolbar,
body .bigscreen .screen-toolbar *:not(button) {
  color: var(--ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Beta V23 absolute final contrast for donut center and disabled toolbar text */
body .bigscreen .donut > span,
body .bigscreen .tech-donut.donut > span,
body .bigscreen .visual-donut-panel .donut > span,
body .bigscreen .visual-donut-panel .tech-donut.donut > span,
body .bigscreen .ring > span,
body .bigscreen .command-ring > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
  mix-blend-mode: normal !important;
}
body .bigscreen button[disabled],
body .bigscreen button:disabled,
body .bigscreen .secondary[disabled],
body .bigscreen .secondary:disabled,
body .bigscreen .screen-head button[disabled],
body .bigscreen .screen-head button:disabled,
body .bigscreen .screen-head-actions button[disabled],
body .bigscreen .screen-head-actions button:disabled,
body .bigscreen .toolbar button[disabled],
body .bigscreen .toolbar button:disabled,
body .bigscreen .disabled,
body .bigscreen [aria-disabled="true"] {
  color: #52677b !important;
  -webkit-text-fill-color: #52677b !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(82,103,123,.26) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-theme="default"] body .bigscreen button[disabled],
html[data-theme="default"] body .bigscreen button:disabled,
html:not([data-theme]) body .bigscreen button[disabled],
html:not([data-theme]) body .bigscreen button:disabled {
  color: #2f5f8f !important;
  -webkit-text-fill-color: #2f5f8f !important;
  background: rgba(244,250,255,.88) !important;
  border-color: #b7d7f2 !important;
}
html[data-theme="simple"] body .bigscreen button[disabled],
html[data-theme="simple"] body .bigscreen button:disabled {
  color: #46596c !important;
  -webkit-text-fill-color: #46596c !important;
  background: rgba(248,251,253,.9) !important;
  border-color: #b8c7d4 !important;
}
html[data-theme="cute"] body .bigscreen button[disabled],
html[data-theme="cute"] body .bigscreen button:disabled {
  color: #8a4767 !important;
  -webkit-text-fill-color: #8a4767 !important;
  background: rgba(255,247,251,.9) !important;
  border-color: #e9b4cc !important;
}
html[data-theme="eye"] body .bigscreen button[disabled],
html[data-theme="eye"] body .bigscreen button:disabled {
  color: #3d6952 !important;
  -webkit-text-fill-color: #3d6952 !important;
  background: rgba(246,255,249,.9) !important;
  border-color: #a9d6bc !important;
}
body .bigscreen .screen-head-actions button:not(:disabled),
body .bigscreen .toolbar button:not(:disabled),
body .bigscreen .screen-head button:not(:disabled) {
  -webkit-text-fill-color: currentColor !important;
}

/* Beta V23 direct color fix for bigscreen summary controls */
body .bigscreen .screen-filter-picker > summary,
body .bigscreen .screen-tile-picker > summary,
body .bigscreen .screen-style-picker > summary,
body .bigscreen details > summary {
  color: var(--primary-dark) !important;
  -webkit-text-fill-color: var(--primary-dark) !important;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line)) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-theme="default"] body .bigscreen .screen-filter-picker > summary,
html[data-theme="default"] body .bigscreen .screen-tile-picker > summary,
html[data-theme="default"] body .bigscreen .screen-style-picker > summary,
html:not([data-theme]) body .bigscreen .screen-filter-picker > summary,
html:not([data-theme]) body .bigscreen .screen-tile-picker > summary,
html:not([data-theme]) body .bigscreen .screen-style-picker > summary {
  color: #064c8f !important;
  -webkit-text-fill-color: #064c8f !important;
  background: #eef7ff !important;
  border-color: #8fc4f1 !important;
}
html[data-theme="simple"] body .bigscreen .screen-filter-picker > summary,
html[data-theme="simple"] body .bigscreen .screen-tile-picker > summary,
html[data-theme="simple"] body .bigscreen .screen-style-picker > summary {
  color: #2a527a !important;
  -webkit-text-fill-color: #2a527a !important;
  background: #f2f6f9 !important;
  border-color: #9fb5c8 !important;
}
html[data-theme="cute"] body .bigscreen .screen-filter-picker > summary,
html[data-theme="cute"] body .bigscreen .screen-tile-picker > summary,
html[data-theme="cute"] body .bigscreen .screen-style-picker > summary {
  color: #9d2f66 !important;
  -webkit-text-fill-color: #9d2f66 !important;
  background: #fff1f7 !important;
  border-color: #df6fa3 !important;
}
html[data-theme="eye"] body .bigscreen .screen-filter-picker > summary,
html[data-theme="eye"] body .bigscreen .screen-tile-picker > summary,
html[data-theme="eye"] body .bigscreen .screen-style-picker > summary {
  color: #1f654a !important;
  -webkit-text-fill-color: #1f654a !important;
  background: #f2fbf5 !important;
  border-color: #74bd93 !important;
}

/* Beta V23 settlement row actions folded and account buttons readable */
.row-action-fold {
  position: relative;
  display: inline-block;
}
.row-action-fold > summary {
  list-style: none;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.row-action-fold > summary::-webkit-details-marker { display: none; }
.row-action-fold[open] > summary {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
}
.row-action-fold .inline-actions {
  position: absolute;
  z-index: 80;
  right: 0;
  top: calc(100% + 6px);
  width: min(520px, 72vw);
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 34px rgba(0, 35, 70, .18);
  justify-content: flex-start;
}
.settlement-cost-actions {
  min-width: 86px;
  width: 86px;
  overflow: visible;
}
.settlement-cost-actions .inline-actions button {
  min-height: 28px;
  padding: 4px 8px;
}
.sidebar .user-card button,
.sidebar .user-card button:disabled,
.sidebar .user-card button[disabled] {
  color: var(--primary-dark) !important;
  -webkit-text-fill-color: var(--primary-dark) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="tech"] .sidebar .user-card button,
html[data-theme="tech"] .sidebar .user-card button:disabled,
html[data-theme="tech"] .sidebar .user-card button[disabled],
html[data-theme="default"] .sidebar .user-card button,
html[data-theme="default"] .sidebar .user-card button:disabled,
html[data-theme="default"] .sidebar .user-card button[disabled],
html:not([data-theme]) .sidebar .user-card button,
html:not([data-theme]) .sidebar .user-card button:disabled,
html:not([data-theme]) .sidebar .user-card button[disabled] {
  color: #064c8f !important;
  -webkit-text-fill-color: #064c8f !important;
  background: rgba(244,250,255,.92) !important;
}

/* Beta V23 final account area text visibility */
.sidebar > div:last-child button,
.sidebar > div:last-child button:disabled,
.sidebar > div:last-child button[disabled],
.sidebar [id="currentUser"] ~ button,
.sidebar [id="currentRole"] ~ button,
.sidebar #currentUser,
.sidebar #currentRole,
.sidebar .topbar button,
.sidebar .topbar button:disabled,
.sidebar .topbar button[disabled] {
  color: #064c8f !important;
  -webkit-text-fill-color: #064c8f !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
.sidebar > div:last-child button,
.sidebar > div:last-child button:disabled,
.sidebar > div:last-child button[disabled] {
  background: rgba(244,250,255,.96) !important;
  border-color: rgba(183,215,242,.75) !important;
}
html[data-theme="cute"] .sidebar > div:last-child button,
html[data-theme="cute"] .sidebar > div:last-child button:disabled,
html[data-theme="cute"] .sidebar > div:last-child button[disabled] {
  color: #8a4767 !important;
  -webkit-text-fill-color: #8a4767 !important;
  background: rgba(255,247,251,.96) !important;
}
html[data-theme="eye"] .sidebar > div:last-child button,
html[data-theme="eye"] .sidebar > div:last-child button:disabled,
html[data-theme="eye"] .sidebar > div:last-child button[disabled] {
  color: #1f654a !important;
  -webkit-text-fill-color: #1f654a !important;
  background: rgba(246,255,249,.96) !important;
}
html[data-theme="simple"] .sidebar > div:last-child button,
html[data-theme="simple"] .sidebar > div:last-child button:disabled,
html[data-theme="simple"] .sidebar > div:last-child button[disabled] {
  color: #2a527a !important;
  -webkit-text-fill-color: #2a527a !important;
  background: rgba(248,251,253,.96) !important;
}

/* Beta V23 equipment runtime statistics */
.equipment-runtime-panel .equipment-runtime-toolbar {
  justify-content: flex-start;
  margin: 8px 0 12px;
}
.equipment-runtime-toolbar label {
  display: inline-grid;
  grid-template-columns: auto minmax(130px, 160px);
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.equipment-runtime-toolbar input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  background: var(--panel);
  color: var(--ink);
}
.equipment-runtime-panel .overview-grid {
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
  margin-top: 12px;
}
@media (max-width: 900px) {
  .equipment-runtime-panel .overview-grid { grid-template-columns: 1fr; }
  .equipment-runtime-toolbar label { grid-template-columns: 1fr; }
}

button.secondary.active,
button.secondary.is-active {
  border-color: var(--theme-accent, #2563eb);
  background: color-mix(in srgb, var(--theme-accent, #2563eb) 14%, #ffffff);
  color: var(--theme-accent-strong, #1d4ed8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #2563eb) 18%, transparent);
}

.drill-window-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

.drill-summary {
  margin: 0 0 12px;
}

.schedule-gantt { display: grid; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.schedule-gantt-row { display: grid; grid-template-columns: 150px minmax(680px, 1fr); align-items: stretch; gap: 10px; min-width: 860px; }
.schedule-gantt-machine { position: sticky; left: 0; z-index: 1; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--panel-bg, #fff) 86%, var(--primary, #2f8fe8)); border: 1px solid var(--line, #cfe1f5); font-weight: 700; }
.schedule-gantt-lane {
  position: relative;
  min-height: 74px;
  padding: 24px 8px 8px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(47,143,232,.10) 0, rgba(47,143,232,.10) 1px, transparent 1px, transparent calc(100% / var(--schedule-days, 14))),
    color-mix(in srgb, var(--panel-bg, #fff) 80%, transparent);
  border: 1px dashed var(--line, #cfe1f5);
}
.schedule-gantt-lane > span {
  position: absolute;
  top: 5px;
  height: 16px;
  padding-left: 3px;
  border-left: 1px solid rgba(47,143,232,.18);
  color: var(--muted);
  font-size: 10px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
}
.schedule-gantt-lane > span.offday {
  background: rgba(245, 158, 11, .10);
  color: #9a5b00;
}
.schedule-block { position: absolute; top: 28px; min-width: 42px; max-width: none; min-height: 54px; border: 0; border-radius: 8px; padding: 8px 10px; background: linear-gradient(135deg, #2f8fe8, #7bb9f1); color: #fff; text-align: left; box-shadow: 0 8px 18px rgba(35, 102, 180, .18); cursor: pointer; }
.schedule-block strong, .schedule-block small, .schedule-block span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-block small { opacity: .88; margin-top: 4px; }
.schedule-block.outsource { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #2f1b00; }
.schedule-block.locked { background: linear-gradient(135deg, #64748b, #94a3b8); color: #fff; }
.scheduling-page .visual-kpi-grid.full { grid-column: 1 / -1; }

.scheduling-page .panel.full:first-child { padding: 14px 16px; }
.scheduling-page .visual-kpi-grid.full { grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
.scheduling-page .visual-kpi { min-height: 72px; padding: 10px 12px; }
.scheduling-page .visual-kpi strong { font-size: 24px; margin-top: 4px; }
.scheduling-page .visual-kpi small { margin-top: 3px; font-size: 11px; }
.scheduling-page .schedule-gantt { gap: 7px; max-height: 360px; }
.scheduling-page .schedule-gantt-row { grid-template-columns: 112px minmax(520px, 1fr); gap: 6px; min-width: 680px; }
.scheduling-page .schedule-gantt-machine { padding: 8px 10px; font-size: 13px; min-height: 42px; }
.scheduling-page .schedule-gantt-lane { min-height: 90px; padding: 24px 6px 6px; }
.scheduling-page .schedule-block { min-width: 38px; padding: 6px 8px; border-radius: 7px; box-shadow: 0 6px 14px rgba(35, 102, 180, .14); }
.scheduling-page .schedule-block strong { font-size: 13px; }
.scheduling-page .schedule-block small, .scheduling-page .schedule-block span { font-size: 11px; margin-top: 2px; }
.schedule-gantt-full-panel { height: calc(100vh - 130px); display: flex; flex-direction: column; }
.schedule-gantt-full-panel .panel-head { flex: 0 0 auto; }
.schedule-gantt-full {
  flex: 1 1 auto;
  min-height: 520px;
  max-height: none;
  overflow: auto;
  padding: 8px 8px 12px;
}
.schedule-gantt-full .schedule-gantt-row {
  grid-template-columns: 180px minmax(1600px, 1fr);
  min-width: 1820px;
}
.schedule-gantt-full .schedule-gantt-lane { min-height: 110px; }
.schedule-gantt-full .schedule-block { min-height: 64px; }
.schedule-queue-summary {
  margin-top: 12px;
  border: 1px solid var(--line, #d8e6f3);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg, #fff) 92%, var(--primary, #2f8fe8));
}
.schedule-queue-summary summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 800;
  color: var(--text, #102033);
}
.schedule-queue-summary table { margin: 0; }
.schedule-daily-summary {
  margin-top: 12px;
  border: 1px solid var(--line, #d8e6f3);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg, #fff) 92%, var(--primary, #2f8fe8));
  overflow: hidden;
}
.schedule-daily-summary > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 800;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.schedule-daily-summary > summary span {
  color: var(--muted, #60758a);
  font-weight: 700;
}
.schedule-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schedule-sort-toggle button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}
.schedule-day-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line, #d8e6f3);
}
.schedule-day-fold {
  border: 1px solid var(--line, #d8e6f3);
  border-radius: 8px;
  background: var(--panel-bg, #fff);
  overflow: hidden;
}
.schedule-day-fold > summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 120px 70px 80px minmax(260px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  font-weight: 700;
}
.schedule-day-fold[open] > summary {
  background: color-mix(in srgb, var(--panel-bg, #fff) 84%, var(--primary, #2f8fe8));
}
.schedule-day-fold small {
  color: var(--muted, #60758a);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-day-fold .table-wrap {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}
.risk-reason-summary { justify-content: flex-start; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.risk-reason-summary .pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, var(--panel-bg, #fff));
  color: var(--text, #102033);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 28%, var(--line, #d8e6f3));
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 900px) { .scheduling-page .visual-kpi-grid.full { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.schedule-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel, #fff) 92%, var(--primary, #2f8fe8)); }
.schedule-calendar-day { min-height: 54px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--text, #102033); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.schedule-calendar-day strong { font-size: 14px; }
.schedule-calendar-day small { font-size: 11px; color: var(--muted, #64748b); }
.schedule-calendar-day.off { background: #f1f5f9; color: #64748b; }
.schedule-calendar-day.holiday { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.schedule-calendar-day.employee-off { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.scheduling-calendar-tools { display: flex; align-items: center; gap: 10px; }
.scheduling-calendar-panel { padding: 0; overflow: hidden; }
.scheduling-calendar-panel summary { cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.scheduling-calendar-panel[open] summary { background: color-mix(in srgb, var(--panel, #fff) 88%, var(--primary, #2f8fe8)); }
.scheduling-calendar-panel .panel-head, .scheduling-calendar-panel .form-grid { padding: 12px 14px; }
.collapsible-visual-block { padding: 0; overflow: hidden; }
.collapsible-visual-block summary { cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.collapsible-visual-block[open] summary { background: color-mix(in srgb, var(--panel, #fff) 88%, var(--primary, #2f8fe8)); }
.collapsible-visual-body { padding: 12px 14px; }

/* Beta V24 Rev3: equipment mode switch and scheduling gantt readability */
.equipment-mode-tabs { margin: 0 0 12px; padding: 10px 12px; background: color-mix(in srgb, var(--panel-bg, #fff) 82%, var(--primary, #2f8fe8)); border: 1px solid var(--line, #cfe1f5); border-radius: 8px; }
.scheduling-page .schedule-gantt-machine { word-break: break-word; line-height: 1.35; }


/* Beta V24 Rev4: scheduling help and cleanup */
.scheduling-help { padding: 10px 12px; }
.scheduling-help summary { cursor: pointer; font-weight: 700; }
.scheduling-help p { margin: 6px 0 0; }


/* Beta V24 Rev5: ICP filing footer */
.app-footer-note .icp-link { color: inherit; text-decoration: none; pointer-events: auto; }
.app-footer-note .icp-link:hover { color: var(--primary, #2f8fe8); text-decoration: underline; }
.shell-footer .icp-link { pointer-events: auto; }


/* Beta V24 Rev7: route editor insertion controls */
.route-name-combo {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 74px;
  gap: 6px;
  align-items: center;
  min-width: 280px;
}
.route-name-combo .route-name {
  min-width: 0;
}
.route-name-picker {
  min-width: 74px;
  padding: 6px 4px;
}
.route-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.route-row-actions button { padding: 6px 8px; }


/* Beta V24 Rev8: police filing footer */
.app-footer-note .police-beian-link { color: inherit; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; pointer-events: auto; }
.app-footer-note .police-beian-link img { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; }
.app-footer-note .police-beian-link:hover { color: var(--primary, #2f8fe8); text-decoration: underline; }
.shell-footer .police-beian-link { pointer-events: auto; }


/* Beta V24 Rev9: excel order picker paging */
.excel-order-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; grid-column: 1 / -1; padding: 6px 8px; background: color-mix(in srgb, var(--panel-bg, #fff) 86%, var(--primary, #2f8fe8)); border-radius: 8px; }
.excel-order-pager .toolbar { margin: 0; }


.password-field {
  position: relative;
}
.password-field input {
  padding-right: 72px;
}
.password-eye {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: auto;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-ink);
  box-shadow: none;
}
.password-eye:hover {
  filter: brightness(.98);
}

/* Beta V24 Rev28: keep public mobile portal text above theme background */
.scan-mode::before,
.scan-mode::after {
  z-index: 0 !important;
  opacity: .045 !important;
}
.scan-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(239, 247, 255, .96), rgba(247, 251, 255, .98)),
    var(--theme-bg-image);
  background-size: auto, cover;
  background-position: center;
}
.scan-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--theme-bg-image) center / cover no-repeat;
  opacity: .035;
}
.scan-card,
.delivery-receive-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .96) !important;
  color: #122238;
  backdrop-filter: blur(6px);
}
.scan-card h1,
.scan-card h2,
.scan-card strong,
.scan-card .scan-head span:first-child {
  color: #142337 !important;
}
.scan-card p,
.scan-card label span,
.scan-card .muted {
  color: #5d6f85 !important;
}
.delivery-route-summary {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-route-mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-top: 6px;
  padding-top: 2px;
}
.delivery-route-mini::before,
.delivery-route-mini em {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 13px;
  height: 3px;
  border-radius: 999px;
  background: #dbe6f2;
}
.delivery-route-mini em {
  right: auto;
  max-width: calc(100% - 12px);
  background: #1d6fd1;
}
.delivery-route-mini i,
.delivery-route-mini b {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 2px solid #c7d6e8;
  background: #fff;
  color: #51657c;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.delivery-route-mini i.done {
  border-color: #1d6fd1;
  background: #1d6fd1;
  color: #fff;
}
.delivery-route-mini i.active {
  border-color: #1d6fd1;
  color: #1d6fd1;
}
.delivery-route-mini b {
  border-style: dashed;
  background: #f7fbff;
}
@media (max-width: 720px) {
  .scan-shell {
    align-items: start;
    place-items: start center;
    padding: max(18px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
  }
  .scan-card,
  .delivery-receive-card {
    margin-top: min(18vh, 120px);
    background: rgba(255, 255, 255, .975) !important;
  }
}

.visual-kpi.clickable,
.command-chip.clickable,
.visual-meter.clickable {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.visual-kpi.clickable:hover,
.command-chip.clickable:hover,
.visual-meter.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 94, 184, .16);
  border-color: var(--primary);
}

.missing-info-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 130px;
  max-width: 260px;
}
.missing-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 16%, #ffffff);
  color: #8a4b00;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.missing-chip.more {
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary-dark);
}
.responsive-table .missing-info-badges {
  min-width: 120px;
}

.resizable-th {
  position: relative;
  user-select: none;
}
.resizable-th .th-label {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 8px);
}
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 3px;
  width: 1px;
  height: 50%;
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}
.resizable-th:hover .col-resize-handle::after,
body.column-resizing .col-resize-handle::after {
  background: var(--primary);
  width: 2px;
}
body.column-resizing {
  cursor: col-resize;
  user-select: none;
}

.configurable-wide-table {
  table-layout: fixed;
}
.configurable-wide-table th,
.configurable-wide-table td {
  overflow-wrap: anywhere;
}
.configurable-wide-table td.action-cell {
  overflow: visible;
}

.column-config-sortable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.column-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, #ffffff);
}
.column-config-row label {
  flex: 1;
  min-width: 0;
}
.column-config-row span {
  display: inline-flex;
  gap: 4px;
}

dialog.modal-floating {
  position: fixed;
  inset: auto auto auto auto;
  transform: none;
}

.modal-head {
  cursor: move;
  touch-action: none;
}

.modal-head-actions,
.modal-head-actions * {
  cursor: auto;
}

dialog.modal-max .modal-head {
  cursor: default;
}

dialog.modal-dragging,
dialog.modal-dragging * {
  user-select: none;
}

.order-row-editable {
  cursor: grab;
}

.order-row-editable.dragging-row {
  opacity: .55;
}

.order-row-editable.paste-target-row {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
}

.order-row-editable.drop-before {
  box-shadow: inset 0 3px 0 var(--primary);
}

.order-row-editable.drop-after {
  box-shadow: inset 0 -3px 0 var(--primary);
}

.order-row-editable td:first-child::after {
  content: "拖";
  display: inline-flex;
  margin-left: 4px;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  font-size: 12px;
  font-weight: 800;
}

.order-row-editable.paste-target-row td:first-child::after {
  content: "目标";
  min-width: 34px;
  color: #ffffff;
  background: var(--primary);
}

/* Beta V26 default theme bigscreen blue background */
html[data-theme="default"] body .bigscreen,
html:not([data-theme]) body .bigscreen,
html[data-theme="default"] body.screen-cast-mode .bigscreen,
html:not([data-theme]) body.screen-cast-mode .bigscreen {
  background:
    linear-gradient(135deg, #d8ecfb 0%, #cfe6f8 46%, #e8f5ff 100%),
    var(--theme-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}

html[data-theme="default"] body .bigscreen .screen-free-tile,
html[data-theme="default"] body .bigscreen .screen-card,
html[data-theme="default"] body .bigscreen .screen-kpi,
html[data-theme="default"] body .bigscreen .panel,
html:not([data-theme]) body .bigscreen .screen-free-tile,
html:not([data-theme]) body .bigscreen .screen-card,
html:not([data-theme]) body .bigscreen .screen-kpi,
html:not([data-theme]) body .bigscreen .panel {
  background-image:
    linear-gradient(135deg, rgba(221,239,252,.96), rgba(239,248,255,.92)),
    var(--theme-bg-image) !important;
  background-color: #dceffd !important;
  background-size: auto, cover !important;
  background-position: center !important;
  background-blend-mode: normal, soft-light !important;
}