/* ===== Moskvin Sushi POS — design system (licht, warm gold & red, Japanese) ===== */
/* Playfair Display wordt geladen via een in de van elke
pagina (dashboard/index/solliciteren.html), niet via @import hier - een
@import binnen een stylesheet is een extra, serieel round-trip-je (eerst
style.css volledig ophalen, dan pas het lettertype ontdekken en
aanvragen) i.p.v. dat de browser het meteen parallel met style.css zelf
kan starten. */
:root {
/* --gold-light is de "leesbare" gold-tint - donker genoeg om als tekst op
een lichte kaart te dienen (dat is verreweg het vaakste gebruik: titels,
labels, chips). Voor de paar plekken die juist een HELDERE gold-vlakte
nodig hebben (een knop/pill met donkere --gold-contrast-tekst erop) is
er --gold-bright; voor een lichte gold-tekst bovenop een sowieso donkere
foto-overlay (bv. het prijs-chipje op een kassa-foto) is er
--gold-light-on-dark. Los van elkaar houden voorkomt dat je op een
lichte pagina per ongeluk lichte tekst op een lichte achtergrond zet. */
--gold: #967554;
--gold-light: #83592a;
--gold-dark: #5f4a30;
--gold-bright: #c6a374;
--gold-light-on-dark: #e0b878;
--gold-contrast: #1f160a; /* dark text used on top of gold-filled elements */
--brand-red: #b23d31;
--brand-red-light: #c24a3d;
/* Kept for every existing usage across the app. */
--green: var(--gold);
--green-light: var(--gold-light);
--online: #29774a; /* true green - reserved for "open"/"online" status dots and positive deltas, kept distinct from the gold brand accent */
--danger: #b3493d;
--warning: #93591f;
--background: #f2ede3;
--foreground: #2b241b;
--card: #fbf9f5;
--card-foreground: #2b241b;
--muted: #ece5d7;
--muted-foreground: #7c6f5f;
--border: #ddd3bf;
--radius: 14px;
--radius-lg: 20px;
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
/* Zachte, warm getinte schaduwen (i.p.v. kille zwarte) i.p.v. één platte
blur - dit is de basis onder alle kaarten/modals in de app. Bewust
laag-contrast/gedempt gehouden (niet fel) - dit is de rustige basis
onder alle kaarten/modals in de app. */
--shadow-card: 0 1px 2px rgba(60, 40, 20, 0.04), 0 12px 24px -16px rgba(60, 40, 20, 0.12);
--shadow-elevated: 0 3px 8px rgba(60, 40, 20, 0.05), 0 22px 45px -22px rgba(60, 40, 20, 0.15);
--gold-glow: rgba(150, 117, 84, 0.14);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Een handvol plekken zijn geen simpele kleur-token maar een heel
gradient/rgba-mengsel dat licht vs. donker structureel anders moet
zijn (niet alleen "donkerder maken") - die staan hier als eigen
variabele zodat het [data-theme="dark"]-blok hieronder ze compleet kan
vervangen i.p.v. losse selectors te moeten overschrijven. */
--photo-placeholder-gradient: linear-gradient(135deg, #f2ead9, #e9dfc7);
--category-heading-gradient: linear-gradient(120deg, #fdf7ec, #f7ecd9 45%, #fdf7ec);
--login-glass-bg: rgba(255, 255, 255, 0.7);
--login-glass-border: rgba(255, 255, 255, 0.6);
--login-error-bg: rgba(192, 69, 58, 0.08);
--login-error-border: rgba(192, 69, 58, 0.25);
--login-error-text: #96291f;
--html-wash-gold: rgba(150, 117, 84, 0.06);
--html-wash-red: rgba(178, 61, 49, 0.04);
--login-wash-gold: rgba(150, 117, 84, 0.09);
--login-wash-red: rgba(178, 61, 49, 0.06);
--aurora-blob-opacity: 0.18;
}
/* ===== Donker thema - aanzetten via data-theme="dark" op (zie
js/theme.js voor de knop, en het anti-flits-scriptje in elke pagina's
dat dit attribuut al vóór de eerste render zet op basis van de
laatst gekozen voorkeur in localStorage). Licht blijft de standaard
(geen attribuut nodig) - dit blok overschrijft alleen wat er verandert.
--green/--green-light zijn hier bewust niet herhaald: die zijn overal
gedefinieerd als var(--gold)/var(--gold-light), en CSS custom properties
lossen var()-referenties pas op het moment van gebruik op tegen de dan
geldende cascade, dus die volgen automatisch mee. ===== */
:root[data-theme="dark"] {
--gold: #967350;
--gold-light: #b89b74;
--gold-dark: #5f4a30;
--gold-bright: #c9ac82;
--gold-contrast: #1f160a;
--brand-red: #c0453a;
--brand-red-light: #d1574a;
--online: #4ade80;
--danger: #c0453a;
--warning: #d99a3f;
--background: #0a0908;
--foreground: #f2e9d8;
--card: #16120f;
--card-foreground: #f2e9d8;
--muted: #221c15;
--muted-foreground: #a89578;
--border: #3a2f22;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -14px rgba(0, 0, 0, 0.7);
--shadow-elevated: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 60px -16px rgba(0, 0, 0, 0.75);
--gold-glow: rgba(184, 155, 116, 0.3);
--photo-placeholder-gradient: linear-gradient(135deg, #241b10, #130e09);
--category-heading-gradient: linear-gradient(120deg, #2c2013, #1c150c 45%, #2c2013);
--login-glass-bg: rgba(22, 18, 15, 0.78);
--login-glass-border: rgba(184, 155, 116, 0.2);
--login-error-bg: rgba(239, 68, 68, 0.12);
--login-error-border: rgba(239, 68, 68, 0.3);
--login-error-text: #fca5a5;
--html-wash-gold: rgba(150, 115, 80, 0.1);
--html-wash-red: rgba(168, 50, 40, 0.07);
--login-wash-gold: rgba(150, 115, 80, 0.16);
--login-wash-red: rgba(168, 50, 40, 0.12);
--aurora-blob-opacity: 0.3;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
color: var(--foreground);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Kort kruisfaden zodat het wisselen tussen licht/donker (zie js/theme.js)
niet als een harde knip aanvoelt. */
html, body, .card, .topbar, .modal-box, .input, .select, .textarea {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Zachte kleur-vlekken linksboven/rechtsonder i.p.v. een vlak effen vlak -
geeft de hele app een subtiel gevoel van diepte zonder ergens de
leesbaarheid in de weg te zitten (heel lage opacity, blijft vaag op de
achtergrond). */
html {
background:
radial-gradient(1100px 650px at 12% -8%, var(--html-wash-gold), transparent 60%),
radial-gradient(900px 550px at 100% 8%, var(--html-wash-red), transparent 55%),
var(--background);
}
body { background: transparent; }
/* Dunne, thema-kleurige scrollbar i.p.v. de kale systeem-standaard. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hidden { display: none !important; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-lg { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--gold-light); letter-spacing: 0.01em; }
.text-muted { color: var(--muted-foreground); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fade-up 0.35s ease both; }
/* ===== Buttons / inputs ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
padding: 9px 16px;
border-radius: 9px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: filter 0.15s ease, transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }
.btn-primary {
background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-dark));
color: var(--gold-contrast);
box-shadow: 0 2px 8px -3px rgba(150, 117, 84, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { box-shadow: 0 4px 14px -4px rgba(150, 117, 84, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--muted); border-color: var(--gold-dark); transform: translateY(-1px); }
.btn-danger { background: rgba(192, 69, 58, 0.1); color: var(--danger); border-color: rgba(192, 69, 58, 0.3); }
.btn-danger:hover { background: rgba(192, 69, 58, 0.18); box-shadow: 0 4px 16px -4px rgba(192, 69, 58, 0.3); transform: translateY(-1px); }
.btn-discord { background: linear-gradient(135deg, #5865f2, #4752c4); color: #fff; width: 100%; box-shadow: 0 3px 14px -3px rgba(88, 101, 242, 0.4); }
.btn-discord:hover { box-shadow: 0 6px 22px -4px rgba(88, 101, 242, 0.5); transform: translateY(-1px); }
.btn-logout { background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }
.btn-logout:hover { background: rgba(192, 69, 58, 0.1); border-color: rgba(192, 69, 58, 0.3); color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.input, .select, .textarea {
width: 100%;
background: var(--muted);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--foreground);
font-size: 13px;
padding: 9px 12px;
font-family: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold-light); box-shadow: 0 0 0 3px var(--gold-glow); }
label { display: block; font-size: 12px; color: var(--muted-foreground); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
/* Brede tabellen (Bonnetjes/Medewerkers/etc. hebben makkelijk 6-7 kolommen)
scrollen zo binnen hun eigen kaart op een smal scherm i.p.v. de hele
pagina breder te maken dan de viewport. */
overflow-x: auto;
}
.card-content { padding: 16px; }
/* ===== Admin-tabbalk: tegels met icoon + korte omschrijving i.p.v. een
kale rij knop-labels, zodat meteen duidelijk is wat er in elke tab te
doen valt. ===== */
.admin-tabs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.admin-tab-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 12px;
cursor: pointer;
font-family: inherit;
color: var(--foreground);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.admin-tab-tile:hover { border-color: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(60, 40, 20, 0.16); }
.admin-tab-tile.active {
border-color: var(--gold);
background: linear-gradient(160deg, rgba(150, 117, 84, 0.1), rgba(150, 117, 84, 0.03));
box-shadow: 0 0 0 1px rgba(150, 117, 84, 0.18), 0 8px 18px -14px rgba(150, 117, 84, 0.2);
}
.admin-tab-tile-top { display: flex; align-items: center; gap: 7px; }
.admin-tab-tile-icon { font-size: 16px; line-height: 1; }
.admin-tab-tile-label { font-weight: 700; font-size: 13px; }
.admin-tab-tile.active .admin-tab-tile-label { color: var(--gold-light); }
.admin-tab-tile-desc { font-size: 11px; color: var(--muted-foreground); line-height: 1.35; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 8px; }
/* ===== Login page ===== */
.login-page {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
radial-gradient(800px 560px at 18% 8%, var(--login-wash-gold), transparent 60%),
radial-gradient(700px 560px at 88% 92%, var(--login-wash-red), transparent 60%),
var(--background);
}
/* Twee vage, langzaam driftende kleur-vlekken op de achtergrond ("aurora"-
effect) - puur sfeer, geen interactie, dus pointer-events:none en
volledig uitgezet bij prefers-reduced-motion. Bewust laag gehouden - dit
mag een waas zijn, geen felle kleurvlek (--aurora-blob-opacity ligt in
donker thema wel iets hoger, anders verzuipt de gloed in de zwarte
achtergrond). */
.login-page::before, .login-page::after {
content: "";
position: absolute;
width: 440px; height: 440px;
border-radius: 50%;
filter: blur(110px);
opacity: var(--aurora-blob-opacity);
pointer-events: none;
z-index: 0;
}
.login-page::before { background: var(--gold); top: -140px; left: -120px; animation: login-blob-float 16s ease-in-out infinite; }
.login-page::after { background: var(--brand-red); bottom: -160px; right: -120px; animation: login-blob-float 19s ease-in-out infinite reverse; }
@keyframes login-blob-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, -26px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.login-page::before, .login-page::after { animation: none; }
}
/* Licht/donker-knop op de losstaande pagina's (login/solliciteren) die geen
topbar hebben om 'm in te zetten - zie js/theme.js. */
.theme-toggle-fixed { position: fixed; top: 16px; right: 16px; z-index: 5; }
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 380px; text-align: center; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-logo-img { width: 190px; max-width: 70%; height: auto; display: block; filter: drop-shadow(0 4px 14px rgba(150, 117, 84, 0.14)); }
.brand-text-accent { color: var(--brand-red); }
.login-card {
background: var(--login-glass-bg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--login-glass-border);
border-radius: var(--radius-lg);
padding: 30px 26px;
box-shadow: var(--shadow-elevated), 0 0 60px -28px var(--gold-glow);
}
.login-card h2 {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: 21px;
font-weight: 800;
background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
-webkit-background-clip: text;
background-clip: text;
color: var(--gold-light);
-webkit-text-fill-color: transparent;
}
.login-sub { color: var(--muted-foreground); font-size: 13px; margin: 0 0 20px; }
.login-submit { padding: 12px 16px; font-size: 14px; }
.login-error { background: var(--login-error-bg); border: 1px solid var(--login-error-border); color: var(--login-error-text); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; text-align: left; }
.login-footer { color: var(--muted-foreground); font-size: 12px; margin-top: 20px; }
.login-footer a { color: var(--gold-light); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }
#solliciteer-btn:hover { background: var(--muted) !important; border-color: var(--gold-light) !important; }
.sollicitaties-open-banner {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.01em;
color: var(--online);
background: rgba(14, 122, 54, 0.08);
border: 1px solid rgba(14, 122, 54, 0.25);
border-radius: 10px;
padding: 10px 16px;
margin-top: 14px;
}
/* ===== App shell ===== */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.preview-banner {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 8px 16px; background: var(--gold-bright); color: var(--gold-contrast);
font-size: 13px; font-weight: 600; text-align: center;
}
.preview-banner .btn { flex-shrink: 0; }
.topbar {
display: flex; align-items: center; gap: 16px;
padding: 10px 20px;
border-bottom: 1px solid var(--border);
background: var(--card);
box-shadow: 0 2px 14px -8px rgba(60, 40, 20, 0.14);
position: relative;
z-index: 2;
}
.topbar-brand { display: flex; align-items: center; }
.topbar-logo-img { height: 34px; width: auto; display: block; }
.mode-toggle { display: flex; background: var(--muted); border-radius: 9px; padding: 3px; }
.mode-toggle button {
border: none; background: transparent; color: var(--muted-foreground);
font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 7px; cursor: pointer;
transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mode-toggle button:not(.active):hover { color: var(--foreground); background: rgba(0, 0, 0, 0.03); }
.mode-toggle button.active {
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: var(--gold-contrast);
box-shadow: 0 2px 8px -3px rgba(150, 117, 84, 0.3);
}
.topbar-clock { font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.topbar-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); object-fit: cover; }
.topbar-user-name { font-size: 13px; font-weight: 600; }
.topbar-user-badge { font-size: 11px; color: var(--green-light); }
.main-content { flex: 1; overflow-y: auto; padding: 20px; }
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--muted); color: var(--muted-foreground); border: 1px solid rgba(0, 0, 0, 0.04); }
.badge-warning { background: rgba(217, 154, 63, 0.18); color: var(--warning); border-color: rgba(217, 154, 63, 0.3); }
.medewerker-avatar {
width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
vertical-align: middle; background: var(--muted);
}
/* Discord-achtig statusbolletje rechtsonder op de avatar, alleen als
iemand nu in dienst is - de rand "knipt" een stukje van de avatar weg
zodat het bolletje los oogt i.p.v. er gewoon overheen te plakken. */
.medewerker-avatar-wrap { position: relative; display: inline-block; vertical-align: middle; margin-right: 8px; line-height: 0; }
.medewerker-avatar-wrap .medewerker-avatar { margin-right: 0; }
.medewerker-online-dot {
position: absolute; right: -1px; bottom: -1px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--online); border: 2px solid var(--card);
box-shadow: 0 0 4px var(--online);
}
.notitie-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 800;
cursor: pointer; vertical-align: middle; margin-left: 2px;
background: var(--muted); color: var(--muted-foreground);
}
.notitie-badge.heeft-notitie { background: #eab659; color: #1f160a; }
.strikes-badge { cursor: pointer; font-weight: 700; font-size: 12px; }
.strikes-badge:hover, .notitie-badge:hover { filter: brightness(1.15); }
/* Retro-kassa toetsje-toggle (zie retroKassaBadgeHtml() in admin-view.js) -
zelfde ronde-badge-vorm als de notitie-badge, dof zolang uit, oplichtend
in het gold-accent zodra aan. */
.retro-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%; font-size: 10px;
cursor: pointer; vertical-align: middle; margin-left: 2px;
background: var(--muted); color: var(--muted-foreground); opacity: 0.55;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.retro-badge.actief { background: var(--gold-dark); opacity: 1; }
.retro-badge:hover { filter: brightness(1.2); transform: scale(1.08); }
/* ===== POS ===== */
.pos-layout { position: relative; display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
/* position:absolute haalt dit element uit de grid-flow (anders zou het als
3e impliciet grid-item de 2-koloms-layout van pos-layout verstoren).
pointer-events:none zolang de gate niet actief is (lege container) zodat
die verder niets blokkeert; .pos-dienst-overlay zet 'm terug aan zodra er
echt een overlay in staat. */
#pos-dienst-overlay-root { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pos-dienst-overlay {
pointer-events: auto;
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(10, 9, 8, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: var(--radius);
}
.pos-dienst-overlay-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-card); padding: 28px 32px; max-width: 360px; text-align: center;
}
.pos-dienst-overlay-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.pos-dienst-overlay-card p { margin-bottom: 16px; }
.pos-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.pos-search { flex: 1; max-width: 320px; }
.pos-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pos-tab { border: 1px solid var(--border); background: var(--muted); color: var(--foreground); font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 9px; cursor: pointer; }
.pos-tab:hover { border-color: var(--green); color: var(--green-light); }
/* Retro kassa (toetsenbord-modus, leuk extraatje - zie posRetroPanelHtml()
in pos-view.js). Bewust een eigen, in zichzelf gesloten kleurenpalet (een
groen fosforscherm) i.p.v. het normale dark/gold-thema - dit IS het
grapje, een knipoog naar een ouderwetse CRT-terminal/kassa. Blijft
volledig gescoped onder .pos-retro-panel via lokale custom properties,
raakt de rest van de app niet. */
.pos-retro-panel {
--retro-bg: #030f08;
--retro-bg-raised: #071e10;
--retro-fg: #4dff88;
--retro-fg-dim: #1f7a44;
--retro-amber: #ffb347;
--retro-border: #17452a;
--retro-glow: rgba(77, 255, 136, 0.55);
display: flex; flex-direction: column; gap: 14px; position: relative;
font-family: "VT323", "Courier New", ui-monospace, monospace;
/* Elke keer dat retro-modus verse HTML krijgt (aanzetten, of het
zeldzame geval dat de retro-vlag zelf live wijzigt) een kort "aanzet"-
lichtflitsje, zoals een CRT-buis die op temperatuur moet komen. Speelt
vanzelf precies één keer af zodra dit element in de DOM verschijnt. */
animation: pos-retro-power-on 0.5s ease-out;
}
@keyframes pos-retro-power-on {
0% { filter: brightness(2.4) saturate(1.6); }
100% { filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
.pos-retro-panel { animation: none; }
}
.pos-retro-topbar { display: flex; gap: 10px; align-items: center; }
.pos-retro-geluid-btn {
margin-left: auto; width: 34px; height: 34px; flex-shrink: 0;
border-radius: 8px; border: 1px solid var(--retro-border); background: var(--retro-bg-raised);
cursor: pointer; font-size: 15px; line-height: 1;
}
.pos-retro-geluid-btn:hover { border-color: var(--retro-fg-dim); }
/* Opstartscherm (posRetroSpeelBootAf()) - dekt bij het aanzetten van
retro-modus even het hele paneel af, faded daarna weg. Blijft verborgen
(display:none, direct de eindstand) bij prefers-reduced-motion. */
.pos-retro-boot {
position: absolute; inset: 0; z-index: 10; display: none;
background: var(--retro-bg); border-radius: var(--radius);
align-items: center; justify-content: center; padding: 24px;
transition: opacity 0.3s ease;
}
.pos-retro-boot.uit { opacity: 0; }
.pos-retro-boot pre {
margin: 0; font-family: "VT323", "Courier New", monospace; font-size: 24px; line-height: 1.4;
color: var(--retro-fg); text-shadow: 0 0 10px var(--retro-glow); white-space: pre-wrap;
}
.pos-retro-display {
background: var(--retro-bg); border: 1px solid var(--retro-border); border-radius: var(--radius);
padding: 16px 20px; position: relative; overflow: hidden;
/* Vignet: donkerder naar de randen toe, alsof je naar een gebogen
buisscherm kijkt i.p.v. een plat vlak. */
box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(77, 255, 136, 0.06), inset 0 0 70px 10px rgba(0, 0, 0, 0.65);
}
/* Scanlines: een vast (niet-geanimeerd) herhaald streepjespatroon over het
scherm - z-index 0 zodat de echte tekst (die zelf z-index 1 krijgt)
erboven blijft staan. */
.pos-retro-display::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.35) 3px);
}
.pos-retro-titel {
position: relative; z-index: 1; margin: 0 0 10px;
font-family: "VT323", "Courier New", monospace; font-size: 18px; line-height: 1.25;
color: var(--retro-fg); text-shadow: 0 0 8px var(--retro-glow); white-space: pre; letter-spacing: 0.02em;
}
.pos-retro-display-buffer {
position: relative; z-index: 1;
font-family: "VT323", "Courier New", monospace;
font-size: 40px; font-weight: 400; letter-spacing: 0.14em;
color: var(--retro-fg); text-shadow: 0 0 14px var(--retro-glow), 0 0 2px var(--retro-glow);
min-height: 40px; line-height: 40px; animation: pos-retro-flicker 4s infinite;
}
.pos-retro-display-buffer::after { content: "▌"; margin-left: 2px; animation: pos-retro-cursor 1s step-end infinite; }
.pos-retro-display-buffer.leeg { color: var(--retro-fg-dim); text-shadow: none; }
@keyframes pos-retro-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes pos-retro-flicker {
0%, 96%, 100% { opacity: 1; }
97% { opacity: 0.82; }
98% { opacity: 1; }
98.5% { opacity: 0.9; }
}
.pos-retro-display-feedback {
position: relative; z-index: 1;
margin-top: 8px; font-size: 18px; font-weight: 400; color: var(--retro-fg-dim); min-height: 22px;
font-family: "VT323", "Courier New", monospace;
}
.pos-retro-display-feedback.ok { color: var(--retro-fg); text-shadow: 0 0 6px var(--retro-glow); }
.pos-retro-display-feedback.fout { color: var(--retro-amber); text-shadow: 0 0 6px rgba(255, 179, 71, 0.5); }
.pos-retro-hulp {
display: flex; flex-wrap: wrap; gap: 6px 16px;
font-size: 14px; color: var(--retro-fg-dim); font-family: "VT323", "Courier New", monospace;
}
.pos-retro-hulp kbd {
display: inline-block; min-width: 20px; text-align: center;
padding: 1px 7px; margin-right: 3px; border-radius: 4px;
background: var(--retro-bg-raised); border: 1px solid var(--retro-fg-dim); border-bottom-width: 2px;
font-family: "VT323", "Courier New", monospace; font-size: 14px; font-weight: 400; color: var(--retro-fg);
}
.pos-retro-codes {
flex: 1; overflow-y: auto; border: 1px solid var(--retro-border); border-radius: var(--radius); background: var(--retro-bg);
box-shadow: inset 0 0 50px 8px rgba(0, 0, 0, 0.6);
}
.pos-retro-codes-groep-naam {
position: sticky; top: 0; z-index: 1;
font-family: "VT323", "Courier New", monospace; font-size: 18px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--retro-fg); background: var(--retro-bg-raised); padding: 6px 14px; border-bottom: 1px solid var(--retro-border);
}
.pos-retro-code-row {
display: grid; grid-template-columns: 44px 1fr 64px 40px; align-items: center; gap: 10px;
padding: 6px 14px; border-bottom: 1px solid var(--retro-border);
font-family: "VT323", "Courier New", monospace; font-size: 19px; color: var(--retro-fg-dim);
}
.pos-retro-code-row:last-child { border-bottom: none; }
.pos-retro-code-row.in-cart { background: rgba(77, 255, 136, 0.08); color: var(--retro-fg); }
.pos-retro-code-row.uitverkocht { opacity: 0.4; }
.pos-retro-code {
font-weight: 400; color: var(--retro-fg); background: var(--retro-bg-raised);
border: 1px solid var(--retro-border); border-radius: 4px; padding: 1px 0; text-align: center;
}
.pos-retro-code-naam { font-family: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-retro-voorraad-tekst { opacity: 0.75; }
.pos-retro-voorraad-tekst.laag { color: var(--retro-amber); opacity: 1; text-shadow: 0 0 6px rgba(255, 179, 71, 0.4); }
.pos-retro-code-prijs { color: inherit; opacity: 0.8; text-align: right; font-variant-numeric: tabular-nums; }
.pos-retro-code-qty { color: var(--retro-amber); font-weight: 400; text-align: right; text-shadow: 0 0 6px rgba(255, 179, 71, 0.5); }
@media (prefers-reduced-motion: reduce) {
.pos-retro-display-buffer { animation: none; }
.pos-retro-display-buffer::after { animation: none; opacity: 1; }
}
/* Een vanuit retro-modus geopend venster (Mijn bonnetjes via "B",
Verrassingsbox via "V" - zie opts.modalClass in openModal()/pos-view.js)
krijgt dezelfde groene CRT-sfeer mee i.p.v. het gewone dark/gold-
uiterlijk, anders breekt zo'n venster de sfeer helemaal. #modal-root
hangt ergens anders in de DOM dan .pos-retro-panel (geen voorouder om de
--retro-*-tokens van te erven) - daarom hier los opnieuw gedefinieerd,
met dezelfde waarden.
Alleen component-klassen die in déze twee vensters ook echt voorkomen
worden hier overschreven, en alles staat achter .pos-retro-modal, dus
een gewoon (niet-retro) modal-venster elders in de app blijft
volledig ongemoeid. */
.modal-box.pos-retro-modal {
--retro-bg: #030f08;
--retro-bg-raised: #071e10;
--retro-fg: #4dff88;
--retro-fg-dim: #1f7a44;
--retro-amber: #ffb347;
--retro-border: #17452a;
--retro-glow: rgba(77, 255, 136, 0.55);
background: var(--retro-bg);
border: 1px solid var(--retro-border);
box-shadow: 0 0 0 1px var(--retro-border), 0 24px 70px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(77, 255, 136, 0.05);
font-family: "VT323", "Courier New", ui-monospace, monospace;
color: var(--retro-fg-dim);
}
.pos-retro-modal .modal-title { font-family: "VT323", "Courier New", monospace; font-size: 26px; font-weight: 400; color: var(--retro-fg); text-shadow: 0 0 8px var(--retro-glow); }
.pos-retro-modal .modal-description { font-size: 15px; color: var(--retro-fg-dim); }
.pos-retro-modal .modal-footer { border-top: 1px solid var(--retro-border); padding-top: 14px; }
.pos-retro-modal label { color: var(--retro-fg-dim); font-size: 14px; }
.pos-retro-modal .input,
.pos-retro-modal .select,
.pos-retro-modal .textarea {
background: var(--retro-bg-raised); border: 1px solid var(--retro-border); color: var(--retro-fg);
font-family: "VT323", "Courier New", monospace; font-size: 19px;
}
.pos-retro-modal .input::placeholder { color: var(--retro-fg-dim); opacity: 0.7; }
.pos-retro-modal .field-error { color: var(--retro-amber); }
.pos-retro-modal .text-muted,
.pos-retro-modal .text-xs,
.pos-retro-modal .text-sm { color: var(--retro-fg-dim); }
.pos-retro-modal .font-semibold { color: var(--retro-fg); }
.pos-retro-modal strong { color: var(--retro-fg); }
.pos-retro-modal .btn { font-family: "VT323", "Courier New", monospace; font-size: 15px; }
.pos-retro-modal .btn-outline { border-color: var(--retro-border); color: var(--retro-fg-dim); background: var(--retro-bg-raised); }
.pos-retro-modal .btn-outline:hover { border-color: var(--retro-fg-dim); color: var(--retro-fg); }
.pos-retro-modal .btn-primary { background: var(--retro-fg-dim); color: #04150a; border-color: var(--retro-fg-dim); }
.pos-retro-modal .btn-primary:hover { background: var(--retro-fg); }
.pos-retro-modal .card,
.pos-retro-modal .receipt-lines,
.pos-retro-modal .receipt-line {
background: var(--retro-bg-raised); border-color: var(--retro-border);
}
.pos-retro-modal .receipt-total { color: var(--retro-fg); }
.pos-retro-modal .kortingscode-chip,
.pos-retro-modal .badge { background: var(--retro-bg-raised); color: var(--retro-fg); border: 1px solid var(--retro-border); }
.pos-category-heading {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-size: 17px; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-light);
padding: 12px 18px; margin: 28px 0 16px;
background: var(--category-heading-gradient);
border: 1px solid var(--gold-dark);
border-radius: 4px;
box-shadow: 0 6px 16px -12px rgba(60, 40, 20, 0.3);
scroll-margin-top: 12px;
}
.pos-category-heading::before { content: "🌸"; font-size: 13px; filter: saturate(1.3); }
.pos-category-heading:first-child { margin-top: 0; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.pos-item-card {
position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; cursor: pointer;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pos-item-card:hover { border-color: var(--gold-dark); transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(60, 40, 20, 0.3); }
.pos-item-card.in-cart { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 18px -14px rgba(150, 117, 84, 0.25); }
.pos-item-card.uitverkocht { cursor: not-allowed; opacity: 0.5; }
.pos-item-card.uitverkocht:hover { border-color: var(--border); transform: none; box-shadow: none; }
.pos-item-photo img { transition: transform 0.35s var(--ease); }
.pos-item-card:hover .pos-item-photo img { transform: scale(1.06); }
.pos-item-uitverkocht-badge {
position: absolute; inset: 0; z-index: 2;
display: flex; align-items: center; justify-content: center;
background: rgba(10, 9, 8, 0.55);
color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.pos-item-photo { height: 100px; background: var(--photo-placeholder-gradient); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 11px; letter-spacing: 0.05em; position: relative; }
.pos-item-price { position: absolute; top: 8px; right: 8px; z-index: 1; background: rgba(20, 15, 8, 0.78); backdrop-filter: blur(4px); color: var(--gold-light-on-dark); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.pos-item-qty { position: absolute; top: 8px; left: 8px; z-index: 1; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--gold-contrast); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 6px -2px rgba(150, 117, 84, 0.3); }
.pos-item-body { padding: 10px 12px; }
.pos-item-type { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 2px; }
.pos-item-name { font-size: 13px; font-weight: 600; }
.pos-item-desc { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.pos-item-voorraad { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }
.pos-item-voorraad.laag { color: var(--danger); font-weight: 600; }
/* "Alles aanvullen" (openBulkAanvullenModal() in keuken-view.js) - een
rij per ingrediënt i.p.v. een kale tabel, met een lichte gouden gloed
zodra 'm aangevinkt staat zodat in één oogopslag duidelijk is wat er
zo meteen echt ingekocht wordt. */
.keuken-bulk-lijst { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.keuken-bulk-rij {
display: grid; grid-template-columns: auto auto 1fr 110px 110px; align-items: center; gap: 12px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted);
cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.keuken-bulk-rij:hover { border-color: var(--gold-dark); }
.keuken-bulk-rij.gevinkt { border-color: var(--gold); background: rgba(150, 117, 84, 0.1); }
.keuken-bulk-foto {
width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--card);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.keuken-bulk-foto img { width: 100%; height: 100%; object-fit: cover; }
.keuken-bulk-naam { min-width: 0; }
.keuken-bulk-veld { display: flex; flex-direction: column; gap: 3px; }
.keuken-bulk-veld label { white-space: nowrap; }
.keuken-bulk-veld .input { width: 100%; padding: 6px 8px; }
@media (max-width: 640px) {
.keuken-bulk-rij { grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; row-gap: 8px; }
.keuken-bulk-foto { display: none; }
.keuken-bulk-veld { grid-column: span 1; }
}
/* Keuken > Recepten: zelfde kaart-look als de Kassa-grid hierboven
(.pos-item-photo/-body/-type/-name/-voorraad worden hergebruikt). De
foto+body (.keuken-menu-card-info) is aanklikbaar voor de "zo maak je
dit"-popup; de knoppenrij daaronder staat er los van, geen conflict met
de klik op de kaart. */
.keuken-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.keuken-menu-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s ease; }
.keuken-menu-card:hover { border-color: var(--gold-dark); }
.keuken-menu-card-info { cursor: pointer; }
/* Duidelijke, altijd-zichtbare hint dat de foto aanklikbaar is (i.p.v. alleen
een title-tooltip, die vrijwel niemand toevallig tegenkomt) - alleen op de
Keuken-kaart, .pos-item-photo zelf wordt ook in de gewone Kassa-grid
hergebruikt waar dit niet klopt. */
.keuken-maak-hint {
position: absolute;
bottom: 6px;
left: 6px;
right: 6px;
background: rgba(20, 15, 8, 0.78);
color: var(--gold-light-on-dark);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
padding: 4px 6px;
border-radius: 6px;
pointer-events: none;
}
.keuken-menu-card-footer { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
.keuken-menu-card-footer .btn { flex: 1; white-space: nowrap; }
.keuken-menu-card-ingredienten {
list-style: none;
margin: 8px 0 0;
padding: 8px 0 0;
border-top: 1px dashed var(--border);
font-size: 11px;
color: var(--muted-foreground);
line-height: 1.6;
}
.keuken-menu-card-ingredienten li::before { content: "• "; color: var(--gold-dark); }
.keuken-menu-card-ingredienten.leeg { font-style: italic; }
.keuken-menu-card-ingredienten li.tekort { color: var(--danger); }
.keuken-menu-card-ingredienten li.tekort::before { color: var(--danger); }
/* "Genoeg voor N×"-indicator (receptMaxAantal() in keuken-view.js): op
basis van de actuele ingrediënt-voorraad, niet de menu-item-voorraad
zelf - dit is puur "kun je het nog bíjmaken", geen bestel-blokkade. */
.keuken-recept-max { font-size: 11px; font-weight: 600; color: var(--online); margin-top: 4px; }
.keuken-recept-max.laag { color: var(--warning); }
.keuken-recept-max.op { color: var(--danger); }
/* "Zo maak je dit"-popup (openBekijkReceptPopup) - grotere, makkelijker af
te lezen variant van dezelfde ingrediëntenlijst, voor tijdens het werken. */
.keuken-bereiding-lijst { list-style: none; margin: 0; padding: 0; }
.keuken-bereiding-lijst li {
display: flex; align-items: baseline; gap: 8px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.keuken-bereiding-lijst li:last-child { border-bottom: none; }
.keuken-bereiding-lijst li.tekort { color: var(--danger); }
.keuken-bereiding-hoeveelheid { flex-shrink: 0; min-width: 72px; font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.keuken-bereiding-lijst li.tekort .keuken-bereiding-hoeveelheid { color: var(--danger); }
.receipt-panel { position: sticky; top: 20px; }
.receipt-header { display: flex; align-items: center; justify-content: between; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.receipt-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--gold-light); display: flex; align-items: center; gap: 8px; }
.receipt-bar { width: 3px; height: 16px; background: var(--green); border-radius: 2px; display: inline-block; }
.receipt-lines { max-height: 50vh; overflow-y: auto; }
.receipt-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
/* Welke bon-regel de retro-toetsenbord-sneltoetsen (+/-/Del/lege-⌫) nu
raken (posRetroLaatsteKey in pos-view.js) - met ↑/↓ te verplaatsen, ook
al staat de bon zelf in het normale dark/gold-deel van het scherm. */
.receipt-line.retro-selected { outline: 2px solid var(--online); outline-offset: -2px; background: rgba(74, 222, 128, 0.1); border-radius: 8px; }
/* Foto-thumbnail + (bij een box) samenstelling per bon-regel - zodat een
medewerker in één oogopslag ziet wát er precies gepakt moet worden,
i.p.v. alleen op de naam te moeten vertrouwen. Zelfde maat/look als
.keuken-bulk-foto verderop. */
.receipt-line-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.receipt-line-photo {
width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
background: var(--photo-placeholder-gradient);
display: flex; align-items: center; justify-content: center;
}
.receipt-line-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receipt-line-tekst { min-width: 0; }
.receipt-line-name { font-size: 14px; font-weight: 700; }
.receipt-line-unit { font-size: 11px; color: var(--muted-foreground); }
.receipt-line-samenstelling { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.qty-stepper { display: flex; align-items: center; gap: 6px; }
.qty-stepper button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--muted); color: var(--foreground); cursor: pointer; }
.qty-stepper .qty-input {
width: 36px;
height: 22px;
text-align: center;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--card);
color: var(--foreground);
font-size: 12px;
padding: 0;
-moz-appearance: textfield;
}
.qty-stepper .qty-input:focus { outline: none; border-color: var(--green); }
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.receipt-empty { padding: 30px 16px; text-align: center; color: var(--muted-foreground); font-size: 13px; }
.receipt-footer { padding: 16px; border-top: 1px solid var(--border); }
.receipt-total { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.receipt-total-right { display: flex; align-items: center; gap: 8px; }
.receipt-total-value {
background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
-webkit-background-clip: text; background-clip: text; color: var(--green-light); -webkit-text-fill-color: transparent;
}
.receipt-copy-btn {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
border: 1px solid var(--border); border-radius: 7px;
background: var(--muted); color: var(--muted-foreground);
cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.receipt-copy-btn:hover { color: var(--gold-light); border-color: var(--gold-dark); }
.receipt-copy-btn.copied { color: var(--online); border-color: var(--online); }
.receipt-copy-btn.copy-failed { color: var(--danger); border-color: var(--danger); }
.receipt-note { font-size: 11px; color: var(--muted-foreground); margin-bottom: 12px; }
.kortingscode-chip {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px; border-radius: 8px; margin-bottom: 10px;
background: var(--muted); color: var(--gold-light); font-size: 13px; font-weight: 600;
}
.kortingscode-chip button { padding: 0 8px; }
/* ===== Admin ===== */
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-week-nav { display: flex; align-items: center; gap: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { position: relative; padding: 16px 16px 16px 20px; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.stat-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(60, 40, 20, 0.28); }
.stat-label { font-size: 12px; color: var(--muted-foreground); }
.stat-value {
font-size: 24px; font-weight: 800; margin-top: 4px;
background: linear-gradient(135deg, var(--foreground), var(--gold-light));
-webkit-background-clip: text; background-clip: text; color: var(--foreground); -webkit-text-fill-color: transparent;
}
.stat-delta { font-size: 11px; margin-top: 4px; }
.stat-delta.up { color: var(--online); }
.stat-delta.down { color: var(--danger); }
/* ===== Bedrijfspot ===== */
.bedrijfspot-saldo-card {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
padding: 28px 32px; margin-bottom: 20px;
background: linear-gradient(135deg, var(--card) 0%, var(--muted) 100%);
border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevated), 0 0 70px -30px var(--gold-glow);
}
.bedrijfspot-saldo-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.bedrijfspot-saldo-value { font-family: var(--font-display); font-size: 42px; font-weight: 800; margin-top: 6px; }
.bedrijfspot-saldo-value.negatief { color: var(--danger); }
.bedrijfspot-saldo-value.positief {
background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
-webkit-background-clip: text; background-clip: text; color: var(--green-light); -webkit-text-fill-color: transparent;
}
.bedrijfspot-mutatie-bedrag { font-weight: 700; }
.bedrijfspot-mutatie-bedrag.bij { color: var(--online); }
.bedrijfspot-mutatie-bedrag.af { color: var(--danger); }
.chart-card { padding: 20px; margin-bottom: 20px; }
.chart-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--gold-light); margin-bottom: 16px; }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; }
.bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar-chart-bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--muted); transition: transform 0.2s var(--ease); }
.bar-chart-bar.today { background: linear-gradient(180deg, var(--gold-light), var(--gold-dark)); box-shadow: 0 -4px 16px -6px var(--gold-glow); }
.bar-chart-col:hover .bar-chart-bar { transform: scaleY(1.02); transform-origin: bottom; }
.bar-chart-value { font-size: 10px; color: var(--muted-foreground); }
.bar-chart-label { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.leaderboard-name { flex-shrink: 0; width: 110px; font-size: 12px; font-weight: 600; }
.leaderboard-bar-wrap { flex: 1; height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.leaderboard-bar { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); box-shadow: 0 0 8px -1px var(--gold-glow); }
.leaderboard-count { flex-shrink: 0; width: 40px; text-align: right; font-size: 12px; color: var(--muted-foreground); }
.maintenance-card { padding: 18px; margin-bottom: 14px; }
.maintenance-title { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--gold-light); margin-bottom: 4px; }
.maintenance-desc { font-size: 12px; color: var(--muted-foreground); margin-bottom: 14px; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; color: var(--muted-foreground); font-weight: 500; border-bottom: 1px solid var(--border); }
.data-table th.text-right { text-align: right; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table td.text-right { text-align: right; }
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover td { background: rgba(150, 117, 84, 0.05); }
.data-table tr.dragging { opacity: 0.4; }
.drag-handle-cell { width: 20px; text-align: center; color: var(--muted-foreground); cursor: grab; user-select: none; }
.drag-handle-cell:active { cursor: grabbing; }
/* align-items: flex-start (i.p.v. center) + overflow-y: auto hier, zodat een
modal die hoger is dan het scherm (vaak op mobiel, met een klein
toetsenbord erbij) gewoon in z'n geheel te scrollen is - met center clipt
een te hoog venster boven- én onderaan zonder dat daar ooit bij te komen
is, ongeacht overflow-instellingen. Modals die wél passen zakken hierdoor
iets hoger te staan dan precies gecentreerd, een kleine visuele
tegenprestatie voor "altijd scrollbaar". */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 20px; overflow-y: auto; }
.modal-overlay.hidden { display: none; }
.modal-box {
background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 22px; width: 100%; max-width: 440px;
box-shadow: var(--shadow-elevated), 0 0 50px -30px var(--gold-glow);
}
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--gold-light); margin-bottom: 4px; }
.modal-description { font-size: 13px; color: var(--muted-foreground); margin-bottom: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.crop-viewport {
position: relative;
width: 320px;
height: 320px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
border-radius: 10px;
background: var(--muted);
cursor: grab;
touch-action: none;
}
.crop-viewport.dragging { cursor: grabbing; }
.crop-viewport img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.crop-zoom-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.crop-zoom-slider { flex: 1; accent-color: var(--green); }
/* ===== Tablet (900px) ===== */
@media (max-width: 900px) {
.pos-layout { grid-template-columns: 1fr; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.admin-grid { grid-template-columns: 1fr; }
.admin-header { flex-wrap: wrap; row-gap: 10px; }
/* Met 4 tabs (Kassa/Keuken/Leaderboard/Admin) + dienst-status + klok +
gebruikersinfo past de topbar op een tablet (en een niet-gemaximaliseerd
browservenster) niet meer altijd op één regel - laat 'm over twee
regels uitvallen i.p.v. de rechterkant van het scherm af te laten
lopen. Bewust op 900px (dezelfde grens als pos-layout hierboven) i.p.v.
pas bij 560px, want dit gebeurde ook al ruim vóór telefoonformaat. */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar-user { margin-left: 0; }
}
/* ===== Telefoon (560px) ===== */
@media (max-width: 560px) {
body { font-size: 14px; }
/* Klok is puur decoratief (dienst-status toont al open/dicht) en gaat als
eerste weg om ruimte te maken op een echt smal scherm. */
.topbar { padding: 10px 14px; }
.topbar-clock { display: none; }
.mode-toggle button { padding: 6px 10px; font-size: 12px; }
.dienst-status { font-size: 11px; padding: 5px 9px; }
.pos-toolbar { flex-wrap: wrap; }
.pos-search { max-width: none; width: 100%; }
/* Modals krijgen minder lucht om de randen, zodat het formulier zelf zo
breed mogelijk blijft op een klein scherm. */
.modal-overlay { padding: 10px; }
.modal-box { padding: 16px; max-width: 100%; }
/* Een