/* ─────────────────────────────────────────────────────────────
   Motorbytet – VMC light theme
   Samma färger/typsnitt som bargad, Kuggen och verkstad
   ───────────────────────────────────────────────────────────── */

:root{
  /* ── Bas ── */
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-2: #f1f5f9;
  --bg-hover: #e8edf2;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #475569;
  --border-solid: #e2e8f0;

  /* ── VMC-färger ── */
  --vmc-blue: #002b45;
  --vmc-blue-mid: #1e3a5f;
  --vmc-blue-btn: #0284c7;
  --vmc-blue-btn-hover: #0369a1;
  --vmc-blue-light: #38bdf8;
  --vmc-red: #c41e3a;
  --vmc-red-dark: #b30000;
  --vmc-green: #28a745;

  /* ── Tokens ── */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --header-h: 64px;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ background: var(--bg); margin: 0; }
h1, h2, p, dl, dd{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button, input, select{ font-family: inherit; }
button{ cursor: pointer; }
body{
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* === SIDHUVUD === */
.vmc-header{
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
}
.vmc-brand{
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--vmc-blue);
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}
.vmc-nav{ display: flex; align-items: center; gap: .25rem; min-width: 0; }
.vmc-nav-link{
  color: var(--vmc-blue);
  padding: .45rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s;
}
.vmc-nav-link:hover{ background: var(--bg-hover); }
.vmc-nav-link.is-active{ background: var(--bg-card-2); font-weight: 600; }
.vmc-nav-user{
  color: var(--text-muted);
  font-size: .9rem;
  padding: 0 .6rem;
  max-width: 16rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px){
  .vmc-header{ height: auto; flex-wrap: wrap; gap: .25rem; padding: .6rem 1rem .4rem; }
  .vmc-brand{ font-size: 1.15rem; }
  .vmc-nav{ width: 100%; margin-left: -.55rem; flex-wrap: wrap; row-gap: .15rem; }
  .vmc-nav-user{ display: none; }
  .vmc-nav-link{ padding: .4rem .55rem; font-size: .9rem; }
}

/* === SIDANS INNEHÅLL === */
.vmc-main{
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
@media (max-width: 640px){ .vmc-main{ padding: 1rem 1rem 2rem; } }

.vmc-toolbar{
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
}
.vmc-title{
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--vmc-blue);
  margin-right: auto;
}

/* === KNAPPAR & FÄLT === */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-solid);
  background: #fff;
  color: var(--vmc-blue);
  font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover{ background: var(--bg-hover); }
