/* Personeelsdashboard – Stadscafé Simons */
body.dash { padding-top: 0; background: #151515; color: #f2efe9; min-height: 100vh; font-size: 16px; }
html { margin-top: 0 !important; }
.dash a { color: var(--sand); }
.dash-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--brown); color: #fff !important; font: 500 15px var(--font-btn); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), background .2s, opacity .2s; }
.dash-btn:hover { transform: translateY(-1px); background: var(--brown-dark); }
.dash-btn:disabled { opacity: .5; cursor: wait; }
.dash-btn--ok { background: #2f7d4a; } .dash-btn--ok:hover { background: #276a3e; }
.dash-btn--danger { background: #a63b32; } .dash-btn--danger:hover { background: #8d3029; }
.dash-btn--ghost { background: transparent; border: 1px solid rgba(188, 178, 156, .45); color: var(--sand) !important; }
.dash-btn--ghost:hover { background: rgba(188, 178, 156, .12); }
.dash-btn--add { margin-left: auto; }
.dash-pill--news { background: transparent; border: 1px solid #2f7d4a; color: #8fd4a6; text-transform: none; letter-spacing: 0; }
.dash-btn--outline { background: transparent; border: 2px solid #2f7d4a; color: #8fd4a6 !important; } .dash-btn--outline:hover { background: rgba(47, 125, 74, .2); }
.dash-btn--present { background: #1f6f9f; } .dash-btn--present:hover { background: #1a5d86; }

/* login */
.dash-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 20% 10%, #2b2b2b 0, transparent 55%), #111; }
.dash-login__card { width: min(420px, 100%); padding: 38px 34px; border-radius: 14px; background: #1f1f1f; border-top: 5px solid var(--brown); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); text-align: center; }
.dash-login__logo { margin: 0 auto 18px; }
.dash-login__card h1 { font-family: var(--font-script); font-weight: normal; font-size: 30px; color: var(--sand); text-transform: uppercase; margin-bottom: 22px; }
.dash-login form { text-align: left; }
.dash-login label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.dash-login input[type=text], .dash-login input[type=password] { width: 100%; padding: 14px; margin-bottom: 4px; border: 2px solid transparent; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: #1f1f1f; }
.dash-login input:focus { outline: 0; border-color: var(--sand); }
.dash-login .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.dash-login input[type=submit] { width: 100%; min-height: 50px; border: 0; border-radius: 8px; background: var(--brown); color: #fff; font: 500 16px var(--font-btn); cursor: pointer; }
.dash-login input[type=submit]:hover { background: var(--brown-dark); }
.dash-login__back { margin: 20px 0 0; font-size: 14px; }
.dash-alert { padding: 12px 14px; border-radius: 8px; background: rgba(166, 59, 50, .25); border: 1px solid rgba(166, 59, 50, .6); font-size: 14px; text-align: left; }

/* layout */
.dash-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: #000; border-bottom: 1px solid #2a2a2a; }
.dash-top__brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-script); font-size: 22px; color: var(--sand); text-transform: uppercase; }
.dash-top__user { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.dash-main { max-width: 1100px; margin: 0 auto; padding: 22px 24px 80px; }
.dash-newbar { margin-bottom: 16px; padding: 14px 16px; border-radius: 10px; background: #2f7d4a; font-weight: 700; animation: dash-in .4s var(--ease); }
.dash-newbar a { color: #fff; text-decoration: underline; margin-left: 6px; }
@keyframes dash-in { from { opacity: 0; transform: translateY(-8px); } }
.dash-views { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dash-views a { padding: 11px 18px; border-radius: 999px; border: 1px solid #3a3a3a; color: #f2efe9; font-weight: 700; text-decoration: none; }
.dash-views a.is-active { background: var(--sand); border-color: var(--sand); color: #000; }
.dash-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #a63b32; color: #fff; font-size: 12px; }

.dash-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.dash-days::-webkit-scrollbar { height: 8px; } .dash-days::-webkit-scrollbar-track { background: transparent; } .dash-days::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
.dash-days { padding-top: 8px; }
.dash-day { position: relative; flex: 0 0 auto; min-width: 96px; padding: 10px 12px; border-radius: 10px; background: #1f1f1f; border: 1px solid #2c2c2c; color: #f2efe9 !important; text-decoration: none; transition: border-color .2s, transform .15s var(--ease); }
.dash-day:hover { transform: translateY(-2px); border-color: var(--brown); }
.dash-day.is-active { background: var(--brown); border-color: var(--brown); }
.dash-day small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.dash-day strong { display: block; font-size: 17px; }
.dash-day span { font-size: 12px; opacity: .85; }
.dash-day i { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #a63b32; font-style: normal; font-size: 11px; font-weight: 700; }

.dash-datebar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dash-datebar h1 { flex: 1; margin: 0; font-size: clamp(20px, 3vw, 28px); }
.dash-datebar h1 em { font-style: normal; font-size: 13px; font-weight: 400; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #2a2a2a; color: var(--sand); vertical-align: middle; }
.dash-datepick input { min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(188, 178, 156, .45); background: transparent; color: #f2efe9; font: inherit; color-scheme: dark; }

.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dash-tile { padding: 16px 18px; border-radius: 12px; background: #1f1f1f; border: 1px solid #2c2c2c; }
.dash-tile strong { display: block; font-size: 30px; line-height: 1; color: var(--sand); }
.dash-tile span { font-size: 13px; opacity: .8; }
.dash-tile--alert { border-color: #a63b32; } .dash-tile--alert strong { color: #ff8e84; }
.dash-empty { padding: 40px 20px; border-radius: 12px; border: 1px dashed #3a3a3a; text-align: center; opacity: .8; }

.dash-list { display: grid; gap: 6px; }
.dash-listbar { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font-size: 13px; opacity: .85; }
.dash-listbar span { flex: 1; }
.dash-link { padding: 4px 0; border: 0; background: none; color: var(--sand); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.dash-res { border-radius: 12px; background: #1f1f1f; border: 1px solid #2c2c2c; border-left: 5px solid var(--sand); transition: opacity .2s; }
.dash-res__head { display: grid; grid-template-columns: 64px minmax(0, 1.6fr) 70px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: #f2efe9; font: inherit; text-align: left; cursor: pointer; }
.dash-res__head:hover { background: rgba(255, 255, 255, .03); }
.dash-res__h-time { font-size: 19px; font-weight: 700; color: #fff; }
.dash-res__h-time small { display: block; font-size: 11px; font-weight: 400; color: var(--sand); }
.dash-res__h-name { font-weight: 700; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-res__h-guests { font-size: 14px; } .dash-res__h-guests b { font-size: 17px; }
.dash-res__h-type { font-size: 14px; }
.dash-res__h-type small { display: block; font-size: 11px; color: #9fd3f2; text-transform: uppercase; letter-spacing: .5px; }
.dash-res__h-flags { display: flex; gap: 6px; } .dash-res__h-flags i { font-style: normal; font-size: 13px; opacity: .7; }
.dash-res__chev { width: 9px; height: 9px; border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(45deg); transition: transform .2s; }
.dash-res.is-open .dash-res__chev { transform: rotate(-135deg); }
.dash-res__body { display: none; grid-template-columns: 86px 1fr auto; gap: 16px; align-items: center; padding: 4px 18px 16px; border-top: 1px solid #2c2c2c; margin-top: 2px; padding-top: 14px; }
.dash-res.is-open .dash-res__body { display: grid; }
.dash-res__body .dash-res__time strong, .dash-res__body .dash-res__time a, .dash-res__body h2 { display: none; }
.dash-res__body .dash-table { margin-top: 0; }
.dash-res--nieuw { border-left-color: #e0a526; }
.dash-res--bevestigd { border-left-color: #2f7d4a; }
.dash-res--aanwezig { border-left-color: #1f6f9f; background: #1c2229; }
.dash-res--nieuw .dash-res__head { background: rgba(224, 165, 38, .06); }
.dash-res--geannuleerd, .dash-res--noshow { border-left-color: #a63b32; opacity: .6; }
.dash-res--geannuleerd h2 { text-decoration: line-through; }
.dash-res.is-busy { opacity: .45; pointer-events: none; }
.dash-res__time strong { display: block; font-size: 24px; color: #fff; }
.dash-res__time a { font-size: 13px; }
.dash-res h2 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.dash-res__meta { margin: 0; font-size: 15px; opacity: .92; }
.dash-res__wish, .dash-res__note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #2a2a2a; font-size: 14px; }
.dash-res__wish small, .dash-res__note small { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.dash-res__note { background: rgba(224, 165, 38, .14); border: 1px dashed rgba(224, 165, 38, .5); cursor: pointer; }
.dash-res__note small { color: #e0a526; opacity: 1; }
.dash-table { display: inline-block; margin-top: 6px; padding: 3px 9px; border: 1px solid #1f6f9f; border-radius: 999px; background: rgba(31, 111, 159, .25); color: #9fd3f2; font: 700 12px var(--font-btn); cursor: pointer; }
.dash-table--empty { border-style: dashed; border-color: #444; background: transparent; color: #888; font-weight: 400; }
.dash-table:hover { border-color: var(--sand); color: #fff; }
.dash-msgbox { width: 100%; padding-top: 8px; font-size: 13px; }
.dash-msgbox label { display: block; font-weight: 700; margin-bottom: 8px; }
.dash-msgbox textarea { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 2px solid transparent; border-radius: 8px; background: #fff; color: #1f1f1f; font: inherit; font-size: 15px; }
.dash-msgbox textarea.is-invalid { border-color: #ff8e84; }
.dash-msgbox > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dash-res__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 360px; }
.dash-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; padding-top: 6px; font-weight: 700; }
.dash-pill { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; background: #3a3a3a; color: #fff; }
.dash-pill--nieuw { background: #e0a526; color: #000; }
.dash-pill--bevestigd { background: #2f7d4a; }
.dash-pill--aanwezig { background: #1f6f9f; }
.dash-pill--group { background: #e0a526; color: #000; }
.dash-tile--present strong { color: #9fd3f2; }
.dash-pill--geannuleerd, .dash-pill--noshow { background: #a63b32; }
.dash-pill--src { background: transparent; border: 1px solid #555; color: #ccc; }

.dash-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .75); overflow-y: auto; }
.dash-modal__card { width: min(560px, 100%); padding: 26px; border-radius: 14px; background: #1f1f1f; border-top: 5px solid var(--brown); animation: dash-in .3s var(--ease); }
.dash-modal__card h2 { margin: 0 0 6px; color: #fff; }
.dash-modal__hint { font-size: 14px; opacity: .8; }
.dash-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-form__full { grid-column: span 2; }
.dash-form label { display: block; font-size: 13px; font-weight: 700; }
.dash-form input, .dash-form select, .dash-form textarea { display: block; width: 100%; margin-top: 5px; padding: 12px; border: 2px solid transparent; border-radius: 8px; background: #fff; color: #1f1f1f; font: inherit; font-size: 16px; font-weight: 400; }
.dash-form input:focus, .dash-form select:focus, .dash-form textarea:focus { outline: 0; border-color: var(--sand); }
.dash-modal__msg { min-height: 22px; margin: 12px 0 0; font-weight: 700; color: #ff8e84; }
.dash-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.dash-form label em { font-weight: 400; font-style: normal; opacity: .7; }
.dash-form__mail { padding: 12px; border-radius: 8px; border: 1px dashed #444; }
.dash-check { display: flex !important; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px !important; }
.dash-check input { width: auto !important; margin: 0 !important; }

/* Weekoverzicht */
.dash-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dash-wday { display: flex; flex-direction: column; gap: 10px; min-height: 180px; padding: 14px; border-radius: 12px; background: #1f1f1f; border: 1px solid #2c2c2c; color: #f2efe9 !important; text-decoration: none; transition: border-color .2s, transform .15s var(--ease); }
.dash-wday:hover { transform: translateY(-2px); border-color: var(--brown); }
.dash-wday.is-today { border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
.dash-wday.is-past { opacity: .6; }
.dash-wday__head small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.dash-wday__head strong { font-size: 17px; }
.dash-wday__nums { font-size: 13px; line-height: 1.5; opacity: .9; }
.dash-wday__nums b { font-size: 22px; color: var(--sand); }
.dash-wday__types { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.dash-wday__types > span { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-top: 1px solid #2c2c2c; }
.dash-wday__types em { font-style: normal; opacity: .8; white-space: nowrap; }
.dash-wday__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; font-size: 12px; opacity: .9; align-items: center; }
.dash-wday__empty { font-size: 13px; opacity: .5; }
@media (max-width: 1100px) { .dash-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Kalendertje */
.dash-cal { max-width: 520px; }
.dash-cal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-cal__head h2 { flex: 1; margin: 0; text-align: center; font-size: 20px; text-transform: capitalize; }
.dash-cal__dow, .dash-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dash-cal__dow span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .6; text-align: center; padding: 4px 0; }
.dash-cal__day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 4px 2px; border-radius: 8px; background: #1f1f1f; border: 1px solid #2c2c2c; color: #f2efe9 !important; text-decoration: none; font-size: 12px; line-height: 1.2; }
.dash-cal__day b { font-size: 15px; }
.dash-cal__day small { opacity: .8; font-size: 11px; white-space: nowrap; }
.dash-cal__day.has-res { border-color: rgba(188, 178, 156, .6); background: #262420; }
.dash-cal__day.is-past { opacity: .45; }
.dash-cal__day.is-today { outline: 2px solid var(--sand); outline-offset: -2px; }
.dash-cal__day:hover { background: var(--brown); border-color: var(--brown); opacity: 1; }
.dash-cal__day i { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #a63b32; font-style: normal; font-size: 10px; font-weight: 700; }
.dash-cal__hint { margin: 12px 0 0; font-size: 12px; opacity: .65; }
.dash-form__label { display: block; font-size: 13px; font-weight: 700; }
.dash-form__datebtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 5px; padding: 12px; border: 2px solid transparent; border-radius: 8px; background: #fff; color: #1f1f1f; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.dash-form__datebtn:focus { outline: 0; border-color: var(--sand); }
.dash-form__datebtn i { font-style: normal; opacity: .7; }
.dash-modal--top { z-index: 60; }
.dash-foot { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; font-size: 12px; opacity: .55; }
.dash-foot a { color: inherit; }
.dash-foot:hover { opacity: 1; }
@media (max-width: 760px) {
	.dash-week { grid-template-columns: 1fr 1fr; }
	.dash-wday { min-height: 0; }
	.dash-top { padding: 10px 16px; } .dash-top__brand span { display: none; }
	.dash-main { padding: 16px 14px 60px; }
	.dash-btn--add { margin-left: 0; width: 100%; }
	.dash-tiles { gap: 8px; } .dash-tile { padding: 12px; } .dash-tile strong { font-size: 24px; } .dash-tile span { font-size: 11px; }
	.dash-res__head { grid-template-columns: 52px minmax(0, 1fr) auto 14px; gap: 8px; padding: 10px 12px; }
	.dash-res__h-type, .dash-res__h-flags { display: none; }
	.dash-res__h-name .dash-pill { display: none; }
	.dash-res__body { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; }
	.dash-res__time strong { font-size: 20px; }
	.dash-res__actions { grid-column: 1 / -1; justify-content: stretch; max-width: none; }
	.dash-res__actions .dash-btn { flex: 1; }
	.dash-cal__day { min-height: 48px; } .dash-cal__day small { font-size: 10px; }
	.dash-foot { padding: 0 14px 40px; }
	.dash-form { grid-template-columns: 1fr; } .dash-form__full { grid-column: auto; }
}