:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --topbar: #ffffff;
  --text: #1d2433;
  --muted: #697586;
  --line: #d9e1ec;
  --soft-line: #edf1f7;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --subtle: #f8fafc;
  --subtle-2: #f7f9fd;
  --row-hover: #f9fbff;
  --row-selected: #eef5ff;
  --recent-row: #f0fdf4;
  --recent-row-hover: #dcfce7;
  --duplicate-row: #fef2f2;
  --duplicate-row-hover: #fee2e2;
  --secondary-bg: #eef3ff;
  --secondary-hover: #dfe8ff;
  --secondary-text: #24448f;
  --disabled-bg: #e5e7eb;
  --disabled-text: #8b95a5;
  --green: #11845b;
  --red: #c9372c;
  --gray: #667085;
  --unknown-dot: #111827;
  --blue: #2457d6;
  --blue-dark: #173ea8;
  --amber: #b76e00;
  --card-ok-bg: #f0fdf4;
  --card-ok-line: #bbf7d0;
  --card-bad-bg: #fef2f2;
  --card-bad-line: #fecaca;
  --card-warn-bg: #fff7ed;
  --card-warn-line: #fed7aa;
  --badge-test-bg: #fff3cd;
  --badge-test-text: #7a4b00;
  --badge-test-line: #ffd766;
  --badge-new-bg: #dcfce7;
  --badge-new-text: #166534;
  --badge-new-line: #86efac;
  --badge-warn-bg: #fff7ed;
  --badge-warn-text: #9a4b00;
  --badge-warn-line: #fed7aa;
  --console-bg: #0f172a;
  --console-text: #e5e7eb;
  --shadow: 0 22px 70px rgb(15 23 42 / 25%);
  color-scheme: light;
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #1b1d22;
  --panel: #23262d;
  --topbar: #20232a;
  --text: #d7dae0;
  --muted: #8d95a3;
  --line: #343943;
  --soft-line: #2c313a;
  --input-bg: #1d2027;
  --input-border: #3c4350;
  --subtle: #272b33;
  --subtle-2: #252932;
  --row-hover: #292e38;
  --row-selected: #26364c;
  --recent-row: #202c28;
  --recent-row-hover: #24332e;
  --duplicate-row: #332629;
  --duplicate-row-hover: #3b292d;
  --secondary-bg: #2a3240;
  --secondary-hover: #313a4a;
  --secondary-text: #b8c7dd;
  --disabled-bg: #2a2f38;
  --disabled-text: #6f7784;
  --green: #4fa66a;
  --red: #d16d68;
  --gray: #777f8c;
  --unknown-dot: #05070a;
  --blue: #2d6fb3;
  --blue-dark: #357ec8;
  --amber: #c79a45;
  --card-ok-bg: #202f28;
  --card-ok-line: #345f45;
  --card-bad-bg: #35272a;
  --card-bad-line: #684044;
  --card-warn-bg: #332d22;
  --card-warn-line: #665332;
  --badge-test-bg: #332d20;
  --badge-test-text: #d8b75f;
  --badge-test-line: #6c592e;
  --badge-new-bg: #203027;
  --badge-new-text: #81c99b;
  --badge-new-line: #3d7250;
  --badge-warn-bg: #332d22;
  --badge-warn-text: #d7b467;
  --badge-warn-line: #665332;
  --console-bg: #171b24;
  --console-text: #d9dde6;
  --shadow: 0 22px 70px rgb(0 0 0 / 38%);
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.startup-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 34%),
    var(--bg);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.startup-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-loader-card {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}

.startup-loader-card img {
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 18px;
  background: #eef4fb;
}

.startup-loader-card strong {
  font-size: 24px;
  line-height: 1;
}

.startup-loader-card span {
  color: var(--muted);
  font-size: 13px;
}

.startup-loader-bar {
  width: 100%;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--subtle);
}

.startup-loader-bar span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  animation: startup-loader-slide 1.1s ease-in-out infinite;
}

@keyframes startup-loader-slide {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(80%); }
  100% { transform: translateX(270%); }
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 30%),
    var(--bg);
}

.auth-card {
  width: min(390px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auth-card img {
  width: 66px;
  height: 66px;
  padding: 6px;
  border-radius: 16px;
  background: #eef4fb;
}

.auth-card h2 {
  margin: 0;
  font-size: 24px;
}

.auth-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-card input {
  width: 100%;
  min-height: 40px;
}

.auth-error {
  min-height: 18px;
  color: var(--red) !important;
  font-size: 13px;
}

.auth-remember {
  align-items: center;
  grid-template-columns: auto 1fr;
  color: var(--text) !important;
  font-weight: 600 !important;
}

.auth-remember input {
  min-height: auto;
}

.user-menu {
  position: relative;
  margin-left: 2px;
}

.user-menu-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--subtle);
  color: var(--blue);
  font-weight: 800;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}

.user-menu-button:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: var(--secondary-bg);
}

.user-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 230px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.user-menu-popover strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-popover small {
  margin-top: -6px;
  color: var(--muted);
}

.user-menu-popover button {
  width: 100%;
  justify-content: center;
}

.user-settings-list {
  display: grid;
  gap: 12px;
  margin: 4px 0 0;
}

.user-settings-row {
  display: grid;
  grid-template-columns: 42px minmax(280px, 1.3fr) minmax(230px, .9fr) minmax(170px, .7fr) 80px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--subtle));
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.user-permission-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, var(--subtle));
}

.user-permission-panel.is-inherited .permission-group {
  opacity: .58;
}

.custom-permission-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-size: 13px !important;
}

.custom-permission-toggle input {
  width: auto;
  min-height: 0;
}

.permission-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.user-settings-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.user-settings-row input,
.user-settings-row select {
  min-height: 34px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, var(--panel));
  color: var(--blue);
  font-weight: 800;
}

.user-main-fields,
.user-access-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.user-password-field {
  min-width: 0;
}

.user-settings-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.user-invite-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--badge-warn-line);
  border-radius: 999px;
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
  font-size: 11px;
  font-weight: 800;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--topbar);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
}

.brand-logo-button {
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
}

.brand-logo-button:hover {
  background: var(--secondary-bg);
}

.brand-logo-button:hover .brand-logo {
  transform: translateY(-1px);
}

.brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 6px 12px rgb(15 23 42 / 12%));
  transition: transform .16s ease;
}

:root[data-theme="dark"] .brand-logo {
  background: #eef4fb;
  padding: 4px;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 35%));
}

.zt-install-banner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #f2c94c;
  background: #fff7db;
  color: #513c06;
}

