/* Saporio plattform.
   Vår egen konsol, inte en restaurangs. Mörk sidomeny och sval, nästan grå
   palett — den ska kännas som ett annat rum än admin, så att ingen någonsin
   är osäker på vilken sida hen tittar på. Samma typografi och samma luftrum
   som admin: det här ska vara igenkännbart Saporio, inte ett annat program. */

:root {
  --blek: #f5f5f4;
  --papper: #ffffff;
  --kant: #e4e4e7;
  --text: #18181b;
  --dampad: #71717a;
  --primar: #1e293b;
  --bakgrund-meny: #12161f;
  --meny-text: #a1a8b8;
  --gron: #15803d;
  --gron-bakgrund: #dcfce7;
  --rod: #b91c1c;
  --rod-bakgrund: #fee2e2;
  --radie: 12px;
  --skugga: 0 1px 2px rgba(24, 24, 27, .05), 0 8px 24px rgba(24, 24, 27, .04);
}

* { box-sizing: border-box; }

/* Måste stå före klassreglerna nedan: en klassregel med display vinner annars
   över webbläsarens egen [hidden] { display: none } och lämnar kvar något som
   koden tror att den gömt. Samma rad finns i admin.css och shop.css. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--blek);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-weight: 600; letter-spacing: -.015em; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; margin-bottom: .5rem; }
a { color: inherit; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--blek);
  border: 1px solid var(--kant);
  border-radius: 6px;
  padding: .1em .4em;
}

.dampad { color: var(--dampad); }
.hjalptext { display: block; color: var(--dampad); font-size: .8rem; }

/* ---------------------------------------------------------------- struktur */

.skal { display: flex; min-height: 100vh; }

.sidomeny {
  width: 230px;
  flex: 0 0 230px;
  background: var(--bakgrund-meny);
  color: var(--meny-text);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.marke { display: flex; align-items: center; gap: .7rem; padding: 0 .5rem; }
.marke .prick {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  /* Märket är två färger och ingen bildfil: konsolen ska ladda utan att be om
     en enda extra resurs. */
  background: linear-gradient(140deg, #e11d48, #7c2d12);
  flex: 0 0 auto;
}
.marke strong { display: block; font-size: .95rem; color: #fff; }
.marke span { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.marke.stor { justify-content: center; margin-bottom: 1.5rem; }

.sidomeny nav { display: flex; flex-direction: column; gap: 2px; }
.sidomeny nav a {
  padding: .55rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}
.sidomeny nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidomeny nav a.aktiv { background: #fff; color: var(--bakgrund-meny); }

.utloggning {
  margin-top: auto;
  padding: 0 .75rem;
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-start;
  word-break: break-all;
}

main { flex: 1; padding: 2rem 2.5rem 4rem; max-width: 1300px; min-width: 0; }

.sidhuvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ paneler */

.panel {
  background: var(--papper);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.panelhuvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

/* Talen överst. Fyra kort som ska gå att läsa på en sekund — därför stort
   tal, liten etikett över och förklaringen under, aldrig tvärtom. */
.talrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tal {
  background: var(--papper);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
  padding: 1.1rem 1.25rem;
}
.tal .etikett {
  display: block;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dampad);
}
.tal strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: .15rem 0 .2rem;
  font-variant-numeric: tabular-nums;
}
.tal.varning strong { color: var(--rod); }

/* ------------------------------------------------------------------ tabeller */

/* Vågrät scroll i behållaren och inte i sidan: en tabell med tio kolumner ska
   inte kunna skjuta ut hela layouten på en smal skärm. */
.tabellsvep { overflow-x: auto; margin: 0 -.5rem; padding: 0 .5rem; }

.tabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabell th, .tabell td { padding: .7rem .6rem; text-align: left; vertical-align: top; }
.tabell thead th {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dampad);
  font-weight: 600;
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}
.tabell tbody tr { border-bottom: 1px solid var(--kant); }
.tabell tbody tr:last-child { border-bottom: none; }
.tabell tbody tr:hover { background: var(--blek); }
.tabell tfoot th {
  border-top: 2px solid var(--kant);
  padding-top: .8rem;
  font-size: .85rem;
}
.tabell .hoger { text-align: right; }
.tabell .tal-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabell .namn { font-weight: 600; text-decoration: none; }
.tabell .namn:hover { text-decoration: underline; }
.tabell .dampad-rad td { opacity: .55; }
.tabell form { display: inline; }

.marker {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--blek);
  border: 1px solid var(--kant);
  color: var(--dampad);
  white-space: nowrap;
}
.marker.gron { background: var(--gron-bakgrund); border-color: transparent; color: var(--gron); }
.marker.rod { background: var(--rod-bakgrund); border-color: transparent; color: var(--rod); }

/* Loggen på restaurangsidan: en rad per händelse, tidpunkten först i egen
   spalt så att ögat kan följa den nedåt. */
.logg { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.logg li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .2rem .8rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--kant);
}
.logg li:last-child { border-bottom: none; }
.logg .tid { color: var(--dampad); font-variant-numeric: tabular-nums; }
.logg .hjalptext { grid-column: 2; }

/* ---------------------------------------------------------------- formulär */

label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .9rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="month"],
input[type="number"] {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .7rem;
  font: inherit;
  color: inherit;
  background: var(--papper);
  border: 1px solid var(--kant);
  border-radius: 8px;
}
input:focus-visible {
  outline: 2px solid var(--primar);
  outline-offset: 1px;
  border-color: var(--primar);
}

