/* Berre's Bil og Båt, innholdsverktøy.
   Samme palett som nettsiden, men et roligere, tettere arbeidsbord. */

:root{
  --ink:#101F29;
  --ink-2:#1B3542;
  --sea:#153F52;
  --paper:#EDF0F1;
  --paper-2:#FFFFFF;
  --paper-3:#E2E7E9;
  --rorbu:#B3241D;
  --rorbu-dark:#8E1B15;
  --blue:#2C74B8;
  --gronn:#1F6B45;
  --line:rgba(16,31,41,.16);
  --muted:#54666F;
  --skygge:0 18px 40px -24px rgba(16,31,41,.45);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.adm{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
}
img{max-width:100%;display:block}
/* hidden-attributtet maa slaa gjennom uansett hva elementet ellers
   har av display. Uten !important vinner en vanlig display-regel,
   og elementet blir staaende synlig selv om det er satt hidden. */
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- knapper ---------- */
.adm-knapp{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.02em;
  padding:10px 18px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.adm-knapp--hoved{background:var(--rorbu);color:#fff}
.adm-knapp--hoved:hover{background:var(--rorbu-dark)}
.adm-knapp--enkel{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.adm-knapp--enkel:hover{border-color:var(--ink-2)}
.adm-knapp--fare{background:var(--rorbu);color:#fff}
.adm-knapp--fare:hover{background:var(--rorbu-dark)}
.adm-knapp--liten{padding:6px 12px;font-size:.8rem}
.adm-knapp[disabled]{opacity:.55;cursor:default}

/* ---------- felt ---------- */
/* align-content:start maa staa. Uten den strekkes rutenettet inni feltet
   til hoyden paa raden, og selve inntastingsfeltet vokser med. Da ble felt
   uten hjelpetekst 68 px hoye mens felt med hjelpetekst ble 43 px, i samme
   rad, og boksene sto i fire ulike hoyder ved siden av hverandre. */
.adm-felt{display:grid;gap:6px;margin-bottom:1rem;align-content:start}
.adm-felt label,.adm-gruppe__merkelapp{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.adm-felt input[type=text],
.adm-felt input[type=password],
.adm-felt input[type=email],
.adm-felt select,
.adm-felt textarea{
  font-family:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper-2);color:var(--ink);width:100%;
  /* Lik linjehoyde paa input og select. Uten den blir select 2 px hoyere
     enn input, og de staar ikke helt likt ved siden av hverandre. */
  line-height:1.2;
}
/* Fast hoyde paa enlinjefeltene. select regner ut hoyden sin selv og ble
   litt hoyere enn input uansett linjehoyde, saa de sto ikke helt likt naar
   de sto side om side. box-sizing er border-box, saa 44 px er hele boksen. */
.adm-felt input[type=text],
.adm-felt input[type=password],
.adm-felt input[type=email],
.adm-felt select{height:44px}
.adm-felt textarea{resize:vertical;min-height:96px;line-height:1.55}
.adm-felt__hjelp{font-size:.83rem;color:var(--muted);margin:0}
.adm-av{display:flex;align-items:center;gap:10px;margin-bottom:1rem;cursor:pointer;font-size:.95rem}
.adm-av input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}
.adm-feil{
  background:#FBECEB;border-left:3px solid var(--rorbu);color:var(--rorbu-dark);
  padding:11px 14px;border-radius:var(--r);font-size:.92rem;margin:0 0 1rem;
}

/* ---------- innlogging ---------- */
.logg{min-height:100vh;display:grid;place-items:center;padding:24px}
.logg__kort{
  width:100%;max-width:420px;background:var(--paper-2);border:1px solid var(--line);
  border-top:3px solid var(--rorbu);border-radius:var(--r);padding:clamp(26px,4vw,40px);box-shadow:var(--skygge);
}
.logg__logo{width:auto;height:34px;margin-bottom:1.8rem}
.logg h1{font-size:1.5rem;margin-bottom:.5rem}
.logg__hjelp{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem}
.logg__kort .adm-knapp{width:100%;justify-content:center;margin-top:.4rem}
.logg__retur{margin:1.6rem 0 0;text-align:center;font-size:.9rem}
.logg__retur a{color:var(--muted)}

/* ---------- topplinje ---------- */
.adm-topp{
  position:sticky;top:0;z-index:20;background:var(--paper-2);border-bottom:1px solid var(--line);
}
.adm-topp__inn{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:14px clamp(16px,3vw,28px);
}
.adm-topp__logo{width:auto;height:28px}
.adm-topp__tittel{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid var(--line);
}
.adm-status{margin-left:auto;font-size:.88rem;color:var(--muted);min-height:1.2em}
.adm-status--endret{color:var(--rorbu);font-weight:600}
.adm-status--lagret{color:var(--gronn);font-weight:600}

/* ---------- faner ---------- */
.adm-faner{
  display:flex;gap:2px;overflow-x:auto;background:var(--paper-2);
  border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,28px);
}
.adm-faner__inn{display:flex;gap:2px;max-width:1240px;margin:0 auto;width:100%}
.adm-fane{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.88rem;
  background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);
  padding:14px 16px;cursor:pointer;white-space:nowrap;
}
.adm-fane:hover{color:var(--ink)}
.adm-fane[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--rorbu)}
.adm-fane__tall{
  display:inline-block;margin-left:7px;background:var(--paper-3);color:var(--muted);
  border-radius:20px;padding:1px 8px;font-size:.74rem;
}

/* ---------- innhold ---------- */
.adm-innhold{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,34px) clamp(16px,3vw,28px) 90px}
.adm-seksjon__hode{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.adm-seksjon__hode h2{font-size:1.5rem}
.adm-seksjon__hode p{color:var(--muted);font-size:.94rem;margin:.4rem 0 0;max-width:62ch}

.adm-tom{
  background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r);
  padding:40px 26px;text-align:center;color:var(--muted);
}
.adm-tom p{margin-bottom:1.2rem}