.zt-install-banner[hidden] {
  display: none;
}

.zt-install-banner p {
  color: #6f560d;
  font-size: 13px;
  margin-top: 4px;
}

.zt-install-banner a {
  color: #24448f;
  font-weight: 700;
  text-decoration: none;
}

.internet-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--card-warn-line);
  background: var(--card-warn-bg);
  color: var(--text);
  font-size: 13px;
}

.internet-banner[hidden] {
  display: none;
}

.internet-banner strong {
  color: var(--badge-warn-text);
}

.alerts-panel {
  display: grid;
  margin: 10px 18px 0;
  overflow: hidden;
  border: 1px solid var(--card-warn-line);
  border-radius: 8px;
  background: var(--panel);
}

.alerts-head {
  width: 100%;
  min-height: 46px;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 0;
  background: color-mix(in srgb, var(--card-warn-bg) 72%, var(--panel));
  color: var(--text);
}

.alerts-head:hover {
  background: color-mix(in srgb, var(--card-warn-bg) 88%, var(--panel));
}

.alerts-head span:first-child {
  display: grid;
  gap: 2px;
  text-align: left;
}

.alerts-head small {
  color: var(--muted);
  font-size: 12px;
}

.alerts-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.alerts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  padding: 10px;
}

.alerts-panel.is-collapsed .alerts-list {
  display: none;
}

.service-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--soft-line);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--panel);
}

.service-alert.critical {
  border-left-color: var(--red);
}

.service-alert.warning {
  border-left-color: var(--amber);
}

.service-alert.info {
  border-left-color: var(--blue);
}

.service-alert div {
  display: grid;
  gap: 2px;
}

.service-alert span,
.service-alert p {
  color: var(--muted);
  font-size: 12px;
}

.service-alert p {
  grid-column: 1;
  margin: 0;
}

.service-alert-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.service-alert-actions button {
  min-height: 32px;
  padding: 0 10px;
}

h1, h2, p { margin: 0; }
h1 {
  font-size: 25px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: 0;
}
h2 { font-size: 16px; }
.topbar p, .details p, #mapCount { color: var(--muted); font-size: 13px; margin-top: 4px; }

.brand-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-text);
  margin-top: 3px;
}

#summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--secondary-bg);
  color: var(--secondary-text);
  font-size: 12px;
  font-weight: 700;
}

.summary-pill strong {
  color: var(--text);
}

.summary-pill.ok {
  background: var(--card-ok-bg);
  color: var(--green);
}

.summary-pill.bad {
  background: var(--card-bad-bg);
  color: var(--red);
}

.summary-pill.zt {
  background: var(--secondary-bg);
  color: var(--blue);
}

.summary-pill.muted {
  background: var(--subtle);
  color: var(--muted);
}

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

button {
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover { background: var(--blue-dark); }
button:disabled,
button:disabled:hover {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
button.secondary,
a.secondary {
  background: var(--secondary-bg);
  color: var(--secondary-text);
}

a.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
}
button.secondary:hover,
a.secondary:hover { background: var(--secondary-hover); }
button.secondary:disabled,
button.secondary:disabled:hover {
  background: var(--disabled-bg);
  color: var(--disabled-text);
}

.theme-toggle {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.btn-ico {
  display: inline-grid;
  width: 16px;
  min-width: 16px;
  place-items: center;
  line-height: 1;
}

.svg-icon,
.fa-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.svg-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fa-icon {
  line-height: 1;
  text-align: center;
}

button.icon .svg-icon,
button.icon .fa-icon,
a.icon .svg-icon,
a.icon .fa-icon {
  width: 15px;
  height: 15px;
}

.button-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: button-spin 0.7s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}
button.ghost {
  background: transparent;
  color: var(--muted);
}
button.danger { color: var(--red); }
button.icon {
  width: 34px;
  min-height: 34px;
  padding: 0;
  background: var(--secondary-bg);
  color: var(--text);
}

.toolbar, .filters, .dialog-actions, .panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar {
  justify-content: flex-end;
  min-width: 0;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--soft-line);
  white-space: nowrap;
}

.toolbar-actions button,
.view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.view-tabs button {
  position: relative;
}

.nav-alert-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nav-alert-badge[hidden] {
  display: none;
}

.profile-dialog {
  width: min(430px, calc(100vw - 24px));
}

.profile-dialog form {
  display: grid;
  gap: 14px;
}

.view-tabs {
  display: flex;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.view-tabs button {
  min-height: 32px;
  padding: 6px 10px;
}

.view-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 18px;
  padding: 18px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.inventory-view,
.users-view {
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 220px),
    var(--bg);
}

.users-view {
  overflow: auto;
}

.tickets-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 240px),
    var(--bg);
}

.tickets-panel {
  width: 100%;
  max-width: 1500px;
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  padding: 26px 30px 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tickets-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--soft-line);
}

.tickets-hero h2 {
  margin: 0;
  font-size: 23px;
}

.tickets-layout {
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-top: 16px;
}

.tickets-layout.without-form {
  grid-template-columns: minmax(0, 1fr);
}

.ticket-form,
.ticket-list-panel {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.ticket-form {
  position: sticky;
  top: 12px;
  align-content: start;
}

.ticket-form label,
.ticket-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea,
.ticket-field input,
.ticket-field select,
.ticket-field textarea {
  width: 100%;
  min-width: 0;
}

.ticket-form input,
.ticket-field input {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-section-title {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 2px;
}

.ticket-section-title h3,
.ticket-list-head h3 {
  margin: 0;
  font-size: 17px;
}

.ticket-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ticket-section-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--blue);
}

.ticket-form textarea,
.ticket-edit-panel textarea,
.ticket-admin textarea {
  min-height: 112px;
  resize: vertical;
}

.ticket-list-panel {
  max-width: 100%;
  align-content: start;
  gap: 22px;
  padding: 34px;
  overflow: hidden;
}

.tickets-layout.without-form .ticket-list-panel {
  min-height: 420px;
}

.ticket-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 0 4px 24px;
  border-bottom: 1px solid var(--soft-line);
}

