/* ─────────────────────────────────────────────────────────────
   Garantidelar – 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); }


/* === MEJLLÄGESREMSA & MEDDELANDEN === */
.paus{
  background: #fef3c7; border-bottom: 1px solid #fcd34d; color: #78350f;
  padding: .6rem 1.5rem; font-size: .9rem;
}
.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; }

/* Radmarkering: en färgad kant till vänster, lätt tonad bakgrund. */
.vmc-table tbody tr{ box-shadow: inset 4px 0 0 transparent; }
.vmc-table tbody tr.rad-rod{ box-shadow: inset 4px 0 0 var(--vmc-red); background: #fff7f8; }
.vmc-table tbody tr.rad-gul{ box-shadow: inset 4px 0 0 #f59e0b; background: #fffbeb; }
.vmc-table tbody tr.rad-orange{ box-shadow: inset 4px 0 0 #ea580c; background: #fff7ed; }
.rad-rod .kol-dagar{ color: var(--vmc-red-dark); }
.rad-gul .kol-dagar{ color: #92400e; }
.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; }

/* === RÄKNARE === */
.raknare-rad{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem;
  margin-bottom: 1.25rem;
}
.raknare{
  position: relative; display: flex; flex-direction: column; gap: .2rem;
  background: var(--bg-card); border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1rem 1.15rem 1rem 1.35rem; text-decoration: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  overflow: hidden;
}
.raknare::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.raknare:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.raknare.is-vald{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.raknare-tal{ font-size: 2rem; font-weight: 800; color: var(--vmc-blue); line-height: 1.1; font-variant-numeric: tabular-nums; }
.raknare-namn{ font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.raknare-rod{ --accent: var(--vmc-red); --accent-ring: rgba(196,30,58,.15); }
.raknare-rod .raknare-tal{ color: var(--vmc-red); }
.raknare-bla{ --accent: var(--vmc-blue-btn); --accent-ring: rgba(2,132,199,.15); }
.raknare-gra{ --accent: #94a3b8; --accent-ring: rgba(148,163,184,.25); }
.raknare-orange{ --accent: #ea580c; --accent-ring: rgba(234,88,12,.15); }
@media (max-width: 900px){ .raknare-rad{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
@media (max-width: 640px){
  .raknare{ padding: .7rem .8rem .7rem 1rem; }
  .raknare-tal{ font-size: 1.5rem; }
  .raknare-namn{ font-size: .78rem; }
}

/* === SÖKRAD === */
.sokrad{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.sokrad .sokfalt{ flex: 1 1 18rem; min-width: 0; }
@media (max-width: 640px){
  .sokrad .sokfalt{ flex-basis: 100%; }
  .sokrad select{ flex: 1 1 auto; min-width: 0; }
}

/* === SIDHUVUDETS MEJLVÄXEL === */
.vmc-nav-form{ display: inline-flex; margin: 0 .25rem; }
.vaxel{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--border-solid); background: var(--bg-card-2);
  color: var(--text-soft); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.vaxel:hover{ background: var(--bg-hover); }
.vaxel-prick{ width: .55rem; height: .55rem; border-radius: 50%; background: #94a3b8; }
.vaxel.is-pa{ background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.vaxel.is-pa .vaxel-prick{ background: var(--vmc-green); }

/* === 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; }

/* === DELSIDAN === */
.del-layout{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
@media (max-width: 900px){ .del-layout{ grid-template-columns: 1fr; } }
.uppgifter{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; margin: 0; }
.uppgifter dt{ font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.uppgifter dd{ margin: .15rem 0 0; font-weight: 500; }
.atgarder{ display: flex; flex-direction: column; gap: .8rem; }
.atgarder .panel-title{ margin-bottom: 0; }
.atgard{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.atgard .input{ flex: 1 1 12rem; min-width: 0; }
.atgard .input-kort{ flex: 0 0 5rem; }
.atgard-radera{ margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--border-solid); }
.bekrafta{ display: flex; gap: .5rem; align-items: center; width: 100%; font-size: .85rem; color: #92400e; }
.handelser{ list-style: none; margin: 0; padding: 0; }
.handelser li{
  display: grid; grid-template-columns: 9.5rem 11rem 1fr; gap: .25rem 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--bg-card-2); font-size: .9rem;
}
.handelser li:last-child{ border-bottom: none; }
.h-tid{ color: var(--text-muted); font-variant-numeric: tabular-nums; }
.h-typ{ font-weight: 600; color: var(--vmc-blue); }
.h-text{ grid-column: 3; color: var(--text-soft); }
@media (max-width: 640px){
  .uppgifter{ grid-template-columns: 1fr 1fr; }
  .handelser li{ grid-template-columns: 1fr; }
  .h-text{ grid-column: 1; }
  .vmc-title .titel-chip{ display: inline-block; margin: .3rem 0 0; }
}

/* === ADMIN === */
.markeslista{ list-style: none; margin: 0 0 1rem; padding: 0; }
.markeslista li{ border-bottom: 1px solid var(--bg-card-2); }
.markesrad{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .55rem 0; }
.markesnamn{ flex: 1 1 8rem; font-weight: 600; }
.inline-falt{ display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-soft); }
.inline-falt .input-kort{ width: 5.5rem; }
.markesrad-ny{ padding-top: 1rem; }
.markesrad-ny .input:not(.input-kort){ flex: 1 1 12rem; min-width: 0; }
.mejlform{ max-width: 36rem; }
.mitt-mejl{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-solid); }
.adminrad-info{ margin-bottom: .5rem; }
.sidindelning{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin: 1rem 0; }

/* === BETALNING DIREKT I TABELLEN === */
.betald-form{ margin: 0; }
.input-sm{ padding: .3rem .45rem; font-size: .85rem; width: auto; min-width: 9.5rem; }
.betald-val{ cursor: pointer; background: var(--bg-card); }
.betald-val:hover{ border-color: var(--vmc-blue-btn); }