/* ---------- kort ---------- */
.adm-liste{display:grid;gap:16px}
.adm-kort{
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r);overflow:hidden;
}
.adm-kort--skjult{border-left-color:var(--muted);opacity:.72}
.adm-kort__hode{
  display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
  background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit;
}
.adm-kort__hode:hover{background:var(--paper)}
.adm-kort__navn{font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;flex:1;min-width:0}
.adm-kort__merke{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--muted);padding:3px 8px;border-radius:var(--r);
}
.adm-kort__merke--ny{background:var(--blue)}
.adm-kort__merke--solgt{background:var(--ink)}
.adm-kort__merke--reservert{background:var(--rorbu)}
.adm-kort__merke--skjult{background:var(--muted)}
.adm-kort__pil{color:var(--muted);font-size:.8rem;transition:transform .2s}
.adm-kort[open] .adm-kort__pil{transform:rotate(180deg)}
.adm-kort__kropp{padding:6px 16px 20px;border-top:1px solid var(--line)}
/* To faste kolonner, ikke auto-fit. auto-fit regnet ut kolonner fra
   bredden, ikke fra antall felt: paa 1148 px ble det fem kolonner, saa en
   rad med to felt sto igjen med tre tomme kolonner ved siden av seg.
   align-items:start hindrer at et felt strekkes til hoyeste felt i raden. */
.adm-rad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
.adm-kort__bunn{
  display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;margin-top:6px;border-top:1px solid var(--line);
}
.adm-kort__bunn .adm-knapp--fare{margin-left:auto}

/* ---------- bilder ---------- */
.adm-bilder{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem}
.adm-bilde{
  position:relative;width:112px;height:84px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper-3);
}
.adm-bilde img{width:100%;height:100%;object-fit:cover}
.adm-bilde__fjern{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:var(--r);
  background:rgba(16,31,41,.82);color:#fff;border:0;cursor:pointer;font-size:1rem;line-height:1;
}
.adm-bilde__fjern:hover{background:var(--rorbu)}
.adm-bilde__flytt{
  position:absolute;left:4px;bottom:4px;display:flex;gap:2px;
}
.adm-bilde__flytt button{
  width:22px;height:22px;border-radius:var(--r);background:rgba(16,31,41,.82);color:#fff;
  border:0;cursor:pointer;font-size:.72rem;line-height:1;padding:0;
}
.adm-bilde__flytt button:hover{background:var(--blue)}
.adm-last{
  width:112px;height:84px;border:1px dashed var(--line);border-radius:var(--r);background:var(--paper);
  color:var(--muted);cursor:pointer;display:grid;place-content:center;gap:2px;text-align:center;
  font-family:"Archivo",sans-serif;font-size:.76rem;font-weight:700;padding:6px;
}
.adm-last:hover{border-color:var(--blue);color:var(--blue)}
.adm-last input{display:none}
.adm-bilde--ett{width:100%;max-width:280px;height:auto;aspect-ratio:4/3}

/* ---------- pristabell ---------- */
.adm-prisrad{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:10px;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;
}
.adm-prisrad .adm-felt{margin:0}

/* ---------- dialog ---------- */
.adm-dialog{
  position:fixed;inset:0;z-index:60;background:rgba(8,16,22,.6);
  display:grid;place-items:center;padding:24px;
}
.adm-dialog[hidden]{display:none}
.adm-dialog__kort{
  background:var(--paper-2);border-radius:var(--r);padding:28px;max-width:420px;width:100%;
  box-shadow:var(--skygge);
}
.adm-dialog__kort h2{font-size:1.2rem;margin-bottom:.6rem}
.adm-dialog__kort p{color:var(--muted);font-size:.95rem}
.adm-dialog__knapper{display:flex;gap:10px;justify-content:flex-end;margin-top:1.4rem}

/* ---------- smått ---------- */
@media (max-width:720px){
  .adm-topp__tittel{display:none}
  .adm-topp__inn{gap:8px}
  .adm-topp__inn .adm-knapp{flex:1 1 auto;justify-content:center}
  .adm-status{width:100%;margin-left:0;order:5}
  .adm-prisrad{grid-template-columns:1fr}
  .adm-rad{grid-template-columns:1fr}
  .adm-kort__bunn .adm-knapp--fare{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}