/* app/css/theme.css — CAZT OS huisstijl. Kloon van Remy OS theme.css (coach-os/dashboard/css/theme.css),
   met de CAZT-tokens uit BUILD_CAZT_OS.md: donker #161514, klei #E2561F, creme canvas. Typografie blijft Remy
   (Cormorant Garamond + Inter, self-hosted). Wordt als LAATSTE stylesheet geladen. Onderaan: CAZT-correcties
   voor leesbaarheid (klei op donker, wit op klei, nooit kleine klei-tekst op creme). */

/* ---- fonts: self-hosted. De oude namen (Barlow, Instrument Serif, JetBrains Mono) worden aliassen, zodat ook
   inline styles in renderers vanzelf de nieuwe letters krijgen. ---- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:300 700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';src:local('SF Mono'),local('SFMono-Regular'),local('Menlo'),local('Consolas'),local('Liberation Mono')}

:root{
  /* portaal-tokens */
  --g:#161514; --deep:#241D16; --y:#E2561F; --soft:#F6DCCD; --cr:#F4F2EE; --outer:#ECE7DF; --sand:#E6DFD4;
  --paper:#FCFAF6; --tx:#2A2622; --mu:#6B655F; --ln:#E4DDD2; --ok:#10B981; --err:#B4331A;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Inter,'Helvetica Neue',Arial,sans-serif;
  /* bestaande dashboard-variabelen -> portaal-tokens */
  --bg-canvas:var(--cr);
  --bg-sidebar:var(--paper);
  --bg-card:var(--paper);
  --border-soft:var(--ln);
  --shadow-card:0 1px 2px rgba(22,21,20,.04),0 18px 40px -34px rgba(22,21,20,.45);
  --text-primary:var(--g);
  --text-secondary:var(--tx);
  --text-tertiary:var(--mu);
  --accent-primary:var(--g);
  --accent-light:var(--soft);
  --accent-mid:var(--y);
  --accent-yellow:var(--y);
  --status-live:#10B981;
  --status-warn:#B7791F;
  --status-error:#B4331A;
  --status-info:#5B6B73;
  --radius:22px;
  --radius-sm:14px;
  --sidebar-w:272px;
  color-scheme:light;
}

/* ---- basis: geen horizontaal scrollen (ook iOS), leesbare tekst ---- */
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--cr);color:var(--tx);font-family:var(--sans);font-feature-settings:normal;font-variant-numeric:lining-nums}
body{overflow-x:hidden;overflow-x:clip;max-width:100%;font-size:15px;line-height:1.55;overflow-wrap:break-word;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%}
input,textarea,select{font-family:var(--sans)}
:focus-visible{outline:3px solid var(--g);outline-offset:2px;border-radius:8px}
::selection{background:var(--y);color:var(--g)}
.main{min-width:0}
.hl{font-style:italic;background-image:linear-gradient(180deg,transparent 60%,var(--y) 60%);padding:0 .06em}