/* Formuläret för avtalat pris. Fälten på en rad så länge det får plats: de
   hör ihop till en enda mening — så mycket, från då, så länge, därför. */
.formrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 1rem;
  align-items: end;
  margin: 1rem 0 1.5rem;
}
.formrad label.bred { grid-column: 1 / -1; }
.formrad button { margin-bottom: .9rem; }

.falt-med-enhet { position: relative; display: block; }
.falt-med-enhet span {
  position: absolute;
  right: .7rem;
  bottom: .55rem;
  color: var(--dampad);
  font-size: .85rem;
}
.falt-med-enhet input { padding-right: 2.2rem; }

.periodval { display: flex; align-items: end; gap: .6rem; }
.periodval label { margin-bottom: 0; }
.periodval input { margin-top: .2rem; }

.knapprad { display: flex; gap: .5rem; }

.knapp {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--kant);
  background: var(--papper);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knapp:hover { background: var(--blek); }
.knapp.primar { background: var(--primar); border-color: var(--primar); color: #fff; }
.knapp.primar:hover { background: #0f172a; }
.knapp.bred { width: 100%; text-align: center; }
/* Avstängningen. Röd därför att den syns hos någon annan direkt efter trycket
   — det är den enda knappen i konsolen som ändrar vad en gäst ser. */
.knapp.fara { background: var(--rod); border-color: var(--rod); color: #fff; }
.knapp.fara:hover { background: #991b1b; }

/* Kontaktkortet: uppgifterna om restaurangen, satta som ett register och inte
   som en talrad — det är strängar att läsa och ringa, inte siffror att jämföra. */
.uppgifter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
  margin: 1rem 0 1.5rem;
}
.uppgifter .etikett {
  display: block;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dampad);
}
.uppgifter strong { display: block; font-weight: 600; margin: .15rem 0 .1rem; }
.uppgifter .hjalptext { margin: 0; }

.panel.avstangd { border-color: var(--rod); }
.skallista { margin: 0; padding-left: 1.1rem; }
.skallista li { margin-bottom: .35rem; }

.lank {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--dampad);
  text-decoration: underline;
  cursor: pointer;
}
.lank:hover { color: var(--text); }

.notis {
  padding: .7rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.25rem;
  font-size: .9rem;
}
.notis.ok { background: var(--gron-bakgrund); color: var(--gron); }
.notis.fel { background: var(--rod-bakgrund); color: var(--rod); }
/* Ett besked som varken är ett kvitto eller ett fel. Egen ton med flit: rött
   för "månaden är inte slut än" skickar någon att leta efter ett fel. */
.notis.info { background: #eef1f6; color: var(--primar); }
.notis.info a { color: inherit; }

/* ------------------------------------------------------- sidor utan meny */

.ensamsida {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bakgrund-meny);
  padding: 2rem 1rem;
}
.ensam { width: 100%; max-width: 380px; }
.ensam .notis { text-align: center; }

.kort {
  background: var(--papper);
  border-radius: var(--radie);
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.kort h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.kort > .dampad { font-size: .88rem; margin: 0 0 1.5rem; }
.kort button { margin-top: .5rem; }

/* Aktiveringen behöver rymma en QR-kod, resten av korten en kolumn text. */
.brett { max-width: 380px; }
.ensam:has(.brett) { max-width: 440px; }

.qr {
  background: #fff;
  border: 1px solid var(--kant);
  border-radius: 10px;
  padding: .75rem;
  margin: 0 auto 1rem;
  width: max-content;
}
.qr svg { display: block; width: 200px; height: 200px; }

.hemlighet { display: inline-block; margin-top: .3rem; word-break: break-all; }

.kodfalt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.2rem;
  letter-spacing: .18em;
  text-align: center;
}

.backupkoder {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--blek);
  border: 1px solid var(--kant);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  text-align: center;
}

