/* =====================================================================
   SFEER voor het beheer. Alles staat onder body.admin-sfeer.
   De kassa heeft dit label niet en blijft dus strak en wit.
   ===================================================================== */
body.admin-sfeer {
  --meel: #f5efe6; --as: #e7dccb; --tekst-zacht: #6e6357; --ember: #f2b84b; --kool: #14100d;
  min-height: 100vh;
  background: radial-gradient(900px 420px at 88% -90px, rgba(242, 184, 75, .26), transparent 70%),
              radial-gradient(700px 420px at -8% 0, rgba(214, 58, 42, .09), transparent 70%), var(--meel);
  background-attachment: fixed;
}

/* ---------- Kop ---------- */
body.admin-sfeer .admin-kop, body.kassa-kop .admin-kop { background: #14100d; border-bottom: 3px solid #f2b84b; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7); }
body.admin-sfeer .admin-kop .logo::before, body.kassa-kop .admin-kop .logo::before {
  content: ''; width: 30px; height: 30px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 29 3.5 7.5Q16 1 28.5 7.5Z' fill='%23f2b84b'/%3E%3Cpath d='M3.5 7.5Q16 1 28.5 7.5' fill='none' stroke='%23c9822b' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23d63a2a'/%3E%3Ccircle cx='19.5' cy='11' r='2.2' fill='%23d63a2a'/%3E%3Ccircle cx='16' cy='18.5' r='2.2' fill='%23d63a2a'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.admin-sfeer .admin-kop .link:hover, body.kassa-kop .admin-kop .link:hover { color: #f2b84b; }
/* Kassa: snelkoppeling naar de bestellingen, rechtsboven in de kop */
body.kassa-kop .admin-kop nav { gap: 18px; }
body.kassa-kop .admin-kop nav a { border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 8px 18px; color: #fff; transition: all .15s ease; }
body.kassa-kop .admin-kop nav a:hover { border-color: #f2b84b; color: #f2b84b; }
body.admin-sfeer .balk h1 { font-size: clamp(2rem, 4vw, 2.9rem); }

/* ---------- Knoppen, velden, tabbladen ---------- */
body.admin-sfeer .btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
body.admin-sfeer .btn-primary { background: linear-gradient(180deg, #e44a3b, #c93123); box-shadow: 0 10px 20px -12px rgba(214, 58, 42, .9), inset 0 1px 0 rgba(255, 255, 255, .26); }
body.admin-sfeer .btn-primary:hover { background: linear-gradient(180deg, #ea5445, #bd2c1f); transform: translateY(-1px); }
body.admin-sfeer .btn-lijn { border-color: var(--kool); }
body.admin-sfeer .btn-lijn:hover { background: var(--kool); color: #fff; }
body.admin-sfeer input:focus, body.admin-sfeer select:focus, body.admin-sfeer textarea:focus { border-color: var(--tomaat); box-shadow: 0 0 0 4px rgba(214, 58, 42, .13); outline: none; }
body.admin-sfeer .tab { border-color: var(--as); transition: all .15s ease; }
body.admin-sfeer .tab:hover { border-color: var(--kool); }
body.admin-sfeer .tab[aria-pressed="true"] { background: var(--kool); border-color: var(--kool); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6); }
body.admin-sfeer .toast { border-left: 4px solid var(--ember); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); }

/* ---------- Dashboard ---------- */
.groet-blok p { margin: 0 0 6px; color: var(--tekst-zacht); font-weight: 600; letter-spacing: .02em; }
.groet-blok p::first-letter { text-transform: uppercase; }
body.admin-sfeer .tegels { gap: 20px; }
body.admin-sfeer .tegel {
  border: 1px solid rgba(60, 40, 20, .07); border-radius: 26px; padding: 28px; overflow: hidden;
  box-shadow: 0 22px 44px -32px rgba(60, 40, 20, .6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: opkomen .6s ease both;
}
body.admin-sfeer .tegel:nth-child(2) { animation-delay: .06s; } body.admin-sfeer .tegel:nth-child(3) { animation-delay: .12s; }
body.admin-sfeer .tegel:nth-child(4) { animation-delay: .18s; } body.admin-sfeer .tegel:nth-child(5) { animation-delay: .24s; }
body.admin-sfeer .tegel:hover:not(.uit) { transform: translateY(-5px); border-color: var(--c, var(--tomaat)); box-shadow: 0 32px 54px -30px rgba(60, 40, 20, .7); }
body.admin-sfeer .tegel::before { /* gekleurde gloed in de hoek */
  content: ''; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, var(--cz, #fde8e5), transparent 70%); pointer-events: none;
}
body.admin-sfeer .tegel::after {
  content: '→'; position: absolute; right: 26px; bottom: 20px; font-size: 1.6rem; color: var(--c, var(--tomaat));
  opacity: 0; transform: translateX(-8px); transition: all .2s ease;
}
body.admin-sfeer .tegel:hover:not(.uit)::after { opacity: 1; transform: none; }
body.admin-sfeer .tegel.uit::after { content: none; }
.tegel-icoon { position: relative; width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: var(--cz, #fde8e5); color: var(--c, var(--tomaat)); margin-bottom: 8px; }
.tegel-icoon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.admin-sfeer .tegel h2, body.admin-sfeer .tegel p { position: relative; }

/* ---------- Kaarten en blokken op alle beheerpagina's ---------- */
body.admin-sfeer .blok, body.admin-sfeer .paneel, body.admin-sfeer .kpi, body.admin-sfeer .slotkaart {
  border: 1px solid rgba(60, 40, 20, .07); box-shadow: 0 20px 40px -32px rgba(60, 40, 20, .6);
}
body.admin-sfeer .blok, body.admin-sfeer .paneel, body.admin-sfeer .kpi { border-radius: 24px; }
body.admin-sfeer .blok h2, body.admin-sfeer .paneel h2 { position: relative; padding-bottom: 12px; margin-bottom: 14px; }
body.admin-sfeer .blok h2::after, body.admin-sfeer .paneel h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--ember); }
body.admin-sfeer .kpi.groot { background: linear-gradient(135deg, #1f4d3a, #14100d); border: 0; }
body.admin-sfeer .kpi.groot span { color: rgba(255, 255, 255, .7); }
body.admin-sfeer .kpi.groot strong { color: var(--ember); }
body.admin-sfeer .staaf { background: linear-gradient(to top, #d63a2a, #f2a14b); }
body.admin-sfeer .bar-rij .spoor i { background: linear-gradient(90deg, #1f4d3a, #3f8f6b); }
body.admin-sfeer .badge { background: #efe5d6; }
body.admin-sfeer .badge.groen { background: #c9f2d9; }
body.admin-sfeer .badge.rood { background: #fbd5d0; }

/* ---------- Tabellen ---------- */
body.admin-sfeer table.lijst { border: 1px solid rgba(60, 40, 20, .07); box-shadow: 0 20px 40px -32px rgba(60, 40, 20, .6); border-radius: 20px; }
body.admin-sfeer .lijst th { background: #efe5d6; color: #5a4f43; letter-spacing: .02em; }
body.admin-sfeer .lijst td { border-top-color: #f0e7d9; }
body.admin-sfeer .lijst tr:nth-child(even) td { background: #fcf9f4; }
body.admin-sfeer .lijst tr.bestelrij:hover td { background: #fff3ef; }

/* ---------- Vensters ---------- */
body.admin-sfeer dialog.admin-dlg { border-radius: 26px; box-shadow: 0 50px 110px -34px rgba(0, 0, 0, .7); }
body.admin-sfeer dialog.admin-dlg::backdrop { background: rgba(20, 16, 13, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.admin-sfeer .prodrij:hover, body.admin-sfeer .rijtje:hover { background: #fcf9f4; }

/* ---------- Inloggen voor het beheer ---------- */
body.admin-login {
  background: radial-gradient(900px 500px at 50% -10%, rgba(242, 120, 40, .22), transparent 70%),
              linear-gradient(rgba(20, 16, 13, .8), rgba(20, 16, 13, .92)), url('../img/hero.jpg') center / cover fixed, var(--kool);
}
body.admin-login .kaart { border-radius: 28px; box-shadow: inset 0 4px 0 var(--ember), 0 40px 80px -30px rgba(0, 0, 0, .75); animation: opkomen .6s ease both; }

@keyframes opkomen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.admin-sfeer .tegel, body.admin-login .kaart { animation: none !important; } }