.ticket-list-head > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ticket-scope-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.ticket-scope-tabs button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.ticket-scope-tabs button.active {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.ticket-list {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.tickets-layout.without-form .ticket-list {
  grid-template-columns: 1fr;
}

.ticket-card {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 0;
  padding: 0;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.ticket-card.is-new {
  border-color: rgba(37, 99, 235, .28);
  background: color-mix(in srgb, var(--panel) 88%, rgba(219, 234, 254, .9));
}

.ticket-card.is-open {
  border-color: var(--line);
  box-shadow: 0 6px 18px rgb(15 23 42 / 6%);
}

.ticket-card.is-deleted {
  border-color: rgba(220, 38, 38, .22);
  background: color-mix(in srgb, rgba(254, 242, 242, .86) 70%, var(--panel));
}

.ticket-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 22px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.ticket-card-summary:hover {
  background: var(--subtle);
}

.ticket-summary-main {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.ticket-summary-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ticket-summary-title strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.ticket-summary-title span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ticket-summary-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 10px;
  min-width: 0;
}

.ticket-expand-icon {
  color: var(--muted);
  font-size: 12px;
  transition: transform .16s ease;
}

.ticket-card.is-open .ticket-expand-icon {
  transform: rotate(180deg);
}

.ticket-card-details {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 0 26px 26px;
  border-top: 1px solid var(--soft-line);
}

.ticket-card-details[hidden] {
  display: none;
}

.ticket-meta {
  display: flex;
  align-items: flex-start;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.ticket-meta,
.ticket-note {
  color: var(--muted);
  font-size: 12px;
}

.ticket-message {
  margin: 0;
  padding: 14px 0 2px;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-type {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  justify-content: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-type.funkcja {
  border-color: rgba(37, 99, 235, .2);
  background: rgba(219, 234, 254, .8);
  color: #1d4ed8;
}

.ticket-type.bug {
  border-color: rgba(220, 38, 38, .2);
  background: rgba(254, 226, 226, .86);
  color: #b91c1c;
}

.ticket-type.inne {
  border-color: rgba(100, 116, 139, .2);
  background: rgba(241, 245, 249, .9);
  color: #475569;
}

.ticket-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--secondary-bg);
  color: var(--secondary-text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-status.zrealizowane {
  background: var(--badge-new-bg);
  color: var(--badge-new-text);
}

.ticket-status.rozpatrywane,
.ticket-status.otwarte {
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
}

.ticket-status.usuniete {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
}

.ticket-note.trash-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(220, 38, 38, .14);
  border-radius: 8px;
  background: rgba(254, 242, 242, .72);
  color: #991b1b;
}

.ticket-admin {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(240px, 1fr) auto;
  min-width: 0;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.ticket-admin textarea {
  min-height: 76px;
}

.ticket-admin-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  min-width: 0;
}

.ticket-edit-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px);
  min-width: 0;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.ticket-edit-panel[hidden] {
  display: none;
}

.ticket-edit-message-label {
  grid-column: 1 / -1;
}

.ticket-edit-panel .ticket-card-actions {
  grid-column: 1 / -1;
}

.ticket-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
  padding-top: 2px;
  min-width: 0;
}

.ticket-card-actions button {
  min-height: 34px;
  white-space: nowrap;
}

button.danger-soft {
  border-color: rgba(220, 38, 38, .16);
  background: rgba(254, 242, 242, .8);
  color: #b91c1c;
}

button.danger-soft:hover {
  border-color: rgba(220, 38, 38, .3);
  background: rgba(254, 226, 226, .95);
}

[data-theme="dark"] .ticket-card.is-deleted {
  border-color: rgba(248, 113, 113, .25);
  background: rgba(127, 29, 29, .18);
}

[data-theme="dark"] .ticket-type.funkcja {
  border-color: rgba(96, 165, 250, .24);
  background: rgba(30, 64, 175, .24);
  color: #bfdbfe;
}

[data-theme="dark"] .ticket-type.bug {
  border-color: rgba(248, 113, 113, .24);
  background: rgba(127, 29, 29, .24);
  color: #fecaca;
}

[data-theme="dark"] .ticket-type.inne {
  border-color: rgba(148, 163, 184, .2);
  background: rgba(51, 65, 85, .35);
  color: #cbd5e1;
}

[data-theme="dark"] .ticket-note.trash-note {
  border-color: rgba(248, 113, 113, .24);
  background: rgba(127, 29, 29, .2);
  color: #fecaca;
}

[data-theme="dark"] button.danger-soft {
  border-color: rgba(248, 113, 113, .22);
  background: rgba(127, 29, 29, .22);
  color: #fecaca;
}

[data-theme="dark"] button.danger-soft:hover {
  border-color: rgba(248, 113, 113, .36);
  background: rgba(127, 29, 29, .32);
}

.muted-empty {
  margin: 0;
  color: var(--muted);
}

.users-admin-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
}

.users-admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--soft-line);
  background: transparent;
}

.section-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.users-admin-hero h2 {
  margin: 0;
  font-size: 22px;
}

.users-admin-hero p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
}

.users-admin-actions {
  display: flex;
  gap: 8px;
}

.users-admin-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.users-admin-tabs button {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
}

.users-admin-tabs button.active {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--soft-line));
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
}

.users-admin-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.users-admin-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.users-admin-card-head h3 {
  margin: 0;
  font-size: 17px;
}

.users-admin-card-head p {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.role-permissions-panel {
  display: grid;
  gap: 12px;
}

.role-permissions-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.role-permissions-head h3 {
  margin: 0;
  font-size: 16px;
}

.role-permissions-head p {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.role-permission-list {
  display: grid;
  gap: 12px;
}

.role-group-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.role-group-picker {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.role-group-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 34px 34px;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}

.role-group-row.active {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--soft-line));
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
}

.role-group-row button[data-role-tab] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.role-group-row.active button[data-role-tab] {
  color: var(--text);
}

.role-group-row button[data-role-tab] span {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-group-row button[data-role-tab] small {
  color: var(--muted);
  font-size: 11px;
}

.role-label-input {
  grid-column: 1 / -1;
  min-height: 34px;
}

.edit-role-group,
.remove-role-group {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}

.add-role-group {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
}

.role-permission-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, transparent), var(--subtle));
}

.role-permission-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-permission-title small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.role-permission-title span {
  color: var(--muted);
  font-size: 12px;
}

.permission-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.permission-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 190px;
  max-height: 230px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 10px 22px rgb(15 23 42 / 6%);
}

.permission-group > strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.permission-grid {
  display: grid;
  gap: 7px;
}

.permission-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.permission-item input {
  width: auto;
  min-height: 0;
  margin-top: 2px;
}

.permission-item b {
  display: block;
  font-size: 12px;
}

.permission-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.users-save-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  box-shadow: 0 -10px 24px rgb(15 23 42 / 8%);
}

.users-save-bar span {
  color: var(--muted);
  font-size: 13px;
}

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

