/* ------------------------------------------------------------------
   Beheerscherm. Leunt op de kleuren en lettertypes van site.css, maar is
   verder rustiger: dit is gereedschap, geen etalage.
   ------------------------------------------------------------------ */

.admin-body {
  background: var(--paper);
  min-height: 100vh;
  cursor: auto;               /* hier geen penseel: dit is een werkscherm */
}

.admin-body::after { display: none; }   /* ook geen korrel */

/* ---- inloggen ------------------------------------------------------ */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.gate__card {
  width: min(24rem, 100%);
  background: var(--paper-deep);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: left;
}

.gate__mark {
  width: 3.5rem;
  margin-bottom: 1rem;
  mix-blend-mode: multiply;
  opacity: .8;
}

.gate__card h1 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0 0 .3rem;
}

.gate__sub {
  margin: 0 0 1.5rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

.gate__card .btn { width: 100%; justify-content: center; margin-top: .5rem; }

.gate__error {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  background: #FBE3DE;
  border: 1px solid #E2A79B;
  color: #7A2718;
  font-size: .9rem;
  line-height: 1.45;
}

.gate__error.is-note {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink-soft);
}

.gate__back {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  text-align: center;
}

/* ---- balk bovenin --------------------------------------------------- */

.adminbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--amber);
  color: #17130D;
  border-bottom: 1px solid rgb(0 0 0 / .22);
}

.adminbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 82rem;
  margin-inline: auto;
  padding: .5rem var(--gutter);
  font-family: var(--display);
  font-size: .9rem;
}

.adminbar__mark { width: 1.9rem; mix-blend-mode: multiply; opacity: .85; }
.adminbar__who { color: rgb(0 0 0 / .6); font-size: .78rem; margin-right: auto; }
.adminbar__link { color: inherit; font-size: .8rem; font-weight: 600; }

.btn--small { padding: .45rem .9rem; font-size: .74rem; }

.demo-note {
  margin: 0;
  padding: .8rem var(--gutter);
  background: #FFF3CD;
  border-bottom: 1px solid #E4CE84;
  color: #5C4408;
  font-size: .88rem;
  line-height: 1.5;
}

.demo-note code { font-size: .85em; }

/* ---- indeling -------------------------------------------------------- */

