/* LiftCloud — clean, neutral, status-driven palette.
   No gradients on layout surfaces. Color only carries operational state. */

/* ─── Orion-style light palette (green nuance) ─── */
:root {
  --bg-0:     #f3f5f1;     /* page — sand with green undertone */
  --bg-1:     #fbfaf6;     /* sections — warm off-white */
  --bg-2:     #efece4;     /* cards — Orion beige */
  --bg-3:     #e7e4dc;     /* hover / elevated row */
  --text:     #1c2622;     /* deep green-grey */
  --text-2:   #4d5a55;
  --text-3:   #7c8780;
  --line:     #d8d4cb;     /* warm beige border */
  --line-2:   #c3bfb5;
  --ok:       #16a34a;     /* LiftCloud-green */
  --warn:     #a16207;
  --alert:    #b8351c;
  --crit:     #8a1226;     /* critical (blocked mode) — deep crimson, above --alert */
  --live:     #16a34a;     /* primary accent — same green */
  --idle:     #8b958f;
  /* Dörr A / Dörr B — fast färgkodning i dörr-vyn (A=blå, B=bärnsten/orange,
     Davids val 2026-07-24). Blå–orange = mest färgblind-säkra paret. Ljust tema
     = mörkare toner för läsbarhet mot beige kort; mörkt tema ljusare (nedan). */
  --door-a:   #2563eb;     /* blå */
  --door-b:   #b45309;     /* bärnsten/orange */
  --r-1:      5px;
  --r-2:      8px;
  --r-3:      12px;
  --t:        cubic-bezier(.2,.8,.2,1);
  --shadow:   0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(20, 35, 25, .08);
  --sans:     "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark theme — keep but with green accent to match light mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-0:   #0f1413;
    --bg-1:   #161c1b;
    --bg-2:   #1c2422;
    --bg-3:   #24302d;
    --text:   #e9efe7;
    --text-2: #a3afa9;
    --text-3: #6b7872;
    --line:   #2a3431;
    --line-2: #364340;
    --ok:     #22c55e;
    --warn:   #f59e0b;
    --alert:  #ef4444;
    --crit:   #e11d48;
    --live:   #22c55e;
    --door-a: #60a5fa;     /* blå — ljusare mot mörk bakgrund */
    --door-b: #f59e0b;     /* bärnsten/orange — ljusare mot mörk bakgrund */
  }
}

/* The in-app Dark/Light toggle sets html[data-theme]. These attribute rules
   override BOTH :root and the prefers-color-scheme media query above, so the
   switch actually works regardless of the OS setting. Crucially they also set
   the --orion-* surface vars, which were light-only before (so cards/text
   stayed light in dark mode = the broken dark theme). */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0f1413; --bg-1: #161c1b; --bg-2: #1c2422; --bg-3: #24302d;
  --text: #e9efe7; --text-2: #a3afa9; --text-3: #6b7872;
  --line: #2a3431; --line-2: #364340;
  --ok: #22c55e; --warn: #f59e0b; --alert: #ef4444; --crit: #e11d48; --live: #22c55e; --idle: #6b7872;
  --door-a: #60a5fa; --door-b: #f59e0b;   /* A=blå, B=orange (mörkt tema) */
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.45);
  --orion-bg: #0f1413; --orion-card: #1c2422; --orion-card-2: #24302d;
  --orion-text: #e9efe7; --orion-text-2: #a3afa9; --orion-text-3: #6b7872;
  --orion-accent: #22c55e; --orion-accent-dim: #16a34a;
  --orion-border: #2a3431;
  --orion-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.45);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f3f5f1; --bg-1: #fbfaf6; --bg-2: #efece4; --bg-3: #e7e4dc;
  --text: #1c2622; --text-2: #4d5a55; --text-3: #7c8780;
  --line: #d8d4cb; --line-2: #c3bfb5;
  --ok: #16a34a; --warn: #a16207; --alert: #b8351c; --crit: #8a1226; --live: #16a34a; --idle: #8b958f;
  --door-a: #2563eb; --door-b: #b45309;   /* A=blå, B=orange (ljust tema) */
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(20,35,25,.08);
  --orion-bg: #f6f8f7; --orion-card: #f0eee9; --orion-card-2: #ebe9e3;
  --orion-text: #1e2a23; --orion-text-2: #5d6864; --orion-text-3: #8b958f;
  --orion-accent: #16a34a; --orion-accent-dim: #15803d;
  --orion-border: #d8d4cc;
  --orion-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--ok) 8%, transparent), transparent 260px);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ok); }

button { font-family: inherit; cursor: pointer; }

code, .mono {
  font-family: var(--mono);
  font-size: 13px;
}

/* ─── App shell ─────────────────────────────────────────── */

.lc-app {
  display: grid;
  /* minmax(0, 1fr) lets the main column shrink below intrinsic content
     width — required so wide tables (LIF-93 loggbok = 2400 px) can
     scroll horizontally inside their wrapper instead of pushing the
     whole grid wider than the viewport. */
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.lc-sidebar {
  grid-area: sidebar;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.lc-topbar {
  grid-area: topbar;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.lc-topbar-spacer { flex: 1; }

.lc-main {
  grid-area: main;
  padding: 20px 24px 64px;
  max-width: 1600px;
  width: 100%;
  /* Lets descendants with `overflow-x: auto` actually scroll instead
     of pushing the layout wider than the viewport. */
  min-width: 0;
}

.lc-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.lc-page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.lc-page-head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
}
.lc-page-head h2 {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 600;
}
.lc-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lc-section-title {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.lc-brand-mark {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--line));
}
.lc-brand-name {
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--text);
}
.lc-brand-tag {
  display: block;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── Hierarchy breadcrumb (the killer LiftCloud component) ─────── */

.lc-hierarchy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--mono);
}
.lc-hierarchy-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.lc-hierarchy-step:hover { background: var(--bg-3); color: var(--text); }
.lc-hierarchy-step .lc-hierarchy-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
}
.lc-hierarchy-sep {
  color: var(--text-3);
  font-size: 10px;
}

/* ─── Sidebar nav ─────────────────────────────────────────── */

.lc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  flex: 1;
}
.lc-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.lc-nav-item:hover { background: var(--bg-2); color: var(--text); }
.lc-nav-item.is-active {
  background: var(--bg-2);
  color: var(--text);
  border-left: 2px solid var(--ok);
  padding-left: 10px;
}
.lc-nav-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  padding: 14px 12px 4px;
}
.lc-nav-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.lc-nav-meta--alert { color: var(--alert); }
.lc-nav-meta--warn  { color: var(--warn); }

.lc-lang-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-1);
}
.lc-lang-switch button {
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1 var(--mono);
}
.lc-lang-switch button:hover {
  color: var(--text);
  background: var(--bg-2);
}
.lc-lang-switch button.is-active {
  color: var(--text);
  background: var(--bg-3);
}
.lc-auth-lang {
  margin: -2px 0 8px;
}
.lc-auth-lang .lc-lang-switch {
  width: 116px;
  margin: 0 0 0 auto;
}

/* ─── Status badge ─────────────────────────────────────────── */

.lc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
}
.lc-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--idle);
}
.lc-status.is-online::before  { background: var(--ok); }
.lc-status.is-warn::before    { background: var(--warn); }
.lc-status.is-alert::before   { background: var(--alert); }
.lc-status.is-critical::before { background: var(--crit); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crit) 30%, transparent); }
.lc-status.is-live::before    { background: var(--live);  box-shadow: 0 0 0 2px color-mix(in srgb, var(--live) 24%, transparent); }
.lc-status.is-online  { color: var(--ok); }
.lc-status.is-warn    { color: var(--warn); }
.lc-status.is-alert   { color: var(--alert); }
.lc-status.is-critical { color: var(--crit); font-weight: 700; letter-spacing: .02em; border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); background: color-mix(in srgb, var(--crit) 12%, var(--bg-2)); }
.lc-status.is-live    { color: var(--live); }

/* ─── Metric strip (top of page) ───────────────────────────── */

.lc-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  margin-bottom: 16px;
}
.lc-metric {
  background: var(--bg-1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lc-metric:hover { background: var(--bg-2); }
.lc-metric.is-clickable { cursor: pointer; }
.lc-metric.is-clickable:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.lc-metric.is-active { background: var(--bg-2); box-shadow: inset 0 -3px 0 var(--live); }
.lc-metric-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--text-3);
}
.lc-metric-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.lc-metric-foot {
  font-size: 11px;
  color: var(--text-2);
}

/* ─── Filter bar ──────────────────────────────────────────── */

.lc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  margin-bottom: 12px;
}
.lc-filter-input,
.lc-filter-select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 10px;
  min-width: 140px;
}
.lc-filter-input:focus,
.lc-filter-select:focus {
  outline: none;
  border-color: var(--ok);
}
.lc-role-select {
  min-width: 120px;
  padding: 4px 8px;
}
.lc-inline-msg {
  font-size: 12px;
  color: var(--text-3);
  margin: 4px 0 8px;
}
.lc-filter-spacer { flex: 1; }
.lc-filter-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.lc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lc-filter-field > span,
.lc-check > span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lc-filter-field--search { flex: 1 1 220px; }
.lc-filter-field--search .lc-filter-input { width: 100%; }
.lc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding-top: 16px;
}
.lc-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--alert);
}

/* ─── Fleet table ─────────────────────────────────────────── */

.lc-property-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.lc-property-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: 0 6px 16px rgba(15, 30, 20, 0.05);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lc-property-card.is-red {
  border-color: color-mix(in srgb, var(--alert) 55%, var(--line));
}

.lc-property-card.is-yellow {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line));
}

@keyframes lc-property-update {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 0%, transparent); }
  40%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 38%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 0%, transparent); }
}

.lc-property-card.is-updated {
  animation: lc-property-update .9s ease-out;
}

.lc-property-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.lc-property-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.lc-property-title-wrap {
  min-width: 0;
}

.lc-property-title {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.lc-property-address {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.lc-property-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lc-rollup-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  padding: 3px 10px;
  white-space: nowrap;
}

.lc-rollup-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}

.lc-rollup-pill.is-red {
  color: var(--alert);
  border-color: color-mix(in srgb, var(--alert) 45%, var(--line));
}

.lc-rollup-pill.is-red::before { background: var(--alert); }

.lc-rollup-pill.is-yellow {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}

.lc-rollup-pill.is-yellow::before { background: var(--warn); }

.lc-rollup-pill.is-green {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}

.lc-rollup-pill.is-green::before { background: var(--ok); }

.lc-property-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-1);
  background: var(--bg-0);
  border: 1px solid var(--line);
}

.lc-property-meta span {
  display: block;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: 10px;
  margin-bottom: 4px;
}

.lc-property-meta strong {
  color: var(--text);
  font-size: 13px;
}

.lc-property-latest {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ok) 6%, var(--bg-1));
}

.lc-property-latest span {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: 10px;
}

.lc-property-latest strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.lc-property-latest time {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}

.lc-property-lifts {
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.lc-property-lifts-head {
  padding: 8px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.lc-property-lifts-head span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
}

.lc-property-lift-list {
  display: grid;
}

.lc-property-lifts-empty {
  color: var(--text-3);
  font-size: 12px;
  padding: 12px;
}

.lc-lift-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.lc-lift-row:last-child {
  border-bottom: 0;
}

.lc-lift-row-main {
  min-width: 0;
}

.lc-lift-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
}

.lc-lift-row-sub {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 4px;
}

.lc-lift-row-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  color: var(--text-2);
  font-size: 11px;
}

.lc-lift-row-meta time {
  color: var(--text-3);
  font-family: var(--mono);
}

.lc-lift-row-action {
  justify-self: end;
}

.lc-fleet-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: 0 8px 18px rgba(15, 30, 20, 0.06);
  overflow: hidden;
}
.lc-fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lc-fleet-table thead th {
  background: var(--bg-2);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lc-fleet-table thead th:hover { color: var(--text); }
.lc-fleet-table thead th.is-sorted { color: var(--ok); }
.lc-fleet-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.lc-fleet-table tbody tr {
  cursor: pointer;
  transition: background .12s var(--t);
}
.lc-fleet-table tbody tr:hover { background: var(--bg-2); }
.lc-fleet-table tbody tr.is-selected {
  background: var(--bg-3);
  border-left: 2px solid var(--ok);
}
.lc-fleet-name { font-weight: 500; color: var(--text); }
.lc-fleet-serial { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.lc-fleet-prop { color: var(--text-2); font-size: 12px; }
.lc-fleet-cust { color: var(--text-3); font-size: 11px; }
.lc-fleet-time { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.lc-empty-cell {
  padding: 22px 14px;
  text-align: center;
  color: var(--text-3);
}
.lc-health-table thead th {
  cursor: default;
}
.lc-health-table thead th:hover {
  color: var(--text-3);
}
.lc-health-row {
  cursor: default !important;
}
.lc-health-payload summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 12px;
}
.lc-health-payload summary:hover {
  color: var(--ok);
}
.lc-health-json {
  margin: 8px 0 0;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-2);
}
.lc-health-log {
  margin: 0;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--text-2);
  font-size: 11px;
}
.lc-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ─── Detail drawer (slides in from right) ─────────────────── */

.lc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 40;
}
.lc-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lc-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .22s var(--t);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.lc-drawer.is-open { transform: translateX(0); }
.lc-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.lc-drawer-title { font-size: 14px; font-weight: 600; flex: 1; }
.lc-drawer-sub {
  margin-top: 2px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}
.lc-drawer-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  width: 28px; height: 28px;
  border-radius: var(--r-1);
  cursor: pointer;
  font-size: 14px;
}
.lc-drawer-close:hover { color: var(--text); border-color: var(--line-2); }
.lc-drawer-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lc-drawer-section {
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.lc-drawer-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.lc-drawer-section h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lc-drawer-status { margin-bottom: 12px; }
.lc-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--line);
}
.lc-live-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-2);
}
.lc-live-grid span {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lc-live-grid strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
.lc-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-event-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.lc-event-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.lc-event-row .lc-ai-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.lc-event-row:last-child { border-bottom: 0; }
.lc-event-row strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.lc-event-row span,
.lc-event-row time,
.lc-drawer-note {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}
.lc-drawer-note {
  padding: 12px;
  background: var(--bg-2);
}

/* ─── Mode pills ──────────────────────────────────────────── */

.lc-mode {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-1);
  font-size: 11px;
  font-family: var(--mono);
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.lc-mode--normal     { color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.lc-mode--inspection { color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.lc-mode--blocked    { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }

/* ─── Buttons ─────────────────────────────────────────────── */

.lc-ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.lc-ui-btn:hover { background: var(--bg-3); border-color: var(--line-2); }
.lc-ui-btn--primary {
  background: var(--ok);
  color: #f4f7f4;
  border-color: var(--ok);
  font-weight: 800;
}
.lc-ui-btn--primary:hover { background: color-mix(in srgb, var(--ok) 84%, white); }
.lc-ui-btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-2);
}
.lc-ui-btn--ghost:hover { color: var(--text); border-color: var(--line-2); }

/* ─── Tabs ────────────────────────────────────────────────── */

.lc-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.lc-tab {
  padding: 12px 0;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s var(--t);
  user-select: none;
}
.lc-tab:hover { color: var(--text-2); }
.lc-tab.is-active {
  color: var(--ok);
  border-bottom-color: var(--ok);
}

.lc-tab-content { display: none; }
.lc-tab-content.is-active { display: block; }

/* ─── Identity Header ─────────────────────────────────────── */

.lc-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.lc-identity-info { flex: 1; }
.lc-identity-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lc-identity-sub {
  color: var(--text-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lc-identity-actions {
  display: flex;
  gap: 8px;
}

.lc-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--r-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ─── Logbook / Table ─────────────────────────────────────── */

.lc-event-table {
  width: 100%;
  border-collapse: collapse;
}
.lc-event-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.lc-event-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.lc-event-table tr:hover { background: var(--bg-2); }

.lc-severity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.lc-severity.is-error { color: var(--alert); }
.lc-severity.is-warning { color: var(--warn); }
.lc-severity.is-info { color: var(--ok); }

/* ─── Shaft Visualisation ─────────────────────────────────── */

.lc-shaft-panel {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 24px;
}

.lc-shaft-view {
  overflow: hidden;
  background: var(--bg-0);
  border-radius: var(--r-2);
  height: 400px;
  position: relative;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
}

.lc-shaft-floor {
  flex: 1;
  border-top: 1px dashed var(--line);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}

.lc-shaft-car {
  position: absolute;
  left: 20px;
  width: 40px;
  height: 40px;
  background: var(--bg-3);
  border: 2px solid var(--live);
  border-radius: var(--r-1);
  box-shadow: 0 8px 16px rgba(15, 30, 20, 0.14);
  transition: bottom .5s var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--live);
  z-index: 2;
}

/* ─── Mirror ──────────────────────────────────────────────── */

.lc-mirror-wrap {
  background: #070a08;
  border-radius: var(--r-2);
  position: relative;
  border: 1px solid #25342b;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 12px;
}

.lc-mirror-canvas {
  /* Dynamiskt: hissens skärm i DESS egna proportioner (Thor/Nova, Thor E2,
     NOUS E2 — liggande/stående, valfri bredd/höjd). Canvasens intrinsiska
     upplösning (satt från snapshotens width/height) styr formen; skala bara ned. */
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 220px);
  width: auto;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  touch-action: none;         /* THAB pattern — no scroll/zoom on tap */
  user-select: none;
}

.lc-mirror-overlay {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 8px;
}

/* ─── Live Grid ───────────────────────────────────────────── */

.lc-readout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.lc-readout-group {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: 0 6px 14px rgba(15, 30, 20, 0.05);
  padding: 16px;
}

.lc-readout-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  color: var(--text-3);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.lc-readout-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
}

.lc-readout-item:last-child { border-bottom: 0; }

.lc-readout-label { color: var(--text-2); font-size: 13px; }
.lc-readout-value { font-family: var(--mono); color: var(--text); font-weight: 500; }
.lc-readout-value.is-live { color: var(--live); }

/* Dataförbrukning-kort (per hiss) — stort månadsvärde + dagligt diagram */
.lc-data-usage-section { margin-top: 16px; }
.lc-data-usage-value { font-size: 22px; margin-bottom: 10px; }
.lc-data-usage-chart { position: relative; height: 220px; }

/* Stale snapshot fallback (offline) — group has a "stale" label */
.lc-readout-group.is-stale { border-style: dashed; }
.lc-readout-stale-note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  margin-bottom: 8px;
}

/* Safety chain + door state dots — reuse status palette */
.lc-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-chain-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
}
.lc-chain-seg::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--idle);
}
.lc-chain-seg.is-ok::before    { background: var(--ok); }
.lc-chain-seg.is-ok            { color: var(--ok); }
.lc-chain-seg.is-warn::before  { background: var(--warn); }
.lc-chain-seg.is-warn          { color: var(--warn); }
.lc-chain-seg.is-broken::before{ background: var(--alert); }
.lc-chain-seg.is-broken        { color: var(--alert); }

.lc-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-door {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
}
.lc-door::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--idle);
}
.lc-door.is-open::before    { background: var(--warn); }
.lc-door.is-open            { color: var(--warn); }
.lc-door.is-closed::before  { background: var(--ok); }
.lc-door.is-closed          { color: var(--ok); }

/* ─── Mobile (≤ 760px) ────────────────────────────────────── */


