/* app/css/bontu.css: Bontu-laag bovenop hq.css (eigenaar o1). Alleen merkdetails; tokens staan in hq.css. */

/* koppen in Work Sans */
.ui-head h1,.page-header h1,.os-gate-title,.ui-empty h3,.section-title{font-family:var(--font-display);letter-spacing:-.01em}

/* lockup: licht/donker wisselen (zijbalk, login, lege staat) */
.lk-d{display:none}
html[data-theme="dark"] .lk-l{display:none}
html[data-theme="dark"] .lk-d{display:block}
html.ws-lockup .sidebar .brand-mark img{height:24px;width:auto}
.os-gate-lockup img{height:34px;width:auto}
.os-empty-mark img{width:56px;height:auto}

/* login-gate in beide thema's */
.os-gate{background:var(--bg-canvas)}
.os-gate-card{background:var(--bg-panel);border-color:var(--border-soft)}
.os-gate input{background:var(--bg-panel);color:var(--text-primary);border-color:var(--border-input)}
.os-gate button{background:var(--accent);color:var(--accent-ink)}
.os-gate button:hover{background:var(--accent-hover);box-shadow:none}

/* actieve navigatie: mint als zachte achtergrond, navy tekst */
html .sidebar .nav-item.active,html .sidebar .sidebar-footer .nav-item.active{background:var(--accent-wash)!important;color:var(--text-primary)}
html .sidebar .nav-item.active svg{color:var(--accent-text)}

/* staging-label op de preview-URL */
.os-staging-pill{position:fixed;top:10px;right:12px;z-index:100001;background:var(--mint);color:#0F1B3D;font:600 11.5px/1.3 var(--font-ui);
  padding:4px 10px;border-radius:999px;pointer-events:none;letter-spacing:.02em}

/* formulieren onder Taken en Agenda: op smal scherm onder elkaar */
.task-add,.agenda-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.task-add input[type=text],.agenda-add input[name=title]{flex:1 1 220px;min-width:0}
.task-add select,.task-add input[type=date],.agenda-add select,.agenda-add input[type=date],.agenda-add input[type=time],.agenda-add input[name=location]{flex:0 1 auto;min-width:0}
@media (max-width:640px){
  .task-add>*,.agenda-add>*{flex:1 1 100%!important;width:100%}
  .os-staging-pill{top:auto;bottom:10px;right:10px}
}

/* agenda-kleuren per soort */
.cal-afspraak{--k:var(--navy2)}
.cal-proefrit{--k:#2E8A6B}
.cal-levering{--k:var(--sky)}
.cal-overig{--k:var(--status-idle)}
.cal-task{--k:var(--status-warn)}
.cal-late{--k:var(--status-error)}
html[data-theme="dark"] .cal-afspraak{--k:#7FA6E0}
html[data-theme="dark"] .cal-proefrit{--k:var(--mint)}
.cal-it .os-x{flex:none}

/* Te beoordelen */
.inbox-item{align-items:center}
.inbox-acts{display:flex;gap:8px;flex:none}
.inbox-link{color:inherit;text-decoration:none;display:block}
.inbox-item.is-done{opacity:.45}
@media (max-width:640px){.inbox-item{flex-wrap:wrap}.inbox-acts{width:100%;justify-content:flex-end}}
.os-dot.off{background:var(--status-idle)}

/* Inter maakt met tabular-nums ook het streepje breed ("ad - account"): alleen cijfers in cijfervelden tabulair */
html,body{font-variant-numeric:normal}
.ui-stat-v,.ui-table td.num,.ui-tab-n,.nav-badge,.kpi-value,.cal-time,.mono,.ui-fresh{font-variant-numeric:tabular-nums}
.task-add select,.agenda-add select{border-radius:var(--radius-control)}

.card p.os-note{padding:8px 10px}
.main .avatar{background:var(--accent);background-image:none;color:var(--accent-ink);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}