.admin {
  max-width: 82rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 5rem;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.panel {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.panel h2 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.panel__head h2 { margin-bottom: 0; }
.panel__tools { display: flex; flex-wrap: wrap; gap: .5rem; }

.panel__tools input,
.panel__tools select {
  font: inherit;
  font-size: .9rem;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.counts {
  margin: .9rem 0 1.1rem;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---- nieuw schilderij ------------------------------------------------ */

.addgrid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

@media (max-width: 48rem) { .addgrid { grid-template-columns: 1fr; } }

.drop {
  display: grid;
  place-items: center;
  min-height: 13rem;
  padding: 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.drop:hover, .drop.is-over { border-color: var(--ochre); background: var(--panel); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.drop__hint {
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.drop__hint svg { width: 2rem; height: 2rem; color: var(--ink-faint); }
.drop__hint small { font-weight: 400; font-size: .76rem; color: var(--ink-faint); }
.drop img { max-height: 16rem; border-radius: var(--radius); box-shadow: var(--shadow); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 30rem) { .row { grid-template-columns: 1fr; } }

.field select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  width: 100%;
}

.hint {
  margin: .25rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 1.1rem;
}

.status { font-size: .88rem; color: var(--ink-soft); }
.status.is-ok { color: #2F6B3A; font-weight: 600; }
.status.is-error { color: #A2301C; font-weight: 600; }

/* ---- de tabel --------------------------------------------------------- */

.tablewrap { overflow-x: auto; }

.worktable {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 58rem;
}

.worktable th {
  text-align: left;
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 .5rem .6rem;
  border-bottom: 1px solid var(--line);
}

.worktable td {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.worktable tr.is-saved td { animation: saved 1.4s ease-out; }
.worktable tr.is-error td { animation: failed 1.4s ease-out; }

@keyframes saved  { from { background: #D9EFD5; } to { background: transparent; } }
@keyframes failed { from { background: #FBE3DE; } to { background: transparent; } }

.cel-foto { width: 4.5rem; }
.cel-foto img {
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 2px;
  background: var(--panel);
}

.cel-titel { min-width: 12rem; }
.worktable td:nth-child(3) { min-width: 8.5rem; }
.cel-maat { white-space: nowrap; }
.cel-maat span { color: var(--ink-faint); margin-inline: .15rem; }
.cel-weg { text-align: right; }

.inline {
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: .35rem .45rem;
  width: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.inline:hover { border-color: var(--line); }
.inline:focus { background: var(--paper); border-color: var(--ochre); outline: none; }
.inline:disabled { opacity: .4; }
.inline--num { width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }

.inline--status { font-family: var(--display); font-size: .8rem; font-weight: 600; }
.inline--status.is-te-koop { color: #2F6B3A; }
.inline--status.is-verkocht { color: var(--ink-faint); }
.inline--status.is-niet-te-koop { color: #8A5200; }

.linkbtn {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  background: none;
  border: 0;
  padding: .35rem .2rem;
  cursor: pointer;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.linkbtn--danger:hover { color: #A2301C; }

.empty {
  padding: 2rem .5rem;
  text-align: center;
  color: var(--ink-faint);
}

/* ---- volgorde -------------------------------------------------------
   Een rooster van miniaturen in de volgorde van de wand. Vaste tegelbreedte
   en een vaste hoogte voor de foto: het gaat hier om de plek in de rij, niet
   om hoe groot een schilderij in het echt is. Die maatverhoudingen staan op
   de website zelf, hier zouden ze het rooster alleen rommelig maken. */

.check {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-size: .92rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.orderlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ordertile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .45rem .45rem .35rem;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: grab;
}

.ordertile.is-sleep { opacity: .35; }
.ordertile.is-verkocht { opacity: .72; }

.ordertile img {
  width: 100%;
  height: 6.2rem;
  object-fit: contain;
  background: var(--paper);
  border-radius: calc(var(--radius) / 2);
}

/* Het nummer is een invulveld, maar het moet er als een label uitzien —
   anders staan er 110 invoervakjes te schreeuwen. Pas bij focus wordt het
   zichtbaar een veld. */
.ordertile__nr {
  position: absolute;
  top: .3rem;
  left: .3rem;
  z-index: 1;
  width: 2.1rem;
  padding: .1rem .2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: text;
  appearance: none;
}

.ordertile__nr:hover { background: var(--ochre); }

.ordertile__nr:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--amber);
}

.ordertile__titel {
  font-size: .78rem;
  line-height: 1.25;
  color: var(--ink-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ordertile__knoppen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  margin-top: auto;
}

.ordertile__knoppen .linkbtn {
  padding: .2rem .35rem;
  font-size: .72rem;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .ordertile { transition: opacity .15s ease; }
}

/* Kop tussen de wand en de kindertekeningen: over de volle breedte van het
   rooster, zodat de twee groepen echt uit elkaar liggen. */
.orderkop {
  grid-column: 1 / -1;
  margin: 1.1rem 0 .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-soft);
}

.ordertile__titel em {
  font-style: normal;
  color: var(--ochre);
}

/* Aan het vorige schilderij vastgemaakt: die twee blijven op de wand naast
   elkaar staan, ook als de rij daar eigenlijk afbreekt. */
.ordertile__koppel {
  position: absolute;
  top: .3rem;
  right: .3rem;
  padding: .1rem .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-faint);
  font: inherit;
  font-size: .62rem;
  line-height: 1.5;
  cursor: pointer;
}

.ordertile__koppel:hover { border-color: var(--ochre); color: var(--ink); }

.ordertile__koppel.is-aan {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

/* Verborgen werk: staat er nog, telt nog mee, maar is op de site onzichtbaar.
   In de lijst gedempt weergeven zodat je in één oogopslag ziet welke het zijn. */
.worktable tr.is-verborgen td { opacity: .5; }
.worktable tr.is-verborgen .cel-titel::after {
  content: "verborgen";
  display: inline-block;
  margin-left: .5rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-faint);
  font-size: .68rem;
  letter-spacing: .04em;
}
.cel-weg { white-space: nowrap; }
.cel-weg .linkbtn + .linkbtn { margin-left: .6rem; }