@media screen and (max-width: 760px) {
  .lc-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 1fr 56px;
    grid-template-areas:
      "topbar"
      "main"
      "sidebar";
  }
  .lc-sidebar {
    border-right: 0;
    border-top: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
  }
  .lc-brand { display: none; }
  .lc-nav {
    flex-direction: row;
    padding: 6px 8px;
    gap: 4px;
  }
  .lc-nav-section { display: none; }
  .lc-nav-item {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: var(--r-1);
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .lc-nav-item.is-active {
    border-left: 0;
    padding-left: 10px;
    border-bottom-color: var(--live);
  }
  .lc-main { padding: 12px 14px 80px; }
  .lc-metric-strip { grid-template-columns: repeat(2, 1fr); }
  .lc-filter-field,
  .lc-filter-input,
  .lc-filter-select { min-width: 0; width: 100%; }
  .lc-filter-field { flex: 1 1 150px; }
  .lc-check { min-height: 0; padding-top: 0; }
  .lc-property-board {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lc-property-head {
    flex-direction: column;
    align-items: stretch;
  }
  .lc-property-actions {
    justify-content: flex-start;
  }
  .lc-property-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lc-lift-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lc-lift-row-action {
    justify-self: start;
  }
  .lc-fleet-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lc-fleet-table { min-width: 1080px; }
  .lc-fleet-table { font-size: 12px; }
  .lc-fleet-table thead th,
  .lc-fleet-table tbody td { padding: 8px 10px; }
  .lc-drawer { width: 100vw; }

  /* Auth shell — login + landing-router need to fit phones too. */
  .lc-auth-shell { padding: 16px; }
  .lc-auth-card {
    width: 100%;
    max-width: 100%;
    padding: 22px 18px;
  }
  .lc-auth-lang .lc-lang-switch { width: 100%; }

  /* Modal — full-width on phones, less padding. */
  .lc-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .lc-modal-head { padding: 14px 16px 12px; }
  .lc-modal-body { padding: 14px 16px 18px; }

  /* Identity block stacks vertically on small screens. */
  .lc-identity {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .lc-identity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lc-topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .lc-page-head { flex-direction: column; align-items: flex-start; }

  /* Filter bar wraps + stacks search wide. */
  .lc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lc-filter-field--search { width: 100%; }

  /* Tabs scroll horizontally instead of overflowing. */
  .lc-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--line);
  }
  .lc-tab { white-space: nowrap; }

  /* Hierarchy crumbs scroll if too wide. */
  .lc-hierarchy {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
  }
}

/* ─── Utility classes (avoid inline style="") ───────────────── */
.lc-hidden          { display: none !important; }
.lc-stack           { display: flex; flex-direction: column; gap: 20px; }
.lc-stack--narrow   { gap: 12px; }
.lc-text-alert      { color: var(--alert); }
.lc-text-warn       { color: var(--warn); }
.lc-text-dim        { color: var(--text-3); }
.lc-text-mono-sm    { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.lc-text-mono-mid   { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.lc-empty-row       { padding: 40px; text-align: center; color: var(--text-3); }
.lc-empty-row--big  { padding: 60px; text-align: center; }
.lc-empty-row--big .lc-empty-row-title { font-size: 18px; color: var(--text-2); margin-bottom: 8px; }
.lc-readout-group--narrow { max-width: 400px; }
.lc-pill--shifted   { margin-left: 8px; }

/* Auth/landing shell — used by login.html + index.html (CSP-safe; no inline styles). */
.lc-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.lc-landing-title {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: .18em;
  color: var(--text-2);
  margin: 0;
}
.lc-landing-sub {
  color: var(--text-3);
  margin-top: 8px;
}
.lc-auth-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 32px;
  width: 100%;
  max-width: 380px;
}
.lc-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.lc-auth-brand .lc-brand-name { font-size: 14px; }
.lc-auth-h {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
}
.lc-auth-label {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.lc-auth-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 14px;
}
.lc-auth-input:last-of-type { margin-bottom: 18px; }
.lc-auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.lc-auth-remember input { accent-color: var(--ok); cursor: pointer; }
.lc-auth-submit {
  width: 100%;
  justify-content: center;
  padding: 10px;
}
.lc-auth-error {
  color: var(--alert);
  font-size: 12px;
  margin: 14px 0 0;
  min-height: 16px;
}
.lc-auth-success {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  color: var(--ok);
  padding: 10px 12px;
  border-radius: var(--r-2);
  font-size: 13px;
  margin-bottom: 18px;
}
.lc-section-h {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--text-3);
  margin: 24px 0 12px;
}
.lc-text-center { text-align: center; }

/* Pulse animation on the live status dot when it's actively connected. */
@keyframes lc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.16); opacity: .55; }
}
.lc-status.is-live::before { animation: lc-pulse 1.6s ease-in-out infinite; }

/* Row that just got patched flashes briefly so the eye sees the update. */
@keyframes lc-row-flash {
  0%   { background: color-mix(in srgb, var(--live) 22%, transparent); }
  100% { background: transparent; }
}
.lc-fleet-table tbody tr.is-flash {
  animation: lc-row-flash .7s ease-out;
}
.lc-status.is-flash {
  animation: lc-row-flash .7s ease-out;
}

/* Heartbeat: brief pulse on the Live pill when a heartbeat frame arrives,
   so the user can see the socket is alive even when no values change. */
@keyframes lc-heartbeat {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.08); filter: brightness(1.4); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.lc-status.is-pulse {
  animation: lc-heartbeat .55s ease-out;
}

/* ─── Section header (the "uppercase tab-style" h2) ────────── */
.lc-section-h {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--text-3);
  margin: 24px 0 12px;
}

/* Metric value with smaller font for textual values (timestamps, mode) */
.lc-metric-value--text { font-size: 14px; color: var(--text-2); }
.lc-metric-value--mid  { font-size: 16px; }
.lc-metric-value--error { color: var(--alert); }
.lc-metric-value--warn  { color: var(--warn); }

/* ─── Public landing page ─────────────────────────────────── */

.lc-landing {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lc-landing-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
  backdrop-filter: blur(8px);
}
.lc-landing-top .lc-brand { padding: 0; border: 0; }
.lc-landing-nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.lc-landing-nav a {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: .02em;
}
.lc-landing-nav a:hover { color: var(--text); }
.lc-landing-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lc-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  padding: 80px 48px 64px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}
.lc-hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 16px;
}
.lc-hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}
.lc-hero h1 .lc-hero-accent {
  color: var(--ok);
}
.lc-hero-tagline {
  font-size: 20px;
  color: var(--text-2);
  margin: 0 0 18px;
  font-weight: 500;
}
.lc-hero-blurb {
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 28px;
  max-width: 540px;
  line-height: 1.55;
}
.lc-hero-cta {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  transition: all .15s var(--t);
}
.lc-btn:hover { background: var(--bg-3); border-color: var(--line-2); }
.lc-btn--primary {
  background: var(--ok);
  border-color: var(--ok);
  color: #f4f7f4;
  font-weight: 800;
}
.lc-btn--primary:hover {
  background: color-mix(in srgb, var(--ok) 84%, white);
  color: #f4f7f4;
}
.lc-btn--lg { padding: 14px 24px; font-size: 15px; }
.lc-btn .lc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.lc-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}
.lc-hero-meta b { color: var(--text); font-weight: 600; }
.lc-hero-meta-sep { opacity: .4; }

.lc-hero-illust {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lc-hero-illust svg { max-width: 320px; width: 100%; }

.lc-section {
  padding: 80px 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.lc-section--alt {
  background: var(--bg-1);
  max-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lc-section--alt > .lc-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.lc-section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.lc-section h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: 720px;
}
.lc-section-lead {
  font-size: 16px;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 0 48px;
  line-height: 1.55;
}

.lc-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.lc-feature {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: 0 8px 20px rgba(15, 30, 20, 0.05);
  padding: 28px 24px;
  transition: border-color .15s var(--t);
}
.lc-feature:hover { border-color: var(--line-2); }
.lc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 18px;
  margin-bottom: 16px;
}
.lc-feature h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.lc-feature p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

.lc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.lc-step {
  position: relative;
  padding-top: 56px;
}
.lc-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 28px;
  color: var(--ok);
  letter-spacing: .04em;
}
.lc-step h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}
.lc-step p {
  color: var(--text-2);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}

.lc-security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.lc-security-item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  align-items: flex-start;
}
.lc-security-item-mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
}
.lc-security-item h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.lc-security-item p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}

.lc-contact {
  text-align: center;
  padding: 96px 48px 64px;
  border-top: 1px solid var(--line);
}
.lc-contact h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px;
}
.lc-contact p {
  color: var(--text-2);
  font-size: 16px;
  margin: 0 auto 28px;
  max-width: 560px;
}
.lc-contact-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lc-footer {
  padding: 32px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-3);
  font-size: 12px;
  font-family: var(--mono);
}
.lc-footer a { color: var(--text-3); }
.lc-footer a:hover { color: var(--ok); }

/* SVG hero anim — elevator visiting floors. translateY values are absolute
   SVG y-coords so the cab's bottom rests on the dashed floor lines:
   F1=280, F2=235, F3=190, F4=145, F5=100, F6=55. Clip is y=40–380. */
@keyframes lc-cab {
  0%, 20%  { transform: translateY(280px); } /* lobby (F1) */
  40%, 60%  { transform: translateY(100px); } /* F5 */
  75%, 92%  { transform: translateY(235px); } /* F2 */
  100%      { transform: translateY(280px); } /* lobby (F1) */
}
.lc-hero-cab {
  animation: lc-cab 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Sliding door animations */
@keyframes lc-door-left {
  0%, 2% { transform: translateX(0); }
  5%, 15% { transform: translateX(-46px); }
  18%, 42% { transform: translateX(0); }
  45%, 55% { transform: translateX(-46px); }
  58%, 77% { transform: translateX(0); }
  80%, 87% { transform: translateX(-46px); }
  90%, 100% { transform: translateX(0); }
}
@keyframes lc-door-right {
  0%, 2% { transform: translateX(0); }
  5%, 15% { transform: translateX(46px); }
  18%, 42% { transform: translateX(0); }
  45%, 55% { transform: translateX(46px); }
  58%, 77% { transform: translateX(0); }
  80%, 87% { transform: translateX(46px); }
  90%, 100% { transform: translateX(0); }
}
.lc-cab-door-left {
  animation: lc-door-left 16s ease-in-out infinite;
}
.lc-cab-door-right {
  animation: lc-door-right 16s ease-in-out infinite;
}

/* Floor indicator animations */
@keyframes lc-floor-1 {
  0%, 22%, 95%, 100% { opacity: 1; }
  22.1%, 94.9% { opacity: 0; }
}
@keyframes lc-floor-2 {
  0%, 21.9% { opacity: 0; }
  22%, 27% { opacity: 1; }
  27.1%, 70.9% { opacity: 0; }
  71%, 94.9% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes lc-floor-3 {
  0%, 26.9% { opacity: 0; }
  27%, 32% { opacity: 1; }
  32.1%, 65.9% { opacity: 0; }
  66%, 70.9% { opacity: 1; }
  71%, 100% { opacity: 0; }
}
@keyframes lc-floor-4 {
  0%, 31.9% { opacity: 0; }
  32%, 37% { opacity: 1; }
  37.1%, 60.9% { opacity: 0; }
  61%, 65.9% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes lc-floor-5 {
  0%, 36.9% { opacity: 0; }
  37%, 60.9% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
.lc-cab-floor-text {
  opacity: 0;
}
.lc-cab-floor-1 { animation: lc-floor-1 16s step-end infinite; }
.lc-cab-floor-2 { animation: lc-floor-2 16s step-end infinite; }
.lc-cab-floor-3 { animation: lc-floor-3 16s step-end infinite; }
.lc-cab-floor-4 { animation: lc-floor-4 16s step-end infinite; }
.lc-cab-floor-5 { animation: lc-floor-5 16s step-end infinite; }

@media (max-width: 900px) {
  .lc-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 20px 40px;
  }
  .lc-hero h1 { font-size: 44px; }
  .lc-hero-illust { order: -1; }
  .lc-hero-illust svg { max-width: 220px; }
  .lc-landing-top { padding: 14px 16px; flex-wrap: wrap; }
  .lc-landing-nav { display: none; }
  .lc-section { padding: 56px 20px; }
  .lc-section h2 { font-size: 28px; }
  .lc-steps { grid-template-columns: 1fr; gap: 20px; }
  .lc-security-grid { grid-template-columns: 1fr; }
  .lc-footer { padding: 24px; flex-direction: column; align-items: flex-start; }
}

/* Anywhere — grid items default to min-width: auto which can blow
   out their column when the longest word/inline-element is wider than
   the cell. Force min-width: 0 on landing text columns so blurb +
   feature copy actually wrap. */
.lc-hero > *,
.lc-feature,
.lc-step,
.lc-security-item > div { min-width: 0; }
.lc-hero h1,
.lc-hero-tagline,
.lc-hero-blurb,
.lc-section h2,
.lc-section-lead,
.lc-feature p,
.lc-step p,
.lc-security-item p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Phone-narrow — squeeze big landing typography so words wrap inside
   the viewport, never overflow. */
@media (max-width: 480px) {
  .lc-hero h1 { font-size: 34px; line-height: 1.08; }
  .lc-hero-tagline { font-size: 17px; }
  .lc-hero-blurb { font-size: 14px; }
  .lc-hero { padding: 40px 16px 32px; gap: 24px; }
  .lc-hero-meta { gap: 8px; font-size: 11px; }
  .lc-hero-meta-sep { display: none; }
  .lc-hero-cta { gap: 8px; }
  .lc-hero-cta .lc-btn { flex: 1 1 auto; justify-content: center; }
  .lc-hero-illust svg { max-width: 180px; }
  .lc-section { padding: 40px 16px; }
  .lc-section h2 { font-size: 22px; line-height: 1.2; }
  .lc-section-lead { font-size: 14px; margin-bottom: 32px; }
  .lc-feature { padding: 20px 18px; }
  .lc-contact { padding: 56px 16px 40px; }
  .lc-contact h2 { font-size: 24px; }
  .lc-footer { padding: 20px 16px; }
  .lc-landing-top { gap: 8px; }
  .lc-landing-tools { gap: 8px; }
  .lc-btn { font-size: 13px; padding: 10px 14px; }
  .lc-btn--lg { font-size: 14px; padding: 12px 18px; }
  .lc-brand-name { font-size: 11px; }
}

/* AI-tolkad rotorsak — sub-rad under händelsenamn i alarm + lift-logg.
   Diskret färg, tunn vänster-bord i live-cyan så ögat hittar tolkningen. */
.lc-ai-hint {
  margin-top: 4px;
  padding: 6px 10px;
  border-left: 2px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, transparent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
  font-family: var(--sans);
}
/* Pattern-signal har varmare ton (warn) så den syns som "tänka över
   det här i större bild" snarare än rotorsak för enstaka händelse. */
.lc-ai-hint--pattern {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}

/* ─── Modal (centered dialog with backdrop) ───────────────── */
.lc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 19, 0.38);
  z-index: 100;
  opacity: 0;
  transition: opacity .18s var(--t);
}
.lc-modal-backdrop.is-open { opacity: 1; }
.lc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  z-index: 101;
  opacity: 0;
  transition: opacity .18s var(--t), transform .18s var(--t);
  box-shadow: var(--shadow);
}
.lc-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.lc-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.lc-modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.lc-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.lc-modal-close:hover { color: var(--text); }
.lc-modal-body { padding: 18px 22px 22px; }
.lc-modal-field { margin-bottom: 16px; }
.lc-modal-field:last-of-type { margin-bottom: 0; }
/* Kritiskt-avdelare i notifieringsmodalen (Hiss blockerad-larm). */
.lc-notify-critical-hdr {
  margin: 20px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--border, rgba(0,0,0,.12));
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--alert, #e5484d);
}
.lc-modal-field--critical { margin-bottom: 16px; }
.lc-modal-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--text-3);
  margin-bottom: 6px;
}
.lc-modal-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}
.lc-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 22px;
}

/* ─── Lift-group colour accents (dot + create-group swatches) ────────
   Swatch/dot backgrounds are assigned in JS via element.style.background-
   Color so no inline HTML style attribute is needed (CSP-safe). */
.lc-grp-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--idle);
  flex-shrink: 0;
  vertical-align: middle;
}
.lc-grp-titlewrap { display: inline-flex; align-items: center; gap: 8px; }
.lc-grp-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lc-grp-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.lc-grp-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--orion-card), 0 0 0 4px var(--text);
}
.lc-grp-swatch--none {
  width: auto;
  height: 26px;
  border-radius: 13px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.lc-grp-swatch--none.is-selected { color: var(--text); }

/* ─── Edit-property modal · tabs (Uppgifter / Hissar) ────────── */
.lc-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}
.lc-modal-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 10px 8px;
  margin-bottom: -1px;
  cursor: pointer;
}
.lc-modal-tab:hover { color: var(--text); }
.lc-modal-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--ok);
}

/* ─── Hissar-fliken · lift rows + koppla loss ────────────────── */
.lc-lift-detach-list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lc-lift-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2, 8px);
  background: var(--bg-2, var(--bg-1));
}
.lc-lift-row-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.lc-lift-row-serial {
  font-size: 12px;
  color: var(--text-3);
}
.lc-lift-row-badge { margin-left: auto; }
.lc-lift-detach-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 12px;
}
.lc-lift-detach-btn:disabled { opacity: .5; cursor: default; }
.lc-lift-undo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2, 8px);
  background: var(--bg-2, var(--bg-1));
  font-size: 13px;
}
.lc-lift-undo-msg { color: var(--text); }
.lc-lift-undo-btn {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--ok);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
.lc-lift-undo-btn:hover { text-decoration: underline; }
.lc-lift-undo-btn:disabled { opacity: .5; cursor: default; }


/* ─── Lift detail — side panels (chain + doors) ──────────────── */
.lc-side-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.lc-chain, .lc-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.lc-chain-seg {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
}
.lc-chain-seg.is-ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.lc-chain-seg.is-broken {
  border-color: var(--alert);
  color: var(--alert);
  background: color-mix(in srgb, var(--alert) 10%, transparent);
}
.lc-door {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
}
.lc-door.is-open {
  border-color: var(--warn);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.lc-door.is-closed {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, transparent);
}

/* Stale-cue on metric-strip values when liveness is offline */
.lc-metric-value.is-stale {
  color: var(--text-3);
  position: relative;
}
.lc-metric-value.is-stale::after {
  content: ' (senast känt)';
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  margin-left: 4px;
}

/* Mirror modal — extends generic lc-modal with wider canvas-friendly width.
   Production grade UX (MIRROR-001): canvas + side panel for telemetry
   and event log. Side panel collapses below the canvas on narrow screens. */
.lc-modal--mirror {
  width: min(1280px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}
.lc-modal--mirror .lc-mirror-wrap {
  margin: 0;
  border-radius: 0;
  border: 0;
  max-width: none;
}
.lc-mirror-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  align-items: stretch;
}
.lc-mirror-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 22px;
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  min-height: 0;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
.lc-mirror-side .lc-readout-group {
  margin: 0;
}
.lc-mirror-events {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lc-mirror-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 320px;
}
.lc-mirror-event {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  border-left: 3px solid var(--line);
  background: var(--bg-2);
  font-size: 12px;
}
.lc-mirror-event-time {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}
.lc-mirror-event-msg {
  color: var(--text-1);
  word-break: break-word;
}
.lc-mirror-event--info { border-left-color: var(--text-3); }
.lc-mirror-event--ok   { border-left-color: var(--ok); }
.lc-mirror-event--warn { border-left-color: var(--warn); }
.lc-mirror-event--alert { border-left-color: var(--alert); }
.lc-mirror-priv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.lc-mirror-priv-label {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.lc-mirror-priv-level {
  color: var(--text-1);
  font-weight: 600;
}
.lc-mirror-priv[data-priv="2"] {
  border-color: var(--alert);
  background: color-mix(in srgb, var(--alert) 14%, var(--bg-2));
}
.lc-mirror-priv[data-priv="2"] .lc-mirror-priv-level { color: var(--alert); }
.lc-mirror-priv[data-priv="1"] {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-2));
}
.lc-mirror-priv[data-priv="1"] .lc-mirror-priv-level { color: var(--warn); }
.lc-mirror-priv[data-priv="0"] {
  border-color: var(--text-3);
  background: var(--bg-2);
}
@media (max-width: 900px) {
  .lc-mirror-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-mirror-side {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: 360px;
  }
}
.lc-modal-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
}

/* "Mirror is open" pulse on the trigger button */
.lc-ui-btn.is-active {
  background: color-mix(in srgb, var(--live) 22%, var(--bg-2));
  border-color: var(--live);
  color: var(--live);
}

/* 404 / error page */
.lc-error { max-width: 480px; margin: 0 auto; }
.lc-error-code {
  font-family: var(--mono);
  font-size: 72px;
  letter-spacing: -0.02em;
  color: var(--ok);
  margin: 12px 0 4px;
  line-height: 1;
}
.lc-error-actions {
  display: inline-flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  .lc-error-code { font-size: 56px; }
  .lc-error-actions { flex-direction: column; width: 100%; }
  .lc-error-actions .lc-btn { width: 100%; justify-content: center; }
}

