:root{--groen:#3a5a40;--groen-licht:#588157;--groen-zacht:#a3b18a;--hout:#b5835a;--creme:#f8f4ef;--grijs:#e8e2d9;--tekst:#2d2d2d;--tekst-zacht:#6b6b6b;--sidebar-w:220px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',sans-serif;background:var(--creme);color:var(--tekst);}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--groen);}
.login-box{background:white;border-radius:16px;padding:40px 36px;width:360px;box-shadow:0 8px 32px rgba(0,0,0,.2);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo h1{font-size:32px;font-weight:800;letter-spacing:3px;color:var(--groen);}
.login-logo p{font-size:12px;color:var(--tekst-zacht);letter-spacing:1px;margin-top:2px;}
.login-err{background:#fde8e8;color:#c0392b;border-radius:8px;padding:9px 13px;font-size:13px;margin-bottom:14px;}
.demo-account{background:var(--creme);border:1.5px solid var(--grijs);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:6px;cursor:pointer;transition:border-color .2s;text-decoration:none;color:inherit;display:block;}
.demo-account:hover{border-color:var(--groen);}

/* APP */
.app{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);background:var(--groen);color:white;display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100;overflow-y:auto;}
.logo{padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.15);}
.logo h1{font-size:24px;font-weight:800;letter-spacing:2px;}
.logo p{font-size:10px;color:var(--groen-zacht);letter-spacing:1px;margin-top:2px;}
.nav{padding:10px 0;}
.nav-section{font-size:10px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:1.5px;padding:10px 20px 4px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;border-left:3px solid transparent;transition:all .2s;color:rgba(255,255,255,.75);font-size:13px;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.08);color:white;}
.nav-item.active{background:rgba(255,255,255,.12);border-left-color:#ddb892;color:white;font-weight:600;}
.nav-item .icon{font-size:14px;width:18px;text-align:center;}
.sidebar-footer{padding:10px 14px;border-top:1px solid rgba(255,255,255,.15);margin-top:auto;}
.footer-user{background:rgba(255,255,255,.08);border-radius:10px;padding:9px 12px;margin-bottom:6px;}
.fu-name{font-size:13px;font-weight:700;color:white;}
.fu-bedrijf{font-size:11px;color:var(--groen-zacht);margin-top:1px;}
.footer-btn{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:rgba(255,255,255,.8);transition:all .2s;margin-bottom:3px;text-decoration:none;}
.footer-btn:hover{background:rgba(255,255,255,.1);color:white;}
.footer-logout{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.5);cursor:pointer;padding:4px 2px;transition:color .2s;margin-top:4px;background:none;border:none;font-family:inherit;}
.footer-logout:hover{color:white;}
.footer-info{font-size:10px;color:rgba(255,255,255,.3);margin-top:6px;}

.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:white;padding:13px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--grijs);position:sticky;top:0;z-index:50;}
.topbar h2{font-size:16px;font-weight:700;color:var(--groen);}
.avatar{width:32px;height:32px;background:var(--groen-zacht);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px;}
.badge{background:var(--hout);color:white;font-size:10.5px;padding:2px 7px;border-radius:9px;}
.content{padding:22px 26px;flex:1;}

/* CARDS */
.card{background:white;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.card h3{font-size:14px;font-weight:700;color:var(--groen);margin-bottom:12px;}

/* HERO */
.welkom-hero{background:var(--groen);color:white;padding:22px 26px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;border-radius:12px;}
.welkom-hero h2{font-size:19px;font-weight:800;margin-bottom:4px;}
.welkom-hero p{font-size:13px;opacity:.8;}

/* DASH COLS */
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.dash-col-card{background:white;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.dash-col-card h3{font-size:14px;font-weight:700;color:var(--groen);margin-bottom:10px;}
.news-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--grijs);}
.news-item:last-child{border-bottom:none;padding-bottom:0;}
.news-week{background:var(--groen);color:white;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:700;white-space:nowrap;height:fit-content;margin-top:2px;}
.news-text h4{font-size:13px;font-weight:700;margin-bottom:1px;}
.news-text p{font-size:11px;color:var(--tekst-zacht);line-height:1.4;}
.mc-link{display:inline-block;margin-top:8px;font-size:12px;color:var(--groen);font-weight:600;cursor:pointer;text-decoration:underline;}
.mini-chat{display:flex;flex-direction:column;gap:8px;}
.mc-msg{display:flex;gap:7px;}.mc-msg.own{flex-direction:row-reverse;}
.mc-av{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;flex-shrink:0;}
.mc-bubble{max-width:75%;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.4;}
.mc-msg:not(.own) .mc-bubble{background:var(--grijs);}
.mc-msg.own .mc-bubble{background:var(--groen);color:white;}
.mc-meta{font-size:10px;color:var(--tekst-zacht);margin-top:2px;}
.mc-msg.own .mc-meta{text-align:right;}