.table-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.map-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-head-actions button {
  min-height: 30px;
  padding: 0 10px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 210px;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  min-height: 38px;
  padding: 8px 10px;
  background: var(--input-bg);
  color: var(--text);
}

textarea { resize: vertical; }
.device-search {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.device-search::before {
  content: "";
  display: block;
  height: 14px;
}

.device-search small {
  color: var(--muted);
  font-size: 13px;
}

.status-filter {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.status-filter span {
  min-height: 14px;
}

.status-filter select { width: 100%; }

.table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.inventory-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inventory-panel .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.inventory-panel .panel-head h2 {
  font-size: 22px;
}

.inventory-panel .panel-head .dialog-subtitle {
  max-width: 720px;
  margin-top: 6px;
}

.inventory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
}

.inventory-actions label {
  margin: 0;
  font-weight: 800;
}

.inventory-actions input {
  min-height: 38px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.inventory-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.inventory-table {
  min-width: 980px;
  table-layout: fixed;
}

.stock-table th:nth-child(1) { width: 34%; }
.stock-table th:nth-child(2) { width: 148px; text-align: center; }
.stock-table th:nth-child(3) { width: 82px; }
.stock-table th:nth-child(4) { width: 145px; }
.stock-table th:nth-child(5) { width: 24%; }
.stock-table th:nth-child(6) { width: 17%; }

.inventory-table th {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--subtle);
  border-bottom: 1px solid var(--line);
}

.inventory-table td {
  vertical-align: top;
  padding: 9px 8px;
}

.stock-table td:nth-child(2) {
  vertical-align: middle;
  text-align: center;
}

.inventory-table input,
.inventory-table textarea,
.inventory-table select {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 6px;
}

.inventory-table .inv-stock {
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.inventory-table tr.needs-buy {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}

.inventory-table tr.needs-buy td:first-child {
  box-shadow: inset 4px 0 0 var(--blue);
}

.inventory-footer {
  display: grid;
  gap: 10px;
  padding: 0;
  border-top: 0;
}

.stock-toolbar,
.purchase-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.stock-toolbar h3,
.purchase-toolbar h3 {
  margin: 0;
  font-size: 16px;
}

.stock-toolbar p,
.purchase-toolbar p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.inventory-status {
  padding: 0 4px;
  margin-top: 0;
}

.inventory-image-missing {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--soft-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-warn-bg) 62%, var(--panel));
  color: var(--muted);
  font-size: 12px;
}

.inventory-image-missing strong {
  flex: 0 0 auto;
  color: var(--amber);
}

.inventory-image-missing span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-adjuster {
  display: grid;
  width: 134px;
  grid-template-columns: 32px 64px 32px;
  gap: 3px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.stock-adjuster button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
}

.stock-adjuster input {
  width: 64px;
  min-height: 32px;
  margin: 0;
  padding: 5px 4px;
}

.inventory-item-name,
.inventory-item-meta {
  display: block;
}