/* Sidebar footer — user identity + logout, sits below the nav scroller */
.lc-nav-foot {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-nav-user {
  padding: 4px 12px;
}
.lc-nav-user-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-nav-user-role {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lc-nav-logout {
  width: 100%;
  justify-content: flex-start;
  font-size: 12px;
  padding: 8px 12px;
}
.lc-nav-logout .lc-nav-icon {
  font-size: 14px;
}

@media screen and (max-width: 760px) {
  /* On phones the sidebar collapses to a horizontal strip. The
     user-identity block is too wide there but logout still has to
     be reachable — flatten the foot to fit inline at the end. */
  .lc-nav-foot {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    margin-left: auto;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 6px 8px;
    gap: 8px;
    flex: 0 0 auto;
  }
  .lc-nav-user { display: none; }
  .lc-nav-logout {
    width: auto;
    flex: 0 0 auto;
    padding: 6px 10px;
  }
  .lc-nav-logout span:not(.lc-nav-icon) { display: none; }
  .lc-nav-foot .lc-lang-switch {
    margin: 0;
    flex: 0 0 auto;
  }
}

/* Wide modal (event-detail) — needs to fit ~35 key/value rows */
.lc-modal--wide {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}
.lc-event-detail {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 0;
}
.lc-event-detail-row {
  display: contents;
}
.lc-event-detail-row > .lc-event-detail-key {
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.lc-event-detail-row > .lc-event-detail-val {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  word-break: break-word;
  background: var(--bg-1);
}
.lc-event-detail-row:last-child > * {
  border-bottom: 0;
}
@media (max-width: 600px) {
  .lc-event-detail {
    grid-template-columns: 1fr;
  }
  .lc-event-detail-row > .lc-event-detail-key {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* Build/version stamp */
.lc-version {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}
.lc-version:hover { opacity: 1; }

/* Metric flash on live WS update */
@keyframes lc-metric-flash {
  0%   { color: var(--live); }
  100% { color: var(--text); }
}
.lc-metric-value.is-flash {
  animation: lc-metric-flash .8s ease-out;
}

/* ─── Mina vyer (LIF-86) — dashboard editor ──────────────────────── */

.lc-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lc-page-sub {
  color: var(--text-2);
  margin: 4px 0 0;
}

.lc-mv-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.lc-mv-tab {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: background .12s var(--t), border-color .12s var(--t);
}
.lc-mv-tab:hover { background: var(--bg-3); }
.lc-mv-tab.is-active {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-2));
}
.lc-mv-tab-label { font-weight: 500; }
.lc-mv-tab-scope {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lc-mv-tab--add {
  border-style: dashed;
  color: var(--text-2);
}

.lc-mv-stage { position: relative; min-height: 320px; }
.lc-mv-empty {
  border: 1px dashed var(--line-2);
  background: var(--bg-2);
  border-radius: var(--r-3);
  padding: 48px 24px;
  text-align: center;
}
.lc-mv-empty h2 { margin: 0 0 8px; }
.lc-mv-empty p  { color: var(--text-2); margin: 0 0 16px; }

.lc-mv-fatal {
  border: 1px solid var(--alert);
  background: color-mix(in srgb, var(--alert) 6%, var(--bg-2));
  border-radius: var(--r-3);
  padding: 24px;
}

/* lc-grid-editor overrides — keep the look in our palette and respect theme. */
.lc-grid { background: transparent; }
.lc-grid > .lc-grid-item > .lc-grid-item-content {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lc-grid > .lc-grid-item.is-dragging > .lc-grid-item-content,
.lc-grid > .lc-grid-item.is-resizing > .lc-grid-item-content {
  border-color: var(--live);
}
.lc-mv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: move;
  background: var(--bg-2);
}
.lc-mv-card-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
}
.lc-mv-card-remove {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: var(--r-1);
}
.lc-mv-card-remove:hover { background: var(--bg-3); color: var(--alert); }
.lc-mv-card-body {
  padding: 12px;
  flex: 1;
  overflow: auto;
}
.lc-mv-card-foot {
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-2);
}
.lc-mv-card-loading,
.lc-mv-card-empty {
  color: var(--text-3);
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}
.lc-mv-card-error {
  color: var(--alert);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lc-mv-card-error small { color: var(--text-3); font-style: italic; }

/* Widget content patterns */
.lc-mv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.lc-mv-kpi {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px;
  background: var(--bg-2);
}
.lc-mv-kpi.is-ok    { border-color: var(--ok); }
.lc-mv-kpi.is-warn  { border-color: var(--warn); }
.lc-mv-kpi.is-alert { border-color: var(--alert); }
.lc-mv-kpi-label { font-size: 11px; color: var(--text-3); display: block; }
.lc-mv-kpi-value { font-size: 18px; font-weight: 600; display: block; }

.lc-mv-mode { display: flex; align-items: center; justify-content: center; height: 100%; }
.lc-mv-mode-value { font-size: 22px; font-weight: 600; }

.lc-mv-floor { text-align: center; }
.lc-mv-floor-num  { font-size: 36px; font-weight: 700; }
.lc-mv-floor-meta { color: var(--text-3); font-size: 12px; }

.lc-mv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lc-mv-list li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lc-mv-list li:last-child { border-bottom: 0; }

.lc-mv-tl-grid { display: flex; flex-direction: column; gap: 6px; }
.lc-mv-tl {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.lc-mv-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--text-3);
  display: inline-block;
}
.lc-mv-tl-dot.is-ok    { background: var(--ok); }
.lc-mv-tl-dot.is-warn  { background: var(--warn); }
.lc-mv-tl-dot.is-alert { background: var(--alert); }

.lc-mv-rollup { text-align: center; }
.lc-mv-rollup-num  { font-size: 32px; font-weight: 700; color: var(--ok); }
.lc-mv-rollup-meta { color: var(--text-3); font-size: 12px; }

/* Modal — generic shell, used by both dashboard CRUD and widget picker */
.lc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.lc-modal-backdrop[hidden] { display: none; }
.lc-modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  max-height: 90vh;
}
.lc-modal--wide { max-width: 880px; }
.lc-modal-head,
.lc-modal-foot {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lc-modal-head { border-bottom: 1px solid var(--line); }
.lc-modal-foot { border-top: 1px solid var(--line); justify-content: flex-end; }
.lc-modal-head h2 { margin: 0; font-size: 18px; }
.lc-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 22px;
  padding: 0 6px;
  border-radius: var(--r-1);
}
.lc-modal-close:hover { background: var(--bg-3); color: var(--text); }
.lc-modal-body {
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lc-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lc-field span { color: var(--text-2); }
.lc-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
}
.lc-input:focus { outline: 2px solid var(--live); outline-offset: 1px; }
.lc-form-error {
  color: var(--alert);
  font-size: 13px;
  margin: 0;
}

/* Widget picker */
.lc-mv-picker-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-mv-picker-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.lc-mv-picker-cat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  color: var(--text-2);
}
.lc-mv-picker-cat.is-active { border-color: var(--ok); color: var(--ok); }
.lc-mv-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow: auto;
  padding: 4px;
}
.lc-mv-picker-card {
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: inherit;
  color: var(--text);
  position: relative;
  transition: border-color .12s var(--t), transform .12s var(--t);
}
.lc-mv-picker-card:hover {
  border-color: var(--ok);
  transform: translateY(-1px);
}
.lc-mv-picker-card-cat {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lc-mv-picker-card-title { font-weight: 600; }
.lc-mv-picker-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.35;
}
.lc-mv-picker-card-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  background: var(--warn);
  color: white;
  padding: 1px 6px;
  border-radius: 999px;
}

/* Mobile collapse — lc-grid-editor drops to single column via its own
   media query; make the modal/picker fit too. */
@media (max-width: 768px) {
  .lc-page-actions { flex-wrap: wrap; }
  .lc-mv-tabs { gap: 6px; }
  .lc-modal { max-width: 100%; }
  .lc-mv-picker-grid { grid-template-columns: 1fr; }
}

/* ─── LIF-87 / LIF-135: host-page pin zones ────────────────────────── */

.lc-pin-zone {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.lc-pin-zone:empty { display: none; }
.lc-pin-slot {
  min-height: 96px;
  border-radius: var(--r-3);
  display: flex;
  align-items: stretch;
}
.lc-pin-slot.is-empty {
  border: 1px dashed var(--line-2);
  background: color-mix(in srgb, var(--bg-2) 65%, transparent);
}
.lc-pin-slot[data-pin-slot="sidebar"]   { min-height: 180px; }

.lc-pin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  color: var(--text-3);
}
.lc-pin-slot-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
}
.lc-pin-add {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-1);
  font: inherit;
  transition: background 120ms, border-color 120ms;
}
.lc-pin-add:hover,
.lc-pin-add:focus-visible {
  background: var(--bg-2);
  border-color: var(--text-3);
  outline: none;
}
.lc-pin-add[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.lc-pin-add-text { font-size: 12px; }

.lc-pin-slot.is-filled {
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}
.lc-pin-slot.is-filled .lc-mv-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lc-pin-mobile-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: var(--r-2);
  font-size: 12px;
}

@media (max-width: 720px) {
  .lc-pin-zone {
    grid-template-columns: 1fr;
  }
  .lc-pin-slot[data-pin-slot="sidebar"] { min-height: 120px; }
  /* .lc-grid-item mobile collapse is owned by components/lc-grid-editor.css */
}

/* ─── LIF-93: Self-documenting cells + tri-state door grid ────────── */

/* Subheader on chain/doors panels — explains the dense glyph layout. */
.lc-readout-sublabel {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Chain row trigger — wraps the segment glyphs in a button so the
   whole row opens the explainer on click. The hint "?" badge nudges
   discoverability without dominating the layout. */
.lc-chain-trigger {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 120ms, border-color 120ms;
}
.lc-chain-trigger:hover,
.lc-chain-trigger:focus-visible {
  background: var(--bg-2);
  border-color: var(--line);
  outline: none;
}
.lc-chain-short {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
}
.lc-explainer-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.lc-chain-trigger:hover .lc-explainer-hint {
  color: var(--text-1);
  border-color: var(--text-3);
}

/* Door grid — compact A:●●○○ button with per-signal tri-state cells.
   Tri-state values: on (●, success), off (○, dim), absent (—, muted),
   unknown (·, dim). Each cell is a single mono-glyph in fixed width. */
.lc-door-grid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.lc-door-grid:hover,
.lc-door-grid:focus-visible {
  background: var(--bg-1);
  border-color: var(--text-3);
  outline: none;
}
.lc-door-grid-label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
}
.lc-door-grid-cells {
  display: inline-flex;
  gap: 2px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 1px;
}
.lc-doorsig {
  display: inline-block;
  width: 1ch;
  text-align: center;
  font-family: var(--mono);
  line-height: 1;
}
.lc-doorsig.is-on      { color: var(--ok); font-weight: 700; }
.lc-doorsig.is-off     { color: var(--text-3); }
.lc-doorsig.is-absent  { color: var(--text-3); opacity: 0.55; }
.lc-doorsig.is-unknown { color: var(--text-3); opacity: 0.4; }

/* Explainer popover — shares the lc-modal frame. Wider than default
   so the position table + history grid fit without horizontal scroll. */
.lc-modal--explainer {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.lc-explainer-intro {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 13px;
}
.lc-explainer-note {
  margin: 8px 0 12px;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}
.lc-explainer-legend {
  margin: 8px 0 12px;
  color: var(--text-2);
  font-size: 12px;
  font-family: var(--mono);
}
.lc-explainer-section {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lc-explainer-doorblock + .lc-explainer-doorblock { margin-top: 16px; }
.lc-explainer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.lc-explainer-table th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
}
.lc-explainer-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-2);
  vertical-align: middle;
}
.lc-explainer-pos,
.lc-explainer-short {
  font-family: var(--mono);
  width: 1%;
  white-space: nowrap;
}
.lc-explainer-state.is-ok      { color: var(--ok); }
.lc-explainer-state.is-warn    { color: var(--warn); }
.lc-explainer-state.is-broken  { color: var(--alert); }
.lc-explainer-state.is-on      { color: var(--ok); }
.lc-explainer-state.is-off     { color: var(--text-3); }
.lc-explainer-state.is-absent  { color: var(--text-3); opacity: 0.7; font-style: italic; }
.lc-explainer-state.is-unknown { color: var(--text-3); opacity: 0.5; font-style: italic; }

/* Rear-mirror history grid — tick rows × position cols.
   Each cell holds a single glyph that takes its color from the kind. */
.lc-history-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  margin-bottom: 8px;
}
.lc-history-table th,
.lc-history-table td {
  padding: 4px 6px;
  text-align: center;
  border: 1px solid var(--line-2);
}
.lc-history-table thead th {
  background: var(--bg-2);
  color: var(--text-3);
  font-weight: 500;
}
.lc-history-tick {
  background: var(--bg-2);
  color: var(--text-3);
  font-weight: 500;
  text-align: right !important;
  font-size: 10px;
  width: 1%;
  white-space: nowrap;
}
.lc-history-pos {
  font-family: var(--mono);
  font-size: 11px;
}
.lc-history-num {
  text-align: right !important;
}
.lc-history-cell.is-ok       { color: var(--ok); }
.lc-history-cell.is-warn     { color: var(--warn); }
.lc-history-cell.is-broken   { color: var(--alert); }
.lc-history-cell.is-on       { color: var(--ok); font-weight: 700; }
.lc-history-cell.is-off      { color: var(--text-3); }
.lc-history-cell.is-absent   { color: var(--text-3); opacity: 0.55; }
.lc-history-cell.is-unknown  { color: var(--text-3); opacity: 0.4; }

/* ─── Type filter chips (replaces severity dropdown) ──────────────── */
.lc-fault-chips {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.lc-fault-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lc-fault-chip:hover {
  border-color: var(--text-3);
  color: var(--text-1);
}
.lc-fault-chip.is-active.is-info {
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
  color: var(--ok);
}
.lc-fault-chip.is-active.is-warning {
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line));
  color: var(--warn);
}
.lc-fault-chip.is-active.is-error {
  background: color-mix(in srgb, var(--alert) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--alert) 60%, var(--line));
  color: var(--alert);
}
.lc-fault-chip-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.lc-fault-chip:not(.is-active) .lc-fault-chip-count {
  background: var(--bg-1);
}

/* CSS-driven row visibility — flip body[data-fault-filter] and the
   matching tr.row-type-* rows show/hide without JS DOM walks. */
body:not([data-fault-filter*="info"])    tr.row-type-info    { display: none; }
body:not([data-fault-filter*="warning"]) tr.row-type-warning { display: none; }
body:not([data-fault-filter*="error"])   tr.row-type-error   { display: none; }

/* ─── Del F — fel-natur (riktiga vs handhavande) ──────────────────────
   A second, orthogonal axis over the severity chips. Never colour-only —
   colour + a left border + a text chip carry the meaning (accessibility). */

/* Three-way toggle: Alla / Bara riktiga / Bara handhavande. */
.lc-nature-filter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-1);
}
.lc-nature-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.lc-nature-btn:hover { color: var(--text-1); }
.lc-nature-btn.is-active {
  background: var(--bg-2);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.lc-nature-btn-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Per-row nature chip inside the event-name cell. */
.lc-nature-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lc-nature-tag.is-real {
  color: var(--alert);
  background: color-mix(in srgb, var(--alert) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--alert) 45%, var(--line));
}
.lc-nature-tag.is-handling {
  color: var(--idle);
  background: color-mix(in srgb, var(--idle) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--idle) 45%, var(--line));
}

/* Left border + demotion. Real/unknown = red/amber "kräver åtgärd";
   handling/operational = muted grey "ingen åtgärd". */
tr.row-nature-real    td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
tr.row-nature-handling td:first-child { box-shadow: inset 3px 0 0 var(--idle); }
tr.row-nature-handling .lc-event-name { color: var(--text-3); }
tr.row-nature-handling td { opacity: .82; }

/* CSS-driven nature visibility — flip body[data-nature-filter]. Default
   'all' (attribute absent or 'all') shows everything. */
body[data-nature-filter="real"]     tr[data-nature-group="handling"] { display: none; }
body[data-nature-filter="handling"] tr[data-nature-group="real"]     { display: none; }

/* Inline indicators in event-log rows — chain/relay/door/posis/velos
   shortcuts that open the explainer with rear-mirror history. */
.lc-event-name { font-weight: 500; color: var(--text-1); }
.lc-row-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.lc-row-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.lc-row-indicator:hover,
.lc-row-indicator:focus-visible {
  background: var(--bg-1);
  border-color: var(--text-3);
  outline: none;
}
.lc-row-indicator-label {
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lc-row-indicator-glyphs {
  display: inline-flex;
  gap: 1px;
  font-family: var(--mono);
}
.lc-row-indicator-glyph {
  display: inline-block;
  width: 1ch;
  text-align: center;
}
.lc-row-indicator-glyph.is-ok       { color: var(--ok); font-weight: 700; }
.lc-row-indicator-glyph.is-warn     { color: var(--warn); }
.lc-row-indicator-glyph.is-broken   { color: var(--alert); }
.lc-row-indicator-glyph.is-on       { color: var(--ok); font-weight: 700; }
.lc-row-indicator-glyph.is-off      { color: var(--text-3); }
.lc-row-indicator-glyph.is-absent   { color: var(--text-3); opacity: 0.55; }
.lc-row-indicator-glyph.is-unknown  { color: var(--text-3); opacity: 0.4; }
.lc-row-indicator-doorgroup {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-right: 6px;
}
/* Numeric-value indicator (Position/Velocity/Floor cells in the wide
   loggbok). The whole button reads as the value with an underline-on-
   hover affordance so it doesn't look like a stray glyph badge. */
.lc-row-indicator-value {
  font-family: var(--mono);
  color: var(--text-1);
}
.lc-row-indicator:hover .lc-row-indicator-value,
.lc-row-indicator:focus-visible .lc-row-indicator-value {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Wide fault log (LIF-93) — the loggbok mirrors the column set of
   Report_2026MMDD.xlsx (25 columns) so support engineers can read
   the in-app log alongside the Excel export. The wrapper scrolls
   horizontally; the first three columns (date / severity / code)
   stay visible via position:sticky as the operator scans rightward. */
.lc-fleet-wrap--scroll {
  /* `min-width: 0` defends against flex/grid contexts that would
     otherwise size this wrapper to its intrinsic content width and
     hide the scroll. `max-width: 100%` keeps it inside the column
     even if the table's min-width is huge. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  max-width: 100%;
}
.lc-fault-table { min-width: 2400px; }
.lc-fault-table thead th,
.lc-fault-table tbody td {
  padding: 8px 10px;
  white-space: nowrap;
  vertical-align: middle;
}
.lc-fault-table tbody td.lc-col-fault-name,
.lc-fault-table tbody td.lc-col-fault-hint {
  white-space: normal;
  min-width: 220px;
  max-width: 320px;
}
.lc-fault-table thead th.lc-col-fault-date,
.lc-fault-table thead th.lc-col-fault-severity,
.lc-fault-table thead th.lc-col-fault-code,
.lc-fault-table tbody td.lc-col-fault-date,
.lc-fault-table tbody td.lc-col-fault-severity,
.lc-fault-table tbody td.lc-col-fault-code {
  position: sticky;
  background: var(--bg-1);
  z-index: 1;
}
.lc-fault-table thead th.lc-col-fault-date,
.lc-fault-table thead th.lc-col-fault-severity,
.lc-fault-table thead th.lc-col-fault-code {
  background: var(--bg-2);
  z-index: 2;
}
.lc-fault-table .lc-col-fault-date      { left: 0;     min-width: 168px; }
.lc-fault-table .lc-col-fault-severity  { left: 168px; min-width: 86px;  }
.lc-fault-table .lc-col-fault-code      { left: 254px; min-width: 72px;  }
.lc-fault-table tbody tr:hover td.lc-col-fault-date,
.lc-fault-table tbody tr:hover td.lc-col-fault-severity,
.lc-fault-table tbody tr:hover td.lc-col-fault-code {
  background: var(--bg-2);
}
.lc-fault-table tbody tr.is-flash td.lc-col-fault-date,
.lc-fault-table tbody tr.is-flash td.lc-col-fault-severity,
.lc-fault-table tbody tr.is-flash td.lc-col-fault-code {
  background: var(--bg-3);
}
.lc-fault-table .lc-col-fault-chain    { min-width: 132px; }
.lc-fault-table .lc-col-fault-relays   { min-width: 92px;  }
.lc-fault-table .lc-col-fault-doors    { min-width: 220px; }
.lc-fault-table .lc-col-fault-position { min-width: 96px;  }
.lc-fault-table .lc-col-fault-distance { min-width: 88px;  }
.lc-fault-table .lc-col-fault-velocity { min-width: 92px;  }
.lc-fault-table .lc-col-fault-zones    { min-width: 140px; }

/* ─── Live door animation (driven by 0x501600 Car Door Status Word) ─── */
.lc-live-door-anim {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: 88px;
  height: 64px;
  margin: 8px 12px 8px 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
}
.lc-live-door-anim .lc-door-leaf {
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 50%;
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  border: 1px solid #475569;
  transition: transform 0.6s cubic-bezier(.4,.0,.2,1);
}
.lc-live-door-anim .lc-door-leaf-l { left: 0;  border-right: 0; }
.lc-live-door-anim .lc-door-leaf-r { right: 0; border-left: 0; }
.lc-live-door-anim .lc-door-anim-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font: 600 10px/16px system-ui, sans-serif;
  color: #e2e8f0;
  background: #1e293b;
  pointer-events: none;
}
/* State: closed (default) — leaves together */
.lc-live-door-anim[data-state="closed"] .lc-door-leaf-l,
.lc-live-door-anim[data-state="closed"] .lc-door-leaf-r,
.lc-live-door-anim[data-state="unknown"] .lc-door-leaf-l,
.lc-live-door-anim[data-state="unknown"] .lc-door-leaf-r {
  transform: translateX(0);
}
/* State: open/opening — leaves slid apart */
.lc-live-door-anim[data-state="open"] .lc-door-leaf-l,
.lc-live-door-anim[data-state="opening"] .lc-door-leaf-l {
  transform: translateX(-100%);
}
.lc-live-door-anim[data-state="open"] .lc-door-leaf-r,
.lc-live-door-anim[data-state="opening"] .lc-door-leaf-r {
  transform: translateX(100%);
}
/* State: closing — leaves transitioning back together (CSS animates from open position) */
.lc-live-door-anim[data-state="closing"] .lc-door-leaf-l,
.lc-live-door-anim[data-state="closing"] .lc-door-leaf-r {
  transform: translateX(0);
}
/* Fault / obstruction — red outline + label */
.lc-live-door-anim[data-state="fault"],
.lc-live-door-anim[data-state="obstruction"] {
  box-shadow: 0 0 0 2px #ef4444 inset;
}
.lc-live-door-anim[data-state="fault"] .lc-door-anim-label,
.lc-live-door-anim[data-state="obstruction"] .lc-door-anim-label {
  background: #7f1d1d;
}
.lc-live-door-anim[data-state="nudging"] {
  box-shadow: 0 0 0 2px #f59e0b inset;
}
.lc-live-door-anim[data-state="nudging"] .lc-door-anim-label {
  background: #78350f;
}

/* ─── BARA SKÄRM (THAB-stil) — sidopanel borta ─────────────────────── */
.lc-modal--mirror .lc-mirror-body {
  display: block;            /* override grid */
  padding: 12px;
}
.lc-modal--mirror .lc-mirror-side {
  display: none;             /* telemetry/inputs/event-log are gone */
}
.lc-modal--mirror .lc-mirror-priv,
.lc-modal--mirror .lc-modal-foot,
.lc-modal--mirror #mirrorStatus {
  display: none;             /* keep only the title + close button */
}
.lc-modal--mirror .lc-mirror-wrap {
  width: 100%;
  height: auto;
  min-height: 0;             /* let canvas dictate height */
  border: 0;
  padding: 0;
}
/* ─── Orion device-detail layout — light + LiftCloud-green palette ─── */

:root {
  --orion-bg: #f6f8f7;
  --orion-card: #f0eee9;
  --orion-card-2: #ebe9e3;
  --orion-text: #1e2a23;
  --orion-text-2: #5d6864;
  --orion-text-3: #8b958f;
  --orion-accent: #16a34a;      /* LiftCloud-grön */
  --orion-accent-dim: #15803d;
  --orion-border: #d8d4cc;
  --orion-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .06);
}

