/* ==========================================================================
   Beheeromgeving (restock.blooberr.nl/beheer)

   Bouwt op dezelfde tokens als de publieke site, zodat er één huisstijl is.
   De componenten verschillen wel: dit is een werkscherm dat je scant en
   bedient, geen pagina die je van boven naar beneden leest. Daarom compacter,
   met status die je in één oogopslag ziet.
   ========================================================================== */

* { box-sizing: border-box; }

/* ---- ondergrond ---------------------------------------------------------
   Dezelfde verlooplaag als de publieke site, zodat beide kanten van blooberr
   op hetzelfde papier staan. Wel statisch: de publieke site laat hem langzaam
   driften, maar dit is een werkscherm waar je de hele dag naar kijkt en dan
   wordt beweging vermoeiend. */

body::before {
  content: ""; position: fixed; inset: -8vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46vmax 46vmax at 18% 12%, rgb(var(--bes-600-rgb) / .13) 0%, rgb(var(--bes-600-rgb) / .06) 34%, transparent 72%),
    radial-gradient(52vmax 52vmax at 84% 8%, rgb(var(--bes-400-rgb) / .11) 0%, rgb(var(--bes-400-rgb) / .05) 34%, transparent 72%),
    radial-gradient(40vmax 40vmax at 74% 88%, rgb(var(--koraal-500-rgb) / .08) 0%, rgb(var(--koraal-500-rgb) / .04) 34%, transparent 72%),
    linear-gradient(180deg, var(--bes-50) 0, var(--vlak-zacht) 60%);
}

/* Korrel tegen banding, net als op de publieke site. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27r%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.1%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23r%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 220px 220px;
}

body {
  margin: 0;
  background: var(--vlak-zacht);
  color: var(--ink);
  min-height: 100vh;
  font-family: var(--font-tekst);
  font-size: var(--tekst-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-8);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-5);
}

h1, h2, h3 { font-family: var(--font-kop); letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: var(--tekst-xl); margin: 0 0 var(--ruimte-2); letter-spacing: -.02em; }
h3 { font-size: var(--tekst-lg); margin: 0 0 var(--ruimte-2); }
p { margin: 0 0 var(--ruimte-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--bes-700); }

:focus-visible { outline: 3px solid var(--bes-400); outline-offset: 2px; border-radius: var(--rond-sm); }

/* Licht dat de cursor volgt; eigen laag omdat de verlooplaag zelf beweegt. */
.cursor-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(26vmax 26vmax at var(--mx, 50%) var(--my, 35%),
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 32%,
    rgba(255,255,255,.08) 58%, rgba(255,255,255,0) 78%);
}
@media (hover: hover) and (pointer: fine) { .cursor-glow { opacity: 1; } }

/* ---- kop ---------------------------------------------------------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  font-family: var(--font-kop);
  font-size: var(--tekst-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}

.logo img { width: 32px; height: 32px; flex: none; }

/* Het bloobje wiebelt als je het aanwijst, net als op de publieke site. Zelfde
   keyframes, zodat de mascotte zich overal hetzelfde gedraagt. */
.logo:hover img { animation: bloob-wiebel .6s ease-in-out; }
@keyframes bloob-wiebel {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(-7deg) scale(1.06, .95); }
  65%      { transform: rotate(5deg) scale(.96, 1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover img { animation: none; }
}

.topnav { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap; }
.who { font-size: var(--tekst-sm); color: var(--ink-soft); }

/* ---- tabbladen ---------------------------------------------------------- */

.tabs {
  position: relative;
  display: flex;
  gap: var(--ruimte-1);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

/* Eén streep die meeschuift in plaats van drie die aan- en uitspringen. De
   beweging vertelt waar je vandaan kwam; een verspringend streepje niet. */
.tabs__streep {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: var(--rond-vol);
  background: linear-gradient(90deg, var(--bes-600), var(--bes-400));
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              width .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.tab-btn {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--ink-soft);
  padding: var(--ruimte-3) var(--ruimte-4);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--rond-sm) var(--rond-sm) 0 0;
  transition: color .15s ease, background-color .15s ease;
}

.tab-btn:hover { color: var(--ink); background: rgb(var(--bes-600-rgb) / .05); }

.tab-btn:hover { color: var(--ink); }

.tab-btn.is-active { color: var(--bes-700); }

.tab-panel { display: none; flex-direction: column; gap: var(--ruimte-5); }
.tab-panel.is-active { display: flex; }

/* ---- kaarten ------------------------------------------------------------ */

.card {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-5) var(--ruimte-6);
  box-shadow: var(--schaduw-2);
}

