/* The same look as Nianso Order (its public/styles.css), for the few parts Control has. */
:root { color-scheme: light; --ink:#173b50; --text:#243c47; --muted:#586873; --line:#d8e1e5; --paper:#fff; --wash:#f2f6f8; --accent:#246c59; --accent-dark:#185642; --soft:#e9f3ee; --field:#7a8b93; --focus:#b06f00; --danger:#a52631; --danger-soft:#fff0ec; --warning:#b27b21; --warning-ink:#6b4400; --warning-soft:#fff4df; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--text); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.masthead { max-width:1280px; margin:auto; padding:24px 48px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:22px; font-weight:750; letter-spacing:-.6px; }
.brand-logo { height:44px; width:auto; }
.brand-text { display:block; }
.brand-sub { display:block; font-size:12px; font-weight:500; color:var(--muted); letter-spacing:0; }
main { max-width:1184px; margin:auto; padding:24px 24px 60px; }
h1 { color:var(--ink); font-size:clamp(32px,4vw,48px); line-height:1.07; letter-spacing:-1.5px; margin:24px 0 12px; font-weight:750; }
h2 { margin:0; font-size:21px; letter-spacing:-.5px; color:var(--ink); }
.spaced { margin-top:40px; }
.help,.footnote { color:var(--muted); font-size:14px; }
.footnote { margin-top:48px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:24px 0 16px; }
.section-heading>span { color:var(--muted); font-size:13px; }
.login { max-width:420px; }
.login form { display:grid; gap:8px; margin-top:16px; }
.login label { font-weight:600; font-size:14px; margin-top:8px; }
.login input { padding:12px; min-height:46px; border:1px solid var(--field); border-radius:5px; }
.primary { margin-top:16px; background:var(--accent); color:#fff; border:0; border-radius:6px; padding:12px 20px; min-height:46px; font-weight:650; }
.primary:hover { background:var(--accent-dark); }
.text-button { background:none; border:0; color:var(--ink); text-decoration:underline; text-underline-offset:4px; padding:8px; }
.message { padding:12px 16px; border-radius:6px; }
.message-error { background:var(--danger-soft); color:var(--danger); }
table.data { width:100%; border-collapse:collapse; font-size:15px; }
table.data th { text-align:left; color:var(--muted); font-size:13px; font-weight:600; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); }
table.data td { padding:14px 12px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.data td:nth-child(3) { font-variant-numeric:tabular-nums; white-space:nowrap; }
.state { display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:650; white-space:nowrap; }
.state-ok { background:var(--soft); color:var(--accent-dark); }
.state-warning { background:var(--warning-soft); color:var(--warning-ink); }
.state-down { background:var(--danger-soft); color:var(--danger); }
.disk { margin-top:12px; height:14px; background:var(--wash); border-radius:7px; overflow:hidden; border:1px solid var(--line); }
.disk-bar { height:100%; border-radius:7px 0 0 7px; }
.disk-bar.state-ok { background:var(--accent); }
.disk-bar.state-warning { background:var(--warning); }
.disk-bar.state-down { background:var(--danger); }
@media (max-width:700px) {
  .masthead { padding:16px 20px; }
  main { padding:16px 16px 48px; }
  table.data thead { display:none; }
  table.data tr { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--line); }
  table.data td { border:0; padding:0; }
  table.data td:nth-child(4) { grid-column:1 / -1; color:var(--muted); font-size:14px; }
}

/* Tabs, as in Nianso Order's Admin. */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; margin:8px 0 24px; }
.tab { padding:12px 14px; min-height:44px; font-weight:600; color:var(--muted); white-space:nowrap; text-decoration:none; border-bottom:3px solid transparent; }
.tab[aria-current=page] { color:var(--ink); border-bottom-color:var(--ink); }

/* The shared pieces the panels from Nianso Order use (its styles.css). */
.muted { color:var(--muted); font-size:13px; }
.section-lead { color:var(--muted); font-size:14px; margin:6px 0 0; max-width:70ch; }
.badge { color:var(--accent); background:var(--soft); padding:4px 9px; border-radius:4px; font-size:12px; }
.status-cancelled { color:var(--danger); background:#f8e6e3; }
.secondary { min-height:46px; padding:10px 18px; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-radius:5px; font-weight:600; }
.secondary:hover:not(:disabled) { background:var(--wash); }
.secondary.small { min-height:38px; padding:6px 12px; font-size:14px; }
.danger,.text-button.danger { color:var(--danger); }
.danger-button { background:var(--danger); }
.row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.row-actions .primary { width:auto; margin:0; }
.form-field { display:block; margin:0; min-width:130px; flex:1; font-weight:600; font-size:14px; }
.form-field input { display:block; margin-top:8px; width:100%; min-height:44px; padding:10px; border:1px solid var(--field); border-radius:5px; font-weight:400; }
.success { padding:14px; background:var(--soft); color:var(--accent-dark); border-left:3px solid var(--accent); }
.help { color:var(--muted); font-size:14px; }
.certificate-status { max-width:760px; padding:18px 22px; margin:16px 0 28px; border:1px solid var(--line); border-left:5px solid var(--ink); background:var(--paper); }
.certificate-status h2 { margin:0 0 10px; }
.certificate-status--good { border-left-color:#287a57; }
.certificate-status--soon { border-left-color:#ae7517; }
.certificate-status--urgent { border:2px solid var(--danger); border-left-width:7px; background:#fff5f3; }
.certificate-alert { padding:12px 14px; margin:16px 0 0; background:#fff0dc; color:#713d0a; border-left:4px solid #ae7517; font-weight:600; }
.confirm-dialog { max-width:440px; border:1px solid var(--line); border-radius:8px; padding:22px; }
.confirm-dialog::backdrop { background:#173b5066; }

.whatsapp-link { max-width: 42rem; }
.whatsapp-link form { display: grid; gap: .8rem; max-width: 25rem; }
.whatsapp-link form label { display: grid; gap: .4rem; }
.whatsapp-pair-code { display: block; width: max-content; max-width: 100%; margin: 1rem 0; padding: .65rem 1rem; border: 2px solid currentColor; border-radius: .5rem; font-size: clamp(1.5rem, 7vw, 2.5rem); letter-spacing: .2em; overflow-wrap: anywhere; }

/* Säkerhetskopior and Print-versioner (moved from Nianso Order) */
.backups { max-width:760px; }
.backups>h3 { margin:28px 0 8px; }
.backup-destination { margin:10px 0; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.backup-destination-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.backup-destination h4 { margin:0; font-size:17px; color:var(--ink); }
.backup-destination p { margin:6px 0 0; }
.backup-destination .row-actions { justify-content:flex-start; margin-top:10px; }
.backup-ok { color:var(--accent-dark); font-weight:600; }
.backup-add { margin:20px 0; padding:12px 16px; border:1px dashed var(--field); border-radius:8px; }
.backup-add summary { cursor:pointer; color:var(--ink); font-weight:650; padding:6px 0; }
.backup-add .row-actions { justify-content:flex-start; margin:10px 0; }
.backup-form { display:grid; gap:12px; margin-top:12px; }
.backup-form .row-actions .primary { width:auto; margin:0; }
.backup-form ul.help { margin:0; padding-left:18px; }
.backup-token { margin:12px 0; padding:14px; border:2px solid var(--accent); border-radius:8px; background:var(--soft); }
.backup-token code { display:block; margin:8px 0; padding:10px; overflow-wrap:anywhere; background:#fff; border:1px solid var(--line); border-radius:4px; font-size:14px; }

.check { display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:14px; }
.check input { margin-top:4px; }