.lc-device-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--orion-bg);
  min-height: 100vh;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--orion-text);
}

.lc-device-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--orion-card);
  border-radius: 8px;
  font-size: 13px;
  color: var(--orion-text-2);
}
.lc-device-breadcrumb-path {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lc-device-breadcrumb-path .org { color: var(--orion-accent); font-weight: 600; text-transform: uppercase; }
.lc-device-breadcrumb-path .sep { color: var(--orion-text-3); }
/* renderHierarchy fills a [data-hierarchy] span nested in the path; let its
   children flow as flex items of the path so spacing matches the hand-written
   device/lift breadcrumbs. */
.lc-device-breadcrumb-path > [data-hierarchy] { display: contents; }
/* breadcrumb links (renderHierarchy .lc-bc-link + hand-written <a>) — accent,
   no underline, consistent across all detail pages (device/lift/site/customer). */
.lc-device-breadcrumb-path a,
.lc-device-breadcrumb-path .lc-bc-link { color: var(--orion-accent); font-weight: 600; text-decoration: none; }
.lc-device-breadcrumb-path a:hover,
.lc-device-breadcrumb-path .lc-bc-link:hover { text-decoration: underline; }
.lc-device-breadcrumb-actions {
  display: flex;
  gap: 12px;
}
.lc-device-breadcrumb-actions a {
  color: var(--orion-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

/* 3-card top row */
.lc-device-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(280px, 1.2fr);
  gap: 16px;
  margin-bottom: 16px;
}
.lc-device-card {
  background: var(--orion-card);
  border-radius: 10px;
  padding: 20px 22px;
  position: relative;
  min-height: 120px;
  box-shadow: var(--orion-shadow);
}

/* Controller card */
.lc-device-controller {
  display: flex;
  flex-direction: column;
}
.lc-device-controller-img {
  width: 80px;
  height: 80px;
  background: var(--orion-card-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 8px;
}
.lc-device-controller-name {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0 2px;
  color: var(--orion-accent);
}
.lc-device-controller-serial {
  font-size: 13px;
  color: var(--orion-text-2);
  font-family: ui-monospace, monospace;
  margin-bottom: auto;
}
.lc-device-controller-actions {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--orion-border);
  font-size: 12px;
}
.lc-device-controller-actions a {
  color: var(--orion-text-2);
  text-decoration: none;
}
.lc-device-controller-actions a:hover { color: var(--orion-accent); }

.lc-device-controller-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--orion-text-2);
}

/* Meta card (Owner/Site/etc.) */
.lc-device-meta { font-size: 14px; }
.lc-device-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.lc-device-meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--orion-text-3);
  margin-bottom: 4px;
}
.lc-device-meta dd {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--orion-text);
}

/* CANopen card */
.lc-device-canopen { font-size: 13px; }
.lc-device-canopen h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
}
.lc-device-canopen table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lc-device-canopen th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--orion-text-3);
  padding: 4px 8px;
  border-bottom: 1px solid var(--orion-border);
  font-weight: 600;
}
.lc-device-canopen td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--orion-border);
}
.lc-device-canopen-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--orion-accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

/* 3-action tile row */
.lc-device-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lc-device-action {
  background: var(--orion-card);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: var(--orion-shadow);
}
.lc-device-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, .15);
}
.lc-device-action-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--orion-text-3);
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.lc-device-action-icon { font-size: 18px; }
.lc-device-action-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--orion-text);
  margin: 6px 0 12px;
}
.lc-device-action-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--orion-accent);
  text-transform: uppercase;
}

/* Dataförbruknings-sektion — egen fullbredds-rad UNDER handlings-korten.
   En bred men LÅG liggande stapel (mot 1 GB-budget), inte det höga dagliga
   diagrammet. .lc-device-data-bar hålls kort (≈56px) så stapeln läses direkt. */
.lc-device-data-section {
  grid-column: 1 / -1;
  margin-top: 16px;
  background: var(--orion-card);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: var(--orion-shadow);
}
.lc-device-data-section h3 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--orion-text-3);
}
.lc-device-data-section .lc-data-usage-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--orion-text);
  margin: 0 0 10px;
}
.lc-device-data-bar {
  position: relative;
  width: 100%;
  height: 56px;
}

/* Hide the legacy lift-detail content while the new layout is active */
body.lc-orion-layout #content > section:not(.lc-device-shell):not(.lc-device-shell *) {
  /* Don't hide subsection-as-shell; only legacy sections (the ones with .lc-grid, .lc-shaft-view, etc.) need hiding. */
}
body.lc-orion-layout #legacy-lift-detail {
  display: none !important;
}

/* Hide legacy lift-detail sections when Orion shell is active.
   Legacy stays in DOM so existing JS continues to mutate elements;
   it's just visually suppressed. */
body.lc-orion-layout #content > section.lc-shaft-panel,
body.lc-orion-layout #content > section.lc-tabs,
body.lc-orion-layout #content > section.lc-grid,
body.lc-orion-layout #content > section[class*='lc-']:not(.lc-device-shell):not(.lc-device-actions):not(.lc-device-grid),
body.lc-orion-layout #content > aside,
body.lc-orion-layout #content > .lc-status-panel,
body.lc-orion-layout #content > .lc-event-list,
body.lc-orion-layout #content > .lc-tabs {
  display: none !important;
}

/* Hide topbar + sidebar from legacy app shell while Orion device-shell handles layout */
body.lc-orion-layout .lc-sidebar,
body.lc-orion-layout .lc-topbar {
  display: none !important;
}

body.lc-orion-layout .lc-main {
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Orion-läget döljer sidomenyn + topbaren (display:none ovan), MEN de explicit
   satta grid-spåren (220px sidokolumn + topbar-rad) blir kvar TOMMA och knuffar
   allt innehåll åt höger/nedåt — en grid-track kollapsar inte bara för att dess
   enda barn är display:none, och margin-left biter inte på ett grid-spår.
   Collapsa spåren så innehållet centreras på hela viewporten. */
body.lc-orion-layout .lc-app {
  grid-template-columns: 0 minmax(0, 1fr) !important;
  grid-template-rows: 0 1fr !important;
}

/* ─── Orion facility dashboard ─── */
.lc-facility-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-facility-top-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.4fr) minmax(280px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.lc-facility-kpi { display: flex; flex-direction: column; }
.lc-facility-kpi-head { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 700; margin-bottom: 14px; }
/* Namn + diskret Hiss-ID staplade i KPI-kortets rubrik (THOR Fas 1). */
.lc-facility-kpi-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-facility-kpi-ident { font-size: 12px; font-weight: 400; color: var(--text-3); font-family: var(--mono); letter-spacing: .02em; }
.lc-facility-kpi-ident-label { color: var(--text-2); font-weight: 500; }
.lc-facility-kpi-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lc-facility-kpi-label { color: var(--text-2); }
.lc-facility-kpi-value { font-weight: 600; color: var(--text); display: flex; gap: 6px; align-items: center; }
.lc-facility-kpi-trend { color: var(--text-3); font-size: 14px; }
.lc-facility-kpi-trend.up { color: var(--ok); }
.lc-facility-kpi-foot { font-size: 11px; color: var(--text-3); margin-top: 24px; padding-top: 10px; }

/* Site "Översikt" card — wide & low: full-width card with the key figures on
   a horizontal row of stat tiles (label above value) instead of a narrow,
   tall stack of pillar rows. Scoped to #site-shell so other pages that reuse
   .lc-facility-kpi keep their column layout. */
#site-shell .lc-facility-top-grid:has(> .lc-device-card:only-child) {
  grid-template-columns: 1fr;
}
#site-shell .lc-facility-kpi-head { margin-bottom: 4px; }
#site-shell .lc-facility-kpi-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  margin: 0 0 14px;
}
#site-shell .lc-facility-kpi-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#site-shell .lc-facility-kpi-metrics .lc-facility-kpi-row {
  flex: 1 1 120px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-2);
}
#site-shell .lc-facility-kpi-metrics .lc-facility-kpi-value { font-size: 22px; }

.lc-facility-live { padding: 16px; }
.lc-facility-live-head { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.lc-facility-live-body { display: grid; grid-template-columns: 60px 1fr; gap: 16px; min-height: 240px; background: linear-gradient(180deg, #d8d2c7 0%, #c9c2b6 100%); border-radius: 8px; padding: 12px; }
.lc-facility-live-shaft { background: #2a2924; border-radius: 6px; position: relative; overflow: hidden; }
.lc-facility-live-shaft-floors { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; padding: 4px; }
.lc-facility-live-shaft-car { position: absolute; left: 6px; right: 6px; height: 26px; background: var(--bg-2); border: 1px solid var(--ok); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--ok); transition: bottom .5s var(--t); bottom: 12px; }
.lc-facility-live-screen { background: #f5efe7; border-radius: 6px; padding: 12px; display: flex; align-items: center; justify-content: center; }
.lc-facility-live-screen-frame { background: #1c2622; padding: 8px; border-radius: 4px; }
.lc-facility-live-screen-content { color: var(--ok); font-family: var(--mono); font-size: 14px; min-width: 60px; text-align: center; }
.lc-facility-live-foot { display: flex; justify-content: space-around; gap: 20px; padding-top: 12px; font-size: 12px; color: var(--text-2); }
.lc-facility-live-foot strong { color: var(--text); font-weight: 700; }

.lc-facility-aside { padding: 14px 16px; }
.lc-facility-aside-head { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.lc-facility-aside-map { height: 130px; background: #e8e5dd; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 12px; }
.lc-facility-aside-events h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.lc-facility-aside-events ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.lc-facility-aside-events li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); }
.lc-facility-aside-events li::before { content: '●'; color: var(--ok); margin-right: 6px; }

.lc-facility-tile-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.lc-facility-tile {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 16px 12px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.lc-facility-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22, 163, 74, .15); }
.lc-facility-tile-icon { display: inline-flex; margin-bottom: 4px; color: var(--ok); }
.lc-facility-tile-icon svg { width: 24px; height: 24px; }
.lc-facility-tile strong { font-size: 13px; font-weight: 600; }
.lc-facility-tile-sub { font-size: 10px; color: var(--text-3); }

@media (max-width: 1100px) {
  .lc-facility-top-grid { grid-template-columns: 1fr; }
  .lc-facility-tile-row { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Orion facilities-list ─── */
.lc-facility-list-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-facility-list-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lc-facility-list-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.lc-facility-list-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lc-facility-list-search {
  position: relative;
  flex: 1;
  max-width: 360px;
  min-width: 200px;
}
.lc-facility-list-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 14px;
}
.lc-facility-list-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.lc-facility-list-search input:focus { border-color: var(--ok); }
.lc-facility-list-filter {
  padding: 10px 28px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  min-width: 140px;
}
.lc-facility-list-actions {
  display: flex;
  gap: 16px;
  font-size: 20px;
  color: var(--text-2);
  cursor: pointer;
}
.lc-facility-list-actions span:hover { color: var(--ok); }

.lc-facility-list-body {
  background: var(--bg-1);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lc-facility-list-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
}
.lc-facility-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 100px 140px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.lc-facility-row:hover { background: var(--bg-3); }
.lc-facility-row:last-child { border-bottom: 0; }
.lc-facility-row-icon {
  width: 36px;
  height: 36px;
  background: var(--ok);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}
.lc-facility-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.lc-facility-row-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.lc-facility-row-meta {
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}
.lc-facility-row-meta strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; }

.lc-facility-list-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
}

@media (max-width: 768px) {
  .lc-facility-list-controls { width: 100%; }
  .lc-facility-row { grid-template-columns: 50px 1fr 80px; }
  .lc-facility-row > :nth-child(3),
  .lc-facility-row > :nth-child(5) { display: none; }
}

/* ─── Orion hisslista (primary anläggnings-vy) ─── */
.lc-hisslista-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-hisslista-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 14px 22px;
  background: var(--bg-1);
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.lc-hisslista-summary-main h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--text); }
.lc-hisslista-summary-main p { margin: 0; color: var(--text-2); font-size: 13px; }
.lc-hisslista-summary-kpis { display: flex; gap: 28px; }
.lc-hisslista-summary-kpis div { display: flex; flex-direction: column; align-items: center; }
.lc-hisslista-summary-kpis strong { font-size: 24px; font-weight: 700; color: var(--ok); line-height: 1; }
.lc-hisslista-summary-kpis span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 4px; }

.lc-hisslista-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.lc-hiss-card {
  background: var(--bg-1);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  border: 1px solid transparent;
  cursor: pointer;
}
.lc-hiss-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22, 163, 74, .15); border-color: var(--ok); }
.lc-hiss-card-head { display: flex; justify-content: space-between; align-items: center; }
.lc-hiss-card-name { font-size: 16px; font-weight: 700; color: var(--text); }
.lc-hiss-card-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.lc-hiss-card-status.is-online { background: rgba(22,163,74,.15); color: var(--ok); }
.lc-hiss-card-status.is-offline { background: rgba(180,53,28,.15); color: var(--alert); }
.lc-hiss-card-status.is-alert { background: rgba(180,53,28,.15); color: var(--alert); }
.lc-hiss-card-serial { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.lc-hiss-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.lc-hiss-card-meta-item { text-align: center; }
.lc-hiss-card-meta-item span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.lc-hiss-card-meta-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; }

.lc-hisslista-dashboard-toggle {
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.lc-hisslista-dashboard-toggle summary { cursor: pointer; padding: 6px 0; }
.lc-hisslista-dashboard-toggle[open] { padding: 12px 14px; }

/* När hisslistan är aktiv, hide facility-shell (3+7-dashboarden) ovanför */
body.lc-anlaggning-page .lc-facility-shell { display: none !important; }

/* ─── Orion operations (alla hissar) ─── */
.lc-operations-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-operations-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.lc-op-kpi {
  background: var(--bg-1);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.lc-op-kpi strong { display: block; font-size: 28px; font-weight: 700; color: var(--ok); line-height: 1; }
.lc-op-kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 6px; }

/* hide legacy operations content when shell active */
body.lc-orion-layout .lc-page-head,
body.lc-orion-layout .lc-metric-strip,
body.lc-orion-layout .lc-pin-zone,
body.lc-orion-layout .lc-filter-bar,
body.lc-orion-layout .lc-fleet-wrap,
body.lc-orion-layout #ops-table,
body.lc-orion-layout #pageMeta {
  display: none !important;
}

@media (max-width: 768px) {
  .lc-operations-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Orion choose-start-page ─── */
body.lc-orion-layout .lc-start-shell {
  min-height: 100vh;
  background: var(--bg-0);
  padding: 60px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lc-start-head {
  text-align: center;
  max-width: 540px;
  margin-bottom: 36px;
}
.lc-start-head h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: var(--text); }
.lc-start-head p { margin: 0; font-size: 14px; color: var(--text-2); }
.lc-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 380px));
  gap: 18px;
  max-width: 800px;
  width: 100%;
}
.lc-start-card {
  background: var(--bg-1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.lc-start-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(22, 163, 74, .15); }
.lc-start-card.lc-start-card-disabled { cursor: not-allowed; opacity: .8; }
.lc-start-card.lc-start-card-disabled:hover { transform: none; box-shadow: var(--shadow); }
.lc-start-card-img {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: rgba(255,255,255,.6);
}
.lc-start-card-soon {
  position: absolute !important;
  top: 12px;
  right: 12px;
  background: var(--alert);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: 999px;
}
.lc-start-card-body { padding: 20px 22px; }
.lc-start-card-body h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.lc-start-card-body p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }

@media (max-width: 640px) {
  .lc-start-grid { grid-template-columns: 1fr; }
}