.inventory-item-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.inventory-product {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.inventory-product > div {
  display: grid;
  gap: 3px;
  justify-items: start;
  min-width: 0;
}

.inventory-product .inv-edit {
  min-height: 0;
  padding: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.inventory-product .inv-edit:hover {
  background: transparent;
  color: var(--blue-dark);
}

.inventory-make-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--soft-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.inventory-thumb-slot {
  display: block;
  width: 104px;
  height: 104px;
}

.inventory-thumb {
  display: grid;
  width: 104px;
  height: 104px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--panel);
}

.inventory-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.inventory-thumb.empty {
  background: var(--subtle);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.inventory-thumb-slot.loading .inventory-thumb {
  opacity: 0.55;
}

.inventory-item-meta,
.inventory-item-qty,
.inventory-store-empty {
  color: var(--muted);
  font-size: 12px;
}

.inventory-item-unit {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--subtle);
  font-size: 12px;
  font-weight: 800;
}

.inventory-item-notes {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inventory-notes-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inventory-editor-row td {
  padding-top: 0;
  background: var(--subtle-2);
}

.inventory-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 92px 150px 128px minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.inventory-editor label {
  margin: 0;
  font-size: 12px;
}

.inventory-editor .inv-name {
  font-size: 15px;
}

.inventory-editor .inv-qty,
.inventory-editor .inv-price,
.inventory-editor .inv-unit {
  font-variant-numeric: tabular-nums;
}

.inventory-editor .inv-price {
  text-align: right;
}

.inventory-editor .inventory-make-toggle {
  min-height: 36px;
  align-self: end;
  justify-content: flex-start;
  padding: 0 10px;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  background: var(--subtle);
  color: var(--text);
  font-weight: 700;
}

.inventory-editor .inventory-make-toggle input {
  min-height: 0;
  width: 16px;
  height: 16px;
  padding: 0;
}

.inventory-editor-notes {
  grid-column: 1 / -1;
}

.inventory-editor-image {
  grid-column: span 2;
}

.inventory-editor .inv-refresh-image,
.inventory-editor .inv-remove {
  min-height: 34px;
  width: fit-content;
  padding: 0 11px;
}

.inventory-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.inventory-upload-button {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--secondary-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.inventory-upload-button:hover {
  background: var(--secondary-hover);
}

.inventory-upload-button:has(input:disabled) {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: wait;
}

.inventory-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.purchase-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  background: transparent;
}

.purchase-build-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 38px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.purchase-build-count input {
  width: 74px;
  min-height: 38px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.purchase-plan-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.purchase-plan-actions button {
  min-height: 38px;
}

.purchase-status {
  margin: 0;
  min-height: 16px;
}

.purchase-summary-wrap {
  border-top: 0;
  padding: 0;
}

.inventory-buy-summary {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.purchase-panel .inventory-buy-summary {
  min-height: 0;
  padding: 18px;
}

.inventory-buy-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.inventory-buy-title {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.inventory-buy-head h3 {
  margin: 0;
  font-size: 16px;
}

.inventory-buy-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.inventory-buy-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.inventory-buy-stats strong,
.inventory-buy-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.inventory-buy-stats strong {
  background: var(--text);
  color: #fff;
}

.inventory-buy-stats span {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  font-weight: 800;
}

.inventory-buy-list {
  display: grid;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  color: var(--muted);
}

.inventory-buy-row {
  display: grid;
  grid-template-columns: minmax(310px, 1.6fr) 110px 100px 150px minmax(120px, 0.7fr);
  align-items: center;
  gap: 12px;
  min-width: 820px;
  min-height: 76px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--text);
}

.inventory-buy-row:last-child {
  border-bottom: 0;
}

.inventory-buy-row-head {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-buy-product {
  display: grid;
  min-width: 0;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.inventory-buy-product .inventory-thumb,
.inventory-buy-product .inventory-thumb-slot {
  width: 76px;
  height: 76px;
}

.inventory-buy-product strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inventory-buy-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.inventory-buy-value.muted {
  color: var(--muted);
}

.inventory-buy-need {
  display: grid;
  width: fit-content;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.inventory-buy-need small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.inventory-buy-store {
  min-width: 0;
}

.inventory-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: capitalize;
}

.inventory-store img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.inventory-buy-row a:hover {
  color: var(--blue);
}

.production-tabs {
  display: flex;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.production-tabs button {
  min-height: 34px;
}

.production-tabs button.active {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
}

.production-panel {
  min-height: 0;
}

.production-panel[hidden] {
  display: none;
}

.production-panel[data-production-panel="stock"] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.no-access-view {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 18px;
}

.no-access-panel {
  width: min(680px, 100%);
  padding: 24px;
}

.no-access-panel h2 {
  margin-top: 6px;
}

.no-access-panel p {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}

.production-instructions {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--subtle-2);
}

.production-instruction {
  display: grid;
  gap: 14px;
  max-width: 1180px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.production-instruction-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.production-instruction-head h3 {
  margin: 0;
  font-size: 18px;
}

.production-instruction-head p,
.cable-pinout p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.production-instruction-head span {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cable-guide {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(250px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.cable-diagram {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fbfcff;
  color: #2457d6;
}

:root[data-theme="dark"] .cable-diagram {
  background: #f5f7fb;
  color: #2457d6;
}

.cable-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.cable-pinout {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cable-pinout h3 {
  margin: 0;
  font-size: 14px;
}

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

.cable-pinout-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--subtle);
}

.cable-pinout-list span {
  color: var(--muted);
  font-size: 11px;
}

.cable-pinout-list strong {
  color: var(--text);
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
}

th, td {
  text-align: left;
  border-bottom: 1px solid var(--soft-line);
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  background: var(--subtle);
  color: var(--muted);
  font-weight: 700;
  z-index: 1;
}

.sort-head {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.sort-head:hover {
  background: transparent;
  color: var(--blue);
}

.sort-head::after {
  content: "";
  display: inline-block;
  width: 14px;
  margin-left: 5px;
  color: var(--blue);
}

.sort-head.active[data-dir="asc"]::after {
  content: "^";
}

.sort-head.active[data-dir="desc"]::after {
  content: "v";
}

.last-seen {
  color: var(--muted);
  white-space: nowrap;
}

.last-seen-recent {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--soft-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
  color: color-mix(in srgb, var(--blue) 72%, var(--text));
  font-weight: 600;
}

tr:hover td { background: var(--row-hover); }
tr.selected td { background: var(--row-selected); }
tr.recent-device td {
  background: var(--recent-row);
}

tr.recent-device:hover td {
  background: var(--recent-row-hover);
}

tr.older-duplicate-device td {
  background: var(--duplicate-row);
}

tr.older-duplicate-device:hover td {
  background: var(--duplicate-row-hover);
}

tr.identity-mismatch-device td {
  background: color-mix(in srgb, var(--card-warn-bg) 72%, var(--panel));
}

tr.identity-mismatch-device:hover td {
  background: color-mix(in srgb, var(--card-warn-bg) 88%, var(--panel));
}

tr.zt-missing-device td {
  background: color-mix(in srgb, var(--badge-warn-bg) 54%, var(--panel));
}

tr.zt-missing-device:hover td {
  background: color-mix(in srgb, var(--badge-warn-bg) 72%, var(--panel));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid transparent;
}
.online .dot { background: var(--green); }
.offline .dot { background: var(--red); }
.partial .dot { background: var(--amber); }
.connecting .dot {
  background: var(--amber);
  animation: statusPulse 1s ease-in-out infinite;
}
.recent .dot {
  background: var(--gray);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gray) 18%, transparent);
}
.unknown .dot {
  background: var(--unknown-dot);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.device-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.device-badge.test {
  background: var(--badge-test-bg);
  color: var(--badge-test-text);
  border: 1px solid var(--badge-test-line);
}

.device-badge.new {
  background: var(--badge-new-bg);
  color: var(--badge-new-text);
  border: 1px solid var(--badge-new-line);
}

.device-badge.warning {
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
  border: 1px solid var(--badge-warn-line);
}

.device-badge.missing-zt {
  background: color-mix(in srgb, var(--amber) 14%, var(--panel));
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
}

.device-badge.identity {
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
  border: 1px solid var(--badge-warn-line);
}

.device-badge.released {
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
}

.device-badge.warranty {
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
}

.zt-id-hint {
  display: block;
  margin-top: 3px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
}

.actions {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  overflow: hidden;
  padding: 2px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--subtle);
}
.actions button, .actions a {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  background: var(--secondary-bg);
  color: var(--secondary-text);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.actions .edit-action {
  background: var(--panel);
  color: var(--text);
}
.actions a.disabled {
  pointer-events: none;
  color: var(--disabled-text);
  background: var(--disabled-bg);
}

.actions button:disabled,
.actions button:disabled:hover {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.actions .fa-solid,
.actions .fa-regular {
  font-size: 15px;
  line-height: 1;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}

.map-panel { position: relative; overflow: hidden; }
.panel-head {
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head.compact {
  padding: 0 0 10px 0;
  border-bottom: 0;
}
#map {
  height: 420px;
  background: var(--subtle);
}
.map-empty {
  display: none;
  position: absolute;
  inset: 54px 0 0 0;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
}

.details { overflow: hidden; }
.details[hidden] { display: none; }

.details-toggle {
  width: 100%;
  min-height: 46px;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 0;
  background: var(--subtle);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.details-toggle:hover,
.details-toggle.active {
  background: var(--subtle);
  color: var(--text);
}

.details-toggle span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.details-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.details-toggle::after {
  content: "v";
  color: var(--muted);
  font-size: 12px;
}

.details-toggle.active::after {
  content: "^";
}

.details-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  font-size: 13px;
}

.details-body[hidden] {
  display: none;
}

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

.details-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.details-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.details-actions a,
.details-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
}

.details-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
}

.details-actions a.disabled {
  pointer-events: none;
  background: var(--disabled-bg);
  color: var(--disabled-text);
}

.detail-section {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 11px;
  border-top: 1px solid var(--soft-line);
}

.detail-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.detail-list {
  display: grid;
  gap: 5px;
}

.detail-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.detail-row span {
  color: var(--muted);
}

.detail-row strong,
.detail-row a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-row.warning strong {
  color: var(--amber);
}

.zt-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.zt-panel:has(.zt-panel-body:not([hidden])) {
  flex: 1;
}

.zt-panel-body[hidden] {
  display: none;
}

.zt-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.zt-panel:not(:has(.zt-panel-body:not([hidden]))) {
  flex: 0 0 auto;
  min-height: auto;
}

.zt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 12px 0;
}

.zt-panel-toggle {
  width: 100%;
  min-height: 48px;
  justify-content: space-between;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--subtle);
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.zt-panel-toggle.active {
  border-bottom-color: var(--line);
}

.zt-panel-toggle:not(.active) {
  border-bottom-color: transparent;
}

.zt-panel-toggle span:first-child {
  display: grid;
  gap: 2px;
  text-align: left;
}

.zt-panel-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.zt-networks {
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.zt-panel-toggle:hover,
.zt-panel-toggle.active {
  background: var(--subtle);
  color: var(--text);
}

.zt-panel-toggle::after {
  content: "v";
  color: var(--muted);
  font-size: 12px;
}

.zt-panel-toggle.active::after {
  content: "^";
}

.zt-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.zt-alert[hidden] {
  display: none;
}

.zt-network {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  font-size: 13px;
}

.zt-network-connected,
.zt-network-disconnected,
.zt-network-warning {
  border-color: var(--soft-line);
  background: transparent;
}

.zt-network-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.zt-network-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.zt-network-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.zt-network-dot-connected {
  background: var(--green);
}

.zt-network-dot-disconnected {
  background: var(--red);
}

.zt-network-dot-warning {
  background: var(--amber);
}

.zt-network strong {
  overflow-wrap: anywhere;
}

.zt-network small {
  color: var(--muted);
}

.zt-error {
  color: var(--red);
}

.zt-members {
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  align-content: start;
}

.zt-member {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  font-size: 13px;
  background: var(--panel);
}

.zt-member-conflict {
  border-color: var(--badge-warn-line);
  background: var(--card-warn-bg);
}

.zt-member-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.zt-member-title strong,
.zt-member small {
  overflow-wrap: anywhere;
}

.zt-member-warning,
.zt-warning-text {
  color: var(--amber);
}

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

.zt-network-actions,
.zt-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.zt-network-actions button,
.zt-member-actions button {
  min-height: 30px;
  font-size: 12px;
  padding: 5px 9px;
  width: auto;
}

.provision-settings-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 8px;
  text-decoration: none;
}

.zt-action-log {
  display: none;
  max-height: 160px;
  overflow: auto;
  margin: 0 12px 12px;
  padding: 10px;
  border-radius: 7px;
  background: var(--console-bg);
  color: var(--console-text);
  font: 12px/1.45 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
}

dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

#deviceDialog {
  width: min(820px, calc(100vw - 28px));
}
dialog::backdrop { background: rgb(15 23 42 / 45%); }
form { padding: 18px; }
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dialog-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  margin-top: 16px;
}

#cancelBtn,
#saveDeviceBtn {
  justify-self: end;
  min-width: 92px;
  width: auto;
}

.mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 10px;
}

.mode-picker[hidden] {
  display: none;
}

.mode-picker legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
}

.mode-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--subtle-2);
  color: var(--text);
}

