:root {
  color-scheme: light;
  --bg: #f4f7f4;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --ink: #111714;
  --muted: #607068;
  --line: #dde5df;
  --green: #118a43;
  --green-dark: #075f2d;
  --green-soft: #e5f5eb;
  --black: #080b09;
  --warning: #946200;
  --warning-soft: #fff4d8;
  --shadow: 0 18px 45px rgba(15, 30, 20, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg, rgba(17, 138, 67, 0.08), transparent 260px),
    var(--bg);
  color: var(--ink);
  /* Prevent the entire page from scrolling horizontally when any inner
     element (typically a wide table) exceeds the viewport. Wide content
     scrolls inside its own .table-wrap instead. Without this the panel
     headings (and their action buttons) get pushed off-screen to the
     right when the viewport doesn't fit a 25-column changelog table. */
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

button:hover:not(:disabled) {
  background: var(--green-dark);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

button.ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

button.ghost:hover:not(:disabled) {
  background: var(--surface-soft);
}

.support-shell {
  min-height: 100vh;
  padding: 28px;
  max-width: 100vw;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.login-view {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 430px);
  align-items: center;
  gap: 52px;
  max-width: 1040px;
  margin: 0 auto;
}

.login-brand {
  display: grid;
  gap: 14px;
}

.brand-logo {
  width: min(380px, 72vw);
  height: auto;
  display: block;
  margin-bottom: 12px;
}

.lead {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.eyebrow,
.label {
  margin: 0 0 6px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
  line-height: 1.12;
}

h1 {
  font-size: clamp(34px, 5vw, 58px);
}

h2 {
  font-size: 22px;
}

.login-card,
.panel,
.topbar,
.hero-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.login-card {
  padding: 28px;
  display: grid;
  gap: 18px;
}

.form-heading,
.panel-heading,
.topbar,
.operator,
.brand-inline,
.hero-status {
  display: flex;
  align-items: center;
}

.form-heading,
.panel-heading {
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-heading > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* Action buttons always reserve their own line on narrower viewports so
   they never get pushed off the right edge by long heading text or wide
   table content below. On wide screens they sit next to the heading via
   flex-wrap; on narrow they wrap to a new row, but never disappear. */
.panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex-basis: auto;
  margin-left: auto;
}

@media (max-width: 900px) {
  .panel-heading-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

.panel-heading-actions form {
  margin: 0;
}

.account-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 13px;
  color: var(--ink);
  background: #fff;
}

input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(17, 138, 67, 0.16);
}

.form-note,
.form-error,
.form-success {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.form-error {
  color: #b00020;
  min-height: 18px;
}

.form-success {
  color: var(--green-dark);
  font-weight: 800;
}

.form-note a {
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
}

.form-note a:hover {
  text-decoration: underline;
}

.dashboard {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.topbar {
  min-height: 88px;
  padding: 18px 20px;
  justify-content: space-between;
  gap: 22px;
}

.brand-inline {
  gap: 18px;
}

.brand-inline img {
  width: 172px;
  height: auto;
  display: block;
}

.operator {
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}

.hero-status {
  padding: 22px;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, #ffffff 0%, #ffffff 52%, #eef8f1 100%);
}

.hero-copy {
  min-width: 260px;
}

.hero-copy p:last-child {
  max-width: 520px;
  margin: 10px 0 0;
  color: var(--muted);
}

.token-card,
.host-card {
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.token-card span,
.host-card span,
.session-details span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.token-card strong {
  display: block;
  color: var(--green-dark);
  font-size: 38px;
  line-height: 1;
}

.host-card strong {
  display: block;
  font-size: 20px;
}

.host-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(290px, 0.82fr) minmax(360px, 1.18fr);
  gap: 18px;
}

/* Critical: lets grid/flex items shrink below their intrinsic content
   width. Without this cascade, a wide changelog/fellogg table forces
   its panel column wider, which pushes panel-heading buttons off-screen.
   Applied at every nesting level so the constraint propagates from
   dashboard-grid down through panel + panel-content + table-wrap. */
.dashboard-grid > *,
.dashboard-grid > * > *,
.dashboard-grid .panel > * {
  min-width: 0;
}

/* Wide tables stay inside their wrap and scroll horizontally there only.
   The wrap itself respects the panel's width — never grows to fit the
   table's intrinsic width. */
.changelog-table-wrap,
.fault-table-wrap {
  max-width: 100%;
}

.connection-panel {
  grid-column: 1 / -1;
}

.connection-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.remote-launch-panel {
  grid-column: 1 / -1;
}

.fault-panel {
  grid-column: 1 / -1;
}

.panel {
  padding: 20px;
  display: grid;
  gap: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pill.pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.pill.online {
  background: var(--green-soft);
  color: var(--green-dark);
}

.config-list {
  margin: 0;
  display: grid;
  gap: 10px;
}

.config-list div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 13px;
  background: var(--surface-soft);
}

.config-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.config-list dd {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.session-empty {
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-soft);
}

.session-empty p {
  margin: 5px 0 0;
  color: var(--muted);
}

.empty-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 7px var(--warning-soft);
  flex: 0 0 auto;
}

.session-empty.online .empty-dot {
  background: var(--green);
  box-shadow: 0 0 0 7px var(--green-soft);
}

.session-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.session-details > div {
  padding: 14px;
  background: #fff;
}

.session-details > div + div {
  border-left: 1px solid var(--line);
}

.screen-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 80px),
    var(--black);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 22px;
}

.screen-placeholder {
  width: min(500px, 86%);
  aspect-ratio: 4 / 3;
  border: 1px solid #29352f;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #8d9a93;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    #0b100d;
  font-weight: 900;
}

.screen-live {
  width: min(500px, 86%);
  aspect-ratio: 4 / 3;
  border: 1px solid #4b6253;
  border-radius: 8px;
  background:
    linear-gradient(#14231a 0 0) 0 0 / 100% 42px no-repeat,
    repeating-linear-gradient(0deg, #101714, #101714 30px, #1a2920 31px, #1a2920 60px);
  color: #d8f5e3;
  padding: 58px 26px 24px;
  display: grid;
  align-content: start;
  gap: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

.screen-live strong {
  color: #76d991;
  font-size: 26px;
}

.remote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.remote-launch {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface-soft);
}

.remote-launch p {
  margin: 6px 0 0;
  color: var(--muted);
}

.button-link {
  min-height: 44px;
  border-radius: 7px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.button-link.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.panel .button-link.secondary {
  min-height: 36px;
  padding: 0 14px;
}

.panel-heading-actions .ghost {
  min-height: 36px;
  padding: 0 14px;
}

.button-link.disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.remote-window-body {
  background: #0d1210;
}

.remote-window {
  min-height: 100vh;
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  color: #f4fbf6;
}

.remote-window-header,
.remote-window-actions {
  border: 1px solid #25342b;
  border-radius: 8px;
  background: #121a15;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.remote-window-header {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.remote-window-header h1 {
  font-size: 30px;
}

.remote-window-header p:last-child {
  margin: 8px 0 0;
  color: #aebdb4;
}

.remote-window-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #aebdb4;
  font-weight: 800;
}

.remote-window-screen {
  min-height: 0;
  display: grid;
}

.remote-window-screen .screen-frame,
.remote-window-screen .mirror-frame {
  height: 100%;
  min-height: 420px;
}

.remote-window-actions {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mirror-frame {
  position: relative;
  min-height: 420px;
  border: 1px solid #25342b;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 120px),
    #070a08;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.mirror-canvas {
  width: min(100%, 1200px);
  height: auto;
  max-height: calc(100vh - 190px);
  aspect-ratio: 5 / 3;
  display: block;
  border: 1px solid #34463b;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    #0b100d;
  touch-action: none;
}

.mirror-frame.is-offline .mirror-canvas {
  opacity: 0.4;
}

/* Header inside the mirror popup window — shows which lift this PiP is
   for so Marcus can tell several open windows apart at a glance. */
.mirror-pip-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 14px;
  background: #16201b;
  color: #d6e1da;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #25342b;
}

.mirror-pip-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  background: var(--green-dark, #0e6b3a);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mirror-pip-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Document Picture-in-Picture mode — drop padding/borders, canvas fills. */
.pip-mirror {
  margin: 0;
  padding: 0;
  background: #0d1210;
  overflow: hidden;
}

.pip-mirror #mirror-container {
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0d1210;
}

.pip-mirror .mirror-pip-header {
  flex: 0 0 auto;
}

.pip-mirror .mirror-frame {
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: #0d1210;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pip-mirror .mirror-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.mirror-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
}

.v2-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
}

.v2-status:empty {
  display: none;
}

/* Fault-log click-to-expand history cells (Chain, Drive relays). */
.history-cell {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}

.history-cell:hover {
  background: var(--surface-soft);
}

.history-popover {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 360px;
  background: var(--panel, #fff);
  color: var(--text-1, #0c1a13);
  box-shadow: 0 24px 60px rgba(15, 30, 20, 0.18);
}

.history-popover::backdrop {
  background: rgba(15, 30, 20, 0.45);
}

.history-popover header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 14px;
}

.history-popover h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.history-popover .close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}

.history-popover table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
}

.history-popover th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 800;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line);
}

