/* ===========================================================================
   STUDIO SMAAKT CRM — v15.20.0
   DE NIEUWE HUID: "zacht & kleurrijk", stijl A uit het ontwerpvoorstel.

   Wat dit bestand doet
   Het legt één vormtaal over het hele CRM: een rustig vlak waarop witte
   kaarten met ronde hoeken liggen, één zachte schaduw, kleur als vulling in
   plaats van als randje, en pillen voor alles wat een stand aangeeft.

   Wat dit bestand NIET doet
   Het verandert geen enkele functie en geen enkele pagina-indeling. Alles
   staat waar het stond; het ziet er alleen anders uit. De herindeling (menu
   van vijftien naar acht, tabbladen op de projectpagina, een kolom rechts)
   komt in een volgende versie, zodat je eerst rustig naar de vormgeving kunt
   kijken zonder dat je ook nog moet zoeken waar iets heen is.

   Terugdraaien
   Haal de regel die dit bestand inlaadt uit index.php, of vervang het bestand
   door een leeg bestand. Dan staat alles er weer bij zoals het was. Er zit
   geen vormgeving van 15.20.0 in een ander bestand.

   De maten en de trap staan in assets/v1590.css en TYPOGRAFIE.txt; die
   gebruiken we hier gewoon verder.
   ======================================================================== */

:root{
  /* --- het palet --- */
  --ss-bureau:#eeedea;         /* het vlak waarop alles ligt */
  --ss-kaart:#ffffff;          /* kaarten */
  --ss-kaart-2:#f6f5f2;        /* ingelegde vlakken binnen een kaart */
  --ss-inkt:#16181a;
  --ss-zacht:#71767b;
  --ss-lijn:rgba(22,24,26,.08);
  --ss-schaduw:0 1px 2px rgba(22,24,26,.04), 0 10px 30px rgba(22,24,26,.07);
  --ss-schaduw-klein:0 1px 2px rgba(22,24,26,.05);

  /* --- vormen --- */
  --ss-r-groot:24px; --ss-r:20px; --ss-r-klein:14px; --ss-r-veld:12px;

  /* --- hoeveel kleur er in een vlak zit --- */
  --ss-vul:22%;                /* gevulde regel */
  --ss-tint:16%;               /* gekleurd kaartje */
  --ss-menging:#ffffff;
}
:root[data-theme="dark"]{
  --ss-bureau:#0d0e0f;
  --ss-kaart:#191b1d;
  --ss-kaart-2:#202326;
  --ss-inkt:#f2f2ef;
  --ss-zacht:#9aa0a5;
  --ss-lijn:rgba(242,242,239,.10);
  --ss-schaduw:none;
  --ss-schaduw-klein:none;
  --ss-vul:24%; --ss-tint:20%;   /* v15.22.0: iets rustiger in het donker */
  --ss-menging:#191b1d;
}

/* --- 1. het vlak ---------------------------------------------------------- */
body.page-dashboard,body.page-projects,body.page-project,body.page-tasks,
body.page-time,body.page-clients,body.page-client,body.page-finance,
body.page-insights,body.page-planning,body.page-meetings,body.page-subscriptions,
body.page-settings,body.page-integrations,body.page-templates,body.page-system,
body.page-task-new,body.page-task-edit,body.page-project-new,body.page-project-edit,
body.page-client-new,body.page-client-edit,body.page-tijd-bewerken,body.page-meeting,
body.page-profile,body.page-email{
  /* v15.22.0: papierwit, zoals in het ontwerpvoorstel. Het grijs (--ss-bureau)
     is de rand buiten het scherm, niet de ondergrond eronder. */
  background:var(--ss-kaart);
}
.app{background:transparent}
.main{padding-inline:clamp(16px,2.2vw,30px)}