.card--center {
  max-width: 400px;
  margin: 10vh auto 0;
  text-align: left;
}

.subtitle { color: var(--ink-soft); font-size: var(--tekst-sm); margin-bottom: var(--ruimte-4); }
.hint { color: var(--ink-soft); font-size: var(--tekst-sm); }

.empty {
  color: var(--ink-faint);
  font-size: var(--tekst-sm);
  padding: var(--ruimte-5);
  text-align: center;
  border: 1px dashed var(--rand-sterk);
  border-radius: var(--rond-md);
}

/* ---- meldingen ---------------------------------------------------------- */

.alert {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--rond-md);
  font-size: var(--tekst-sm);
  border: 1px solid transparent;
}

.alert--ok { background: var(--ok-vlak); color: var(--ok-ink); border-color: var(--ok-ink); }
.alert--error { background: var(--koraal-100); color: var(--koraal-700); border-color: var(--koraal-700); }

/* ---- knoppen ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  height: var(--veld-h-sm);
  padding: 0 var(--ruimte-4);
  font: inherit;
  font-size: var(--tekst-sm);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--rond-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--bes-600); color: #fff; }
.btn--primary:hover { background: var(--bes-700); }

.btn--ghost { background: var(--vlak); color: var(--bes-700); border-color: var(--rand-sterk); }
.btn--ghost:hover { border-color: var(--bes-400); background: var(--bes-50); }

.btn--danger { background: var(--vlak); color: var(--koraal-700); border-color: var(--koraal-700); }
.btn--danger:hover { background: var(--koraal-100); }

/* ---- formulieren -------------------------------------------------------- */

/* Alle invoertypen die we gebruiken in één regel. Vergeet je er een, dan valt
   dat ene veld terug op de browserstandaard en steekt het scheef af tussen de
   rest; zo miste "search" hier eerder. */
input:is([type="text"], [type="url"], [type="password"], [type="number"],
         [type="email"], [type="search"]),
select {
  appearance: none;
  height: var(--veld-h-sm);
  padding: 0 var(--veld-pad-x);
  font: inherit;
  font-size: var(--veld-tekst);
  color: var(--ink);
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-sm);
  min-width: 0;
}

input::placeholder { color: var(--ink-faint); }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
input:hover, select:hover { border-color: var(--bes-400); }

.row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-4);
}

.row-form :is(input[type="url"], input[type="text"], input[type="search"]) { flex: 1 1 260px; }

.stack { display: flex; flex-direction: column; gap: var(--ruimte-4); margin-top: var(--ruimte-4); }
.stack label { display: flex; flex-direction: column; gap: var(--ruimte-2); font-size: var(--tekst-sm); font-weight: 600; }
.stack input { font-weight: 400; }
.stack .btn { height: var(--veld-h); }

.interval-field {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}

.interval-field input { width: 82px; }

/* ---- lijst met watches -------------------------------------------------- */

.watch-list { display: flex; flex-direction: column; margin-top: var(--ruimte-4); }

.watch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3) var(--ruimte-4);
  padding: var(--ruimte-4) 0;
  border-top: 1px solid var(--rand);
}

.watch:first-child { border-top: none; }
.watch--paused { opacity: .55; }

/* Status als gekleurde pil: in een werkscherm moet je dit kunnen scannen
   zonder te lezen. */
.watch__status {
  flex: 0 0 auto;
  font-size: var(--tekst-xs);
  font-weight: 600;
  padding: var(--ruimte-1) var(--ruimte-3);
  border-radius: var(--rond-vol);
  background: var(--vlak-zacht);
  color: var(--ink-soft);
  border: 1px solid var(--rand);
  white-space: nowrap;
}