.history-popover td {
  padding: 4px 8px;
}

.history-popover td:first-child {
  color: var(--muted);
  text-align: right;
  width: 60px;
}

.history-popover .history-grid.align-right td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Top-level lift selector — one tab per occupied slot (1-6). */
.lift-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 0;
  flex-wrap: wrap;
}

.lift-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: #fff;
  text-decoration: none;
  color: var(--text-1, #0c1a13);
  font-size: 13px;
  font-weight: 700;
  border-bottom: none;
  position: relative;
  top: 1px;
}

.lift-tab.is-active {
  background: var(--green-soft, #e8f3ec);
  border-color: var(--green-dark, #0e6b3a);
  color: var(--green-dark, #0e6b3a);
}

.lift-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--surface-soft, #f3f6f3);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.lift-tab.is-active .lift-tab-num {
  background: var(--green-dark, #0e6b3a);
  color: #fff;
}

.lift-tab-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.lift-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lift-tab-dot.is-online {
  background: #2ea862;
  box-shadow: 0 0 0 3px rgba(46, 168, 98, 0.18);
}

.lift-tab-dot.is-offline {
  background: #b9c5be;
}

.lift-tab-empty {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.lift-tab-empty code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--surface-soft, #f3f6f3);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 4px;
  font-style: normal;
}

/* Lift rename + remove form (THOR-inställning tab) */
.lift-rename-form {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lift-rename-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.lift-rename-form input[type="text"] {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1, #0c1a13);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  background: #fff;
  font-weight: 500;
}

.lift-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.lift-form-actions button[type="submit"] {
  background: var(--green-dark, #0e6b3a);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.button-danger {
  background: #fff;
  color: #9f1d15;
  border: 1px solid #f0c4c0;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.button-danger:hover {
  background: #ffe4e2;
}

/* Sub-tab visibility — all panels are rendered in DOM at all times so the
   Document Picture-in-Picture mirror window survives tab switches.
   Body's data-active-tab attribute selects which panel(s) to show. */
[data-tab-panel] {
  display: none;
}

body[data-active-tab="overview"]   [data-tab-panel="overview"],
body[data-active-tab="connection"] [data-tab-panel="connection"],
body[data-active-tab="notify"]     [data-tab-panel="notify"],
body[data-active-tab="changelog"]  [data-tab-panel="changelog"] {
  display: grid;
}

/* Dashboard tab navigation — separates the support overview from the
   send-to-lift and parameter-changelog views. URLs are bookmarkable
   via ?tab=overview|notify|changelog. */
.dashboard-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.dashboard-tabs a {
  display: inline-block;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.dashboard-tabs a:hover {
  color: var(--text-1, #0c1a13);
}

.dashboard-tabs a.is-active {
  color: var(--green-dark, #0e6b3a);
  border-bottom-color: var(--green-dark, #0e6b3a);
}

/* Notify-to-display panel + Parameter changelog panel — full-width siblings
   of fault-panel in the dashboard grid. */
.notify-panel,
.changelog-panel {
  grid-column: 1 / -1;
}

.notify-form {
  display: grid;
  gap: 12px;
}

.notify-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.notify-form input,
.notify-form textarea,
.notify-form select {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1, #0c1a13);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  background: #fff;
  font-weight: 500;
}

.notify-form textarea {
  resize: vertical;
  min-height: 56px;
}

.notify-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.notify-form select {
  width: auto;
}

.notify-form button[type="submit"] {
  background: var(--green-dark, #0e6b3a);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.notify-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notify-status {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
}

.notify-status[data-state="ok"] {
  color: var(--green-dark, #0e6b3a);
}

.notify-status[data-state="fail"] {
  color: #9f1d15;
}

.changelog-content {
  font-size: 14px;
  color: var(--muted);
}

.changelog-search-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.changelog-search {
  width: 320px;
  max-width: 100%;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  background: #fff;
  color: var(--text-1, #0c1a13);
}

.changelog-search:focus {
  outline: none;
  border-color: var(--green-dark, #0e6b3a);
  box-shadow: 0 0 0 3px rgba(14, 107, 58, 0.15);
}

#changelogCount {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.changelog-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.changelog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-1, #0c1a13);
}

.changelog-table th,
.changelog-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.changelog-table thead th {
  background: var(--surface-soft, #f3f6f3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 800;
}

.changelog-table code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  background: var(--surface-soft, #f3f6f3);
  padding: 1px 6px;
  border-radius: 4px;
}

.changelog-table .value-cell {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  white-space: nowrap;
}

.changelog-table .oldval {
  color: #8a9690;
  font-weight: 500;
}

.changelog-table .value-arrow {
  display: inline-block;
  margin: 0 10px;
  color: #b0bcb6;
}

.changelog-table .newval {
  font-weight: 700;
  color: var(--green-dark, #0e6b3a);
}

.changelog-table .value-added {
  color: var(--green-dark, #0e6b3a);
  font-weight: 700;
}

.changelog-table .value-removed {
  color: #9f1d15;
  font-weight: 500;
}

.changelog-table .value-empty {
  color: var(--muted);
  font-style: italic;
}

/* Print styling for parameter changelog: hide everything except the
   active section, render the table cleanly, no nav/topbar/sidebar. */
@media print {
  body.printing-changelog .topbar,
  body.printing-changelog .lift-tabs,
  body.printing-changelog .dashboard-tabs,
  body.printing-changelog .panel-heading-actions,
  body.printing-changelog .changelog-search-wrap,
  body.printing-changelog .panel:not(.changelog-panel) {
    display: none !important;
  }
  body.printing-changelog .panel.changelog-panel {
    border: none;
    box-shadow: none;
    padding: 0;
  }
  body.printing-changelog .changelog-table-wrap {
    overflow: visible !important;
    border: none;
  }
  body.printing-changelog .changelog-table {
    page-break-inside: auto;
    font-size: 10px;
  }
  body.printing-changelog .changelog-table tr {
    page-break-inside: avoid;
  }
  body.printing-changelog .changelog-table .value-cell {
    white-space: normal;
  }
}

.changelog-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.v2-status.is-idle {
  background: #26302b;
  color: #b9c5be;
}

.v2-status.is-warn {
  background: var(--warning-soft);
  color: var(--warning);
}

.v2-status.is-live {
  background: var(--green-soft);
  color: var(--green-dark);
}

.v2-status.is-alert {
  background: #ffe4e2;
  color: #9f1d15;
}

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

.password-dialog {
  width: min(460px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.password-dialog::backdrop {
  background: rgba(7, 11, 9, 0.45);
}

.password-dialog .password-form {
  padding: 22px;
}

.dialog-close {
  min-height: 38px;
}

.fault-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.fault-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.excel-report-table {
  min-width: 2600px;
}

.fault-table th,
.fault-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.fault-table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.fault-table td strong {
  display: block;
  margin-bottom: 5px;
}

.fault-table td small {
  display: -webkit-box;
  max-width: 460px;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hint-cell {
  min-width: 360px;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.35;
}

.empty-report-cell {
  height: 76px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.report-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.report-meta-grid > div {
  padding: 14px;
  background: var(--surface-soft);
}

.report-meta-grid > div + div {
  border-left: 1px solid var(--line);
}

.report-meta-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-note,
.report-waiting {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.report-note {
  color: var(--muted);
  line-height: 1.45;
}

.report-note strong {
  color: var(--ink);
}

.report-waiting {
  display: flex;
  align-items: center;
  gap: 14px;
}

.report-waiting p {
  margin: 6px 0 0;
  color: var(--muted);
}

.fault-type {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #edf1ee;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.fault-type.error {
  background: #ffe4e2;
  color: #9f1d15;
}

.fault-type.warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.fault-type.info {
  background: #e6eef8;
  color: #1e5b8f;
}

@media (max-width: 900px) {
  .support-shell {
    padding: 14px;
  }

  .login-view,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hero-status,
  .topbar,
  .operator,
  .remote-launch,
  .remote-window-header,
  .remote-window-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .token-card,
  .host-card {
    width: 100%;
  }

  .brand-inline img {
    width: 150px;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: 34px;
  }

  .brand-inline,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-details {
    grid-template-columns: 1fr;
  }

  .report-meta-grid {
    grid-template-columns: 1fr;
  }

  .session-details > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .report-meta-grid > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}