/* ─── Orion top-nav (shared on all logged-in pages) ─── */
.lc-orion-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: #1a221d;          /* dark Orion-bar */
  color: #d7e3da;
  border-bottom: 1px solid #28332b;
}
.lc-orion-nav-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.lc-orion-nav-brand-mark {
  width: 26px;
  height: 26px;
  background: var(--ok);
  border-radius: 5px;
  position: relative;
}
.lc-orion-nav-brand-mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px solid #1a221d;
  border-radius: 2px;
}
.lc-orion-nav-brand-name { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.lc-orion-nav-brand-sub { font-size: 10px; color: #8b958f; letter-spacing: .04em; }

.lc-orion-nav-center { display: flex; justify-content: center; }
.lc-orion-nav-search {
  position: relative;
  width: min(520px, 100%);
}
.lc-orion-nav-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8b958f; font-size: 13px; }
.lc-orion-nav-search input {
  width: 100%;
  padding: 9px 16px 9px 40px;
  border-radius: 999px;
  border: 1px solid #2c3a33;
  background: #efece4;
  color: #1c2622;
  font-size: 13px;
  outline: none;
}
.lc-orion-nav-search input:focus { border-color: var(--ok); }
.lc-orion-nav-search-results {
  display: none;
  position: absolute;
  top: 110%;
  left: 0; right: 0;
  background: var(--bg-1);
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  max-height: 360px;
  overflow-y: auto;
}
.lc-orion-search-result {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lc-orion-search-result:last-child { border-bottom: 0; }
.lc-orion-search-result:hover { background: var(--bg-3); }
.lc-orion-search-result small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }
.lc-orion-search-empty { padding: 14px; color: var(--text-3); font-size: 13px; }

.lc-orion-nav-right { display: flex; gap: 8px; align-items: center; }
.lc-orion-nav-icon {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #d7e3da;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .15s;
}
.lc-orion-nav-icon:hover { background: #28332b; }
/* Unified thin line-icons in the topnav — stroke inherits currentColor so all
   three themes render the same against the fixed-dark Orion bar. */
.lc-orion-nav-svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
/* Active-language text label beside the globe icon (SV/EN/DE). */
.lc-orion-lang-label { font-size: 11px; }
.lc-orion-nav-user { background: var(--ok); color: #fff; font-weight: 700; font-size: 12px; }

/* ── Mobile hamburger + off-canvas drawer ──────────────────────────────
   Orion has no left sidebar; nav lives in the account (⋮) menu. On phones
   the hamburger opens a left off-canvas drawer with the same nav links.
   Burger is hidden on desktop; drawer/backdrop only ever show when toggled
   via JS (and are display:none on desktop as a safety net). */
.lc-orion-nav-burger {
  display: none;            /* shown ≤768px via the media query below */
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d7e3da;
  cursor: pointer;
  flex: 0 0 auto;
}
.lc-orion-nav-burger:hover { background: #28332b; }
.lc-orion-burger-bars,
.lc-orion-burger-bars::before,
.lc-orion-burger-bars::after {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}
.lc-orion-burger-bars::before { position: absolute; top: -6px; left: 0; }
.lc-orion-burger-bars::after  { position: absolute; top:  6px; left: 0; }

.lc-orion-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 12, .5);
  opacity: 0;
  transition: opacity .22s var(--t, ease);
  z-index: 1190;
  pointer-events: none;   /* never trap taps while fading out; only .is-open is interactive */
}
.lc-orion-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.lc-orion-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(82vw, 320px);
  background: #1a221d;          /* match the Orion bar */
  color: #d7e3da;
  border-right: 1px solid #28332b;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
  transform: translateX(-100%);
  transition: transform .24s var(--t, ease);
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lc-orion-drawer.is-open { transform: translateX(0); }
.lc-orion-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #28332b;
}
.lc-orion-drawer-close {
  width: 40px; height: 40px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: #d7e3da;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.lc-orion-drawer-close:hover { background: #28332b; }
.lc-orion-drawer-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.lc-orion-drawer-nav li a {
  display: flex;
  align-items: center;
  min-height: 48px;            /* ≥44px tap target */
  padding: 12px 18px;
  color: #d7e3da;
  text-decoration: none;
  font-size: 15px;
}
.lc-orion-drawer-nav li a:hover,
.lc-orion-drawer-nav li a:active { background: #28332b; }
.lc-orion-drawer-nav hr { border: 0; border-top: 1px solid #28332b; margin: 4px 0; }

/* Modal popups (Favourites / History / Menu) */
.lc-orion-modal {
  position: fixed;
  top: 62px;
  right: 20px;
  width: min(420px, 90vw);
  max-height: calc(100vh - 80px);
  background: var(--bg-1);
  color: var(--text);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  overflow: hidden;
  z-index: 1100;
  border: 1px solid var(--line);
}
.lc-orion-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.lc-orion-modal-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.lc-orion-modal-close {
  background: transparent; border: 0; font-size: 20px; cursor: pointer; color: var(--text-2);
}
.lc-orion-modal-body { max-height: calc(100vh - 160px); overflow-y: auto; }
.lc-orion-list-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
}
.lc-orion-list-row:last-child { border-bottom: 0; }
.lc-orion-list-row:hover { background: var(--bg-3); }
.lc-orion-list-icon { font-size: 16px; }
.lc-orion-list-title { font-weight: 500; }
.lc-orion-list-meta { color: var(--text-3); font-size: 11px; }
.lc-orion-list-remove {
  background: transparent; border: 0; cursor: pointer; color: var(--text-3); font-size: 18px;
}
.lc-orion-list-remove:hover { color: var(--alert); }

.lc-orion-modal--menu ul { list-style: none; padding: 6px 0; margin: 0; }
.lc-orion-modal--menu li a {
  display: block; padding: 10px 18px; color: var(--text); text-decoration: none; font-size: 13px;
}
.lc-orion-modal--menu li a:hover { background: var(--bg-3); }
.lc-orion-modal--menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Hide legacy lc-app sidebar/topbar on pages where Orion-nav is mounted */
body.lc-orion-layout .lc-sidebar,
body.lc-orion-layout .lc-topbar,
body.lc-orion-layout aside.lc-sidebar,
body.lc-orion-layout header.lc-topbar { display: none !important; }

/* ─── Siteägare Orion overview (lc-so-orion) ──────────────────────────
   The site_owner DEFAULT overview reuses the Orion look but mounts the
   repo sidebar + topbar via bootPage (data-nav / data-hierarchy), so we
   un-hide them again on this page only — same pattern the other Orion
   pages would use to keep the repo nav. Scoped to the lc-so-orion body
   class so it never affects the prod-mirrored lift/customers pages. */
body.lc-orion-layout.lc-so-orion .lc-sidebar,
body.lc-orion-layout.lc-so-orion .lc-topbar { display: flex !important; }

/* Portfolio KPI strip — Orion stat-tile look (VERSAL grey labels + big
   values). Reuses lc-device-card for the card chrome. */
.lc-so-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.lc-so-stat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-so-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lc-so-stat-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

/* One Orion card per Hissföretag. */
.lc-so-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.lc-so-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.lc-so-card:hover,
.lc-so-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(22, 163, 74, .15);
  outline: none;
}
.lc-so-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.lc-so-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.lc-so-card-kpis { display: flex; flex-direction: column; }

/* Status dot + pills. */
.lc-so-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  margin-right: 6px;
  flex: none;
}
.lc-so-dot--ok    { background: var(--ok); }
.lc-so-dot--alert { background: var(--alert); }
.lc-so-pill--ok    { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lc-so-pill--alert { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 40%, transparent); }

/* Drill-down lift list (Orion rows linking to /lift.html). */
.lc-so-lift-list { display: flex; flex-direction: column; }
.lc-so-lift-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
}
.lc-so-lift-row:hover { background: var(--bg-2); }
.lc-so-lift-name   { font-weight: 600; }
.lc-so-lift-serial { color: var(--text-3); font-size: 12px; }
.lc-so-lift-status { color: var(--text-2); font-size: 12px; }

@media (max-width: 760px) {
  .lc-so-stat-strip { grid-template-columns: 1fr !important; }
  .lc-so-card-grid  { grid-template-columns: 1fr !important; }
  .lc-so-lift-row   { grid-template-columns: auto 1fr auto !important; }
  .lc-so-lift-serial { display: none !important; }
}

@media (max-width: 768px) {
  .lc-orion-nav { grid-template-columns: 1fr auto; }
  .lc-orion-nav-center { display: none; }
  /* Surface the hamburger + drawer on phones/tablets. Use :not([hidden])
     so the `hidden` attribute still wins (a bare class would override the
     attribute's default display:none and leave an invisible backdrop that
     swallows taps). */
  .lc-orion-nav-burger { display: inline-flex; }
  .lc-orion-drawer:not([hidden]) { display: block; }
  .lc-orion-drawer-backdrop:not([hidden]) { display: block; }
  /* The ⋮ account menu is redundant with the drawer on mobile — keep the
     drawer as the primary nav, but leave the user avatar (it still opens the
     account menu for logout). Search collapses already (nav-center hidden). */
}
/* Stop body scroll behind an open drawer */
body.lc-drawer-open { overflow: hidden; }

/* ─── Orion facility sub-views ─── */
.lc-sub-view {
  background: var(--bg-1);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}
.lc-sub-view-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.lc-sub-view-head h2 { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.lc-sub-view-back {
  color: var(--ok); text-decoration: none; font-weight: 600; font-size: 13px;
}

/* Chart time-range selector (7/30/60/120 d). The base styling lives in
   styles.css, which the Orion lift page does NOT load — so it's ported here
   (Orion tokens) and made wrap/scroll-friendly on phones. */
.lc-lift-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lc-lift-range-label { font-size: 12px; color: var(--text-2); }
.lc-segmented {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1);
}
.lc-segmented-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;            /* ≥44px tap target with the label row */
  min-height: 40px;
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.lc-segmented-btn:last-child { border-right: 0; }
.lc-segmented-btn:hover { color: var(--text); }
.lc-segmented-btn.is-active { background: var(--ok); color: #fff; }
@media (max-width: 480px) {
  /* let the whole selector sit on its own full-width row and the buttons
     stretch so they're easy to tap; never let it overflow sideways */
  .lc-lift-range { width: 100%; }
  .lc-lift-range .lc-segmented { display: flex; width: 100%; }
  .lc-lift-range .lc-segmented-btn { flex: 1 1 0; text-align: center; }
}
/* Två-kolumns rad för diagramkort i lift-undervyerna.
   Ersätter inline grid-template-columns:1fr 1fr (CSP-renare) och STACKAR
   till en kolumn på mobil så korten inte spiller ut till höger. */
.lc-chart-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lc-chart-2col > * { min-width: 0; }
@media (max-width: 640px) {
  .lc-chart-2col { grid-template-columns: 1fr; }
}

/* ── Gruppsidans statistik-sektion (Fas 2) ──────────────────────────────
   Ljusa diagramkort i EXAKT samma stil som Trafik-graferna på lift-sidan
   (var(--bg-2), rundade hörn 8px, padding 14px), fast som återanvändbara
   klasser i stället för inline-style (CSP: style-src 'self'). Dynamiska
   färger sätts på canvas via Chart.js, aldrig som inline HTML-style. */
.lc-grp-stats { margin-top: 20px; }
.lc-grp-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.lc-grp-stats-head h3 { margin: 0; font-size: 15px; color: var(--text); }
.lc-grp-stats-grid { display: grid; gap: 14px; }
.lc-grp-stat-card {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 14px;
  box-sizing: border-box;
}
.lc-grp-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.lc-grp-stat-title { margin: 0; font-size: 13px; color: var(--text-2); }
.lc-grp-stat-metric { font-size: 12px; color: var(--text-3); }
.lc-grp-stat-sub {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
}
.lc-grp-chart-box { position: relative; height: 220px; }
.lc-grp-chart-box.is-donut { height: 240px; }
.lc-grp-stats-msg {
  color: var(--text-3);
  font-size: 13px;
  padding: 8px 0;
}

.lc-sub-view-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.lc-sub-view-kpi {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 16px 20px;
}
.lc-sub-view-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.lc-sub-view-kpi-value { font-size: 28px; font-weight: 700; color: var(--text); margin: 6px 0; }
.lc-sub-view-kpi-foot { font-size: 12px; color: var(--text-2); }
.lc-sub-view-events { list-style: none; padding: 0; margin: 0; }
.lc-sub-view-event {
  display: grid;
  grid-template-columns: 80px 80px 1fr 120px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  align-items: center;
}
.lc-sub-view-event:last-child { border-bottom: 0; }
.lc-sub-view-event.is-critical {
  border-left: 4px solid var(--crit);
  padding-left: 10px;
  background: color-mix(in srgb, var(--crit) 8%, transparent);
}
.lc-sub-view-event.is-critical .lc-sub-view-event-code { background: color-mix(in srgb, var(--crit) 20%, var(--bg-3)); color: var(--crit); }
.lc-sub-view-event.is-critical .lc-sub-view-event-msg,
.lc-sub-view-event.is-critical .lc-sub-view-event-lift { color: var(--crit); font-weight: 600; }
.lc-sub-view-event-time { color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.lc-sub-view-event-code { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg-3); text-align: center; }
.lc-sub-view-event-msg { color: var(--text); }
.lc-sub-view-event-lift { color: var(--text-2); font-size: 12px; text-align: right; }
.lc-sub-view-empty { padding: 40px 0; text-align: center; color: var(--text-3); }

/* Mobil: krymp KPI-rutnäten (lift.js sätter inline 4–5 kolumner) och stapla
   händelseraderna så inget spiller ut i sidled på telefon. !important krävs
   för att slå de inline grid-template-columns lift.js skriver. */
@media (max-width: 600px) {
  .lc-sub-view { padding: 16px 14px; }
  .lc-sub-view-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .lc-sub-view-kpi { padding: 12px 14px; }
  .lc-sub-view-kpi-value { font-size: 22px; }
  .lc-sub-view-event {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .lc-sub-view-event-msg { grid-column: 1 / -1; }
  .lc-sub-view-event-lift { text-align: left; }
}

/* Felanalys i Larm-vyn (KPIs + "Fel över tid" + per kategori + återkommande).
   Återanvänder lc-sub-view-kpi-strukturen; egna klasser för färg och paneler
   så inga inline-stilar behövs (CSP style-src 'self'). */
.lc-sub-view-kpi-value.lc-kpi-red { color: var(--alert); }
.lc-sub-view-kpi-value.lc-kpi-amber { color: var(--warn); }
.lc-sub-view-kpi-value.lc-fault-last { font-size: 20px; }
.lc-fault-panel {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
  box-sizing: border-box;
}
.lc-fault-h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.lc-fault-list-h { margin-top: 22px; }
.lc-fault-chart-box { position: relative; height: 280px; box-sizing: border-box; }
.lc-fault-cat-list, .lc-fault-top-list { list-style: none; margin: 0; padding: 0; }
.lc-fault-cat-row {
  display: grid;
  grid-template-columns: 90px 1fr 48px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.lc-fault-cat-name { font-size: 12px; color: var(--text-2); }
.lc-fault-cat-track { background: var(--bg-3); border-radius: 4px; height: 10px; overflow: hidden; }
.lc-fault-cat-bar { display: block; height: 100%; width: 0; background: var(--alert); border-radius: 4px; }
.lc-fault-cat-count { font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.lc-fault-top-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lc-fault-top-row:last-child { border-bottom: 0; }
.lc-fault-top-name { color: var(--text); }
.lc-fault-top-count { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── Dokument-bricka (Del A) ───────────────────────────────────────────
   Kategoriserad filuppladdning per hiss. CSP: inga inline-style — alla
   regler bor här; interaktivitet via addEventListener i lift.js. */
.lc-docs-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.lc-docs-file { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--text-2); }
.lc-docs-select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.lc-docs-upload-btn { flex: 0 0 auto; }
.lc-docs-hint { margin: 0 0 16px; font-size: 12px; color: var(--text-3); }
.lc-docs-group { margin-top: 16px; }
.lc-docs-group-h {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lc-docs-count {
  background: var(--bg-3);
  color: var(--text-2);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lc-docs-list { list-style: none; margin: 0; padding: 0; }
.lc-docs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.lc-docs-row:last-child { border-bottom: 0; }
.lc-docs-name { flex: 1 1 200px; min-width: 0; color: var(--text); font-size: 13px; word-break: break-word; }
.lc-docs-meta { flex: 0 1 auto; color: var(--text-3); font-size: 12px; }
.lc-docs-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.lc-docs-dl {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.lc-docs-dl:hover { background: var(--bg-3); }
.lc-docs-dl:disabled { opacity: .5; cursor: default; }
.lc-docs-del {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  line-height: 1;
  cursor: pointer;
}
.lc-docs-del:hover { color: var(--alert); border-color: var(--alert); }
.lc-docs-del:disabled { opacity: .5; cursor: default; }

/* ── Underhåll & Hälsa (THOR Fas 2) ─────────────────────────────────────
   Nya klasser (CSP: style-src 'self' → inga inline-style i markup; dynamiska
   höjder på per-våning-graferna sätts via element.style i JS). Kort/paneler
   återanvänder .lc-fault-panel + .lc-sub-view-kpi; nedan bara det som är nytt. */
.lc-maint-note { margin: 0 0 14px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.lc-maint-setup-head { margin-bottom: 8px; }
.lc-maint-subh { margin-top: 16px; }
.lc-sub-view-kpi-value.lc-kpi-ok { color: var(--ok); }
.lc-maint-cab-kpis { margin-bottom: 8px; }

/* Chart-boxar: fasta höjder som klasser; per-våning-boxarna får sin höjd satt
   dynamiskt i JS (el.style.height) så de skalar med antal plan. */
.lc-maint-chart-box { position: relative; height: 240px; box-sizing: border-box; }
.lc-maint-chart-box.lc-maint-h-sm { height: 140px; }
.lc-maint-chart-box.lc-maint-h-md { height: 200px; }

/* Slitage-varningar: rader med färgad vänsterkant (varning = amber, info = ok). */
.lc-maint-warn-list { list-style: none; margin: 0; padding: 0; }
.lc-maint-warn-row {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  border-left: 3px solid var(--text-3);
  background: var(--bg-3);
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.lc-maint-warn-row:last-child { margin-bottom: 0; }
.lc-maint-warn-row.is-warn { border-left-color: var(--warn); }
.lc-maint-warn-row.is-info { border-left-color: var(--ok); }

/* Uppställning: en rad per våning (namn | öppnande dörrsida). */
.lc-maint-setup-list { list-style: none; margin: 0; padding: 0; }
.lc-maint-setup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lc-maint-setup-row:last-child { border-bottom: 0; }
.lc-maint-setup-floor { color: var(--text); font-variant-numeric: tabular-nums; }
.lc-maint-setup-side { color: var(--text-2); }

/* When sub-view active, hide hisslista */
body.lc-sub-view-active .lc-hisslista-body,
body.lc-sub-view-active .lc-hisslista-summary,
body.lc-sub-view-active .lc-hisslista-dashboard-toggle { display: none !important; }

/* Hide legacy sections on Orion-converted kund/alarm pages */
body.lc-orion-layout .lc-identity,
body.lc-orion-layout .lc-metric-strip,
body.lc-orion-layout .lc-filter-bar,
body.lc-orion-layout .lc-fleet-wrap,
body.lc-orion-layout .lc-pin-zone,
body.lc-orion-layout .lc-section-h,
body.lc-orion-layout #pageMeta { display: none !important; }

/* ─── Orion simple-shell (header + body wrapper) ─── */
.lc-simple-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-simple-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.lc-simple-head h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--text); }
.lc-simple-head p { margin: 0; font-size: 13px; color: var(--text-2); max-width: 640px; }
.lc-simple-body { background: var(--bg-1); border-radius: 12px; padding: 22px; box-shadow: var(--shadow); }
.lc-simple-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lc-simple-body table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.lc-simple-body table td { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.lc-simple-body table tr:last-child td { border-bottom: 0; }
.lc-simple-body table tr:hover { background: var(--bg-3); }
.lc-simple-body .lc-fleet-wrap { background: transparent; box-shadow: none; }
.lc-simple-body .lc-metric-strip { margin-bottom: 18px; }
.lc-simple-body .lc-filter-bar { margin-bottom: 14px; }

/* ─── Site-shell (kund-as-site view) ─── */
.lc-site-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}
.lc-site-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 2fr);
  gap: 16px;
  margin-bottom: 18px;
}
.lc-site-info { padding: 18px; }
.lc-site-info h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.lc-site-info p { margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.lc-site-building { margin-top: 14px; }
.lc-site-map { padding: 10px; }
.lc-site-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.lc-site-lifts {
  background: var(--bg-1);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.lc-site-lifts h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.lc-site-lifts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.lc-site-lifts-head h3 { margin: 0; }
.lc-site-lift-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lc-site-lift-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.lc-site-lift-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.lc-site-lift-table tr:hover td { background: var(--bg-3); }
.lc-site-lift-table tr:last-child td { border-bottom: 0; }

/* ─── Site "Digital Twin" — elevator bank + telemetry panel ─────────
   Reuses Orion tokens (--bg-*, --line, status palette) and the
   .lc-readout-* group styling from lift.html. Two-column split: a
   visual bank of lift cards (left) and a sticky telemetry aside (right). */
.lc-twin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
/* Site page: let the bank column size to its content (so the bankcol box
   follows the number of lifts) while telemetry keeps its 320px. Packed to
   the start so leftover space sits on the far right, not between the two. */
#site-shell .lc-twin {
  grid-template-columns: minmax(0, max-content) 320px;
  justify-content: start;
}
.lc-twin-bankcol {
  background: var(--bg-1);
  border-radius: var(--r-3);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.lc-twin-bankcol h3 { margin: 0; font-size: 16px; font-weight: 700; }
.lc-twin-sub { margin: 4px 0 16px; font-size: 13px; color: var(--text-2); }

/* The bank follows the number of lifts: cards keep a fixed width and pack
   left (flex-wrap), and the bank shrinks to its content (width:fit-content,
   clamped to 100%) so 2 lifts give a narrow box, not a full-width one with
   empty tracks. Group frames (.lc-twin-group) take a full row via width:100%. */
.lc-twin-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  align-content: flex-start;
  width: fit-content;
  max-width: 100%;
}

/* Outer bank stack (site page): each row is either a group frame or the
   loose-cards bank, stacked vertically. A column flex means the stack's width
   is the WIDEST row (not the sum), so the box follows the number of lifts even
   when a group frame and loose cards are mixed. */
.lc-twin-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
}

/* Group frame — lifts sharing a group_id run "as a group" and are boxed
   together with a heading (name + tag) and an "Open group" button. The
   frame shrink-wraps its member cards; it sits on its own row in the stack. */
.lc-twin-group {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--bg-1);
  padding: 12px 14px 14px;
}
.lc-twin-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.lc-twin-group-titlewrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lc-twin-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--idle);
  flex-shrink: 0;
}
.lc-twin-group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-twin-group-tag {
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orion-accent);
  background: color-mix(in srgb, var(--orion-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orion-accent) 30%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.lc-twin-group-open { flex-shrink: 0; }
.lc-twin-group-bank { width: 100%; }

/* Grupp-pärla på driftsidans hissrader/-kort (operations.html) + grupprad i
   Grupper-fliken. Samma färgprick + gruppnamn-språk som fastighetssidans
   .lc-twin-group-dot/-name, men i ett litet klickbart pill-format. Färgpricken
   målas i JS (element.style.backgroundColor) → CSP-strikt, ingen inline-style. */
.lc-ops2-grouppill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-1);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.lc-ops2-grouppill:hover,
.lc-ops2-grouppill:focus-visible {
  border-color: var(--orion-accent);
  outline: none;
}
.lc-ops2-grouppill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--idle);
  flex-shrink: 0;
}
.lc-ops2-grouppill-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Grupprad i Grupper-fliken: färgprick + namn inline i namn-cellen. */
.lc-ops2-grouprow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lc-ops2-grouprow .lc-ops2-grouppill-dot { width: 10px; height: 10px; }
.lc-ops2-grouprow .lc-ops2-grouppill-name { font-size: 13px; color: var(--text); }