/* ---- sidebar (desktop): papier, serif-sectiekoppen, actief = cursief + klei ---- */
/* desktop: hele zijbalk in donker (CAZT), de rest crème/papier */
.sidebar{background:#100E0C;border-right:0;padding:22px 14px 16px}
.sidebar .brand{align-items:center;gap:12px;padding:14px 14px;margin:0 0 2px;border:0;border-radius:20px;position:relative;overflow:hidden;flex-shrink:0;min-height:76px;
  background:rgba(244,242,238,.05);box-shadow:none;border-bottom:1px solid rgba(244,242,238,.10)!important;border-radius:0 0 0 0}
.sidebar .brand::after{content:"";position:absolute;right:-50px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(226,86,31,.22),transparent 70%);pointer-events:none}
.sidebar .brand-mark{width:46px!important;height:46px!important;border-radius:50%!important;border:0!important;box-shadow:0 0 0 3px var(--y)}
.sidebar .brand-name{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--y)}
.sidebar .brand-sub{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.05;color:var(--cr);margin-top:3px}
.online-pill{background:rgba(226,86,31,.12);border:0;margin:14px 0 0 8px}
.online-pill .dot{background:var(--y)}
.online-pill .label{color:var(--y)}
.nav-section{margin-top:22px}
.sidebar .nav-label{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;letter-spacing:0;text-transform:none;color:#A39D95;padding:0 12px 6px}
.sidebar .nav-item{color:#DDD8D0;font-size:14.5px;font-weight:500;border-radius:999px;padding:9px 14px;min-height:40px;background:transparent}
.sidebar .nav-item svg{opacity:.6;stroke-width:1.6;color:var(--cr)}
.sidebar .nav-item:hover{background:rgba(244,242,238,.07);color:#fff}
.sidebar .nav-item.active{color:var(--cr);font-family:var(--serif);font-style:italic;font-size:19px;font-weight:600;background:linear-gradient(90deg,rgba(226,86,31,.16),rgba(226,86,31,0))}
.sidebar .nav-item.active::before{left:-2px;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--y)}
.sidebar .nav-item.active svg{opacity:1;color:var(--y)}
.nav-badge{background:var(--y);color:var(--g);font-family:var(--sans)}
.sidebar .sidebar-footer{border-top:1px solid rgba(244,242,238,.10)}
.sidebar .sidebar-footer .nav-item{color:#A39D95}
.sidebar .sidebar-footer .nav-item.active{color:var(--cr)}
.sidebar .avatar{background:var(--y);color:var(--g);border-radius:50%}
.sidebar .avatar-row{border-top-color:rgba(244,242,238,.10)}
.sidebar .avatar-row .who .n{color:var(--cr)}
.sidebar .avatar-row .who .r{color:#A39D95;font-family:var(--sans)}
.menu-close{display:none}

/* ---- kop + kruimelpad ---- */
.topbar{border-bottom:0}
.breadcrumb{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.breadcrumb .sep{color:var(--ln)}
.page-header h1,.h2,.section-title{font-family:var(--serif)}
.page-header h1{font-weight:500;font-size:clamp(34px,4.2vw,50px);line-height:1.05;letter-spacing:-.01em;color:var(--g)}
.page-header .subtitle{font-family:var(--sans);font-size:15.5px;color:var(--mu);font-style:normal}
.section-title{font-weight:600;font-size:23px;letter-spacing:0;text-transform:none;color:var(--g)}
.section-title .count{font-family:var(--sans)}

/* ---- kaarten, KPI's, tabellen ---- */
.card{background:var(--paper);border:1px solid var(--ln);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.card:hover{box-shadow:var(--shadow-card)}
.kpi-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.kpi-value{font-family:var(--serif);font-weight:500;color:var(--g);font-variant-numeric:lining-nums tabular-nums}
.data-table th{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);background:transparent;border-bottom:1px solid var(--ln)}
.data-table td{border-bottom:1px solid var(--ln)}
.data-table tr:hover td{background:var(--cr)}

/* ---- hero: 'Vandaag' op het dashboard, donker zoals de hero in het portaal ---- */
#homeScheduleCard{background:var(--g);border-color:var(--g);color:var(--cr);position:relative;overflow:hidden;
  --text-primary:var(--cr);--text-secondary:#CFC9C1;--text-tertiary:#A39D95;--accent-primary:var(--y)}
#homeScheduleCard::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(226,86,31,.18),transparent 70%);pointer-events:none}
#homeScheduleCard .section-title{color:var(--cr)}
#homeScheduleCard .section-title .count{color:#A39D95}
#homeScheduleCard [style*="border-bottom"]{border-bottom-color:rgba(244,242,238,.12)!important}
.kpi-value{border-left:0}

/* ---- knoppen: pill ---- */
.btn,.btn-primary,.btn-sm,.kb-btn,button.primary{border-radius:999px!important}
.btn-primary{background:var(--g)!important;color:var(--y)!important;border:0;font-weight:600;padding:11px 20px}
.btn-primary:hover{filter:none;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(22,21,20,.6)}
.btn-sm{background:transparent;border:1.5px solid var(--ln);color:var(--g);font-weight:600}
.btn-sm:hover{border-color:var(--g);color:var(--g);background:var(--paper)}

/* ---- pills / badges: rustig, aards ---- */
.pill{border-radius:999px;font-weight:600}
.pill.green{background:#e7f0d6;color:#3f5f16}
.pill.yellow{background:#f6ecd0;color:#7a5b10}
.pill.red{background:#f5e0d8;color:#8a2d1c}
.pill.blue{background:#e2ebe4;color:#2b4a3a}
.pill.violet{background:var(--soft);color:var(--g)}
.pill.gray{background:var(--sand);color:var(--tx)}

/* ---- formulieren ---- */
.field input,.field textarea,.field select,.modal-field input,.modal-field textarea,.modal-field select,input.txt,textarea,select{border-radius:14px;border-color:var(--ln)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--g)!important;box-shadow:0 0 0 4px rgba(226,86,31,.6)}

/* ---- modals + toasts ---- */
.modal{background:var(--paper);border-radius:26px;border:1px solid var(--ln);box-shadow:0 40px 70px -40px rgba(22,21,20,.55)}
.modal h2,.modal h3{font-family:var(--serif);font-weight:500;color:var(--g)}
.modal-overlay{background:rgba(22,21,20,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* ---- mobiel: menuknop + schermvullend menu (variant C, zoals het portaal) ---- */
@media (max-width:1080px){
  .mobile-toggle{top:calc(12px + env(safe-area-inset-top,0px));left:12px;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--ln);box-shadow:none}
  .mobile-toggle svg{color:var(--g)}
  .sidebar-overlay,.sidebar-overlay.show{display:none!important}
  .sidebar{position:fixed;inset:0;left:0!important;width:100%;height:100%;height:100dvh;z-index:120;padding:calc(12px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));
    background:radial-gradient(90% 50% at 100% 0%,rgba(226,86,31,.28),transparent 60%),linear-gradient(180deg,var(--outer),var(--cr) 70%);
    border:0;box-shadow:none;visibility:hidden;opacity:0;transform:translateY(18px);
    transition:opacity .26s ease,transform .32s cubic-bezier(.22,.8,.26,1),visibility .32s;overscroll-behavior:contain}
  .sidebar.open{visibility:visible;opacity:1;transform:none}
  body:has(.sidebar.open){overflow:hidden}
  .sidebar .brand{margin:0 -8px 6px;padding:12px 12px 12px 14px;background:var(--g);border-radius:20px;border-bottom:0!important;box-shadow:0 18px 36px -28px rgba(22,21,20,.8)}
  .sidebar .nav-item.active{color:var(--g)}
  .sidebar .nav-badge{background:var(--g);color:var(--y)}
  .sidebar .sidebar-footer{border-top:1px solid var(--ln)}
  .sidebar .avatar-row{border-top-color:var(--ln)}
  .sidebar .avatar-row .who .n{color:var(--g)}
  .sidebar .avatar-row .who .r{color:var(--mu)}
  .sidebar .avatar{background:var(--g);color:var(--y)}
  .menu-close{display:flex;margin-left:auto;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;background:var(--y);color:var(--g);border:0;flex-shrink:0;cursor:pointer;position:relative;z-index:1}
  .menu-close svg{width:20px;height:20px}
  .online-pill{display:none}
  .nav-section{margin-top:8px;padding:14px 0 4px}
  .nav-section+.nav-section{border-top:1px solid var(--ln)}
  .sidebar .nav-label{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);padding:0 0 2px}
  .sidebar .nav-item{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(28px,8vw,34px);line-height:1.1;min-height:56px;padding:4px 0;border-radius:0;color:var(--g);background:none!important}
  .sidebar .nav-item svg{display:none}
  .sidebar .nav-item:hover{background:none}
  .sidebar .nav-item.active{font-size:clamp(28px,8vw,34px);font-weight:500}
  .sidebar .nav-item.active::before{display:none}
  .nav-badge{margin-left:10px;font-size:12px;min-width:22px;height:22px}
  .sidebar-footer{margin-top:14px;padding:16px 0 0}
  .sidebar .sidebar-footer .nav-item{font-size:clamp(24px,6.6vw,28px);color:var(--g)}
  .breadcrumb{padding-left:60px;min-height:46px}
}
@media (max-width:1080px){
  /* actief menu-item: cursief met klei-markering onder de tekst (zoals portaal) */
  .sidebar .nav-item.active{font-style:italic;background:none!important;background-image:linear-gradient(180deg,transparent 56%,var(--y) 56%,var(--y) 78%,transparent 78%)!important;background-repeat:no-repeat;width:fit-content;padding-right:.1em}
  body:has(.sidebar.open) .ra-fab,body:has(.sidebar.open) .ra-panel{display:none!important}
}
@media (max-width:640px){
  .page-header h1{font-size:clamp(32px,9vw,40px)}
  .card{border-radius:20px}
  /* niets mag uit beeld vallen op 320-430 px, ook niet met grotere tekst: kop-rijen breken af */
  .page-header{flex-wrap:wrap;gap:12px}
  .page-header>*{min-width:0;max-width:100%}
  .page-header .right{text-align:left;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .section-head{flex-wrap:wrap;gap:8px}
  .breadcrumb{flex-wrap:wrap;white-space:normal;overflow-wrap:anywhere;letter-spacing:.12em}
  .modal-field{min-width:0;max-width:100%}
  .main .modal-field[style*="min-width:220px"]{min-width:0!important;flex-basis:100%!important}
  .main [style*="grid-template-columns:150px 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  .modal-field select,.modal-field input,.modal-field textarea{max-width:100%}
  .main button,.main .btn-primary,.main .btn-sm{max-width:100%;white-space:normal}
  /* brede tabellen scrollen binnen hun eigen vak, nooit de pagina */
  .data-table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .bar-chart{max-width:100%;overflow:hidden}
  .bar-col{min-width:0}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ===================== CAZT-correcties ===================== */
:root{--ok:#10B981;--err:#B4331A;--status-live:#10B981;--status-error:#B4331A;--status-warn:#B7791F;--status-info:#5B6B73;--klei:#E2561F;
  /* merk v2 (T12 tokens.css): --mu haalt nu AA, klei als kleine tekst = --y-ink, status als tekst = *-ink */
  --mu:#6B655F;--mu-soft:#8C8884;--y-ink:#A93F18;--y-hover:#EF6B34;--plate:#E5DBC9;--on-dark:#F4F2EE;--on-dark-mu:#B9B2A8;
  --ok-ink:#0E7A55;--ok-bg:#E2F1E8;--warn:#B7791F;--warn-ink:#8A5A12;--warn-bg:#F6ECD0;--err-bg:#F5E0D8;--info:#5B6B73;--info-bg:#E4E9EA;--on-accent:#161514}
::selection{background:var(--y);color:var(--on-accent)}
.hl{background-image:linear-gradient(180deg,transparent 60%,var(--soft) 60%)}
.sidebar .brand-mark{width:46px!important;height:46px!important;border-radius:13px!important;background:#1d1a17!important;box-shadow:inset 0 0 0 1px rgba(244,242,238,.10)!important;display:grid;place-items:center;padding:7px}
.sidebar .brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar .brand-name{color:var(--y)}
.nav-badge,.sidebar .avatar{background:var(--y);color:var(--on-accent)}
.btn-primary{background:var(--g)!important;color:var(--cr)!important}
.btn-primary:hover{box-shadow:0 10px 26px -10px rgba(226,86,31,.65)}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(226,86,31,.18)}
#homeScheduleCard,.hero-dark{--accent-primary:var(--y)}
@media (max-width:1080px){
  .sidebar{background:radial-gradient(90% 50% at 100% 0%,rgba(226,86,31,.12),transparent 60%),linear-gradient(180deg,var(--outer),var(--cr) 70%)}
  .sidebar .brand-name{color:var(--y)}
  .sidebar .brand-sub{color:var(--cr)}
  .sidebar .nav-badge{background:var(--g);color:var(--cr)}
  .sidebar .avatar{background:var(--g);color:var(--cr)}
  .menu-close{background:var(--y);color:var(--on-accent)}
  .sidebar .nav-item.active{background-image:linear-gradient(180deg,transparent 56%,var(--soft) 56%,var(--soft) 82%,transparent 82%)!important}
}