.edit-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.edit-tabs[hidden] {
  display: none;
}

.edit-tabs button {
  background: var(--secondary-bg);
  color: var(--secondary-text);
}

.edit-tabs button i {
  font-size: 14px;
}

.edit-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.edit-tab-panel[hidden] {
  display: none;
}

.customer-edit-panel,
.garmin-edit-panel,
.diagnostics-panel {
  display: grid;
  gap: 10px;
}

.tool-card-head h3,
.device-maintenance-tools h3 {
  margin: 0;
  font-size: 14px;
}

.form-error {
  min-height: 18px;
  color: var(--red);
  font-size: 13px;
  margin-top: 8px;
}

.password-hint {
  display: none;
}

.garmin-refresh-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.diagnostics-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.diagnostics-tools small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.diagnostics-result {
  display: grid;
  gap: 10px;
}

.diagnostics-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.diagnostics-output {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

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

.diagnostics-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--soft-line);
}

.diagnostics-summary-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.7fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  background: var(--panel);
}

.diagnostics-summary-row.tone-primary {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 70%, transparent);
}

.diagnostics-summary-row.tone-ok {
  background: color-mix(in srgb, var(--card-ok-bg) 55%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 72%, transparent);
}

.diagnostics-summary-row.tone-warn {
  background: color-mix(in srgb, var(--card-warn-bg) 55%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 72%, transparent);
}

.diagnostics-summary-row.tone-signal,
.diagnostics-summary-row.muted-row {
  background: var(--subtle);
}

.diagnostics-summary-row span {
  color: var(--muted);
  font-size: 11px;
}

.diagnostics-summary-row strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.diagnostics-signals {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
}

.signal-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.signal-bar-label {
  display: grid;
  gap: 2px;
}

.signal-bar-label strong {
  font-size: 13px;
}

.signal-bar-label span {
  color: var(--muted);
  font-size: 12px;
}

.signal-bar-track {
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--subtle);
}

.signal-bar-track span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.diagnostics-history {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.diagnostics-history-list {
  display: grid;
  gap: 8px;
}

.diagnostics-last-read {
  align-content: start;
}

.diagnostics-last-read-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.diagnostics-last-read-card span,
.diagnostics-last-read-card small {
  color: var(--muted);
  font-size: 11px;
}

.diagnostics-last-read-card strong {
  color: var(--text);
  font-size: 13px;
}

.diagnostics-history-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.diagnostics-history-item > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.diagnostics-history-item strong {
  color: var(--text);
}

.diagnostics-history-item dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.diagnostics-history-item dt {
  color: var(--muted);
  font-size: 11px;
}

.diagnostics-history-item dd {
  margin: 2px 0 0;
  font-size: 12px;
}

.diagnostics-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--subtle);
  font-size: 12px;
  font-weight: 700;
}

.service-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gray);
}

.service-pill.active::before {
  background: var(--green);
}

.service-pill.inactive::before,
.service-pill.failed::before {
  background: var(--red);
}

.diagnostics-patches {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
}

.diagnostics-patch-list {
  display: grid;
  gap: 6px;
}

.diagnostics-patch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--subtle);
}

.diagnostics-patch strong,
.diagnostics-patch small {
  display: block;
}

