
:root{--rose:#a96d83;--rose-light:#f7edf1;--ink:#302a30;--muted:#827981;--line:#eadfe4;--bg:#faf8f9;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}a{color:var(--rose);text-decoration:none}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.2}h2{font-size:23px;line-height:1.25}.eyebrow{letter-spacing:2px;font-size:10px;font-weight:800;color:var(--rose);margin-bottom:9px}.muted{color:var(--muted)}.shell{display:flex;min-height:100vh}.sidebar{width:255px;flex:none;background:#fff;border-right:1px solid var(--line);padding:30px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.logo{display:flex;align-items:center;gap:12px;padding:4px 10px 34px}.logo strong{font-family:Georgia,serif;font-size:19px}.logo small{display:block;letter-spacing:2px;color:var(--muted);font-size:9px}.logo-mark,.brand-icon{display:grid;place-items:center;background:var(--rose-light);color:var(--rose);border-radius:15px;width:44px;height:44px;font-size:28px}.sidebar nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;text-align:left;color:#6c6068;padding:13px 15px;border-radius:11px;font-size:14px;display:flex;gap:13px;align-items:center}.nav-item.active,.nav-item:hover{background:var(--rose-light);color:#8d5269;font-weight:700}.sidebar-bottom{margin-top:auto;padding:18px 10px 0;display:flex;flex-direction:column;gap:12px}.role-pill{font-size:12px;color:#7b5162;background:var(--rose-light);border-radius:25px;padding:8px 12px;align-self:flex-start}.logout{font-size:13px}.content{padding:36px clamp(20px,4vw,64px);width:100%;max-width:1400px;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.topbar h1{font-family:Georgia,serif;font-size:34px;margin:0}.top-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.top-actions a{margin-left:15px}.status-dot{background:#77b28a;width:8px;height:8px;border-radius:50%}.panel{display:none}.panel.active{display:block}.welcome{background:linear-gradient(110deg,#f2e3e9,#fcf7f9);border-radius:20px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:10px}.welcome h2{font:30px Georgia,serif;max-width:430px}.welcome p:last-child{color:#74616c;margin-bottom:0}.welcome-flower{font-size:100px;color:#d7a6b7;line-height:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:23px 0 32px}.stat,.card,.note,.quick-grid button{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px}.stat span,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{font:38px Georgia,serif;display:block;margin:8px 0}.section-heading{font:23px Georgia,serif}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.quick-grid button{text-align:left;font-size:25px;color:var(--rose)}.quick-grid strong,.quick-grid span{display:block;font-size:14px;color:var(--ink)}.quick-grid span{color:var(--muted);font-size:12px;margin-top:5px}.note{margin-top:25px;background:#fffcfd}.note p{color:var(--muted);margin-bottom:0}.panel-heading{margin-bottom:20px}.panel-heading h2{font:30px Georgia,serif}.card{margin-top:0!important;margin-bottom:20px}.card h2{font:22px Georgia,serif}.card p{color:var(--muted)}.card form{display:grid;gap:12px;margin-bottom:14px}.card label,.auth label{display:grid;gap:6px;font-size:13px;font-weight:650;color:#685c65}.card input,.card textarea,.auth input{display:block;width:100%;padding:12px 13px;border:1px solid #ded4d9;border-radius:9px;background:#fff;color:var(--ink);outline-color:var(--rose)}.card input[type=color]{height:52px;padding:5px}.btn,.card button[type=submit]{border:0;background:var(--rose);color:white;border-radius:9px;padding:12px 18px;font-weight:700;width:fit-content}.card button:not(.btn){border:1px solid var(--line);background:#fff;color:#925b70;border-radius:9px;padding:10px 14px}.admin-item{border-bottom:1px solid var(--line);padding:14px 0}.admin-item:last-child{border-bottom:0}.admin-item p{margin:4px 0}.alert,.success{padding:13px 16px;border-radius:10px;margin-bottom:20px}.alert{background:#fff0ef;color:#a13636}.success{background:#eaf8ed;color:#2e7442}.auth{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{background:white;border:1px solid var(--line);border-radius:20px;padding:38px;max-width:450px;width:100%;box-shadow:0 16px 50px #6b3b5010}.auth-card h1{font:30px Georgia,serif}.auth-card h2{font-size:18px}.auth-card form{display:grid;gap:17px}.auth-card .btn{width:100%}.brand-icon{margin-bottom:18px}@media(max-width:850px){.shell{display:block}.sidebar{position:relative;height:auto;width:100%;padding:15px}.logo{padding-bottom:12px}.sidebar nav{display:flex;overflow:auto;gap:5px}.nav-item{white-space:nowrap}.sidebar-bottom{flex-direction:row;align-items:center;justify-content:space-between;padding:10px}.content{padding:25px 15px}.welcome{padding:24px}.welcome-flower{font-size:55px}.stats{gap:8px}.stat{padding:13px}.stat strong{font-size:28px}.top-actions{display:none}}@media(max-width:480px){.quick-grid{grid-template-columns:1fr}.welcome h2{font-size:24px}.stats{grid-template-columns:repeat(3,1fr)}.stat span{font-size:10px}}

/* Studio refresh: sophisticated neutral + plum */
:root{--rose:#815b6e;--rose-light:#f2e9ee;--ink:#29252a;--muted:#827a80;--line:#ece5e7;--bg:#f8f6f5}body{background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.012em}.sidebar{background:#fcfbfa;border-right-color:#ebe6e5;padding:30px 18px;width:265px}.logo{border-bottom:1px solid var(--line);margin-bottom:23px;padding-bottom:25px}.logo strong{font-size:21px;letter-spacing:-.035em}.logo-mark{background:#ece0e5;color:#805469}.nav-item{font-weight:550;padding:13px 15px;border-radius:10px;transition:background .16s,transform .16s}.nav-item:hover{transform:translateX(2px)}.nav-item.active{background:#eee3e8;color:#70445c}.content{max-width:1480px;padding-top:44px}.topbar{border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:30px}.topbar h1{font-size:37px}.welcome{min-height:220px;background:linear-gradient(115deg,#e9dbe1,#f8eff2 75%,#f8f1ed);border:1px solid #eadde1;border-radius:18px}.welcome h2{font-size:34px}.welcome-flower{font-size:112px;opacity:.6}.stat,.card,.quick-grid button,.recent,.note{border-color:#eae4e5;box-shadow:0 6px 28px #32202a08}.stat{min-height:136px}.stat strong{font-size:44px}.quick-grid button{transition:transform .16s,box-shadow .16s}.quick-grid button:hover{transform:translateY(-3px);box-shadow:0 12px 30px #32202a13}.quick-grid strong{margin-top:6px}.panel-heading{padding-bottom:16px;border-bottom:1px solid var(--line)}.card{padding:27px}.card form{max-width:680px}.card textarea{min-height:90px;resize:vertical}.btn,.card button[type=submit]{transition:filter .2s,transform .2s}.btn:hover,.card button[type=submit]:hover{filter:brightness(.94);transform:translateY(-1px)}.card input:focus,.card textarea:focus{border-color:#815b6e;box-shadow:0 0 0 3px #815b6e18}.recent{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:27px}.recent-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.recent-head h2{margin:0}.subtle-link{border:0;background:none;color:var(--rose);font-size:13px;font-weight:700}.recent-list{margin-top:12px}.recent-row{display:flex;align-items:center;gap:14px;padding:14px 2px;border-top:1px solid var(--line)}.recent-row>div{flex:1}.recent-row strong,.profile-mini strong{display:block;font-size:14px}.recent-row small,.profile-mini small{display:block;color:var(--muted);font-size:12px}.recent-date{font-size:12px;color:var(--muted);text-align:right}.avatar{width:39px;height:39px;flex:none;display:grid;place-items:center;background:var(--rose-light);color:var(--rose);border-radius:12px;font-weight:800}.profile-mini{display:flex;gap:11px;align-items:center;border-top:1px solid var(--line);padding-top:17px;margin-bottom:8px}.empty-state{padding:26px 4px;color:var(--muted);font-size:14px}.auth-card{box-shadow:0 25px 80px #37222d18}.note{background:#fcfaf9}@media(max-width:850px){.sidebar{width:100%;padding:15px}.logo{margin-bottom:8px;border-bottom:0;padding-bottom:10px}.topbar h1{font-size:29px}.content{padding-top:25px}.welcome{min-height:175px}.welcome h2{font-size:27px}.recent{padding:16px}.profile-mini{display:none}}@media(max-width:480px){.welcome-flower{font-size:48px}.recent-date{max-width:80px}.stat strong{font-size:31px}.stat{min-height:110px}.stat small{font-size:10px}.topbar{margin-bottom:18px}}

/* Login afgestemd op originele Laisela Studio huisstijl */
.auth{background:radial-gradient(circle at 15% 20%,#ffffff 0,transparent 45%),linear-gradient(145deg,#fffaf7,#f7f1ec);padding:24px;min-height:100vh}
.auth-card{max-width:480px;text-align:center;padding:45px clamp(22px,5vw,48px);border:1px solid #eadfd8;border-radius:30px;box-shadow:0 22px 55px rgba(47,45,49,.10);background:#fffdfa}
.auth-logo{display:block;width:min(210px,70%);height:150px;object-fit:contain;margin:0 auto 10px}
.auth-card h1{font-family:Georgia,serif;font-size:32px;color:#2f2d31;margin-bottom:12px}
.auth-card .eyebrow{color:#9b8475;letter-spacing:2.5px}
.auth-card .muted{color:#70676a;margin-bottom:28px}
.auth-card form{text-align:left;gap:17px}
.auth-card label{color:#51494b}
.auth-card input{background:white;border:1px solid #eadfd8;border-radius:14px;padding:15px}
.auth-card input:focus{outline:2px solid #b8a79c;outline-offset:1px}
.auth-card .btn{background:#b8a79c;border-radius:14px;padding:15px;transition:background .15s}
.auth-card .btn:hover{background:#9b897d}
@media(max-width:500px){.auth-card{padding:28px 20px}.auth-logo{height:120px}.auth-card h1{font-size:27px}}

.editor-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.editor-links a{display:block;padding:17px;border:1px solid #d6c8bf;border-radius:12px;background:#faf7f4;color:#56483e;font-weight:700}.editor-links a:hover{background:#eee5de}

.appointment-status-form{display:flex!important;align-items:end;flex-wrap:wrap;gap:10px!important}.appointment-status-form select{padding:10px;border:1px solid #d7c8bc;border-radius:9px;background:white}.appointment-status-form button{background:#746257!important;color:white!important}

.edit-details{margin:12px 0;padding:12px;background:#faf7f4;border:1px solid #e5d9d0;border-radius:12px}.edit-details summary{cursor:pointer;font-weight:650}.appointment-edit-form{margin-top:15px}.appointment-edit-form input{width:100%}


/* LAISELA STUDIO — officiële chocoladebruine huisstijl, gebaseerd op css/theme.css.
   Deze overrides wijzigen uitsluitend de vormgeving van /admin. */
:root{--rose:#382016;--rose-light:#f0d6b5;--ink:#241711;--muted:#654b3c;--line:#e4c9ac;--bg:#f7ebdd;--white:#fffaf3;--chocolate:#382016;--chocolate-hover:#70401e;--gold:#d8a66c;--cream:#fff8ef}
html{color-scheme:light}body{background:linear-gradient(145deg,#fff9f1,#f3dfc6);color:var(--ink)}
a,.subtle-link,.quick-grid button{color:var(--chocolate)}
h1,h2,h3,.logo strong,.section-heading,.panel-heading h2,.card h2{color:#422515}
.sidebar{background:#fff8ef;border-right:1px solid #ddbc98;box-shadow:8px 0 25px #38201609}
.logo{border-color:#e4c9ac}.logo strong{color:#382016}.logo small{color:#654b3c}
.logo-mark,.brand-icon{background:#eed2ae;color:#422515}
.nav-item{color:#654b3c}.nav-item:hover,.nav-item.active{background:#eed2ae;color:#382016}
.role-pill,.avatar{background:#f0d6b5;color:#422515}.logout{color:#683b1e}
.topbar{border-color:#e4c9ac}.eyebrow{color:#8b512a}.status-dot{background:#7e985c}
.welcome{background:radial-gradient(circle at 92% 15%,#d8a66c45,transparent 33%),linear-gradient(115deg,#f0d6b5,#fff8ef 85%);border:1px solid #ddbc98;box-shadow:0 14px 32px #3820160d}
.welcome h2{color:#422515}.welcome p:last-child{color:#654b3c}.welcome-flower{color:#8b512a;opacity:.42}
.stat,.card,.recent,.note,.quick-grid button{background:#fffaf3;border:1px solid #e5c8a8;box-shadow:0 9px 24px #3820160a;color:#241711}
.stat strong,.quick-grid strong,.recent h2{color:#422515}.stat span,.stat small,.quick-grid span,.muted,.recent-date,.recent-row small{color:#654b3c}
.quick-grid button:hover,.editor-links a:hover{background:#f0d6b5;box-shadow:0 12px 28px #38201618}
.note,.edit-details{background:#fff1de;border-color:#e2c29c}.editor-links a{background:#fff8ef;color:#422515;border-color:#d7b894}
.btn,.card button[type=submit],.appointment-status-form button,.auth-card .btn{background:#382016!important;color:#fff7ea!important;border:1px solid #382016!important;border-radius:12px}
.btn:hover,.card button[type=submit]:hover,.appointment-status-form button:hover,.auth-card .btn:hover{background:#70401e!important;color:#fff!important}
.card button:not(.btn):not([type=submit]){background:#fff8ef;color:#422515;border-color:#d7b894}
.card button:not(.btn):not([type=submit]):hover{background:#f0d6b5}
.card label,.auth label{color:#422515}
.card input,.card textarea,.card select,.auth input,.appointment-status-form select{background:#fffaf3;color:#241711;border:1px solid #d7b894;border-radius:12px}
.card input:focus,.card textarea:focus,.card select:focus,.auth input:focus{outline:2px solid #93562d;outline-offset:1px;border-color:#93562d;box-shadow:0 0 0 3px #d8a66c33}
.auth{background:radial-gradient(circle at 12% 15%,#d8a66c55,transparent 34%),linear-gradient(145deg,#fff9f1,#f3dfc6)}
.auth-card{background:#fffaf3;border:1px solid #ddbc98;box-shadow:0 22px 65px #38201624}
.auth-card h1{color:#422515}.auth-card .eyebrow{color:#8b512a}.auth-card .muted{color:#654b3c}
.auth-card input{background:#fffdf9}.recent-row,.profile-mini,.panel-heading{border-color:#e4c9ac}
.alert{background:#fff0e9;color:#8e342b}.success{background:#eaf5e5;color:#355d30}
:focus-visible{outline:3px solid #9e602e;outline-offset:3px}
@media(max-width:850px){.sidebar{border-right:0;border-bottom:1px solid #ddbc98}.content{max-width:100%}}

/* Responsive Laisela Studio admin — telefoon, tablet, laptop */
.sidebar-logo{width:56px;height:56px;object-fit:contain;flex:none;border-radius:12px;background:#fffaf3}
.logo{align-items:center}.logo strong{overflow-wrap:anywhere}
.logout-form{margin:0!important;padding:0!important;display:block!important}
.logout-button{background:#382016;border:1px solid #382016;color:#fff8ef;border-radius:12px;padding:11px 16px;font:700 13px/1.2 inherit;cursor:pointer;white-space:nowrap}
.logout-button:hover{background:#70401e;color:#fff}
.top-actions .top-logout{margin-left:10px!important}.top-actions{flex-wrap:wrap;justify-content:flex-end}
.mobile-menu-toggle{display:none;border:1px solid #d7b894;border-radius:11px;background:#fff8ef;color:#382016;padding:10px 14px;font-weight:700;cursor:pointer}
.content,.card,.panel,.recent{min-width:0}
.card,.recent{overflow-wrap:anywhere}
.card table,.recent table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card input,.card textarea,.card select{max-width:100%}
@media (min-width:851px) and (max-width:1200px){.sidebar{width:235px;padding:22px 12px}.content{padding:28px 22px}.stats{gap:12px}.stat{padding:17px}.topbar h1{font-size:31px}}
@media(max-width:850px){
 .shell{display:block}.sidebar{position:relative;top:auto;height:auto;min-height:0;width:100%;padding:12px 18px;box-shadow:none}
 .sidebar .logo{padding:0;margin:0;border:0}.sidebar-logo{width:48px;height:48px}
 .sidebar nav{display:none;flex-direction:column;overflow:visible;margin-top:12px;gap:4px}
 .sidebar.menu-open nav{display:flex}.sidebar .nav-item{width:100%;white-space:normal}
 .sidebar-bottom{display:none}.sidebar.menu-open .sidebar-bottom{display:flex;flex-wrap:wrap;gap:12px}
 .content{padding:18px 16px 35px}.topbar{flex-wrap:wrap;gap:10px;padding-bottom:15px}
 .mobile-menu-toggle{display:inline-flex;align-items:center;gap:8px;order:0}
 .topbar>div:first-of-type{flex:1;min-width:150px}.topbar h1{font-size:27px}
 .top-actions{display:flex;width:100%;justify-content:flex-start;font-size:12px;gap:10px}
 .top-actions a{margin-left:0}.top-actions .top-logout{margin-left:auto!important}
 .welcome{padding:22px;min-height:0}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stat{padding:13px}.stat strong{font-size:29px}
}
@media(max-width:560px){
 .content{padding:14px 12px 28px}.sidebar{padding:10px 12px}
 .welcome{padding:20px}.welcome h2{font-size:24px}.welcome-flower{display:none}
 .stats{grid-template-columns:1fr;gap:10px;margin:14px 0 22px}.stat{min-height:0;padding:15px 18px}.stat strong{font-size:29px;margin:2px 0}
 .quick-grid{grid-template-columns:1fr}.card,.recent{padding:16px}.panel-heading h2{font-size:24px}
 .topbar h1{font-size:25px}.top-actions{gap:7px}.top-actions .status-dot{display:none}
 .logout-button{padding:10px 12px}.auth-card{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.nav-item,.btn,.quick-grid button{transition:none!important}}

/* Responsive chocolate-brown appointment calendar */
.calendar-shell,.calendar-bottom>.card{background:#fffaf3;border:1px solid #e6d5c2;border-radius:20px;box-shadow:0 6px 28px #3820160b}.calendar-shell{margin-top:20px;overflow:hidden}.calendar-toolbar{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.calendar-toolbar h3{font-size:clamp(17px,2vw,24px);color:#382016;margin:0;text-transform:capitalize}.calendar-month-nav,.calendar-views{display:flex;gap:5px}.calendar-month-nav button,.calendar-views button{border:1px solid #dfc8b0;border-radius:10px;background:#fff;color:#382016;padding:9px 13px;cursor:pointer;font-weight:600}.calendar-views button.selected{background:#382016;color:#fff}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{background:#f3e8dc;border-top:1px solid #ead7c4}.calendar-weekdays span{text-align:center;font-size:12px;font-weight:700;padding:12px 2px;color:#70401e}.calendar-grid{border-top:1px solid #ead7c4}.cal-day{appearance:none;text-align:left;min-width:0;min-height:112px;background:#fffaf3;border:0;border-right:1px solid #eee0d1;border-bottom:1px solid #eee0d1;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:5px;cursor:pointer;color:#382016}.cal-day:hover,.cal-day:focus-visible{background:#f5e8d8;outline:2px solid #8b512a;outline-offset:-2px}.cal-day.is-selected{background:#f2e1cc;box-shadow:inset 0 0 0 2px #8b512a}.cal-day.is-outside{opacity:.42}.cal-day-number{font-weight:700;align-self:flex-start;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}.cal-day.is-today .cal-day-number{background:#382016;color:#fff}.cal-event{background:#70401e;color:#fff;padding:4px 6px;border-radius:6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-more{font-size:11px;color:#70401e}.calendar-legend{padding:12px 18px;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#70401e}.calendar-legend i{display:inline-block;width:9px;height:9px;background:#70401e;border-radius:3px;margin-right:4px}.calendar-bottom{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;margin-top:18px}.calendar-bottom>.card{padding:20px;min-width:0}.calendar-bottom h3{color:#382016;margin:0 0 14px}.calendar-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.calendar-form-grid label{min-width:0}.calendar-form-grid input{width:100%;min-width:0}.cal-day-event{padding:10px 0;border-bottom:1px solid #ead7c4;overflow-wrap:anywhere}.cal-day-event p{margin:5px 0}.cal-day-event small{color:#70401e}.cal-empty{color:#70401e}
@media(max-width:900px){.calendar-bottom{grid-template-columns:1fr}.cal-day{min-height:88px;padding:5px}.cal-event{font-size:10px}}
@media(max-width:600px){.calendar-toolbar{padding:12px;gap:10px}.calendar-toolbar h3{order:-1;width:100%}.calendar-weekdays span{font-size:10px;padding:9px 0}.cal-day{min-height:65px;padding:3px;gap:3px}.cal-day-number{font-size:12px;width:22px;height:22px}.cal-event{font-size:9px;padding:3px;line-height:1.2}.cal-more{font-size:9px}.calendar-legend{font-size:11px}.calendar-form-grid{grid-template-columns:1fr}.calendar-bottom>.card{padding:14px}}

/* Laisela Studio — officiële websitekleuren */
.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px}.palette-item{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #e4c9ac;border-radius:14px;background:#fff8ef;color:#241711}.palette-swatch{height:64px;border-radius:10px;border:1px solid #d9bfa2}.palette-item strong{font-size:14px}.palette-item code{font-size:13px;color:#654b3c;user-select:all}.palette-hint{margin-top:16px;color:#654b3c}@media(max-width:600px){.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.palette-item{padding:9px}.palette-swatch{height:48px}}

/* Afspraken veilig verwijderen */
.appointment-delete-form{margin:12px 0}.appointment-delete-button{border:1px solid #a65b46;background:#fff8ef;color:#743322;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;min-height:44px}.appointment-delete-button:hover,.appointment-delete-button:focus-visible{background:#743322;color:#fff8ef}.appointment-delete-button:focus-visible{outline:3px solid #d8a66c;outline-offset:2px}

/* Verplaatsen afspraak — in de officiële chocoladebruine huisstijl */
.reschedule-details{margin:12px 0;border:1px solid #e4c9ac;border-radius:12px;padding:12px;background:#fff8ef}
.reschedule-details summary{cursor:pointer;color:#382016;font-weight:700}
.appointment-reschedule-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:12px}
.appointment-reschedule-form label{display:flex;flex-direction:column;gap:6px;color:#382016;min-width:160px;flex:1}
.appointment-reschedule-form input{max-width:100%;box-sizing:border-box}
@media(max-width:650px){.appointment-reschedule-form{flex-direction:column;align-items:stretch}.appointment-reschedule-form label,.appointment-reschedule-form button{width:100%}}

/* Laisela Studio — mobile-first drawer (overrides legacy horizontal nav) */
.mobile-nav-backdrop,.mobile-nav-close{display:none}
@media(max-width:900px){
 html,body{max-width:100%;overflow-x:hidden}
 .shell{display:block;min-width:0}
 .content{width:100%;max-width:100%;min-width:0;margin:0;padding:18px 16px 40px}
 .topbar{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap;padding-bottom:16px}
 .topbar>div:nth-child(2){min-width:0;flex:1}
 .topbar h1{font-size:clamp(23px,5vw,32px);overflow-wrap:anywhere}
 .mobile-menu-toggle{display:inline-flex!important;position:relative;z-index:20;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 15px;background:#382016;color:#fff8ef;border:1px solid #8b512a;border-radius:12px;box-shadow:0 5px 18px #38201620}
 .mobile-menu-toggle:focus-visible,.mobile-nav-close:focus-visible,.sidebar .nav-item:focus-visible,.logout-button:focus-visible{outline:3px solid #d8a66c;outline-offset:3px}
 .sidebar{display:flex!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:1010;width:min(340px,88vw)!important;height:100dvh!important;max-height:100dvh!important;padding:22px 18px max(20px,env(safe-area-inset-bottom))!important;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .24s ease;box-shadow:12px 0 35px #24171133;background:#fff8ef!important;border-right:1px solid #d8a66c!important;border-bottom:0!important}
 .sidebar.menu-open{transform:translateX(0)}
 .sidebar .logo{display:flex;align-items:center;margin:8px 0 18px!important;padding:8px 2px 18px!important;border-bottom:1px solid #e4c9ac!important}
 .sidebar .sidebar-logo{width:62px;height:62px}
 .sidebar nav,.sidebar.menu-open nav{display:grid!important;grid-template-columns:1fr;gap:6px;overflow:visible;margin:0!important}
 .sidebar .nav-item{display:flex;width:100%;min-height:47px;white-space:normal;text-align:left;color:#382016;font-size:15px;padding:12px 14px;border-radius:12px}
 .sidebar .nav-item.active{background:#e9d1b4;color:#382016}
 .sidebar .nav-item:hover{background:#f2dfc8}
 .sidebar-bottom,.sidebar.menu-open .sidebar-bottom{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding:20px 3px 0;border-top:1px solid #e4c9ac}
 .sidebar .profile-mini{display:flex!important;border:0;padding:0;margin:0}
 .sidebar .logout-form,.sidebar .logout-button{width:100%}
 .sidebar .logout-button{min-height:46px;display:flex;align-items:center;justify-content:center;background:#382016;color:#fff8ef;border:0;border-radius:12px;font-weight:700}
 .mobile-nav-close{display:flex;align-items:center;justify-content:center;gap:9px;align-self:flex-end;min-height:40px;border:1px solid #e4c9ac;background:#fff8ef;color:#382016;border-radius:10px;padding:8px 13px;font-weight:700}
 .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:1009;background:#2417118c;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
 .mobile-nav-backdrop.visible{opacity:1;visibility:visible}
 body.mobile-nav-open{overflow:hidden}
 .top-actions{display:none!important}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat{min-width:0;padding:15px}.stat strong{font-size:clamp(26px,6vw,36px)}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card,.recent{min-width:0;max-width:100%;padding:18px}
 .card input,.card select,.card textarea{max-width:100%;font-size:16px}
 .calendar-toolbar{flex-wrap:wrap}.calendar-bottom{grid-template-columns:1fr}
 .calendar-grid,.calendar-month,.calendar-week{min-width:0;max-width:100%}
 .cal-day{min-width:0;overflow:hidden}
 .cal-event{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .appointment-reschedule-form{flex-wrap:wrap}
 table{max-width:100%}
 .table-wrap,.appointments-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
 .content{padding:14px 12px 32px}
 .topbar{gap:10px}
 .topbar .eyebrow{font-size:9px;letter-spacing:1px}
 .topbar h1{font-size:23px}
 .welcome{padding:18px;min-height:0}.welcome h2{font-size:24px}.welcome-flower{display:none}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-grid{grid-template-columns:1fr}
 .card,.recent{padding:14px}
 .calendar-weekdays span{font-size:10px}
 .cal-day{min-height:62px;padding:3px}
 .cal-event{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-nav-backdrop{transition:none!important}}

/* Compacte driepuntentoets voor mobiel en tablet */
.mobile-menu-dots{display:block;font-size:30px;line-height:1;font-weight:800;letter-spacing:0;transform:translateY(-1px)}
@media(max-width:1024px){.mobile-menu-toggle{width:46px;min-width:46px;height:46px;padding:0!important;flex:0 0 46px;gap:0!important}.mobile-menu-toggle .mobile-menu-dots{margin:auto}}

/* Laisela Studio — rustige mobiele header: links logo, rechts drie puntjes */
.mobile-brand{display:none}
@media(max-width:900px){
 .content{padding-top:10px}
 .topbar{display:grid!important;grid-template-columns:54px minmax(0,1fr) 48px;align-items:center;gap:10px;flex-wrap:nowrap!important;padding:9px 2px 15px;margin-bottom:16px}
 .mobile-brand{display:flex;grid-column:1;grid-row:1;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;text-decoration:none}
 .mobile-brand img{width:50px;height:50px;object-fit:contain}
 .topbar>div:nth-child(3){grid-column:2;grid-row:1;min-width:0}
 .topbar>div:nth-child(3) .eyebrow{display:none}
 .topbar h1{font-size:clamp(23px,5vw,30px)!important;margin:0;color:#382016}
 .mobile-menu-toggle{grid-column:3;grid-row:1;justify-self:end;order:unset!important;display:grid!important;place-items:center;width:46px;height:46px;min-width:46px;padding:0!important;border-radius:12px;background:#fff8ef!important;color:#382016!important;border:1px solid #d7b894!important;box-shadow:none!important}
 .mobile-menu-dots{font-size:31px;line-height:1;transform:none}
 .sidebar{visibility:hidden;pointer-events:none}
 .sidebar.menu-open{visibility:visible;pointer-events:auto}
 .stats{margin-top:8px}
}
@media(max-width:560px){
 .content{padding:8px 14px 32px}
 .topbar{grid-template-columns:48px minmax(0,1fr) 44px;gap:8px}
 .mobile-brand,.mobile-brand img{width:44px;height:44px}
 .mobile-menu-toggle{width:44px;height:44px;min-width:44px}
 .topbar h1{font-size:25px!important}
}

/* Laisela Studio — dezelfde minimalistische navigatie op telefoon, tablet en desktop */
@media(min-width:901px){
 .shell{display:block!important}
 .content{max-width:1480px;width:100%;padding:22px clamp(20px,4vw,62px)!important;margin:0 auto}
 .sidebar{display:flex!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:1010;width:min(360px,88vw)!important;height:100dvh!important;max-height:100dvh!important;padding:24px 20px!important;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .24s ease;box-shadow:12px 0 35px #24171133;background:#fff8ef!important;border-right:1px solid #d8a66c!important;visibility:hidden;pointer-events:none}
 .sidebar.menu-open{transform:translateX(0);visibility:visible;pointer-events:auto}
 .sidebar .logo{display:flex;align-items:center;margin:8px 0 18px!important;padding:8px 2px 18px!important;border-bottom:1px solid #e4c9ac!important}
 .sidebar .sidebar-logo{width:62px;height:62px}
 .sidebar nav,.sidebar.menu-open nav{display:grid!important;grid-template-columns:1fr;gap:6px;overflow:visible;margin:0!important}
 .sidebar .nav-item{display:flex;width:100%;min-height:47px;white-space:normal;text-align:left;color:#382016;font-size:15px;padding:12px 14px;border-radius:12px}
 .sidebar .nav-item.active{background:#e9d1b4;color:#382016}
 .sidebar-bottom,.sidebar.menu-open .sidebar-bottom{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding:20px 3px 0;border-top:1px solid #e4c9ac}
 .sidebar .profile-mini{display:flex!important;border:0;padding:0;margin:0}
 .sidebar .logout-form,.sidebar .logout-button{width:100%}
 .sidebar .logout-button{min-height:46px;display:flex;align-items:center;justify-content:center;background:#382016;color:#fff8ef;border:0;border-radius:12px;font-weight:700}
 .mobile-nav-close{display:flex;align-items:center;justify-content:center;align-self:flex-end;min-height:40px;border:1px solid #e4c9ac;background:#fff8ef;color:#382016;border-radius:10px;padding:8px 13px;font-weight:700}
 .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:1009;background:#2417118c;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
 .mobile-nav-backdrop.visible{opacity:1;visibility:visible}
 .mobile-brand{display:flex;align-items:center;justify-content:center;width:54px;height:54px}
 .mobile-brand img{width:52px;height:52px;object-fit:contain}
 .mobile-menu-toggle{display:grid!important;place-items:center;width:48px;height:48px;padding:0!important;border:1px solid #d7b894;border-radius:12px;background:#fff8ef!important;color:#382016!important;box-shadow:none!important}
 .mobile-menu-dots{font-size:31px;line-height:1}
 .topbar{display:grid!important;grid-template-columns:60px minmax(0,1fr) 50px;align-items:center;gap:16px;padding:10px 0 20px;margin-bottom:20px}
 .topbar>div:nth-child(3){grid-column:2;grid-row:1;min-width:0}
 .topbar>div:nth-child(3) .eyebrow{display:none}
 .topbar h1{font-size:clamp(27px,3vw,36px)!important;color:#382016}
 .mobile-brand{grid-column:1;grid-row:1}
 .mobile-menu-toggle{grid-column:3;grid-row:1;justify-self:end}
 .top-actions{display:none!important}
}
/* De welkomstkaart vervalt op alle schermgroottes. */
#overview .welcome,.panel .welcome{display:none!important}
body.mobile-nav-open{overflow:hidden}
.mobile-menu-toggle:focus-visible,.mobile-nav-close:focus-visible,.sidebar .nav-item:focus-visible{outline:3px solid #d8a66c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-nav-backdrop{transition:none!important}}

/* Admin theme — live editable CSS variables, isolated from the public website */
body:has(.shell){--rose:var(--admin-accent,#8B512A);--rose-light:color-mix(in srgb,var(--admin-accent,#8B512A) 12%,white);--ink:var(--admin-text,#241711);--muted:color-mix(in srgb,var(--admin-text,#241711) 65%,white);--line:var(--admin-border,#E4C9AC);--bg:var(--admin-background,#FFF8EF);--white:var(--admin-surface,#FFFFFF);background:var(--admin-background,#FFF8EF)!important;color:var(--admin-text,#241711)}
body:has(.shell) .content,body:has(.shell) .shell{background:var(--admin-background,#FFF8EF)!important}
body:has(.shell) .sidebar,body:has(.shell) .card,body:has(.shell) .stat,body:has(.shell) .recent,body:has(.shell) .note,body:has(.shell) .quick-grid button{background:var(--admin-surface,#FFFFFF)!important;border-color:var(--admin-border,#E4C9AC)!important;color:var(--admin-text,#241711)}
body:has(.shell) .topbar,body:has(.shell) .panel-heading{border-color:var(--admin-border,#E4C9AC)!important}
body:has(.shell) .btn,body:has(.shell) .card button[type=submit],body:has(.shell) .logout-button{background:var(--admin-primary,#382016)!important;color:white!important;border-color:var(--admin-primary,#382016)!important}
body:has(.shell) .nav-item.active,body:has(.shell) .nav-item:hover{background:color-mix(in srgb,var(--admin-accent,#8B512A) 17%,white)!important;color:var(--admin-primary,#382016)!important}
body:has(.shell) .eyebrow,body:has(.shell) a,body:has(.shell) .nav-item{color:var(--admin-accent,#8B512A)}
body:has(.shell) .topbar h1,body:has(.shell) .panel-heading h2,body:has(.shell) .stat strong{color:var(--admin-text,#241711)!important}
body:has(.shell) .mobile-menu-toggle{border-color:var(--admin-border,#E4C9AC)!important;color:var(--admin-primary,#382016)!important}
.appointment-actions{display:grid;gap:12px;margin-top:14px;padding:15px;border:1px solid var(--admin-border,#E4C9AC);border-radius:14px;background:color-mix(in srgb,var(--admin-background,#FFF8EF) 65%,white)}
.appointment-actions>label{font-weight:750}.appointment-action-select{width:100%;max-width:480px;padding:12px;border:1px solid var(--admin-border,#E4C9AC);border-radius:10px;background:var(--admin-surface,#FFFFFF);color:var(--admin-text,#241711)}
.appointment-action-pane{margin:0!important;padding:12px 0 0;display:grid;gap:12px;max-width:560px}.appointment-action-pane[hidden]{display:none!important}
.appointment-delete-button{background:#9c3430!important;color:#fff!important;border-color:#9c3430!important}
.theme-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}.theme-field{display:flex;align-items:center;gap:12px}.theme-field input[type=color]{width:75px;height:52px;flex:none}.theme-field output{font-family:monospace;font-size:13px}.theme-actions{display:flex;gap:10px;flex-wrap:wrap}.theme-editor-card form{max-width:none}.theme-editor-card #admin-theme-reset-form{margin-top:14px}
@media(max-width:600px){.appointment-actions{padding:12px}.theme-fields{grid-template-columns:1fr}}

/* Sluitknop: uitsluitend kruisje op laptop, iPad en mobiel */
.sidebar .mobile-nav-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;gap:0!important;flex:0 0 44px!important;font-size:24px!important;line-height:1!important;text-align:center!important;}
.sidebar .mobile-nav-close span{display:none!important;}