.lc-twin-lift {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Fixed card width so the flex bank packs cards left and wraps them
     instead of stretching a few cards across the full width. */
  flex: 0 0 168px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px;
  cursor: pointer;
  transition: border-color .15s var(--t), box-shadow .15s var(--t), transform .15s var(--t);
}
.lc-twin-lift:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lc-twin-lift:focus-visible { outline: 2px solid var(--orion-accent); outline-offset: 2px; }
.lc-twin-lift.is-selected {
  border-color: var(--orion-accent);
  box-shadow: 0 0 0 1px var(--orion-accent), 0 8px 18px rgba(15, 30, 20, 0.10);
}
/* Left status accent stripe by connectivity/fault kind. */
.lc-twin-lift.is-online  { box-shadow: inset 3px 0 0 var(--ok); }
.lc-twin-lift.is-warn    { box-shadow: inset 3px 0 0 var(--warn); }
.lc-twin-lift.is-alert   { box-shadow: inset 3px 0 0 var(--alert); }
.lc-twin-lift.is-idle    { box-shadow: inset 3px 0 0 var(--idle); }
.lc-twin-lift.is-selected.is-online,
.lc-twin-lift.is-selected.is-warn,
.lc-twin-lift.is-selected.is-alert,
.lc-twin-lift.is-selected.is-idle {
  box-shadow: 0 0 0 1px var(--orion-accent), 0 8px 18px rgba(15, 30, 20, 0.10);
}

.lc-twin-lift-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lc-twin-lift-name {
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.lc-twin-brand {
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  flex-shrink: 0;
}

.lc-connect-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); flex-shrink: 0; }
.lc-connect-dot.is-on  { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.lc-connect-dot.is-off { background: var(--idle); }

/* Miniature shaft — rungs stacked bottom-up, car marker on the live floor. */
.lc-twin-shaft {
  display: flex;
  flex-direction: column-reverse;
  height: 132px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  padding: 3px;
}
.lc-twin-rung {
  flex: 1;
  min-height: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-twin-rung:first-child { border-top: 0; }
.lc-twin-rung.is-car { position: relative; }
.lc-twin-car {
  font: 600 10px/1 var(--mono);
  color: var(--live);
  background: var(--bg-3);
  border: 1.5px solid var(--live);
  border-radius: var(--r-1);
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(15, 30, 20, 0.14);
}

.lc-twin-lift-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lc-twin-lift-floor { font-size: 13px; font-weight: 600; color: var(--text); }

/* "Add lift" empty shaft at the end of the bank. */
.lc-twin-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  border: 2px dashed var(--line-2);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s var(--t), color .15s var(--t);
}
.lc-twin-add:hover { border-color: var(--orion-accent); color: var(--orion-accent); }
.lc-twin-add-plus { font-size: 30px; line-height: 1; font-weight: 300; }

/* Telemetry aside — sticky on desktop, reuses .lc-readout-* styling. */
.lc-twin-telemetry {
  position: sticky;
  top: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px;
  box-shadow: var(--shadow);
}
.lc-twin-tel-name { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 12px; }
.lc-twin-tel-serial { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.lc-twin-tel-group { background: transparent; border: 0; box-shadow: none; padding: 0; }
.lc-twin-tel-hint { font-size: 13px; color: var(--text-2); margin: 12px 0 0; }
.lc-twin-tel-open { display: block; text-align: center; margin-top: 14px; }

/* Loading skeleton — three shimmering placeholder cards. */
.lc-twin-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
}
.lc-twin-skel-card {
  height: 200px;
  border-radius: var(--r-2);
  background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%);
  background-size: 200% 100%;
  animation: lc-twin-shimmer 1.3s ease-in-out infinite;
}
@keyframes lc-twin-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 880px) {
  .lc-twin,
  #site-shell .lc-twin { grid-template-columns: 1fr; }
  .lc-twin-telemetry { position: static; }
  /* Bank is flex now; let it fill the single column on small screens. */
  .lc-twin-bank { width: auto; }
}

@media (max-width: 1000px) {
  .lc-site-grid { grid-template-columns: 1fr; }
  .lc-site-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 3D lift + NOVA display ─── */
.lc-facility-live-body { grid-template-columns: 50px 1fr 100px !important; gap: 12px !important; }
.lc-facility-live-lift { background:#0f1413; border-radius:8px; padding:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lc-3d-lift { width:100%; height:100%; max-height:240px; }
.fac-3d-door-l, .fac-3d-door-r { transition: transform .6s cubic-bezier(.4,.0,.2,1); transform-origin: center; }

.lc-facility-live-body[data-doors="open"]   .fac-3d-door-l { transform: translateX(-70px); }
.lc-facility-live-body[data-doors="open"]   .fac-3d-door-r { transform: translateX(70px); }
.lc-facility-live-body[data-doors="opening"] .fac-3d-door-l { transform: translateX(-70px); }
.lc-facility-live-body[data-doors="opening"] .fac-3d-door-r { transform: translateX(70px); }
.lc-facility-live-body[data-doors="closing"] .fac-3d-door-l,
.lc-facility-live-body[data-doors="closing"] .fac-3d-door-r { transform: translateX(0); }

/* Ljusridå (light curtain) i dörröppningen — syns när dörren öppnas/är öppen.
   Grön streckad = fri stråle; röd blinkande = bruten (avläst via dörr-
   reversering closing→opening, det enda live-spåret av ett strålbrott). */
.lc-facility-live-lift { position: relative; }
.fac-3d-curtain { opacity: 0; transition: opacity .35s ease; }
.lc-facility-live-body[data-doors="open"]     .fac-3d-curtain,
.lc-facility-live-body[data-doors="opening"]  .fac-3d-curtain,
.lc-facility-live-body[data-curtain="broken"] .fac-3d-curtain { opacity: 1; }
.fac-3d-curtain-post { fill: #6b7280; transition: fill .2s; }
.fac-3d-curtain-beam { stroke: #16a34a; stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .5; transition: stroke .2s; }
.lc-facility-live-body[data-curtain="broken"] .fac-3d-curtain-post { fill: #ef4444; }
.lc-facility-live-body[data-curtain="broken"] .fac-3d-curtain-beam {
  stroke: #ef4444; stroke-width: 2.2; stroke-dasharray: none; opacity: 1;
  animation: fac-curtain-blink .45s steps(1) infinite;
}
@keyframes fac-curtain-blink { 50% { opacity: .25; } }
.fac-3d-curtain-badge {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  display: none; align-items: center; gap: 5px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none;
}
.lc-facility-live-body[data-curtain="broken"] .fac-3d-curtain-badge { display: inline-flex; }

.lc-nova-display { background:#1c2622; border:2px solid #2c3a33; border-radius:8px; padding:6px; text-align:center; box-shadow:inset 0 1px 4px rgba(0,0,0,.4); }
.lc-nova-display-header { font-size:9px; color:#7c8780; letter-spacing:.1em; padding:2px 0; border-bottom:1px solid #2c3a33; }
.lc-nova-display-screen { background:#0a0e0b; padding:10px 6px; border-radius:4px; margin-top:4px; }
.lc-nova-display-floor { font-family:ui-monospace,monospace; font-size:28px; font-weight:700; color:var(--ok); line-height:1; }
.lc-nova-display-arrow { font-size:16px; color:var(--ok); margin-top:4px; opacity:.7; }

/* ─── Nova Status (Control system) sub-view ─── */
.lc-nova-status-card {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.lc-nova-status-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.lc-nova-status-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.lc-nova-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.lc-nova-status-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  background: var(--bg-1);
  border-radius: 6px;
}
.lc-nova-status-icon { font-size: 22px; }
.lc-nova-status-item strong { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.lc-nova-status-item small { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.lc-nova-status-foot { margin-top: 12px; text-align: right; font-size: 13px; }

/* Hide old device-shell on lift.html when facility shell is active */
body.lc-orion-layout #device-shell { display: none !important; }

/* Tile active-state */
.lc-facility-tile.is-active {
  border: 2px solid var(--ok);
  background: rgba(22, 163, 74, .08);
  transform: translateY(-2px);
}

/* Company shell */
.lc-company-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  background: var(--bg-0);
  min-height: 100vh;
}

/* Lift.html top-grid: 2 kolumner */
#lift-facility-shell .lc-facility-top-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.6fr);
}

/* Lift shaft + door fix */
#lift-facility-shell .lc-facility-live-shaft { height: auto; min-height: 200px; }
#lift-facility-shell .lc-facility-live-shaft-car { height: 22px; max-height: calc(100% - 24px); }

/* ── Felloggen wrapper (var borta efter CSS-rollback) ── */
.lc-fault-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 75vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-1);
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.lc-fault-table-wrap .lc-fault-table { min-width: max-content; }
.lc-fault-table-wrap .lc-fault-cell { padding: 4px 8px; vertical-align: top; white-space: nowrap; }
.lc-fault-table-wrap .lc-fault-cell.lc-hint-cell { white-space: normal; max-width: 280px; font-family: inherit; color: var(--text-3); }
.lc-fault-table-wrap .lc-history-cell { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--text-3); }
.lc-fault-table-wrap .lc-history-cell:hover { background: rgba(22,163,74,0.12); }
.lc-fault-table-wrap .lc-fault-row { border-bottom: 1px solid var(--line); }
.lc-fault-table-wrap .lc-fault-row:hover { background: rgba(22,163,74,0.06); }
.lc-fault-table-wrap .lc-fault-row-warning { background: rgba(217,119,6,0.06); }
.lc-fault-table-wrap .lc-fault-row-error { background: rgba(180,53,28,0.08); }
.lc-fault-table-wrap .lc-fault-type { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; }
.lc-fault-table-wrap .lc-fault-type-info { background: rgba(22,163,74,0.15); color: var(--ok); }
.lc-fault-table-wrap .lc-fault-type-warning { background: rgba(217,119,6,0.18); color: var(--warn,#d97706); }
.lc-fault-table-wrap .lc-fault-type-error { background: rgba(180,53,28,0.20); color: var(--alert,#b4351c); }

/* ── Logg-filterchips (lift.html → Logg) ──────────────────────────────
   Severity-filter pills above the fault table. lift.js renders each chip
   with `style="--chip:<colour>"` (Alla=text-2, Info=ok, Warning=warn,
   Error=alert) and toggles `.is-active` on the selected one. Colour is
   driven entirely off the per-chip `--chip` custom property so the four
   pills read as Info-green / Warning-amber / Error-red at a glance, with
   a `--chip`-tinted count badge and a filled active state. */
.lc-logg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 14px;
}
.lc-logg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-logg-chip {
  --chip: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, var(--line));
  background: color-mix(in srgb, var(--chip) 8%, var(--bg-1));
  color: var(--chip);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.lc-logg-chip:hover {
  background: color-mix(in srgb, var(--chip) 16%, var(--bg-1));
  border-color: color-mix(in srgb, var(--chip) 65%, var(--line));
}
.lc-logg-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--chip) 70%, transparent);
  outline-offset: 2px;
}
.lc-logg-chip .lc-logg-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 22%, var(--bg-1));
  color: var(--chip);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Selected filter: chip fills with its colour, count badge inverts. */
.lc-logg-chip.is-active {
  background: var(--chip);
  border-color: var(--chip);
  color: #fff;
}
.lc-logg-chip.is-active .lc-logg-chip-count {
  background: color-mix(in srgb, #fff 78%, var(--chip));
  color: var(--chip);
}
.lc-logg-meta {
  font-size: 12px;
  color: var(--text-3);
}

/* ── Klickbara tabellrader (drill-in) ─────────────────────────────────
   Pages on lc-orion.css render `<tr class="row-clickable" data-href=...>`
   with a delegated click→navigate listener (platform tenants, customers,
   sites …). Give those rows the pointer + hover affordance the styles.css
   rule only provided for .lc-site-lift-table. */
tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: var(--bg-2); }

/* ── Mobilanpassning (LiftCloud) — 100% mobil ─────────────────────────
   Tvingar Orion-rutnäten till en kolumn och fixar brödsmulor på small
   screens. Hög specificitet + !important för att slå #lift-facility-shell-
   reglerna som annars håller kvar flerkolumn på mobil. */
@media (max-width: 760px) {
  #lift-facility-shell .lc-facility-top-grid,
  .lc-facility-top-grid { grid-template-columns: 1fr !important; }
  .lc-facility-tile-row { grid-template-columns: repeat(2, 1fr) !important; }
  .lc-device-grid,
  .lc-side-panels,
  .lc-shaft-panel,
  .lc-device-actions { grid-template-columns: 1fr !important; }
  .lc-device-breadcrumb { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .lc-device-breadcrumb-path,
  .lc-device-breadcrumb-actions { flex-wrap: wrap !important; }
  .lc-facility-live-body { min-height: 0 !important; }
  /* tabeller får skrolla i sidled i stället för att spränga layouten */
  .lc-fleet-wrap, .lc-fault-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* modaler fyller skärmen snyggt */
  .lc-modal { width: calc(100vw - 24px) !important; max-width: none !important; }
}
@media (max-width: 440px) {
  .lc-facility-tile-row { grid-template-columns: 1fr 1fr !important; }
}

/* ── Admin/simple-shell pages (team m.fl.) ────────────────────────────
   lc-orion-layout hides .lc-fleet-wrap/.lc-filter-bar (meant for the
   lift/operations shells). Admin pages render a REAL table + filter bar
   inside .lc-simple-shell — re-show them there. */
body.lc-orion-layout .lc-simple-shell .lc-fleet-wrap { display: block !important; }
body.lc-orion-layout .lc-simple-shell .lc-filter-bar { display: flex !important; }
body.lc-orion-layout .lc-simple-shell .lc-section-h { display: block !important; }

/* The shared loggbok (components/logbook.js) renders a real .lc-filter-bar +
   .lc-fleet-wrap table. When it lives inside a modal (the device page's
   logbook modal) that modal sits in <body> under lc-orion-layout, where the
   two classes above are hidden by default and NOT covered by the
   .lc-simple-shell re-show. Re-show them inside any modal so the modal
   loggbok is actually visible. */
body.lc-orion-layout .lc-modal .lc-fleet-wrap { display: block !important; }
body.lc-orion-layout .lc-modal .lc-filter-bar { display: flex !important; }

/* Lift page: the loggbok renders into #lift-logbook and was being swallowed by
   the same blanket Orion hide (data loaded but the table was display:none).
   Re-show it scoped to that host only — other Orion-hidden legacy sections
   (metric-strip, pin-zone, …) stay hidden. */
body.lc-orion-layout #lift-logbook .lc-fleet-wrap { display: block !important; }
body.lc-orion-layout #lift-logbook .lc-filter-bar { display: flex !important; }

/* List pages (customers.html, hissar.html) render a compact summary strip
   directly in the facility-shell — re-show it despite the legacy-hide rule. */
body.lc-orion-layout.lc-list-orion .lc-metric-strip { display: grid !important; }

/* ── Lone summary/filter card ─────────────────────────────────────────
   .lc-facility-top-grid is a 3-column grid and .lc-device-card has a
   380px min-height — both intended for the multi-card facility pages
   (lift/device/settings). On pages that carry a SINGLE KPI/filter card
   (site, /min, sites, anomalies, site-owners …) that leaves two empty
   columns and a tall half-empty card. Only when the grid holds exactly
   one card: collapse to one sensible column and let the card size to its
   content. Multi-card pages are untouched. */
.lc-facility-top-grid:has(> .lc-device-card:only-child) {
  grid-template-columns: minmax(280px, 560px);
}
.lc-facility-top-grid > .lc-device-card.lc-facility-kpi:only-child {
  min-height: 0;
  align-self: start;
}

/* Loggens "inspelad historik"-ruta — en liten svävande popover ÖVER loggen,
   positionerad vid cellen via JS (top/left). Saknade CSS → position blev
   static → top/left ignorerades → rutan hamnade sist i flödet = under loggen. */
.lc-fault-popover {
  position: absolute;
  z-index: 200;
  min-width: 200px;
  max-width: 360px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3, 10px);
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.25));
  padding: 12px 14px 11px;
  font-size: 13px;
  color: var(--text-1);
}
.lc-fault-popover header {
  font-size: 12px;
  color: var(--text-2);
  margin: 0 18px 8px 0;
}
.lc-fault-popover header strong { color: var(--text-1); }
.lc-fault-popover table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lc-fault-popover th {
  text-align: left;
  color: var(--text-2);
  font-weight: 600;
  padding: 1px 10px 4px 0;
  border-bottom: 1px solid var(--line);
}
.lc-fault-popover td { padding: 1px 10px 1px 0; }
.lc-fault-popover footer {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-2);
}
.lc-fault-explain { font-size: 13px; color: var(--text-1); }
.lc-fault-pop-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-2);
}
.lc-fault-pop-close:hover { color: var(--text-1); }

/* ── Drift (operations.html) ──────────────────────────────────────────
   Flott-/driftöversikt: anomali-panel överst + grupper Kund → Anläggning.
   Återanvänder lc-device-card, lc-site-lift-table, lc-status och
   lc-severity; nedan endast strukturklasserna som är nya för denna vy. */
.lc-text-ok { color: var(--ok); }

.lc-ops-anomaly { margin-top: 18px; border-left: 3px solid var(--alert); }
.lc-ops-anomaly-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.lc-ops-anomaly-title { font-size: 16px; font-weight: 700; color: var(--text); }
.lc-ops-anomaly-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--alert) 16%, transparent);
  color: var(--alert);
}

.lc-ops-fleet { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }

.lc-ops-org-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.lc-ops-org-title { font-size: 16px; font-weight: 700; color: var(--text); }
.lc-ops-org-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; }

.lc-ops-prop { margin-top: 14px; }
.lc-ops-prop-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.lc-ops-prop-name { font-size: 14px; font-weight: 600; color: var(--text); }
.lc-ops-prop-addr { font-size: 12px; color: var(--text-3); }

/* THOR-enhetsbild (riktig styrenhet som logga) */
.lc-device-controller-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.lc-nova-thor-logo {
  display: block;
  width: 100%;
  max-width: 88px;
  height: auto;
  margin: 0 auto 4px;
}

/* Tomkorgsresor (empty-car rides) stat — visas i statistik-/trafik-undervyn.
   Återanvänder Orion-paletten (--ok = grön, --line-2 = neutral) och samma
   kortbakgrund (--bg-2) som de omgivande diagramkorten. */
