/* Edge Industrial Software - ScaleWidgets-derived web control system */
:root {
  --hmi-screen: #e9ebee;
  --hmi-card: #ffffff;
  --hmi-card-border: #c6cdd4;
  --hmi-ink: #22303c;
  --hmi-muted: #5c6b78;
  --hmi-pending: #8ca0b0;
  --hmi-action: #1663a7;
  --hmi-action-dark: #10507f;
  --hmi-fine: #93c2e4;
  --hmi-good: #1a7a2a;
  --hmi-good-tint: #f2faf3;
  --hmi-warn: #8a6407;
  --hmi-warn-tint: #fdf0d3;
  --hmi-alert: #c02b23;
  --hmi-alert-tint: #fadbd8;
  --hmi-soft-key: #f4f6f8;
  --hmi-soft-key-border: #9fb0bf;
  --hmi-soft-key-tray: #d8dde3;
  --hmi-hairline: #dde2e7;
  --hmi-chip: #e3eaf2;
  --hmi-chip-border: #b9c7d4;
  --mgmt-sidebar: #343a40;
  --mgmt-sidebar-line: #4b545c;
  --mgmt-sidebar-text: #c2c7d0;
  --mgmt-content: #f4f6f9;
  --mgmt-card-border: #e3e8ee;
  --mgmt-ink: #212529;
  --mgmt-muted: #6c757d;
  --mgmt-accent: #2a78d6;
  --mgmt-info-tint: #d8e7f5;
  --mgmt-info-text: #205a8c;
  --mgmt-neutral-tint: #e9ecef;
  --monitor-base: #121212;
  --monitor-panel: #1e1e1e;
  --monitor-border: #2d2d2d;
  --monitor-text: #e1e1e1;
  --monitor-muted: #8b949e;
  --sans: "Segoe UI", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;

  /* Map legacy page variables to the shared system. */
  --navy: var(--mgmt-sidebar);
  --navy-2: #292f34;
  --steel: var(--hmi-action);
  --accent: var(--hmi-action);
  --accent-d: var(--hmi-action-dark);
  --ink: var(--hmi-ink);
  --muted: var(--hmi-muted);
  --line: var(--hmi-card-border);
  --bg-soft: var(--mgmt-content);
  --ok: var(--hmi-good);
  --ok-bg: var(--hmi-good-tint);
  --warn: var(--hmi-warn);
  --danger: var(--hmi-alert);
  --radius: 6px;
  --shadow: 0 1px 2px rgba(34, 48, 60, .08);
}

html { scroll-padding-top: 76px; }
body {
  font-family: var(--sans) !important;
  letter-spacing: 0;
  color: var(--hmi-ink);
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  background: #fff;
  color: var(--hmi-action-dark);
  border: 2px solid var(--hmi-action);
  border-radius: 4px;
  padding: 10px 14px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hmi-fine) !important;
  outline-offset: 2px;
}

button,
.btn,
.tab,
input,
select,
textarea {
  border-radius: 6px !important;
}

button,
.btn,
input,
select {
  min-height: 44px;
}

button,
.btn {
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}

.btn,
.page-scale .btn,
.page-suite .btn,
.page-tools .btn {
  background: var(--hmi-action);
  color: #fff;
  border: 1px solid var(--hmi-action-dark);
  font-weight: 700;
}
.btn:hover,
.page-scale .btn:hover,
.page-suite .btn:hover,
.page-tools .btn:hover { background: var(--hmi-action-dark); }

.btn-ghost,
.btn-sec,
.btn.secondary,
.btn.light {
  background: var(--hmi-soft-key) !important;
  color: var(--hmi-ink) !important;
  border: 1px solid var(--hmi-soft-key-border) !important;
}

input,
select,
textarea {
  border: 1px solid var(--hmi-soft-key-border) !important;
  background: #fff !important;
  color: var(--hmi-ink) !important;
  font-family: var(--sans);
}
input[type="number"],
.num,
.value,
.kv,
.ival,
.weight-value,
td.num { font-family: var(--mono) !important; font-variant-numeric: tabular-nums; }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--hmi-action) !important;
  box-shadow: 0 0 0 3px rgba(22, 99, 167, .14) !important;
}

