/* Purplepoint Verify — mörkt installationsinstrument med mintgröna signaler. */

:root {
  color-scheme: dark;
  --bg: #031d15;
  --bg-deep: #00140e;
  --rail: rgba(1, 27, 19, .94);
  --surface: rgba(103, 162, 137, .18);
  --surface-strong: rgba(116, 177, 150, .24);
  --surface-soft: rgba(226, 255, 243, .055);
  --field: rgba(0, 36, 25, .74);
  --ink: #effbf6;
  --muted: #91aa9f;
  --faint: #66877a;
  --rule: rgba(172, 224, 201, .18);
  --rule-strong: rgba(172, 224, 201, .31);
  --mint: #5af0bd;
  --mint-strong: #24dda2;
  --mint-soft: rgba(90, 240, 189, .13);
  --violet: #a692ff;
  --violet-soft: rgba(166, 146, 255, .14);
  --amber: #ffc66d;
  --red: #ff7183;
  --shadow: 0 22px 60px rgba(0, 10, 7, .24);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--bg-deep); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 8%, rgba(24, 160, 108, .30), transparent 34rem),
    radial-gradient(circle at 58% 98%, rgba(36, 157, 119, .18), transparent 42rem),
    linear-gradient(135deg, #021c14 0%, #062e22 52%, #073326 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, input, select { min-height: 36px; }

button {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 7px 13px;
  background: rgba(203, 240, 223, .09);
  color: #dcefe7;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease,
              color .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:hover {
  border-color: rgba(90, 240, 189, .48);
  background: rgba(90, 240, 189, .12);
  color: #fff;
}

button:active { transform: translateY(1px); }
/* En inaktiverad knapp betyder oftast att det inte finns något att göra —
   inte att något pågår. cursor: wait ritar macOS snurrande hjul, och det såg
   ut som att appen hängde sig så fort man förde musen över till exempel
   "Återställ tider" utan egna tysthetsgränser satta. Väntemarkören hör till
   knappar som faktiskt arbetar; de märks med .busy medan det pågår. */
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
button:disabled.busy { cursor: progress; }

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

input, select {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 7px 11px;
  background: var(--field);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

input::placeholder { color: #638377; }
select { color-scheme: dark; }

.shell { display: flex; min-height: 100vh; }

/* ---------------------------------------------------------------- vänsterräls */

.rail {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 278px;
  height: 100vh;
  flex: 0 0 278px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 16px 18px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(0, 31, 22, .98), rgba(0, 24, 17, .96));
  border-right: 1px solid rgba(177, 235, 210, .14);
  box-shadow: 15px 0 42px rgba(0, 12, 8, .12);
}

.brand { display: flex; gap: 12px; align-items: center; padding: 2px 5px 4px; }
.signal-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(210, 255, 239, .42);
  border-radius: 13px;
  background: linear-gradient(145deg, #75f6c9, #37daa5);
  color: #063023;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(41, 225, 165, .17), inset 0 1px rgba(255,255,255,.5);
}
.brand h1 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.brand-sub { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

.nav-label, .customer-kicker, .rail-block h2 {
  margin: 0 0 8px;
  color: #6c9786;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.views { display: flex; flex-direction: column; gap: 6px; }
.views button {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px 9px 43px;
  border-color: rgba(179, 230, 208, .08);
  background: rgba(235, 255, 246, .014);
  color: #8da99d;
  text-align: left;
}
.views button::before {
  content: attr(data-icon);
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #608879;
  font: 650 11px/1 var(--mono);
}
.views button:hover { color: #dff6ec; background: rgba(93, 218, 174, .07); }
.views button.on {
  border-color: rgba(90, 240, 189, .26);
  background: linear-gradient(90deg, rgba(90, 240, 189, .14), rgba(90, 240, 189, .055));
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--mint);
}
.views button.on::before { color: var(--mint); }

.customer-context, .rail-block {
  border: 1px solid var(--rule);
  border-radius: 15px;
  padding: 13px;
  background: rgba(211, 255, 236, .055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.customer-context strong { display: block; margin: 1px 0 2px; font-size: 15px; }
.customer-meta { color: var(--muted); font-size: 11px; margin-bottom: 11px; }
.customer-context button { width: 100%; }
.customer-context select { margin-top: 8px; }

.field { display: block; min-width: 0; margin: 0 0 9px; }
.field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.rail .field:last-of-type { margin-bottom: 0; }
.rail input, .rail select { background: rgba(0, 34, 24, .76); }

.window-boundary + .window-boundary { margin-top: 10px; }
.window-label {
  display: block;
  margin-bottom: 5px;
  color: #b7d0c5;
  font-size: 11px;
  font-weight: 700;
}
.date-time-fields {
  display: grid;
  /* Under varandra: med millisekunder får datum och klockslag inte plats
     bredvid varandra i sidofältet, och ett klippt klockslag är värdelöst. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.date-time-fields .field { margin: 0; }
.date-time-fields input { min-width: 0; padding-inline: 8px; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.quick button { min-height: 34px; padding: 4px 5px; }
.quick button.primary { box-shadow: none; }
.window-reset { width: 100%; min-height: 34px; margin-top: 6px; }
.window-note { margin: 9px 0 0; line-height: 1.35; }

.actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.actions button { width: 100%; }
.action-note { margin: 3px 2px 0; line-height: 1.35; }
.conn {
  padding: 0 5px;
  color: #688a7c;
  font: 10.5px/1.55 var(--mono);
  overflow-wrap: anywhere;
}
.conn b { color: var(--red); font-weight: 500; }

/* ---------------------------------------------------------------- huvudyta */

main { flex: 1; min-width: 0; }
.view.hidden { display: none; }

.view-head {
  position: relative;
  padding: 31px 50px 25px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(0, 27, 19, .58), rgba(7, 72, 50, .20));
}
.view-head::before {
  content: "VERIFY / LIVE SIGNALS";
  display: block;
  margin-bottom: 10px;
  color: var(--mint);
  font: 700 9px/1 var(--mono);
  letter-spacing: .20em;
}
.view-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.035em; }
.view-head p { max-width: 70ch; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.back { min-height: 32px; margin: 0 0 15px; padding: 5px 10px; color: var(--muted); font-size: 12px; }

.pad { padding: 28px 50px 70px; }
.empty { color: var(--muted); }
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 21px;
}
.row .field { flex: 1 1 220px; margin: 0; }
.row > input { flex: 1 1 220px; width: auto; }
/* Filter som hör till raden men inte ska konkurrera om bredden: hålls ihop
   till höger medan knapparna står kvar till vänster. */
.row .field.push-right { flex: 0 0 auto; margin-left: auto; }
.row .field.push-right select { min-width: 190px; }

.machine-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 13px 0 24px;
  padding: 13px;
  border-radius: 15px;
}
.toolbar-group { display: flex; align-items: flex-end; gap: 7px; }
.toolbar-group .field { min-width: 180px; margin: 0; }
.toolbar-group.flank-controls { flex: 1 1 440px; margin: 0 0 0 auto; }
.flank-count { margin-left: auto; white-space: nowrap; }
.channel-section { margin: 25px 0 31px; }
.channel-section > h3 { margin-bottom: 12px; }

h3 { margin: 29px 0 12px; color: #f4fff9; font-size: 15px; letter-spacing: -.012em; }
h3:first-child { margin-top: 0; }
.sub { color: var(--muted); font-size: 11.5px; }
.name { color: #f4fff9; font-weight: 680; }
.num, .ts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.ts { white-space: nowrap; font-size: 12px; }

.primary {
  border-color: rgba(116, 255, 208, .55);
  background: linear-gradient(145deg, #6af4c4, #32e0a7);
  color: #052c21;
  font-weight: 760;
  box-shadow: 0 10px 26px rgba(35, 220, 159, .12), inset 0 1px rgba(255,255,255,.42);
}
.primary:hover {
  border-color: #a6ffdf;
  background: linear-gradient(145deg, #87fbd2, #49eab5);
  color: #03271d;
  box-shadow: 0 12px 30px rgba(35, 220, 159, .19), inset 0 1px rgba(255,255,255,.48);
}

/* ---------------------------------------------------------------- glasytor och tabeller */

.glass, .wrap, figure, .facts, .customer-form {
  border: 1px solid var(--rule);
  background: linear-gradient(135deg, rgba(128, 190, 162, .17), rgba(82, 154, 124, .11));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wrap { border-radius: 16px; overflow: auto; }
.wrap + .wrap { margin-top: 22px; }
table { width: 100%; border-collapse: collapse; background: transparent; }
thead { background: rgba(0, 34, 24, .22); }
thead th {
  padding: 11px 13px;
  border-bottom: 1px solid var(--rule-strong);
  color: #89aa9c;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .10em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody td { padding: 12px 13px; border-bottom: 1px solid rgba(178, 228, 206, .14); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: rgba(90, 240, 189, .07); }
tbody tr.dept td {
  padding: 13px;
  background: rgba(0, 30, 21, .30);
  color: #dff9ee;
}
td button + button { margin-left: 6px; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 15px;
  border-radius: 16px;
  background-color: var(--rule);
}
.fact { min-width: 0; padding: 14px 17px; background: rgba(16, 74, 54, .42); }
.fact dt { margin: 0 0 5px; color: #7fa092; font-size: 9.5px; font-weight: 720; letter-spacing: .10em; text-transform: uppercase; }
.fact dd { margin: 0; color: #ebfff7; font: 13px/1.3 var(--mono); overflow-wrap: anywhere; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: rgba(221, 255, 241, .06);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.pill.high, .pill.takt { border-color: rgba(90,240,189,.31); background: rgba(90,240,189,.12); color: #73f4c6; }
.pill.low { border-color: rgba(187,217,205,.16); background: rgba(187,217,205,.06); color: #91aa9f; }
.pill.off { border-color: rgba(255,113,131,.28); background: rgba(255,113,131,.10); color: #ff9aaa; }
/* Lampor i live trackern. Tre tillstånd, aldrig två: grön vet vi, röd vet vi,
   grå vet vi inte. Okänt får aldrig se ut som ett stopp. */
.lamp { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
        border: 1px solid var(--rule-strong); background: rgba(145,170,159,.18); }
.lamp.big { width: 20px; height: 20px; }
.lamp.on { background: var(--mint); border-color: var(--mint-strong);
           box-shadow: 0 0 10px rgba(90,240,189,.55); }
.lamp.off { background: var(--red); border-color: var(--red);
            box-shadow: 0 0 10px rgba(255,113,131,.45); }
.lamp.unknown { background: rgba(166,146,255,.30); border-color: rgba(166,146,255,.45); }
/* Tabellen är bred och läses radvis. Fasta bredder via colgroup, talen
   högerställda mot sin lampa och lamporna centrerade i sin kolumn — annars
   hamnar siffran i mitten av ett tomt fält långt från det den beskriver. */
/* Åtta kolumner behöver plats. Under minimibredden scrollar .wrap i stället
   för att tränga ihop tal och inmatningsfält till oläslighet. */
.tracker-table { table-layout: fixed; min-width: 1080px; }
.tracker-table td, .tracker-table th { vertical-align: middle; white-space: nowrap; }
/* Tätt inom en signal, luft mellan signalerna. Kolumnerna som hör till takten
   respektive tillgängligheten läses som block; utan mellanrummet blir det åtta
   likvärdiga kolumner och blicken får leta. */
.tracker-table td, .tracker-table tbody th { padding-left: 7px; padding-right: 7px; }
.tracker-table thead tr:last-child th { padding-left: 7px; padding-right: 7px; }
.tracker-table .grp-start { padding-left: 26px !important; border-left: 1px solid var(--rule); }
.tracker-table td:first-child { padding-left: 15px; }
.tracker-table tr > *:last-child { padding-right: 15px; }
/* Grupprubriken hör ihop med raden under och ska inte läsas som en egen rad. */
.tracker-table .group-head th { padding: 9px 7px 3px; border-bottom: 0;
                                color: var(--muted); font-size: 10.5px;
                                letter-spacing: .10em; text-align: left; }
.tracker-table .group-head th.grp { color: var(--mint); }
.tracker-table th.mid, .tracker-table td.mid { text-align: center; }
.tracker-table td:first-child { white-space: normal; }
.tracker-table td:first-child > div:first-child { font-weight: 620; }
.tracker-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tracker-table tbody tr { transition: background .18s ease; }
.tracker-table tbody tr:hover { background: rgba(226,255,243,.035); }
.timeout-box { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.tracker-table tr.is-online td:first-child { box-shadow: inset 3px 0 0 var(--mint-strong); }
.tracker-table tr.is-online { background: rgba(90,240,189,.045); }
.tracker-table tr.is-offline td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.timeout-input { width: 74px; padding: 5px 7px; text-align: right;
                 font: 12px var(--mono); color: var(--ink);
                 background: var(--field); border: 1px solid var(--rule);
                 border-radius: 7px; }
.timeout-input.bad-input { border-color: var(--red); }

.pill.warn { border-color: rgba(255,198,109,.30); background: rgba(255,198,109,.11); color: var(--amber); }
.pill.unknown { border-color: rgba(166,146,255,.28); background: rgba(166,146,255,.10); color: var(--violet); }
/* Maskindokumentation. Ett kort per maskin: läst överst, antecknat under. */
.doc-card { padding: 16px 18px; margin-bottom: 12px; }
.doc-card.editing { border-color: var(--mint-strong); }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between;
            gap: 14px; margin-bottom: 12px; }
.doc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn { padding: 4px 10px; font-size: 14px; line-height: 1.4; }
.doc-read { margin-bottom: 10px; }
.doc-table th, .doc-table td { padding: 7px 11px; }
/* Inställningsraden under kanaltabellen: fem lika breda kolumner, alltid
   samma uppsättning. Tomt fält lämnar sin plats tom i stället för att låta
   grannarna breda ut sig — då går raderna att jämföra mellan maskiner. */
.doc-fixed { grid-template-columns: repeat(5, minmax(0, 1fr));
             margin: 0 0 12px; }
.doc-fixed dd { min-height: 17px; }
@media (max-width: 1100px) { .doc-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .doc-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Talen i kanaltabellen läses uppifrån och ned mot sin rubrik, inte mot
   tabellens högerkant. Monospace behålls — siffrorna ska stå i linje. */
.doc-table td.num, .doc-table th.num { text-align: left; }
.doc-table th { text-align: left; }
.doc-empty { margin: 4px 0 0; font-style: italic; }
.doc-toggle { display: flex; align-items: center; gap: 8px; width: 100%;
              margin: 2px 0 0; padding: 9px 12px; border-radius: 10px;
              background: var(--surface-soft); border: 1px solid var(--rule);
              color: var(--mint); font: inherit; text-align: left; }
.doc-toggle:hover { background: var(--surface); }
.doc-toggle-pil { font-size: 11px; opacity: .8; }
/* Montörens texter läses som ett protokoll: etikett över, text under. */
.doc-text { margin-top: 10px; }
.doc-text-label { color: #7fa092; font-size: 9.5px; font-weight: 720;
                  letter-spacing: .10em; text-transform: uppercase;
                  margin-bottom: 3px; }
.doc-text p { margin: 0; padding: 9px 12px; border-radius: 10px;
              background: var(--surface-soft); white-space: pre-wrap; }
.doc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 16px; margin-top: 4px; }
.doc-form .field { min-width: 0; }
.doc-form .field.wide { grid-column: 1 / -1; }
.doc-form textarea { width: 100%; padding: 9px 11px; border-radius: 10px;
                     background: var(--field); color: var(--ink);
                     border: 1px solid var(--rule); font: 13px var(--sans);
                     resize: vertical; }
.doc-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 900px) { .doc-form { grid-template-columns: 1fr; } }

.dept-head { margin: 22px 0 8px; color: var(--muted); font-size: 11.5px;
             font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }

.flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 7px 0;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mint);
  border-radius: 7px 12px 12px 7px;
  background: rgba(167, 218, 195, .08);
  color: #cfe3da;
  font-size: 12px;
}
.flag.bad { border-left-color: var(--red); }
.flag.warn { border-left-color: var(--amber); }
.flag.info { border-left-color: var(--mint); }
.flag .ts { flex: 0 0 auto; color: var(--muted); }

.rssi { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; border-radius: 2px; background: rgba(207,239,225,.18); }
.bars i:nth-child(1) { height: 5px; }
.bars i:nth-child(2) { height: 8px; }
.bars i:nth-child(3) { height: 11px; }
.bars i:nth-child(4) { height: 14px; }
.bars.lit-1 i:nth-child(-n+1), .bars.lit-2 i:nth-child(-n+2),
.bars.lit-3 i:nth-child(-n+3), .bars.lit-4 i:nth-child(-n+4) { background: var(--mint); }
.bars.weak i { background: var(--amber) !important; }

/* Pekarmarkör i signalgrafen. Linjen ska läsas mot kurvan utan att dölja den. */
.hover-line { stroke: var(--mint); stroke-width: 1; opacity: .55;
              stroke-dasharray: 3 3; pointer-events: none; }
.hover-box { fill: rgba(1, 27, 19, .92); stroke: rgba(172, 224, 201, .31);
             stroke-width: 1; pointer-events: none; }
.hover-text { fill: var(--ink); font: 11px var(--mono); pointer-events: none; }
figure svg { cursor: crosshair; user-select: none; }
/* Markering vid dragzoom. Genomskinlig nog att kurvorna syns igenom. */
.zoom-band { fill: rgba(93, 218, 174, .12); stroke: var(--mint); stroke-width: 1;
             stroke-opacity: .6; pointer-events: none; }
.zoom-box { fill: rgba(1, 27, 19, .92); stroke: rgba(172, 224, 201, .31);
            stroke-width: 1; pointer-events: none; }
.zoom-text { fill: var(--ink); font: 11px var(--mono); pointer-events: none; }
/* Ingen kontakt är inte svag signal. Egen färg, aldrig gul. */
.bars.dead i { background: rgba(255, 113, 131, .22) !important; }
.bars.dead i:nth-child(-n+1) { background: var(--red) !important; }
.dead-num { color: var(--red); }
.rssi + .dead-num { text-align: right; margin-top: 2px; }

/* ---------------------------------------------------------------- grafik */

figure { margin: 0 0 18px; padding: 18px; border-radius: 16px; overflow: hidden; }
figure svg { display: block; width: 100%; min-width: 520px; }
figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; }
.trace { fill: none; stroke: var(--violet); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.trace.b { stroke: var(--mint); }
.trace.unknown { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 4; }
.axis { stroke: rgba(194, 229, 214, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axis-text { fill: #8fa89e; font: 10px var(--mono); }
.step-up { fill: var(--mint); }
.step-down { fill: var(--amber); }
.live-edge { stroke: rgba(90,240,189,.48); stroke-dasharray: 2 3; }

/* ---------------------------------------------------------------- formulär */

.customer-form { padding: 18px; border-radius: 16px; }
.customer-form .row:last-child { margin-bottom: 0; }

/* Klasserna används av den återställda kund- och enhetsvyn. */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.customer-card {
  position: relative;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(123,184,157,.20), rgba(91,162,132,.13));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.customer-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -55px;
  bottom: -85px;
  border-radius: 50%;
  background: rgba(90,240,189,.11);
  filter: blur(15px);
  pointer-events: none;
}
.customer-card.active { border-color: rgba(90,240,189,.43); }
.customer-card h3 { margin: 7px 0 3px; font-size: 18px; }
.customer-url { min-height: 34px; overflow-wrap: anywhere; }
.customer-stats { display: flex; gap: 28px; margin: 13px 0; }
.customer-stat strong { display: block; font: 700 20px/1 var(--mono); }
.customer-stat span { color: var(--muted); font-size: 10px; }
.customer-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; }
.customer-actions button { margin: 0; }

.overview-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(182, 229, 207, .06);
}
.overview-tools .field { flex: 1 1 260px; margin: 0; }
.overview-tools .field.sort { flex: 0 1 260px; }
.overview-count { margin-left: auto; padding: 9px 4px; color: var(--muted); font-size: 11px; }

.flank-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.flank-controls .sub { margin-right: 4px; }
.flank-controls button { min-height: 31px; padding: 4px 10px; }

.live-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 18px;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
.live-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 9px rgba(90,240,189,.8);
}
.live-channel-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(128,190,162,.20), rgba(82,154,124,.12));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.live-channel-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
}
.signal-lamp-box {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 1px solid rgba(172,224,201,.24);
  border-radius: 18px;
  background: rgba(0,34,24,.82);
  box-shadow: inset 0 4px 18px rgba(0,0,0,.24);
}
.live-channel-copy { min-width: 0; }
.live-channel-copy h3 { margin: 0 0 2px; font-size: 14px; }
.live-channel-copy p { margin: 7px 0 0; overflow-wrap: anywhere; }
.live-level { display: block; color: #b6cec3; font-size: 17px; letter-spacing: .02em; }
.live-channel-card.high .live-level { color: var(--mint); }
.live-channel-card figure {
  min-width: 0;
  margin: 0;
  padding: 14px;
  background: rgba(133,190,165,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.signal-lamp {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid rgba(218,245,233,.25);
  border-radius: 50%;
  background: #173a2e;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.signal-lamp.high {
  border-color: #a7ffe0;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(90,240,189,.95), 0 0 24px rgba(90,240,189,.55);
}
.signal-lamp.unknown { background: #53675f; }
.live-trace { stroke: var(--mint); stroke-width: 2; }
.live-log-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}
.live-log-heading h3 { margin: 0; }
.live-empty td { padding-block: 22px; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .customer-card, .wrap, figure { animation: rise .28s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(5px); } }
}

@media (max-width: 900px) {
  .shell { display: block; }
  .rail {
    position: relative;
    width: 100%;
    height: auto;
    padding: 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .views { display: grid; grid-template-columns: repeat(2, 1fr); }
  .actions { margin-top: 0; }
  .view-head, .pad { padding-left: 22px; padding-right: 22px; }
  .live-channel-card { grid-template-columns: 1fr; }
  .toolbar-group.flank-controls { margin-left: 0; }
}

@media (max-width: 560px) {
  .views { grid-template-columns: 1fr; }
  .view-head { padding-top: 23px; }
  .pad { padding: 20px 14px 50px; }
  .customer-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-count { width: 100%; margin: 0; }
  .machine-toolbar, .toolbar-group { align-items: stretch; }
  .toolbar-group { width: 100%; flex-wrap: wrap; }
  .toolbar-group .field { flex: 1 1 100%; }
  .flank-count { width: 100%; margin-left: 0; }
}

/* Parad Grabber: knappen visar ett bekräftat läge, inte en uppmaning. */
button.paired {
  border-color: rgba(90, 240, 189, .34);
  background: var(--mint-soft);
  color: var(--mint);
}

/* Grabber parad mot en maskin vars övriga Grabbers sitter i en annan grupp. */
tbody tr.mismatch td { box-shadow: inset 3px 0 0 var(--red); }

/* Kanteffekt: strukturell avvikelse vid fönstrets kant, inte ett räknefel. */
tbody tr.edge td { opacity: .62; }

/* ---------------------------------------------------------------- inloggning och roller */

/* Allt bakom inloggningen är dolt tills servern bekräftat sessionen. */
body[data-auth="pending"] .shell,
body[data-auth="out"] .shell { display: none; }
body[data-auth="in"] .auth-screen { display: none; }
body[data-auth="pending"] .auth-card { visibility: hidden; }

/* En kundanvändare ser inte det som bara hör till oss. Servern avvisar
   anropen ändå — det här är för att inte visa knappar som inte fungerar. */
body[data-role="user"] .su-only { display: none !important; }

.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.auth-card {
  width: min(420px, 100%);
  padding: 26px 24px 22px;
  border-radius: 20px;
}
.auth-card .brand { margin-bottom: 18px; }
.auth-form h2 { margin: 0 0 12px; font-size: 18px; }
.auth-form .field input { width: 100%; }
.auth-form > button { width: 100%; margin-top: 4px; }
.auth-msg { min-height: 1.2em; margin: 4px 0 8px; color: var(--amber); font-size: 12.5px; }
.auth-msg.ok { color: var(--mint); }
button.link {
  min-height: 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:hover { background: none; color: var(--ink); }

#pwDialog {
  width: min(420px, calc(100% - 32px));
  padding: 22px 22px 16px;
  border-radius: 18px;
  color: var(--ink);
}
#pwDialog::backdrop { background: rgba(0, 12, 8, .6); }
#pwDialog .field input { width: 100%; }

.user-box {
  margin-top: auto;
  border: 1px solid var(--rule);
  border-radius: 15px;
  padding: 13px;
  background: rgba(211, 255, 236, .035);
}
.user-box strong { display: block; margin: 1px 0 2px; font-size: 14px; }
.user-actions { display: flex; gap: 6px; }
.user-actions button { flex: 1; padding: 6px 8px; font-size: 12px; }

.users-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 12px;
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.users-form .field input, .users-form .field select { width: 100%; }
.users-form .actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .users-form { grid-template-columns: 1fr; } }
.invite-link {
  font-family: var(--mono);
  font-size: 11.5px;
  word-break: break-all;
  user-select: all;
}
.role-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--muted);
}
.role-tag.su { border-color: rgba(166, 146, 255, .5); color: var(--violet); }
.doc-retired { border-left: 3px solid var(--amber); }

/* Ögat i lösenordsfälten. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
}
.pw-eye:hover { background: rgba(90, 240, 189, .1); color: var(--ink); }
.pw-eye:active { transform: translateY(-50%); }
.pw-eye[aria-pressed="true"] { color: var(--mint); }

/* ---------------------------------------------------------------- Refinery (steg 2) */

.trace.refinery { stroke: var(--amber); }
.trace.refinery.unknown { stroke: var(--faint); stroke-dasharray: 4 4; }
.ref-label { fill: var(--amber); }
.ref-mark { fill: var(--amber); stroke: var(--bg-deep); stroke-width: 1.5; }
.ref-mark.diag { fill: var(--red); }
.ref-expected { stroke: var(--violet); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ref-toggle { display: inline-flex; gap: 6px; align-items: center; margin-left: 12px;
  color: var(--muted); font-size: 12.5px; }
.ref-toggle input { width: auto; min-height: 0; }
.refinery-section { border-left: 3px solid var(--amber); padding-left: 12px; }
tr.ref-diag td { background: rgba(255, 113, 131, .06); }
.refinery-card .signal-lamp.high { background: var(--amber); box-shadow: 0 0 18px rgba(255, 198, 109, .5); }
.refinery-card .live-trace { stroke: var(--amber); }
pre.invite-link { white-space: pre-wrap; margin: 8px 0; }
.invite-box strong { display: block; margin-bottom: 4px; }
.invite-box button { margin-top: 8px; }
.user-refinery { grid-column: 1 / -1; color: var(--ink); margin: 2px 0 6px; }