.lc-empty-rides-bar {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background: var(--line-2);
  overflow: hidden;
}
.lc-empty-rides-bar-fill {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: 5px 0 0 5px;
}
.lc-empty-rides-legend {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.lc-empty-rides-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lc-empty-rides-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lc-empty-rides-chip--empty  { background: var(--ok); }
.lc-empty-rides-chip--loaded { background: var(--line-2); }

/* Följder av tomresor — mini-stats med 2/3/4+ i rad */
.lc-empty-runs {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.lc-empty-runs-title {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.lc-empty-runs-row {
  display: flex;
  gap: 18px;
}
.lc-empty-runs-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.lc-empty-runs-label {
  color: var(--text-3);
}
.lc-empty-runs-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

/* Kebab (three-dots) overflow menu — ported from styles.css. lc-orion.css is
   the ONLY stylesheet the Orion pages (lift.html, device.html, …) load, and it
   was MISSING these rules, so .lc-kebab-menu fell back to position:static and
   injected a 240px+ block into the header flow when opened → the whole page
   layout "ballade ur". position:fixed lifts it out of flow again. */
.lc-kebab-wrap { position: relative; display: inline-flex; }
.lc-kebab-btn {
  background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--text-2); padding: 4px 8px; border-radius: 6px;
}
.lc-kebab-btn:hover { background: var(--bg-3); color: var(--text); }
.lc-kebab-menu {
  position: fixed; z-index: 1000; min-width: 240px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px 0;
}
.lc-kebab-menu[hidden] { display: none; }
.lc-kebab-menu a {
  display: block; padding: 9px 16px; color: var(--text);
  text-decoration: none; font-size: 13px; white-space: nowrap;
}
.lc-kebab-menu a:hover { background: var(--bg-3); }
.lc-kebab-menu a.is-danger { color: var(--alert); }
.lc-kebab-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Intro line under the breadcrumb (customers/hissar list pages) — a short
   plain-text lead replacing the old KPI/search cards. */
.lc-page-intro {
  margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.5;
}

/* Scrollable events block (customer detail "Senaste händelser") so the
   table can't dominate the page. Capped height + internal scroll. */
.lc-events-scroll { max-height: 360px; overflow-y: auto; }

/* "Visa alla" link below a capped table. */
.lc-section-more { margin: 8px 0 0; font-size: 13px; }
.lc-section-more a { color: var(--ok); text-decoration: none; }
.lc-section-more a:hover { text-decoration: underline; }

/* ─── Design polish — Gemini smakråd 2026-06-11 (low-risk taste pass) ─── */
/* Tabular figures so live-updating values don't jitter sideways. */
.lc-metric-value,
.lc-facility-kpi-value,
.lc-fleet-table tbody td,
.lc-site-lift-table td { font-variant-numeric: tabular-nums; }

/* Tighter, more "engineered" radii (cards 8px, buttons 4px). */
.lc-device-card,
.lc-site-lifts,
.lc-metric-strip { border-radius: 8px; }
.lc-ui-btn { border-radius: 4px; }

/* Heading micro-typography — Inter wants negative tracking at larger sizes. */
h1, h2,
.lc-facility-kpi-head,
.lc-identity-title { letter-spacing: -0.02em; }

/* Breadcrumb: smaller, and the CURRENT page (plain leaf span, not sep) bold
   so "you are here" reads clearly. The [data-hierarchy] wrapper is
   display:contents, so we target its non-sep span children (the leaf). */
.lc-device-breadcrumb-path { font-size: 13px; }
.lc-device-breadcrumb-path [data-hierarchy] span:not(.sep) { font-weight: 600; color: var(--text); }

/* Search field narrower so it stops dominating the top bar. */
.lc-orion-nav-search { width: min(400px, 100%); }

/* Row hover: a precise green left accent, not just a background fill. */
.lc-fleet-table tbody tr:hover,
.lc-site-lift-table tbody tr:hover { box-shadow: inset 2px 0 0 var(--ok); }

/* ─── Smakråd #3: white cards in LIGHT mode (crisper than beige); a hairline
   border replaces the soft shadow. Light-only — dark cards keep their depth. */
html[data-theme="light"] .lc-device-card,
html[data-theme="light"] .lc-site-lifts {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 35, 25, .04);
}
html[data-theme="light"] .lc-metric { background: #ffffff; }

/* ─── Smakråd #5: dark-mode shaft reads as a schematic blueprint — the beige
   "case" + device screen go dark so the green car outline / floor lines pop
   against a dark surface instead of sitting on a light beige cutout. */
html[data-theme="dark"] .lc-facility-live-body { background: linear-gradient(180deg, #12201b 0%, #0c1613 100%); }
html[data-theme="dark"] .lc-facility-live-screen { background: #0e1412; }
html[data-theme="dark"] .lc-facility-live-screen-frame { background: #0a0f0d; }

/* ══════════════════════════════════════════════════════════════
   Settings page redesign — sectioned stack + iOS-style switches
   (settings.html only; no impact on other pages)
   ══════════════════════════════════════════════════════════════ */

/* ─── Settings stack layout ─── */
.lc-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.lc-settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lc-settings-heading {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* ─── iOS-style toggle switch ─── */
/* The checkbox is 44×26 px touch target; the visual track is 36×20 px
   centred inside. The knob slides via margin-left on ::before. */
input[type="checkbox"].lc-switch {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--line-2);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background .18s var(--t);
  outline-offset: 3px;
}

input[type="checkbox"].lc-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: left .18s var(--t);
}

input[type="checkbox"].lc-switch:checked {
  background: var(--ok);
}

input[type="checkbox"].lc-switch:checked::before {
  left: 21px;
}

/* Focus ring — keyboard navigable */
input[type="checkbox"].lc-switch:focus-visible {
  outline: 2px solid var(--ok);
}

/* Ensure knob stays white in dark theme (default white already works) */
html[data-theme="dark"] input[type="checkbox"].lc-switch::before {
  background: #f0f0f0;
}

/* In light theme: off-track uses a slightly darker neutral so it's visible
   against the white card background */
html[data-theme="light"] input[type="checkbox"].lc-switch {
  background: #c7c7cb;
}
html[data-theme="light"] input[type="checkbox"].lc-switch:checked {
  background: var(--ok);
}

/* Helper: aligns switch flush right in a readout-item without disturbing
   the existing readout-value font family */
.lc-switch-wrap {
  display: flex;
  align-items: center;
  font-family: inherit;
}

/* ─── Per-lift notification list ─── */
.lc-notify-lifts {
  display: flex;
  flex-direction: column;
}

/* Column header row (desktop) — two small labels right-aligned */
.lc-notify-list-header {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  gap: 16px;
  align-items: center;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.lc-notify-list-header-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  text-align: center;
}

.lc-notify-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}

.lc-notify-row:last-child {
  border-bottom: none;
}

.lc-notify-row-name {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

/* On desktop the toggle-wrap becomes transparent to the grid so both .lc-notify-toggle
   divs land directly in grid columns 2 and 3, aligned under the header labels. */
.lc-notify-toggle-wrap {
  display: contents;
}

.lc-notify-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Desktop: hide per-toggle labels — the column header row labels them instead. */
.lc-notify-toggle-label {
  display: none;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  white-space: nowrap;
}

/* Bulk toggle rows — above the per-lift list, separated by a border */
.lc-notify-bulk {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.lc-notify-row--bulk {
  grid-template-columns: 1fr auto;
  padding: 8px 0;
  border-bottom: none;
}

.lc-notify-bulk-label {
  font-size: 13px;
  color: var(--text-2);
}

/* ─── Saved flash ─── */
.lc-saved-flash {
  font-size: 12px;
  color: var(--ok);
  font-weight: 600;
  margin-top: 8px;
  transition: opacity .3s ease;
}

.lc-saved-flash.lc-hidden {
  display: none !important;
}

/* ─── Mobile — ≤600px ─── */
@media (max-width: 600px) {
  .lc-settings-stack {
    gap: 16px;
  }

  /* Per-lift rows stack: name full width, then toggles side by side below */
  .lc-notify-list-header {
    display: none; /* hide desktop column headers; each toggle has its own label */
  }

  .lc-notify-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Mobile: toggle-wrap is a real flex row containing both toggles side by side. */
  .lc-notify-row .lc-notify-toggle-wrap {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }

  .lc-notify-toggle {
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  /* Mobile: show per-toggle labels (hidden on desktop). */
  .lc-notify-toggle-label {
    display: block;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-2);
    white-space: normal;
  }

  /* Bulk row: same as desktop (already 1fr auto), just tighten padding */
  .lc-notify-row--bulk {
    padding: 10px 0;
  }
}

/* Touch targets >=44px on mobile (field techs) */
@media (max-width: 768px) {
  .lc-ui-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .lc-nav-item {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .lc-lift-row {
    min-height: 44px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .lc-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .lc-device-breadcrumb-path a,
  .lc-device-breadcrumb-path .lc-bc-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   Drift-omdesign (operations.html) — "lc-ops2-*"
   Triage-inkorg överst + växlingsbar flotta (rutnät/lista).
   Återanvänder Orion-tokens (--bg-*, --ok/--warn/--alert, --r-*, --mono)
   och befintliga komponentklasser (lc-status, lc-severity, lc-fleet-*,
   lc-site-lift-table, lc-empty-row). Endast nya strukturklasser nedan.
   ═══════════════════════════════════════════════════════════════════ */

/* Verktygsrad */
.lc-ops2-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.lc-ops2-toolbar-head { display: flex; align-items: center; gap: 12px; }
.lc-ops2-title { font-size: 24px; font-weight: 700; color: var(--text); margin: 0; }
.lc-ops2-live { white-space: nowrap; }
.lc-ops2-toolbar-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  flex: 1 1 360px; justify-content: flex-end;
}
.lc-ops2-search { flex: 1 1 240px; max-width: 380px; }

/* KPI-chip-rad */
.lc-ops2-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 22px;
}
.lc-ops2-stat {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.lc-ops2-stat-value { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.lc-ops2-stat-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }

/* Sektioner */
.lc-ops2-section { margin-bottom: 28px; }
.lc-ops2-section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.lc-ops2-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }

/* Kalkylblads-flikar (Hissar / Fastigheter / Kunder) — som blad-tabbar
   överst i flottan. Aktiv flik lyfts fram och "sitter ihop" med panelen. */
.lc-ops2-tabs {
  display: flex; align-items: flex-end; gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.lc-ops2-tab {
  font: 600 13px/1 var(--sans); color: var(--text-3);
  background: var(--bg-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-1) var(--r-1) 0 0;
  padding: 9px 16px; cursor: pointer; margin-bottom: -1px;
  transition: background .12s var(--t), color .12s var(--t);
}
.lc-ops2-tab:hover { color: var(--text); background: var(--bg-1); }
.lc-ops2-tab.is-active {
  color: var(--text); background: var(--bg-1);
  border-color: var(--line); border-bottom: 1px solid var(--bg-1);
}
.lc-ops2-tab:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* Panelhuvud (rymmer vyväxlaren i Hissar-panelen) */
.lc-ops2-panel-head { display: flex; align-items: center; margin-bottom: 14px; }

/* Triage-inkorg */
.lc-ops2-triage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.lc-ops2-triage-card {
  display: flex; justify-content: space-between; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-left: 4px solid var(--line-2); border-radius: var(--r-2);
  padding: 14px 16px; cursor: pointer;
  transition: transform .12s var(--t), box-shadow .12s var(--t), background .12s var(--t);
}
.lc-ops2-triage-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--bg-2); }
.lc-ops2-triage-card:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.lc-ops2-triage-card.is-critical { border-left-color: var(--crit); border-left-width: 5px; background: color-mix(in srgb, var(--crit) 6%, var(--bg-1)); }
.lc-ops2-triage-card.is-alert { border-left-color: var(--alert); }
.lc-ops2-triage-card.is-warn  { border-left-color: var(--warn); }
.lc-ops2-triage-main { min-width: 0; }
.lc-ops2-triage-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-ops2-triage-name { font-size: 15px; font-weight: 600; color: var(--text); }
.lc-ops2-triage-site { font-size: 12px; color: var(--text-3); margin: 2px 0 6px; }
.lc-ops2-triage-issue { font-size: 13px; font-weight: 600; }
.lc-ops2-triage-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; white-space: nowrap;
}
.lc-ops2-triage-since { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* "Allt lugnt"-läge */
.lc-ops2-allclear {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 44px 20px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-2);
}
.lc-ops2-allclear-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; margin-bottom: 12px;
  background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
}
.lc-ops2-allclear-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.lc-ops2-allclear-sub { font-size: 13px; color: var(--text-3); }

/* Vyväxlare (rutnät / lista) */
.lc-ops2-view-toggle {
  margin-left: auto; display: inline-flex;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 2px; gap: 2px;
}
.lc-ops2-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--sans); color: var(--text-2);
  background: transparent; border: 0; border-radius: var(--r-1);
  padding: 7px 12px; cursor: pointer; transition: background .12s var(--t), color .12s var(--t);
}
.lc-ops2-view-btn:hover { color: var(--text); }
.lc-ops2-view-btn.is-active { background: var(--bg-1); color: var(--text); box-shadow: var(--shadow); }
.lc-ops2-view-btn:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.lc-ops2-view-ico { font-size: 14px; line-height: 1; }

/* Flotta — rutnät av hisskort */
.lc-ops2-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.lc-ops2-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-top: 3px solid var(--idle); border-radius: var(--r-2);
  padding: 14px 16px; cursor: pointer;
  transition: transform .12s var(--t), box-shadow .12s var(--t), background .12s var(--t);
}
.lc-ops2-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--bg-2); }
.lc-ops2-card:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.lc-ops2-card.is-online { border-top-color: var(--ok); }
.lc-ops2-card.is-warn   { border-top-color: var(--warn); }
.lc-ops2-card.is-alert  { border-top-color: var(--alert); }
.lc-ops2-card.is-idle   { border-top-color: var(--idle); }
.lc-ops2-card-head { display: flex; align-items: center; gap: 8px; }
.lc-ops2-card-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--idle); }
.lc-ops2-card-dot.is-on  { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.lc-ops2-card-dot.is-off { background: var(--alert); }
.lc-ops2-card-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-ops2-card-site { font-size: 12px; color: var(--text-3); }
.lc-ops2-card-body { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 0 2px; }
.lc-ops2-card-kv { display: flex; flex-direction: column; gap: 1px; }
.lc-ops2-card-k { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.lc-ops2-card-v { font-size: 13px; color: var(--text); font-weight: 500; }
.lc-ops2-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 6px; border-top: 1px solid var(--line);
}

/* Märkeschip (THOR/NewLift/…) */
.lc-ops2-brand {
  display: inline-flex; align-items: center;
  font: 600 10px/1 var(--mono); letter-spacing: .02em;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap;
}

/* Lista-omslag */
.lc-ops2-list-wrap {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
.lc-ops2-list { padding: 0 6px; }
.lc-ops2-list .row-clickable { cursor: pointer; }
.lc-ops2-list .row-clickable:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; }

/* Skelett-laddning */
.lc-skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2);
}
.lc-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-3) 60%, transparent), transparent);
  transform: translateX(-100%);
  animation: lc-skel-shimmer 1.3s infinite;
}
.lc-ops2-skel-card { min-height: 96px; }
@keyframes lc-skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lc-skeleton::after { animation: none; }
}