.card,
.panel,
.tool-card,
.demo-shell,
.section,
.kpi,
.metric {
  border-radius: 6px !important;
  box-shadow: var(--shadow) !important;
}
.card:hover,
.tool-card:hover { transform: none !important; }

.pill,
.tag,
.demo-tag,
.status,
.badge {
  border-radius: 4px !important;
  letter-spacing: 0 !important;
}

/* Statuses always pair their word and color with a redundant symbol. */
.tag::before,
.demo-tag::before,
.status::before,
.istatus::before {
  display: inline-block;
  margin-right: .42em;
  font-weight: 900;
  line-height: 1;
}
.tag::before,
.demo-tag::before,
.status::before { content: "\2139"; }
.tag.green::before,
.status.good::before,
.istatus.stable::before { content: "\2713"; }
.tag.gold::before,
.status.warn::before,
.istatus.motion::before { content: "!"; }
.tag.red::before,
.status.bad::before { content: "\00D7"; }
.istatus.idle::before { content: "\2014"; }

.global-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.global-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 650;
}

.page-home .menu-btn { min-width: 44px; }
.global-links a:hover,
.global-links a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }

/* Homepage: management-light shell with a real industrial first-viewport signal. */
.page-home { background: #fff; }
.page-home header {
  background: var(--mgmt-sidebar);
  border-bottom: 1px solid var(--mgmt-sidebar-line);
  box-shadow: none;
}
.page-home header .brand,
.page-home header nav a,
.page-home header .nav-links a { color: #f6f8fa; }
.page-home header .brand,
.page-home header nav a,
.page-home header .nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.page-home .brand .mark {
  background: var(--hmi-action);
  border-radius: 4px;
  box-shadow: none;
}
.page-home .nav-cta { border-color: var(--hmi-fine); }
.page-home .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(650px, calc(100svh - 118px));
  padding: 70px 0 84px;
  text-align: left;
  background-color: #26313a;
  background-image: url("industrial-weighing-hero.webp");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 28, 36, .68);
}
.page-home .hero .wrap { width: 100%; }
.page-home .hero h1 {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.page-home .hero .sub {
  max-width: 700px;
  margin: 0 0 28px;
  color: #e1e7ec;
  line-height: 1.55;
}
.page-home .hero-btns { justify-content: flex-start; margin-bottom: 28px; }
.page-home .hero .btn { background: var(--hmi-action); }
.page-home .hero .btn-ghost { color: #fff !important; background: rgba(18, 18, 18, .2) !important; border-color: #fff !important; }
.page-home .proof { justify-content: flex-start; color: #d2d9df; }
.page-home .hero .trust { color: #d2d9df; text-align: left; }
.page-home section { padding-top: 72px; padding-bottom: 72px; }
.page-home section.soft { background: var(--mgmt-content); }
.page-home .eyebrow { color: var(--hmi-action-dark); letter-spacing: .08em; }
.page-home .card {
  border-color: var(--mgmt-card-border);
  background: var(--hmi-card);
  padding: 24px;
}
.page-home .card .ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hmi-chip-border);
  border-radius: 4px;
  background: var(--hmi-chip);
  font-size: 1.2rem;
  filter: grayscale(1);
}
.page-home .tabs {
  justify-content: flex-start;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--hmi-card-border);
  border-radius: 6px;
  background: var(--hmi-screen);
  width: fit-content;
  max-width: 100%;
}
.page-home .tab {
  border: 0;
  border-radius: 4px !important;
  background: transparent;
  color: var(--hmi-ink);
  padding: 9px 16px;
}
.page-home .tab.active {
  background: var(--hmi-card);
  color: var(--hmi-action-dark);
  box-shadow: 0 1px 2px rgba(34, 48, 60, .12) !important;
}
.page-home .demo-box,
.page-home .tool-box,
.page-home .calc {
  background: var(--hmi-screen) !important;
  border: 1px solid var(--hmi-card-border) !important;
  border-radius: 6px !important;
  color: var(--hmi-ink) !important;
  box-shadow: none !important;
}
.page-home .tool-box h3,
.page-home .tool-box label,
.page-home .tool-box .result,
.page-home .calc h3 { color: var(--hmi-ink) !important; }
.page-home .tool-box .pitch,
.page-home .pitch { background: var(--mgmt-info-tint) !important; color: var(--mgmt-info-text) !important; border-radius: 4px !important; }
.page-home .pitch a { color: var(--hmi-action-dark) !important; }
.page-home .step .num {
  background: var(--hmi-chip);
  color: var(--hmi-action-dark);
  border: 1px solid var(--hmi-chip-border);
  border-radius: 4px;
}

/* ScaleStream: terminal-light operator surface. */
.page-scale { background: #394047 !important; }
.page-scale .appbar {
  position: sticky;
  background: #fff;
  color: var(--hmi-ink);
  border-bottom: 1px solid var(--hmi-card-border);
  padding: 9px 18px;
}
.page-scale .appbar .brand .mark {
  background: var(--hmi-action);
  border-radius: 4px;
}
.page-scale .appbar .brand small { color: var(--hmi-muted); }
.page-scale .appbar a.back,
.page-scale .global-links a { color: var(--hmi-action-dark); }
.page-scale .global-links a:hover,
.page-scale .global-links a[aria-current="page"] { background: var(--hmi-chip); color: var(--hmi-action-dark); }
.page-scale .demo-tag {
  background: var(--hmi-chip);
  color: var(--hmi-action-dark);
  border: 1px solid var(--hmi-chip-border);
  text-transform: none;
}
.page-scale .banner {
  background: var(--mgmt-info-tint);
  color: var(--mgmt-info-text);
  border-bottom: 1px solid var(--hmi-chip-border);
}
.page-scale .wrap { max-width: 1120px; padding: 18px; }
.page-scale .layout { grid-template-columns: minmax(0, 1fr); }
.page-scale .layout > *,
.page-scale .panel-stack,
.page-scale .card,
.page-scale .card-b,
.page-scale .kpis,
.page-scale .kpi { min-width: 0; max-width: 100%; }
.page-scale .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-scale canvas { max-width: 100%; }
.page-scale .card,
.page-scale .kpi {
  border-color: var(--hmi-card-border);
  background: var(--hmi-card);
  box-shadow: none !important;
}
.page-scale .card-h {
  min-height: 48px;
  color: var(--hmi-ink);
  border-bottom-color: var(--hmi-hairline);
}
.page-scale .indicator {
  min-height: 230px;
  display: grid;
  place-content: center;
  background: #fff;
  border: 1px solid var(--hmi-card-border);
  border-radius: 6px;
}
.page-scale .indicator .ival {
  color: var(--hmi-ink);
  font-size: clamp(3.4rem, 8vw, 4.6rem);
  letter-spacing: 0;
}
.page-scale .indicator > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
}
.page-scale .indicator .iunit { flex: 0 0 auto; }
.page-scale .indicator .iunit { color: var(--hmi-muted); }
.page-scale .istatus.idle { color: var(--hmi-muted); }
.page-scale .istatus.motion { color: var(--hmi-warn); }
.page-scale .istatus.stable { color: var(--hmi-good); }
.page-scale .src-line { color: var(--hmi-muted); }
.page-scale .btn-capture {
  background: var(--hmi-action);
  border: 1px solid var(--hmi-action-dark);
  color: #fff;
}
.page-scale .btn-capture:disabled,
.page-scale button:disabled {
  background: #d9dee3 !important;
  color: #697681 !important;
  border-color: #c1c8cf !important;
}
.page-scale .btn-row {
  padding: 8px;
  gap: 8px;
  background: var(--hmi-soft-key-tray);
  border: 1px solid var(--hmi-card-border);
  border-radius: 6px;
}
.page-scale .btn-row button,
.page-scale .toolbar button { min-height: 52px; }
.page-scale .kpi .kl { color: var(--hmi-muted); letter-spacing: .04em; }
.page-scale .kpi .kv { color: var(--hmi-ink); }
.page-scale th { background: var(--hmi-soft-key); color: var(--hmi-muted); }
.page-scale footer { background: #fff; margin: 0; }

/* Demo suite and planning tools: shared management-light shell. */
.page-suite,
.page-tools { background: var(--mgmt-content) !important; color: var(--mgmt-ink) !important; }
.page-suite .layout,
.page-tools .layout { grid-template-columns: 300px minmax(0, 1fr); }
.page-suite .main,
.page-tools .main,
.page-suite .app-section,
.page-suite .section-body,
.page-suite .feature-area,
.page-suite .feature-panel,
.page-tools .section,
.page-suite .grid > *,
.page-tools .grid > * { min-width: 0; max-width: 100%; }
.page-suite .field input,
.page-suite .field select,
.page-tools .field input,
.page-tools .field select,
.page-tools .field textarea,
.page-suite .btn,
.page-tools .btn { min-height: 44px; }
.page-suite .panel > table,
.page-tools .panel > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.page-suite .side,
.page-tools .side {
  background: var(--mgmt-sidebar) !important;
  border-right: 1px solid var(--mgmt-sidebar-line);
}
.page-suite .brand .mark,
.page-tools .brand .mark { background: var(--hmi-action) !important; border-radius: 4px !important; }
.page-suite .back,
.page-tools .back { color: var(--mgmt-sidebar-text) !important; }
.page-suite .product-nav,
.page-tools .product-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mgmt-sidebar-line);
}
.page-suite .product-nav a,
.page-tools .product-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border: 1px solid var(--mgmt-sidebar-line);
  border-radius: 4px;
  color: var(--mgmt-sidebar-text);
  text-decoration: none;
  text-align: center;
  font-size: .76rem;
  font-weight: 650;
}
.page-suite .product-nav a:hover,
.page-suite .product-nav a[aria-current="page"],
.page-tools .product-nav a:hover,
.page-tools .product-nav a[aria-current="page"] { background: var(--hmi-action); border-color: var(--hmi-action); color: #fff; }
.page-suite .app-link,
.page-tools .nav a {
  border-radius: 4px !important;
  border: 1px solid transparent !important;
}
.page-suite .app-link.active,
.page-tools .nav a:focus,
.page-tools .nav a:hover {
  background: var(--hmi-action) !important;
  color: #fff !important;
  border-color: var(--hmi-action) !important;
}
.page-suite .app-link.active span { color: #e7f0f8 !important; }
.page-suite .topbar,
.page-tools .topbar {
  border-bottom: 1px solid var(--mgmt-card-border);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.page-suite .topbar h1,
.page-tools .topbar h1 {
  max-width: 780px;
  color: var(--mgmt-ink);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1.12;
}
.page-suite .repo-card,
.page-suite .panel,
.page-suite .demo-shell,
.page-tools .panel,
.page-tools .section,
.page-tools .tool-card {
  border-color: var(--mgmt-card-border) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.page-suite .repo-grid { opacity: .9; }
.page-suite .feature-list { background: #f8f9fa; }
.page-suite .feature-link { border-radius: 0 !important; border-left: 4px solid transparent !important; }
.page-suite .feature-link.active {
  background: var(--mgmt-info-tint) !important;
  color: var(--mgmt-info-text) !important;
  border-left-color: var(--hmi-action) !important;
}
.page-suite .demo-head { border-bottom-color: var(--mgmt-card-border); }
.page-suite .tag.green,
.page-tools .status.good { background: var(--hmi-good-tint) !important; color: var(--hmi-good) !important; border: 1px solid #bedbc2; }
.page-suite .tag.gold,
.page-tools .status.warn { background: var(--hmi-warn-tint) !important; color: var(--hmi-warn) !important; border: 1px solid #ecd69f; }
.page-suite .tag.red,
.page-tools .status.bad { background: var(--hmi-alert-tint) !important; color: var(--hmi-alert) !important; border: 1px solid #e9aaa6; }
.page-suite .tag.blue,
.page-tools .pill { background: var(--mgmt-info-tint) !important; color: var(--mgmt-info-text) !important; border: 1px solid #b9d2e8; }
.page-suite .metric .value,
.page-tools .metric .value { color: var(--hmi-ink); }
.page-suite .scale-face > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
}
.page-suite .scale-face .weight {
  min-width: 0;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}
.page-suite .scale-face .unit { flex: 0 0 auto; }
.page-suite .btn.green,
.page-tools .btn.green { background: var(--hmi-action) !important; border-color: var(--hmi-action-dark) !important; }
.page-suite .btn.gold,
.page-tools .btn.gold { background: var(--hmi-soft-key) !important; color: var(--hmi-warn) !important; border: 1px solid var(--hmi-warn) !important; }
.page-suite .switch,
.page-tools .switch {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent !important;
  cursor: pointer;
}
.page-suite .switch::before,
.page-tools .switch::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 1px;
  width: 42px;
  height: 24px;
  border: 1px solid var(--hmi-soft-key-border);
  border-radius: 999px;
  background: var(--hmi-pending);
}
.page-suite .switch::after,
.page-tools .switch::after { top: 14px; left: 5px; }
.page-suite .switch.on,
.page-tools .switch.on,
.page-suite .switch[aria-checked="true"],
.page-tools .switch[aria-checked="true"] { background: transparent !important; }
.page-suite .switch.on::before,
.page-tools .switch.on::before,
.page-suite .switch[aria-checked="true"]::before,
.page-tools .switch[aria-checked="true"]::before { background: var(--hmi-action); }
.page-suite .switch.on::after,
.page-tools .switch.on::after,
.page-suite .switch[aria-checked="true"]::after,
.page-tools .switch[aria-checked="true"]::after { left: 23px; }
.page-suite .switch:focus-visible,
.page-tools .switch:focus-visible { outline: 3px solid var(--hmi-focus); outline-offset: 1px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.page-tools .kiosk {
  background: var(--hmi-screen) !important;
  color: var(--hmi-ink) !important;
  border: 1px solid var(--hmi-card-border);
}
.page-tools .label-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.page-tools .kiosk-screen { background: #fff !important; border: 1px solid var(--hmi-card-border); border-radius: 6px !important; }
.page-tools .kiosk-buttons {
  padding: 8px;
  gap: 8px;
  background: var(--hmi-soft-key-tray);
  border-radius: 6px;
}
.page-tools .kiosk-buttons button {
  min-height: 64px;
  background: var(--hmi-soft-key) !important;
  color: var(--hmi-ink) !important;
  border: 1px solid var(--hmi-soft-key-border) !important;
}

/* Dark monitoring is reserved for the monitor-style demo only. */
.page-suite [data-app-section="data"] .log,
.page-tools #monitor .monitor,
.page-tools #monitor .panel.monitor {
  background: var(--monitor-panel) !important;
  color: var(--monitor-text) !important;
  border-color: var(--monitor-border) !important;
}

@media (max-width: 960px) {
  .page-home header nav ul { gap: 12px; }
  .page-home .hero { min-height: 600px; background-position: 62% center; }
  .page-scale .global-links { width: 100%; }
}

@media (min-width: 560px) {
  .page-scale .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .page-scale .layout { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .page-suite .layout,
  .page-tools .layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 62px; }
  .page-home .hero {
    min-height: 610px;
    padding: 58px 0 70px;
    background-position: 68% center;
  }
  .page-home .hero::before { background: rgba(18, 28, 36, .75); }
  .page-home .hero h1 { font-size: 2.35rem; }
  .page-home .hero-btns { display: grid; width: 100%; }
  .page-home .hero-btns .btn { width: 100%; text-align: center; }
  .page-home section { padding-top: 56px; padding-bottom: 56px; }
  .page-home .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .page-home .tab { flex: 0 0 auto; }
  .page-scale .appbar { position: static; }
  .page-scale .wrap { width: 100%; padding-inline: 12px; }
  .page-scale .card-h { flex-wrap: wrap; }
  .page-scale .toolbar { min-width: 0; max-width: 100%; }
  .page-scale .global-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-suite .product-nav,
  .page-tools .product-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-suite .product-nav a,
  .page-tools .product-nav a { min-width: 0; padding: 6px 3px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}