/* QUICK */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.quick-btn{background:white;border:2px solid var(--grijs);border-radius:10px;padding:13px 10px;text-align:center;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;display:block;}
.quick-btn:hover{border-color:var(--groen-zacht);background:var(--creme);}
.quick-btn .qi{font-size:22px;margin-bottom:5px;}
.quick-btn p{font-size:11.5px;font-weight:600;}

/* FORMS */
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:11.5px;font-weight:600;color:var(--tekst-zacht);}
.fg input,.fg select,.fg textarea{padding:8px 11px;border:1.5px solid var(--grijs);border-radius:8px;font-size:13px;outline:none;background:var(--creme);font-family:inherit;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--groen-zacht);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.f2 .full{grid-column:1/-1;}
.divider{height:1px;background:var(--grijs);margin:16px 0;}
.cb-group{display:flex;gap:18px;flex-wrap:wrap;margin-top:5px;}
.cb-group label{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;}
.cb-group input[type=checkbox]{width:15px;height:15px;accent-color:var(--groen);}

/* BUTTONS */
.btn{padding:8px 15px;background:var(--groen);color:white;border:none;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600;transition:background .2s;display:inline-block;text-decoration:none;font-family:inherit;}
.btn:hover{background:var(--groen-licht);}
.btn-o{background:white;color:var(--groen);border:1.5px solid var(--groen);}
.btn-o:hover{background:var(--creme);}
.btn-hout{background:var(--hout);color:white;border:none;}
.btn-hout:hover{background:#c4956a;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-red{background:#e74c3c;color:white;border:none;}
.btn-red:hover{background:#c0392b;}

/* BADGES */
.tl{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:5px;font-weight:600;margin-bottom:2px;}
.tl-pdf{background:#fde8e8;color:#c0392b;}
.tl-vid{background:#e8f0fe;color:#1a56db;}
.sb{font-size:11px;padding:2px 7px;border-radius:5px;font-weight:600;white-space:nowrap;}
.sb-open{background:#fef0e6;color:#e67e22;}.sb-lopend{background:#e8f4fd;color:#3498db;}.sb-opgelost{background:#eafaf1;color:#27ae60;}

/* INFO */
.info-hl{background:rgba(58,90,64,.06);border-left:3px solid var(--groen);border-radius:4px;padding:10px 13px;font-size:13px;margin-bottom:14px;line-height:1.6;}
.info-box{background:var(--creme);border:1.5px solid var(--groen-zacht);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--tekst-zacht);line-height:1.6;}
.warn-box{background:#fef9f5;border:1.5px solid #e67e22;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.6;margin-bottom:14px;}
.opmerking-box{font-size:12px;color:var(--tekst-zacht);margin-top:12px;padding:10px 12px;background:var(--creme);border-radius:8px;border-left:3px solid var(--hout);}

/* TILES */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:13px;}
.tile{background:white;border:2px solid var(--grijs);border-radius:12px;padding:20px 14px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06);text-decoration:none;color:inherit;display:block;}
.tile:hover{border-color:var(--groen-zacht);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.tile .ti{font-size:34px;margin-bottom:9px;}
.tile h4{font-size:13.5px;font-weight:700;margin-bottom:3px;}
.tile p{font-size:11px;color:var(--tekst-zacht);line-height:1.4;}
.tile.tg{border-color:var(--groen);background:rgba(58,90,64,.04);}
.tile.th{border-color:var(--hout);background:rgba(181,131,90,.05);}

/* AGENDA */
.week-grid-ag{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
.dag{background:var(--creme);border:1.5px solid var(--grijs);border-radius:9px;padding:9px;min-height:76px;}
.dag-hdr{font-size:11px;font-weight:700;color:var(--groen);margin-bottom:6px;}
.ev{background:var(--groen);color:white;border-radius:5px;padding:4px 6px;font-size:10.5px;margin-bottom:3px;}
.ev.schoon{background:var(--hout);}
.ev.ext{background:var(--groen-zacht);}
.dag.vdg{border-color:var(--groen);background:rgba(58,90,64,.04);}

/* SCHADE */
.schade-list{display:flex;flex-direction:column;gap:9px;}
.schade-item{background:var(--creme);border:1.5px solid var(--grijs);border-radius:9px;padding:11px 13px;display:flex;gap:11px;align-items:flex-start;}
.sd{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.sd-o{background:#e67e22;}.sd-l{background:#3498db;}.sd-op{background:#27ae60;}
.si{flex:1;}
.si h4{font-size:13px;font-weight:700;}
.si p{font-size:12px;color:var(--tekst-zacht);margin-top:2px;}
.si .meta{font-size:10.5px;color:var(--tekst-zacht);margin-top:4px;}

/* RUIMTES */
.ruimte-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;margin-bottom:0;}
.ruimte-card{background:var(--creme);border:2px solid var(--grijs);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;display:block;}
.ruimte-card:hover{border-color:var(--groen);}
.ruimte-card.selected{border-color:var(--groen);background:rgba(58,90,64,.06);}
.rc-icon{font-size:22px;margin-bottom:5px;}
.ruimte-card h4{font-size:12px;font-weight:700;}
.ruimte-card .rc-cap{font-size:10px;color:var(--tekst-zacht);margin-top:2px;}

/* RES VIEW BTNS */
.rvb{padding:7px 14px;border-radius:8px;border:1.5px solid var(--grijs);background:white;font-size:13px;cursor:pointer;font-weight:600;color:var(--tekst-zacht);transition:all .2s;text-decoration:none;display:inline-block;font-family:inherit;}
.rvb:hover,.rvb.active{background:var(--groen);color:white;border-color:var(--groen);}

/* WEEK TABLE */
.week-tbl-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--grijs);}
.week-tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:750px;font-size:12px;}
.week-tbl thead th{background:var(--groen);color:white;padding:10px 8px;text-align:center;font-weight:700;font-size:11.5px;border-bottom:2px solid rgba(0,0,0,.1);line-height:1.4;}
.week-tbl thead th.col-r{text-align:left;padding-left:14px;min-width:120px;}
.week-tbl thead th.col-cap{min-width:60px;text-align:center;}
.week-tbl thead th.col-today{background:var(--hout);}
.week-tbl thead th:first-child{border-radius:9px 0 0 0;}
.week-tbl thead th:last-child{border-radius:0 9px 0 0;}
.week-tbl tbody tr:nth-child(odd) td{background:#fff;}
.week-tbl tbody tr:nth-child(even) td{background:#faf8f5;}
.week-tbl tbody tr:hover td{background:rgba(58,90,64,.04);}
.week-tbl tbody tr:last-child td:first-child{border-radius:0 0 0 9px;}
.week-tbl tbody tr:last-child td:last-child{border-radius:0 0 9px 0;}
.week-tbl td{border-bottom:1px solid var(--grijs);border-right:1px solid var(--grijs);padding:5px 6px;vertical-align:top;min-width:90px;}
.week-tbl td.col-r-cell{background:var(--groen)!important;color:white;font-weight:700;font-size:12px;white-space:nowrap;padding:0 14px;vertical-align:middle;border-right:2px solid rgba(0,0,0,.1);}
.week-tbl td.col-cap-cell{background:var(--creme)!important;text-align:center;font-size:12px;font-weight:700;color:var(--groen);border-right:1px solid var(--grijs);vertical-align:middle;white-space:nowrap;}
.week-tbl td.col-today-cell{background:rgba(181,131,90,.07)!important;border-left:2px solid rgba(181,131,90,.4)!important;border-right:2px solid rgba(181,131,90,.4)!important;}
.res-blok{background:var(--groen);color:white;border-radius:6px;padding:5px 8px;margin-bottom:4px;font-size:11px;line-height:1.45;cursor:pointer;transition:all .15s;border-left:3px solid rgba(0,0,0,.15);}
.res-blok:hover{transform:translateX(2px);filter:brightness(1.1);}
.res-blok.own{background:var(--hout);}
.rb-tijd{font-weight:700;font-size:11.5px;}
.rb-wie{opacity:.9;font-size:10.5px;}
.rb-doel{opacity:.72;font-size:10px;font-style:italic;margin-top:1px;}
.vrij-label{color:var(--groen-zacht);font-size:11px;display:block;text-align:center;padding:8px 2px;}
.week-legend{display:flex;gap:16px;align-items:center;margin-bottom:12px;font-size:12px;color:var(--tekst-zacht);flex-wrap:wrap;}
.leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;display:inline-block;}

/* RUIMTE DETAIL */
.rd-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--creme);border:1.5px solid var(--grijs);border-radius:9px;margin-bottom:8px;}
.rd-datum{background:var(--groen);color:white;border-radius:7px;padding:6px 10px;text-align:center;font-size:11px;font-weight:700;white-space:nowrap;line-height:1.5;min-width:52px;}
.rd-info{flex:1;}
.rd-info h4{font-size:13px;font-weight:700;}
.rd-info p{font-size:12px;color:var(--tekst-zacht);margin-top:2px;}
.rd-del{background:none;border:none;color:#e74c3c;cursor:pointer;font-size:18px;padding:0 4px;line-height:1;}

/* NIEUWS PAGE */
.news-full{background:var(--creme);border:1.5px solid var(--grijs);border-radius:10px;padding:13px 15px;margin-bottom:10px;display:flex;gap:13px;}
.nf-week{background:var(--groen);color:white;border-radius:7px;padding:7px 9px;font-size:10px;font-weight:700;white-space:nowrap;line-height:1.5;text-align:center;}
.nf-body h4{font-size:13px;font-weight:700;margin-bottom:3px;}
.nf-body p{font-size:12.5px;color:var(--tekst-zacht);line-height:1.5;}

/* DOCS */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.doc-item{background:var(--creme);border:1.5px solid var(--grijs);border-radius:10px;padding:13px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.doc-item p{font-size:13px;font-weight:600;}
.doc-item span{font-size:11px;color:var(--tekst-zacht);}

/* GEBRUIKERS */
.user-table{width:100%;border-collapse:collapse;font-size:13px;}
.user-table th{text-align:left;padding:8px 11px;border-bottom:2px solid var(--grijs);font-size:11.5px;color:var(--tekst-zacht);text-transform:uppercase;letter-spacing:.5px;}
.user-table td{padding:9px 11px;border-bottom:1px solid var(--grijs);}
.user-table tr:nth-child(even){background:var(--creme);}
.role-badge{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:5px;font-weight:600;}
.role-admin{background:rgba(58,90,64,.1);color:var(--groen);}
.role-user{background:rgba(181,131,90,.1);color:var(--hout);}

/* TAG */
.mnr-row{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;margin-bottom:7px;}
.mnr{background:var(--groen);color:white;border-radius:50%;width:23px;height:23px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}

/* FOTO */
.foto-up{border:2px dashed var(--groen-zacht);border-radius:9px;padding:18px;text-align:center;background:var(--creme);cursor:pointer;transition:all .2s;}
.foto-up:hover{border-color:var(--groen);}
.foto-up .fu-ic{font-size:28px;margin-bottom:6px;}
.foto-up p{font-size:13px;color:var(--tekst-zacht);}
.foto-up span{font-size:11px;color:var(--groen-zacht);}

/* STORING TEGELS */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;}
.st-tile{border-radius:12px;padding:24px 14px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06);text-decoration:none;display:block;}
.st-tile:hover{transform:translateY(-3px);}
.st-tile .st-ic{font-size:38px;margin-bottom:8px;}
.st-tile .st-nm{font-size:14px;font-weight:700;}
.st-airco{background:#e8f4fd;border:2px solid #85b7eb;}
.st-airco .st-nm{color:#185fa5;}
.st-koffie{background:#fdf3e7;border:2px solid #e8b97a;}
.st-koffie .st-nm{color:#7a4a1e;}
.st-beveiliging{background:#eaf3de;border:2px solid #97c459;}
.st-beveiliging .st-nm{color:#27500a;}
.st-internet{background:#eeedfe;border:2px solid #afa9ec;}
.st-internet .st-nm{color:#3c3489;}
.st-electra{background:#faeeda;border:2px solid #ef9f27;}
.st-electra .st-nm{color:#633806;}

/* STORING STAPPEN */
.stap-blok{border:1.5px solid var(--grijs);border-radius:10px;margin-bottom:14px;overflow:hidden;}
.stap-hdr{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--creme);border-bottom:1px solid var(--grijs);}
.stap-nr{background:var(--groen);color:white;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.stap-titel{font-size:14px;font-weight:700;}
.stap-body{padding:14px 16px;background:white;}
.stap-intro{font-size:13px;color:var(--tekst-zacht);margin-bottom:12px;line-height:1.5;}
.stap-bellen .stap-hdr{background:rgba(181,131,90,.08);}
.stap-bellen .stap-nr{background:var(--hout);}
.lev-kaart{display:flex;align-items:center;justify-content:space-between;background:var(--creme);border:1.5px solid var(--grijs);border-radius:9px;padding:12px 16px;flex-wrap:wrap;gap:10px;}
.lev-naam{font-size:14px;font-weight:700;}
.lev-tel{display:inline-flex;align-items:center;gap:6px;background:var(--groen);color:white;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s;}
.lev-tel:hover{background:var(--groen-licht);}

::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:var(--groen-zacht);border-radius:3px;}