.diagnostics-patch small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.diagnostics-patch > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--disabled-bg);
  color: var(--disabled-text);
  white-space: nowrap;
}

.diagnostics-patch.installed > span {
  background: var(--badge-new-bg);
  color: var(--badge-new-text);
}

.diagnostics-patch.partial > span {
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
}

.diagnostics-patch.different > span {
  background: var(--badge-warn-bg);
  color: var(--badge-warn-text);
}

.diagnostics-patch.missing > span {
  background: var(--duplicate-row);
  color: var(--red);
}

.diagnostics-log {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--console-bg);
  color: var(--console-text);
  font: 12px/1.45 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
}

.tool-card-head {
  grid-column: 1 / -1;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.garmin-refresh-tools small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.garmin-license-tools {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

@media (max-width: 760px) {
  .garmin-refresh-tools,
  .diagnostics-tools {
    grid-template-columns: 1fr;
  }

  .diagnostics-workspace {
    grid-template-columns: 1fr;
  }

  .tool-actions {
    justify-content: stretch;
  }
}

.device-maintenance-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.device-maintenance-tools[hidden] {
  display: none;
}

.garmin-refresh-tools[hidden] {
  display: none;
}

.diagnostics-panel[hidden] {
  display: none;
}

.identity-check-tools {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--subtle);
}

.identity-check-status {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
  color: var(--text);
}

.identity-check-status.ok {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
}

.identity-check-status.warn {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
}

.identity-check-status.error {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
}

.identity-check-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.identity-check-facts div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: var(--subtle);
}

.identity-check-facts span,
.identity-check-facts small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.identity-check-facts strong {
  display: block;
  margin: 2px 0;
  font-size: 12px;
}

.identity-check-status ul {
  margin: 0;
  padding-left: 18px;
}

.identity-check-status li.error strong {
  color: var(--red);
}

.identity-check-status li.warn strong {
  color: var(--amber);
}

.ssh-dialog {
  width: min(960px, calc(100vw - 28px));
}

.provision-dialog {
  width: min(760px, calc(100vw - 28px));
}

.settings-dialog {
  width: min(820px, calc(100vw - 28px));
}

.settings-dialog.settings-page {
  width: min(1320px, calc(100vw - 36px));
}

.patch-dialog {
  width: min(760px, calc(100vw - 28px));
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.settings-tabs button {
  background: var(--secondary-bg);
  color: var(--secondary-text);
}

.settings-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.settings-tab-panel {
  display: grid;
  gap: 12px;
}

.settings-tab-panel[hidden] {
  display: none;
}

.patch-import-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.patch-import-box .tool-card-head {
  align-items: start;
  margin: 0;
}

.patch-import-box .tool-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.patch-import-box .step-note {
  margin: 3px 0 0;
}

.patch-import-box .check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.patch-import-box .check-row input {
  width: auto;
  margin: 0;
}

.patch-path-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.patch-import-box button {
  justify-self: start;
}

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

.patch-library-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.patch-library-list {
  display: grid;
  gap: 8px;
}

.patch-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.patch-library-editor {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--panel);
}

.patch-library-editor[hidden] {
  display: none;
}

.patch-library-editor label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.patch-library-editor input,
.patch-library-editor textarea {
  width: 100%;
}

.patch-library-actions {
  display: grid;
  gap: 6px;
  align-content: start;
}

.patch-library-item strong {
  display: block;
  font-size: 14px;
}

.patch-library-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.patch-library-item p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.settings-page {
  margin: 18px auto;
  padding: 0;
  overflow: visible;
}

.settings-page form {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 132px);
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgb(15 23 42 / 6%);
}

.settings-save-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: var(--panel);
}

.logs-download-box {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.settings-row.pending-delete {
  opacity: 0.58;
  background: var(--card-warn-bg);
}

.logs-list {
  display: grid;
  gap: 8px;
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 4px;
}

.log-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.log-file-row strong,
.log-file-row span {
  overflow-wrap: anywhere;
}

.log-file-row span {
  color: var(--muted);
  font-size: 12px;
}

.patch-log {
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--console-bg);
  color: var(--console-text);
  font: 12px/1.45 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
}

.aircraft-map-dialog {
  width: min(1180px, calc(100vw - 24px));
}

.aircraft-map-dialog .dialog-head {
  padding: 16px 16px 0;
  margin-bottom: 10px;
}

.aircraft-map-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 0 16px 12px;
}

#trafficSourcesText {
  color: var(--muted);
  font-size: 13px;
}

.aircraft-div-icon {
  background: transparent;
  border: 0;
}

.aircraft-marker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #111827;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.aircraft-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #2563eb;
  font-size: 28px;
  line-height: 1;
  transform-origin: center;
}

.aircraft-label {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

#aircraftMapLarge {
  height: min(72vh, 760px);
  min-height: 460px;
  border-top: 1px solid var(--soft-line);
}

#provisionSubtitle,
.dialog-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.subtle-link-row a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subtle-link-row a:hover {
  color: var(--blue);
}

.settings-head {
  margin-top: 14px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.settings-rows {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: min(42vh, 420px);
  overflow: auto;
  padding-right: 4px;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
}

.settings-row label {
  margin-top: 0;
}

.settings-network-usage {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-height: 14px;
  margin-top: 2px;
}

.settings-row .remove-network-row {
  align-self: start;
  margin-top: 22px;
}

.provision-section {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.provision-section[hidden] {
  display: none;
}

.provision-wizard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.provision-wizard button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
  color: var(--muted);
  font-weight: 700;
}

.provision-wizard button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.provision-wizard button.active {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--soft-line));
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
}

.provision-wizard button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.device-details-fields[hidden] {
  display: none;
}

.device-details-fields,
.customer-edit-panel,
.garmin-edit-panel {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.ssh-credentials-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.customer-tools {
  display: grid;
  gap: 12px;
}

.warranty-toggle {
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
  font-weight: 800;
}

.warranty-status-grid {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px 14px;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle-2);
}

.warranty-status-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.warranty-status-grid strong {
  color: var(--text);
}

.auto-fields[hidden] {
  display: none;
}

.provision-step {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-line);
}

.provision-step + .provision-step {
  margin-top: 12px;
}

.provision-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.provision-step h2 {
  font-size: 14px;
}

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

.provision-review-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--subtle);
}

.provision-review-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.provision-review-grid strong {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.step-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 3px 0 8px;
}

.wide {
  width: 100%;
  margin-top: 10px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.provision-log {
  min-height: 170px;
  max-height: 280px;
  overflow: auto;
  margin: 12px 0 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--console-bg);
  color: var(--console-text);
  font: 12px/1.45 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
}