/* Mobil: stapla kontroller och kort */
@media (max-width: 760px) {
  .lc-ops2-toolbar { flex-direction: column; align-items: stretch; }
  .lc-ops2-toolbar-controls { justify-content: stretch; }
  .lc-ops2-search { max-width: none; }
  .lc-ops2-stats { grid-template-columns: repeat(2, 1fr); }
  .lc-ops2-triage,
  .lc-ops2-grid { grid-template-columns: 1fr; }
  .lc-ops2-section-head { flex-wrap: wrap; }
  .lc-ops2-view-toggle { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   Driftvägg (operations.html) — "lc-ops2-dash-*"
   Tät, mörk "operations-wall" med 6 ECharts-widgets överst. Ligger
   ovanpå triage/flotta. Färger läses ur Orion-tokens i JS (getComputedStyle)
   så dark/dim/light följer med; panelerna använder samma tokens som resten.
   Bred layout = 3 kolumner: donut/gauges/fel i vänsterspalten, kartan som
   2×2-block, tomkörning + fabrikat på nedersta raden → balanserat 3×3-rutnät.
   ═══════════════════════════════════════════════════════════════════ */
.lc-ops2-dash { margin-bottom: 24px; }
.lc-ops2-dash-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.lc-ops2-dash-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.lc-ops2-dash-sub { font-size: 12px; color: var(--text-3); }
.lc-ops2-dash-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
}
/* Primär donut och kartan får dubbel bredd på breda skärmar. */
.lc-ops2-dash-panel--primary { grid-column: span 1; }
.lc-ops2-dash-panel--map { grid-column: span 2; grid-row: span 1; }
.lc-ops2-dash-panel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 12px 14px; min-width: 0; overflow: hidden;
}
.lc-ops2-dash-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; flex: 0 0 auto;
}
.lc-ops2-dash-panel-title {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.lc-ops2-dash-caption { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.lc-ops2-dash-chart { flex: 1 1 auto; min-height: 0; width: 100%; }

/* Kart-drill: brödsmulor (Sverige › Län › Kommun) ovanför Sverige-kartan.
   Klickbara nivåer = knappar (blå); aktiv nivå = fet text, ej klickbar. */
.lc-mapbc {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  margin: 2px 0 6px; min-height: 18px; font-size: 12px; line-height: 1.2;
}
.lc-mapbc:empty { display: none; }
.lc-mapbc-sep { color: var(--text-3); opacity: .7; }
.lc-mapbc-crumb {
  background: none; border: 0; padding: 1px 3px; font: inherit;
  color: var(--text-2); border-radius: 4px;
}
button.lc-mapbc-crumb { cursor: pointer; color: #3b82f6; }
button.lc-mapbc-crumb:hover { background: var(--bg-2); text-decoration: underline; }
.lc-mapbc-crumb.is-active { color: var(--text); font-weight: 600; cursor: default; }

/* Kommun-filter-chip ovanför hiss-listan (visas efter kommun-klick på kartan). */
.lc-ops2-mapfilter {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 2px 8px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px; color: var(--text-2);
}
.lc-ops2-mapfilter[hidden] { display: none; }
.lc-ops2-mapfilter-label { font-weight: 600; color: var(--text); }
.lc-ops2-mapfilter-clear {
  background: none; border: 0; padding: 0 2px; font-size: 13px; line-height: 1;
  color: var(--text-3); cursor: pointer;
}
.lc-ops2-mapfilter-clear:hover { color: var(--alert); }
/* Data-flikens stapeldiagram (månadens dataförbrukning per hiss). ECharts kräver
   en konkret höjd på behållaren; höjden får rymma ~14+ liggande staplar. */
.lc-ops2-data-chart { width: 100%; height: 520px; min-height: 320px; }
.lc-ops2-dash-empty {
  position: absolute; inset: 34px 14px 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-3); text-align: center;
}
/* `display:flex` above beats the UA [hidden] rule, so honour the hidden
   attribute explicitly — otherwise the empty label bleeds through when the
   chart actually has bars. */
.lc-ops2-dash-empty[hidden] { display: none; }

/* Same trap: these containers set an explicit display (grid/flex) which beats
   the UA [hidden]{display:none}, so `el.hidden = true` in operations.js didn't
   actually hide them. That left the grey loading-placeholder cards
   (#fleetSkeleton) lingering above the real fleet, and the "Allt lugnt"
   empty-state (#triageEmpty) showing on top of the triage cards. Honour the
   hidden attribute explicitly. */
.lc-ops2-grid[hidden],
.lc-ops2-triage[hidden],
.lc-ops2-allclear[hidden] { display: none; }

/* Bredare skärmar: donut smal, karta bred, gauges + fel på rad 2. */
@media (min-width: 1100px) {
  .lc-ops2-dash-panel--map { grid-row: span 2; }
}

/* Mellanbreda skärmar: 2 kolumner. */
@media (max-width: 1099px) {
  .lc-ops2-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .lc-ops2-dash-panel--map { grid-column: span 2; }
}

/* Mobil: en kolumn, staplat. */
@media (max-width: 760px) {
  .lc-ops2-dash-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .lc-ops2-dash-panel--map { grid-column: span 1; grid-row: span 1; }
}


/* ═══════════════════════════════════════════════════════════════════
   Kund-omdesign (customer.html) — "lc-cc-*" (Customer Command Center)
   Hälsopoäng + fastighetskort + aktivitetstidslinje. Återanvänder
   Orion-tokens (--bg-*, --ok/--warn/--alert, --r-*, --mono, --t) och
   befintliga komponentklasser (lc-skeleton, lc-pill, lc-ui-btn,
   lc-severity-färger). Endast nya strukturklasser nedan.
   ═══════════════════════════════════════════════════════════════════ */

.lc-cc { display: flex; flex-direction: column; gap: 22px; }

/* ── Hero: hälsopoäng + KPI:er ── */
.lc-cc-hero {
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px; align-items: stretch;
}
.lc-cc-health {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 18px 20px;
}
/* Cirkulär mätare — konisk fyllnad styrd av --cc-pct (0–100), satt via JS */
.lc-cc-health-gauge {
  --cc-pct: 0;
  position: relative; flex: 0 0 auto;
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--cc-gauge, var(--idle)) calc(var(--cc-pct) * 1%), var(--line) 0);
}
.lc-cc-health-gauge::before {
  content: ''; position: absolute; inset: 8px;
  background: var(--bg-1); border-radius: 50%;
}
.lc-cc-health-gauge.is-good    { --cc-gauge: var(--ok); }
.lc-cc-health-gauge.is-warn    { --cc-gauge: var(--warn); }
.lc-cc-health-gauge.is-bad     { --cc-gauge: var(--alert); }
.lc-cc-health-gauge.is-unknown { --cc-gauge: var(--idle); }
.lc-cc-health-score {
  position: relative; z-index: 1;
  font: 700 30px/1 var(--sans); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lc-cc-health-of { position: relative; z-index: 1; font-size: 11px; color: var(--text-3); }
.lc-cc-health-body { min-width: 0; }
.lc-cc-health-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lc-cc-health-title { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.lc-cc-health-badge {
  font: 600 11px/1 var(--sans); padding: 4px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line);
}
.lc-cc-health-badge.is-good    { background: color-mix(in srgb, var(--ok) 14%, transparent);    color: var(--ok);    border-color: transparent; }
.lc-cc-health-badge.is-warn    { background: color-mix(in srgb, var(--warn) 16%, transparent);  color: var(--warn);  border-color: transparent; }
.lc-cc-health-badge.is-bad     { background: color-mix(in srgb, var(--alert) 14%, transparent); color: var(--alert); border-color: transparent; }
.lc-cc-health-reason { font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 0; }

.lc-cc-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.lc-cc-kpi {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 14px 16px;
}
.lc-cc-kpi-value { font: 700 24px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.lc-cc-kpi-value--ok { color: var(--ok); }
.lc-cc-kpi-value--alert { color: var(--alert); }
.lc-cc-kpi-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }

/* ── Två kolumner ── */
.lc-cc-cols {
  display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 16px; align-items: start;
}
.lc-cc-panel {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 18px 20px;
}
.lc-cc-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.lc-cc-panel-head--sub { margin-top: 22px; }
.lc-cc-panel-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.lc-cc-panel-link { font-size: 12px; color: var(--text-2); }
.lc-cc-panel-link:hover { color: var(--ok); }

/* ── Fastighetskort ── */
.lc-cc-prop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.lc-cc-prop-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 4px solid var(--idle); border-radius: var(--r-2);
  padding: 14px 16px; text-decoration: none; color: inherit;
  transition: transform .12s var(--t), box-shadow .12s var(--t), background .12s var(--t);
}
.lc-cc-prop-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--bg-3); }
.lc-cc-prop-card:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.lc-cc-prop-card.is-online { border-left-color: var(--ok); }
.lc-cc-prop-card.is-warn   { border-left-color: var(--warn); }
.lc-cc-prop-card.is-alert  { border-left-color: var(--alert); }
.lc-cc-prop-card.is-idle   { border-left-color: var(--idle); }
.lc-cc-prop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lc-cc-prop-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-cc-prop-count { font: 500 11px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
.lc-cc-prop-addr { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-cc-prop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.lc-cc-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.lc-cc-dot.is-online { background: var(--ok); }
.lc-cc-dot.is-warn   { background: var(--warn); }
.lc-cc-dot.is-alert  { background: var(--alert); }
.lc-cc-dot.is-idle   { background: var(--idle); }
.lc-cc-dot.is-empty  { background: var(--line-2); }
.lc-cc-prop-online { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* ── Personkort (användare) ── */
.lc-cc-people { display: flex; flex-direction: column; gap: 8px; }
.lc-cc-person {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 10px 14px;
}
.lc-cc-person-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--sans); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.lc-cc-person-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lc-cc-person-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-cc-person-mail { font: 400 12px/1.3 var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-cc-person-mail:hover { color: var(--ok); }
.lc-cc-person-role { flex: 0 0 auto; }

/* ── Aktivitetstidslinje ── */
.lc-cc-panel--timeline { position: sticky; top: 16px; }
.lc-cc-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-cc-act {
  position: relative; display: flex; gap: 12px;
  padding: 10px 0 10px 4px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.lc-cc-act:last-child { border-bottom: 0; }
.lc-cc-act:hover { background: var(--bg-2); }
.lc-cc-act:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; }
.lc-cc-act-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 4px; background: var(--idle);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--idle) 18%, transparent);
}
.lc-cc-act.is-error .lc-cc-act-dot   { background: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 18%, transparent); }
.lc-cc-act.is-warning .lc-cc-act-dot { background: var(--warn);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.lc-cc-act.is-info .lc-cc-act-dot    { background: var(--ok);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.lc-cc-act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lc-cc-act-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lc-cc-act-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-cc-act-time { flex: 0 0 auto; font: 400 11px/1 var(--mono); color: var(--text-3); }
.lc-cc-act-ctx { font-size: 12px; color: var(--text-2); }
.lc-cc-act-ai { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ── Tom-lägen ── */
.lc-cc-empty {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 28px 20px; color: var(--text-3); font-size: 13px;
  background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--r-2);
}
.lc-cc-empty--inline { padding: 16px; }
.lc-cc-empty--quiet { gap: 10px; border-style: solid; }
.lc-cc-quiet-icon {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
}

/* ── Skelett ── */
.lc-cc-skel-card { min-height: 92px; }
.lc-cc-skel-row { min-height: 48px; }

/* ── Mobil ── */
@media (max-width: 980px) {
  .lc-cc-cols { grid-template-columns: 1fr; }
  .lc-cc-panel--timeline { position: static; }
}
@media (max-width: 760px) {
  .lc-cc-hero { grid-template-columns: 1fr; }
  .lc-cc-kpis { grid-template-columns: repeat(2, 1fr); }
  .lc-cc-health { flex-direction: row; }
  .lc-cc-prop-grid { grid-template-columns: 1fr; }
}

/* ── NewLift remote-screen mirror (read-only FST LCD, 6b00) ─────────────── */
.lc-remote-screen {
  margin: 14px 0;
  background: var(--panel, #14110d);
  border: 1px solid var(--border, #2b2620);
  border-radius: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
}
.lc-remote-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.lc-remote-screen-title { font-weight: 700; font-size: 14px; color: var(--text-1, #e8e2d6); }
.lc-remote-screen-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-3, #8a8a80); opacity: .85;
}
.lc-remote-screen-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live, #43d675); box-shadow: 0 0 6px var(--live, #43d675);
  animation: lc-rs-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-rs-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.lc-remote-screen-lcd {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #7CFC8A;
  background: #06120a;
  border: 1px solid #123;
  border-radius: 6px;
  padding: 14px 16px;
  min-height: 48px;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 5px rgba(124,252,138,.35);
}

/* ── FST on-demand remote-screen control bar (NewLift) ─────────────────────
   Toggles the read-only LCD card above. The live/waiting hints sit here,
   OUTSIDE the card, so an open session never looks frozen while the
   change-only 6b00 text is momentarily unchanged. */
.lc-fst-screen-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 0;
}
#btn-fst-screen.is-active {
  border-color: var(--live, #43d675);
  color: var(--live, #43d675);
}
.lc-fst-screen-wait {
  font-size: 12px; color: var(--text-3, #8a8a80); opacity: .85;
}

/* ══ FST-Keypad faceplate replica (Phase 1 — READ-ONLY) ═══════════════════════
   A photorealistic replica of EleVision's "FST-Keypad" window: light Windows
   title bar, blue plastic faceplate, green 20×4 LCD, A/B/C/D row markers, a
   1-19 floor strip, Info/Drive/Debug side buttons, a ↑ ← E → S ↓ D-pad, and
   FST/STATUS/ERROR LEDs. Injected by components/fst-keypad.js. Every button is
   inert in this phase (drawn, disabled, non-interactive). */
.lc-fstk-mount { display: block; }
.lc-fstk {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  font-family: "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
/* Windows-style title bar */
.lc-fstk-titlebar {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 6px 0 10px;
  background: #f3f3f3;
  border-bottom: 1px solid #d8d8d8;
}
.lc-fstk-winicon {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 2px;
  background:
    linear-gradient(135deg, #1f6fb2 0 40%, #2f9e44 40% 70%, #e03131 70% 100%);
}
.lc-fstk-wintitle {
  flex: 1 1 auto; font-size: 12.5px; color: #1a1a1a; white-space: nowrap;
}
.lc-fstk-wintitle strong { font-weight: 600; }
.lc-fstk-winbtns { display: inline-flex; gap: 2px; color: #4a4a4a; }
.lc-fstk-winbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; font-size: 12px; border-radius: 3px;
}
.lc-fstk-winbtn--close { color: #4a4a4a; }
/* Blue plastic faceplate */
.lc-fstk-face {
  padding: 16px 18px 18px;
  background:
    radial-gradient(120% 120% at 30% 0%, #3a86bd 0%, #2c74a8 45%, #23608e 100%);
}
/* ── Green LCD + A/B/C/D markers ─────────────────────────────────────────── */
.lc-fstk-lcdwrap { display: flex; align-items: stretch; gap: 8px; }
.lc-fstk-lcd {
  flex: 1 1 auto;
  background: #35c93b;
  border: 2px solid #0d3f13;
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: inset 0 0 14px rgba(0,60,0,.35), 0 1px 0 rgba(255,255,255,.25);
  font-family: "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(13px, 4vw, 18px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #06260a;
  text-shadow: 0 0 3px rgba(120,255,130,.5);
}
.lc-fstk-lcdline {
  white-space: pre;
  min-height: 1.45em;
  overflow: hidden;
}
.lc-fstk-rowmarks {
  display: flex; flex-direction: column; justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  font-size: 13px; font-weight: 700; color: #eaf2f8;
}
/* ── Floor strip 1 3 5 … 19 ──────────────────────────────────────────────── */
.lc-fstk-floorstrip {
  display: flex; justify-content: space-between;
  padding: 7px 4px 2px; margin-right: 22px;
  font-size: 12.5px; font-weight: 700; color: #f2f7fb;
  letter-spacing: .02em;
}
/* ── Controls: Info/Drive/Debug + D-pad ──────────────────────────────────── */
.lc-fstk-controls {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 12px;
}
.lc-fstk-side { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.lc-fstk-btn--side {
  min-width: 74px; padding: 7px 10px;
  font-size: 13px; font-weight: 600; color: #1c1c1c;
  background: linear-gradient(#fdfdfd, #dfe2e4);
  border: 1px solid #9aa1a6;
  border-radius: 6px;
  box-shadow: 0 2px 0 #8a9196, inset 0 1px 0 #ffffff;
}
/* D-pad grid: ↑ top-centre, ← E → middle, S ↓ bottom */
.lc-fstk-dpad {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 8px;
  max-width: 220px;
  margin-left: auto;
}
.lc-fstk-key {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 20px; font-weight: 700; color: #1c1c1c;
  background: linear-gradient(#fdfdfd, #e4e7e9);
  border: 1px solid #9aa1a6;
  border-radius: 8px;
  box-shadow: 0 3px 0 #8a9196, inset 0 1px 0 #ffffff;
}
/* E (enter) and S (latch) are the darker key-caps in the photo */
.lc-fstk-key--enter, .lc-fstk-key--latch {
  color: #16202a;
  background: linear-gradient(#c2c8cc, #a4abb0);
  box-shadow: 0 3px 0 #7f868b, inset 0 1px 0 #d7dbde;
}
.lc-fstk-key--up    { grid-column: 2; grid-row: 1; }
.lc-fstk-key--left  { grid-column: 1; grid-row: 2; }
.lc-fstk-key--enter { grid-column: 2; grid-row: 2; }
.lc-fstk-key--right { grid-column: 3; grid-row: 2; }
.lc-fstk-key--latch { grid-column: 1; grid-row: 3; }
.lc-fstk-key--down  { grid-column: 2; grid-row: 3; }
/* S latch (shift) engaged: clearly show it's toggled on. */
.lc-fstk-key--latch.is-latched {
  background: var(--live, #22c55e);
  color: #04120a;
  box-shadow: 0 0 0 2px var(--live, #22c55e) inset, 0 0 8px rgba(34,197,94,.55);
  font-weight: 700;
}
/* Phase-1 inert: buttons are drawn but do nothing */
.lc-fstk-btn[disabled], .lc-fstk-key[disabled] {
  cursor: default;
  opacity: 1;              /* look enabled (like the photo), but stay inert */
  pointer-events: none;
}
/* ── Phase 3 — "take control" chrome + armed (live) highlight ─────────────── */
.lc-fstk-ctrlbtn {
  flex: 0 0 auto;
  margin-right: 6px;
  padding: 3px 10px;
  font-size: 11.5px; font-weight: 600;
  color: #fff;
  background: #1f6fb2;
  border: 1px solid #17588f;
  border-radius: 4px;
  cursor: pointer;
}
.lc-fstk-ctrlbtn--release { background: #c0392b; border-color: #9c2c20; }
.lc-fstk-ctrlmsg {
  flex: 0 0 auto; margin-right: 6px;
  font-size: 11px; font-weight: 600; color: #c0392b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Armed: this is a LIVE lift — ring the faceplate + make keys feel pressable. */
.lc-fstk.is-armed .lc-fstk-face { box-shadow: inset 0 0 0 3px #e03131; }
.lc-fstk.is-armed .lc-fstk-key:not([disabled]),
.lc-fstk.is-armed .lc-fstk-btn--side:not([disabled]) {
  cursor: pointer;
  pointer-events: auto;
}
.lc-fstk.is-armed .lc-fstk-key:not([disabled]):active,
.lc-fstk.is-armed .lc-fstk-btn--side:not([disabled]):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #8a9196, inset 0 1px 0 #ffffff;
}
/* ── Status LEDs FST / STATUS / ERROR ────────────────────────────────────── */
.lc-fstk-leds {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  margin-top: 12px;
  font-size: 11.5px; font-weight: 700; color: #eef4f8;
  letter-spacing: .03em;
}
.lc-fstk-led { display: inline-flex; align-items: center; gap: 6px; }
.lc-fstk-lamp {
  width: 9px; height: 9px; border-radius: 50%;
  background: #16351a;                       /* off = dark */
  box-shadow: inset 0 0 2px rgba(0,0,0,.6);
}
.lc-fstk-led.is-on .lc-fstk-lamp {
  background: #2fe04a;
  box-shadow: 0 0 6px #2fe04a, inset 0 0 2px rgba(255,255,255,.6);
}
.lc-fstk-led.is-error .lc-fstk-lamp {
  background: #ff3b30;
  box-shadow: 0 0 6px #ff3b30, inset 0 0 2px rgba(255,255,255,.6);
}
@media (max-width: 420px) {
  .lc-fstk-controls { gap: 12px; }
  .lc-fstk-btn--side { min-width: 62px; }
}

/* ─── Nyheter (changelog) ─────────────────────────────────────
   Sidan news.html + oläst-prick i top-navet. Neutrala Orion-tokens
   så alla tre teman (dark/dim→dark/light) fungerar. */
.lc-news-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--orion-text);
}
.lc-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.lc-news-item {
  background: var(--orion-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
}
.lc-news-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lc-news-date {
  font-size: 12px;
  color: var(--text-3);
}
.lc-news-item-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--orion-text);
}
.lc-news-item-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.lc-news-empty {
  color: var(--text-2);
  font-size: 13px;
}

/* Typ-pill — Funktion / Förbättring / Buggfix. */
.lc-news-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--bg-2);
}
.lc-news-type--feature {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.lc-news-type--improvement {
  color: var(--live);
  border-color: color-mix(in srgb, var(--live) 45%, var(--line));
  background: color-mix(in srgb, var(--live) 12%, transparent);
}
.lc-news-type--fix {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* Oläst-prick — liten röd markör. Inline bredvid menyposten, hörn på
   burger-/konto-ikonen (dessa görs position:relative för ankringen). */
.lc-news-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alert);
}
.lc-news-dot--inline {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.lc-orion-nav-burger,
.lc-orion-nav-user { position: relative; }
.lc-news-dot--corner {
  position: absolute;
  top: 4px;
  right: 4px;
  box-shadow: 0 0 0 2px #1a221d; /* matchar den fasta mörka top-baren */
  pointer-events: none;
}

/* ─── Del D · Manualer (auto-matchade manualer per hiss) ───────────── */
.lc-btn--sm { padding: 6px 12px; font-size: 12px; }
.lc-manuals-section { margin-top: 20px; }
.lc-manuals-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.lc-manuals-head .lc-section-h { margin: 0; }
.lc-manuals-empty { color: var(--text-3); font-size: 13px; padding: 8px 0; }
.lc-manuals-band {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel, var(--bg-2, #fff)); margin-bottom: 12px; overflow: hidden;
}
.lc-manuals-band-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg-3, transparent);
}
.lc-manuals-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.lc-manuals-row:last-child { border-bottom: 0; }
.lc-manuals-row-main { flex: 1 1 auto; min-width: 0; }
.lc-manuals-name { font-weight: 600; }
.lc-manuals-fw { color: var(--text-3); font-size: 12px; font-family: ui-monospace, monospace; }
.lc-manuals-status { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.lc-manuals-manual { font-size: 13px; }
.lc-manuals-link { color: var(--ok); font-weight: 600; text-decoration: none; }
.lc-manuals-link:hover { text-decoration: underline; }
.lc-manuals-warn { color: var(--warn); font-weight: 600; font-size: 13px; }
.lc-manuals-row.is-unmatched { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.lc-manuals-add {
  border: 1px solid var(--warn); color: var(--warn); background: transparent;
  border-radius: 6px; width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 15px;
}
.lc-manuals-add:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.lc-manuals-foot { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.lc-manuals-foot .lc-manuals-gap { color: var(--warn); font-weight: 600; }

/* Del D · Manualbibliotek (settings.html) */
.lc-manuals-head-actions { display: flex; gap: 8px; }
.lc-manuals-lib-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lc-manuals-lib-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.lc-manuals-lib-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lc-manuals-lib-table tr:last-child td { border-bottom: 0; }
.lc-manuals-lib-patterns { font-family: ui-monospace, monospace; color: var(--text-3); font-size: 12px; }
.lc-manuals-lib-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.lc-manuals-lib-actions .lc-ui-btn { padding: 4px 10px; font-size: 12px; }
@media (max-width: 640px) {
  .lc-manuals-lib-table, .lc-manuals-lib-table thead, .lc-manuals-lib-table tbody,
  .lc-manuals-lib-table th, .lc-manuals-lib-table td, .lc-manuals-lib-table tr { display: block; }
  .lc-manuals-lib-table thead { display: none; }
  .lc-manuals-lib-table tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 6px; }
  .lc-manuals-lib-table td { border-bottom: 0; padding: 4px 6px; }
}

/* CANopen-nodlista: fast-höjd ruta + "Visa alla"-modal (David 2026-07-23) */
.lc-device-canopen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lc-device-canopen-refresh { font-size: 11px; color: var(--accent, #16a34a); text-decoration: none; white-space: nowrap; }
.lc-device-canopen-refresh:hover { text-decoration: underline; }
.lc-device-canopen-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-height: 20px; }
.lc-device-canopen-updated { font-size: 10px; color: var(--text-3); }
.lc-btn-link { background: none; border: 0; padding: 0; color: var(--accent, #16a34a); font-size: 12px; cursor: pointer; font-family: inherit; }
.lc-btn-link:hover { text-decoration: underline; }
.lc-modal--nodes { width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
.lc-nodes-modal-body { overflow-y: auto; padding: 0 4px 8px; }
.lc-nodes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lc-nodes-table th { text-align: left; position: sticky; top: 0; background: var(--panel, #fff); color: var(--text-2); font-size: 11px; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.lc-nodes-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }