/* Admin: samma ramverk som appen (sidomeny + sida på papper). */
html, body { height: 100%; }
body.admin { font-size: 15px; }
.gate { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.gatebox { width: min(420px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: 32px 30px 28px; }
.gatebox h1 { font-size: 34px; margin-bottom: 4px; }
.gatebox h1 small { font: 600 11px/1 var(--sans); font-variant: all-small-caps; letter-spacing: .12em; color: var(--ink3); margin-left: 6px; }
.gatebox .btn { width: 100%; margin-top: 6px; }
.gatebox .error { margin: 12px 0 0; color: var(--signal); }
.signal { color: var(--signal); }

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.sidebar { background: var(--sheet); border-right: 1px solid var(--rule); padding: 24px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; }
.sidebar .brand { font: 600 22px/1 var(--serif); padding: 0 12px 24px; }
.sidebar .brand small { display: block; font: 600 11px/1.6 var(--sans); font-variant: all-small-caps; color: var(--ink3); letter-spacing: .08em; margin-top: 6px; }
.navitem { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 3px; text-decoration: none; }
.navitem .sq { width: 8px; height: 8px; background: var(--hue); }
.navitem:hover { background: var(--well); }
.navitem[aria-current="page"] { background: var(--hue-wash); font-weight: 600; }
.sidebar .footer { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--rule); display: grid; gap: 4px; justify-items: start; font-size: 13px; }
.page { padding: 28px clamp(18px, 3vw, 40px) 60px; max-width: 1180px; width: 100%; }

.pagehead { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 22px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pagehead h1 { font-size: 34px; margin: 0; }
.pagehead .when { margin-left: auto; color: var(--ink3); font-size: 13px; }
.sectionhead { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin: 30px 0 14px; }
.sectionhead h2 { font-size: 20px; margin: 0; }
.sectionhead .note { color: var(--ink3); font-size: 13px; margin-left: auto; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { border-left: 3px solid var(--hue, var(--ink)); background: var(--hue-wash, var(--well)); padding: 12px 14px 10px; display: grid; gap: 2px; }
.tile .label { font: 600 11px/1.4 var(--sans); font-variant: all-small-caps; letter-spacing: .06em; color: var(--hue, var(--ink2)); }
.tile .value { font-family: var(--figure); font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; }
.tile .sub { color: var(--ink3); font-size: 12px; }

.chart { background: var(--sheet); border: 1px solid var(--rule); padding: 14px 16px 8px; }
.chart h3 { margin: 0 0 6px; font-size: 15px; font-family: var(--sans); font-weight: 600; }
.chart svg { width: 100%; height: 160px; display: block; overflow: visible; }
.chart .axis { fill: var(--ink3); font: 11px var(--sans); }
.chart .line { fill: none; stroke: var(--hue, var(--ink)); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--hue, var(--ink)); opacity: .12; }
.chart .bar { fill: var(--hue, var(--ink)); opacity: .85; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ledger th { text-align: left; font: 600 11px/1.4 var(--sans); font-variant: all-small-caps; letter-spacing: .06em; color: var(--ink3); border-bottom: 1px solid var(--ink); padding: 6px 8px; }
table.ledger td { border-bottom: 1px solid var(--rule); padding: 7px 8px; vertical-align: top; }
table.ledger td.num, table.ledger th.num { text-align: right; font-family: var(--figure); font-weight: 600; font-variant-numeric: tabular-nums; }
table.ledger tr:hover td { background: var(--well); }
/* Sorterbara rubriker i kundlistan */
table.ledger th.sortable button { all: unset; cursor: pointer; font: 600 11px/1.4 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .06em; color: inherit; white-space: nowrap; }
table.ledger th.sortable.num { font-family: var(--sans); }
table.ledger th.sortable button:hover, table.ledger th.sortable.on button { color: var(--ink); }
table.ledger th.sortable button:focus-visible { outline: 2px solid var(--ink3); outline-offset: 2px; border-radius: 2px; }
table.ledger td.storage { white-space: nowrap; min-width: 110px; }
table.ledger.customers td:last-child { white-space: nowrap; }
table.ledger td.storage small { display: block; font-weight: 400; font-family: var(--sans); }
.sbar { display: block; height: 3px; margin: 4px 0 2px auto; background: var(--rule); border-radius: 2px; overflow: hidden; }
.sbar i { display: block; height: 100%; margin-left: auto; background: var(--ochre); border-radius: 2px; }
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar-cell i { display: block; height: 8px; background: var(--hue, var(--ink)); min-width: 2px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type=search] { flex: 1; min-width: 220px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 9px 12px; }
.empty { color: var(--ink3); padding: 30px 0; text-align: center; }
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--ink3); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; word-break: break-all; }
code { font-family: var(--mono); font-size: 13px; background: var(--well); padding: 1px 5px; border-radius: 3px; }
.privacy { border-left: 3px solid var(--teal); background: var(--teal-wash); padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar .brand { padding: 0 12px; width: 100%; }
  .sidebar .footer { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; }
  .charts { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}
.gatebox hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0 14px; }
.gatebox form { margin-top: 10px; }
#pk-label { min-width: 220px; }

/* ───── Mer information (2026-11-02): tratt, liggande staplar, kolumner, mätare, varningar */
.navbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--signal); color: var(--sheet); font: 600 11px/18px var(--sans); text-align: center; }
.warnlink { display: block; border-left: 3px solid var(--signal); background: var(--signal-wash); padding: 10px 14px; margin: 0 0 18px; font-size: 14px; color: var(--signal); text-decoration: none; }
.warnlink:hover { text-decoration: underline; }
.warnings { border-left: 3px solid var(--signal); background: var(--signal-wash); padding: 8px 16px; margin: 0 0 20px; }
.warnings p { margin: 6px 0; color: var(--signal); font-size: 14px; }
.notice.ok { border-left: 3px solid var(--positive); background: var(--positive-wash); padding: 10px 14px; margin: 0 0 20px; color: var(--positive); }