/* Kleur is er om aandacht te sturen. "Niet op voorraad" is de toestand waarin
   vrijwel alles vrijwel altijd verkeert, dus die blijft grijs. Bestelbaar is
   het uitzonderlijke geval en krijgt als enige kleur. */
.status--in_stock {
  background: var(--ok-vlak);
  color: var(--ok-ink);
  border-color: var(--ok-ink);
  font-weight: 700;
}
.status--out_of_stock { background: var(--vlak-zacht); color: var(--ink-faint); }

.watch__main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-1); }

.watch__title {
  font-weight: 600;
  font-size: var(--tekst-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch__meta { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: center; }
.watch__actions { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

.chip {
  font-size: var(--tekst-xs);
  color: var(--ink-faint);
  background: var(--vlak-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--rond-vol);
  padding: 1px var(--ruimte-2);
  white-space: nowrap;
}

.chip--price { color: var(--ink); font-weight: 600; }
.chip--toggle { cursor: pointer; }

/* ---- logvenster --------------------------------------------------------- */

.logbox {
  margin-top: var(--ruimte-4);
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--rond-md);
  background: var(--vlak-zacht);
}

.logline {
  display: grid;
  grid-template-columns: 132px 68px 1fr;
  gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-bottom: 1px solid var(--rand);
  font-size: var(--tekst-xs);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.logline:last-child { border-bottom: none; }
.log-ts { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.log-level { font-weight: 600; text-transform: uppercase; color: var(--ink-soft); }
.log-msg { color: var(--ink-soft); word-break: break-word; }

.level--error .log-level { color: var(--koraal-700); }
.level--change .log-level { color: var(--ok-ink); }

/* ---- statistiek --------------------------------------------------------- */

/* Verhoudingsbalk onder een naam: de buitenste laag is de baan, de span
   erbinnen is het gevulde deel. De breedte komt uit de data, dus die staat
   als inline stijl in de template. */
.balk {
  height: 5px;
  width: 100%;
  max-width: 320px;
  background: var(--rand);
  border-radius: var(--rond-vol);
  overflow: hidden;
}

.balk span {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--bes-600);
  border-radius: var(--rond-vol);
}

/* Staafje per dag. De vaste hoogte op de rij is nodig omdat de staven hun
   hoogte in procenten krijgen. */
.dagen {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 128px;
  margin-top: var(--ruimte-4);
  overflow-x: auto;
  padding-bottom: var(--ruimte-2);
}

.dag {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 20px;
  flex: 0 0 auto;
  background: var(--vlak-zacht);
  border-radius: var(--rond-sm);
}

.dag span {
  display: block;
  width: 100%;
  min-height: 3px;
  background: var(--bes-400);
  border-radius: var(--rond-sm);
}

@media (max-width: 640px) {
  .page { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-7); }
  .row-form { flex-direction: column; align-items: stretch; }
  .row-form .btn, .row-form input { width: 100%; }
  .logline { grid-template-columns: 1fr; gap: 2px; }
  .card--center { margin-top: var(--ruimte-6); }
}

/* ---- aanvullingen -------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.chip--ok { background: var(--ok-vlak); color: var(--ok-ink); border-color: var(--ok-ink); }
.chip--warn { background: var(--wacht-vlak); color: var(--wacht-ink); border-color: var(--wacht-ink); }

.watch__url {
  font-size: var(--tekst-xs);
  color: var(--ink-faint);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.veld-rij { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

/* ---- overzicht van wat er draait ---------------------------------------- */

.scan-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--rond-md);
  overflow: hidden;
  margin-top: var(--ruimte-4);
}