.provision-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

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

.progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--subtle);
}

.progress-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #2563eb);
  animation: progress-slide 1.15s ease-in-out infinite;
}

.provision-progress.is-error .progress-bar span {
  width: 100%;
  background: #ef4444;
  animation: none;
}

.provision-progress.is-done .progress-bar span {
  width: 100%;
  background: #22c55e;
  animation: none;
}

:root[data-theme="dark"] .progress-bar span {
  background: linear-gradient(90deg, #4f8f65, #2d6fb3);
}

:root[data-theme="dark"] .provision-progress.is-error .progress-bar span {
  background: var(--red);
}

:root[data-theme="dark"] .provision-progress.is-done .progress-bar span {
  background: var(--green);
}

.provision-progress small {
  color: var(--muted);
  font-size: 12px;
}

@keyframes progress-slide {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(55%); }
  100% { transform: translateX(250%); }
}

.ssh-login[hidden],
.ssh-terminal[hidden] {
  display: none;
}

#sshTarget {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.ssh-terminal {
  padding: 0;
}

.terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--console-bg);
  color: var(--console-text);
}

#terminal {
  height: 540px;
  background: #0b1020;
  padding: 0;
}

#terminal .xterm {
  height: 100%;
  padding: 10px;
}

:root[data-theme="dark"] .zt-install-banner {
  border-bottom-color: #5a4d2d;
  background: #2b281f;
  color: #d8c985;
}

:root[data-theme="dark"] .zt-install-banner p {
  color: #b9aa73;
}

:root[data-theme="dark"] .zt-install-banner a {
  color: #8db9dd;
}

:root[data-theme="dark"] .leaflet-control-zoom a,
:root[data-theme="dark"] .leaflet-control-attribution {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
}

@media (max-width: 1080px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  .topbar { grid-template-columns: 1fr; }
  .toolbar { justify-content: space-between; }
  .users-admin-hero,
  .users-admin-card-head,
  .role-permissions-head,
  .users-save-bar,
  .user-settings-row {
    grid-template-columns: 1fr;
  }
  .role-group-tools,
  .role-group-picker,
  .role-permission-list,
  .permission-module-grid,
  .permission-grid,
  .user-main-fields,
  .user-access-fields {
    grid-template-columns: 1fr;
  }
  .users-admin-actions,
  .user-settings-actions {
    justify-content: flex-start;
  }
  .role-group-row {
    grid-template-columns: 1fr;
  }
  .tickets-view {
    padding: 16px;
  }
  .tickets-panel {
    min-height: calc(100vh - 28px);
    padding: 20px;
  }
  .inventory-panel .panel-head,
  .stock-toolbar,
  .purchase-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .production-tabs,
  .inventory-actions,
  .purchase-plan-actions {
    justify-content: flex-start;
  }
  .inventory-buy-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .inventory-buy-stats,
  .purchase-plan-actions {
    justify-content: flex-start;
  }
  .tickets-layout,
  .ticket-edit-panel,
  .ticket-admin {
    grid-template-columns: 1fr;
  }
  .ticket-form {
    position: static;
  }
  .ticket-list-head,
  .ticket-card-summary {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ticket-summary-main {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  }
  .ticket-summary-side {
    justify-content: space-between;
  }
  .ticket-admin-actions {
    justify-content: flex-start;
  }
  .ticket-card-actions {
    justify-content: flex-start;
  }
  .ticket-scope-tabs {
    width: 100%;
  }
  .ticket-scope-tabs button {
    flex: 1;
    justify-content: center;
  }
  .layout { grid-template-columns: 1fr; }
  .table-wrap { max-height: 60vh; }
  .side {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .zt-networks,
  .zt-members {
    max-height: none;
  }

  .diagnostics-summary { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .filters {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .device-search::before {
    display: none;
  }
  .zt-install-banner {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .internet-banner { align-items: flex-start; flex-direction: column; }
  .alerts-panel { margin: 10px 10px 0; }
  .alerts-list { grid-template-columns: 1fr; }
  .service-alert { grid-template-columns: 1fr; }
  .service-alert-actions, .service-alert p { grid-column: auto; grid-row: auto; }
  .toolbar { display: grid; grid-template-columns: 1fr; }
  .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    border-left: 0;
  }
  .view-tabs,
  .production-tabs,
  .status-filter { width: 100%; }
  .view-tabs button { flex: 1; }
  .production-tabs button { flex: 1; }
  .stock-toolbar,
  .purchase-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .tickets-view {
    padding: 10px;
  }
  .tickets-panel {
    min-height: calc(100vh - 20px);
    padding: 14px;
  }
  .tickets-hero {
    grid-template-columns: 1fr;
  }
  .tickets-hero .secondary {
    width: 100%;
    justify-content: center;
  }
  .ticket-form,
  .ticket-list-panel {
    padding: 16px;
  }
  .ticket-section-title {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .ticket-card-summary {
    padding: 15px 16px;
  }
  .ticket-summary-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ticket-summary-title strong,
  .ticket-summary-title span {
    overflow-wrap: anywhere;
  }
  .ticket-summary-side {
    align-items: center;
    gap: 8px;
  }
  .ticket-type {
    width: fit-content;
    max-width: 100%;
  }
  .ticket-card-details {
    padding: 0 16px 16px;
  }
  .ticket-card-actions,
  .ticket-admin-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ticket-card-actions button,
  .ticket-admin-actions button {
    width: 100%;
    justify-content: center;
  }
  .inventory-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .purchase-plan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .purchase-build-count { width: 100%; }
  .inventory-editor { grid-template-columns: 1fr; }
  .inventory-editor-image,
  .inventory-editor-notes { grid-column: auto; }
  .layout { padding: 10px; gap: 10px; }
  .grid-2, .dialog-actions, .mode-picker { grid-template-columns: 1fr; }
  .cable-guide,
  .cable-pinout-list { grid-template-columns: 1fr; }
  .production-instruction-head { flex-direction: column; }
  .provision-wizard,
  .provision-review-grid { grid-template-columns: 1fr; }
  .edit-tabs, .diagnostics-grid { grid-template-columns: 1fr; }
  .diagnostics-workspace { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 2px; }
  .diagnostics-summary-row { grid-template-columns: 1fr; gap: 3px; }
  .signal-bar-row { grid-template-columns: 1fr; }
  .diagnostics-history-item dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-row { grid-template-columns: 1fr; }
  .dialog-actions span { display: none; }
  #map { height: 320px; }
  #terminal { height: 420px; }
}