.funnel, .hbars { display: grid; gap: 6px; }
.fstep, .hbar { display: grid; grid-template-columns: minmax(150px, 230px) 1fr minmax(120px, auto); align-items: center; gap: 12px; font-size: 14px; }
.ft, .ht { height: 14px; background: var(--well); display: block; }
.ft i, .ht i { display: block; height: 100%; background: var(--hue, var(--ink)); opacity: .85; }
.fv, .hv { font-family: var(--figure); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fv small, .hv small { font-family: var(--sans); font-weight: 400; color: var(--ink3); font-size: 12px; margin-left: 4px; }
.hl, .fl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar { grid-template-columns: minmax(110px, 180px) 1fr minmax(60px, auto); }

.cols { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 6px; }
.col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.col i { display: block; width: 100%; background: var(--hue, var(--ink)); opacity: .85; min-height: 1px; }
.col span { font: 10px var(--sans); color: var(--ink3); margin-top: 4px; white-space: nowrap; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin: 6px 0 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; background: var(--hue); display: inline-block; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.three .sectionhead { margin-top: 24px; }

.meters { display: grid; gap: 10px; margin-bottom: 16px; }
.meter { display: grid; grid-template-columns: 170px 1fr 52px; gap: 4px 12px; align-items: center; font-size: 14px; }
.meter .mt { height: 10px; background: var(--well); display: block; }
.meter .mt i { display: block; height: 100%; background: var(--positive); }
.meter.warn .mt i { background: var(--ochre); }
.meter.attention .mt i { background: var(--signal); }
.meter .mv { font-family: var(--figure); font-weight: 600; text-align: right; }
.meter small { grid-column: 2 / 4; color: var(--ink3); font-size: 12px; }

.toolbar .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink2); }
.charts + .charts { margin-top: 14px; }

@media (max-width: 820px) {
  .two, .three { grid-template-columns: 1fr; }
  .fstep, .hbar { grid-template-columns: 1fr; gap: 3px; }
  .meter { grid-template-columns: 1fr 52px; }
  .meter .ml { grid-column: 1 / 3; }
  .meter small { grid-column: 1 / 3; }
}