.scan-cijfer {
  background: var(--vlak);
  padding: var(--ruimte-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scan-cijfer b {
  font-family: var(--font-kop);
  font-size: var(--tekst-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.scan-cijfer span { font-size: var(--tekst-xs); color: var(--ink-faint); }
.scan-cijfer--stil b { color: var(--ink-faint); }

.scan-cijfer__klein { font-size: var(--tekst-lg); }

/* Compacte keuzelijst naast een knop: hij hoeft alleen 'elke 5 minuten'
   te tonen, niet de halve rij op te eten. */
.watch__actions select { width: auto; min-width: 0; font-size: var(--tekst-xs); height: var(--veld-h-sm); padding-inline: var(--ruimte-2) 26px; background-position: right 8px center; }

/* ---- catalogus ----------------------------------------------------------
   Rustig houden: alleen wat je nog kúnt doen krijgt kleur. Wat je al volgt is
   grijs, want daar hoef je niets mee. Zestien groene labels naast elkaar
   schreeuwen allemaal even hard en dan zie je niets meer. */

.catalog-set { margin-top: var(--ruimte-6); }
.catalog-set:first-of-type { margin-top: var(--ruimte-5); }

.catalog-set__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--rand);
}

.catalog-set__head h3 { margin: 0; font-size: var(--tekst-md); }

.catalog-list { display: flex; flex-direction: column; }

.catalog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  min-height: 40px;
  padding: var(--ruimte-1) 0;
  border-bottom: 1px solid var(--vlak-zacht);
}

.catalog-item:last-child { border-bottom: none; }

/* Productnaam als gewone tekst. Onderstreepte links op elke regel maken van
   een lijst een muur; de link blijft, maar meldt zich pas bij aanwijzen. */
.catalog-item__label {
  color: var(--ink);
  font-size: var(--tekst-sm);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item__label:hover { color: var(--bes-700); text-decoration: underline; }

.catalog-item__staat {
  flex: 0 0 auto;
  font-size: var(--tekst-xs);
  color: var(--ink-faint);
}

.catalog-item--al .catalog-item__label { color: var(--ink-soft); }

.btn--sm { height: 28px; padding: 0 var(--ruimte-3); font-size: var(--tekst-xs); }

.watch__url:hover { color: var(--bes-700); text-decoration: underline; }

/* De statuspil op één lijn met de titel, niet met het midden van de rij. */
.watch { align-items: flex-start; }
.watch__status { margin-top: 2px; }
.watch__actions { align-items: center; }

/* ---- kop van een kaart met actie ---------------------------------------- */

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-2);
}

.card__head h2 { margin: 0; }

/* ---- binnenkomst bij het wisselen van tabblad ---------------------------
   De kaarten komen kort na elkaar op, zodat het voelt alsof de inhoud zich
   opbouwt in plaats van in één klap te verschijnen. Klein en snel gehouden:
   dit is een werkscherm dat je tien keer per dag opent. */

.tab-panel.is-active > .card {
  animation: kaart-op .34s cubic-bezier(.2, .7, .3, 1) both;
}

.tab-panel.is-active > .card:nth-child(2) { animation-delay: .05s; }
.tab-panel.is-active > .card:nth-child(3) { animation-delay: .1s; }
.tab-panel.is-active > .card:nth-child(4) { animation-delay: .15s; }

@keyframes kaart-op {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-active > .card { animation: none; }
  .tabs__streep { transition: none; }
}

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bes-50);
  color: var(--bes-700);
}

/* Een vinkje in een verticale formulierstapel: `.stack label` zet alles in een
   kolom, waardoor het hokje boven zijn tekst belandde. Hier weer op een rij. */
.stack .veld-keuze {
  flex-direction: row;
  align-items: center;
  gap: var(--ruimte-2);
  height: auto;
  font-weight: 400;
  margin-top: calc(var(--ruimte-2) * -1);
}

.stack .veld-keuze input { flex: none; }

/* Een keuzelijst die eruitziet als de labels ernaast, zodat de regel niet
   verandert in een rij bedieningselementen. */
.chip--keuze {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: 0;
  border: none;
  background: none;
}

.chip--keuze select {
  height: 22px;
  padding: 0 22px 0 var(--ruimte-2);
  font-size: var(--tekst-xs);
  color: var(--ink-faint);
  background-color: var(--vlak-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--rond-vol);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6683' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  cursor: pointer;
}

.chip--keuze select:hover { color: var(--ink); border-color: var(--bes-400); }