.avbryt { text-align: center; margin-top: 1.25rem; }
.avbryt .lank { color: var(--meny-text); }

@media (max-width: 800px) {
  .skal { flex-direction: column; }
  .sidomeny { width: 100%; flex: none; gap: 1rem; }
  .sidomeny nav { flex-direction: row; flex-wrap: wrap; }
  .utloggning { margin-top: 0; flex-direction: row; align-items: center; gap: .75rem; }
  main { padding: 1.5rem 1.25rem 3rem; }
}

/* Panelen som öppnar någon annans konto ska inte se ut som en panel bland
   andra. Kanten är markering nog — en varningsfärg hade sagt att något är fel,
   och det är det inte: det är en handling som ska kännas. */
.panel.supportpanel { border-left: 3px solid var(--primar); }


/* ----------------------------------------------------------------- statistik */

/* Två diagram utan diagrambibliotek. Sidan har inget byggsteg och ska inte
   hämta hem 90 kB javascript för att rita tolv rektanglar — höjden är en
   procentsats i style-attributet och resten är CSS. Det gör dem dessutom
   utskrivbara och läsbara utan skript påslaget. */

.kurva {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  min-width: 520px;
  height: 220px;
  padding-top: 1.4rem;
}

.stapelplats {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 34px;
}

/* Andelen står ovanför stapeln och inte i den: en siffra inuti en stapel blir
   oläslig så fort stapeln är låg, och det är just de låga månaderna man tittar
   närmast på. */
.stapelplats .andel {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--dampad);
  margin-bottom: .3rem;
}

.stapelplats .stapel {
  width: 100%;
  min-height: 2px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  background: var(--primar);
  display: flex;
  flex-direction: column;
}

/* Disken ovanpå, online underst. Ordningen är inte godtycklig: online är det
   som ska växa, och en botten som stiger är lättare att se än ett mellanskikt
   som rör sig. */
.stapelplats .stapel .disk { width: 100%; background: #cbd5e1; }
.stapelplats .stapel .online { flex: 1; }

.stapelplats .manad {
  font-size: .72rem;
  color: var(--dampad);
  margin-top: .35rem;
  text-transform: capitalize;
}
.stapelplats .volym {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Den månad som pågår ritas ofärdig med flit. Utan markeringen läses den
   halva månaden som ett fall. */
.stapelplats.pagaende .stapel { opacity: .55; }
.stapelplats.pagaende .manad::after { content: " •"; }

/* Gnistan i tabellen: samma diagram i miniatyr, en rad per restaurang. */
.gnista {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  min-width: 120px;
}
.gnista .glugg {
  flex: 1 1 0;
  min-width: 6px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.gnista .stapel {
  width: 100%;
  min-height: 1px;
  background: var(--primar);
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  display: block;
}
.gnista .stapel .disk { display: block; width: 100%; background: #cbd5e1; }
.gnista .glugg.pagaende .stapel { opacity: .55; }

/* En månad utan ordrar ritar ingenting. Med en minsta höjd blev tolv tomma
   månader en streckad linje tvärs över kolumnen, och en streckad linje ser ut
   som ett fel — inte som frånvaro. */
.gnista .glugg.tom .stapel { display: none; }

/* Förändringstalen. Grönt för mer online och rött för mindre — men bara på
   texten, aldrig som enda bärare: siffran har alltid sitt tecken. */
.upp { color: var(--gron); font-weight: 600; }
.ner { color: var(--rod); font-weight: 600; }

.listrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Varje panel så hög som sitt innehåll. Utan det sträcks en tom lista —
     vilket "Minskar mest" ofta är, och gärna ska vara — till samma höjd som
     den fulla bredvid, och tomrummet läses som något som inte laddat. */
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.listrad .panel { margin-bottom: 0; }

.topp { list-style: none; margin: 1rem 0 0; padding: 0; }
.topp li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--kant);
  font-size: .9rem;
}
.topp li:last-child { border-bottom: none; }
.topp .hjalptext { grid-column: 1 / -1; margin-top: .15rem; }
.topp .tal-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Förklaringen under listorna ligger på sidans bakgrund och inte på ett vitt
   kort — och --dampad mot #f5f5f4 är 4.4:1, precis under gränsen. Överallt
   annars i konsolen står hjälptexten på papper där samma färg klarar 4.8:1.
   Egen, mörkare ton här i stället för att flytta hela paletten. */
.golvnot { color: #5c5c66; }