:root{
  --primary:#264238;
  --primary-2:#334f45;
  --primary-strong:#1d352d;
  --soft:#b5d3b9;
  --soft-2:#dce9de;
  --soft-3:#eef4ef;
  --brand-white:#f7f9f6;
  --bg:#f7f9f6;
  --surface:#ffffff;
  --text:#20312b;
  --muted:#68776f;
  --line:#dce5df;
  --line-strong:#ccd9d1;
  --danger:#a63d34;
  --warning:#9a6b20;
  --success:#34745a;
  --shadow:0 18px 55px rgba(38,66,56,.07);
  --shadow-sm:0 4px 18px rgba(38,66,56,.055);
  --radius:20px;
  --sidebar:286px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,Arial,sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{color:var(--text)}
a{color:var(--primary)}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* Boot */
.app-root{min-height:100vh}
.boot-screen{min-height:100vh;display:grid;place-content:center;gap:24px;justify-items:center;background:var(--brand-white)}
.boot-logo{width:205px;max-height:78px;object-fit:contain}
.spinner{width:26px;height:26px;border:3px solid var(--soft-2);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Login */
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(400px,600px) minmax(480px,1fr);background:var(--brand-white)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:64px 48px;background:var(--brand-white)}
.login-card{width:min(450px,100%);background:rgba(255,255,255,.88);padding:38px;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.login-brand{height:58px;max-width:245px;object-fit:contain;object-position:left center;margin-bottom:32px}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--primary)}
.login-card h1{font-size:2.15rem;line-height:1.08;letter-spacing:-.045em;margin:10px 0 12px}
.login-card p{color:var(--muted);line-height:1.65;margin-bottom:24px}
.login-aside{position:relative;overflow:hidden;background:var(--primary);color:var(--brand-white);margin:22px 22px 22px 0;border-radius:32px;padding:72px;display:flex;align-items:flex-end;isolation:isolate}
.login-aside:before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;background:rgba(181,211,185,.12);right:-160px;top:-160px;z-index:-2}
.login-aside:after{content:"";position:absolute;right:7%;top:10%;width:min(42vw,540px);height:min(48vw,600px);background:url('../img/horecall-mark.png') center/contain no-repeat;filter:brightness(0) invert(1);opacity:.055;z-index:-1;transform:rotate(-4deg)}
.login-aside-inner{position:relative;z-index:1;max-width:680px}
.login-aside .eyebrow{color:var(--soft)}
.login-aside h2{color:var(--brand-white);font-size:clamp(2.6rem,4vw,4.35rem);line-height:1.02;letter-spacing:-.055em;margin:12px 0 24px;max-width:820px}
.login-aside p{max-width:620px;color:#dce8e0;font-size:1.04rem;line-height:1.65}
.login-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
.login-feature{border:1px solid rgba(247,249,246,.13);background:rgba(247,249,246,.065);padding:17px 18px;border-radius:16px;backdrop-filter:blur(8px)}
.login-feature strong{display:block;color:var(--brand-white);margin-bottom:4px}
.login-feature div{color:#c9dbcf;font-size:.9rem}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.79rem;font-weight:750;color:#44544d}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);background:#fff;color:var(--text);border-radius:13px;padding:12px 13px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.field textarea{min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#b9c9bf}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--soft) 42%,transparent);background:#fff}
input[type="checkbox"]{accent-color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:10px 15px;font-weight:760;background:var(--soft-3);color:var(--primary);transition:transform .16s,background .16s,border-color .16s,box-shadow .16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(38,66,56,.08)}
.btn.primary{background:var(--primary);color:var(--brand-white);border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-strong)}
.btn.accent{background:var(--soft);color:var(--primary);border-color:var(--soft)}
.btn.danger{background:#fbefed;color:var(--danger);border-color:#f4d8d4}
.btn.ghost{background:#fff;color:var(--primary);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--soft-3);border-color:#c1d2c7}
.btn.small{padding:7px 10px;font-size:.8rem;border-radius:10px}
.btn:disabled{opacity:.52;cursor:not-allowed;transform:none;box-shadow:none}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.login-card .form-actions .btn{flex:1;min-width:150px}
.error-box,.info-box,.success-box{border-radius:14px;padding:13px 15px;margin:15px 0;font-size:.88rem;line-height:1.5}
.error-box{background:#fbefed;color:var(--danger);border:1px solid #efd1cc}
.info-box{background:var(--soft-3);color:var(--primary);border:1px solid #d2e2d5}
.success-box{background:#eef7f1;color:var(--success);border:1px solid #cde4d5}

/* App shell */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);background:var(--bg)}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;color:var(--text);padding:22px 16px 18px;display:flex;flex-direction:column;overflow:auto;border-right:1px solid var(--line);z-index:30}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:5px 10px 20px}
.sidebar-logo{width:172px;max-height:45px;object-fit:contain;object-position:left center}
.sidebar-company{font-size:.79rem;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-section{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:#89968f;padding:22px 12px 7px;font-weight:800}
.nav-link{position:relative;width:100%;border:0;background:transparent;color:#506159;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:12px;text-align:left;margin:2px 0;transition:background .16s,color .16s,transform .16s}
.nav-link:hover{background:var(--soft-3);color:var(--primary);transform:translateX(1px)}
.nav-link.active{background:color-mix(in srgb,var(--soft) 38%,white);color:var(--primary);font-weight:800}
.nav-link.active:before{content:"";position:absolute;left:0;width:3px;height:22px;border-radius:0 6px 6px 0;background:var(--primary)}
.nav-icon{width:28px;height:28px;display:grid;place-items:center;font-size:.95rem;border-radius:9px;background:var(--soft-3);color:var(--primary);flex:0 0 auto}
.nav-link.active .nav-icon{background:#fff}
.sidebar-spacer{flex:1;min-height:20px}
.sidebar-user{border-top:1px solid var(--line);padding:16px 8px 3px;margin-top:8px}
.user-chip{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--primary);color:var(--brand-white);font-weight:850;letter-spacing:.02em}
.user-meta{min-width:0}
.user-meta strong,.user-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta strong{font-size:.88rem}
.user-meta span{font-size:.73rem;color:var(--muted);margin-top:2px;text-transform:capitalize}

.main{min-width:0;min-height:100vh}
.topbar{height:78px;background:rgba(247,249,246,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,229,223,.9);display:flex;align-items:center;gap:16px;padding:0 32px;position:sticky;top:0;z-index:20}
.mobile-menu{display:none}
.topbar-title{font-weight:820;font-size:1.02rem;color:var(--primary)}
.topbar-sub{font-size:.74rem;color:var(--muted);margin-top:1px}
.topbar-spacer{flex:1}
.content{padding:32px;max-width:1640px;margin:0 auto}

.page-header{display:flex;align-items:flex-end;gap:18px;justify-content:space-between;margin-bottom:24px}
.page-header h1{font-size:clamp(1.65rem,2.2vw,2.05rem);line-height:1.1;letter-spacing:-.045em;margin-bottom:6px;color:var(--primary)}
.page-header p{margin:0;color:var(--muted);max-width:780px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* Surfaces / cards */
.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:21px}
.card h2,.card h3{color:var(--primary)}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.card-title h2,.card-title h3{margin:0}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:20px;position:relative;overflow:hidden}
.stat:after{content:"";position:absolute;right:-28px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:var(--soft-3);pointer-events:none}
.stat-label{color:var(--muted);font-size:.77rem;font-weight:730;position:relative;z-index:1}
.stat-value{font-size:1.78rem;font-weight:830;letter-spacing:-.045em;margin-top:7px;color:var(--primary);position:relative;z-index:1}
.stat-hint{font-size:.75rem;color:var(--muted);margin-top:5px;position:relative;z-index:1}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;background:var(--soft-3);font-size:.71rem;font-weight:800;color:#536259;border:1px solid transparent}
.pill.green{background:#eef7f1;color:#34745a;border-color:#d9ebdf}
.pill.orange{background:#fbf5e9;color:#8d661f;border-color:#efe2c6}
.pill.red{background:#fbefed;color:#a63d34;border-color:#efd8d3}
.pill.blue{background:#eef4f2;color:#43665a;border-color:#dce8e3}
.pill.gray{background:#f1f3f1;color:#616b66;border-color:#e5e9e6}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}
.table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#748078;background:var(--soft-3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:820}
.table td{padding:13px 14px;border-bottom:1px solid #edf1ee;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .14s}
.table tbody tr:hover{background:#fafcf9}
.table .actions{display:flex;gap:6px;justify-content:flex-end}
.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty:before{content:"";display:block;width:42px;height:4px;border-radius:999px;background:var(--soft);margin:0 auto 18px}
.empty strong{display:block;color:var(--primary);font-size:1.04rem;margin-bottom:6px}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{flex:1}
.segmented{display:inline-flex;background:var(--soft-3);border:1px solid var(--line);border-radius:12px;padding:3px}
.segmented button{border:0;background:transparent;padding:8px 12px;border-radius:9px;color:#627168;font-weight:720;transition:.16s}
.segmented button.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(38,66,56,.08)}

/* Schedule */
.schedule-grid{overflow:auto;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.schedule-table{display:grid;min-width:1120px;grid-template-columns:220px repeat(7,minmax(130px,1fr))}
.schedule-cell{min-height:78px;border-right:1px solid #e7ede9;border-bottom:1px solid #e7ede9;padding:9px}
.schedule-head{position:sticky;top:0;background:var(--soft-3);z-index:3;min-height:66px}
.employee-cell{position:sticky;left:0;background:#fff;z-index:2;font-weight:750}
.schedule-head.employee-cell{z-index:4;background:var(--soft-3)}
.shift-card{border-left:4px solid var(--primary);background:#f3f7f3;border-radius:10px;padding:9px 10px;margin:3px 0;font-size:.77rem;cursor:pointer;transition:transform .14s,box-shadow .14s}
.shift-card:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(38,66,56,.08)}
.shift-card strong{display:block;font-size:.8rem;color:var(--primary)}
.shift-card .shift-time{color:#5d6c64;margin-top:2px}
.shift-card.own{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 74%,transparent)}
.absence-card{border-left:4px solid #a17a35;background:#faf5e9;border-radius:10px;padding:8px;font-size:.75rem;margin:3px 0}
.day-closed{background:#fafbfa;color:#96a099}
.schedule-date{font-weight:800;color:var(--primary)}
.schedule-date small{display:block;color:var(--muted);font-weight:600;margin-top:3px}
.schedule-date-row {display: flex;align-items: center;gap: 7px;}
.schedule-date-row .schedule-requirement {margin: 0;display: inline-flex;align-items: center;flex: 0 0 auto;}
.schedule-date-row .schedule-requirement > span {margin: 0;}

/* Dashboard */
.hero{background:linear-gradient(120deg,color-mix(in srgb,var(--soft) 70%,white),#eef4ef);color:var(--primary);border:1px solid #d5e3d7;border-radius:26px;padding:28px 30px;display:flex;justify-content:space-between;gap:22px;align-items:center;overflow:hidden;position:relative;box-shadow:var(--shadow-sm);isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 55%);z-index:-2}
.hero:after{content:"";position:absolute;width:280px;height:310px;right:28px;top:-92px;background:url('../img/horecall-mark.png') center/contain no-repeat;opacity:.06;z-index:-1;transform:rotate(7deg)}
.hero h1{font-size:2rem;letter-spacing:-.045em;margin-bottom:8px;color:var(--primary)}
.hero p{color:#586b61;margin:0;max-width:730px}
.hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.hero .btn.ghost{color:var(--primary);border-color:#aec6b3;background:rgba(255,255,255,.55)}
.clock-card{display:flex;align-items:center;gap:18px}
.clock-time{font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:830;letter-spacing:-.045em;color:var(--primary)}

/* News / knowledge */
.feed{display:grid;gap:12px}
.feed-item{padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff;transition:border-color .15s,box-shadow .15s}
.feed-item:hover{border-color:#cad9cf;box-shadow:0 6px 16px rgba(38,66,56,.045)}
.feed-item h3{margin:0 0 6px;font-size:1rem;color:var(--primary)}
.feed-meta{font-size:.75rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.feed-item p{color:#59675f;line-height:1.55;margin:10px 0 0}
.feed-item.pinned{border-color:#bfd4c3;background:#fbfdfb}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(27,46,39,.42);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:20px}
.modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:0 35px 100px rgba(27,46,39,.22)}
.modal.wide{width:min(980px,100%)}
.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fbfcfb}
.modal-head h2{margin:0;font-size:1.16rem;color:var(--primary)}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:#fbfcfb}
.icon-btn{width:37px;height:37px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--primary);display:grid;place-items:center;transition:.15s}
.icon-btn:hover{background:var(--soft-3);border-color:#c8d7ce}

/* Toast / loading */
.toast-root{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:10px}
.toast{width:min(380px,calc(100vw - 40px));padding:13px 15px;border-radius:14px;background:var(--primary);color:var(--brand-white);box-shadow:0 16px 45px rgba(38,66,56,.23);animation:toastin .2s ease-out}
.toast.error{background:#77372f}
.toast.success{background:var(--primary)}
@keyframes toastin{from{transform:translateY(10px);opacity:0}}
.skeleton{background:linear-gradient(90deg,#e9efeb,#f8faf8,#e9efeb);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:14px;min-height:74px}
@keyframes shimmer{to{background-position:-200% 0}}
.mobile-overlay{display:none}

/* Utilities */
.stack{display:grid;gap:10px}
.clickable{cursor:pointer;color:inherit;font:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.clickable:hover{border-color:#bfd0c5;box-shadow:0 10px 28px rgba(38,66,56,.075);transform:translateY(-1px)}
button.card{width:100%}
.detail-list{display:grid;gap:10px;margin:18px 0 0}
.detail-list>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.detail-list dt{color:var(--muted);font-size:.78rem}
.detail-list dd{margin:0;font-weight:700;color:var(--text)}
.card.full{grid-column:1/-1}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft-3);color:var(--primary);padding:2px 6px;border-radius:6px}

/* Responsive */
@media(max-width:1120px){
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-shell{grid-template-columns:minmax(360px,520px) 1fr}
  .login-aside{padding:52px}
}
@media(max-width:1020px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:min(315px,88vw);transform:translateX(-104%);transition:transform .22s ease;z-index:60;box-shadow:20px 0 50px rgba(38,66,56,.12)}
  .shell.menu-open .sidebar{transform:none}
  .mobile-overlay{position:fixed;inset:0;background:rgba(24,42,35,.28);backdrop-filter:blur(2px);z-index:50}
  .shell.menu-open .mobile-overlay{display:block}
  .mobile-menu{display:grid}
  .content{padding:24px}
  .topbar{padding:0 22px}
  .login-shell{grid-template-columns:1fr}
  .login-aside{display:none}
  .login-panel{min-height:100vh}
}
@media(max-width:700px){
  body{font-size:14px}
  .login-panel{padding:22px}
  .login-card{padding:26px;border-radius:24px}
  .login-brand{height:50px;margin-bottom:26px}
  .form-grid,.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .page-header{align-items:flex-start;flex-direction:column;margin-bottom:20px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .content{padding:18px 16px 30px}
  .topbar{height:66px;padding:0 16px}
  .card{padding:17px;border-radius:17px}
  .hero{padding:22px;align-items:flex-start;flex-direction:column;border-radius:20px}
  .hero h1{font-size:1.62rem}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1}
  .clock-card{align-items:flex-start;flex-direction:column}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
  .toast-root{left:16px;right:16px;bottom:16px}
  .toast{width:100%}
  .detail-list>div{grid-template-columns:1fr}
  .feed-item>div[style*="grid-template-columns:1.2fr"]{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* -------------------------------------------------------------------------- */
/* HorecAll application shell v2                                              */
/* -------------------------------------------------------------------------- */

/* Login helpers moved out of app.js */
.login-eyebrow-soft{color:var(--soft)!important}
.login-back-button{margin-bottom:18px}
.login-field-spaced{margin-top:14px}
.route-skeleton{height:90px}

:root{
  --hc-shell-dark:#264238;
  --hc-shell-dark-2:#1f372f;
  --hc-shell-soft:#b5d3b9;
  --hc-shell-white:#f7f9f6;
  --hc-shell-line:rgba(247,249,246,.12);
  --hc-sidebar-width:292px;
}

/* Desktop shell */
.shell{
  grid-template-columns:var(--hc-sidebar-width) minmax(0,1fr) !important;
  background:var(--bg);
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:20px 16px 14px;
  background:var(--hc-shell-dark);
  color:var(--hc-shell-white);
  border-right:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(181,211,185,.35) transparent;
}

.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(181,211,185,.28);border-radius:999px}

.sidebar-head{padding:2px 4px 18px}
.sidebar-logo-panel{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:66px;
  padding:12px 14px;
  border-radius:17px;
  background:var(--hc-shell-white);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.sidebar-logo-panel img{
  display:block;
  width:100%;
  max-width:210px;
  max-height:46px;
  object-fit:contain;
  object-position:left center;
}
.sidebar-org{
  display:block;
  margin:13px 4px 0;
  color:#fff;
  font-size:.92rem;
  font-weight:800;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-nav{display:grid;gap:3px;padding:2px 0 12px}
.nav-link,.nav-group-title,.nav-sublink{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  font:inherit;
  text-align:left;
}

.nav-link,.nav-group-title{
  position:relative;
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  margin:1px 0;
  border-radius:12px;
  background:transparent;
  color:#edf4ef;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.nav-link:hover,.nav-group-title:hover{
  background:rgba(247,249,246,.075);
  color:#fff;
  transform:none;
}
.nav-link.active{
  background:rgba(181,211,185,.17);
  color:#fff;
  font-weight:800;
}
.nav-link.active:before{display:none}

.nav-icon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  background:rgba(181,211,185,.11);
  color:var(--hc-shell-soft);
}
.nav-icon svg{width:18px;height:18px;display:block}
.nav-link.active .nav-icon,.nav-group.active>.nav-group-title .nav-icon{
  background:rgba(181,211,185,.2);
  color:#d8eadb;
}

.nav-group{display:grid;gap:1px}
.nav-group.active > .nav-group-title{
  background:rgba(181,211,185,.12);
  color:#fff;
  font-weight:800;
}
.nav-group-title{cursor:pointer}
.nav-group-title .nav-label{flex:1;min-width:0}
.nav-group-title .nav-chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:rgba(247,249,246,.55);
}
.nav-group-title .nav-chevron svg{width:14px;height:14px}
.nav-group-title .nav-chevron{
  transition:transform .18s ease;
}

/* Dicht */
.nav-group:not(.active) .nav-chevron{
  transform:rotate(0deg);
}

/* Open */
.nav-group.active .nav-chevron{
  transform:rotate(90deg);
}

.nav-submenu{
  position:relative;
  display:none;
  gap:2px;
  margin:1px 0 5px 25px;
  padding:1px 0 2px 18px;
}

/* Alleen submenu van de actieve groep tonen */
.nav-group.active > .nav-submenu{
  display:grid;
}
.nav-submenu:before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:4px;
  width:1px;
  background:rgba(181,211,185,.25);
}
.nav-sublink{
  position:relative;
  width:100%;
  min-height:35px;
  padding:7px 10px;
  border-radius:9px;
  background:transparent;
  color:#bdcec3;
  font-size:.84rem;
  font-weight:650;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.nav-sublink:hover{background:rgba(247,249,246,.06);color:#fff}
.nav-sublink.active{
  background:rgba(181,211,185,.14);
  color:#fff;
  font-weight:800;
}
.nav-sublink.active:before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hc-shell-soft);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(181,211,185,.11);
}

.sidebar-spacer{flex:1;min-height:20px}
.sidebar-footer{
  margin:8px 4px 0;
  padding:14px 10px 4px;
  border-top:1px solid var(--hc-shell-line);
  color:#b9c9bf;
  font-size:.69rem;
  line-height:1.5;
}
.sidebar-footer strong{display:block;color:#e6efe9;font-size:.73rem;margin-bottom:2px}
.sidebar-footer span{display:block}

/* Topbar */
.main{min-width:0;min-height:100vh}
.topbar{
  height:72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:0 30px;
  background:rgba(247,249,246,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar-title{
  min-width:0;
  overflow:hidden;
  color:var(--hc-shell-dark);
  font-size:1.08rem;
  font-weight:850;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-menu{display:none}

.account-menu{position:relative;justify-self:end}
.account-menu:after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.account-trigger{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 9px 6px 7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:var(--hc-shell-dark);
  font-weight:760;
  box-shadow:0 3px 12px rgba(38,66,56,.035);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.account-trigger:hover,.account-menu.open .account-trigger,.account-menu:focus-within .account-trigger{
  background:#fff;
  border-color:#c5d4ca;
  box-shadow:0 7px 22px rgba(38,66,56,.08);
}
.account-avatar{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--hc-shell-dark);
  color:#fff;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.02em;
}
.account-trigger-label{white-space:nowrap}
.account-chevron{width:16px;height:16px;display:grid;place-items:center;color:#7c8c83}
.account-chevron svg{width:14px;height:14px;transition:transform .15s ease}
.account-menu:hover .account-chevron svg,.account-menu.open .account-chevron svg,.account-menu:focus-within .account-chevron svg{transform:rotate(180deg)}

.account-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:196px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 48px rgba(38,66,56,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
  z-index:80;
}
.account-menu:hover .account-dropdown,.account-menu:focus-within .account-dropdown,.account-menu.open .account-dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.account-dropdown button{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#405048;
  text-align:left;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
}
.account-dropdown button:hover{background:var(--soft-3);color:var(--hc-shell-dark)}
.account-dropdown button+button{margin-top:2px}
.account-dropdown .dropdown-icon{width:20px;height:20px;display:grid;place-items:center;color:#73827a}
.account-dropdown .dropdown-icon svg{width:17px;height:17px}

/* De paginatitel staat al in de bovenste header. Alleen subtitel/acties blijven in content. */
.content .page-header h1{display:none !important}
.content .page-header{margin-bottom:20px;align-items:center}
.content .page-header>div:first-child{min-width:0;flex:1}
.content .page-header p{margin:0}

.mobile-overlay{display:none}

@media(max-width:1020px){
  .shell{grid-template-columns:1fr !important}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    width:min(310px,88vw);
    height:100dvh;
    transform:translateX(-104%);
    transition:transform .22s ease;
    z-index:70;
    box-shadow:22px 0 60px rgba(23,41,34,.22);
  }
  .shell.menu-open .sidebar{transform:none}
  .mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(24,42,35,.34);
    backdrop-filter:blur(2px);
    z-index:60;
  }
  .shell.menu-open .mobile-overlay{display:block}

  .topbar{
    height:66px;
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:10px;
    padding:0 14px;
  }
  .mobile-menu{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--hc-shell-dark);
  }
  .mobile-menu svg{width:21px;height:21px}
  .topbar-title{text-align:center;font-size:.98rem}
  .account-menu{width:40px}
  .account-trigger{
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    justify-content:center;
  }
  .account-avatar{width:30px;height:30px}
  .account-trigger-label,.account-chevron{display:none}
  .account-dropdown{right:0;top:calc(100% + 9px)}
}

@media(max-width:700px){
  .content .page-header{align-items:flex-start;gap:12px}
  .content .page-actions{width:100%}
}

/* -------------------------------------------------------------------------- */
/* HorecAll rooster v3                                                        */
/* -------------------------------------------------------------------------- */

/* Periode in de vaste applicatieheader */
.schedule-topbar-heading{display:flex;align-items:center;gap:14px;min-width:0}
.schedule-topbar-title{display:inline-flex;align-items:center;gap:9px;min-width:0;font-weight:850;color:var(--hc-shell-dark);white-space:nowrap}
.schedule-topbar-period{display:inline-block;color:var(--muted);font-size:.82rem;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedule-publish-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;box-shadow:0 0 0 4px rgba(181,211,185,.14)}
.schedule-publish-dot.is-published{background:#34745a;box-shadow:0 0 0 4px rgba(52,116,90,.12)}
.schedule-publish-dot.is-draft{background:#d88b2f;box-shadow:0 0 0 4px rgba(216,139,47,.13)}

/* Commandbar boven het rooster */
.schedule-commandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;min-height:46px}
.schedule-commandbar-left,.schedule-commandbar-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.schedule-commandbar-right{justify-content:flex-end;margin-left:auto}
.schedule-nav-btn{width:42px;padding-left:0;padding-right:0;font-size:1.35rem;line-height:1}
.schedule-location-select{display:flex;align-items:center;gap:8px;min-height:42px;padding:5px 7px 5px 12px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:750}
.schedule-location-select select{min-width:170px;border:0;outline:0;background:transparent;color:var(--primary);font:inherit;font-size:.86rem;font-weight:780;padding:4px 27px 4px 2px}
.schedule-location-warning{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:14px 16px;border:1px solid #ead6b7;border-radius:14px;background:#fff9ef;color:#765521}
.schedule-location-warning>svg{width:21px;height:21px;flex:0 0 21px;margin-top:1px}
.schedule-location-warning strong,.schedule-location-warning span{display:block}
.schedule-location-warning strong{font-size:.9rem;color:#69491a;margin-bottom:2px}
.schedule-location-warning span{font-size:.78rem;line-height:1.45;color:#8b6a37}

/* Agenda-lagen dropdown */
.schedule-layer-control{position:relative}
.schedule-layer-trigger svg{width:17px;height:17px}
.schedule-layer-trigger svg:last-child{width:14px;height:14px;transition:transform .15s ease}
.schedule-layer-control.open .schedule-layer-trigger svg:last-child{transform:rotate(180deg)}
.schedule-layer-popover{position:absolute;left:0;top:calc(100% + 7px);z-index:35;display:none;width:240px;padding:9px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(38,66,56,.16)}
.schedule-layer-control.open .schedule-layer-popover{display:block}
.schedule-layer-popover-title{padding:5px 8px 8px;color:var(--primary);font-size:.75rem;font-weight:850}
.schedule-layer-option{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;color:#4f6057;font-size:.84rem;font-weight:680;cursor:pointer}
.schedule-layer-option:hover{background:var(--soft-3)}
.schedule-layer-option input{margin:0}
.agenda-layer-dot{width:9px;height:9px;border-radius:50%;background:var(--layer-color,#b5d3b9);box-shadow:0 0 0 3px color-mix(in srgb,var(--layer-color,#b5d3b9) 15%,transparent);flex:0 0 9px}

/* Roostertabel */
.schedule-grid-v3{border-radius:16px;box-shadow:none}
.schedule-table-v3{min-width:1320px;grid-template-columns:245px repeat(7,minmax(150px,1fr))}
.schedule-table-v3 .schedule-cell{min-height:88px;padding:9px;border-color:#e5ebe7}
.schedule-table-v3 .schedule-head{min-height:96px;padding:12px 11px;background:#f5f8f5}
.schedule-corner{display:flex;align-items:center;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em}
.schedule-day-head{display:grid;gap:5px}
.schedule-date-row{display:flex;align-items:center;justify-content:flex-start;gap:7px}
.schedule-table-v3 .schedule-date{font-size:.84rem;font-weight:850;color:var(--primary);white-space:nowrap}
.schedule-opening{font-size:.69rem;font-weight:650;color:#748178;white-space:nowrap}
.schedule-opening.is-special{color:#876025}
.schedule-opening.is-special strong{font-weight:850}
.schedule-opening.is-closed{color:#9b5d56}
.schedule-today-label{display:inline-flex;align-items:center;border-radius:999px;padding:3px 6px;background:var(--primary);color:#fff;font-size:.58rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.schedule-requirement{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:.64rem;font-weight:760;white-space:nowrap}
.schedule-requirement>span{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.schedule-requirement.is-ok{color:#34745a}.schedule-requirement.is-ok>span{background:#34745a}
.schedule-requirement.is-under{color:#a34f45}.schedule-requirement.is-under>span{background:#b95045}

/* Vandaag: duidelijke maar rustige kolom-overlay */
.schedule-cell.schedule-today{position:relative;background:linear-gradient(0deg,rgba(181,211,185,.13),rgba(181,211,185,.13)),#fff}
.schedule-head.schedule-today{background:linear-gradient(0deg,rgba(181,211,185,.24),rgba(181,211,185,.24)),#f5f8f5;box-shadow:inset 0 3px 0 var(--primary)}
.schedule-cell.schedule-today:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 1px 0 rgba(38,66,56,.07),inset -1px 0 rgba(38,66,56,.07)}

/* Agenda-lagen als echte rijen in het rooster */
.agenda-layer-name{display:flex;align-items:center;gap:9px;min-height:58px!important;background:#fbfcfb!important;color:#56675e;font-size:.8rem;font-weight:800}
.agenda-layer-cell{min-height:58px!important;background:#fbfcfb;padding:6px!important}
.agenda-inline{width:100%;display:flex;align-items:center;justify-content:space-between;gap:7px;margin:2px 0;padding:7px 8px;border:1px solid #dfe7e1;border-radius:9px;background:#fff;color:#4f6057;text-align:left;font:inherit;font-size:.7rem;cursor:pointer}
.agenda-inline strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-inline span{flex:0 0 auto;color:var(--muted);font-size:.64rem}
.agenda-inline.is-readonly{cursor:default}

/* Medewerkerkolom */
.schedule-employee{display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff}
.schedule-employee.is-own{background:#eef6f1}
.schedule-employee-name{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:850;color:var(--primary)}
.schedule-employee-function{font-size:.72rem;font-weight:690;color:#5f7167}
.schedule-employee-hours{font-size:.68rem;color:var(--muted)}
.employee-warning{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:6px;background:#fff4e1;color:#b06d1d}
.employee-warning svg{width:14px;height:14px}
.schedule-missing-hours{display:flex;align-items:center;gap:5px;margin-top:3px;color:#9b5d27;font-size:.67rem;font-weight:760}
.schedule-missing-hours svg{width:13px;height:13px}

/* Dienstkaarten */
.schedule-slot{padding:7px!important}
.shift-card{position:relative;width:100%;display:block;margin:3px 0;padding:9px 9px 8px;border:1px solid color-mix(in srgb,var(--shift-color,var(--primary)) 18%,#e2e9e4);border-left:4px solid var(--shift-color,var(--primary));border-radius:10px;background:#fff;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:box-shadow .14s ease,transform .14s ease,opacity .14s ease}
.shift-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(38,66,56,.08)}
.shift-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.shift-card-top strong{display:block;min-width:0;font-size:.75rem;color:var(--primary);white-space:nowrap}
.shift-card-label,.shift-card-location,.shift-card-delete-note{display:block;margin-top:3px;font-size:.66rem;line-height:1.25}
.shift-card-label{color:#5d6c64;font-weight:690}
.shift-card-location{color:#87938c}
.shift-icons{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.schedule-status-icon{width:20px;height:20px;display:inline-grid;place-items:center;border-radius:6px}
.schedule-status-icon svg{width:13px;height:13px}
.schedule-status-icon.is-concept{background:#fff3e3;color:#b26d1a}
.schedule-status-icon.is-missing{background:#fff0ec;color:#a54d3f}
.schedule-status-icon.is-pending{background:#fff7e6;color:#a97221}
.schedule-status-icon.is-approved{background:#edf7f0;color:#34745a}
.shift-card.is-concept{background:#fffdf8;border-style:dashed}
.shift-card.is-pending-delete{opacity:.62;background:#fff5f3;border-color:#e5b8b1;text-decoration:none}
.shift-card.is-pending-delete .shift-card-top strong,.shift-card.is-pending-delete .shift-card-label{text-decoration:line-through}
.shift-card-delete-note{color:#a64b40;font-weight:780;text-decoration:none!important}
.schedule-add-inline{width:100%;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:5px;padding:6px;border:1px dashed #ccd8d0;border-radius:9px;background:transparent;color:#698078;font:inherit;font-size:.68rem;font-weight:740;cursor:pointer}
.schedule-add-inline:hover{border-color:#aebfb4;background:var(--soft-3);color:var(--primary)}
.schedule-add-inline svg{width:13px;height:13px}

/* Eigen rooster lijst */
.schedule-own-card h2{margin:8px 0 5px;font-size:1rem}

/* Waarschuwing verleden */
.schedule-past-warning{display:flex;align-items:flex-start;gap:15px;padding:4px 0}
.schedule-past-warning-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff1dc;color:#a96b1d;flex:0 0 42px}
.schedule-past-warning-icon svg{width:22px;height:22px}
.schedule-past-warning strong{display:block;margin:1px 0 7px;color:var(--primary);font-size:1rem}
.schedule-past-warning p{margin:4px 0;color:var(--muted)}

/* Dienst toevoegen / meerdere medewerkers */
.modal.schedule-shift-modal{max-height:min(92vh,920px);overflow:hidden;display:flex;flex-direction:column}
.schedule-shift-modal .modal-head{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start;gap:9px 14px;flex:0 0 auto;padding:17px 20px 13px;background:#fbfcfb;box-shadow:0 1px 0 var(--line)}
.schedule-shift-modal .modal-head h2{grid-column:1;grid-row:1;margin:1px 0 0;line-height:1.3}
.schedule-shift-modal .modal-head>button{grid-column:2;grid-row:1}
.schedule-shift-modal .modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;padding:15px 20px 18px;background:#fff}
.schedule-shift-modal .modal-foot{position:relative;z-index:3;flex:0 0 auto;padding:13px 20px;background:#fbfcfb;box-shadow:0 -1px 0 var(--line),0 -12px 28px rgba(38,66,56,.05)}
.schedule-shift-modal-header-requirements{grid-column:1/-1;grid-row:2;min-width:0}
.schedule-fixed-requirements-label{margin:0 0 6px;color:#738079;font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.schedule-modal-requirements{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.schedule-shift-modal-header-requirements .schedule-modal-requirements{display:flex;gap:7px;margin:0;overflow-x:auto;overscroll-behavior-inline:contain;padding:0 1px 2px;scrollbar-width:thin}
.schedule-requirement-card{display:grid;gap:2px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fafcfa}
.schedule-shift-modal-header-requirements .schedule-requirement-card{flex:0 0 148px;padding:8px 9px;border-radius:10px}
.schedule-requirement-card span{font-size:.71rem;font-weight:780;color:#516159;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedule-requirement-card strong{font-size:.98rem;color:var(--primary)}
.schedule-requirement-card small{font-size:.62rem;font-weight:740}
.schedule-requirement-card.is-under{border-color:#efd1cc;background:#fff5f3}.schedule-requirement-card.is-under small{color:#a64b40}
.schedule-requirement-card.is-exact{border-color:#cfe4d6;background:#f2f9f4}.schedule-requirement-card.is-exact small{color:#34745a}
.schedule-requirement-card.is-over{border-color:#ecd9b8;background:#fff9ee}.schedule-requirement-card.is-over small{color:#9b6a20}
.schedule-requirements-empty{padding:10px 12px;border:1px dashed var(--line-strong);border-radius:11px;color:var(--muted);font-size:.76rem}
.schedule-shift-modal-header-requirements .schedule-requirements-empty{padding:7px 9px;border-radius:9px;font-size:.68rem}

.schedule-assignment-row{position:relative;padding:0;border:1px solid var(--line);border-radius:15px;background:#fbfcfb;margin-bottom:10px;overflow:hidden;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.schedule-assignment-row.is-expanded{border-color:#cddbd2;background:#fff;box-shadow:0 8px 22px rgba(38,66,56,.055)}
.schedule-assignment-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 9px 8px 12px}
.schedule-assignment-toggle{min-width:0;display:grid;grid-template-columns:minmax(140px,1fr) auto 20px;align-items:center;gap:12px;width:100%;padding:4px 3px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.schedule-assignment-person{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--primary);font-size:.84rem;font-weight:850}
.schedule-assignment-summary-time{display:flex;align-items:center;gap:6px;color:#66786e;font-size:.75rem;font-weight:760;white-space:nowrap}
.schedule-assignment-color-dot{flex:0 0 auto;width:9px;height:9px;border-radius:999px;background:var(--assignment-color,#264238);box-shadow:0 0 0 2px rgba(38,66,56,.08)}
.schedule-assignment-arrow{color:#a2aea7;font-weight:600}
.schedule-assignment-chevron{display:grid;place-items:center;color:#7a8981}
.schedule-assignment-chevron svg{width:16px;height:16px;transition:transform .16s ease}
.schedule-assignment-row.is-expanded .schedule-assignment-chevron svg{transform:rotate(180deg)}
.schedule-remove-employee{width:33px;height:33px;color:#a65046;background:#fff}
.schedule-remove-employee svg{width:16px;height:16px}
.schedule-assignment-details{display:none;padding:13px 14px 14px;border-top:1px solid var(--line);background:#fff}
.schedule-assignment-row.is-expanded .schedule-assignment-details{display:block}
.schedule-assignment-grid{display:grid;grid-template-columns:minmax(190px,1.35fr) minmax(180px,1.2fr) repeat(3,minmax(112px,.72fr));gap:10px;align-items:start}
.schedule-assignment-grid .field{gap:5px}
.schedule-assignment-grid .field>span{font-size:.69rem;font-weight:790;color:#52635a}
.schedule-assignment-grid input,.schedule-assignment-grid select{padding:9px 10px;border-radius:10px;font-size:.8rem}
.schedule-assignment-grid .field>small{margin-top:1px;color:#8a968f;font-size:.59rem;line-height:1.3}
.schedule-employee-field small{min-height:28px;margin-top:2px;color:#6b7c73!important;font-size:.64rem!important;line-height:1.35}
.schedule-note-field{grid-column:1/-1}
.schedule-add-employee-main{margin-top:2px}
.schedule-add-employee-main svg,.schedule-modal-footer-actions svg{width:15px;height:15px}
.schedule-assignment-empty{display:flex;flex-direction:column;gap:3px;padding:18px;border:1px dashed var(--line-strong);border-radius:14px;background:#fbfcfb;color:var(--muted);font-size:.78rem;margin-bottom:10px}
.schedule-assignment-empty strong{color:var(--primary);font-size:.86rem}
.schedule-assignment-row.is-highlighted{animation:schedule-assignment-highlight 1.5s ease}
@keyframes schedule-assignment-highlight{
  0%,100%{border-color:var(--line);background:#fbfcfb;box-shadow:none}
  18%,62%{border-color:#87ab93;background:#eef7f0;box-shadow:0 0 0 4px rgba(181,211,185,.26),0 12px 28px rgba(38,66,56,.08)}
}
.schedule-shift-modal .modal-foot{align-items:center;justify-content:space-between;gap:15px}
.schedule-modal-footer-total{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.schedule-modal-footer-total span{font-size:.65rem;color:var(--muted);font-weight:740}
.schedule-modal-footer-total strong{font-size:1.03rem;color:var(--primary)}
.schedule-modal-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}

@media(max-width:1020px){
  .schedule-topbar-heading{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1}
  .schedule-topbar-title{justify-content:center;font-size:.94rem}
  .schedule-topbar-period{max-width:100%;font-size:.64rem;font-weight:650;text-align:center}
  .schedule-publish-dot{width:7px;height:7px;flex-basis:7px;box-shadow:0 0 0 3px rgba(216,139,47,.12)}
  .schedule-commandbar{align-items:flex-start;flex-direction:column}
  .schedule-commandbar-left,.schedule-commandbar-right{width:100%}
  .schedule-commandbar-right{margin-left:0;justify-content:flex-end}
  .schedule-location-select{flex:1;min-width:0}
  .schedule-location-select select{min-width:0;max-width:210px}
  .schedule-layer-control{flex:0 0 auto}
  .schedule-layer-popover{left:auto;right:0}
  .schedule-assignment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule-employee-field,.schedule-note-field{grid-column:1/-1}
}

@media(max-width:700px){
  .schedule-commandbar{margin-bottom:12px}
  .schedule-commandbar-left{align-items:stretch}
  .schedule-commandbar-right{display:grid;grid-template-columns:42px minmax(0,1fr) 42px minmax(105px,auto);gap:7px}
  .schedule-commandbar-right .btn{padding-left:8px;padding-right:8px}
  .schedule-location-select{width:100%;justify-content:space-between}
  .schedule-location-select select{width:100%;max-width:none}
  .schedule-layer-trigger span{display:inline}
  .schedule-layer-popover{width:min(260px,calc(100vw - 32px))}
  .schedule-location-warning{padding:12px}
  .schedule-table-v3{grid-template-columns:210px repeat(7,minmax(145px,1fr));min-width:1225px}
  .schedule-table-v3 .schedule-head{min-height:90px}
  .schedule-shift-modal .modal-head{padding:14px 14px 11px;gap:7px 10px}
  .schedule-shift-modal .modal-head h2{font-size:1rem}
  .schedule-shift-modal .modal-body{padding:12px 14px 15px}
  .schedule-shift-modal .modal-foot{padding:11px 14px}
  .schedule-shift-modal-header-requirements .schedule-requirement-card{flex-basis:132px}
  .schedule-assignment-summary{padding:7px 8px 7px 10px}
  .schedule-assignment-toggle{grid-template-columns:minmax(85px,1fr) auto 18px;gap:7px}
  .schedule-assignment-person{font-size:.78rem}
  .schedule-assignment-summary-time{font-size:.7rem;gap:4px}
  .schedule-assignment-details{padding:11px}
  .schedule-assignment-grid{grid-template-columns:1fr}
  .schedule-employee-field,.schedule-note-field{grid-column:auto}
  .modal-foot:has(.schedule-modal-footer-total){align-items:stretch;flex-direction:column}
  .schedule-modal-footer-total{width:100%;padding-bottom:9px;border-bottom:1px solid var(--line)}
  .schedule-modal-footer-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .schedule-modal-footer-actions .btn{width:100%}
}

/* -------------------------------------------------------------------------- */
/* HorecAll web verbeteringen 2026.09.09                                      */
/* -------------------------------------------------------------------------- */
.dashboard-eyebrow{color:#5f7a6c!important}
.dashboard-app-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;margin:18px 0}
.dashboard-next-card{border-color:#cfe1d3;background:linear-gradient(135deg,#fff,#f3f8f4)}
.dashboard-next-card,.dashboard-upcoming-card,.dashboard-news-card,.dashboard-clock-card{min-width:0}
.dashboard-next-card{grid-column:1/-1}
.dashboard-upcoming-card{grid-column:1}.dashboard-news-card{grid-column:1}.dashboard-clock-card{grid-column:2;grid-row:2 / span 2;align-self:start}
.dashboard-stat-grid{margin-top:18px}
.dashboard-onboarding-card{margin-top:18px}
.dashboard-shift-list{display:grid;gap:10px}
.dashboard-shift-row{display:grid;grid-template-columns:minmax(145px,.42fr) minmax(0,1fr);gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}
.dashboard-shift-row+.dashboard-shift-row{margin-top:0}
.dashboard-shift-row.is-large{padding:18px;background:#fbfdfb;border-color:#d7e7da}
.dashboard-shift-date{display:grid;gap:3px;color:var(--muted);font-size:.76rem;font-weight:700}
.dashboard-shift-date strong{color:var(--primary);font-size:.88rem;line-height:1.25}
.dashboard-shift-main h3{margin:0 0 5px;color:var(--primary);font-size:1rem}
.dashboard-shift-row.is-large .dashboard-shift-main h3{font-size:1.22rem}
.dashboard-shift-main p{margin:4px 0 0;color:#5f7067}
.dashboard-news-feed .feed-item p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.schedule-view-switch{flex:0 0 auto}.schedule-view-switch button{white-space:nowrap}
.schedule-day-select{display:flex;align-items:center;gap:8px;min-height:42px;padding:5px 7px 5px 12px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:750}
.schedule-day-select input{border:0;outline:0;background:transparent;color:var(--primary);font:inherit;font-size:.86rem;font-weight:780;padding:4px 2px;min-width:138px}
.schedule-grid-day{overflow:visible}
.schedule-table-v3.schedule-table-day{min-width:0;grid-template-columns:minmax(170px,.48fr) minmax(0,1fr)}
.schedule-table-v3.schedule-table-day .schedule-head{min-height:74px}
.schedule-table-v3.schedule-table-day .schedule-cell{min-height:72px}
.schedule-table-v3.schedule-table-day .employee-cell{left:0}
.schedule-table-v3.schedule-table-day .shift-card{max-width:520px}
.schedule-table-v3.schedule-table-day .agenda-inline{max-width:520px}

@media(max-width:1020px){
  .dashboard-app-layout{grid-template-columns:1fr}
  .dashboard-next-card,.dashboard-upcoming-card,.dashboard-news-card,.dashboard-clock-card{grid-column:auto;grid-row:auto}
  .schedule-day-select{flex:1;justify-content:space-between;min-width:210px}
  .schedule-day-select input{min-width:0;width:100%}
}

@media(max-width:700px){
  .dashboard-app-layout{gap:12px;margin:14px 0}
  .dashboard-shift-row{grid-template-columns:1fr;gap:9px;padding:13px}
  .dashboard-shift-row.is-large{padding:15px}
  .dashboard-shift-date{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
  .dashboard-shift-main h3,.dashboard-shift-row.is-large .dashboard-shift-main h3{font-size:1rem}
  .dashboard-stat-grid{margin-top:14px}

  .schedule-commandbar{gap:10px}
  .schedule-commandbar-left{display:grid;grid-template-columns:1fr;gap:8px}
  .schedule-commandbar-right{display:flex;flex-wrap:wrap;gap:7px;justify-content:stretch}
  .schedule-commandbar-right .btn{flex:1 1 auto;min-width:0;padding-left:9px;padding-right:9px}
  .schedule-commandbar-right .schedule-nav-btn{flex:0 0 42px;width:42px}
  .schedule-pending-publish-btn,.schedule-week-publish-btn{flex:1 1 100%!important}
  .schedule-view-switch{display:flex;width:100%}
  .schedule-view-switch button{flex:1;padding-left:8px;padding-right:8px}
  .schedule-day-select{width:100%;min-width:0}
  .schedule-table-v3.schedule-table-day{min-width:0;grid-template-columns:minmax(96px,34%) minmax(0,1fr)}
  .schedule-table-v3.schedule-table-day .schedule-cell{padding:8px!important;min-height:66px}
  .schedule-table-v3.schedule-table-day .schedule-head{min-height:66px}
  .schedule-table-v3.schedule-table-day .schedule-corner{font-size:.65rem}
  .schedule-table-v3.schedule-table-day .schedule-date{font-size:.74rem;white-space:normal}
  .schedule-table-v3.schedule-table-day .schedule-opening,.schedule-table-v3.schedule-table-day .schedule-requirement{white-space:normal;font-size:.61rem}
  .schedule-table-v3.schedule-table-day .schedule-employee-name{font-size:.75rem;line-height:1.25;flex-wrap:wrap}
  .schedule-table-v3.schedule-table-day .schedule-employee-function,.schedule-table-v3.schedule-table-day .schedule-employee-hours,.schedule-table-v3.schedule-table-day .schedule-missing-hours{font-size:.62rem}
  .schedule-table-v3.schedule-table-day .shift-card{padding:8px;border-radius:9px}
  .schedule-table-v3.schedule-table-day .shift-card-top strong{font-size:.68rem;white-space:normal}
  .schedule-table-v3.schedule-table-day .shift-card-label,.schedule-table-v3.schedule-table-day .shift-card-location,.schedule-table-v3.schedule-table-day .shift-card-delete-note{font-size:.61rem}
}

/* -------------------------------------------------------------------------- */
/* Build 1.0.2 build 2 - modal fixes, checkboxes and target selectors          */
/* -------------------------------------------------------------------------- */
.check-row{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:auto;
  max-width:100%;
  margin:0;
  color:#44544d;
  font-size:.86rem;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  vertical-align:middle;
}
.check-row span{min-width:0;overflow-wrap:anywhere}
.check-row input[type="checkbox"],
.field input[type="checkbox"],
.modal .field input[type="checkbox"],
.field .check-row input[type="checkbox"],
.modal .field .check-row input[type="checkbox"]{
  flex:0 0 18px;
  width:18px!important;
  min-width:18px;
  max-width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  border-radius:5px;
  accent-color:var(--primary);
  box-shadow:none;
}
.field .check-row input[type="checkbox"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--soft) 45%,transparent)}
.field.full>.check-row{margin-right:16px;margin-bottom:6px}
.check-list{display:grid;gap:10px;align-items:start}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px 12px;align-items:start}
.check-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.check-card .check-row{font-size:.83rem;font-weight:720}
.check-card-meta{display:block;color:var(--muted);font-size:.7rem;font-weight:650;margin-top:1px}
.checkbox-inline-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.modal .stack>.check-row{padding:2px 0}

.schedule-assignment-row{overflow:visible}
.schedule-standard-shift-field{position:relative;z-index:2}
.schedule-shift-picker{position:relative;min-width:0}
.schedule-shift-picker-trigger{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:9px 10px;
  font-size:.8rem;
  text-align:left;
  outline:none;
}
.schedule-shift-picker-trigger:hover{border-color:#b9c9bf}
.schedule-shift-picker.is-open .schedule-shift-picker-trigger,
.schedule-shift-picker-trigger:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--soft) 42%,transparent)}
.schedule-shift-picker-current{min-width:0;display:flex;align-items:center;gap:8px}
.schedule-shift-picker-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-shift-picker-caret{color:#839189;flex:0 0 auto}
.schedule-shift-color-dot{flex:0 0 auto;width:10px;height:10px;border-radius:999px;background:var(--shift-option-color,#264238);box-shadow:0 0 0 2px rgba(38,66,56,.08)}
.schedule-shift-picker-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:35;
  max-height:min(330px,42vh);
  overflow:auto;
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fff;
  box-shadow:0 22px 60px rgba(27,46,39,.18);
}
.schedule-shift-picker-menu[hidden]{display:none!important}
.schedule-shift-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:10px;
  padding:9px 10px;
  background:transparent;
  color:var(--text);
  text-align:left;
  font-size:.8rem;
}
.schedule-shift-option:hover,
.schedule-shift-option.is-selected{background:var(--soft-3);color:var(--primary)}
.schedule-shift-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.news-target-group[hidden]{display:none!important}
.news-target-box{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbfcfb}
.news-target-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.news-target-toolbar small{color:var(--muted);font-weight:650}
.news-target-empty{padding:12px;border:1px dashed var(--line-strong);border-radius:12px;background:#fff;color:var(--muted);font-size:.84rem}

@media(max-width:700px){
  .modal-backdrop{padding:10px;align-items:end;place-items:end stretch}
  .modal{width:100%;max-height:94vh;border-radius:22px 22px 0 0}
  .modal.wide{width:100%}
  .modal-head{padding:16px}
  .modal-body{padding:16px}
  .modal-foot{padding:13px 16px;gap:8px;flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 auto}
  .form-grid{grid-template-columns:1fr;gap:13px}
  .checkbox-inline-group{display:grid;gap:9px}
  .check-grid{grid-template-columns:1fr}
  .schedule-shift-picker-menu{max-height:45vh}
}

/* Minimumbezetting-indicator direct vóór de dag/datum */
.schedule-date-row .schedule-requirement{
  margin:0;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.schedule-date-row .schedule-requirement>span{
  margin:0;
}

/* ========================================================================== */
/* HorecAll Web 1.0.4 — professionele afwerking, compacte instellingen,       */
/* dienstkleuren op het dashboard en verlofsaldo                              */
/* ========================================================================== */

:root{
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 12px 32px rgba(32,49,43,.07);
  --shadow-sm:0 1px 2px rgba(32,49,43,.04),0 2px 8px rgba(32,49,43,.035);
  --ring:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
  --bg:#f5f7f5;
}

body{font-size:14.5px;font-feature-settings:"cv11","ss01"}
h1,h2,h3{letter-spacing:-.015em}

/* Focus zichtbaar voor toetsenbordgebruikers */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring)}
.nav-link:focus-visible,.nav-group-title:focus-visible,.nav-sublink:focus-visible{box-shadow:0 0 0 2px rgba(181,211,185,.55)}

/* Topbar & content */
.topbar{height:64px;padding:0 28px;background:rgba(245,247,245,.86)}
.topbar-title{font-size:1.06rem;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.content{padding:26px 28px 40px;max-width:1480px;animation:hc-page-in .18s ease-out}
@keyframes hc-page-in{from{opacity:0;transform:translateY(4px)}}
.content .page-header{margin-bottom:18px;min-height:38px}
.content .page-header p{font-size:.88rem;color:var(--muted)}

/* Kaarten */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}
.card h2{font-size:1.02rem;font-weight:780;letter-spacing:-.01em}
.card-title{margin-bottom:14px}
.card-title .muted{font-size:.8rem}
.grid{gap:16px}
.stat{padding:16px 18px}
.stat:after{display:none}
.stat-label{font-size:.74rem;font-weight:700;text-transform:none;letter-spacing:0}
.stat-value{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:4px}

/* Knoppen */
.btn{border-radius:var(--radius-sm);padding:9px 14px;font-weight:700;font-size:.88rem;letter-spacing:-.005em;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn:hover{transform:none;box-shadow:none}
.btn.primary{box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.08)}
.btn.primary:hover{background:color-mix(in srgb,var(--primary) 88%,black)}
.btn.ghost:hover{background:#f6f8f6}
.btn.danger:hover{background:#f8e4e1}
.btn.small{padding:6px 10px;font-size:.78rem;border-radius:8px}
.icon-btn{border-radius:9px;width:34px;height:34px}

/* Formulieren */
.field{gap:6px}
.field label{font-size:.76rem;font-weight:700;color:#4a5a53}
.field input,.field select,.field textarea{border-radius:var(--radius-sm);padding:10px 12px;font-size:.9rem;border-color:#d3ddd6}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--ring)}
.field input:disabled,.field select:disabled{background:#f4f6f4;color:#8b968f;cursor:not-allowed}

/* Tabellen */
.table-wrap{border-radius:12px}
.table th{background:#f7f9f7;font-size:.68rem;letter-spacing:.06em;color:#6d7a73;padding:10px 14px}
.table td{padding:11px 14px;font-size:.88rem;font-variant-numeric:tabular-nums}

/* Pills, lege staten, feeds */
.pill{padding:3px 8px;font-size:.7rem;font-weight:750}
.empty{padding:34px 18px;font-size:.88rem}
.empty:before{width:30px;height:3px;margin-bottom:14px}
.empty strong{font-size:.96rem}
.feed-item{border-radius:12px;padding:14px 15px}
.feed-item h3{font-size:.95rem}

/* Modals */
.modal{border-radius:18px}
.modal-head{padding:16px 20px;background:#fff}
.modal-head h2{font-size:1.06rem}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px;background:#fafbfa}

/* Toasts */
.toast{border-radius:12px;font-size:.88rem;font-weight:600}

/* Sidebar details */
.sidebar-footer{font-size:.7rem;color:rgba(247,249,246,.5);padding:10px 6px 2px;border-top:1px solid var(--hc-shell-line)}
.sidebar-footer strong{font-size:.72rem}
.nav-link,.nav-group-title{min-height:40px;font-size:.9rem}

/* Hero rustiger */
.hero{border-radius:18px;padding:22px 26px;background:linear-gradient(120deg,color-mix(in srgb,var(--soft) 55%,white),#f3f7f3)}
.hero h1{font-size:1.65rem;letter-spacing:-.03em;margin-bottom:4px}
.hero p{font-size:.92rem}
.hero:after{opacity:.045}

/* -------------------------------------------------------------------------- */
/* Dashboard: dienstkleur                                                     */
/* -------------------------------------------------------------------------- */
.dashboard-shift-row{position:relative;border-left:4px solid var(--shift-color,var(--primary));border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--shift-color,var(--primary)) 7%,#fff),#fff 55%)}
.dashboard-shift-row.is-large{border-left-width:6px;border-color:color-mix(in srgb,var(--shift-color,var(--primary)) 30%,#dfe8e1);border-left-color:var(--shift-color,var(--primary));background:linear-gradient(90deg,color-mix(in srgb,var(--shift-color,var(--primary)) 11%,#fff),#fff 65%)}
.dashboard-shift-main h3{display:flex;align-items:center;gap:8px}
.dashboard-shift-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--shift-color,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--shift-color,var(--primary)) 18%,transparent)}
.dashboard-next-card{background:#fff;border-color:var(--line)}

/* -------------------------------------------------------------------------- */
/* Instellingen — compacte weergave                                           */
/* -------------------------------------------------------------------------- */
.content.is-settings .card{padding:16px 18px}
.content.is-settings .card h2{font-size:.98rem;margin-bottom:12px}
.content.is-settings .card-title{margin-bottom:10px}
.content.is-settings .card-title h2{margin:0}
.content.is-settings .grid{gap:14px}
.content.is-settings .form-grid{gap:10px 14px}
.content.is-settings .field{gap:4px}
.content.is-settings .field input,.content.is-settings .field select{padding:7px 10px;font-size:.86rem;min-height:36px}
.content.is-settings .field textarea{padding:8px 10px;font-size:.86rem;min-height:80px}
.content.is-settings .field input[type="color"]{padding:3px;height:36px}
.content.is-settings .stack{gap:6px}
.content.is-settings .feed-item{padding:9px 12px;border-radius:10px}
.content.is-settings .feed-item h3{font-size:.9rem;margin-bottom:2px}
.content.is-settings .feed-item p{margin-top:4px;font-size:.84rem}
.content.is-settings .check-row{font-size:.84rem}
.content.is-settings .info-box{padding:10px 12px;margin:0 0 12px;font-size:.82rem}
.content.is-settings .empty{padding:22px 14px}
.content.is-settings .table td{padding:9px 12px}
.content.is-settings .opening-hours-tabs{margin-bottom:14px;gap:22px}
.content.is-settings .opening-hours-tab{padding-bottom:9px;font-size:.9rem}
.settings-toggle-row{margin:2px 0 12px}

/* Compacte dag-/tijdlijst (openingstijden, standaardrooster) */
.oh-list{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.oh-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 112px 14px 112px minmax(80px,1fr);align-items:center;gap:10px;padding:6px 14px;min-height:46px;border-top:1px solid #edf1ee}
.oh-row:first-child{border-top:0}
.oh-head{min-height:32px;background:#f7f9f7;font-size:.66rem;font-weight:800;color:#6d7a73;text-transform:uppercase;letter-spacing:.06em}
.oh-day{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;color:var(--text);cursor:pointer}
.oh-day input{width:17px;height:17px;margin:0;accent-color:var(--primary)}
.oh-time{width:100%;height:34px;border:1px solid #d3ddd6;border-radius:8px;padding:4px 8px;background:#fff;color:var(--text);font-size:.86rem;font-variant-numeric:tabular-nums}
.oh-time:focus{border-color:var(--primary);outline:none;box-shadow:var(--ring)}
.oh-sep{color:#9aa69f;text-align:center}
.oh-status{justify-self:end;font-size:.74rem;font-weight:700;color:var(--success)}
.oh-row.is-closed{background:#fafbfa}
.oh-row.is-closed .oh-day span{color:#7c8a83}
.oh-row.is-closed .oh-time{opacity:.45}
.oh-row.is-closed .oh-status{color:#9aa69f}

/* Compacte instellingenlijst */
.settings-list-card{padding:6px!important}
.settings-list-card>.card-title{padding:10px 12px 4px}
.settings-list{display:grid}
.settings-list-head,.settings-list-row{display:grid;grid-template-columns:minmax(160px,1fr) auto auto 16px;align-items:center;gap:14px;padding:9px 12px}
.settings-list-shifts .settings-list-head,.settings-list-shifts .settings-list-row{grid-template-columns:minmax(160px,1.3fr) 130px minmax(180px,1fr) 100px 16px}
.settings-list-head{font-size:.66rem;font-weight:800;color:#6d7a73;text-transform:uppercase;letter-spacing:.06em;padding-top:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.settings-list-row{width:100%;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .12s}
.settings-list-row+.settings-list-row{box-shadow:0 -1px 0 #eef2ef}
.settings-list-row:hover{background:#f6f9f6}
.settings-list-row.is-static{cursor:default;grid-template-columns:minmax(160px,1fr) auto auto}
.settings-list-row.is-static .settings-list-actions{grid-column:-2}
.settings-list-row.is-static:hover{background:transparent}
.settings-list-main{display:grid;gap:1px;min-width:0}
.settings-list-main strong{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-list-main>span{font-size:.76rem;color:var(--muted)}
.settings-list-meta,.settings-list-time{font-size:.82rem;color:#55655d;white-space:nowrap;font-variant-numeric:tabular-nums}
.settings-list-days{display:flex;gap:3px;flex-wrap:wrap;font-size:.78rem;color:#55655d}
.settings-list-actions{display:flex;gap:6px;justify-content:flex-end}
.settings-list-chevron{color:#a5b0aa;font-size:1.1rem;line-height:1;text-align:right}
.settings-list-row .pill{justify-self:start}
.settings-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--shift-color,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--shift-color,var(--primary)) 16%,transparent)}
.day-chip{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 4px;border-radius:5px;background:#f1f4f2;color:#a3ada7;font-size:.66rem;font-weight:800}
.day-chip.is-on{background:color-mix(in srgb,var(--shift-color,var(--primary)) 14%,#fff);color:color-mix(in srgb,var(--shift-color,var(--primary)) 80%,black)}

/* Standaarddienst-modal: dagen compact */
.std-days{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.std-day{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;border-top:1px solid #edf1ee}
.std-day:first-child{border-top:0}
.std-day-min{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;color:var(--muted)}
.std-day-min input{width:70px;height:32px;padding:4px 8px;border:1px solid #d3ddd6;border-radius:8px;font:inherit;font-size:.86rem;color:var(--text)}

/* Instellingen-overzicht */
.settings-home{display:grid;gap:22px}
.settings-group-title{margin:0 0 9px;font-size:.7rem!important;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#6d7a73!important}
.settings-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.settings-tile{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;font:inherit;text-align:left;box-shadow:var(--shadow-sm);transition:border-color .14s,box-shadow .14s}
.settings-tile:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--line));box-shadow:0 4px 14px rgba(32,49,43,.07)}
.settings-tile-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary)}
.settings-tile-icon svg{width:19px;height:19px}
.settings-tile-text{display:grid;gap:1px;min-width:0;flex:1}
.settings-tile-text strong{font-size:.9rem;color:var(--text)}
.settings-tile-text span{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-tile-chevron{color:#a5b0aa;font-size:1.2rem}

/* -------------------------------------------------------------------------- */
/* Verlofsaldo                                                                */
/* -------------------------------------------------------------------------- */
.balance-hero{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:28px;align-items:center;padding:22px 24px;margin-bottom:14px;border-color:color-mix(in srgb,var(--primary) 16%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--soft) 30%,#fff),#fff 70%)}
.balance-hero-label{display:block;font-size:.76rem;font-weight:750;color:var(--muted)}
.balance-hero-value{display:flex;align-items:baseline;gap:7px;margin:4px 0 2px;font-size:2.6rem;font-weight:820;letter-spacing:-.04em;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.balance-hero-value small{font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--muted)}
.balance-hero-sub{font-size:.84rem;font-weight:650;color:#55655d}
.balance-hero-split{display:grid;gap:10px}
.balance-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#edf1ee}
.balance-bar span{height:100%}
.balance-bar .is-statutory,.balance-legend i.is-statutory{background:var(--primary)}
.balance-bar .is-extra,.balance-legend i.is-extra{background:color-mix(in srgb,var(--primary) 40%,var(--soft))}
.balance-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:#55655d}
.balance-legend span{display:inline-flex;align-items:center;gap:7px}
.balance-legend i{width:9px;height:9px;border-radius:3px}
.balance-legend strong{color:var(--text);font-variant-numeric:tabular-nums}
.balance-hero-meta{font-size:.76rem;color:var(--muted)}
.balance-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.balance-metric{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}
.balance-metric-label{font-size:.74rem;font-weight:700;color:var(--muted)}
.balance-metric-value{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--primary);font-variant-numeric:tabular-nums}
.balance-metric-hint{font-size:.72rem;color:#8a968f}
.balance-metric.is-positive .balance-metric-value{color:var(--success)}
.balance-metric.is-negative .balance-metric-value{color:var(--danger)}
.balance-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.balance-years{display:grid;gap:14px}
.balance-year{display:grid;gap:7px;padding-bottom:14px;border-bottom:1px solid #eef2ef}
.balance-year:last-child{padding-bottom:0;border-bottom:0}
.balance-year-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.balance-year-head strong{font-size:.95rem;color:var(--text)}
.balance-year-head span{font-size:.8rem;color:#55655d;font-variant-numeric:tabular-nums}
.balance-progress{height:6px;border-radius:999px;background:#edf1ee;overflow:hidden}
.balance-progress span{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.balance-year-meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.74rem;color:var(--muted)}
.balance-ledger{list-style:none;margin:0;padding:0;display:grid}
.balance-ledger li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid #eef2ef}
.balance-ledger li:first-child{border-top:0;padding-top:2px}
.balance-ledger-main{display:grid;gap:1px;min-width:0}
.balance-ledger-main strong{font-size:.87rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balance-ledger-main span{font-size:.74rem;color:var(--muted)}
.balance-ledger-hours{flex:0 0 auto;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums;color:#55655d}
.balance-ledger-hours.is-positive{color:var(--success)}
.balance-ledger-hours.is-negative{color:var(--danger)}

/* -------------------------------------------------------------------------- */
/* Responsief                                                                 */
/* -------------------------------------------------------------------------- */
@media(max-width:1020px){
  .topbar{padding:0 18px}
  .content{padding:20px 18px 32px}
  .balance-columns{grid-template-columns:1fr}
}
@media(max-width:700px){
  .content{padding:16px 14px 28px}
  .balance-hero{grid-template-columns:1fr;gap:16px;padding:18px}
  .balance-hero-value{font-size:2.2rem}
  .oh-row{grid-template-columns:minmax(0,1fr) 92px 10px 92px;gap:8px;padding:6px 10px}
  .oh-row .oh-status,.oh-head span:last-child{display:none}
  .oh-time{padding:4px 6px;font-size:.82rem}
  .settings-list-head{display:none}
  .settings-list-row,.settings-list-shifts .settings-list-row{grid-template-columns:minmax(0,1fr) auto 14px;gap:4px 10px}
  .settings-list-row:not(.is-static) .settings-list-main{grid-column:1;grid-row:1}
  .settings-list-row:not(.is-static) .settings-list-time,.settings-list-row:not(.is-static) .settings-list-meta{grid-column:1;grid-row:2}
  .settings-list-row:not(.is-static) .settings-list-days{grid-column:1/-1;grid-row:3}
  .settings-list-row:not(.is-static) .pill{grid-column:2;grid-row:1}
  .settings-list-row:not(.is-static) .settings-list-chevron{grid-column:3;grid-row:1}
  .settings-list-row.is-static{grid-template-columns:minmax(0,1fr) auto}
  .settings-list-row.is-static .settings-list-meta{display:none}
  .settings-tiles{grid-template-columns:1fr}
}
.oh-row{grid-template-columns:minmax(150px,1fr) 124px 14px 124px minmax(80px,.8fr)}
.oh-head span:last-child{text-align:right}
#opening-hours-weekly .card,#opening-hours-special .card,#standard-schedule-form{max-width:900px}
@media(max-width:700px){.oh-row{grid-template-columns:minmax(0,1fr) 96px 10px 96px}}
@media(max-width:700px){
  .balance-metrics{grid-template-columns:1fr 1fr;gap:10px}
  .balance-metric{padding:12px}
  .balance-metric-value{font-size:1.12rem}
  .dashboard-stat-grid.grid.cols-4{grid-template-columns:1fr 1fr;gap:10px}
  .settings-list-card .card-title .muted{display:none}
}

/* Medewerker → app-melding op het inlogscherm */
.app-only-card{text-align:left}
.app-only-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 0 16px;border-radius:14px;background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary)}
.app-only-icon svg{width:26px;height:26px}
.app-only-card h1{font-size:1.7rem!important}
.app-only-card p{margin-bottom:12px!important}
.app-only-actions{justify-content:stretch}
.app-only-actions .btn{flex:1 1 100%}

/* Medewerkers: uitnodigingen later versturen */
.invite-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--soft) 22%,#fff)}
.invite-banner strong{display:block;font-size:.92rem;color:var(--text)}
.invite-banner span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.invite-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.invite-option{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;cursor:pointer}
.invite-option:has(input:checked){border-color:var(--primary);box-shadow:var(--ring)}
.invite-option input{margin:3px 0 0;accent-color:var(--primary)}
.invite-option strong{display:block;font-size:.86rem;color:var(--text)}
.invite-option small{display:block;margin-top:2px;font-size:.75rem;line-height:1.4;color:var(--muted)}
.invite-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 8px;border-bottom:1px solid var(--line);font-size:.82rem}
.invite-list{display:grid;max-height:min(52vh,460px);overflow:auto}
.invite-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto minmax(90px,auto);align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid #eef2ef;cursor:pointer}
.invite-row input{width:17px;height:17px;margin:0;accent-color:var(--primary)}
.invite-row-main{display:grid;min-width:0}
.invite-row-main strong{font-size:.87rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-row-main span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-row-result{font-size:.76rem;font-weight:700;color:var(--muted);text-align:right}
.invite-row-result.is-ok{color:var(--success)}
.invite-row-result.is-error{color:var(--danger)}
@media(max-width:700px){
  .invite-banner{flex-direction:column;align-items:stretch}
  .invite-choice{grid-template-columns:1fr}
  .invite-row{grid-template-columns:18px minmax(0,1fr) auto}
  .invite-row .pill{display:none}
}

/* Medewerker: ingangsdatum nieuwe contracturen */
.field[hidden],[data-contract-effective][hidden]{display:none!important}
.contract-effective-field{padding:10px 12px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--soft) 16%,#fff)}
.field-hint{font-size:.72rem;line-height:1.4;color:var(--muted)}
#employee-form .form-grid{align-items:start}

/* Taalkeuze */
.language-card{max-width:620px}
.language-options{display:grid;gap:10px}
.language-option{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.language-option:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.language-option.is-active{border-color:var(--primary);box-shadow:var(--ring)}
.language-flag{display:grid;place-items:center;width:40px;height:30px;border-radius:7px;background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary);font-size:.78rem;font-weight:850;letter-spacing:.04em}
.language-text{display:grid;flex:1;min-width:0}
.language-text strong{font-size:.92rem;color:var(--text)}
.language-text span{font-size:.76rem;color:var(--muted)}
.language-check{color:var(--primary);font-weight:900;width:18px;text-align:center}
.login-lang{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:#a2ada7}
.login-lang button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:650;cursor:pointer;padding:2px 4px;border-radius:6px}
.login-lang button:hover{color:var(--primary)}
.login-lang button.is-active{color:var(--primary);font-weight:800}

/* Uniforme opbouw: inhoud sluit direct aan op de bovenbalk, alles in witte blokken */
.content .page-header.is-empty{display:none}
.content>.empty,.content>.feed>.empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card>.feed>.empty,.card>.empty{border:0;box-shadow:none}
.content>.error-box:first-child{margin-top:0}
/* Alle blokken even breed als de rest van de pagina */
#opening-hours-weekly .card,#opening-hours-special .card,#standard-schedule-form,.language-card{max-width:none}

/* ========================================================================== */
/* 1.2.0 — managersoverzicht, tellers, zoeken, import, weekkosten, sneltoetsen */
/* ========================================================================== */

/* Tellers in het menu */
.nav-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:#d9534a;color:#fff;font-size:.68rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;margin-left:auto}
.nav-badge[hidden]{display:none}
.nav-badge.is-inline{margin-left:0}
.nav-sublink{display:flex;align-items:center;gap:8px}
.nav-group-title .nav-badge+.nav-chevron{margin-left:6px}

/* Managersoverzicht op Home */
.manager-today{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:16px;margin-top:16px}
.manager-today:empty{display:none}
.manager-shift-list{list-style:none;margin:0;padding:0;display:grid}
.manager-shift-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 110px;align-items:center;gap:12px;padding:9px 2px;border-top:1px solid var(--line)}
.manager-shift-list li:first-child{border-top:0;padding-top:2px}
.manager-shift-main{display:grid;min-width:0}
.manager-shift-main strong{font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manager-shift-main span{font-size:.75rem;color:var(--muted)}
.manager-shift-time{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.manager-shift-state{justify-self:end;font-size:.72rem;font-weight:750;padding:3px 8px;border-radius:999px;background:var(--soft-3);color:var(--muted)}
.manager-shift-state.is-now{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.manager-shift-state.is-done{opacity:.7}
.manager-more{margin:8px 0 0;font-size:.8rem}
.manager-card-foot{display:flex;justify-content:flex-end;margin-top:12px}
.manager-pending-list{display:grid;gap:6px}
.manager-pending-row{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.manager-pending-row:hover{background:var(--soft-3)}
.manager-pending-row strong{font-size:1rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.manager-pending-row.has-items strong{color:#d9534a}
.manager-all-done{margin:10px 0 0;font-size:.82rem}

/* Lijst-werkbalk (zoeken + filters) */
.list-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 14px}
.list-search{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:200px}
.list-search svg{position:absolute;left:11px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.list-search input{width:100%;height:38px;padding:7px 12px 7px 35px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface,#fff);color:var(--text);font:inherit;font-size:.88rem}
.list-toolbar select{height:38px;padding:6px 30px 6px 11px;border:1px solid var(--line-strong);border-radius:10px;background-color:var(--surface,#fff);color:var(--text);font:inherit;font-size:.86rem}
.list-search input:focus,.list-toolbar select:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.list-count{margin-left:auto;font-size:.8rem;white-space:nowrap}

/* Import */
.import-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.import-intro p{margin:0;color:var(--muted);font-size:.86rem}
.import-summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 10px;font-size:.88rem}
.import-summary span{color:var(--muted);font-size:.8rem}
.import-table{max-height:min(40vh,360px)}
.import-table .table{min-width:640px}
.import-table tr.is-invalid td{color:var(--muted)}
.copy-preview{margin-top:4px}

/* Weekoverzicht in de roosterbouwer */
.schedule-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);box-shadow:var(--shadow-sm)}
.schedule-summary-stats{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.schedule-summary-stats>span{display:grid;gap:1px}
.schedule-summary-stats small{font-size:.7rem;font-weight:700;color:var(--muted)}
.schedule-summary-stats strong{font-size:1rem;color:var(--text);font-variant-numeric:tabular-nums}
.schedule-summary-stats .schedule-summary-note{font-size:.74rem;color:var(--muted);align-self:center}
.schedule-summary .btn svg{width:15px;height:15px}

/* Pushberichten, metadata */
.push-steps{margin:0 0 14px;padding-left:18px;color:var(--muted);font-size:.86rem;line-height:1.6}
.settings-meta{margin:12px 0 0;font-size:.76rem}

/* Sneltoetsen */
.shortcut-list{display:grid}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem}
.shortcut-row:first-child{border-top:0}
.shortcut-keys{display:flex;align-items:center;gap:5px;color:var(--muted)}
kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface,#fff);color:var(--text);font:600 .76rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}

/* Thema-keuze */
.theme-swatch{width:40px;height:30px;border-radius:7px;border:1px solid var(--line-strong);flex:0 0 40px}
.theme-swatch.is-light{background:linear-gradient(135deg,#f5f7f5 50%,#fff 50%)}
.theme-swatch.is-dark{background:linear-gradient(135deg,#0f1714 50%,#1a2621 50%)}
.theme-swatch.is-system{background:linear-gradient(135deg,#f5f7f5 50%,#0f1714 50%)}

@media(max-width:1020px){.manager-today{grid-template-columns:1fr}}
@media(max-width:700px){
  .manager-shift-list li{grid-template-columns:12px minmax(0,1fr) auto}
  .manager-shift-state{display:none}
  .list-count{margin-left:0}
  .import-intro{flex-direction:column;align-items:flex-start}
}

/* ========================================================================== */
/* Donkere modus                                                              */
/* ========================================================================== */
html[data-theme="dark"]{
  --bg:#0e1512;
  --surface:#151f1b;
  --surface-2:#1a2621;
  --text:#e3ebe6;
  --muted:#93a29a;
  --line:#24312b;
  --line-strong:#31413a;
  --soft:#3d5a4b;
  --soft-2:#22332c;
  --soft-3:#1b2823;
  --brand-white:#0e1512;
  --primary:color-mix(in srgb,var(--brand,#264238) 30%,#cfe6d6) !important;
  --hc-shell-dark:#0a110e;
  --shadow:0 12px 32px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --success:#6cc495;
  --danger:#ef8a7f;
  --warning:#e2b45e;
  color-scheme:dark;
}
html[data-theme="dark"] body,html[data-theme="dark"] .shell,html[data-theme="dark"] .main{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .sidebar{background:var(--hc-shell-dark)}
html[data-theme="dark"] .sidebar-logo-panel{background:#f2f5f3}
html[data-theme="dark"] .topbar{background:rgba(14,21,18,.88);border-bottom-color:var(--line)}
html[data-theme="dark"] .topbar-title{color:var(--text)}
html[data-theme="dark"] :is(.card,.modal,.modal-head,.feed-item,.table-wrap,.table,.settings-tile,.settings-list-row,.oh-list,.balance-metric,.language-option,.manager-pending-row,.check-card,.invite-option,.std-days,.account-trigger,.account-dropdown,.schedule-grid,.schedule-employee,.employee-cell,.schedule-cell,.agenda-inline,.shift-card,.dashboard-shift-row,.login-card,.empty){background-color:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] :is(.modal-foot,.table th,.oh-head,.schedule-head,.schedule-head.employee-cell,.agenda-layer-name,.agenda-layer-cell,.std-day-min input,.segmented,.day-closed,.oh-row.is-closed){background-color:var(--surface-2);color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] .table td{border-color:var(--line)}
html[data-theme="dark"] .table tbody tr:hover,html[data-theme="dark"] .settings-list-row:hover{background:var(--soft-3)}
html[data-theme="dark"] :is(.field input,.field select,.field textarea,.oh-time,.std-day-min input,.list-search input,.list-toolbar select,input[type="date"],input[type="time"],input[type="number"],input[type="text"],input[type="email"],input[type="search"],select,textarea){background-color:var(--surface-2);color:var(--text);border-color:var(--line-strong)}
html[data-theme="dark"] .field label,html[data-theme="dark"] .check-row{color:#c3cfc8}
html[data-theme="dark"] :is(h1,h2,h3,.card h2,.card h3,.feed-item h3,.modal-head h2,.page-header h1){color:var(--text)}
html[data-theme="dark"] :is(.stat-value,.balance-hero-value,.balance-metric-value,.clock-time){color:var(--primary)}
html[data-theme="dark"] .btn{background:var(--soft-3);color:var(--text);border-color:var(--line-strong)}
html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
html[data-theme="dark"] .btn.ghost:hover{background:var(--soft-3)}
html[data-theme="dark"] .btn.primary{background:var(--primary);color:#0e1512;border-color:var(--primary)}
html[data-theme="dark"] .btn.accent{background:var(--soft);color:var(--text);border-color:var(--soft)}
html[data-theme="dark"] .btn.danger{background:rgba(239,138,127,.12);color:var(--danger);border-color:rgba(239,138,127,.3)}
html[data-theme="dark"] .hero{background:linear-gradient(120deg,#1b2b24,#151f1b);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .hero p{color:var(--muted)}
html[data-theme="dark"] .hero .btn.ghost{background:transparent;border-color:var(--line-strong)}
html[data-theme="dark"] .pill{background:var(--soft-3);color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] .pill.green{background:rgba(108,196,149,.12);color:#8fd7ad;border-color:rgba(108,196,149,.25)}
html[data-theme="dark"] .pill.orange{background:rgba(226,180,94,.12);color:#e9c37a;border-color:rgba(226,180,94,.25)}
html[data-theme="dark"] .pill.red{background:rgba(239,138,127,.12);color:#f09a90;border-color:rgba(239,138,127,.25)}
html[data-theme="dark"] .info-box{background:rgba(108,196,149,.08);color:#b9d9c5;border-color:rgba(108,196,149,.2)}
html[data-theme="dark"] .error-box{background:rgba(239,138,127,.1);color:#f3a79e;border-color:rgba(239,138,127,.25)}
html[data-theme="dark"] .success-box{background:rgba(108,196,149,.1);color:#9ed9b8;border-color:rgba(108,196,149,.25)}
html[data-theme="dark"] .invite-banner{background:rgba(108,196,149,.08);border-color:rgba(108,196,149,.2)}
html[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#18231f,#1f2d27,#18231f);background-size:200% 100%}
html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.55)}
html[data-theme="dark"] .toast{background:#24352d;color:var(--text)}
html[data-theme="dark"] .toast.error{background:#5b2a25}
html[data-theme="dark"] code{background:var(--soft-3);color:var(--primary)}
html[data-theme="dark"] .account-dropdown button{color:var(--text)}
html[data-theme="dark"] .account-dropdown button:hover{background:var(--soft-3);color:var(--text)}
html[data-theme="dark"] .dashboard-shift-row{background:linear-gradient(90deg,color-mix(in srgb,var(--shift-color,var(--primary)) 14%,var(--surface)),var(--surface) 60%)}
html[data-theme="dark"] .shift-card{background:var(--surface)}
html[data-theme="dark"] .schedule-cell.schedule-today{background:linear-gradient(0deg,rgba(108,196,149,.06),rgba(108,196,149,.06)),var(--surface)}
html[data-theme="dark"] .login-shell,html[data-theme="dark"] .login-panel,html[data-theme="dark"] .boot-screen{background:var(--bg)}
html[data-theme="dark"] .login-card{background:var(--surface)}
html[data-theme="dark"] :is([class*="filter-card"],.hours-commandbar,[class*="-card"]:not(.check-card):not(.balance-hero):not(.dashboard-next-card)){background-color:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .segmented button.active{background:var(--surface);color:var(--text);box-shadow:none}
html[data-theme="dark"] .segmented button{color:var(--muted)}
html[data-theme="dark"] :is(.hours-card-count,.hours-approval-result-count,.leave-result-count,.leave-manage-count,.shift-trades-count,.trade-manage-total){background:var(--soft-3);color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] :is(.feed-item p,.dashboard-shift-main p,.settings-list-time,.settings-list-meta,.settings-list-days,.balance-ledger-hours,.balance-year-head span,.balance-legend,.oh-day,.schedule-employee-function,.shift-card-label,.agenda-inline){color:var(--muted)}
html[data-theme="dark"] :is(.schedule-topbar-title,.shift-trades-empty strong,.settings-list-main strong,.settings-tile-text strong,.language-text strong,.balance-year-head strong,.balance-ledger-main strong,.schedule-employee-name,.shift-card-top strong,.schedule-date){color:var(--text)}
html[data-theme="dark"] .shift-trades-empty-icon{background:var(--soft-3);color:var(--primary)}
html[data-theme="dark"] .card .feed-item{background:var(--surface-2)}
html[data-theme="dark"] :is(.shift-trades-offer-empty strong,[class*="-empty"] strong){color:var(--text)}
html[data-theme="dark"] :is(.shift-trades-offer-empty span,[class*="-empty"] span:not([class*="icon"])){color:var(--muted)}
html[data-theme="dark"] .dashboard-eyebrow{color:var(--muted)!important}

/* Systeemstatus */
.status-summary{display:grid;gap:2px;padding:12px 14px;margin:0 0 12px;border-radius:10px;border:1px solid}
.status-summary.is-ok{background:color-mix(in srgb,var(--success) 9%,transparent);border-color:color-mix(in srgb,var(--success) 25%,transparent);color:var(--success)}
.status-summary.is-warn{background:color-mix(in srgb,var(--warning) 10%,transparent);border-color:color-mix(in srgb,var(--warning) 30%,transparent);color:var(--warning)}
.status-summary span{font-size:.8rem;color:var(--muted)}
.status-list{list-style:none;margin:0;padding:0;display:grid}
.status-list li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid var(--line)}
.status-list li:first-child{border-top:0}
.status-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.8rem;font-weight:900;flex:0 0 26px}
.is-ok>.status-icon{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.is-warn>.status-icon{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}
.status-main{display:grid;gap:1px}
.status-main strong{font-size:.9rem;color:var(--text)}
.status-main span{font-size:.78rem;color:var(--muted)}
.schedule-commandbar .btn svg{width:16px;height:16px;flex:0 0 16px}
@media(max-width:700px){
  .content .grid.cols-4{grid-template-columns:1fr 1fr;gap:10px}
  .content .grid.cols-4 .stat{padding:12px 14px}
  .content .grid.cols-4 .stat-value{font-size:1.3rem}
  .schedule-summary-stats{gap:14px}
}

/* Home: twee kolommen zonder lege ruimte */
.dashboard-app-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:16px;margin:16px 0;align-items:start}
.dashboard-col{display:grid;gap:16px;align-content:start;min-width:0}
.dashboard-app-layout .card{grid-column:auto!important;grid-row:auto!important}
.dashboard-none{margin:0;font-size:.86rem}
.dashboard-news-card .feed-item{padding:12px 14px}
@media(max-width:1020px){
  .dashboard-app-layout{grid-template-columns:1fr}
  .dashboard-col{display:contents}
  .dashboard-next-card{order:1}.dashboard-clock-card{order:2}.dashboard-upcoming-card{order:3}.dashboard-news-card{order:4}
}

/* Standaardrooster */
.std-grid{margin-top:0}
.std-table{grid-template-columns:220px repeat(7,minmax(128px,1fr));min-width:1120px}
.std-table .schedule-head{min-height:58px;padding:10px}
.std-table .schedule-head small{display:block;margin-top:2px;font-size:.68rem}
.std-cell{display:grid;gap:4px}
.std-chip{margin:0}
.std-day-picks{display:flex;gap:6px;flex-wrap:wrap}
.std-day-pick{position:relative;cursor:pointer}
.std-day-pick input{position:absolute;opacity:0;pointer-events:none}
.std-day-pick span{display:inline-grid;place-items:center;min-width:42px;height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;font-size:.84rem;font-weight:750;color:var(--muted);background:var(--surface,#fff)}
.std-day-pick input:checked+span{background:var(--primary);border-color:var(--primary);color:var(--brand-white)}
.std-day-pick input:focus-visible+span{box-shadow:var(--ring)}
html[data-theme="dark"] .std-day-pick input:checked+span{color:#0e1512}

/* Roosterweergaven */
.schedule-group-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--soft-3);border-bottom:1px solid var(--line);font-size:.74rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:sticky;left:0}
.schedule-group-row small{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:var(--surface,#fff);color:var(--muted);font-size:.66rem;letter-spacing:0}
.schedule-group-row.is-empty{text-transform:none;letter-spacing:0;font-weight:650;justify-content:center;padding:22px}
.schedule-bucket-label .schedule-employee-name{font-size:.9rem}
.shift-card-person .shift-card-top strong{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shift-card-person.is-open-shift{border-style:dashed}
.shift-card-person.is-open-shift .shift-card-top strong{color:var(--muted)}
.schedule-layout-select select{min-width:190px}
.layout-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.layout-choice{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.layout-choice:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.layout-choice.is-active{border-color:var(--primary);box-shadow:var(--ring)}
.layout-choice:disabled{opacity:.45;cursor:not-allowed}
.layout-choice-text{display:grid;gap:2px;min-width:0}
.layout-choice-text strong{font-size:.88rem;color:var(--text)}
.layout-choice-text span{font-size:.75rem;line-height:1.4;color:var(--muted)}
.layout-preview{flex:0 0 46px;height:38px;display:grid;grid-template-columns:12px 1fr;grid-template-rows:repeat(3,1fr);gap:2px;padding:3px;border-radius:7px;background:var(--soft-3)}
.layout-preview i{display:block;border-radius:2px;background:color-mix(in srgb,var(--primary) 22%,transparent)}
.layout-preview i:nth-child(1){grid-row:1/-1;background:color-mix(in srgb,var(--primary) 45%,transparent)}
.layout-preview.is-grouped i:nth-child(2){background:color-mix(in srgb,var(--primary) 55%,transparent)}
.layout-preview.is-functions i:nth-child(1),.layout-preview.is-dayparts i:nth-child(1){background:var(--primary)}
.layout-preview.is-locations i:nth-child(1){background:#c58b3b}
.layout-preview.is-dayparts i:nth-child(2){background:#f0c36d}.layout-preview.is-dayparts i:nth-child(3){background:#e59a5b}.layout-preview.is-dayparts i:nth-child(4){background:#6b7fb8}
html[data-theme="dark"] .schedule-group-row{background:var(--surface-2);color:var(--muted)}
html[data-theme="dark"] .layout-choice{background:var(--surface)}
@media(max-width:700px){.schedule-layout-select{width:100%}.schedule-layout-select select{min-width:0;width:100%}}
html[data-theme="dark"] :is(.schedule-location-select,.schedule-day-select){background:var(--surface);border-color:var(--line-strong);color:var(--muted)}
html[data-theme="dark"] :is(.schedule-location-select select,.schedule-day-select input){background:transparent;color:var(--text)}

/* Medewerkers: tabbladen, locatiekeuze en CAO-kaart (2026-10) */
.employees-tabs{margin:0 0 16px}
.multi-select{position:relative}
.multi-select>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:13px;padding:12px 13px;min-height:46px}
.multi-select>summary::-webkit-details-marker{display:none}
.multi-select>summary .muted{color:var(--muted)}
.multi-select[open]>summary{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--soft) 42%,transparent)}
.multi-select-caret{font-size:.8rem;color:var(--muted);transition:transform .16s}
.multi-select[open] .multi-select-caret{transform:rotate(180deg)}
.multi-select-menu{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 32px rgba(20,40,30,.14);padding:8px;max-height:260px;overflow:auto;display:grid;gap:2px}
.multi-select-menu .check-row{padding:8px 10px;border-radius:9px}
.multi-select-menu .check-row:hover{background:var(--soft-3)}
.multi-select-flex{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:10px!important;border-radius:9px 9px 0 0!important}
.cao-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.cao-card-main{display:flex;align-items:center;gap:14px;min-width:0}
.cao-card-main strong{display:block;font-size:1.02rem}
.cao-card-main span{color:var(--muted);font-size:.9rem}
.cao-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cao-rules dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.92rem}
.cao-rules dt{color:var(--muted)}
.cao-rules dd{margin:0;font-weight:650;text-align:right}
.cao-rules h3{margin:0 0 10px;font-size:.98rem}

/* CAO-roosterwaarschuwingen */
.schedule-status-icon.is-cao{background:#fdecea;color:#b42318}
.employee-warning.is-cao{background:#fdecea;color:#b42318;margin-left:4px}
.cao-warnings{margin:0 0 14px;border:1px solid #f3c7c1;background:#fff7f6;border-radius:14px;overflow:hidden}
.cao-warnings>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;color:#7a271a}
.cao-warnings>summary::-webkit-details-marker{display:none}
.cao-warnings>summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.cao-warnings>summary span{color:#9a4b3f;font-size:.88rem}
.cao-warnings>summary::after{content:'▾';margin-left:auto;transition:transform .16s}
.cao-warnings[open]>summary::after{transform:rotate(180deg)}
.cao-warnings .cao-warnings-list{padding:0 16px 14px}
.cao-warnings-list{display:grid;gap:10px}
.cao-warnings-item strong{display:block;margin-bottom:4px}
.cao-warnings-item ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:.92rem}
html[data-theme="dark"] .cao-warnings{background:#2a1a17;border-color:#5a2c25}
html[data-theme="dark"] .cao-warnings>summary,html[data-theme="dark"] .cao-warnings>summary span{color:#f4b8ae}
html[data-theme="dark"] :is(.schedule-status-icon.is-cao,.employee-warning.is-cao){background:#4a201b;color:#f4b8ae}
.shift-card-cao{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 6px;border-radius:6px;background:#fdecea;color:#b42318;font-size:.72rem;font-weight:700;width:max-content;max-width:100%}
.shift-card-cao svg{width:12px;height:12px;flex:none}
html[data-theme="dark"] .shift-card-cao{background:#4a201b;color:#f4b8ae}

/* ========================================================================== */
/* Chat (1.4.0)                                                               */
/* ========================================================================== */
.content.is-chat{max-width:none;padding:20px 24px}
.chat-app{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - 64px - 40px);min-height:460px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.chat-sidebar{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:#fbfcfb}
.chat-sidebar-head{padding:14px;display:grid;gap:10px;border-bottom:1px solid var(--line)}
.chat-sidebar-actions{display:flex;gap:8px;flex-wrap:wrap}
.chat-sidebar-actions .btn{flex:1}
.chat-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:#fff;border-radius:11px;padding:0 11px;color:var(--muted)}
.chat-search svg{width:17px;height:17px;flex:0 0 auto}
.chat-search input{border:0;outline:0;background:transparent;padding:9px 0;width:100%;color:var(--text);font-size:.9rem}
.chat-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--soft) 40%,transparent)}
.chat-search.in-modal{margin-bottom:12px}
.chat-list{flex:1;overflow-y:auto;padding:6px}
.chat-list-skeleton{display:grid;gap:8px;padding:6px}
.chat-list-skeleton .skeleton{height:58px}
.chat-list-item{display:flex;gap:11px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:10px;border-radius:12px;color:inherit;transition:background .12s}
.chat-list-item:hover{background:var(--soft-3)}
.chat-list-item.active{background:color-mix(in srgb,var(--soft) 38%,#fff)}
.chat-list-text{flex:1;min-width:0;display:grid;gap:2px}
.chat-list-top,.chat-list-bottom{display:flex;align-items:center;gap:6px;min-width:0}
.chat-list-top strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem;color:var(--text)}
.chat-list-top time{font-size:.72rem;color:var(--muted);flex:0 0 auto}
.chat-list-preview{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.83rem;color:var(--muted)}
.chat-list-item.has-unread .chat-list-preview{color:var(--text);font-weight:650}
.chat-list-item.has-unread time{color:var(--primary);font-weight:750}
.chat-list-flag,.chat-list-muted{display:inline-grid;color:var(--muted)}
.chat-list-flag svg,.chat-list-muted svg{width:15px;height:15px}
.chat-list-empty{display:grid;justify-items:center;gap:4px;text-align:center;color:var(--muted);padding:34px 16px;font-size:.88rem}
.chat-list-empty svg{width:30px;height:30px;color:var(--soft);margin-bottom:6px}
.chat-list-empty strong{color:var(--primary)}

.chat-avatar{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--brand-white,#fff);font-weight:800;font-size:.8rem;letter-spacing:.02em}
.chat-avatar.is-group{background:var(--soft-2);color:var(--primary)}
.chat-avatar.is-group svg{width:21px;height:21px}
.chat-avatar.sm{width:30px;height:30px;font-size:.68rem}
.chat-avatar-spacer{width:30px;flex:0 0 auto}

.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.chat-placeholder{margin:auto;max-width:420px;text-align:center;padding:32px 24px;color:var(--muted)}
.chat-placeholder h2{color:var(--primary);margin:14px 0 6px}
.chat-placeholder-icon{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--soft-3);color:var(--primary)}
.chat-placeholder-icon svg{width:30px;height:30px}
.chat-privacy-note{display:flex;gap:9px;align-items:flex-start;text-align:left;background:var(--soft-3);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:.83rem;margin-top:18px}
.chat-privacy-note svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--primary)}
.chat-loading{display:grid;place-items:center;padding:40px;flex:1}

.chat-head{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface,#fff)}
.chat-head .chat-back{display:none}
.chat-head-text{flex:1;min-width:0;display:grid;text-align:left;border:0;background:transparent;padding:0;color:inherit}
.chat-head-text[data-chat-info]{cursor:pointer}
.chat-head-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.chat-head-text>span{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-actions{display:flex;gap:6px}
.icon-btn svg{width:18px;height:18px}
.icon-btn.is-on{background:var(--soft-3);color:var(--warning)}

.chat-scroll{flex:1;overflow-y:auto;padding:16px 20px 8px}
.chat-older-wrap{display:flex;justify-content:center;margin-bottom:8px}
.chat-messages{display:flex;flex-direction:column;gap:3px}
.chat-thread-empty{margin:40px auto;color:var(--muted);font-size:.9rem}
.chat-day{display:flex;justify-content:center;margin:14px 0 8px}
.chat-day span{font-size:.72rem;font-weight:750;color:var(--muted);background:var(--surface,#fff);border:1px solid var(--line);padding:3px 10px;border-radius:999px;text-transform:capitalize}
.chat-system{align-self:center;text-align:center;max-width:80%;font-size:.78rem;color:var(--muted);margin:6px 0}
.chat-msg{display:flex;align-items:flex-end;gap:8px;max-width:min(78%,640px);position:relative}
.chat-msg:not(.continued){margin-top:8px}
.chat-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.chat-msg.theirs{align-self:flex-start}
.chat-bubble-wrap{min-width:0;display:grid;gap:2px}
.chat-msg.mine .chat-bubble-wrap{justify-items:end}
.chat-sender{font-size:.74rem;font-weight:750;color:var(--primary);padding-left:4px}
.chat-bubble{padding:8px 12px 6px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--line);color:var(--text);line-height:1.42;font-size:.92rem;overflow-wrap:anywhere}
.chat-msg.theirs .chat-bubble{border-bottom-left-radius:6px}
.chat-msg.theirs.continued .chat-bubble{border-top-left-radius:6px}
.chat-msg.mine .chat-bubble{background:var(--primary);border-color:var(--primary);color:#fff;border-bottom-right-radius:6px}
.chat-msg.mine.continued .chat-bubble{border-top-right-radius:6px}
.chat-text{white-space:pre-wrap}
.chat-meta{display:inline-block;margin-left:8px;font-size:.66rem;opacity:.65;vertical-align:-2px;white-space:nowrap}
.chat-msg.deleted .chat-bubble{background:transparent;color:var(--muted);border-style:dashed}
.chat-msg.mine.deleted .chat-bubble{color:var(--muted);border-color:var(--line-strong)}
.chat-msg.is-sending .chat-bubble{opacity:.65}
.chat-msg.is-failed .chat-bubble{background:#fbefed;border-color:#efd8d3;color:var(--danger)}
.chat-status{font-size:.7rem;color:var(--muted);padding:0 4px}
.chat-status.is-error{color:var(--danger)}
.link-btn{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.chat-msg-action{opacity:0;border:0;background:transparent;color:var(--muted);padding:4px;border-radius:8px;align-self:center;transition:opacity .12s}
.chat-msg-action svg{width:15px;height:15px}
.chat-msg:hover .chat-msg-action,.chat-msg-action:focus-visible{opacity:1}
.chat-msg-action:hover{color:var(--danger);background:#fbefed}

.chat-composer{display:flex;align-items:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface,#fff)}
.chat-composer textarea{flex:1;resize:none;border:1px solid var(--line-strong);border-radius:14px;padding:10px 13px;max-height:160px;min-height:42px;line-height:1.4;font-size:.92rem;outline:0;background:#fff;color:var(--text)}
.chat-composer textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--soft) 40%,transparent)}
.chat-send{width:42px;height:42px;border-radius:50%;border:0;background:var(--primary);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:opacity .15s,transform .15s}
.chat-send svg{width:19px;height:19px}
.chat-send:disabled{opacity:.35;cursor:default}
.chat-send:not(:disabled):hover{transform:scale(1.05)}
.chat-readonly{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.86rem;padding:8px}
.chat-readonly svg{width:16px;height:16px}

/* Modals */
.chat-contact-list{display:grid;gap:2px;max-height:min(60vh,460px);overflow-y:auto}
.chat-contact{display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:9px;border-radius:11px;text-align:left;color:inherit}
.chat-contact:hover{background:var(--soft-3)}
.chat-contact span,.chat-member span,.chat-member-pick span{display:grid;min-width:0}
.chat-contact small,.chat-member small,.chat-member-pick small{color:var(--muted);font-size:.78rem}
.chat-section-title{font-size:.78rem!important;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)!important;margin:20px 0 10px}
.chat-group-desc{margin:0 0 12px;color:var(--text)}
.chat-policy-line{display:flex;gap:9px;align-items:flex-start;background:var(--soft-3);border-radius:12px;padding:10px 12px;font-size:.86rem}
.chat-policy-line svg{width:18px;height:18px;flex:0 0 auto;color:var(--primary)}
.chat-member-list{display:grid;gap:4px;max-height:50vh;overflow-y:auto}
.chat-member{display:flex;align-items:center;gap:10px;padding:6px 4px}
.chat-member>span:nth-child(2){flex:1}
.chat-policy-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chat-policy-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:13px;padding:12px;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.chat-policy-option:has(input:checked){border-color:var(--primary);background:var(--soft-3)}
.chat-policy-option input{margin-top:3px;accent-color:var(--primary)}
.chat-policy-option span{display:grid;gap:3px}
.chat-policy-option small{color:var(--muted);font-size:.78rem;line-height:1.35}
.chat-members-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chat-members-head .chat-search{margin:10px 0;min-width:220px}
.chat-member-table{border:1px solid var(--line);border-radius:13px;max-height:min(340px,32vh);overflow-y:auto}
.chat-member-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line)}
.chat-member-row:last-child{border-bottom:0}
.chat-member-row.is-on{background:color-mix(in srgb,var(--soft-3) 70%,transparent)}
.chat-member-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer}
.chat-member-flag{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:650;white-space:nowrap;cursor:pointer}
.chat-member-flag.is-disabled{opacity:.4;cursor:default}
.chat-hint{font-size:.8rem;margin:10px 0 0}
.modal-foot .spacer{flex:1}
.chat-unavailable{max-width:520px;margin:40px auto;text-align:center}
.chat-unavailable svg{width:34px;height:34px;color:var(--soft)}

/* Instellingen > Chat */
.chat-settings{display:grid;gap:16px;max-width:900px}
.chat-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.chat-switch-row span{display:grid;gap:2px}
.chat-switch-row small{color:var(--muted)}
.chat-switch{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s;margin:0}
.chat-switch:before{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.chat-switch:checked{background:var(--primary)}
.chat-switch:checked:before{transform:translateX(19px)}
.chat-role-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.chat-role{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer}
.chat-role:has(input:checked){border-color:color-mix(in srgb,var(--primary) 45%,var(--line));background:var(--soft-3)}
.chat-role.is-locked{cursor:default}
.chat-role input{margin-top:3px;accent-color:var(--primary)}
.chat-role span{display:grid;gap:2px}
.chat-role small{color:var(--muted);font-size:.78rem}
.chat-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-card-head h2{margin:0}
.chat-group-rows{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chat-group-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.chat-group-row:last-child{border-bottom:0}
.chat-group-row-text{flex:1;min-width:0;display:grid}
.chat-group-row-text small{color:var(--muted)}
.chat-privacy-card ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--text)}

@media(max-width:1020px){
  .content.is-chat{padding:12px}
  .chat-app{grid-template-columns:290px minmax(0,1fr);height:calc(100vh - 64px - 24px)}
  .chat-policy-options{grid-template-columns:1fr}
}
@media(max-width:760px){
  .content.is-chat{padding:0}
  .chat-app{grid-template-columns:1fr;border:0;border-radius:0;height:calc(100dvh - 64px)}
  .chat-app.has-active .chat-sidebar{display:none}
  .chat-app:not(.has-active) .chat-main{display:none}
  .chat-sidebar{border-right:0}
  .chat-head .chat-back{display:grid}
  .chat-msg{max-width:88%}
  .chat-msg-action{opacity:1}
  .chat-member-row{flex-wrap:wrap}
  .chat-member-pick{flex-basis:100%}
}

/* Donkere modus */
html[data-theme="dark"] .chat-app,html[data-theme="dark"] .chat-head,html[data-theme="dark"] .chat-composer{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .chat-sidebar{background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] :is(.chat-search,.chat-composer textarea,.chat-policy-option,.chat-day span){background:var(--surface);border-color:var(--line-strong);color:var(--text)}
html[data-theme="dark"] .chat-bubble{background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] .chat-msg.mine .chat-bubble{background:color-mix(in srgb,var(--brand,#264238) 75%,#3d6b58);border-color:transparent;color:#eef5f0}
html[data-theme="dark"] .chat-list-item.active{background:var(--soft-2)}
html[data-theme="dark"] .chat-send{background:var(--brand,#264238);color:#eef5f0}
html[data-theme="dark"] .chat-avatar{background:var(--soft);color:var(--text)}
.chat-search input,.chat-search input:focus,.chat-search input:hover{border:0!important;box-shadow:none!important;background:transparent!important;padding:9px 0!important;border-radius:0!important;outline:0!important}
html[data-theme="dark"] :is(.chat-head .icon-btn,.chat-sidebar-actions .btn.ghost){background:var(--surface-2);border-color:var(--line-strong);color:var(--text)}
html[data-theme="dark"] .chat-head .icon-btn:hover{background:var(--soft-2)}
html[data-theme="dark"] :is(.chat-role,.chat-group-row,.chat-group-rows,.chat-member-table,.chat-member-row){border-color:var(--line)}
html[data-theme="dark"] .chat-privacy-note{background:var(--surface-2);border-color:var(--line)}
.chat-enc{border-left:4px solid var(--success)}
.chat-enc.is-bad{border-left-color:var(--danger)}
.chat-enc-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0 0;font-size:.88rem}
.chat-enc-list dt{color:var(--muted)}
.chat-enc-list dd{margin:0;font-weight:650}
.chat-enc code{font-size:.82rem;background:var(--soft-3);padding:1px 5px;border-radius:5px}
.chat-archive-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:11px 12px;border-radius:12px;color:var(--text);text-align:left;font-size:.88rem}
.chat-archive-row:hover{background:var(--soft-3)}
.chat-archive-row svg{width:18px;height:18px;color:var(--muted)}
.chat-archive-row strong{flex:1}
.chat-archive-row.is-head{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;margin-bottom:4px}
.icon-btn.danger-hover:hover{color:var(--danger);background:#fbefed;border-color:#efd8d3}
.chat-language-grid{margin-top:16px}
.chat-language-grid textarea{min-height:96px}
.chat-language-grid small{font-size:.76rem}

/* Rooster maken: balk boven de flexmedewerkers */
.schedule-group-row.schedule-flex-row{background:#e6f2e8;color:var(--primary);border-top:1px solid #cfe3d3;border-bottom:1px solid #cfe3d3}
.schedule-flex-row small{background:#fff;color:var(--primary)}
.schedule-flex-row em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;font-size:.74rem;color:#5b7a66;margin-left:4px}
html[data-theme="dark"] .schedule-group-row.schedule-flex-row{background:color-mix(in srgb,#6cc495 16%,var(--surface));color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .schedule-flex-row em{color:var(--muted)}

/* Build 3: knoppenkolom in tabellen blijft een echte tabelcel (geen flex op de td) */
.table td.actions{display:table-cell;text-align:right;white-space:nowrap;width:1%}
.table td.actions>*+*{margin-left:6px}
.table td.actions .btn{vertical-align:middle}

/* Build 3: vastgezet kennisbankitem met punaise voor de titel */
.feed-item h3.is-pinned{display:flex;align-items:center;gap:8px}
.pin-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#fbf5e9;color:#b07d1f;flex:0 0 auto;transform:rotate(30deg)}
.pin-icon svg{width:14px;height:14px}
html[data-theme="dark"] .pin-icon{background:color-mix(in srgb,#e2b45e 18%,var(--surface));color:#e2b45e}