.btn-primary{ background: var(--vmc-blue-btn); border-color: var(--vmc-blue-btn); color: #fff; }
.btn-primary:hover{ background: var(--vmc-blue-btn-hover); border-color: var(--vmc-blue-btn-hover); }
.btn-dark{ background: var(--vmc-blue); border-color: var(--vmc-blue); color: #fff; }
.btn-dark:hover{ background: var(--vmc-blue-mid); border-color: var(--vmc-blue-mid); }
.btn-danger{ border-color: #f3c2ca; color: var(--vmc-red); }
.btn-danger:hover{ background: var(--vmc-red); border-color: var(--vmc-red); color: #fff; }
.btn-sm{ padding: .3rem .6rem; font-size: .8rem; }

.input{
  padding: .5rem .8rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .9rem;
  color: var(--text);
}
.input:focus{
  outline: none;
  border-color: var(--vmc-blue-btn);
  box-shadow: 0 0 0 3px rgba(2,132,199,.15);
}

/* === YTOR (arkiv/admin) === */
.panel{
  background: var(--bg-card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.panel-title{ font-size: 1.05rem; font-weight: 700; color: var(--vmc-blue); margin-bottom: .75rem; }
.vmc-table th{
  text-align: left;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-solid);
}
.vmc-table td{ border-bottom: 1px solid var(--bg-card-2); }
.vmc-table tbody tr:hover{ background: var(--bg); }


/* === MEDDELANDEN === */
.flash{
  padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
  border: 1px solid var(--border-solid); background: var(--bg-card);
}
.flash-fel{ background: #fef2f2; border-color: #f3c2ca; color: var(--vmc-red-dark); }
.flash-ok{ background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.svag{ color: var(--text-muted); }

/* === INLOGGNING & TOMMA SIDOR === */
.login-kort, .tom-sida{ max-width: 28rem; margin: 3rem auto; text-align: center; }
.login-kort .vmc-title{ margin-right: 0; margin-bottom: .5rem; }
.login-kort p{ margin-bottom: 1.5rem; }

/* === TABELL === */
.tabellpanel{ padding: 0; overflow: hidden; }
.vmc-table{ width: 100%; border-collapse: collapse; }
.vmc-table th, .vmc-table td{ padding: .7rem .85rem; text-align: left; vertical-align: middle; }
.vmc-table th{ background: var(--bg-card-2); white-space: nowrap; }
.vmc-table td{ font-size: .9rem; white-space: nowrap; }
.vmc-table td[data-label="Status"], .vmc-table td[data-label="Notering"]{ white-space: normal; }
.vmc-table td a{ color: var(--vmc-blue); font-weight: 700; text-decoration: none; }
.vmc-table td a:hover{ text-decoration: underline; }
.vmc-table tbody tr:last-child td{ border-bottom: none; }
.kol-regnr{ font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.kol-dagar{ font-weight: 600; white-space: nowrap; }
.kol-atgard{ text-align: right; width: 1%; white-space: nowrap; }
.tom-rad td{ text-align: center; color: var(--text-muted); padding: 2.5rem 1rem; }

.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 640px){
  .tabellpanel{ background: none; border: none; box-shadow: none; overflow: visible; }
  .vmc-table thead{ display: none; }
  .vmc-table, .vmc-table tbody, .vmc-table tr{ display: block; width: 100%; }
  .vmc-table tr{
    display: grid; grid-template-columns: 1fr 1fr; column-gap: .75rem;
    background: var(--bg-card); border: 1px solid var(--border-solid);
    border-radius: var(--radius); margin-bottom: .75rem; padding: .7rem .9rem;
    box-shadow: var(--shadow);
  }
  .vmc-table tbody tr.rad-rod, .vmc-table tbody tr.rad-gul, .vmc-table tbody tr.rad-orange{
    box-shadow: inset 4px 0 0 currentColor, var(--shadow);
  }
  .vmc-table tbody tr.rad-rod{ color: var(--vmc-red); }
  .vmc-table tbody tr.rad-gul{ color: #f59e0b; }
  .vmc-table tbody tr.rad-orange{ color: #ea580c; }
  .vmc-table td{ display: block; border-bottom: none; padding: .3rem 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
  .vmc-table td[data-label]::before{
    content: attr(data-label); display: block;
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
  }
  /* Status och regnr överst över hela bredden, utan etikett. */
  .vmc-table td[data-label="Status"], .vmc-table td[data-label="Regnr"]{ grid-column: 1 / -1; }
  .vmc-table td[data-label="Status"]::before, .vmc-table td[data-label="Regnr"]::before{ display: none; }
  .vmc-table td[data-label="Regnr"]{ order: -1; font-size: 1.15rem; padding-top: 0; }
  .vmc-table td{ white-space: normal; }
  .vmc-table td[data-label]:empty{ display: none; }
  .kol-atgard{ grid-column: 1 / -1; text-align: left; width: auto; }
  .kol-atgard:empty{ display: none; }
  .kol-atgard .btn{ width: 100%; padding: .55rem 1rem; font-size: .9rem; }
  .tom-rad{ display: block !important; }
  .tom-rad td{ grid-column: 1 / -1; }
}

/* === STATUSETIKETTER === */
.chip{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  border: 1px solid transparent;
}
.chip::before{ content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .85; }
.chip + .chip{ margin-left: .25rem; }
.chip-rod{ background: #fee2e2; color: var(--vmc-red-dark); border-color: #fecaca; }
.chip-gul{ background: #fef3c7; color: #92400e; border-color: #fde68a; }
.chip-orange{ background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.chip-gra{ background: var(--bg-card-2); color: var(--text-soft); border-color: var(--border-solid); }
.chip-bla{ background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.chip-klar{ background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.titel-chip{ vertical-align: middle; margin-left: .5rem; }
.titel-chip .chip{ font-size: .8rem; }

/* === FORMULÄR === */
.formular{ max-width: 52rem; }
.falt-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
@media (max-width: 640px){ .falt-grid{ grid-template-columns: 1fr; } }
.falt{ display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; min-width: 0; }
.falt label{ font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.falt .input{ width: 100%; padding: .6rem .8rem; font-size: .95rem; }
.knapprad{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.felruta, .varningsruta{
  border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: 1.1rem; font-size: .9rem;
}
.felruta{ background: #fef2f2; border: 1px solid #f3c2ca; color: var(--vmc-red-dark); }
.felruta ul{ margin: .4rem 0 0 1.1rem; }
.varningsruta{ background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.varningsruta p{ margin-top: .3rem; }
.kryssrutor{ list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kryssrutor label{
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  padding: .7rem .9rem; border: 1px solid var(--border-solid); border-radius: var(--radius-sm);
}
.kryssrutor input{ margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; }
.lokal-login{ margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-solid); text-align: left; }
.lokal-login .btn{ width: 100%; }
.liten{ font-size: .8rem; }


/* === PLANEN === */
.vmc-main{ max-width: 980px; }
.panel + .panel{ margin-top: 1rem; }
.vmc-toolbar + .panel, .oversikt + .panel{ margin-top: 0; }

.oversikt{ margin-bottom: 1rem; }
.oversikt-tal{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-bottom: .7rem; }
.oversikt-stort{ font-size: 2rem; font-weight: 800; color: var(--vmc-blue); font-variant-numeric: tabular-nums; line-height: 1; }
.matare{ height: .7rem; border-radius: 999px; background: var(--bg-card-2); overflow: hidden; }
.matare span{ display: block; height: 100%; background: var(--vmc-green); border-radius: inherit; transition: width .3s; }
.matare-liten{ height: .35rem; margin: .1rem 0 .6rem; }

.fas{ scroll-margin-top: calc(var(--header-h) + 1rem); }
.fas-huvud{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.fas-titel{ display: flex; align-items: center; gap: .6rem; min-width: 0; }
.fas-titel h2{ font-size: 1.15rem; font-weight: 700; color: var(--vmc-blue); overflow-wrap: anywhere; }
.fas-nr{
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vmc-blue); color: #fff; font-weight: 700; font-size: .85rem;
}
.fas-atgarder, .steg-atgarder{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fas-atgarder form, .steg-atgarder form, .bocka{ margin: 0; display: inline-flex; }

.ikonknapp{
  width: 2rem; height: 2rem; display: inline-grid; place-items: center;
  border: 1px solid var(--border-solid); border-radius: var(--radius-sm);
  background: #fff; color: var(--text-soft); font-size: .95rem; line-height: 1;
}
.ikonknapp:hover{ background: var(--bg-hover); color: var(--vmc-blue); }

.steglista{ list-style: none; margin: 0; padding: 0; }
.steg{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start;
  padding: .75rem .5rem; border-top: 1px solid var(--bg-card-2);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  border-radius: var(--radius-sm);
}
.steg:target{ background: #f0f9ff; }
.steg.is-forsenad{ box-shadow: inset 3px 0 0 var(--vmc-red); }
.steg-tom{ padding: .9rem .5rem; border-top: 1px solid var(--bg-card-2); font-size: .9rem; }
.steg-titel{ font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; padding-top: .2rem; }
.steg.is-klar .steg-titel{ color: var(--text-muted); text-decoration: line-through; text-decoration-color: #94a3b8; }
.steg-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .3rem; font-size: .83rem; color: var(--text-soft); }
.steg-meta:empty{ display: none; }
.meta-ansvarig::before{ content: "👤 "; }
.meta-klar{ color: #166534; }

.bock{
  width: 1.7rem; height: 1.7rem; padding: 0; flex: none;
  border: 2px solid #94a3b8; border-radius: 6px; background: #fff;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.bock svg{ width: 1.1rem; height: 1.1rem; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bock:hover{ border-color: var(--vmc-green); }
.bock:hover svg{ opacity: .35; stroke: var(--vmc-green); }
.bock[aria-pressed="true"]{ background: var(--vmc-green); border-color: var(--vmc-green); }
.bock[aria-pressed="true"] svg, .bock[aria-pressed="true"]:hover svg{ opacity: 1; stroke: #fff; }
.bock:focus-visible{ outline: 3px solid rgba(2,132,199,.35); outline-offset: 2px; }
.bock[disabled]{ opacity: .6; cursor: progress; }

.steg-beskrivning{ margin-top: .35rem; font-size: .88rem; }
.steg-beskrivning summary{ cursor: pointer; color: var(--vmc-blue-btn); font-weight: 500; width: max-content; }
.beskrivning-text{ white-space: pre-wrap; margin-top: .35rem; color: var(--text-soft); overflow-wrap: anywhere; }

.nytt-steg{ margin-top: .6rem; }
.nytt-steg > summary, .popup > summary{ list-style: none; }
.nytt-steg > summary::-webkit-details-marker, .popup > summary::-webkit-details-marker{ display: none; }
.nytt-steg[open] > summary{ margin-bottom: .8rem; }
.stegform{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.stegform .falt-bred{ grid-column: 1 / -1; }
.stegform textarea{ resize: vertical; font-family: inherit; }

.popup{ position: relative; }
.popup-kort{
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20;
  display: flex; gap: .4rem; padding: .6rem; width: min(22rem, 80vw);
  background: #fff; border: 1px solid var(--border-solid); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.popup-kort .input{ flex: 1; min-width: 0; }

.ny-fas-form{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ny-fas-form .panel-title{ margin: 0; }
.ny-fas-form .input{ flex: 1 1 14rem; min-width: 0; }

.smal{ max-width: 44rem; }
.skapad{ margin-top: 1rem; }
.kol-vad{ white-space: normal !important; }

@media (max-width: 640px){
  .steg{ grid-template-columns: auto minmax(0, 1fr); }
  .steg-atgarder{ grid-column: 2; }
  .stegform{ grid-template-columns: 1fr; }
  .popup-kort{ right: auto; left: 0; }
}