@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* MesaWeb-huisstijl — zie docs/HUISSTIJL.md */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --navy: #0D1B2A; --navy-2: #16283c; --green: #1F4D3D; --gold: #D4AF37; --cream: #F5EFE6; --muted: #5c6670; }
body { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; background: var(--cream); color: #1c2733; display: flex; min-height: 100vh; }
a { color: var(--green); }

.sidebar { width: 220px; background: var(--navy); color: #eee; display: flex; flex-direction: column; padding: 1.2rem .9rem; position: sticky; top: 0; height: 100vh; }
.side-brand { font-weight: 600; font-size: 1.05rem; letter-spacing: .18em; display: flex; align-items: center; gap: .5rem; }
.side-brand svg { width: 26px; height: 20px; }
.side-brand span { color: var(--gold); }
.side-tenant { font-size: .85rem; color: #93a4b5; margin: .2rem 0 1.4rem; }
.sidebar nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.sidebar nav a { color: #ddd; text-decoration: none; padding: .5rem .7rem; border-radius: 8px; }
.sidebar nav a.active, .sidebar nav a:hover { background: var(--navy-2); color: #fff; }
.sidebar nav a.active { box-shadow: inset 3px 0 0 var(--gold); }
.side-langs { display: flex; gap: .3rem; margin-bottom: .8rem; }
.side-langs a { color: #93a4b5; text-decoration: none; font-size: .75rem; padding: .15rem .45rem; border-radius: 4px; }
.side-langs a.active { background: var(--gold); color: var(--navy); }
.login-langs { text-align: center; margin-top: 1rem; }
.login-langs a { text-decoration: none; font-size: .8rem; padding: .2rem .45rem; border-radius: 4px; color: var(--muted); }
.login-langs a.active { background: var(--navy); color: var(--gold); }
.palettes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .8rem; }
.palette { display: flex; padding: 0; width: 52px; height: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; }
.palette span { flex: 1; }
.palette:hover { border-color: var(--gold); }
.palette-reset { background: none; border: 1px solid #ddd; color: var(--muted); font-size: .85rem; }
.side-bottom { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.side-bottom a { color: #93a4b5; text-decoration: none; }
.side-bottom button { background: none; border: 1px solid #3a4d63; color: #93a4b5; border-radius: 8px; padding: .35rem .7rem; cursor: pointer; }

.content { flex: 1; padding: 2rem; max-width: 980px; }
.content h1 { margin-bottom: 1.2rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { background: #fff; border-radius: 12px; padding: 1.2rem; text-decoration: none; color: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card { border-top: 3px solid var(--gold); }
.card strong { display: block; font-size: 1.5rem; margin-bottom: .3rem; color: var(--navy); }
.card span { font-size: .9rem; color: var(--muted); }

.form { margin-bottom: 1.4rem; }
fieldset { background: #fff; border: none; border-radius: 12px; padding: 1.2rem; margin-bottom: 1.2rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
legend { font-weight: 600; padding: 0 .3rem; }
legend small { font-weight: 400; color: var(--muted); }
label { display: block; margin-bottom: .8rem; font-size: .9rem; }
input, textarea, select { width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid #ddd; border-radius: 8px; font: inherit; background: #fff; }
input[type=color] { height: 42px; padding: .2rem; }
input[type=checkbox], input[type=file] { width: auto; }
.checks { display: flex; gap: 1rem; margin-top: .5rem; }
.check { display: flex; align-items: center; gap: .3rem; margin: 0; }
button { background: var(--gold); color: var(--navy); border: none; border-radius: 999px; padding: .55rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(1.06); }
button.danger { background: #b02a2a; }
button.small { padding: .3rem .8rem; font-size: .85rem; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.grid-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.uploads-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.thumb { max-height: 110px; border-radius: 8px; display: block; margin-bottom: .6rem; }

.table { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.table td { padding: .45rem .3rem; border-bottom: 1px solid #f0eae2; vertical-align: top; }
.table .num { text-align: right; white-space: nowrap; }
details { margin-bottom: .8rem; }
summary { cursor: pointer; color: var(--green); margin-bottom: .6rem; }

.item-list { margin-bottom: .8rem; }
.item-edit { border-bottom: 1px solid #f0eae2; padding: .3rem 0; margin: 0; }
.item-edit summary { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; }
.item-edit .item-price { margin-left: auto; white-space: nowrap; font-weight: 600; }
.item-edit .item-alg { font-size: .75rem; color: var(--muted); }
.item-edit .item-editlabel { font-size: .85rem; color: var(--green); white-space: nowrap; }
.item-form { background: var(--cream); border-radius: 10px; padding: 1rem; margin: .5rem 0; }
.item-edit > form:last-child { margin: .3rem 0 .6rem; }

.alg-details { margin: .4rem 0 .8rem; }
.alg-checks { flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.photo-tile { position: relative; }
.photo-tile img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.photo-tile form { position: absolute; top: .4rem; right: .4rem; }

.message { background: #fff; border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.message.unread { border-left: 4px solid var(--gold); }
.message-head { display: flex; gap: 1rem; align-items: baseline; margin-bottom: .4rem; flex-wrap: wrap; }
.message .date { color: var(--muted); font-size: .85rem; margin-left: auto; }

.super-banner { background: #fff3d6; border: 1px solid #e8cf96; color: #6b5320; padding: .55rem .9rem; border-radius: 10px; margin-bottom: 1.2rem; font-size: .92rem; }
.row-actions form { display: inline; }
.row-actions button.small { padding: .15rem .55rem; font-size: .8rem; }

.flash { background: #e8f6e8; border: 1px solid #b7e0b7; color: #205a20; padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; }
.error { background: #fbe9e9; border: 1px solid #eec3c3; color: #8a1f1f; padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; }

body.super { display: block; }
.topbar { background: var(--navy); color: #eee; display: flex; align-items: center; gap: 1.5rem; padding: .8rem 2rem; }
.topbar .side-brand small { font-weight: 400; color: #93a4b5; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: #ddd; text-decoration: none; }
.topbar nav a:hover { color: #fff; }
.topbar button { background: none; border: 1px solid #3a4d63; color: #93a4b5; padding: .35rem .7rem; }
.super .content { margin: 0 auto; }
fieldset { overflow-x: auto; }
.table th { text-align: left; padding: .45rem .3rem; border-bottom: 2px solid #e2dcc9; font-size: .85rem; color: var(--muted); }
tr.inactive td { opacity: .45; }

.login-page { align-items: center; justify-content: center; }
.login-box { background: #fff; border-radius: 16px; padding: 2.2rem 2rem; width: 350px; box-shadow: 0 10px 34px rgba(13,27,42,.14); border-top: 3px solid var(--gold); }
.login-logo { display: flex; justify-content: center; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.login-logo svg { width: 40px; height: 31px; }
.login-word { font-weight: 600; font-size: 1.25rem; letter-spacing: .2em; color: var(--navy); }
.login-word span { color: var(--gold); }
.login-sub { display: block; text-align: center; font-size: .55rem; letter-spacing: .28em; color: var(--muted); margin-bottom: .8rem; }
.login-tenant { text-align: center; color: var(--muted); margin-bottom: 1.2rem; }
.login-box button { width: 100%; margin-top: .5rem; }

@media (max-width: 760px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .grid3, .uploads-row { grid-template-columns: 1fr; }
}

.help-intro { color: var(--muted); margin-bottom: 1.4rem; max-width: 46rem; }
.help-section { background: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); max-width: 46rem; }
.help-section h2 { font-size: 1.05rem; color: var(--navy); margin-bottom: .5rem; }
.help-section p { font-size: .92rem; margin-bottom: .45rem; color: #1c2733; }
.help-section code { background: var(--cream); border-radius: 5px; padding: .05rem .4rem; font-size: .88em; }

/* Mini-CRM (superadmin) */
.crm-add { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.crm-add input, .crm-add select { width: auto; margin: 0; flex: 1; min-width: 140px; }
.crm-add button { white-space: nowrap; }
.crm-filters a { margin-right: .5rem; text-decoration: none; font-size: .88rem; padding: .15rem .55rem; border-radius: 999px; color: var(--muted); border: 1px solid #ddd; }
.crm-filters a.active { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.crm-status { font-size: .78rem; padding: .12rem .5rem; border-radius: 999px; background: #e8e4dc; white-space: nowrap; }
.crm-nieuw { background: #e3ecf6; }
.crm-bezocht { background: #efe6cf; }
.crm-interesse { background: #f6ecc8; }
.crm-demo { background: #dcead9; }
.crm-klant { background: #1F4D3D; color: #fff; }
.crm-afgewezen { background: #eee; color: #888; }
.crm-due { color: #a33; font-weight: 600; }
.crm-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; align-items: start; }
.crm-notes { margin-top: 1rem; }
@media (max-width: 900px) { .crm-cols { grid-template-columns: 1fr; } }

/* AI-teksthulp */
.ai-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; background: #fff; border-radius: 12px; padding: .7rem .9rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 3px solid var(--gold); }
.ai-bar small { color: var(--muted); }
.ai-bar button { font-size: .88rem; padding: .4rem .9rem; }

/* Openingstijden-kiezer */
.hours-rows { display: flex; flex-direction: column; gap: .35rem; }
.hours-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hours-day { width: 90px; font-size: .9rem; }
.hours-block { display: flex; align-items: center; gap: .3rem; }
.hours-block select { width: auto; margin: 0; padding: .3rem .4rem; }

/* Gesloten dagen */
.closed-days-title { margin: 1.1rem 0 .5rem; font-size: .95rem; }
.closed-days-title small { font-weight: 400; color: var(--muted); }
.closed-day { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.closed-day input { width: auto; margin: 0; }
.closed-day input[name=cd_label] { flex: 1; max-width: 300px; }

.crm-quick { display: flex; gap: 1rem; flex-wrap: wrap; margin: -.4rem 0 1rem; font-size: .95rem; }
.crm-quick a { text-decoration: none; }
.crm-soc { color: var(--muted); font-size: .85rem; }

.crm-filterbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
  background: #fff; border-radius: 12px; padding: .6rem .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.crm-filterbar select, .crm-filterbar input { width: auto; margin: 0; padding: .4rem .55rem; }
.crm-filterbar input[name=q] { min-width: 200px; flex: 1; max-width: 320px; }
.crm-wis { font-size: .85rem; white-space: nowrap; }
.crm-aantal { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }

.crm-demosite { display: inline-block; font-size: .72rem; background: var(--navy); color: var(--gold); border-radius: 999px; padding: .08rem .55rem; text-decoration: none; white-space: nowrap; vertical-align: middle; margin-left: .25rem; }
.crm-demosite:hover { filter: brightness(1.25); }

.crm-maps { font-size: .8rem; text-decoration: none; margin-left: .4rem; }