/* ───── Betalningar, intäkter och promo-konton (2026-11-04) */
.customers td.plan { white-space: nowrap; }
.customers td.plan .btn.underline { text-decoration: none; padding: 0; }
.customers td.plan small { display: block; margin-top: 2px; }
#plan-filter, .promo-form input[type=email], .promo-form input[type=text], .promo-form input[type=date] { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; font: inherit; color: inherit; }
.promo-form { display: grid; gap: 12px; max-width: 640px; }
.promo-form > label { display: grid; gap: 4px; font-size: 14px; color: var(--ink2); }
.promo-form fieldset { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.promo-form legend { font-size: 14px; color: var(--ink2); padding: 0 4px; }
.promo-form .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.promo-form .quick { display: inline-flex; gap: 10px; font-size: 13px; }
.promo-actions { white-space: nowrap; }
.custbill { border: 1px solid var(--rule); border-left: 3px solid var(--teal); background: var(--sheet); padding: 14px 18px; margin: 0 0 20px; }
.custbill h2 { font-size: 18px; margin: 0; }
.custbill h3 { font-size: 15px; margin: 18px 0 6px; }
.custbill .pagehead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }

/* Kundkort: anteckningar och supportlogg */
.note-form { display: grid; gap: 8px; max-width: 720px; margin-bottom: 14px; }
.note-form label { display: grid; gap: 4px; }
.note-form .note-contact:not(label) { display: flex; gap: 12px; flex-wrap: wrap; }
.note-form .note-contact[hidden] { display: none; }
.note-form textarea, .mail-form textarea { width: 100%; font: inherit; }
ul.notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.notes li { border-left: 3px solid var(--rule); padding: 6px 12px; background: var(--well); }
.note-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.note-actions { margin-left: auto; }
.note-text, .note-done { margin: 6px 0 0; white-space: pre-wrap; }
/* Kvarstannande */
.scroll { overflow-x: auto; }
table.retention td.ret { color: var(--ink); }
table.retention td.ret-100, table.retention td.ret-90 { background: color-mix(in srgb, var(--moss) 34%, transparent); }
table.retention td.ret-80, table.retention td.ret-70 { background: color-mix(in srgb, var(--moss) 24%, transparent); }
table.retention td.ret-60, table.retention td.ret-50 { background: color-mix(in srgb, var(--moss) 14%, transparent); }
table.retention td.ret-40, table.retention td.ret-30 { background: color-mix(in srgb, var(--ochre) 14%, transparent); }
table.retention td.ret-20, table.retention td.ret-10, table.retention td.ret-0 { background: color-mix(in srgb, var(--rose) 12%, transparent); }
table.retention tr.avg td { border-top: 1px solid var(--ink); font-weight: 600; }
/* Utskick och SIE */
.mail-form { display: grid; gap: 10px; max-width: 760px; }
.mail-form label { display: grid; gap: 4px; }
.mail-form label.days[hidden] { display: none; }
.mail-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.mail-form fieldset legend { font-weight: 600; margin-bottom: 4px; }
td.nowrap { white-space: nowrap; }
.sie-export .toolbar label { display: inline-flex; gap: 6px; align-items: center; }
.mail-form label.check, .note-form label.check { display: inline-flex; gap: 6px; align-items: center; }

/* Loggen per kund, felrapporter och fel i appen */
table.eventlog td { vertical-align: top; }
table.eventlog tr.lvl-error td { background: var(--signal-wash); }
table.eventlog tr.lvl-debug td { color: var(--ink3); }
table.eventlog b { font-weight: 600; }
.nowrap { white-space: nowrap; }
.tiles.small .tile .value { font-size: 26px; }
.bugcard { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 22px; margin: 12px 0 18px; }
.bugcard h3 { margin: 10px 0 4px; font-size: 13px; font-variant: all-small-caps; letter-spacing: 0.05em; color: var(--ink3); }
.bugcard h3:first-child { margin-top: 0; }
.bugcard p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.bugshots { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bugshots img { max-width: 360px; max-height: 240px; border-radius: 10px; border: 1px solid var(--rule); background: var(--well); }
.errbars { display: flex; gap: 4px; align-items: flex-end; height: 120px; margin: 8px 0 18px; }
.errbars .eb { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; min-width: 6px; max-width: 48px; }
.errbars .eb > i { min-height: 0; }
.errbars { border-bottom: 1px solid var(--rule); }
.errbars .eb i { align-self: end; display: block; background: var(--signal); border-radius: 4px 4px 0 0; }
.errbars .eb span { font-size: 10px; color: var(--ink3); text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
table.bughunt tr.hot td { background: var(--signal-wash); }
table.bughunt td b { font-weight: 600; }
table.ledger code { white-space: nowrap; }