/* --- 2. de zijbalk -------------------------------------------------------- */
.sidebar{
  background:var(--ss-kaart);
  border-right:1px solid var(--ss-lijn);
  box-shadow:none;
}
.sidebar .nav a{
  border-radius:12px;
  padding:10px 11px;
  font-size:var(--tekst-m,14px);
  color:var(--ss-inkt);
}
.sidebar .nav a:hover{background:color-mix(in srgb,var(--ss-inkt) 5%,transparent)}
.sidebar .nav a.active{
  background:var(--ss-inkt);
  color:var(--ss-bureau);
  font-weight:500;
}
.sidebar .nav a.active svg{color:var(--lime)}
.nav-label{
  font-size:var(--tekst-xxs,10.5px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ss-zacht); margin:var(--ruimte-5,22px) 0 var(--ruimte-2,8px); padding-inline:11px;
}
.profile-mini{border-radius:14px;background:color-mix(in srgb,var(--ss-inkt) 5%,transparent)}

/* --- 3. kaarten ----------------------------------------------------------- */
.card,.form-card,.dashboard-card,.tile,.portal-card,.project-create-panel,
.table-wrap,.integration-card{
  background:var(--ss-kaart);
  border:0;
  border-radius:var(--ss-r);
  box-shadow:var(--ss-schaduw-klein);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .table-wrap{border:1px solid var(--ss-lijn)}
.card-head{
  border-bottom:1px solid var(--ss-lijn);
  padding-bottom:var(--ruimte-3,12px);
  margin-bottom:var(--ruimte-3,12px);
}
.card-head b,.card-head > div > b{font-size:var(--tekst-l,16px);letter-spacing:-.01em}
.card-head a{color:var(--ss-zacht);font-size:var(--tekst-s,12.5px);text-decoration:none}
.card-head a:hover{color:var(--ss-inkt)}
.section-title{font-size:var(--tekst-xl,19px);letter-spacing:-.02em;margin-top:var(--ruimte-6,32px)}

/* --- 4. de paginakop ------------------------------------------------------ */
.page-head h1{font-size:var(--tekst-xxl,24px);letter-spacing:-.025em}
.page-head p.muted{color:var(--ss-zacht);max-width:70ch}

/* --- 5. knoppen ----------------------------------------------------------- */
.btn{
  border-radius:999px;
  border:1px solid var(--ss-lijn);
  background:var(--ss-kaart);
  color:var(--ss-inkt);
  padding:10px 18px;
  font:500 var(--tekst-s,12.5px) var(--body-font);
  box-shadow:var(--ss-schaduw-klein);
}
.btn:hover{border-color:color-mix(in srgb,var(--ss-inkt) 30%,transparent)}
.btn.primary{background:var(--lime);border-color:var(--lime);color:#16181a;font-weight:600}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:transparent;border-color:var(--ss-lijn);color:#e2584c}
.btn.danger:hover{border-color:#e2584c}
.btn.mini,.btn.small{padding:7px 14px}
.icon-btn{
  border-radius:12px;
  border:1px solid var(--ss-lijn);
  background:var(--ss-kaart);
  color:var(--ss-inkt);
  box-shadow:var(--ss-schaduw-klein);
}
.icon-btn:hover{border-color:color-mix(in srgb,var(--ss-inkt) 30%,transparent)}

/* --- 6. invulvelden ------------------------------------------------------- */
.field input,.field select,.field textarea,
.form-card input,.form-card select,.form-card textarea,
.settings-form input,.settings-form select,.settings-form textarea,
input[type="search"]{
  border-radius:var(--ss-r-veld);
  border:1px solid var(--ss-lijn);
  background:var(--ss-kaart-2);
  color:var(--ss-inkt);
}
.field input:focus,.field select:focus,.field textarea:focus,
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:2px solid color-mix(in srgb,var(--lime) 70%,var(--ss-inkt));
  outline-offset:1px;
  border-color:transparent;
}
.field label{color:var(--ss-zacht);font-size:var(--tekst-xs,11.5px);letter-spacing:.04em}
.field small{color:var(--ss-zacht)}

/* --- 7. tabellen ---------------------------------------------------------- */
.table-wrap{padding:var(--ruimte-2,8px) var(--ruimte-3,12px)}
.table-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap thead th{
  border-bottom:1px solid var(--ss-lijn);
  color:var(--ss-zacht);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding-block:var(--ruimte-3,12px);
}
.table-wrap tbody td{border-bottom:1px solid var(--ss-lijn)}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover td{background:color-mix(in srgb,var(--ss-inkt) 3%,transparent)}
.table-link{color:var(--ss-inkt);text-decoration:none}
.table-link:hover{text-decoration:underline}

/* --- 8. lijstjes in kaarten ----------------------------------------------- */
.simple-list > div,.simple-list > a{
  border-radius:var(--ss-r-klein);
  padding:11px 12px;
  border-bottom:0;
}
.simple-list > div:hover,.simple-list > a:hover{background:color-mix(in srgb,var(--ss-inkt) 4%,transparent)}
.empty-state{
  border-radius:var(--ss-r-klein);
  background:color-mix(in srgb,var(--ss-inkt) 4%,transparent);
  border:0;
  color:var(--ss-zacht);
  padding:var(--ruimte-4,16px);
}

/* --- 9. voortgangsbalken -------------------------------------------------- */
.progress{border-radius:999px;background:color-mix(in srgb,var(--ss-inkt) 10%,transparent);overflow:hidden;height:6px}
.progress span{border-radius:999px}

/* --- 10. de timerpil en wat er nu loopt ----------------------------------- */
.timer-pil{
  border-radius:999px;
  background:var(--ss-inkt);
  color:var(--ss-bureau);
  box-shadow:var(--ss-schaduw-klein);
}
.timer-pil .timer-dot{background:var(--lime)}
.timer-widget.running,.dashboard-timer-fixed.running{
  background:var(--ss-inkt);
  color:var(--ss-bureau);
  border-radius:var(--ss-r);
  border:0;
}
.timer-widget.running .timer-stop{background:var(--lime);border-color:var(--lime);color:#16181a}
.timer-widget.running .inline-tekst-knop{color:var(--ss-bureau)}
.timer-widget.running small,.timer-widget.running .muted{color:color-mix(in srgb,var(--ss-bureau) 65%,transparent)}

/* --- 11. uitklappanelen --------------------------------------------------- */
.project-create-panel > summary{border-radius:var(--ss-r);padding:var(--ruimte-4,16px)}
.project-create-panel[open] > summary{border-bottom:1px solid var(--ss-lijn);border-radius:var(--ss-r) var(--ss-r) 0 0}

/* --- 12. tegeltjes met een kleur per klant -------------------------------- */
/* Gebruikt waar een lijst een herkenpunt nodig heeft. De kleur komt uit
   project_kleur() en staat als --kleur op de regel. */
.ss-tegel{
  width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  font:700 var(--tekst-s,12.5px) var(--heading-font);color:#16181a;
  background:color-mix(in srgb,var(--kleur,#c194d5) 70%,var(--ss-menging));
}

/* --- 13. gevulde regels --------------------------------------------------- */
.ss-rij{
  display:flex;align-items:center;gap:var(--ruimte-3,12px);
  padding:13px var(--ruimte-4,16px);
  border-radius:var(--ss-r-klein);
  margin-bottom:var(--ruimte-2,8px);
  background:color-mix(in srgb,var(--kleur,#c194d5) var(--ss-vul),var(--ss-menging));
  color:var(--ss-inkt);text-decoration:none;
  box-shadow:var(--ss-schaduw-klein);
  transition:transform .12s ease;
}
.ss-rij:hover{transform:translateY(-1px)}
.ss-rij .ss-vak{flex:1;min-width:0}
.ss-rij .ss-titel{display:block;font:500 var(--tekst-l,16px)/1.3 var(--body-font);letter-spacing:-.005em}
.ss-rij .ss-onder{display:block;font-size:var(--tekst-s,12.5px);color:color-mix(in srgb,var(--ss-inkt) 58%,transparent);margin-top:2px}
.ss-rij .ss-rechts{font:500 var(--tekst-s,12.5px) var(--body-font);color:color-mix(in srgb,var(--ss-inkt) 58%,transparent);white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- 14. kengetallen ------------------------------------------------------ */
.kpi,.health-tile,.insight-kpis > div,.finance-grid > div{
  border-radius:var(--ss-r);
  border:0;
  background:color-mix(in srgb,var(--kleur,var(--ss-inkt)) var(--ss-tint),var(--ss-menging));
  box-shadow:none;
}

/* ===========================================================================
   15. ÉÉN RANGORDE, ÉÉN MAATVOERING — OVERAL HETZELFDE
   Dit blok staat met opzet onderaan: het komt ná alle andere regels en wint
   dus van wat er eerder is gezegd. Het legt twee dingen vast.

   A. VIJF NIVEAUS TEKST. Elk element in het CRM hoort bij precies één niveau.
      1 paginatitel          24 px · 700 · strak           waar ben ik
      2 blokkop              16 px · 600                   waar gaat dit blok over
      3 onderwerp van een regel  16 px · 500               WAT het is (de taak, de klant)
      4 bijtekst             12,5 px · 400 · gedempt       waar het bij hoort
      5 label / kolomkop     11,5 px · 500 · kapitaal      hoe de kolom heet
      + getallen die ertoe doen staan in de kopletter, 24 of 38 px.

   B. DRIE MATEN BESTURING. Meer zijn het er niet, want elke extra maat leest
      als een foutje in plaats van als een keuze.
      pil (status, badge)    30 px hoog · 12,5 px tekst
      knop                   38 px hoog · 12,5 px tekst
      invulveld              42 px hoog · 14 px tekst   (op een telefoon 46/16)

   Alles schaalt mee met de schuif "Algemene tekstgrootte"; zie TYPOGRAFIE.txt.
   ======================================================================== */

/* ---- A. de vijf niveaus ---- */
.page-head h1{font:700 var(--tekst-xxl,24px)/1.15 var(--heading-font);letter-spacing:-.025em}
.page-head p,.page-head .muted{font-size:var(--tekst-s,12.5px);line-height:1.6;color:var(--ss-zacht)}

.card-head b,.card-head > div > b,.form-card > h2,.card > h2,.card > h3,.section-title{
  font:600 var(--tekst-l,16px)/1.25 var(--heading-font);letter-spacing:-.015em;
}
.section-title{font-size:var(--tekst-xl,19px)}

/* niveau 3 — het onderwerp van een regel, overal hetzelfde */
.tasks-table-wrap td.taak-titel .inline-tekst-knop,
.client-table td a.table-link b,
.contact-table td:first-child b,
.simple-list b,
.tijd-regel-tekst b,
.ss-rij .ss-titel,
.project-card .project-info h3{
  font:500 var(--tekst-l,16px)/1.3 var(--body-font);letter-spacing:-.005em;
}
.project-card .project-info h3{font-family:var(--heading-font);font-weight:700;font-size:var(--tekst-xl,19px)}

/* niveau 4 — bijtekst */
.simple-list small,.tijd-regel-tekst small,.ss-rij .ss-onder,
.table-wrap td small,.project-card .project-kicker,.client-table td small,
.tasks-table-wrap td.cel-project a,.tasks-table-wrap td.cel-nummer a{
  font:400 var(--tekst-s,12.5px)/1.5 var(--body-font);color:var(--ss-zacht);
}

/* niveau 5 — labels en kolomkoppen */
.table-wrap thead th,.field label,.railkaart h4,.kpi small,.getal small,
.tijd-bewerk-kop small,#api-sleutels .api-voorbeeld > span{
  font:500 var(--tekst-xs,11.5px)/1.4 var(--body-font);
  letter-spacing:.07em;text-transform:uppercase;color:var(--ss-zacht);
}

/* getallen die ertoe doen */
.kpi b,.kpi strong,.health-tile strong,.finance-grid .money,.tijd-bewerk-kop strong,
.insight-kpis b,.project-time-summary strong{
  font:700 var(--tekst-xxl,24px)/1 var(--heading-font);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

/* ---- B. de drie maten besturing ---- */
/* pil: 30 px, overal. Ook de statuskeuze, die stond op 34. */
.inline-status.is-gevuld > select,
.inline-priority.is-gevuld > select{
  height:30px;padding:0 26px 0 13px;font:500 var(--tekst-s,12.5px)/1 var(--body-font);
}
.badge,.pil,.tijd-tag,.health{
  min-height:30px;padding:0 13px;border-radius:999px;
  display:inline-flex;align-items:center;
  font:500 var(--tekst-s,12.5px)/1 var(--body-font);
}
/* knop: 38 px, overal */
.btn,.btn.mini,.btn.small{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 var(--tekst-s,12.5px)/1 var(--body-font);
}
.btn.wide{width:100%}
.icon-btn{width:38px;height:38px;min-height:38px;display:inline-grid;place-items:center}
/* invulveld: 42 px */
.field input,.field select,.field textarea,
.form-card input,.form-card select,.form-card textarea,
.settings-form input,.settings-form select,input[type="search"]{
  min-height:42px;font-size:var(--tekst-m,14px);
}
.field textarea,.form-card textarea{min-height:104px;line-height:var(--regel-tekst,1.6)}
/* besturing binnen een lijst blijft klein: dat is de afspraak uit MOBIEL.txt 2b */
.tijd-acties input[type="date"],.tijd-acties input[type="time"],
.taak-inline input[type="time"],.taak-inline input[type="date"]{min-height:30px;font-size:var(--tekst-s,12.5px)}

/* --- 16. het rijtje voorbeeldpillen bij Vormgeving ----------------------- */
.kleur-voorbeeld{
  display:flex;flex-wrap:wrap;gap:var(--ruimte-2,8px);
  margin:var(--ruimte-3,12px) 0 var(--ruimte-5,22px);
}

/* ===========================================================================
   17. DE MATEN AFDWINGEN
   De regels hierboven zetten een minimumhoogte, maar een knop of veld dat van
   elders royale binnenruimte meekrijgt wordt daar alsnog 60 px van. Hier staat
   de maat daarom hard: een vaste hoogte en geen binnenruimte boven en onder.
   Alleen onder .main, zodat het inlogscherm en het klantportaal hun eigen
   opmaak houden.

   De hoogtes staan als variabele, zodat de telefoonregels in v1530.css ze
   kunnen verzetten zonder dit bestand te hoeven overrulen: daar wordt
   --ss-veld 46 px, want onder die maat zoomt iOS in.
   ======================================================================== */
:root{ --ss-pil:30px; --ss-knop:38px; --ss-veld:42px; }

.main .btn,
.main button.btn,
.main a.btn{
  box-sizing:border-box;     /* anders komt de rand van 1 px er nog bovenop en wordt 38 ineens 40 */
  height:var(--ss-knop);
  min-height:var(--ss-knop);
  padding-block:0;
  line-height:1;
}
.main .icon-btn{ box-sizing:border-box; height:var(--ss-knop); width:var(--ss-knop); min-height:var(--ss-knop); padding:0; }

.main .field input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.main .field select,
.main .form-card input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.main .form-card select,
.main .settings-form input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.main .settings-form select{
  box-sizing:border-box;
  height:var(--ss-veld);
  min-height:var(--ss-veld);
  padding-block:0;
}
.main .field textarea,.main .form-card textarea{ box-sizing:border-box; height:auto; padding-block:11px; }

/* Besturing binnen een lijst of kaartje blijft 30 px — de afspraak uit
   MOBIEL.txt punt 2b, die net zo goed op een groot scherm geldt. */
.main .tijd-acties input[type="date"],
.main .tijd-acties input[type="time"],
.main .taak-inline input[type="date"],
.main .taak-inline input[type="time"],
.main .inline-status.is-gevuld > select,
.main .inline-priority.is-gevuld > select{
  box-sizing:border-box;
  height:var(--ss-pil);
  min-height:var(--ss-pil);
  padding-block:0;
}