/* Office477 CRM-pagina's: klanten, projecten, rapporten */

.o477-crm-toolbar {
    display: flex; gap: 12px; align-items: center;
    margin: 16px 0; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); flex-wrap: wrap;
}
.o477-crm-toolbar .grow { flex: 1; }
.o477-crm-toolbar input,
.o477-crm-toolbar select {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; background: var(--surface); color: var(--text);
}
.o477-crm-toolbar input:focus, .o477-crm-toolbar select:focus {
    outline: none; border-color: var(--primary);
}

/* Cards-grid (klanten, dashboard) */
.o477-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.o477-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); transition: all var(--transition);
    cursor: pointer; position: relative;
}
.o477-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.o477-card .o477-card-bar { height: 4px; border-radius: 4px; margin: -18px -18px 14px; }
.o477-card .o477-card-title { font-size: 18px; font-weight: 600; color: var(--primary-dark); margin-bottom: 4px; }
.o477-card .o477-card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.o477-card .o477-card-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); }
.o477-card .o477-card-stats strong { color: var(--text); font-size: 16px; }

/* Stat-cards (rapporten) */
.o477-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.o477-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.o477-stat .o477-stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.o477-stat .o477-stat-value { font-size: 28px; font-weight: 700; color: var(--primary-dark); margin-top: 4px; }
.o477-stat .o477-stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Tabellen */
.o477-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.o477-table thead th {
    background: #f8fafc; padding: 10px 12px; text-align: left; font-weight: 600;
    font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border);
}
.o477-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.o477-table tbody tr:hover { background: #f8fafc; }
.o477-table tbody tr:last-child td { border-bottom: none; }
.o477-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.o477-table .pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; color: white; }

/* Klikbare sort-headers (projecten-overzicht). De ⇅ / ▲ / ▼ indicator zit binnen de th. */
.o477-table thead th.o477-sort-th { cursor: pointer; user-select: none; white-space: nowrap; transition: background 100ms; }
.o477-table thead th.o477-sort-th:hover { background: #eef2f7; }
.o477-table thead th.o477-sort-th .o477-sort-ind {
    display: inline-block; margin-left: 4px; font-size: 11px; color: var(--text-muted);
    opacity: .55; transition: opacity 100ms, color 100ms;
}
.o477-table thead th.o477-sort-th:hover .o477-sort-ind { opacity: .9; }
.o477-table thead th.o477-sort-th .o477-sort-ind.active { opacity: 1; color: var(--primary); font-weight: 700; }

/* === Horizontale-scroll-wrapper voor brede tabellen (tablet/iPad) ===
   Wikkel een brede <table> in <div class="o477-table-scroll"> zodat de tabel zijn
   min-width houdt en de wrapper horizontaal scrollt i.p.v. de kolommen plat te
   drukken. Zelfde patroon als .o477-plan-grid-wrap (planning) / .o477-gb-tablewrap
   (grootboek). Smalle tabellen (zonder min-width) blijven gewoon 100% breed. */
.o477-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.o477-table-scroll::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
.o477-table-scroll::-webkit-scrollbar-thumb { background: #9aa4ae; border-radius: 5px; border: 2px solid var(--surface); }
.o477-table-scroll::-webkit-scrollbar-track { background: #eef1f4; border-radius: 5px; }
/* Administratie-tabellen houden hun breedte zodat de wrapper scrollt i.p.v. de
   kolommen plat te drukken (bankboek/bankboeken 8 kol, inkoopboek/bonnen 13 kol). */
.o477-bb-table { min-width: 1000px; }
.o477-ib-table { min-width: 1280px; }
/* Datum (kol 1) + Naam (kol 2) niet over meerdere regels afbreken — tabel scrollt horizontaal.
   De omschrijving-subtekst onder de naam mag wél blijven wrappen. */
.o477-ib-table th:first-child,
.o477-ib-table td:first-child { white-space: nowrap; }
.o477-ib-table td:nth-child(2) > strong { white-space: nowrap; }
/* Bedragen (Excl/BTW%/BTW€/Incl) niet afbreken — blijven als één getal op de regel. */
.o477-ib-table th.num,
.o477-ib-table td.num { white-space: nowrap; }
/* Kolomkoppen in dezelfde compacte uppercase-stijl als Verkopen (FACTUURNR/DATUM/…).
   nowrap houdt label + sorteerpijl op één regel (NAAM/GROOTBOEK braken anders af). */
.o477-ib-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #475569;
  white-space: nowrap;
}

/* Modal */
.o477-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.o477-modal {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
    max-width: 600px; width: 100%; max-height: 90vh; overflow: auto; padding: 24px;
}
.o477-modal h2 { font-size: 20px; font-weight: 600; margin-bottom: 18px; color: var(--primary-dark); }
.o477-modal label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.o477-modal input, .o477-modal select, .o477-modal textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; background: var(--surface); color: var(--text); margin-bottom: 14px;
}
/* Mobiel altijd 16px: bij <16px zoomt iOS automatisch in op het veld,
   waardoor de pagina uit de schermbreedte breekt (o.a. nieuwe afspraak/taak). */
@media (max-width: 720px) {
  .o477-modal input, .o477-modal select, .o477-modal textarea { font-size: 16px; }
}
.o477-modal textarea { min-height: 80px; resize: vertical; }
/* Radio's vallen buiten de 100%-breedte hierboven: op volle breedte tekent de
   browser het bolletje in het midden van de regel en drukt hij de tekst ernaast
   (flex:1;min-width:0) tot 0 px weg — zie de werkstaat-inlezen-bestandskeuze. */
.o477-modal input[type="radio"] { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }
.o477-modal .o477-modal-row { display: flex; gap: 12px; }
.o477-modal .o477-modal-row > div { flex: 1; }
/* Aanvinkregel in een modal (23-8, nieuwe-taak-scherm) */
.o477-modal .o477-modal-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13.5px; cursor: pointer; }
.o477-modal .o477-modal-check input { width: 16px; height: 16px; accent-color: #01A4A4; }
.o477-modal .o477-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Documenten (Administratie) — tenant-brede documentenlijst */
.o477-doc-table .o477-doc-datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.o477-doc-table .pill.o477-doc-actief   { background: #16a34a; }
.o477-doc-table .pill.o477-doc-inactief { background: #94a3b8; }
.o477-doc-table .pill.o477-doc-groep-pill {
  background: rgba(1,164,164,.12); color: #017a7a; font-weight: 600; white-space: nowrap;
  /* Zelfde vaste breedte als de andere benoemde pillen (stramien); lange
     groepsnamen worden afgekapt. */
  width: var(--o477-pil-b); overflow: hidden; text-overflow: ellipsis;
}
.o477-doc-bestand { display: flex; align-items: center; gap: 8px; }
.o477-doc-bestandnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
/* 👁/⬇ direct naast de bestandsnaam (geen margin-left:auto — dat duwde ze naar
   de rechterrand van de brede cel, waar ze los leken te zweven van het bestand). */
.o477-doc-bestandacties { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.o477-doc-leeg { color: var(--text-muted, #94a3b8); font-style: italic; }
/* Acties-kolom: eigen kop + verticale scheidingslijn vóór de groep (zelfde
   patroon als de Acties-kop op het werkbord); knoppen beginnen bij de lijn. */
.o477-doc-acties { white-space: nowrap; text-align: left; }
.o477-doc-table th.o477-doc-acties-th,
.o477-doc-table td.o477-doc-acties { border-left: 1px solid var(--border); padding-left: 12px; width: 1%; }
.o477-doc-ico { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 4px; transition: background var(--transition); text-decoration: none; display: inline-block; }
a.o477-doc-ico:hover { text-decoration: none; }
.o477-doc-ico:hover { background: #eef2f7; }

/* Filter/zoek-balken van agenda en notitiebord: zelfde lichtgroene kaarttint
   als de Filter & Zoeken-kaarten op werkbord en documenten. */
.o477-crm-toolbar.o477-ag-toolbar,
.o477-crm-toolbar.o477-keep-toolbar {
  background: #E0F7F7;
  border-color: #a7e7e7;
}

/* Inklapbare filterkaart documenten — zelfde patroon en tint als de
   "Filter & Zoeken"-kaart op het werkbord (werkbord.css .o477-filter-card). */
.o477-doc-filtercard {
  background: #E0F7F7;
  border: 1px solid #a7e7e7;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
  box-shadow: 0 1px 2px rgba(1, 164, 164, 0.06);
}
.o477-doc-filtercard-kop {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none; padding: 2px 0;
}
.o477-doc-filtercard-kop h2 {
  margin: 0; font-size: 14px; font-weight: 600;
  color: var(--primary-dark, #017a7a);
  display: flex; align-items: center; gap: 8px;
}
.o477-doc-filtercard-kop:hover h2 { color: var(--primary, #01A4A4); }
.o477-doc-filtercard-pijl { font-size: 1.1em; opacity: 0.55; transition: transform 0.2s ease; display: inline-block; }
.o477-doc-filtercard[data-collapsed="true"] .o477-doc-filtercard-pijl { transform: rotate(-90deg); }
.o477-doc-filtercard[data-collapsed="true"] .o477-doc-filtercard-body { display: none; }
/* De toolbar ín de kaart verliest z'n eigen balk-opmaak */
.o477-doc-filtercard .o477-crm-toolbar { margin: 12px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
/* "+ Nieuw document"-rij onder de kaart (zoals + Nieuwe taak op het werkbord) */
.o477-doc-actiebalk { margin: 8px 0 16px; }
/* Agenda-variant: twee knoppen naast elkaar */
.o477-ag-actiebalk { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==================== O477 PAGINA-STRAMIEN (27-7) ====================
   Vaste opbouw voor ELKE lijstpagina — leeg voorbeeld: /o477/stramien.html,
   uitleg: STRAMIEN.md in de repo-root. Volgorde van boven naar beneden:
   1. pagina-achtergrond var(--bg) #f1f5f9 (body-regel in de blade);
   2. standaard-banner (.o477-page-header, zie STRAMIEN.md);
   3. KPI's (.o477-kpi-strip — inklapbare Overzicht-strip met witte kaarten,
      werkbord-opmaak);
   4. lichtgroene filterkaart met titel (.o477-doc-filtercard, breed zoekveld
      .grow + groep-filter + Groeperen-select in .o477-crm-toolbar);
   5. actiebalk (.o477-doc-actiebalk met .o477-btn-primary);
   6. witte tabellen (.o477-table .o477-doc-table) — regels én pillen op de
      vaste maten hieronder. */
:root {
  --o477-rij-h: 44px;   /* vaste regelhoogte in stramien-tabellen */
  --o477-pil-h: 30px;   /* vaste hoogte van pillen en regel-knoppen */
  --o477-pil-r: 6px;    /* AFRONDING (27-8, verzoek Jannie): pillen, knoppen en filtervelden overal dezelfde ronde hoek */
  --o477-pil-b: 122px;  /* vaste breedte van benoemde pillen (status, Aantekeningen) */
  --o477-tekst: 14px;   /* basisletter in stramien-tabellen en -filters (27-8) */
  --o477-groep-dicht: 20px;  /* ruimte onder een INGEKLAPTE groep (27-8) */
  --o477-groep-open: 40px;   /* ruimte onder een UITGEKLAPTE groep (27-8) */
}

/* Basisletter 14px in de stramien-onderdelen (27-8). Bewust op deze blokken en
   niet op body: menu, kopbalk en de eigen weergaven (werkbord, agenda) houden
   hun eigen maatvoering. */
.o477-str-table, .o477-doc-table,
.o477-doc-filtercard .o477-crm-toolbar input,
.o477-doc-filtercard .o477-crm-toolbar select,
.o477-doc-actiebalk .o477-btn { font-size: var(--o477-tekst); }
.o477-str-table th, .o477-doc-table th { font-size: 11px; }   /* kopjes blijven klein + uppercase */

/* Eén afronding voor alle stramien-onderdelen (27-8). */
.o477-str-table .pill, .o477-doc-table .pill,
.o477-str-table button, .o477-str-table select, .o477-str-table input,
.o477-doc-actiebalk .o477-btn,
.o477-doc-filtercard .o477-crm-toolbar input,
.o477-doc-filtercard .o477-crm-toolbar select { border-radius: var(--o477-pil-r); }

/* Filterkaarten: álle velden en knoppen dezelfde afronding (verzoek 27-8).
   De regel hierboven pakt alleen toolbars met .o477-crm-toolbar; op pagina's
   waar de filterbalk door JS wordt opgebouwd (dossiers, taken terugkerend,
   documenten, de relatie-pagina's) ontbreekt die klasse — daar bleef de
   afronding weg. */
.o477-doc-filtercard input:not([type="checkbox"]):not([type="radio"]),
.o477-doc-filtercard select,
.o477-doc-filtercard button,
.o477-doc-filtercard label { border-radius: var(--o477-pil-r); }

/* Eén hoogte per context (27-8): in de filterkaart en de actiebalk lopen alle
   velden, knoppen en pillen op --o477-veldhoogte, in de tabellen op
   --o477-pil-h. Zo staan ze op één lijn in plaats van net ongelijk. */
.o477-doc-filtercard input:not([type="checkbox"]):not([type="radio"]),
.o477-doc-filtercard select,
.o477-doc-filtercard button,
.o477-doc-filtercard label,
.o477-doc-filtercard .pill {
  min-height: var(--o477-veldhoogte);
  box-sizing: border-box;
}
/* Knoppen en labels zijn geen formuliervelden: die moeten hun inhoud zelf
   verticaal centreren, anders plakt de tekst tegen de bovenkant. */
.o477-doc-filtercard button,
.o477-doc-filtercard label,
.o477-doc-filtercard .pill {
  display: inline-flex; align-items: center; justify-content: center;
}
.o477-doc-actiebalk .o477-btn {
  min-height: var(--o477-veldhoogte); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.o477-str-table button, .o477-str-table select,
.o477-str-table input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--o477-pil-h); box-sizing: border-box;
}

/* En dezelfde tekstgrootte in elke pil en knop (27-8): pillen stonden op 12px,
   knoppen op 14px, waardoor ze naast elkaar ongelijk oogden. */
.o477-doc-filtercard input:not([type="checkbox"]):not([type="radio"]),
.o477-doc-filtercard select,
.o477-doc-filtercard button,
.o477-doc-filtercard label,
.o477-doc-filtercard .pill,
.o477-doc-actiebalk .o477-btn,
.o477-str-table .pill, .o477-doc-table .pill,
.o477-str-table button, .o477-str-table select,
.o477-str-table input:not([type="checkbox"]):not([type="radio"]) {
  font-size: var(--o477-tekst);
}

/* --- 3. KPI's: inklapbare "📊 Overzicht"-strip met witte kaarten BOVEN de
       filterkaart — exact de werkbord-opmaak (feedback Jannie 27-7 avond:
       "Als er KPI pillen zijn, dan is dit de opmaak"). Kopie van de
       .o477-kpi-*-klassen uit werkbord.css: werkbord laadt werkbord.css ná
       crm.css, dus daar blijven de eigen regels winnen. */
.o477-kpi-strip { margin: 12px 0 16px; }
.o477-kpi-strip > .oc-card-summary {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  user-select: none; margin: 0 0 10px; padding: 4px 8px;
}
.o477-kpi-strip > .oc-card-summary:hover .oc-card-title { color: var(--primary, #01A4A4); }
.o477-kpi-strip .oc-card-title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--primary-dark, #017a7a);
  display: flex; align-items: center; gap: 8px; transition: color 0.15s ease;
}
.o477-kpi-strip .oc-collapse-icon { font-size: 1.1em; opacity: 0.55; transition: transform 0.2s ease; display: inline-block; }
.o477-kpi-strip[data-collapsed="true"] .oc-collapse-icon { transform: rotate(-90deg); }
.o477-kpi-strip[data-collapsed="true"] > .oc-card-body { display: none; }
.o477-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.o477-kpi-card {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  cursor: pointer; position: relative;
}
.o477-kpi-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  border-color: var(--primary, #01A4A4); text-decoration: none;
}
.o477-kpi-card.is-active {
  border-color: var(--primary, #01A4A4);
  background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%);
  box-shadow: 0 2px 6px rgba(1, 164, 164, 0.15);
}
/* Informatieve kaart (geen filterklik) — zelfde stijl als de Uren-totaal-kaart
   op het werkbord: grijzige achtergrond, geen hover-lift. */
.o477-kpi-card.o477-kpi-info { cursor: default; background: #f8fafc; }
.o477-kpi-card.o477-kpi-info:hover {
  transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-color: var(--border, #e2e8f0);
}
.o477-kpi-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.o477-kpi-label { font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; }
.o477-kpi-value { font-size: 28px; font-weight: 700; color: #0f172a; line-height: 1.1; margin: 2px 0; }
.o477-kpi-sub { font-size: 11px; color: #64748b; }
@media (max-width: 768px) {
  .o477-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .o477-kpi-card { padding: 10px 12px; }
  .o477-kpi-value { font-size: 22px; }
  .o477-kpi-icon { font-size: 18px; }
}

/* --- 6. Witte regels op vaste hoogte; pillen op vaste hoogte + radius */
.o477-doc-table tbody td { height: var(--o477-rij-h); vertical-align: middle; }

/* --- 6b. Titelbalk boven de regels, kopjes in werkbord-stijl
       (uppercase, klein, sorteerpijl ⇅/↑/↓) — verzoek Jannie 27-7 avond.
       18-8 (groepsblokken-look): kop in de pagina-achtergrondkleur i.p.v.
       stramien-beige + iets hoger — de kop valt weg tegen de pagina zodat de
       gekleurde groepsblokken naar voren komen; alle lijstpagina's gelijk. */
.o477-doc-table thead th {
  background: var(--bg, #f7f5f2);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding-top: 12px; padding-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted, #64748b);
  position: relative; /* anker voor de kolom-sleepgreep */
}
.o477-doc-table thead th.o477-sort-th:hover { background: #edeae5; }
.o477-doc-table thead th.o477-sort-th.is-sort { color: var(--primary-dark, #017a7a); font-weight: 700; }
.o477-doc-table thead th.o477-sort-th.is-sort .o477-sort-ind { color: var(--primary-dark, #017a7a); }
/* --- 6c. Kolombreedtes aanpasbaar: sleepgreep op de rechterrand van elke kop;
       breedte per pagina bewaard in localStorage (zie dossiers.js). */
.o477-th-greep {
  position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 2;
}
.o477-th-greep:hover, .o477-th-greep.is-slepen { background: rgba(1,164,164,.25); }
@media (max-width: 720px) { .o477-th-greep { display: none; } }
/* Vaste tabel-layout zodra een tabel sleepgrepen heeft: alleen dan houdt de
   browser de (gesleepte) kopbreedtes ook echt aan; kolommen zonder breedte
   verdelen de rest. Mobiel niet (daar is de tabel een kaartenlijst). */
@media (min-width: 721px) {
  .o477-doc-table:has(.o477-th-greep) { table-layout: fixed; }
}

/* --- 6b/6c ook voor de projecten-tabellen (stramien-uitrol, 4e implementatie):
       beige titelbalk + werkbord-sortering + sleepbare kolombreedtes. De
       hoofdgroep/status-groepen van Projecten blijven (functionele indeling);
       het stramien geldt voor de koppen binnen elke groepstabel. */
/* 18-8: kolomkop niet meer beige maar in de pagina-achtergrondkleur — de kop
   valt weg tegen de pagina zodat de gekleurde groepsblokken naar voren komen. */
.o477-proj-table thead th {
  background: var(--bg, #f7f5f2);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted, #64748b);
  position: relative; /* anker voor de kolom-sleepgreep */
}
.o477-table.o477-proj-table thead th.o477-sort-th:hover { background: #edeae5; }
.o477-table.o477-proj-table thead th.o477-sort-th.is-sort { color: var(--primary-dark, #017a7a); font-weight: 700; }
.o477-table.o477-proj-table thead th.o477-sort-th.is-sort .o477-sort-ind,
.o477-table.o477-proj-table thead th.o477-sort-th .o477-sort-ind.active { color: var(--primary-dark, #017a7a); }
@media (min-width: 721px) {
  .o477-proj-table:has(.o477-th-greep) { table-layout: fixed; }
}
/* v2.24.0: selectie-checkboxes voor export (per rij in de Nummer-cel + alles-selecteren in de kop) */
.o477-proj-sel, .o477-proj-selall { cursor: pointer; accent-color: var(--primary, #01A4A4); vertical-align: -2px; margin-right: 2px; }

/* --- 6/6b/6c ook voor de offertes-tabel (stramien-uitrol, 9e implementatie):
       vaste regelhoogte, beige titelbalk + werkbord-sortering + sleepbare
       kolombreedtes; de optionele groepering per behandelaar (kop-rijen met
       subtotaal) blijft — functionele indeling, zoals Projecten. */
.o477-off-table tbody td { height: var(--o477-rij-h); vertical-align: middle; }
/* 18-8: kolomkop in pagina-achtergrondkleur i.p.v. stramien-beige + iets hoger
   (gelijk aan /projecten en /planregels) */
.o477-off-table thead th {
  background: var(--bg, #f7f5f2);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding-top: 12px; padding-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted, #64748b);
  position: relative; /* anker voor de kolom-sleepgreep */
}
.o477-table.o477-off-table thead th.o477-sort-th:hover { background: #edeae5; }
.o477-table.o477-off-table thead th.o477-sort-th.is-sort { color: var(--primary-dark, #017a7a); font-weight: 700; }
.o477-table.o477-off-table thead th.o477-sort-th.is-sort .o477-sort-ind { color: var(--primary-dark, #017a7a); }
@media (min-width: 721px) {
  .o477-off-table:has(.o477-th-greep) { table-layout: fixed; }
}
/* Pillen (status/klant) op de stramien-maten; status-pil op vaste breedte */
.o477-off-table .pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r); font-size: 12px; line-height: 1;
  white-space: nowrap;
}
.o477-off-table .o477-off-status-pill { width: var(--o477-pil-b); }
/* 11-9: de statuspil in de offertelijst is een keuzelijst — hij ziet eruit als
   de gekleurde pil, maar klikken opent de statussen en kiezen slaat direct op.
   Eigen pijltje i.p.v. het systeem-pijltje, zodat de pilvorm intact blijft. */
.o477-off-table select.o477-off-status-pill {
  display: inline-block; text-align: center; text-align-last: center;
  border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  padding: 0 18px 0 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px center, right 5px center;
  background-size: 3px 3px, 3px 3px;
  background-repeat: no-repeat;
}
.o477-off-table select.o477-off-status-pill:hover { box-shadow: 0 0 0 2px rgba(1, 164, 164, .35); }
.o477-off-table select.o477-off-status-pill:focus-visible { outline: 2px solid var(--primary, #01A4A4); outline-offset: 1px; }
.o477-off-table select.o477-off-status-pill:disabled { opacity: .55; cursor: progress; }
.o477-off-table select.o477-off-status-pill option { background: #fff; color: #334155; }
.o477-doc-table .pill,
.o477-doc-table button.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r); font-size: 12px; line-height: 1;
  white-space: nowrap;
}

/* --- 6/6b/6c GENERIEK voor de stramien-uitrol (10e implementatie en verder:
       opdrachtbonnen, relaties, planregels, inkoopboek, verkopen, memoriaal):
       geef de tabel de klasse .o477-str-table i.p.v. per pagina dit blok te
       kopiëren. Vaste regelhoogte, titelbalk in pagina-achtergrondkleur
       (18-8 groepsblokken-look, was stramien-beige), werkbord-sortering ⇅/↑/↓
       en sleepbare kolombreedtes; pillen op de stramien-tokens. */
.o477-str-table tbody td { height: var(--o477-rij-h); vertical-align: middle; }
.o477-str-table thead th {
  background: var(--bg, #f7f5f2);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding-top: 12px; padding-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  position: relative; /* anker voor de kolom-sleepgreep */
}
.o477-table.o477-str-table thead th.o477-sort-th { cursor: pointer; user-select: none; }
.o477-table.o477-str-table thead th.o477-sort-th:hover { background: #edeae5; }
.o477-table.o477-str-table thead th.o477-sort-th.is-sort { color: var(--primary-dark, #017a7a); font-weight: 700; }
.o477-table.o477-str-table thead th.o477-sort-th.is-sort .o477-sort-ind,
.o477-table.o477-str-table thead th.o477-sort-th .o477-sort-ind.active { color: var(--primary-dark, #017a7a); }
@media (min-width: 721px) {
  .o477-str-table:has(.o477-th-greep) { table-layout: fixed; }
}
.o477-str-table .pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r); font-size: 12px; line-height: 1;
  white-space: nowrap;
}
/* Benoemde status-pil op vaste breedte (zelfde als offertes/dossiers) */
.o477-str-table .o477-str-status-pill { width: var(--o477-pil-b); }
/* Inline-bewerkbare pill-selects (planregels: status/discipline/soort werk/
   afdeling/klant): zelfde maat-taal als .pill + .o477-str-status-pill;
   alleen de kleur (achtergrond/tekst) blijft inline per waarde. */
select.o477-str-pill-sel {
  height: var(--o477-pil-h); width: var(--o477-pil-b); max-width: 100%;
  box-sizing: border-box; padding: 0 8px;
  border: 1px solid rgba(0,0,0,.08); border-radius: var(--o477-pil-r);
  font-size: 12px; font-weight: 600; line-height: 1;
  text-align: center; text-align-last: center;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* De uitklaplijst erft anders het centreren van de pill — opties links
   uitlijnen met wat ruimte aan de linkerkant (verzoek 18-8). */
select.o477-str-pill-sel option,
select.o477-str-pill-sel optgroup {
  text-align: left; text-align-last: left;
  padding-left: 8px; font-weight: normal;
}
/* Binnen een optgroep (bv. Discipline) springt de browser opties zelf al in —
   die UA-inspringing (padding-inline-start) helemaal onderdrukken zodat de
   opties op dezelfde lijn staan als een platte lijst. */
select.o477-str-pill-sel optgroup option { padding-left: 8px; padding-inline-start: 8px; }

/* --- Generieke groepsband in een .o477-str-table (14-9, woonklussen-pagina's).
       Tot nu toe had elke module zijn eigen groepskop-CSS (o477-off-grouphead,
       potje-groep, …). Dit is dezelfde band als op /projecten — de waarden uit
       STRAMIEN.md — maar dan één keer, zodat een nieuwe pagina alleen nog
       tr.o477-str-groeprij hoeft te renderen. De hele band is klikbaar; na elke
       groep komt een tr.o477-str-spacer van 20px in de paginakleur. */
.o477-table.o477-str-table tr.o477-str-groeprij { cursor: pointer; }
.o477-table.o477-str-table tr.o477-str-groeprij > td {
  background: #E0F7F7; border-bottom: 2px solid #cbd5e1;
  padding: 14px 12px; height: auto;
  font-size: 15px; font-weight: 700; color: var(--primary-dark, #017a7a);
}
.o477-table.o477-str-table tr.o477-str-groeprij .o477-str-groepmeta {
  font-size: 12px; font-weight: 500; color: #64748b; margin-left: 8px;
}
.o477-str-groeprechts { float: right; display: inline-flex; align-items: baseline; gap: 8px; }
.o477-str-groeprechts .lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b;
}
.o477-table.o477-str-table tr.o477-str-spacer > td {
  background: var(--bg, #f1f5f9); border: 0; padding: 0; height: 20px;
}

/* ============ WOONKLUSSEN.NL — websitepagina's in de tenant-app (14-9) ============
   De vier beheerpagina's van woonklussen.nl draaien sinds 14-9 als gewone
   module-pagina's in de werkomgeving Woonklussen. Ze gebruiken .o477-str-table
   voor de maatvoering; die klasse geeft pillen bewust géén kleur, dus hier de
   kleuren per status — zelfde taal als de documenten-/potje-pillen. */
/* Alle woonklussen-pillen dragen .o477-wnk-pil erbij: dat maakt de selector
   .pill.o477-wnk-pil.o477-wnk-<status> specifieker dan .o477-pd-meta .pill
   (die alles wit maakt), zodat dezelfde pil in de tabel én in de hero van de
   detailpagina klopt — ongeacht de volgorde in dit bestand. */
.pill.o477-wnk-pil {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r); font-size: 12px; font-weight: 600; line-height: 1;
  white-space: nowrap; text-transform: none; letter-spacing: normal;
}
.pill.o477-wnk-pil.o477-wnk-actief    { background: #16a34a; color: #fff; }
.pill.o477-wnk-pil.o477-wnk-aangemeld { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.pill.o477-wnk-pil.o477-wnk-opgezegd  { background: #94a3b8; color: #fff; }
.pill.o477-wnk-pil.o477-wnk-neutraal  { background: #eef2f7; color: #475569; }
/* Acties-kolom met scheidingslijn, zoals in de documenten-/potje-tabellen. */
.o477-wnk-table th.o477-doc-acties-th,
.o477-wnk-table td.o477-doc-acties { border-left: 1px solid var(--border); padding-left: 12px; }
/* Tweede regel in een cel (e-mail onder de naam, postcode onder het adres). */
.o477-wnk-table .o477-wnk-sub { display: block; font-size: 11.5px; color: var(--text-muted, #64748b); }
/* Statuskleuren van de opdrachtmeldingen (WkOpdracht::STATUSSEN). */
.pill.o477-wnk-pil.o477-wnk-nieuw      { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.pill.o477-wnk-pil.o477-wnk-bezig      { background: #dbeafe; color: #1e40af; }
.pill.o477-wnk-pil.o477-wnk-ingepland  { background: #ede9fe; color: #5b21b6; }
.pill.o477-wnk-pil.o477-wnk-uitgevoerd { background: rgba(1,164,164,.15); color: #017a7a; }
/* Partnerstatus die niet in de opdracht-reeks zit (WkPartner::STATUSSEN). */
.pill.o477-wnk-pil.o477-wnk-afgewezen { background: #fee2e2; color: #b91c1c; }
/* Spoed: smalle waarschuwpil achter het nummer, niet op pil-standaardbreedte. */
.pill.o477-wnk-pil.o477-wnk-spoed {
  background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
  height: 20px; padding: 0 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
}
/* Regels die naar een detailpagina gaan. */
.o477-wnk-table tr.o477-wnk-klikrij { cursor: pointer; }
.o477-wnk-table tr.o477-wnk-klikrij:hover > td { background: #f8fafc; }

/* --- Detailpagina van een melding (blokken binnen een tab). --- */
.o477-wnk-blok {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden;
}
.o477-wnk-blok > h3 {
  margin: 0; padding: 12px 16px; background: #E0F7F7; border-bottom: 2px solid #cbd5e1;
  font-size: 15px; font-weight: 700; color: var(--primary-dark, #017a7a);
}
.o477-wnk-blok-body { padding: 14px 16px; }
.o477-wnk-kolommen { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .o477-wnk-kolommen { grid-template-columns: 1fr; } }
/* Veldenlijst: label links, waarde rechts, op de stramien-rijhoogte. */
.o477-wnk-kv { width: 100%; border-collapse: collapse; }
.o477-wnk-kv th {
  text-align: left; vertical-align: top; width: 170px; padding: 7px 12px 7px 0;
  font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); white-space: nowrap;
}
.o477-wnk-kv td { padding: 7px 0; font-size: 13.5px; color: var(--text, #0f172a); }
.o477-wnk-kv tr + tr th, .o477-wnk-kv tr + tr td { border-top: 1px solid var(--border, #e2e8f0); }
.o477-wnk-tekst { white-space: pre-wrap; margin: 0; font-size: 13.5px; line-height: 1.55; }
/* Foto's als tegels; klikken opent de volledige foto in een nieuw tabblad. */
.o477-wnk-fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.o477-wnk-fotos img {
  width: 190px; height: 140px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border, #e2e8f0); display: block;
}
.o477-wnk-fotos a:hover img { border-color: var(--primary, #01A4A4); }
.o477-wnk-veld { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); }
.o477-wnk-veld select, .o477-wnk-veld textarea, .o477-wnk-veld input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 400; color: var(--text, #0f172a);
}
.o477-wnk-veld textarea { min-height: 110px; resize: vertical; }
.o477-wnk-vink { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13.5px; cursor: pointer; }
.o477-wnk-vink input { width: 16px; height: 16px; accent-color: var(--primary, #01A4A4); margin: 0; }
/* Cel met losse pillen (specialisaties, provincies): laten afbreken. */
.o477-wnk-kv td.o477-wnk-chips { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 5px; padding-bottom: 5px; }
/* Lange vrije tekst in een tabelcel (onderwerp van een belafspraak): één regel,
   afgekapt; de hele tekst staat in de title. */
.o477-wnk-kort {
  display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
/* Dagkeuze in de modal "Tijden vrijgeven" (14-9, opmaak herzien): een echte
   weekkalender in plaats van een rafelige rij pillen — ma t/m zo per rij, dus
   rechte kolommen en een agenda die je in één oogopslag leest. */
.o477-wkb-dagkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.o477-wkb-snel { display: flex; gap: 4px; flex-wrap: wrap; }
.o477-wkb-snelknop {
  background: none; border: 0; padding: 2px 6px; border-radius: 4px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--primary-dark, #017a7a);
  cursor: pointer; transition: background var(--transition);
}
.o477-wkb-snelknop:hover { background: #E0F7F7; }

.o477-wkb-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 6px 0 0; }
.o477-wkb-kal-kop {
  text-align: center; padding-bottom: 2px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted, #94a3b8);
}
/* Elke dag is één cel; het vinkje zelf is verborgen, de hele cel is de knop. */
.o477-wkb-kal .o477-wkb-dag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 40px; padding: 5px 2px; margin: 0;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.1; color: var(--text, #0f172a);
  cursor: pointer; user-select: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.o477-modal .o477-wkb-dag input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.o477-wkb-maand { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #94a3b8); }
.o477-wkb-kal .o477-wkb-dag.is-weekend { background: #f8fafc; color: var(--text-muted, #94a3b8); }
.o477-wkb-kal .o477-wkb-dag:hover { border-color: var(--primary, #01A4A4); }
.o477-wkb-kal .o477-wkb-dag:has(input:checked) {
  border-color: var(--primary, #01A4A4); background: #E0F7F7;
  color: var(--primary-dark, #017a7a); font-weight: 700;
}
.o477-wkb-kal .o477-wkb-dag:has(input:checked) .o477-wkb-maand { color: var(--primary-dark, #017a7a); }
/* Dagen die al voorbij zijn: zichtbaar voor het ritme, maar niet te kiezen. */
.o477-wkb-kal .o477-wkb-dag.is-verleden { opacity: .3; cursor: not-allowed; background: transparent; }
.o477-wkb-kal .o477-wkb-dag.is-verleden:hover { border-color: var(--border, #e2e8f0); }
/* Live telling onder de kalender: wat levert deze keuze op? */
.o477-wkb-telling {
  margin-top: 12px; padding: 9px 12px; border-radius: 6px;
  background: #E0F7F7; color: var(--primary-dark, #017a7a);
  font-size: 13px; font-weight: 600;
}
.o477-wkb-telling.is-leeg { background: #f1f5f9; color: var(--text-muted, #64748b); font-weight: 500; }
.o477-wkb-telling.is-fout { background: #fee2e2; color: #b91c1c; }
@media (max-width: 480px) {
  .o477-wkb-kal { gap: 3px; }
  .o477-wkb-kal .o477-wkb-dag { min-height: 34px; font-size: 12.5px; padding: 3px 1px; }
}

/* "+3" achter een afgekapte opsomming in de tabel. */
.o477-wnk-meer {
  display: inline-block; padding: 1px 6px; border-radius: 9px;
  background: #eef2f7; color: #475569; font-size: 11px; font-weight: 600; cursor: help;
}

/* ============ HUISHOUDPOTJE (2-8) ============
   De potje-tabellen gebruiken .o477-str-table (maatvoering); die klasse geeft
   pillen bewust geen kleur. Hieronder de kleuren van deze module, in dezelfde
   taal als de documenten-/dossiers-pillen. */
/* Categorie- en hoofdcategoriepil schalen mee met de kolom: ze mogen de hele
   celbreedte gebruiken (die je met de greep in de kop zelf instelt) en breken af
   over meerdere regels in plaats van af te kappen — de Nibud-namen zijn lang. */
.o477-pot-table .pill.o477-pot-groep {
  background: rgba(1,164,164,.12); color: #017a7a; font-weight: 600;
  max-width: 100%; white-space: normal; height: auto; min-height: var(--o477-pil-h);
  padding: 4px 10px; text-align: left; justify-content: flex-start; line-height: 1.25;
}
/* Hoofdcategorie: zelfde pil-vorm als de categorie, iets doffer zodat de twee
   niveaus naast elkaar te onderscheiden zijn. */
.o477-pot-table .pill.o477-pot-hoofdcat {
  background: #eef2f7; color: #475569; font-weight: 600;
  max-width: 100%; white-space: normal; height: auto; min-height: var(--o477-pil-h);
  padding: 4px 10px; text-align: left; justify-content: flex-start; line-height: 1.25;
}
.o477-pot-table .pill.o477-pot-open     { background: #16a34a; color: #fff; width: var(--o477-pil-b); }
.o477-pot-table .pill.o477-pot-dicht    { background: #94a3b8; color: #fff; width: var(--o477-pil-b); }
.o477-pot-table .pill.o477-pot-concept  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; width: var(--o477-pil-b); }
.o477-pot-table button.pill { cursor: pointer; border: 0; font-weight: 600; }
.o477-pot-table button.pill.o477-pot-concept { border: 1px solid #fcd34d; }
/* Acties-kolom met scheidingslijn, zoals in de documenten-/dossiers-tabellen. */
.o477-pot-table th.o477-doc-acties-th,
.o477-pot-table td.o477-doc-acties { border-left: 1px solid var(--border); padding-left: 12px; }
/* Uitgelichte KPI-kaart (bv. de waarde van een pensioenpotje): huisstijlrand,
   lichte tint en het bedrag in de accentkleur — springt eruit tussen de rest. */
.o477-kpi-card.o477-kpi-accent {
  border-color: var(--primary, #01A4A4);
  background: linear-gradient(180deg, rgba(1,164,164,.10), rgba(1,164,164,.03));
  box-shadow: 0 1px 6px rgba(1,164,164,.14);
}
.o477-kpi-card.o477-kpi-accent .o477-kpi-value { color: var(--primary-dark, #017a7a); }
.o477-kpi-card.o477-kpi-accent .o477-kpi-label { color: var(--primary-dark, #017a7a); }
/* De ▾-knop hoort alleen bij de mobiele kaartweergave (zie de media-query onderaan). */
.o477-pot-kaart-toggle { display: none; }
/* De groepeer-keuze staat tussen de actiebalk-knoppen en moet er als knop uitzien:
   .o477-btn(-secondary) geeft kleur en maat, hier alleen het select-eigen gedrag
   (native pijl weg, eigen chevron, dezelfde letter als de knoppen ernaast). */
.o477-btn.o477-pot-groepeer {
  appearance: none; -webkit-appearance: none;
  font-size: 14px; font-weight: 500; line-height: 1.25;
  padding: 8px 32px 8px 14px;
  background-color: var(--surface, #fff);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.o477-btn.o477-pot-groepeer:hover { background-color: #f1f5f9; }

/* Groepkop bij groeperen (week / maand / omschrijving / categorie / betaald door);
   klikken klapt de groep in of uit (▾ open, ▸ dicht). */
.o477-pot-table tbody tr.o477-pot-groepkop > td {
  background: #f1f5f9; font-weight: 700; color: #475569; padding: 7px 12px;
}
.o477-pot-table tbody tr.o477-pot-groepkop { cursor: pointer; user-select: none; }
.o477-pot-table tbody tr.o477-pot-groepkop:hover > td { background: #e6edf5; }
.o477-pot-table tbody tr.o477-pot-groepkop small { font-weight: 500; color: #94a3b8; margin-left: 6px; }
.o477-pot-groepico { display: inline-block; width: 14px; color: #64748b; }
/* De kolomkoppen van de potje-tabellen houden de beige stramien-kop uit
   .o477-str-table — de groene variant is op verzoek teruggedraaid (16-8). */
/* Schuifknoppen bij een categoriegroep. */
.o477-cat-schuif { margin-left: 8px; white-space: nowrap; }
.o477-cat-schuif .o477-doc-ico { font-size: 13px; }
.o477-pot-table .o477-doc-ico[disabled] { opacity: .3; cursor: default; }
/* Afsluitende totaalregel onder een (sub)groep. */
.o477-pot-table tbody tr.o477-pot-groeptotaal > td {
  border-top: 1px solid var(--border); font-weight: 700; color: #475569; background: #fbfdff;
}
.o477-pot-table tbody tr.o477-pot-groeptotaal.is-sub > td {
  font-weight: 600; color: #64748b; background: transparent;
}
/* Tweede niveau ("daarbinnen"): iets lichter en ingesprongen onder de hoofdgroep. */
.o477-pot-table tbody tr.o477-pot-subkop > td { background: #f8fafc; font-weight: 500; }
.o477-pot-table tbody tr.o477-pot-subkop > td:first-child { padding-left: 30px; }
/* Regels selecteren voor de bulk-balk (zelfde maat/kleur als bij de planregels). */
.o477-pot-selcel { text-align: center; }
.o477-pot-sel, .o477-pot-sel-all, .o477-pot-sel-groep {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary);
  vertical-align: middle; margin: 0;
}
.o477-pot-table tbody tr.is-gekozen > td { background: #ecfeff; }
/* Geldt voor élke verborgen rij — ook subgroepkoppen, die anders bleven staan
   onder een dichtgeklapte hoofdgroep. */
.o477-pot-table tbody tr.is-verborgen { display: none !important; }


/* Afschrift-inleesmodal: brede tabel met per regel een voorstel. De modal mag
   breder dan standaard en scrollt intern, zodat de knoppenrij zichtbaar blijft. */
.o477-modal.o477-af-modal { max-width: 1080px; width: calc(100vw - 48px); }
.o477-af-modal .af-scroll { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.o477-af-table { width: 100%; margin: 0; box-shadow: none; }
.o477-af-table th { position: sticky; top: 0; z-index: 1; }
.o477-af-table td { padding: 5px 8px; }
.o477-modal .o477-af-table input[type="text"],
.o477-modal .o477-af-table select { width: 100%; margin: 0; padding: 5px 8px; font-size: 13px; }
.o477-modal .o477-af-table input[type="checkbox"] { width: auto; min-width: 0; margin: 0; }
.o477-af-table tr.af-dubbel { background: #f8fafc; color: #94a3b8; }
.o477-af-table .af-melding { font-size: 11px; color: #b45309; margin-top: 2px; }
/* Saldoblok boven de regels: begin-/eindsaldo van de bank, altijd invulbaar. */
.o477-af-modal .af-saldi-blok {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px;
}
.o477-af-modal .af-saldi-blok .af-melding { font-size: 12px; color: #b45309; margin: 4px 0 0; }
.o477-af-modal .af-saldi-velden { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 8px; }
.o477-modal .af-saldi-velden label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; margin: 0; }
.o477-modal .af-saldi-velden input { width: 180px; margin: 0; padding: 6px 9px; font-size: 13px; }
.o477-af-modal .af-saldi-vast { font-size: 13px; color: #64748b; padding-bottom: 7px; }

/* Deelnemer-vinkjes in de potje-modals ("Verdeeld over"). Zonder deze regel pakt
   `.o477-modal input { width: 100% }` ook de checkbox, die dan de naam ernaast
   wegdrukt (bug 2-8: "Ti" i.p.v. "Tine"). */
.o477-pot-deelnemers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.o477-pot-deelnemers label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; white-space: nowrap;
  background: #f1f5f9; border-radius: 6px; padding: 6px 10px; cursor: pointer;
  margin: 0;
}
.o477-modal .o477-pot-deelnemers input[type="checkbox"] {
  width: auto; min-width: 0; flex: 0 0 auto; margin: 0;
}

/* --- HUISHOUDPOTJE MOBIEL (≤720px): tabel → kaarten, alle kolommen onder elkaar.
   Zelfde taal als de documenten-kaart (veldnaam klein boven de waarde via
   data-label), maar zonder inklappen: op een potje wil je alle regels zien. */
@media (max-width: 720px) {
  /* Alles links op één lijn: de documenten-actiebalk springt op mobiel 17px in,
     waardoor de knoprijen niet uitlijnden met de tabs en de kaarten eronder. */
  #o477-pot-root .o477-doc-actiebalk,
  #o477-deel-root .o477-doc-actiebalk { margin-left: 0; }

  .o477-pot-table thead { display: none; }
  .o477-pot-table,
  .o477-pot-table tbody,
  .o477-pot-table tr,
  .o477-pot-table td { display: block; width: 100%; box-sizing: border-box; }
  /* De inline min-width (voor de horizontale desktop-scroll) mag hier niet gelden. */
  .o477-pot-table { background: transparent; box-shadow: none; overflow: visible; min-width: 0 !important; }
  .o477-table-scroll:has(.o477-pot-table) { overflow: visible; }
  .o477-pot-table tr {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;   /* anker voor de ▾-knop */
  }
  .o477-pot-table tbody td { height: auto; border-bottom: 0; padding: 6px 0; text-align: left !important; }

  /* --- Inklapbaar: dicht toont alleen de kopregel (naam + hoofdbedrag) --- */
  .o477-pot-kaart-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: #fff; color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; cursor: pointer; padding: 0;
    transition: transform .15s ease;
  }
  .o477-pot-table tbody tr.is-open .o477-pot-kaart-toggle {
    transform: rotate(180deg);
    color: var(--primary, #01A4A4); border-color: var(--primary, #01A4A4); background: #ecfeff;
  }
  /* De totaalregel hoort altijd zichtbaar te blijven — die heeft geen kopcellen. */
  .o477-pot-table tbody tr:not(.is-open):not(.o477-pot-totaalrij) > td { display: none; }
  .o477-pot-table tbody tr:not(.is-open) > td[data-kop] { display: block; padding-right: 48px; }
  .o477-pot-table tbody tr:not(.is-open) > td[data-kop]::before { display: none; }
  .o477-pot-table tbody tr:not(.is-open) > td[data-kop="1"] { font-weight: 600; font-size: 15px; }
  .o477-pot-table tbody tr:not(.is-open) > td[data-kop="2"] { font-size: 13px; color: var(--text-muted, #64748b); padding-top: 0; }
  .o477-pot-table tbody tr.is-open { background: #f0fdfa; border-color: #99e6e6; }
  /* Totaalregel heeft geen kaart-gedrag nodig. */
  .o477-pot-table tbody tr.o477-pot-totaalrij .o477-pot-kaart-toggle { display: none; }
  /* Groeperen-keuze op eigen regel; naast de knoppen wordt hij te smal. */
  #o477-pot-root .o477-doc-actiebalk #pot-post-groepeer { display: block; width: 100%; margin-top: 8px; }
  /* Selecteren moet ook op een dichtgeklapte kaart kunnen: het vinkje staat
     links naast de kopregel, de ▾-knop houdt zijn plek rechtsboven. */
  .o477-pot-table tbody tr > td.o477-pot-selcel {
    display: block !important; width: auto; padding: 0 0 6px; text-align: left;
  }
  .o477-pot-table tbody tr > td.o477-pot-selcel::before { display: none; }
  .o477-pot-table tbody tr.is-gekozen { border-color: var(--primary, #01A4A4); }
  /* Groepkop blijft ook dicht-geklapte kaarten in beeld: hij is de scheiding. */
  .o477-pot-table tbody tr.o477-pot-groepkop {
    background: #f1f5f9; border-color: #cbd5e1; padding: 8px 12px; margin-bottom: 8px;
  }
  .o477-pot-table tbody tr.o477-pot-groepkop > td { display: block !important; padding: 0; }
  .o477-pot-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 3px;
  }
  /* Lege cellen (bv. de opvulling in de totaalregel) nemen geen ruimte in. */
  .o477-pot-table td:empty { display: none; }
  .o477-pot-table tr.o477-pot-totaalrij { display: flex; justify-content: space-between; align-items: center; }
  .o477-pot-table tr.o477-pot-totaalrij td { width: auto; padding: 0; text-align: left !important; }
  .o477-pot-table tr.o477-pot-totaalrij td[data-label]::before { display: none; }
  /* Pillen: krimpen naar hun inhoud in plaats van een halflege balk over de volle
     breedte. Ze staan links op dezelfde lijn als de andere waarden; alleen de
     klikbare status-pil houdt knopformaat zodat hij als knop leesbaar blijft. */
  .o477-pot-table .pill,
  .o477-pot-table .o477-dos-reg-btn {
    display: inline-flex; width: auto !important; max-width: 100% !important; box-sizing: border-box;
    justify-content: center; text-align: center;
    height: auto; min-height: 34px; min-width: 0; padding: 6px 14px;
    border-radius: 8px; font-size: 14px;
  }
  .o477-pot-table button.pill { min-height: 40px; min-width: 130px; font-weight: 600; }
  .o477-pot-table td.o477-doc-acties { border-left: 0; padding-left: 0; white-space: normal; }
  .o477-pot-table td.o477-doc-acties .o477-doc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: 20px; margin-right: 8px;
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
  }
}

/* ============ DOSSIERS — lijst in werkbord-stijl (27-7) ============
   Zelfde knop-taal als de taakregels op het werkbord: cyclaam Aantekeningen-knop
   (werkbord.css notes-btn) en teal register-knoppen (à la de Agenda-knop).
   Maten volgen de stramien-tokens hierboven. */
.o477-dos-aant-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--o477-pil-b); height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: #e8247c; color: #fff; border: 1px solid #e8247c;
}
.o477-dos-aant-btn:hover { background: #c41d68; border-color: #c41d68; color: #fff; text-decoration: none; }
.o477-dos-reg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--o477-pil-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--o477-pil-r);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  /* Leeg = neutraal grijs; zijn er bestanden of links, dan wordt de pil
     turquoise gevuld (is-gevuld hieronder) — zo zie je in één oogopslag wat er zit. */
  background: #fff; color: var(--text-muted, #94a3b8); border: 1px solid var(--border, #cbd5e1);
}
.o477-dos-reg-btn:hover { background: #f1f5f9; text-decoration: none; }
.o477-dos-reg-btn.is-gevuld { background: var(--primary, #01A4A4); color: #fff; }
.o477-dos-reg-btn.is-gevuld:hover { background: var(--primary-dark, #017a7a); }
.o477-dos-table td { vertical-align: middle; }

/* Status-pil is een knop (klik = actief/inactief wisselen) — oogt als de oude
   span-pil; zelfde vaste breedte als de Aantekeningen-knop (pillen even breed). */
.o477-doc-table button.pill.o477-doc-pil-knop { font: inherit; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; width: var(--o477-pil-b); }
/* Groep-pil is een select (direct wijzigen) — teal pil met eigen chevron. */
.o477-doc-groep-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 12px; font-weight: 600;
  color: #017a7a; background: rgba(1,164,164,.12);
  border: 0; border-radius: 4px; cursor: pointer;
  padding: 2px 20px 2px 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23017a7a' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 8px;
}
/* Kaart-toggle (▾) bestaat alleen op mobiel */
.o477-doc-kaart-toggle { display: none; }

/* ============ DOCUMENTEN — MOBIEL (≤720px): tabel → verticale kaarten ============
   Zelfde patroon als de mobiele werkbord-kaart: één kaart per document, elk veld
   op een eigen regel (veldnaam klein erboven via data-label), en alle knoppen
   verticaal op volle breedte met hun naam (uit het title-attribuut). */
@media (max-width: 720px) {
  /* Filterkaart: velden verticaal op volle breedte; actie-rij op de veldenlijn
     (17px = 1px kaartrand + 16px padding, zelfde als het werkbord). */
  .o477-doc-filtercard .o477-crm-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .o477-doc-filtercard .o477-crm-toolbar input,
  .o477-doc-filtercard .o477-crm-toolbar select { width: 100%; box-sizing: border-box; min-height: 40px; }
  .o477-doc-filtercard .o477-crm-toolbar input[type="search"] { font-size: 16px; } /* geen iOS-zoom */
  .o477-doc-actiebalk { margin-left: 17px; }

  .o477-doc-table thead { display: none; }
  .o477-doc-table, .o477-doc-table tbody, .o477-doc-table tr, .o477-doc-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .o477-doc-table { background: transparent; box-shadow: none; overflow: visible; }
  .o477-doc-table tr {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
  }
  .o477-doc-table tbody td { border-bottom: 0; padding: 6px 0; }

  /* --- Inklapbaar (zelfde patroon als de werkbord-kaart) --- */
  /* ▾-knop rechtsboven op de kaart; draait om als de kaart open is. */
  .o477-doc-kaart-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: #fff; color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; cursor: pointer; padding: 0;
    transition: transform 0.15s ease;
  }
  .o477-doc-table tr.is-open .o477-doc-kaart-toggle {
    transform: rotate(180deg);
    color: var(--primary, #01A4A4);
    border-color: var(--primary, #01A4A4);
    background: #ecfeff;
  }
  /* Dicht: alleen de kopregel (datum + titel), zonder veldnamen. */
  .o477-doc-table tbody tr:not(.is-open) > td { display: none; }
  .o477-doc-table tbody tr:not(.is-open) > td.o477-doc-datum,
  .o477-doc-table tbody tr:not(.is-open) > td[data-label="Omschrijving"] { display: block; }
  .o477-doc-table tbody tr:not(.is-open) > td::before { display: none; }
  .o477-doc-table tbody tr:not(.is-open) > td.o477-doc-datum {
    font-size: 12px; color: var(--text-muted, #94a3b8);
    padding: 2px 48px 0 0;
  }
  .o477-doc-table tbody tr:not(.is-open) > td[data-label="Omschrijving"] {
    font-weight: 600; font-size: 15px; line-height: 1.35;
    padding: 2px 48px 2px 0;
  }
  /* Open: lichtgroene kaart (zoals de uitgeklapte werkbord-taak). */
  .o477-doc-table tbody tr.is-open { background: #dcfce7; border-color: #bbf0d0; }
  .o477-doc-table tbody tr.is-open > td.o477-doc-datum { padding-right: 48px; }

  /* Groep- en status-pil: breed, tekst links uitgelijnd, direct aanpasbaar. */
  .o477-doc-table tbody tr.is-open .pill.o477-doc-pil-knop,
  .o477-doc-table tbody tr.is-open .o477-doc-groep-select {
    display: block; width: 100%; box-sizing: border-box;
    text-align: left; font-size: 14px;
    min-height: 40px; padding: 10px 12px; border-radius: 8px;
  }
  .o477-doc-table tbody tr.is-open .o477-doc-groep-select {
    background-color: rgba(1,164,164,.12);
    background-position: right 12px center; background-size: 10px;
    padding-right: 30px;
  }
  .o477-doc-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 3px;
  }
  /* Acties-kolom: geen desktop-scheidingslijn/1%-breedte op de kaart */
  .o477-doc-table td.o477-doc-acties { border-left: 0; padding-left: 0; width: 100%; white-space: normal; }
  /* Bestandsnaam op een eigen regel, knoppen eronder */
  .o477-doc-bestand { display: block; }
  .o477-doc-bestandnaam { display: block; max-width: none; margin-bottom: 6px; }
  .o477-doc-bestandacties { display: flex; flex-direction: column; gap: 7px; }
  /* Alle doc-knoppen (👁/⬇ bij het bestand + ⏸/✏️/🗑 bij acties): volle breedte,
     touch-maat, met label uit het title-attribuut achter het icoon. */
  .o477-doc-table .o477-doc-ico {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    font-size: 16px; margin: 0 0 7px;
  }
  .o477-doc-table .o477-doc-acties .o477-doc-ico:last-child { margin-bottom: 0; }
  .o477-doc-bestandacties .o477-doc-ico { margin: 0; } /* flex-gap regelt de afstand al */
  .o477-doc-table .o477-doc-ico::after { content: attr(title); font-size: 14px; color: var(--text); }
}

/* ============ DOSSIERS — MOBIEL (≤720px): tabel → verticale kaarten ============
   De dossiers-tabel deelt .o477-doc-table, maar heeft geen .o477-doc-datum en
   geen kolom "Omschrijving" — zonder deze regels bleef de dichte kaart leeg.
   Kopregel dicht = de Dossiernaam; ▾-toggle en open-kaart komen uit het
   documenten-blok hierboven. NA dat blok houden (gelijke specificiteit). */
@media (max-width: 720px) {
  /* Kaartcellen groeien met hun inhoud: de vaste desktop-rijhoogte
     (--o477-rij-h op .o477-doc-table tbody td) liet label + 40px-knop
     overlappen met de volgende cel. Geldt bewust ook voor Documenten. */
  .o477-doc-table tbody td { height: auto; }
  .o477-dos-table tbody tr:not(.is-open) > td[data-label="Dossiernaam"] {
    display: block;
    font-weight: 600; font-size: 15px; line-height: 1.35;
    padding: 2px 48px 2px 0;
  }
  /* Groepskoppen (Groeperen-menu) zijn geen kaart: compact tussenkopje.
     !important wint van de :not(.is-open)-verbergregel van het doc-blok. */
  .o477-dos-table tbody tr.o477-dos-groepkop { padding: 0; border: 0; background: transparent; }
  .o477-dos-table tbody tr.o477-dos-groepkop > td { display: block !important; border-radius: 8px; }
  /* Aantekeningen/Bestanden/Links-knoppen: volle breedte op de open kaart. */
  .o477-dos-table tbody tr.is-open .o477-dos-aant-btn,
  .o477-dos-table tbody tr.is-open .o477-dos-reg-btn {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; box-sizing: border-box; min-height: 40px;
  }
}
.o477-doc-view-modal { max-width: 96vw; width: 1280px; }
.o477-doc-view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.o477-doc-view-titel { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-doc-view-acties { display: flex; gap: 8px; flex: 0 0 auto; }
.o477-doc-view-frame { width: 100%; height: 85vh; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; }
.o477-doc-view-img { max-width: 100%; max-height: 85vh; display: block; margin: 0 auto; border-radius: 6px; }
.o477-doc-view-geen { text-align: center; padding: 48px 20px; color: var(--text); }
.o477-doc-view-geen a { display: inline-block; margin-top: 18px; }
/* Bladerboek: boek-spread met twee pagina's naast elkaar en ◀ ▶ bladeren */
.o477-doc-boek { display: flex; align-items: center; justify-content: center; gap: 14px; }
.o477-doc-boek-pags { display: flex; justify-content: center; min-height: 240px; flex: 1 1 auto; min-width: 0; }
.o477-doc-boek-blad { display: flex; justify-content: center; }
.o477-doc-boek-blad canvas { display: block; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
/* Middenvouw: rechterpagina krijgt een subtiele schaduw langs de rug */
.o477-doc-boek-blad.dubbel canvas + canvas { border-left: 1px solid #e2e8f0; box-shadow: 0 12px 34px rgba(0,0,0,.22), inset 14px 0 18px -14px rgba(0,0,0,.30); }
.o477-doc-boek-blad.dubbel canvas:first-child { box-shadow: 0 12px 34px rgba(0,0,0,.22), inset -14px 0 18px -14px rgba(0,0,0,.18); }
.o477-doc-boek-knop { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border, #cbd5e1); background: #fff; font-size: 17px; cursor: pointer; flex: 0 0 auto; color: var(--text, #2c3e50); }
.o477-doc-boek-knop:hover:not(:disabled) { background: #eef2f7; }
.o477-doc-boek-knop:disabled { opacity: .3; cursor: default; }
.o477-doc-boek-voet { text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary, #64748b); min-height: 16px; }
.o477-doc-boek-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 240px; padding: 0 30px; text-align: center; color: var(--text-secondary, #64748b); font-size: 14px; }
@media (max-width: 720px) { .o477-doc-boek { gap: 8px; } .o477-doc-boek-knop { width: 36px; height: 36px; } }

.o477-doc-huidig { font-size: 13px; margin-top: 6px; color: var(--text); }
.o477-doc-huidig a { color: var(--primary); text-decoration: none; }
.o477-doc-error { color: #dc2626; font-size: 13px; margin-top: 10px; }

/* Buttons */
.o477-btn {
    padding: 8px 14px; border: none; border-radius: 6px; font-size: 14px;
    cursor: pointer; transition: all var(--transition); font-weight: 500;
}
.o477-btn-primary { background: var(--primary); color: white; }
.o477-btn-primary:hover { background: var(--primary-dark); }
.o477-btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.o477-btn-secondary:hover { background: #f1f5f9; }
.o477-btn-danger { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.o477-btn-danger:hover { background: #fecaca; }

/* Planregel-actieknoppen (Planregels-tab): compacte, goed zichtbare vierkante icoon-knoppen */
.o477-pl-edit, .o477-pl-del-row {
    padding: 0; width: 34px; height: 30px; font-size: 17px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.o477-pl-del-row { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; }
.o477-pl-del-row:hover { background: #fecaca; border-color: #dc2626; }

/* Status pills */
.o477-status-actief { background: #d1fae5; color: #065f46; }
.o477-status-gereed { background: #dbeafe; color: #1e40af; }
.o477-status-on_hold { background: #fef3c7; color: #92400e; }
.o477-status-pill { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; display: inline-block; }

.o477-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* Klanten-pagina lijst-view — compacte tabel (v2.200.0) */
.o477-klanten-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.o477-klanten-head, .o477-klant-row {
    display: grid;
    grid-template-columns: 22px 16px 64px minmax(72px, auto) minmax(120px, 1.5fr) minmax(0, 1.6fr) 82px 58px 34px;
    align-items: center; gap: 12px; padding: 0 14px;
}
.o477-klanten-head {
    height: 34px; background: #f1f5f5; border-bottom: 1px solid var(--border);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700;
    position: sticky; top: 0; z-index: 2;
}
.o477-klanten-head .r { text-align: right; }
.o477-klanten-head .c { text-align: center; }
/* Klikbare sort-koppen op de Klanten-grid (div-based; zelfde ⇅/▲/▼ look als de tabellen) */
.o477-klanten-head .o477-kl-sort { cursor: pointer; user-select: none; }
.o477-klanten-head .o477-kl-sort:hover { color: var(--text); }
.o477-klanten-head .o477-sort-ind { display: inline-block; margin-left: 3px; font-size: 11px; color: var(--text-muted); opacity: 0.6; }
.o477-klanten-head .o477-kl-sort:hover .o477-sort-ind { opacity: 0.9; }
.o477-klanten-head .o477-sort-ind.active { opacity: 1; color: var(--primary); font-weight: 700; }
.o477-klant-row .o477-drag-off { opacity: 0.25; cursor: default; }
.o477-klant-row {
    height: 36px; background: var(--surface); border-bottom: 1px solid var(--border-light);
    transition: background var(--transition);
}
.o477-klant-row:last-child { border-bottom: 0; }
.o477-klant-row:hover { background: #f1f7f7; }
.o477-klant-row.o477-dragging { opacity: 0.4; }
.o477-klant-row.o477-drop-marker { box-shadow: inset 0 2px 0 var(--primary); }
.o477-klanten-rows .o477-drag { cursor: grab; color: #cbd5e1; user-select: none; font-size: 13px; }
.o477-klanten-rows .o477-drag:active { cursor: grabbing; }
.o477-klant-color { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); }
.o477-klant-nr { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-klant-kort { font-weight: 700; color: var(--primary-dark); font-size: 13px; white-space: nowrap; }
.o477-klant-naam { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-klant-extra { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-klant-uurloon { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); }
.o477-klant-actief { display: flex; justify-content: center; align-items: center; cursor: pointer; }
.o477-klant-actief input { margin: 0; cursor: pointer; accent-color: var(--primary); }
.o477-klant-edit { display: flex; justify-content: center; }
.o477-klant-edit button { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 6px; width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.o477-klant-edit button:hover { border-color: var(--primary); color: var(--primary); }

.o477-view-toggle { display: inline-flex; gap: 4px; }
.o477-view-toggle button { padding: 6px 12px; font-size: 13px; }
.o477-view-toggle button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Modal-tabs */
.o477-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.o477-tab { padding: 8px 14px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.o477-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 600; }
.o477-tab-content { padding-top: 4px; }

/* Status-rijen op /instellingen
   Grid: drag | colorpicker | hex | label | slug | count | tag | actief | delete
*/
.o477-stat-row {
    display: grid;
    grid-template-columns: 22px 30px 78px minmax(140px, 1fr) 130px 56px 90px 80px 32px;
    gap: 10px; align-items: center;
    padding: 10px 14px; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.o477-stat-row:hover {
    border-color: #c7d2fe;
    box-shadow: 0 2px 6px rgba(99,102,241,0.08);
}
.o477-stat-row input[type="text"] { margin-bottom: 0; }
.o477-stat-row input[type="color"] {
    padding: 2px; height: 30px; width: 30px; margin-bottom: 0;
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.o477-stat-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-bottom: 0; color: var(--text-muted); white-space: nowrap; }
.o477-stat-row .o477-btn { padding: 4px 8px; font-size: 12px; }
.o477-stat-row .o477-btn-danger {
    width: 30px; height: 30px; padding: 0;
    border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #fecaca; color: #dc2626;
    font-size: 16px; font-weight: bold; line-height: 1;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.o477-stat-row .o477-btn-danger:hover {
    background: #fee2e2; border-color: #dc2626;
}
.o477-drag {
    color: #9ca3af; cursor: grab; user-select: none;
    display: flex; align-items: center; justify-content: center; height: 30px;
    font-size: 14px;
}
.o477-drag:active { cursor: grabbing; }
.o477-stat-row.o477-dragging { opacity: 0.4; }
.o477-stat-row.o477-drop-marker { border-top: 3px solid var(--primary); }
.o477-stat-slug {
    background:#f1f5f9; padding:4px 8px; border-radius:4px;
    font-size:11px; color:#475569; font-family:'JetBrains Mono', ui-monospace, monospace;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.o477-stat-count {
    text-align:center; justify-self:center;
}
.o477-stat-tag {
    font-size:9px; padding:3px 8px; border-radius:10px;
    background:#e0e7ff; color:#3730a3;
    text-transform:uppercase; letter-spacing:0.5px; text-align:center;
    font-weight:600;
}
.o477-stat-tag.custom { background:#fef3c7; color:#92400e; }

/* Mobile: stat-rows wrappen in 2 rijen op smal scherm */
@media (max-width: 900px) {
    .o477-stat-row {
        grid-template-columns: 22px 30px 1fr 50px 30px;
        grid-template-areas:
            "drag color label count del"
            "hex  hex   slug  tag   actief";
        row-gap: 6px;
    }
    .o477-stat-row > :nth-child(1) { grid-area: drag; }
    .o477-stat-row > :nth-child(2) { grid-area: color; }
    .o477-stat-row > :nth-child(3) { grid-area: hex; }
    .o477-stat-row > :nth-child(4) { grid-area: label; }
    .o477-stat-row > :nth-child(5) { grid-area: slug; }
    .o477-stat-row > :nth-child(6) { grid-area: count; }
    .o477-stat-row > :nth-child(7) { grid-area: tag; }
    .o477-stat-row > :nth-child(8) { grid-area: actief; }
    .o477-stat-row > :nth-child(9) { grid-area: del; }
}

/* Gear-icoon in header */
/* Instellingen: gevuld beige rondje (26-8) — zelfde tint als de tabelkoppen
   uit het stramien, zodat de knoppenrij rechtsboven één familie is. */
.o477-gear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fdf8eb; border: 1px solid #ecd9a4;
    color: #8a6d1f; font-size: 18px;
    text-decoration: none; transition: all var(--transition);
    margin-right: 6px;
}
.o477-gear:hover { background: #f6ecd0; color: #6b5313; transform: rotate(45deg); }

/* Categorie-rijen in modal */
.o477-cat-row {
    display: grid;
    grid-template-columns: 24px 32px 80px 1fr 110px 130px 32px;
    gap: 8px; align-items: center;
    padding: 6px 8px; margin-bottom: 4px;
    background: #f8fafc; border: 1px solid var(--border); border-radius: 6px;
}
.o477-cat-row input[type="text"] { margin-bottom: 0; }
.o477-cat-row input[type="color"] { padding: 2px; height: 32px; margin-bottom: 0; }
.o477-cat-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-bottom: 0; }
.o477-cat-row .o477-btn { padding: 4px 8px; font-size: 12px; }
.o477-cat-row.o477-dragging { opacity: 0.4; }
.o477-cat-row.o477-drop-marker { border-top: 3px solid var(--primary); }

@media (max-width: 800px) {
    .o477-klanten-head, .o477-klant-row { grid-template-columns: 22px 16px minmax(64px, auto) 1fr 44px 34px; }
    .o477-klant-row .o477-klant-extra,
    .o477-klant-row .o477-klant-uurloon,
    .o477-klant-row .o477-klant-nr,
    .o477-klanten-head .o477-kl-h-extra,
    .o477-klanten-head .o477-kl-h-uur,
    .o477-klanten-head .o477-kl-h-nr { display: none; }
}

/* === Categoriesets-beheer (page-categorieen) === */
.o477-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.o477-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.o477-muted { color: var(--text-muted); font-size: 12px; }
.o477-sets-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.o477-set-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 12px 14px; }
.o477-set-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.o477-set-naam { font-weight: 700; font-size: 15px; color: var(--primary-dark); }
.o477-set-meta { font-size: 12px; color: var(--text-muted); }
.o477-set-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.o477-set-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.o477-cat-pill { display: inline-block; padding: 3px 9px; border-radius: 11px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5; }
.o477-set-editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.o477-setcat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.o477-setcat-row input[type="color"] { width: 38px; height: 30px; padding: 2px; flex: 0 0 auto; }
.o477-setcat-row input[type="text"] { flex: 1; }
.o477-setcat-row .o477-btn-danger { flex: 0 0 auto; }
.o477-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.o477-cat-klant-card { text-decoration: none; color: inherit; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; transition: transform .12s, box-shadow .12s; }
.o477-cat-klant-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.o477-cat-klant-naam { font-weight: 700; font-size: 15px; color: var(--primary-dark); margin-bottom: 6px; }
.o477-cat-klant-set { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.o477-cat-klant-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.o477-cat-klant-foot { margin-top: 10px; font-size: 11px; color: var(--text-muted); }

/* Mini-chart for uren-per-maand */
.o477-bar-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 200px; padding: 12px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); }
.o477-bar { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 4px 4px 0 0; position: relative; cursor: pointer; transition: opacity var(--transition); }
.o477-bar:hover { opacity: 0.85; }
.o477-bar-label { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text-muted); }
.o477-bar-value { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--text); }


/* === Projecten-pagina inklapbare filters (legacy — voor andere pagina's nog gebruikt) === */
details.o477-proj-filters { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin: 12px 0 16px; box-shadow: var(--shadow-sm); }
details.o477-proj-filters > summary {
    list-style: none; cursor: pointer; padding: 10px 14px; user-select: none;
    display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text);
}
details.o477-proj-filters > summary::-webkit-details-marker { display: none; }
details.o477-proj-filters > summary .caret { font-size: 10px; color: var(--text-muted); transition: transform 150ms; display: inline-block; }
details.o477-proj-filters[open] > summary .caret { transform: rotate(90deg); }
details.o477-proj-filters > summary .o477-proj-filters-summary { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 400; }
details.o477-proj-filters > .o477-crm-toolbar { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 12px 14px; background: transparent; }

/* === Filter & Zoeken container (uniform over alle modules) === */
/* Zachte turquoise achtergrond + klikbare header om in/uit te klappen */
.o477-proj-filters-static {
    background: rgba(1, 164, 164, 0.05);
    border: 1px solid rgba(1, 164, 164, 0.18);
    border-radius: 8px;
    margin: 12px 0 16px;
    box-shadow: var(--shadow-sm);
    /* Stond op overflow:hidden — dat knipt elke uitklappende dropdown ín de filterbalk
       af (medewerker-multiselect, project-combobox): die lijsten zijn position:absolute
       en vallen buiten de balk. Inklappen gebeurt met display:none (zie .is-collapsed
       hieronder), dus hidden was alleen nodig om de hoeken af te ronden — dat doen de
       twee regels hieronder nu. Gelijk gehouden met het WP-thema (v2.583.0). */
    overflow: visible;
}
.o477-proj-filters-static .o477-proj-filters-header {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-dark, #01737E);
    border-bottom: 1px solid rgba(1, 164, 164, 0.18);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(1, 164, 164, 0.08);
    transition: background 150ms;
}
.o477-proj-filters-static .o477-proj-filters-header:hover {
    background: rgba(1, 164, 164, 0.12);
}
.o477-proj-filters-static .o477-proj-filters-header .caret {
    display: inline-block;
    font-size: 10px;
    color: var(--primary, #01A4A4);
    transition: transform 150ms;
}
.o477-proj-filters-static.is-collapsed .o477-proj-filters-header .caret {
    transform: rotate(-90deg);
}
.o477-proj-filters-static.is-collapsed .o477-proj-filters-header {
    border-bottom-color: transparent;
}
.o477-proj-filters-static.is-collapsed > .o477-crm-toolbar,
.o477-proj-filters-static.is-collapsed > .o477-proj-filters-summary {
    display: none;
}
.o477-proj-filters-static > .o477-crm-toolbar {
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 12px 14px; background: transparent;
}
.o477-proj-filters-static .o477-proj-filters-summary {
    display: block; padding: 0 14px 10px; font-size: 12px; color: var(--text-muted);
}
.o477-proj-filters-static .o477-proj-filters-summary:empty { display: none; }
/* Hoeken van de bovenste/onderste rij afronden. Hoort ná de border-radius:0 hierboven
   (gelijke specificiteit → laatste wint), anders steekt een rij met eigen achtergrond
   — zoals de tweede filterrij op Planregels — buiten de ronde hoek van de balk. */
.o477-proj-filters-static > *:first-child {
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.o477-proj-filters-static > *:last-child {
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}

/* === Bulk inklap/uitklap-knoppen voor hoofd- en subgroepen === */
.o477-proj-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.o477-mini-btn {
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
    padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
    transition: all 150ms;
}
.o477-mini-btn:hover { background: var(--bg-alt); color: var(--text); border-color: var(--primary); }
.o477-actions-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* === Samenvatting-cards in inklapbare details-groep === */
.o477-proj-summary { margin: 0 0 14px; }
details.o477-proj-cards-details { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-sm); }
details.o477-proj-cards-details > summary {
    list-style: none; cursor: pointer; padding: 10px 14px; user-select: none;
    display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text);
}
details.o477-proj-cards-details > summary::-webkit-details-marker { display: none; }
details.o477-proj-cards-details > summary .caret { font-size: 10px; color: var(--text-muted); transition: transform 150ms; display: inline-block; }
details.o477-proj-cards-details[open] > summary .caret { transform: rotate(90deg); }
details.o477-proj-cards-details > summary .o477-proj-cards-mini {
    margin-left: auto; display: inline-flex; gap: 18px; font-size: 12px; color: var(--text-muted); font-weight: 400;
    align-items: baseline; flex-wrap: wrap;
}
details.o477-proj-cards-details > summary .o477-proj-cards-mini b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }

/* 5-koloms grid binnen details */
.o477-proj-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) { .o477-proj-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .o477-proj-cards { grid-template-columns: repeat(2, 1fr); } }
.o477-proj-cards .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.o477-proj-cards .stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-proj-cards .stat-card .value { font-size: 22px; font-weight: 700; color: var(--primary-dark); margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-proj-cards .stat-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-proj-cards .stat-card.green  { background: #dcfce7; border-color: #bbf7d0; }
.o477-proj-cards .stat-card.green  .value { color: #166534; }
.o477-proj-cards .stat-card.red    { background: #fee2e2; border-color: #fecaca; }
.o477-proj-cards .stat-card.red    .value { color: #991b1b; }
.o477-proj-cards .stat-card.orange { background: #fef3c7; border-color: #fde68a; }
.o477-proj-cards .stat-card.orange .value { color: #92400e; }

/* === Project-detail: KPI-strook (uren totaal/doorgeboekt/openstaand), boven de tabs === */
.o477-pd-kpi { margin: 0 0 16px; }
.o477-pd-kpi-loading { color: var(--text-muted); font-size: 13px; padding: 2px 0 6px; }
.o477-pd-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .o477-pd-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .o477-pd-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.o477-pd-kpi .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.o477-pd-kpi .stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-pd-kpi .stat-card .value { font-size: 22px; font-weight: 700; color: var(--primary-dark); margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-pd-kpi .stat-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-pd-kpi .stat-card.green  { background: #dcfce7; border-color: #bbf7d0; }
.o477-pd-kpi .stat-card.green  .value { color: #166534; }
.o477-pd-kpi .stat-card.orange { background: #fef3c7; border-color: #fde68a; }
.o477-pd-kpi .stat-card.orange .value { color: #92400e; }
/* KPI-strook inklapbaar via toggle-balk — desktop én mobiel, standaard dicht (22-8) */
.o477-pd-kpi-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  padding: 11px 14px; font-family: var(--font); font-size: 13.5px; font-weight: 700;
  color: var(--text-secondary, #64748b); cursor: pointer; margin-bottom: 10px;
}
.o477-pd-kpi-toggle:hover { border-color: #01A4A4; color: #018585; }
.o477-pd-kpi-toggle .o477-pd-kpi-sub { font-weight: 600; color: var(--text-muted, #94a3b8); font-size: 12.5px; }
.o477-pd-kpi-toggle .o477-pd-kpi-caret { margin-left: auto; color: var(--text-muted, #94a3b8); }
.o477-pd-kpi.is-dicht .o477-pd-kpi-grid { display: none; }


/* === Projecten: 5 hoofdgroepen (Offertes / in Uitvoering / te factureren / gefactureerd / Vervallen) === */
details.o477-proj-hoofdgroep { background: #ffffff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
details.o477-proj-hoofdgroep > summary {
    list-style: none; cursor: pointer; padding: 14px 14px; background: #f7f5f2; color: var(--text); user-select: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; gap: 14px;
}
details.o477-proj-hoofdgroep > summary::-webkit-details-marker { display: none; }
details.o477-proj-hoofdgroep > summary::before { content: '▶'; font-size: 11px; color: var(--text-muted); transition: transform 150ms; }
details.o477-proj-hoofdgroep[open] > summary::before { transform: rotate(90deg); }
details.o477-proj-hoofdgroep > summary .hoofd-name { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--primary-dark); }
details.o477-proj-hoofdgroep > summary .count { font-size: 12px; color: var(--text-muted); font-weight: 500; white-space: nowrap; margin-left: auto; }
details.o477-proj-hoofdgroep > summary .metric { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
details.o477-proj-hoofdgroep > summary .metric .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 500; }
details.o477-proj-hoofdgroep > summary .metric b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
/* Brutowinst-totaal in hoofdgroep-banner: vaste kolom rechts.
   Label LINKS, getal RECHTS uitgelijnd → gevulde kolom waarbij alle bedragen
   over alle hoofdgroepen mooi onder elkaar uitlijnen op het rechter-uiteinde. */
details.o477-proj-hoofdgroep > summary .hoofd-brutowinst {
    display: inline-flex; align-items: baseline; justify-content: space-between;
    width: 220px; flex: none; white-space: nowrap;
    padding-left: 14px; border-left: 1px solid rgba(0,0,0,0.08);
}
details.o477-proj-hoofdgroep > summary .hoofd-brutowinst-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 600;
}
details.o477-proj-hoofdgroep > summary .hoofd-brutowinst-value {
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
    text-align: right;
}
details.o477-proj-hoofdgroep > .o477-hoofd-content { padding: 14px 14px 4px; background: #f7f5f2; }

/* === Status-groep binnen hoofdgroep === */
details.o477-proj-group { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-sm); transition: opacity 150ms; }
details.o477-proj-group.o477-dragging { opacity: 0.4; }
details.o477-proj-group.o477-drop-above { border-top: 3px solid var(--primary); margin-top: 0; }
details.o477-proj-group.o477-drop-below { border-bottom: 3px solid var(--primary); margin-bottom: 15px; }
details.o477-proj-group > summary {
    list-style: none; cursor: pointer; padding: 10px 14px; background: #f7f5f2; user-select: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 12px;
}
/* Brutowinst totaal in subheader: fixed-width box met label links, bedrag rechts → uitgelijnd over alle groepen
   Label in grijs (zoals hoofdgroep-banner), bedrag krijgt nog steeds totaal-kleur (groen/rood) */
details.o477-proj-group > summary .brutowinst-total {
    margin-left: auto;
    font-size: 13px; font-weight: 500;
    display: inline-flex; justify-content: space-between; align-items: baseline;
    width: 220px; white-space: nowrap;
    padding-left: 16px;  /* ~2 letter-posities naar rechts opschuiven */
}
details.o477-proj-group > summary .brutowinst-total .brutowinst-label {
    color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
details.o477-proj-group > summary .brutowinst-total b { font-weight: 700; font-variant-numeric: tabular-nums; }
details.o477-proj-group > summary .move-status { margin-left: 12px; }
details.o477-proj-group > summary .move-status select {
    font-size: 11px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); width: 100%;
    cursor: pointer;
}
details.o477-proj-group > summary .move-status select:hover { border-color: var(--primary); }
details.o477-proj-group > summary .drag-handle {
    cursor: grab; color: #cbd5e1; font-size: 14px; line-height: 1;
    letter-spacing: -2px; user-select: none;
    transition: color 150ms;
}
details.o477-proj-group > summary .drag-handle:hover { color: var(--primary); }
details.o477-proj-group > summary .drag-handle:active { cursor: grabbing; }
details.o477-proj-group > summary::-webkit-details-marker { display: none; }
details.o477-proj-group > summary::before { display: none; }
details.o477-proj-group > summary .drag-handle { display: inline-flex; align-items: center; gap: 4px; }
details.o477-proj-group > summary .drag-handle .caret { font-size: 10px; color: var(--text-muted); transition: transform 150ms; display: inline-block; }
details.o477-proj-group[open] > summary .drag-handle .caret { transform: rotate(90deg); }
details.o477-proj-group > summary .drag-handle .dots { color: #cbd5e1; font-size: 13px; line-height: 1; letter-spacing: -2px; cursor: grab; }
details.o477-proj-group > summary .drag-handle .dots:hover { color: var(--primary); }
details.o477-proj-group > summary .status-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.o477-proj-group > summary .status-name .count { font-size: 12px; color: var(--text-muted); font-weight: 400; }
details.o477-proj-group > summary .metric { font-size: 13px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.o477-proj-group > summary .num { text-align: right; }
/* Sinds 18-8 (één-tabel-stramien, /planregels-look) hangt de opmaak aan de
   marker-class .o477-proj-table zelf — de <details>-kaarten per groep bestaan
   niet meer; groepen zijn colspan-rijen ín de tabel. De uren-tabel in het
   detail deelt deze class niet en blijft dus buiten schot. */
.o477-table.o477-proj-table { margin: 0; border: 0; box-shadow: none; border-radius: 0; width: 100%; table-layout: fixed; }
.o477-table.o477-proj-table thead { background: var(--bg, #f7f5f2); } /* 18-8: pagina-achtergrond i.p.v. stramien-beige */
/* Geen tekst-wrap in tabel-cellen, alleen Naam mag overflowen met ellipsis */
.o477-table.o477-proj-table th,
.o477-table.o477-proj-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-table.o477-proj-table th:nth-child(2),
.o477-table.o477-proj-table td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kolom-breedtes komen sinds de stramien-uitrol uit de gedeelde <colgroup>
   (projecten.js PROJ_COL_W, incl. gesleepte breedtes — stramien 6c). CSS-widths
   per nth-child zouden bij table-layout:fixed de colgroup overrulen en het
   kolom-slepen breken; hier alleen nog uitlijning/padding per kolom. */
.o477-table.o477-proj-table th:nth-child(1),
.o477-table.o477-proj-table td:nth-child(1)  { overflow: visible; }   /* Nummer */
.o477-table.o477-proj-table .o477-col-p    { padding-left: 4px; padding-right: 4px; text-align: center; }  /* P planregels */
.o477-table.o477-proj-table .o477-col-klok { padding-left: 4px; padding-right: 4px; }  /* ⏱ */
.o477-table.o477-proj-table th:last-child,
.o477-table.o477-proj-table td:last-child  { padding-right: 12px; }  /* Acties */
/* (9-9) Bovenstaande drie stonden op nth-child(4/6/14); die indexen klopten al
   niet meer sinds de kolom Projectleider (26-8) en schuiven opnieuw door de
   kolom Label, dus nu op class/last-child. */
/* ✕ wissen-knopje in een veldlabel (relaties, 9-9): klein, grijs, rood bij hover. */
button.o477-wis-veld { font: inherit; font-size: 11px; font-weight: 500; line-height: 1; padding: 2px 7px; margin-left: 6px;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #64748b; cursor: pointer; vertical-align: middle; }
button.o477-wis-veld:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
/* Label-pil per project (9-9) en per conceptfactuur (10-9) — zelfde vorm als .wb-labelknop op het werkbord. */
.o477-table.o477-proj-table .wb-labelknop, .o477-table.o477-cf-table .wb-labelknop { font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-table.o477-proj-table .wb-labelknop.leeg, .o477-table.o477-cf-table .wb-labelknop.leeg { background: transparent; color: #cbd5e1; border-color: #e2e8f0;
  font-weight: 700; padding: 3px 9px; min-width: 26px; }
.o477-table.o477-proj-table tbody tr:hover .wb-labelknop.leeg, .o477-table.o477-cf-table tbody tr:hover .wb-labelknop.leeg { color: var(--primary, #01A4A4); border-color: var(--primary, #01A4A4); }
/* Oogje in de kolom Bestanden op /conceptfacturen (10-9): cyclaam, zoals de bekijk-knop bij projectbestanden. */
.o477-table.o477-cf-table .wb-labelknop.o477-cf-oog { background: rgba(232,36,124,.1); color: var(--accent-warm, #e8247c); border-color: rgba(232,36,124,.35); }
.o477-table.o477-cf-table .wb-labelknop.o477-cf-oog:hover { background: rgba(232,36,124,.2); }
/* Slepen-en-neerzetten van bijlagen (10-9): rij in de lijst en blok op de detailpagina lichten cyclaam op. */
.o477-table.o477-cf-table tbody tr.is-drop td { background: rgba(232,36,124,.08) !important; box-shadow: inset 0 2px 0 var(--accent-warm, #e8247c), inset 0 -2px 0 var(--accent-warm, #e8247c); }
.cfd-dropzone { border: 2px dashed transparent; border-radius: 10px; padding: 8px 10px; margin: 0 -10px; transition: border-color .12s, background .12s; }
.cfd-dropzone.is-drop { border-color: var(--accent-warm, #e8247c); background: rgba(232,36,124,.06); }
.o477-mail-labelpop.o477-proj-labelpop { position: absolute; z-index: 1300; background: #fff; border: 1px solid #cbd5e1;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 10px; display: flex; gap: 6px; }
.o477-mail-labelpop.o477-proj-labelpop input { width: 170px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; }
.o477-mail-labelpop.o477-proj-labelpop button { border: 0; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.o477-mail-labelpop.o477-proj-labelpop .ok { background: var(--primary, #01A4A4); color: #fff; }
.o477-mail-labelpop.o477-proj-labelpop .weg { background: #fee2e2; color: #b91c1c; }
/* Groepskop-rijen (hoofdgroep/status/jaar als colspan-rij) — uitlijning per
   nth-child hierboven mag de volle-breedte-cel niet centreren/afknijpen */
.o477-table.o477-proj-table tr.o477-proj-hoofd-row > td,
.o477-table.o477-proj-table tr.o477-proj-status-row > td { text-align: left; overflow: visible; } /* 9-9: visible i.p.v. hidden, anders werkt het sticky-left cijferblok (.o477-proj-grp-inner) niet */
/* Drop-indicatoren + sleep-feedback voor het herordenen van status-rijen */
.o477-table.o477-proj-table tr.o477-proj-status-row.o477-dragging td { opacity: 0.4; }
.o477-table.o477-proj-table tr.o477-proj-status-row.o477-drop-above td { border-top: 3px solid var(--primary); }
.o477-table.o477-proj-table tr.o477-proj-status-row.o477-drop-below td { border-bottom: 3px solid var(--primary); }
.o477-table.o477-proj-table tr.o477-proj-status-row .drag-handle { cursor: grab; color: #cbd5e1; }
.o477-table.o477-proj-table tr.o477-proj-status-row .drag-handle:hover { color: var(--primary); }
.o477-table.o477-proj-table tr.o477-proj-status-row .drag-handle:active { cursor: grabbing; }

/* === Jaargroep-tabellen uitlijnen ===
   In jaar-modus krijgt elke jaargroep een eigen <table> in .o477-proj-jaargroep — die
   viel buiten de status-selector hierboven, waardoor elk jaar zijn kolommen los sizede.
   Dezelfde reset + table-layout:fixed + de gedeelde <colgroup> (projColgroup in
   projecten.js) laten de kolommen tussen alle jaren exact uitlijnen. */
.o477-proj-jaargroep .o477-table { margin: 0; border: 0; box-shadow: none; border-radius: 0; width: 100%; table-layout: fixed; }
.o477-proj-jaargroep .o477-table thead { background: #f8fafc; }
.o477-proj-jaargroep .o477-table th,
.o477-proj-jaargroep .o477-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-proj-jaargroep .o477-table td:nth-child(1) { overflow: visible; }   /* Nummer-link niet afknippen */

/* === iPad/tablet: projecten-tabel horizontaal scrollen i.p.v. platdrukken ===
   De 14 kolommen (~1380px) passen niet op tabletbreedte. De tabel zit sinds
   v2.204 in <div class="o477-table-scroll"> en houdt via min-width zijn breedte,
   zodat de Naam-kolom niet meer dichtklapt maar de tabel netjes scrollt.
   Marker-class .o477-proj-table → raakt NIET de uren-tabel (die deelt
   details.o477-proj-group maar heeft eigen kolombreedtes). */
.o477-table.o477-proj-table { min-width: 1520px; overflow: visible; }  /* v2.508.0: bredere geld-kolommen */

/* === Totaalregel per groep (v2.508.0; sinds 18-8 als tbody-rij tr.o477-proj-totals) ===
   Som van Uren + geld-kolommen onder elke status-/jaargroep. Eigen achtergrond
   zodat de sticky kolommen 1+2 ("Totaal" + aantal) niet doorschijnen bij scrollen. */
.o477-proj-table tfoot td,
.o477-proj-table tr.o477-proj-totals td {
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  background: #eef2f7; border-top: 2px solid var(--border);
}
.o477-table.o477-proj-table tr.o477-proj-totals td:nth-child(1),
.o477-table.o477-proj-table tr.o477-proj-totals td:nth-child(2) { background: #eef2f7; }
/* Nummer (kolom 1) + Naam (kolom 2) vastgepind links → Naam blijft ALTIJD in beeld
   tijdens horizontaal scrollen. Alleen in status-modus, waar de kolombreedtes
   vastliggen (Nummer = 110px, dus Naam pint op left:110px). */
.o477-table.o477-proj-table th:nth-child(1),
.o477-table.o477-proj-table td:nth-child(1),
.o477-table.o477-proj-table th:nth-child(2),
.o477-table.o477-proj-table td:nth-child(2) {
  position: sticky; background: var(--surface); z-index: 1;
}
.o477-table.o477-proj-table th:nth-child(1),
.o477-table.o477-proj-table td:nth-child(1) { left: 0; }
.o477-table.o477-proj-table th:nth-child(2),
.o477-table.o477-proj-table td:nth-child(2) { left: var(--o477-proj-col1, 110px); box-shadow: inset -1px 0 0 var(--border); }
/* Groepskop-rijen: één colspan-cel over de hele breedte — die mag NIET sticky
   pinnen (er is geen tweede kolom) en houdt zijn eigen inline-achtergrond */
.o477-table.o477-proj-table tr.o477-proj-hoofd-row > td,
.o477-table.o477-proj-table tr.o477-proj-status-row > td { position: static; box-shadow: none; }
/* thead-cellen van de vastgepinde kolommen houden hun eigen kop-achtergrond + liggen erboven
   (anders schijnt de scroll onder de sticky kop door) */
.o477-table.o477-proj-table thead th:nth-child(1),
.o477-table.o477-proj-table thead th:nth-child(2) { background: var(--bg, #f7f5f2); z-index: 2; }
/* Hover-achtergrond moet ook de vastgepinde cellen dekken (anders schemert de scroll eronder door) */
.o477-table.o477-proj-table tbody tr:hover td:nth-child(1),
.o477-table.o477-proj-table tbody tr:hover td:nth-child(2) { background: #f8fafc; }

/* Klant-pill in Inkoopboek/Bonnen tabel — kleur komt uit klant_kleur (inline style) */
.o477-ib-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Segmented filter (Alle / Inkoop / Kosten) bovenaan Inkoopboek */
.o477-ib-segments {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.o477-ib-seg {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-right: 1px solid #cbd5e1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.3;
  transition: background 0.1s ease, color 0.1s ease;
}
.o477-ib-seg:last-child { border-right: none; }
.o477-ib-seg:hover:not(.active) { background: #f1f5f9; color: #1e293b; }
.o477-ib-seg.active {
  background: #1e40af;
  color: #fff;
  font-weight: 600;
}

/* Type-pill (Inkoop / Kosten) in Inkoopboek-tabel */
.o477-ib-type-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Klikbare-pill variant — voor pills die door waarden cyclen op klik */
button.o477-ib-pill-btn {
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.1s ease, transform 0.05s ease, box-shadow 0.1s ease;
}
button.o477-ib-pill-btn:hover {
  filter: brightness(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
button.o477-ib-pill-btn:active {
  transform: scale(0.97);
}
button.o477-ib-pill-btn.o477-ib-pill-busy {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}
.o477-ib-type-pill.is-inkoop {
  background: #dbeafe;   /* lichtblauw */
  color: #1e40af;
  border-color: #93c5fd;
}
.o477-ib-type-pill.is-kosten {
  background: #fef3c7;   /* lichtoranje/amber */
  color: #92400e;
  border-color: #fcd34d;
}
.o477-ib-type-pill.is-investering {
  background: #ede9fe;   /* lichtpaars */
  color: #5b21b6;
  border-color: #c4b5fd;
}
.o477-ib-type-pill.is-belasting {
  background: #ffe4e6;   /* lichtroze/rood */
  color: #9f1239;
  border-color: #fda4af;
}

/* Betaalstatus-pill */
.o477-ib-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.o477-ib-status-pill.is-open {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.o477-ib-status-pill.is-betaald {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.o477-ib-status-pill.is-vervallen {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Inkoopboek-tabel: verticaal centreren, tabular cijfers, subtiele hover */
#o477-ib-tabel .o477-table td {
  vertical-align: middle;
  padding: 10px 12px;
}
#o477-ib-tabel .o477-table td.num {
  font-variant-numeric: tabular-nums;
}
#o477-ib-tabel .o477-table tbody tr:hover td {
  background: #f8fafc;
}
#o477-ib-tabel .o477-table tbody tr {
  transition: background 0.1s ease;
}
/* Sub-tekst onder de naam (omschrijving) */
.o477-ib-sub {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.3;
}
/* Naam-cel: laat strong wat ademen */
#o477-ib-tabel .o477-table td strong {
  font-weight: 600;
  color: #1e293b;
}
/* Project-link in Inkoopboek-tabel */
.o477-ib-project-link {
  color: #1e40af;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.1s ease, color 0.1s ease;
}
.o477-ib-project-link:hover {
  color: #1e3a8a;
  border-bottom-color: #1e40af;
}
/* Sort-arrows in header — text-mode (geen emoji), prominent voor actief.
   Vaste breedte + gelijke grootte zodat ↕ ↔ ▲/▼ exact dezelfde ruimte innemen →
   het kolomlabel verspringt niet wanneer je een kolom sorteert. */
.o477-ib-arrow {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-variant-emoji: text;
  font-size: 10px;
  color: #1e293b;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}
.o477-ib-arrow-inactive {
  color: #94a3b8;
  font-weight: 400;
}

/* BTW-keuze-pills in de modal (segmented buttons voor Hoog/Laag/Geen) */
.o477-ib-btw-segments {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  width: 100%;
}
.o477-ib-btw-segments button {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid #cbd5e1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.3;
  transition: background 0.1s ease, color 0.1s ease;
}
.o477-ib-btw-segments button:last-child { border-right: none; }
.o477-ib-btw-segments button:hover:not(.active) { background: #f1f5f9; color: #1e293b; }
.o477-ib-btw-segments button.active {
  background: #1e40af;
  color: #fff;
  font-weight: 600;
}
/* Actie-knoppen (✎ ×) in de laatste kolom */
#o477-ib-tabel .o477-ib-actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 8px;
}
.o477-ib-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  padding: 0;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.o477-ib-iconbtn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
}
.o477-ib-iconbtn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
/* Pennetje gespiegeld op de inkoop-pagina's (feedback Jannie 30-8). */
.o477-ib-edit {
  transform: scaleX(-1);
}

/* P-pill: planregels gekoppeld */
.o477-pill-p {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: var(--primary); color: #fff !important; font-size: 12px;
  font-weight: 700; text-decoration: none; line-height: 1.4;
}
.o477-pill-p:hover { background: var(--primary-dark); color: #fff !important; }
.o477-pill-p sup { font-size: 9px; margin-left: 2px; opacity: 0.85; }

/* Groene ronde toevoeg-knop rechtsonder (27-8) — hoort volgens het stramien op
   elke lijstpagina, naast de gewone "+ Nieuw"-knop in de actiebalk. Rond is hier
   met opzet: het is de enige zwevende knop, en die vorm onderscheidt hem van de
   rechthoekige knoppen in de pagina. */
.o477-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: #16a34a; color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; padding: 0 0 4px;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .38);
  display: flex; align-items: center; justify-content: center;
}
.o477-fab:hover { background: #15803d; }
@media (max-width: 720px) { .o477-fab { right: 16px; bottom: 16px; } }
/* Alle zwevende +-knoppen één uiterlijk (5-9, verzoek Jannie): rond en groen,
   ook op de telefoon - daar maakte een algemene knop-regel er een afgeronde
   rechthoek van (werkbord .fab, uren .uren-fab). */
.fab, .uren-fab, .o477-fab {
  border-radius: 50% !important; width: 56px !important; height: 56px !important;
  min-height: 0 !important; padding: 0 0 4px !important;
  background: #16a34a !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .38) !important;
}
.fab:hover, .uren-fab:hover { background: #15803d !important; filter: none; }
/* Id-selectors: de algemene 'body input:not(...)/button'-regel zet border-radius
   met !important en wint qua specificiteit van een klasse - vandaar per id. */
#fab, #o477-fab-toevoegen, #o477-uren-fab { border-radius: 50% !important; }

/* Bestanden-pil: cyclaam met paperclip (26-8). Zelfde knop-taal als de cyclaam
   Aantekeningen-knop uit het stramien; compact, want hij staat in een smalle
   kolom naast de P-pil. */
.o477-pill-bestand {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; border: 1px solid #e8247c;
  background: #e8247c; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1.4; cursor: pointer;
}
.o477-pill-bestand:hover { background: #c41d68; border-color: #c41d68; }
.o477-pill-bestand svg { flex: 0 0 auto; }

/* Typepil op een bestandsregel is een keuzelijst (26-8): ziet eruit als een
   pil, gedraagt zich als een select — zelfde taal als de status-pil elders. */
select.o477-bs-type-select {
  border: 0; color: #fff; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none; padding-right: 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23fff'%3E%3Cpath d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 10px;
}
select.o477-bs-type-select option { background: #fff; color: var(--text, #0f172a); }
select.o477-bs-type-select:disabled { opacity: .6; }

/* Acties op een bestandsregel (26-8): downloaden turquoise, bekijken cyclaam. */
.o477-bs-dl-btn {
  background: var(--primary, #01A4A4); border-color: var(--primary, #01A4A4); color: #fff !important;
}
.o477-bs-dl-btn:hover { background: var(--primary-dark, #017c7c); border-color: var(--primary-dark, #017c7c); color: #fff !important; }
.o477-bs-oog-btn {
  background: #e8247c; border-color: #e8247c; color: #fff !important;
}
.o477-bs-oog-btn:hover { background: #c41d68; border-color: #c41d68; color: #fff !important; }

/* Downloadknop in het bestanden-venster: compact, past in een smalle kolom. */
.o477-bst-dl {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  border: 1px solid #cbd5e1; background: #fff; color: #334155 !important;
  font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.o477-bst-dl:hover { background: #f1f5f9; border-color: #94a3b8; text-decoration: none; }

/* Snel-uren-knop in eigen kolom: kleiner + compact */
.o477-quick-uren-btn { padding: 2px 6px !important; font-size: 14px !important; line-height: 1; }
/* Prullenbak-knop in tabel: paars (var --accent #52088c) */
.o477-table.o477-proj-table tbody td button[data-del] {
    background: #f3e7fb;
    color: #52088c;
    border: 1px solid #d4b3e8;
}
.o477-table.o477-proj-table tbody td button[data-del]:hover {
    background: #e8d4f8;
    border-color: #52088c;
}

/* Status-cell: select met pill-styling */
.o477-status-select {
    width: 100%; padding: 4px 8px; border: 0; border-radius: 4px;
    font-size: 11px; font-weight: 600; cursor: pointer; text-align: center;
    color: #fff; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.o477-status-select:hover { filter: brightness(1.05); }
.o477-status-select option { background: #fff; color: var(--text); text-transform: none; letter-spacing: 0; }

/* Afdeling-cell (/projecten): dezelfde nette pill-look als de status-select. De achtergrond +
   leesbare tekstkleur worden per afdeling inline gezet (pillTextColor in projecten.js). Zonder
   afdeling = neutrale, gestippelde "kies afdeling"-pil. */
.o477-afdeling-select {
    box-sizing: border-box; width: 100%; padding: 4px 8px; border: 0; border-radius: 4px;
    font-size: 11px; font-weight: 600; cursor: pointer; text-align: center;
    appearance: none; -webkit-appearance: none; text-overflow: ellipsis; overflow: hidden;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text); background: #eef1f4;
}
.o477-afdeling-select:hover { filter: brightness(1.04); }
.o477-afdeling-select.is-empty {
    background: #f3f4f6; color: #9ca3af; font-weight: 500;
    border: 1px dashed #cbd5e1; text-transform: none; letter-spacing: 0;
}
.o477-afdeling-select option { background: #fff; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* === Conceptfacturen-overzicht (/facturering): brede tabel niet platdrukken ===
   Data-kolommen (nummer/datum/weeknr/bedragen/status/acties) mogen niet breken; de
   tabel scrollt horizontaal via de .o477-table-scroll-wrapper. Alleen de Project-naam
   (kolom 5) mag wrappen zodat een lange naam de tabel niet eindeloos verbreedt. */
.o477-fact-table th,
.o477-fact-table td { white-space: nowrap; }
.o477-fact-table td:nth-child(5) { white-space: normal; }
.o477-fact-table .o477-status-select { min-width: 120px; }
/* Klikbare week-groepskop (Groepeer per week) — hover-affordance bij het in-/uitklappen */
.o477-week-groep[role="button"]:hover td { background: #d8f0f0; }
/* Compactere rijhoogte + verberg werkomschrijving-subregel
   (groepskop-rijen zetten hun eigen padding inline en gebruiken géén <small>) */
.o477-table.o477-proj-table tbody td { padding: 6px 12px; font-size: 13px; }
.o477-table.o477-proj-table thead th { padding: 12px 12px; font-size: 11px; } /* stramien 6b: 11px uppercase; 18-8 hogere beige titelbalk */
.o477-table.o477-proj-table tbody td br,
.o477-table.o477-proj-table tbody td small { display: none; }
@media (max-width: 1100px) {
    details.o477-proj-group > summary { flex-wrap: wrap; }
}

/* ============================================================
   PLANNING — week-grid (medewerkers per rij, dagen per kolom)
   ============================================================ */
/* === Zoekbare picker (gebruikt bij uren-modal project-keuze) === */
.o477-pickbox { position: relative; }
.o477-pickbox-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 280px; overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 2px;
}
.o477-pickbox-item {
  padding: 7px 10px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  display: flex; gap: 8px; align-items: baseline;
}
.o477-pickbox-item:last-child { border-bottom: 0; }
.o477-pickbox-item:hover,
.o477-pickbox-item.is-active { background: #f1f5f9; }
.o477-pickbox-item-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; color: var(--primary-dark);
  font-size: 12px; min-width: 90px; flex-shrink: 0;
}
.o477-pickbox-item-naam { color: var(--text); }
.o477-pickbox-clear {
  color: var(--text-muted); font-style: italic;
  border-bottom: 1px solid var(--border);
}
.o477-pickbox-empty {
  padding: 12px; text-align: center;
  color: var(--text-muted); font-size: 12px; font-style: italic;
}
.o477-pickbox-more {
  padding: 8px 10px; font-size: 11px; color: var(--text-muted);
  text-align: center; background: #f8fafc; font-style: italic;
}

.o477-plan-grid-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); scrollbar-width: none; }
.o477-plan-grid-wrap::-webkit-scrollbar { display: none; }
/* Extra sticky horizontale schuifbalk onderin de planning — via JS gesynct met de wrap,
   zodat je ook bij een lang grid (veel medewerkers) altijd soepel kunt doorscrollen. */
.o477-plan-hscroll {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: none;            /* JS toont 'm zodra het grid horizontaal overloopt */
  overflow-x: scroll;       /* scroll (niet auto) zodat de balk altijd zichtbaar is */
  overflow-y: hidden;
  height: 18px;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin;                 /* Firefox: altijd een dunne balk */
  scrollbar-color: #9aa4ae transparent;
}
/* Forceer een zichtbare thumb — ook op macOS/iOS waar scrollbars standaard verdwijnen. */
.o477-plan-hscroll::-webkit-scrollbar { height: 14px; -webkit-appearance: none; }
.o477-plan-hscroll::-webkit-scrollbar-thumb { background: #9aa4ae; border-radius: 7px; border: 3px solid var(--surface); }
.o477-plan-hscroll::-webkit-scrollbar-track { background: #eef1f4; border-radius: 7px; }
.o477-plan-hscroll-inner { height: 1px; }
.o477-plan-grid { width: 100%; border-collapse: collapse; min-width: 900px; }
/* Week-view (5-9, verzoek Jannie): álle zeven dagkolommen even breed, ook het
   weekend — vaste tabelindeling, de dagen delen de ruimte naast de medewerker-
   kolom gelijk. (Eerder: weekend op 60px, waardoor za/zo-blokken onleesbaar waren.) */
.o477-plan-grid:not(.o477-plan-grid-month) { table-layout: fixed; }
.o477-plan-grid thead th.o477-plan-day-col.o477-plan-weekend,
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-weekend {
  width: auto; max-width: none; min-width: 0;
}
.o477-plan-grid thead th {
  background: #f7f5f2; padding: 10px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-light);
  position: sticky; top: 0; z-index: 2;
}
.o477-plan-grid thead th.o477-plan-mw-col { text-align: left; width: 230px; }
.o477-plan-grid thead th.o477-plan-today { background: #e0f5f5; color: var(--primary-dark); }
.o477-plan-day-name { font-weight: 700; color: var(--text); font-size: 13px; }
.o477-plan-day-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.o477-plan-grid tbody td.o477-plan-mw-cell {
  background: #f7f5f2; padding: 10px 12px; font-size: 13px; font-weight: 600;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-light);
  width: 180px; vertical-align: top;
}
.o477-plan-mw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.o477-plan-mw-naam { vertical-align: middle; white-space: nowrap; }

.o477-plan-grid tbody td.o477-plan-cell {
  padding: 4px; vertical-align: top; border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); position: relative; min-height: 80px;
  height: 80px; min-width: 110px;
}
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-today { background: #f0fafa; }

.o477-plan-blok {
  display: flex; flex-direction: column; gap: 1px;
  /* Geen vaste (min-)hoogte meer (v2.496.2, verzoek Jannie): het blok schaalt mee met de
     inhoud — korte blokken compact, lange groeien. Var blijft beschikbaar om per tenant
     alsnog een vaste minimum-hoogte te zetten. */
  min-height: var(--o477-plan-blok-h, auto); height: auto;
  margin-bottom: 4px; padding: 6px 8px; border-radius: 6px;
  color: #fff; font-size: 12px; cursor: pointer; line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.1s;
  position: relative; overflow: hidden; word-wrap: break-word;
}
.o477-plan-blok:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
/* === Oplever-statusbalk onderin planblokken (v2.513.0; labels v2.515.0) ===
   ALLEEN voor planregels met status 'vooroplevering' (= staan in mobiel bij Opleveringen
   ter controle); andere blokken krijgen geen balk. Veld 'oplever' uit /planning:
   wit "CONTROLE" = nog niets ingevuld · grijs "GOED" = vinkje geen opleverpunten ·
   geel "ACTIE" = open punt(en) · groen "OPGELOST" = punten opgelost.
   ::after binnen het blok (overflow:hidden knipt hem netjes langs de ronde hoeken);
   extra padding-bottom zodat de blok-tekst niet op de balk staat. */
.o477-plan-blok.oplever-controle,
.o477-plan-blok.oplever-geen,
.o477-plan-blok.oplever-open,
.o477-plan-blok.oplever-opgelost { padding-bottom: 22px; }
.o477-plan-blok.oplever-controle::after,
.o477-plan-blok.oplever-geen::after,
.o477-plan-blok.oplever-open::after,
.o477-plan-blok.oplever-opgelost::after {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.o477-plan-blok.oplever-controle::after { content: "controle"; background: #ffffff; color: #334155; }
.o477-plan-blok.oplever-geen::after     { content: "goed";     background: #cbd5e1; color: #334155; }
.o477-plan-blok.oplever-open::after     { content: "actie";    background: #f59e0b; color: #fff; }
.o477-plan-blok.oplever-opgelost::after { content: "opgelost"; background: #22c55e; color: #fff; }
.o477-plan-blok br { display: none; }   /* <br> vóór de project/klant-regel — overbodig in flex-layout */
.o477-plan-blok strong {
  font-weight: 600; flex: 0 1 auto; min-height: 0; overflow-wrap: anywhere; word-break: break-word;
  /* Volledige titel (5-9, verzoek Jannie): geen afkapping op 3 regels meer —
     het blok groeit in de hoogte mee met de tekst. */
  display: block; white-space: normal; overflow: visible;
}
/* Uren-badge zweeft absoluut rechtsboven → titel vrijhouden zodat de tekst er niet doorheen loopt */
.o477-plan-blok.has-uren strong { padding-right: 32px; }
/* Onderste regel (project_naam / klant) — gepind onderin, groeit mee tot max 2 regels */
.o477-plan-blok small {
  opacity: 0.9; font-size: 11px; flex: 0 0 auto; margin-top: auto;
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Uren-badge: DONKERE dekkende achtergrond — de oude doorzichtig-witte liet de onderliggende
   bloktekst erdoorheen schijnen, waardoor teksten leken samen te lopen (onleesbaar). */
.o477-plan-blok .o477-plan-uren { position: absolute; top: 4px; right: 6px; background: rgba(0,0,0,0.38); padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; color: #fff; }
/* Starttijd-pill: eigen regel bovenin, hugt de inhoud (uren-badge zweeft rechtsboven ernaast) */
.o477-plan-blok .o477-plan-start {
  display: block; width: fit-content; max-width: calc(100% - 34px);
  background: rgba(255,255,255,0.32); padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 700; margin-bottom: 3px; white-space: nowrap;
}
/* Meta-regel onder titel: status-pil + bon-icoon */
.o477-plan-blok .o477-plan-blok-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 3px; flex-wrap: wrap;
}
.o477-plan-blok .o477-plan-blok-status {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.2px;
  padding: 1px 6px; border-radius: 3px;
  color: #fff; line-height: 1.4;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.o477-plan-blok .o477-plan-blok-bon {
  font-size: 11px; line-height: 1;
  background: rgba(255,255,255,0.3); border-radius: 3px;
  padding: 1px 3px;
}
.o477-plan-blok .o477-plan-blok-foto {
  font-size: 10px; font-weight: 600; line-height: 1;
  background: rgba(255,255,255,0.3); border-radius: 3px;
  padding: 1px 5px; color: #fff;
}
/* Bij maand-modus: alleen status-kleur als dot tonen (geen tekst, te smal) */
.o477-plan-grid-month .o477-plan-blok .o477-plan-blok-status {
  font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%;
}
.o477-plan-grid-month .o477-plan-blok .o477-plan-blok-bon { font-size: 9px; }
.o477-plan-grid-month .o477-plan-blok .o477-plan-start { font-size: 9px; padding: 0 4px; margin-bottom: 2px; }

.o477-plan-add {
  position: absolute; bottom: 2px; right: 2px; width: 20px; height: 20px;
  border-radius: 50%; border: 1px dashed var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.o477-plan-cell:hover .o477-plan-add { opacity: 1; }
.o477-plan-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Hover-ballon op een planblok: snelkoppeling "👥 Kopiëren" (= Kopieer naar medewerker(s))
   zonder de planregel-modal te openen. Verschijnt alleen bij hover over het blok.
   Rechtsboven geplaatst zodat het niet botst met het cel-"+"-knopje rechtsonder. */
.o477-plan-blok-copy {
  position: absolute; top: 2px; right: 2px;
  display: none; align-items: center; gap: 3px;
  background: #fff; color: var(--text); border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 700;
  line-height: 1.5; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22); z-index: 6;
}
.o477-plan-blok:hover .o477-plan-blok-copy { display: inline-flex; }
.o477-plan-blok-copy:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.o477-plan-grid-month .o477-plan-blok-copy { font-size: 9px; padding: 0 5px; }

/* ============================================================
   FACTURERING — overzicht
   ============================================================ */
.o477-factuur-status {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.o477-factuur-status.s-concept   { background: #e2e8f0; color: #475569; }
.o477-factuur-status.s-verzonden { background: #dbeafe; color: #1e40af; }
.o477-factuur-status.s-betaald   { background: #dcfce7; color: #166534; }
.o477-factuur-status.s-vervallen { background: #fee2e2; color: #991b1b; }
.o477-factuur-status.s-creditnota { background: #fef3c7; color: #92400e; }

.o477-factuur-regels { width: 100%; border-collapse: collapse; margin-top: 8px; }
.o477-factuur-regels th, .o477-factuur-regels td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.o477-factuur-regels th { text-align: left; background: #f7f5f2; font-weight: 600; color: var(--text-secondary); }
.o477-factuur-regels td.num, .o477-factuur-regels th.num { text-align: right; }
.o477-factuur-totals { background: #f7f5f2; font-weight: 600; }

/* Searchable combobox (gebruikt o.a. in factuur-modal voor Project-selectie) */
.o477-combo { position: relative; }
.o477-combo input[type="text"] { width: 100%; }
.o477-combo-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  margin-top: 2px;
}
.o477-combo-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text);
  user-select: none;
}
.o477-combo-item:last-child { border-bottom: none; }
.o477-combo-item:hover,
.o477-combo-item.active { background: #e6f7f7; color: var(--primary); }
.o477-combo-empty {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}

/* ============================================================
   PROJECT-DETAIL — full-page view (v2.23.0)
   ============================================================ */
/* v2.218.0: max-width:none i.p.v. calc(100vw - 32px) — zelfde fix als .o477-app in style.css
   (100vw telt de scrollbar mee). Deze regel laadt ná style.css, dus zónder deze aanpassing
   bleef project-detail bij horizontaal/pills op de oude 100vw-breedte hangen. */
.o477-pd-app { max-width: none; }

/* Terug-knop bovenaan (los van hero) */
.o477-pd-backbar { margin-bottom: 12px; }

/* Gestyleerde hero-card met turquoise linker-rand */
.o477-pd-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px;
  border-left: 6px solid var(--primary);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.o477-pd-hero-main { flex: 1; min-width: 280px; }
.o477-pd-hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.o477-pd-title { font-size: 24px; margin: 0 0 8px; color: var(--text); font-weight: 700; }
.o477-pd-nr    { color: var(--primary); font-weight: 800; }
.o477-pd-naam { cursor: text; border-radius: 6px; padding: 0 4px; transition: background .12s, box-shadow .12s; }
.o477-pd-naam:hover { background: #f1f5f9; box-shadow: inset 0 0 0 1px #e2e8f0; }
.o477-pd-naam-edit { font-size: 24px; font-weight: 700; color: var(--text); font-family: inherit; line-height: 1.2; padding: 1px 6px; border: 1px solid var(--primary, #01A4A4); border-radius: 6px; outline: none; background: #fff; max-width: 100%; vertical-align: baseline; }
.o477-pd-meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; min-height: 22px; }
.o477-pd-meta .pill {
  padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600;
  color: #fff; text-transform: uppercase; letter-spacing: 0.04em;
}
.o477-pd-meta-item { color: var(--text-secondary); font-size: 13px; }
/* Per-taak agenda-toggle in taak-detail hero */
.o477-td-agenda-toggle {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.o477-td-agenda-toggle:hover { background: #f8fafc; color: var(--text); border-color: var(--text-muted); }
.o477-td-agenda-toggle.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.o477-td-agenda-toggle.is-on:hover { background: var(--primary-dark); }
.o477-td-agenda-toggle:disabled { opacity: .6; cursor: wait; }

/* Tab-bar (extends .o477-tabs) */
.o477-pd-tabs { margin-bottom: 16px; flex-wrap: wrap; }
.o477-pd-tabs .o477-tab { font-size: 14px; }

/* ============ PROJECT-DETAIL — MOBIEL (≤720px): backbar + hero verticaal ============
   Zelfde lijn als werkbord/documenten: knoppen op volle breedte met touch-maat 40px
   en tekst links; de hero stapelt titel/meta boven de actieknoppen. */
@media (max-width: 720px) {
  .o477-pd-backbar { display: flex; flex-direction: column; gap: 8px; }
  .o477-pd-backbar .o477-btn { width: 100%; box-sizing: border-box; min-height: 40px; text-align: left; }
  .o477-pd-hero { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 12px; }
  .o477-pd-hero-main { min-width: 0; }
  .o477-pd-title { font-size: 20px; }
  .o477-pd-naam-edit { font-size: 20px; }
  .o477-pd-hero-actions { flex-direction: column; align-items: stretch; }
  .o477-pd-hero-actions .o477-btn { width: 100%; box-sizing: border-box; min-height: 40px; text-align: left; }
}

/* Tab-panels: alleen actieve is zichtbaar (display geregeld in JS) */
.o477-pd-tab-panel { animation: o477-pd-fadein 0.15s ease-out; }
@keyframes o477-pd-fadein {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sectie binnen tab-panel (geen collapsible — tab IS de toggle; keuze 22-8) */
.o477-pd-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.o477-pd-sec-header {
  padding: 14px 18px; background: #f7f5f2; border-bottom: 1px solid var(--border);
}
.o477-pd-sec-title { font-size: 15px; font-weight: 700; color: var(--primary-dark); }
.o477-pd-sec-body  { padding: 18px; }

/* Projectgegevens grid */
.o477-pd-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden;
}
.o477-pd-row { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--border-light); }
.o477-pd-row:nth-child(odd) { background: #fafbfc; }
.o477-pd-row.full { grid-column: 1 / -1; }
/* Sectie-kopjes (Werkadres / Sleuteladres / Overig) binnen Projectgegevens-grid */
.o477-pd-row.o477-pd-section-head {
  background: linear-gradient(to right, #eaf6f6, #fafbfc) !important;
  border-bottom: 1px solid var(--border);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  text-transform: none;
}
.o477-pd-label { width: 200px; font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.o477-pd-value { flex: 1; font-size: 13px; color: var(--text); }
.o477-pd-empty { color: var(--text-muted); font-style: italic; }
.o477-pd-werk { background: #fafbfc; padding: 8px 12px; border-radius: 4px; border-left: 3px solid var(--primary); white-space: pre-wrap; }

/* Financieel cards */
.o477-pd-fin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.o477-pd-fin-card {
  background: #f7f5f2; border-radius: 8px; padding: 14px 16px;
  border: 1px solid var(--border-light);
}
.o477-pd-fin-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 4px; }
.o477-pd-fin-value { font-size: 20px; font-weight: 700; }

/* Detail-tabellen (opname, plan, factuur, bestanden) */
.o477-pd-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.o477-pd-table thead th {
  background: #f7f5f2; padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em;
}
.o477-pd-table thead th.num { text-align: right; }
.o477-pd-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.o477-pd-table tbody td.num { text-align: right; }
.o477-pd-table tbody td input,
.o477-pd-table tbody td select {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 4px; font-size: 13px; background: var(--surface);
}
.o477-pd-table tbody tr:hover { background: #fafbfc; }
.o477-pd-empty-cell { text-align: center; color: var(--text-muted); padding: 20px; font-style: italic; }
.o477-pd-table tbody tr.o477-pd-totals {
  background: #f0ece6;
  font-size: 14px;
  border-top: 2px solid var(--border);
}
.o477-pd-table tbody tr.o477-pd-totals td { padding: 10px; }
.o477-pd-table tbody tr.o477-pd-totals:hover { background: #f0ece6; }

.o477-pd-actions {
  margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Bestanden-type pill */
.o477-pd-type-pill {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
}

/* Upload-form (collapsible details) */
details.o477-pd-upload { display: inline-block; }
details.o477-pd-upload > summary { list-style: none; }
details.o477-pd-upload > summary::-webkit-details-marker { display: none; }
.o477-pd-upload-form {
  margin-top: 12px; background: #f7f5f2; padding: 14px;
  border: 1px solid var(--border); border-radius: 6px; min-width: 600px;
}

@media (max-width: 900px) {
  .o477-pd-grid { grid-template-columns: 1fr; }
  .o477-pd-row { flex-direction: column; gap: 4px; }
  .o477-pd-label { width: auto; }
  .o477-pd-upload-form { min-width: 0; }
}

/* === Project-detail: inline-editable rows === */
.o477-pd-value-edit { display: flex; align-items: center; gap: 6px; }
.o477-pd-edit {
  flex: 1; padding: 4px 8px; font-size: 13px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.o477-pd-edit:hover { background: rgba(1,164,164,0.04); border-color: var(--border-light); }
.o477-pd-edit:focus {
  outline: none; background: var(--surface);
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,164,164,0.12);
}
textarea.o477-pd-edit { resize: vertical; min-height: 44px; line-height: 1.5; }
select.o477-pd-edit { cursor: pointer; appearance: auto; padding-right: 24px; }

.o477-pd-save-status {
  font-size: 13px; font-weight: 700; min-width: 14px;
  display: inline-block; transition: opacity 0.2s;
}
.o477-pd-save-status.ok  { color: #10b981; }
.o477-pd-save-status.err { color: #dc2626; }

/* Financieel-card edit variant */
.o477-pd-fin-edit .o477-pd-fin-value {
  display: flex; align-items: baseline; gap: 4px;
}
.o477-pd-fin-prefix { font-weight: 600; font-size: 14px; opacity: 0.6; }
.o477-pd-fin-input {
  flex: 1; min-width: 0; padding: 2px 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; font-size: 20px; font-weight: 700; color: inherit;
  font-family: inherit;
}
.o477-pd-fin-input:hover { background: rgba(1,164,164,0.04); border-color: var(--border-light); }
.o477-pd-fin-input:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,164,164,0.12); }
.o477-pd-fin-input::-webkit-inner-spin-button { opacity: 0.4; }

/* === Medewerkers-tabel: drag-reorder === */
.o477-mw-table tbody tr[draggable="true"] { cursor: grab; }
.o477-mw-table tbody tr[draggable="true"]:active { cursor: grabbing; }
.o477-mw-table .o477-mw-drag {
  width: 24px; padding: 8px 4px; text-align: center;
  color: var(--text-muted); font-size: 12px; line-height: 1; user-select: none;
}
.o477-mw-table tbody tr.o477-dragging { opacity: 0.4; }
.o477-mw-table tbody tr.o477-drop-marker { box-shadow: inset 0 2px 0 var(--primary); }

/* === Teams-overzicht: kaart per team met medewerkers === */
.o477-teams-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.o477-team-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 140px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.o477-team-card.o477-drop-target { box-shadow: 0 0 0 3px var(--primary); transform: translateY(-2px); }
.o477-team-card-header {
  padding: 12px 14px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.o477-team-card-title { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.o477-team-card-count { font-size: 11px; opacity: 0.85; font-weight: 500; }
.o477-team-members {
  padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.o477-team-empty {
  padding: 16px; text-align: center; color: var(--text-muted);
  font-size: 12px; font-style: italic; border: 2px dashed var(--border-light);
  border-radius: 6px;
}
.o477-team-member {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; transition: background 0.1s;
  background: #fafbfc; border: 1px solid var(--border-light);
}
.o477-team-member:hover { background: #f0f4f8; }
.o477-team-member.o477-team-dragging { opacity: 0.4; }
.o477-team-member[draggable="true"] { cursor: grab; }
.o477-team-member[draggable="true"]:active { cursor: grabbing; }
.o477-team-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.o477-team-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.o477-team-meta .o477-team-naam { font-size: 13px; font-weight: 500; color: var(--text); }
.o477-team-meta small { font-size: 11px; color: var(--text-muted); }
.o477-team-drag { color: var(--text-muted); font-size: 12px; user-select: none; }

/* === Bestanden tab: upload-modal + dropzone === */
.o477-bs-modal { max-width: 720px; width: 100%; }
.o477-bs-dropzone {
  border: 3px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  background: #fafbfc;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.o477-bs-dropzone:hover { background: #f0f4f8; border-color: var(--primary-light); }
.o477-bs-dropzone.o477-bs-drop-over {
  background: rgba(1,164,164,0.08);
  border-color: var(--primary);
  border-style: solid;
}
.o477-bs-drop-icon { font-size: 42px; color: var(--primary); margin-bottom: 8px; }
.o477-bs-drop-text { font-size: 16px; color: var(--text); font-weight: 500; }
.o477-bs-drop-text small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.o477-bs-drop-filename { margin-top: 12px; font-size: 13px; color: var(--primary-dark); font-weight: 600; min-height: 18px; }

/* Bestanden-tabel: thumbnails */
.o477-pd-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 6px;
  background: #fafbfc; border: 1px solid var(--border-light);
  cursor: pointer; padding: 2px; overflow: hidden;
}
.o477-pd-thumb:hover { border-color: var(--primary); }
.o477-pd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.o477-pd-thumb-pdf { font-size: 22px; flex-direction: column; line-height: 1; color: #dc2626; cursor: pointer; }
.o477-pd-thumb-pdf small { font-size: 9px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.o477-pd-thumb-other { font-size: 22px; cursor: default; color: var(--text-muted); }

/* === LIGHTBOX / FOTOBOEK === */
.o477-lb-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  z-index: 10000; display: flex; flex-direction: column;
  animation: o477-fadein 0.15s ease-out;
}
@keyframes o477-fadein { from { opacity: 0; } to { opacity: 1; } }
.o477-lb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; gap: 12px; color: #fff;
  background: rgba(0,0,0,0.6);
}
.o477-lb-title { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-lb-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.o477-lb-actions .o477-btn { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.o477-lb-actions .o477-btn:hover { background: rgba(255,255,255,0.25); }
.o477-lb-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 16px;
}
.o477-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.o477-lb-pdf { width: 100%; height: 100%; border: 0; background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.o477-lb-prev, .o477-lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 80px; border: 0;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 36px; cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.o477-lb-prev { left: 10px; border-radius: 0 8px 8px 0; }
.o477-lb-next { right: 10px; border-radius: 8px 0 0 8px; }
.o477-lb-prev:hover, .o477-lb-next:hover { background: rgba(255,255,255,0.3); }
.o477-lb-thumbs {
  display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto;
  background: rgba(0,0,0,0.7); border-top: 1px solid rgba(255,255,255,0.1);
}
.o477-lb-thumb-btn {
  flex: 0 0 60px; width: 60px; height: 60px; padding: 2px;
  border: 2px solid transparent; border-radius: 6px;
  background: rgba(255,255,255,0.1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: all 0.1s;
}
.o477-lb-thumb-btn:hover { background: rgba(255,255,255,0.2); }
.o477-lb-thumb-btn.active { border-color: var(--primary); background: rgba(1,164,164,0.3); }
.o477-lb-thumb-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.o477-lb-thumb-icon { font-size: 24px; color: #fff; }

/* === Bestanden-filters + bredere Omschrijving-kolom === */
.o477-bs-filters {
  /* Huisstijl-lijn: alle filter/zoek-balken lichtgroen (zoals werkbord/documenten/agenda/notities). */
  background: #E0F7F7;
  padding: 8px 10px;
  border: 1px solid #a7e7e7;
  border-radius: 6px;
  align-items: center;
}
.o477-bs-filters input,
.o477-bs-filters select {
  padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.o477-bs-filters input.grow { flex: 2; min-width: 200px; }
.o477-bs-filters select { min-width: 180px; }

/* Omschrijving = primaire kolom: ruim breedte, niet truncen */
.o477-pd-files .o477-bs-omschr {
  font-weight: 500; min-width: 240px; word-wrap: break-word;
}

/* Bestand-thumb met type-icoon (DOC/XLS/PPT/EML/etc) */
.o477-pd-thumb-typed {
  font-size: 22px; flex-direction: column; line-height: 1;
  cursor: pointer; padding: 4px;
}
.o477-pd-thumb-typed small {
  font-size: 9px; font-weight: 700; margin-top: 2px;
  color: inherit; opacity: 0.85;
}

/* === Planning view-mode toggle (Week / Maand) === */
.o477-crm-toolbar .o477-view-toggle .o477-plan-mode { padding: 6px 14px; font-size: 13px; }
.o477-crm-toolbar .o477-view-toggle .o477-plan-mode.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
/* === Planning color-by toggle (Medewerker / Soort / Klant) === */
.o477-crm-toolbar .o477-plan-color { padding: 4px 10px; font-size: 12px; }
.o477-crm-toolbar .o477-plan-color.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* === Planning: rode navigatiebalk boven het grid (21-9, verzoek Jannie) ===
   Periode-modus (Week/Maand/Jaar) + vorige/vandaag/volgende staan los van het
   inklapbare filter, in een eigen balk met rode knoppen, altijd zichtbaar. */
.o477-plan-navbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 10px;
}
.o477-plan-navbar .o477-view-toggle { gap: 4px; }
.o477-plan-navbar .o477-btn,
.o477-plan-navbar .o477-view-toggle button {
  background: #dc2626; color: #fff; border: 1px solid #dc2626;
  padding: 7px 14px; font-size: 13px;
}
.o477-plan-navbar .o477-btn:hover,
.o477-plan-navbar .o477-view-toggle button:hover {
  background: #b91c1c; border-color: #b91c1c; color: #fff;
}
.o477-plan-navbar .o477-plan-mode.active {
  background: #991b1b; border-color: #991b1b; color: #fff;
}
.o477-plan-navbar #o477-plan-titel {
  font-weight: 600; color: var(--primary-dark); margin-left: 12px;
}
/* Selecteren + Delen worden door JS in de balk gezet; rechts uitlijnen. */
.o477-plan-navbar #o477-plan-selecteer { margin-left: auto; }
@media (max-width: 720px) {
  .o477-plan-navbar { gap: 6px; }
  .o477-plan-navbar #o477-plan-titel { flex-basis: 100%; margin-left: 0; }
  .o477-plan-navbar #o477-plan-selecteer { margin-left: 0; }
}

/* === Planning: Tijdlijn (Gantt) per medewerker (21-9, verzoek Jannie) ===
   Rijen = medewerkers; horizontale balken per planblok over een datum-as van
   8 weken. Balken absoluut gepositioneerd (left/width in %); overlappende blokken
   stapelen in "lanes". De medewerker-kolom blijft links plakken bij horizontaal
   scrollen; een rode lijn markeert vandaag. */
.o477-plan-tl-wrap { overflow-x: auto; margin-top: 6px; }
.o477-plan-tl {
  position: relative; min-width: 720px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.o477-plan-tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.o477-plan-tl-row:last-child { border-bottom: 0; }
.o477-plan-tl-mwcol {
  flex: 0 0 180px; width: 180px; box-sizing: border-box;
  padding: 6px 10px; font-size: 13px; font-weight: 600; line-height: 1.25;
  display: flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--border); background: var(--surface);
  position: sticky; left: 0; z-index: 3;
}
.o477-plan-tl-track { position: relative; flex: 1 1 auto; min-height: 34px; }
.o477-plan-tl-head { background: rgba(1, 164, 164, 0.06); }
.o477-plan-tl-head .o477-plan-tl-mwcol {
  background: rgba(1, 164, 164, 0.06); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.o477-plan-tl-head .o477-plan-tl-track { min-height: 42px; }
.o477-plan-tl-wk {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border-left: 1px solid var(--border);
  padding: 5px 6px; display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.2; overflow: hidden;
}
.o477-plan-tl-head .o477-plan-tl-wk:first-child { border-left: 0; }
.o477-plan-tl-wknr { font-weight: 700; color: var(--text); }
.o477-plan-tl-wkdat { color: var(--text-muted); }
/* Subtiel weekraster dóór de medewerker-rijen: één lijn per week (8 weken → elke
   12,5% van de track-breedte; gekoppeld aan TL_WEKEN=8 in planning.js). */
.o477-plan-tl-row:not(.o477-plan-tl-head) .o477-plan-tl-track {
  background-image: repeating-linear-gradient(to right,
    transparent 0, transparent calc(12.5% - 1px),
    rgba(0, 0, 0, 0.05) calc(12.5% - 1px), rgba(0, 0, 0, 0.05) 12.5%);
}
.o477-plan-tl-blok {
  position: absolute; border-radius: 6px; padding: 0 8px; box-sizing: border-box;
  display: flex; align-items: center; overflow: hidden; cursor: pointer;
  font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.o477-plan-tl-blok:hover { filter: brightness(0.93); }
.o477-plan-tl-blok-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-plan-tl-nu { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc2626; z-index: 5; pointer-events: none; }

/* === Planning Maand-modus (v2.497.0 fixed, v2.500.0 smal=verticaal): table-layout
   FIXED + colgroup uit planning.js → de tabel is exact schermbreed, de HELE maand past
   altijd op één pagina op 100% zoom (geen horizontale scroll; de min-width-vloer van
   v2.498.0 is vervallen). Werkdag-kolommen delen de restruimte gelijkmatig en schalen
   mee (weken dichtklappen = automatisch breder). Bloktekst is horizontaal en wrapt
   (v2.499.0; de verticale smal-modus van v2.500.0 is in v2.500.1 weer vervallen).
   v2.501.0: weekend-dagen delen even breed mee als werkdagen (verzoek Jannie); alleen
   dichte weken (38px) staan vast via de colgroup. In fixed layout worden
   cell-min-widths genegeerd — kolombreedtes komen uit de <col>-elementen. === */
.o477-plan-grid-month { table-layout: fixed; min-width: 0; }
.o477-plan-grid-month tbody td.o477-plan-cell {
  height: 56px; padding: 2px;
}
.o477-plan-grid-month thead th.o477-plan-day-col {
  padding: 4px 2px; overflow: hidden;
}
/* v2.501.0/.1: weekend-kolommen zijn in de maand-view even breed als werkdagen (colgroup
   in planning.js geeft ze geen vaste width meer); alleen de lichte tint onderscheidt ze.
   De algemene week-view-regel (~r.1026) zet width:60px op weekend-th/td en die telt in
   fixed layout als eerste-rij-breedte → weekend werd juist BREDER dan de werkdagen.
   Daarom hier expliciet terug naar auto zodat ze gelijk meedelen. */
.o477-plan-grid-month thead th.o477-plan-day-col.o477-plan-weekend,
.o477-plan-grid-month tbody td.o477-plan-cell.o477-plan-weekend {
  width: auto; max-width: none; min-width: 0;
}
/* Week in-/uitklappen: header is klikbaar; dichte week = één smalle strook per rij */
.o477-plan-grid-month .o477-plan-week-header[data-wk] { cursor: pointer; user-select: none; }
.o477-plan-grid-month .o477-plan-week-header.is-wk-closed {
  min-width: 34px; padding: 4px; white-space: nowrap;
  background: #0f766e;   /* iets donkerder dan open weekkoppen = visueel 'dicht' */
}
.o477-plan-grid-month thead th.o477-plan-day-col.o477-plan-wk-closed-col,
.o477-plan-grid-month tbody td.o477-plan-cell.o477-plan-wk-closed-cell {
  min-width: 34px; width: 38px; cursor: pointer;
  background: #f1f0ec; text-align: center; color: var(--text-muted);
}
.o477-plan-grid-month tbody td.o477-plan-cell.o477-plan-wk-closed-cell:hover { background: #e8e6e0; }
.o477-plan-wk-tel {
  display: inline-block; min-width: 18px; padding: 1px 4px; border-radius: 9px;
  background: #d6d3cc; color: #514e48; font-size: 10px; font-weight: 700;
}
/* Sticky medewerker-kolom (links) blijft staan tijdens horizontaal scrollen */
.o477-plan-grid-month thead th.o477-plan-mw-col,
.o477-plan-grid-month tbody td.o477-plan-mw-cell {
  position: sticky; left: 0; z-index: 5;
  background: #f7f5f2; box-shadow: 2px 0 4px rgba(0,0,0,0.04);
  min-width: 160px; max-width: 180px;
}
/* Weeknummer-header rij (boven dag-headers in maand-view) */
.o477-plan-grid-month .o477-plan-week-header {
  background: var(--primary); color: #fff; padding: 4px 8px;
  font-size: 11px; font-weight: 700; text-align: center;
  letter-spacing: 0.04em; border-right: 2px solid #fff;
}
.o477-plan-grid-month .o477-plan-week-header small {
  font-weight: 400; opacity: 0.85; font-size: 10px;
}
.o477-plan-grid-month .o477-plan-day-name { font-size: 10px; }
.o477-plan-grid-month .o477-plan-day-date { font-size: 13px; font-weight: 700; margin-top: 0; }
/* In maand-view: blokjes compacter (alleen kleur + uren-badge zichtbaar) */
.o477-plan-grid-month .o477-plan-blok {
  padding: 4px 6px; font-size: 10px; line-height: 1.2;
  margin-bottom: 2px; min-height: var(--o477-plan-blok-h-month, auto); height: auto;   /* schaalt mee met de inhoud */
}
/* v2.499.0 (verzoek Jannie "blokken moeten meeschalen met de tekst"): titel en
   project/klant-regel WRAPPEN over meerdere regels en het blok groeit mee (hoogte is
   sinds v2.496.2 al auto) — geen …-afkap meer in de maand-view. word-break:normal +
   overflow-wrap:break-word = wrappen op woordgrenzen, alleen een woord dat zelf breder
   is dan de kolom (bv. een lang projectnummer) breekt af — geen lettersoep zoals bij
   het oude overflow-wrap:anywhere. display:block heft de -webkit-box/line-clamp van de
   basisregel op (hier gewenst; zie v2.482.2-gotcha — dat is andersom óók zo). */
.o477-plan-grid-month .o477-plan-blok strong {
  font-size: 10px; display: block;
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: normal; overflow-wrap: break-word;
}
/* v2.497.1: uren-badge NIET meer zwevend in de maand-view — bij smalle dagkolommen
   (hele maand op één pagina) bedekte de absolute badge de complete titelregel en at de
   padding-right (26px) vrijwel de hele blokbreedte op → titel toonde 2-3 tekens. De badge
   staat nu in de flow als eigen eerste regeltje (flex order -1) en de titel krijgt de
   volle breedte terug. Week-view behoudt de zwevende badge (daar is ruimte genoeg). */
.o477-plan-grid-month .o477-plan-blok.has-uren strong { padding-right: 0; }
.o477-plan-grid-month .o477-plan-blok small {
  font-size: 9px; display: block;
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: normal; overflow-wrap: break-word;
}
.o477-plan-grid-month .o477-plan-blok .o477-plan-uren {
  position: static; order: -1; align-self: flex-start; width: fit-content;
  font-size: 9px; padding: 1px 4px; margin-bottom: 1px;
}
/* Starttijd-pil: zelfde één-regel-afkap; volle breedte nu de badge niet meer zweeft */
.o477-plan-grid-month .o477-plan-blok .o477-plan-start { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* v2.500.1: de verticale smal-modus van v2.500.0 (writing-mode op class o477-plan-smal)
   is op verzoek van Jannie weer VERVALLEN — tekst blijft altijd horizontaal en wrapt
   (v2.499.0); in smalle kolommen breken lange woorden af op de kolombreedte. */

/* Grab-to-pan (handje): leeg grid-vlak slepen = het hele scherm verschuiven.
   Open hand op het vlak; blokken/knoppen houden hun eigen cursor. Tijdens het
   pannen: dichte hand overal + geen tekst-selectie. */
.o477-plan-grid-wrap { cursor: grab; }
.o477-plan-grid-wrap.is-panning { user-select: none; -webkit-user-select: none; }
.o477-plan-grid-wrap.is-panning, .o477-plan-grid-wrap.is-panning * { cursor: grabbing !important; }

/* Weekend-cellen lichte tint (zowel week als maand) */
.o477-plan-grid thead th.o477-plan-weekend { background: #efebe5; }
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-weekend { background: #faf8f4; }
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-weekend.o477-plan-today { background: #f0fafa; }

/* Feestdagen / vrije dagen — achtergrond uit inline-style, plus diagonale streep-overlay
   zodat de dag visueel duidelijk onderscheiden is van gewone werkdagen. */
/* Jaaroverzicht — 12 maand-kolommen + totaal-kolom, heatmap-cellen */
.o477-plan-grid-year { table-layout: fixed; width: 100%; }
.o477-plan-grid-year th.o477-plan-year-col {
  text-align: center; padding: 8px 4px;
  background: #f8fafc; border-bottom: 2px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
}
.o477-plan-grid-year th.o477-plan-year-col.o477-plan-today {
  background: linear-gradient(to bottom, #e0f5f5, #f8fafc);
  color: var(--primary-dark);
  font-weight: 700;
}
.o477-plan-grid-year th.o477-plan-year-tot {
  text-align: center; padding: 8px 4px;
  background: #fff7ed; border-bottom: 2px solid #fed7aa;
  border-left: 2px solid #fed7aa;
  font-size: 12px; color: #92400e; font-weight: 700;
}
.o477-plan-grid-year tbody td.o477-plan-year-cell {
  text-align: center; padding: 8px 4px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transition: transform 0.1s, box-shadow 0.1s;
}
.o477-plan-grid-year tbody td.o477-plan-year-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 5;
  position: relative;
}
.o477-plan-grid-year tbody td.o477-plan-year-tot {
  text-align: center; padding: 8px 4px;
  background: #fff7ed;
  border-left: 2px solid #fed7aa;
  font-size: 14px;
  color: #92400e;
}

.o477-plan-grid thead th.o477-plan-feestdag {
  position: relative;
}
.o477-plan-grid thead th.o477-plan-feestdag .o477-plan-day-feestdag {
  font-size: 9px;
  font-weight: 700;
  color: #991b1b;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Wrap toelaten zodat lange namen als "Hemelvaartsdag" de kolombreedte
     niet forceren via min-content. De cel volgt nu de breedte van overige
     kolommen i.p.v. opgerekt te worden door de label-tekst. */
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
  max-width: 100%;
}
.o477-plan-grid thead th.o477-plan-feestdag-vrij .o477-plan-day-feestdag { color: #92400e; }
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-feestdag-cell {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(220, 38, 38, 0.06) 8px,
    rgba(220, 38, 38, 0.06) 16px
  );
}
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-feestdag-vrij {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(180, 83, 9, 0.08) 8px,
    rgba(180, 83, 9, 0.08) 16px
  );
}

/* === Afwezigheid (Ziek / Vrije dag / Vakantie) — blokkeert planning-cel === */
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-afwezig-cell {
  position: relative;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(15,23,42,0.06) 6px,
    rgba(15,23,42,0.06) 12px
  );
}
.o477-plan-afwezig-label {
  display: block;
  margin: 4px 0 2px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .2px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  transition: transform .1s, box-shadow .1s;
  /* Pil mag nooit breder dan de cel; tekst wraps naar onderen indien nodig */
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.o477-plan-afwezig-label:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}
.o477-plan-afwezig-cell .o477-plan-add { display: none; }   /* geen "+" knop op afwezig-cel (hele dag) */
.o477-plan-afwezig-cell .o477-plan-blok { opacity: .55; }    /* bestaande blokken op een afwezig-dag dempen */

/* Afwezigheid-modal: duidelijke Hele dag / Aantal uren segmented-toggle */
.o477-afw-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.o477-afw-seg-btn { border: 0; background: #fff; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.o477-afw-seg-btn + .o477-afw-seg-btn { border-left: 1px solid #cbd5e1; }
.o477-afw-seg-btn:hover { background: #f1f5f9; }
.o477-afw-seg-btn.active { background: #01A4A4; color: #fff; }

/* === Uit dienst — medewerker niet meer beschikbaar vanaf uit_dienst-datum === */
.o477-plan-grid tbody td.o477-plan-cell.o477-plan-uitdienst-cell {
  background: #f1f5f9;           /* lichtgrijs */
  cursor: not-allowed;
}
.o477-plan-uitdienst-cell .o477-plan-add  { display: none; }                      /* geen "+" → planning geblokkeerd */
.o477-plan-uitdienst-cell .o477-plan-blok { filter: grayscale(1); opacity: .45; } /* bestaande blokken grijs/gedimd */

/* === Per-medewerker rij in-/uitklappen — houdt de planning compact === */
/* Eerste regel (caret · balletje · naam) als flex-rij → naam start altijd direct ná het balletje. */
.o477-plan-mw-head { display: flex; align-items: center; gap: 5px; }
.o477-plan-mw-head .o477-plan-mw-dot { margin-right: 0; flex: 0 0 auto; }
.o477-plan-mw-head .o477-plan-mw-naam { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-plan-mw-toggle { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: #64748b; font-size: 15px; line-height: 1; padding: 0; }
.o477-plan-mw-toggle:hover { color: #1e293b; }
/* Sleep-greep om de medewerker-volgorde te verschuiven (rij omhoog/omlaag). */
.o477-plan-mw-drag { flex: 0 0 auto; cursor: grab; color: #cbd5e1; font-size: 12px; line-height: 1; letter-spacing: -2px; user-select: none; }
.o477-plan-mw-drag:hover { color: #64748b; }
.o477-plan-mw-drag:active { cursor: grabbing; }
.o477-plan-grid tbody tr.o477-plan-row-dragging { opacity: 0.45; }
.o477-plan-grid tbody tr.o477-plan-row-drop > td { box-shadow: inset 0 2px 0 0 var(--primary); }
/* Ingeklapt: krappe rij; "+", labels én blokken verbergen; in plaats daarvan het totaal
   geplande uren-getal per dag in het vakje (gecentreerd). */
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell { padding-top: 2px; padding-bottom: 2px; }
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed .o477-plan-mw-cell small { display: none; }
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell .o477-plan-add { display: none; }
/* Geplande blokken ÉN afwezigheid (vrij/vakantie/ziek) als dunne gekleurde lijn (kleur-cue). */
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell .o477-plan-blok,
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell .o477-plan-afwezig-label {
  height: 4px; min-height: 0; margin: 1px 0; padding: 0; border-radius: 2px;
  overflow: hidden; box-shadow: none; cursor: default; font-size: 0;
}
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell .o477-plan-blok > * { display: none; }
/* Geen diagonale afwezig-arcering in de ingeklapte rij — alleen het dunne lijntje. */
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell.o477-plan-afwezig-cell { background-image: none; }
/* ... met een klein uren-totaal-getal rechtsonder in het vakje (alleen in de ingeklapte rij). */
.o477-plan-cel-uren { display: none; }
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell { position: relative; }
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell .o477-plan-cel-uren {
  display: block; position: absolute; left: 0; right: 0; bottom: 1px; text-align: center;
  font-size: 9px; font-weight: 700; line-height: 1; color: #475569;
}
/* Volle dag (≥ 8 geplande uren) → cel-achtergrond getint in de ingeklapte weergave + klikbaar (openklappen). */
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell { cursor: pointer; }
.o477-plan-grid tbody tr.o477-plan-mw-row.is-collapsed td.o477-plan-cell.o477-plan-cell-vol { background: rgba(1, 164, 164, 0.18); }

/* Uren-blok afwezigheid: alleen pil met tijd, geen volledige blokkade — + en drop blijven werken */
.o477-plan-afwezig-label.is-uren {
  background-image: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,0) 100%);
}
.o477-plan-afwezig-tijd {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.28);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* === Planning-blok drag & drop === */
.o477-plan-blok[draggable="true"] { cursor: grab; }
.o477-plan-blok[draggable="true"]:active { cursor: grabbing; }
.o477-plan-blok.o477-plan-dragging { opacity: 0.4; transform: scale(0.95); }
.o477-plan-cell.o477-plan-drop-target {
  background: rgba(1,164,164,0.18) !important;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.o477-plan-cell.o477-plan-drop-blocked {
  outline: 2px dashed #dc2626 !important;
  outline-offset: -2px;
  cursor: not-allowed;
}
/* Insert-line indicator bij drop op een ander blok in dezelfde cell (drag-sort) */
.o477-plan-blok.o477-plan-drop-before { box-shadow: 0 -3px 0 0 var(--primary) !important; }
.o477-plan-blok.o477-plan-drop-after  { box-shadow: 0  3px 0 0 var(--primary) !important; }
/* Vorige/Volgende-knoppen als drop-target bij cross-month verplaatsen */
.o477-plan-nav-drop {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(1,164,164,0.25);
}

/* === Planning legenda — kleurbalk per soort werk boven grid === */
.o477-plan-legend {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
}
.o477-plan-legend-label {
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; font-size: 11px;
}
.o477-plan-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text);
}
.o477-plan-legend-dot {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}

/* ======================
   OFFERTES-LIJST — PDF drop-zone + uploaded link
====================== */
.o477-off-pdf-drop {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 92px; height: 56px;
  padding: 4px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  background: #fafbfc;
  transition: all var(--transition);
}
.o477-off-pdf-drop:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: rgba(1,164,164,0.04);
}
.o477-off-pdf-drop.dragover {
  border-color: var(--primary);
  background: rgba(1,164,164,0.10);
  transform: scale(1.02);
}
.o477-off-pdf-drop.uploading {
  border-style: solid;
  border-color: var(--warning);
  color: var(--warning);
}
.o477-off-pdf-drop-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.o477-off-pdf-drop-text { font-weight: 600; }
/* Tab Bestanden op de offerte (11-9): breed sleepvak onder de bestandenlijst. */
.o477-od-bestand-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px 14px 4px; padding: 18px 14px; min-height: 64px;
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  background: #fafbfc; color: var(--text-muted); font-size: 13px; cursor: pointer;
  transition: all var(--transition);
}
.o477-od-bestand-drop:hover { border-color: var(--primary); color: var(--primary-dark); background: rgba(1,164,164,0.04); }
.o477-od-bestand-drop.dragover { border-color: var(--primary); background: rgba(1,164,164,0.10); }
.o477-od-bestand-drop.uploading { border-style: solid; border-color: var(--warning); color: var(--warning); }
.o477-od-bestand-drop-icon { font-size: 22px; line-height: 1; }
.o477-od-bestand-drop-text { font-weight: 600; }
.o477-od-bestand-link { color: var(--primary-dark, #018585); font-weight: 600; text-decoration: none; }
.o477-od-bestand-link:hover { text-decoration: underline; }
/* Module Prijslijst (/prijslijst, 11-9): groepen met codenummers. */
.o477-prl-groep .o477-bijlage-head { gap: 8px; cursor: pointer; }
.o477-prl-groep .o477-bijlage-head input, .o477-prl-groep .o477-bijlage-head button { cursor: auto; }
.o477-prl-groep .o477-bijlage-head button { cursor: pointer; }
.o477-prl-groep.is-dicht .o477-bijlage-head { margin-bottom: 0; }
.o477-prl-toggle { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--primary); width: 24px; padding: 0; }
.o477-prl-groep .o477-prl-gcode { flex: 0 0 64px; width: 64px; min-width: 0; margin: 0; text-align: center; font-weight: 700; color: var(--primary-dark, #018585); }
.o477-prl-groep .o477-bijlage-titel { flex: 1 1 auto; margin: 0; font-weight: 600; }
.o477-prl-gtel { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.o477-prl-groep.is-dicht .o477-prl-body { display: none; }
.o477-prl-rcode { font-weight: 700; color: var(--primary-dark, #018585); }
/* Prijs-kolom rechts uitgelijnd (11-9), ook het invoerveld zelf. */
.o477-prl-groep .o477-bijlage-tbl td.num input.num { text-align: right; font-variant-numeric: tabular-nums; }
.o477-prl-groep .o477-bijlage-tbl thead th.num { text-align: right; }
.o477-prl-racties { white-space: nowrap; }
.o477-prl-rgroep { font-size: 12px; }
/* Prijslijst: sorteerbare koppen, kolom-sleepgrepen en ≡-greep om posten te verslepen (11-9). */
.o477-prl-tbl { table-layout: fixed; width: 100%; }
#o477-prl-lijst .o477-table-scroll { overflow-x: auto; }
/* Eén platte lijst (15-9): witte kaart om de tabel + de voet met "+ Post toevoegen". */
#o477-prl-lijst .o477-table-scroll {
  background: var(--surface, #fff); border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px 10px 0 0; border-bottom: 0;
}
#o477-prl-lijst .o477-bijlage-foot {
  background: var(--surface, #fff); border: 1px solid var(--border-light, #e2e8f0);
  border-top: 0; border-radius: 0 0 10px 10px; padding: 8px 10px;
}
/* Kopregel van een groeperings-blok in de tabel: grijze balk over de volle breedte. */
.o477-prl-blokrij > td {
  background: #f1f5f9; font-weight: 700; color: #0f172a; cursor: pointer;
  padding: 6px 10px !important; border-bottom: 1px solid var(--border-light, #e2e8f0);
}
.o477-prl-blokrij:hover > td { background: #e8eef5; }
.o477-prl-bloknaam { margin-right: 10px; }
.o477-prl-blokrij .o477-prl-gtel { font-weight: 500; }
.o477-prl-tbl thead th .o477-th-greep { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
.o477-prl-tbl thead th .o477-th-greep:hover, .o477-prl-tbl thead th .o477-th-greep.is-slepen { background: rgba(1,164,164,.35); }
.o477-prl-tbl thead th { position: relative; }
.o477-prl-tbl thead th.o477-sort-th { cursor: pointer; user-select: none; }
.o477-prl-tbl thead th.o477-sort-th:hover { background: #edeae5; }
/* Postregels zonder hokjes (verzoek Jannie 15-9): de velden lezen als gewone
   tekst. .o477-pd-table geeft elk veld in een tabelcel standaard een rand + witte
   vulling — hier alleen transparant gemaakt (rand blijft bestaan, zodat de tekst
   niet verspringt zodra je erin klikt). Muis erover = zachte tint, klikken = kader. */
.o477-prl-tbl tbody td input,
.o477-prl-tbl tbody td select {
  border-color: transparent; background: transparent;
}
.o477-prl-tbl tbody td input:hover,
.o477-prl-tbl tbody td select:hover { background: rgba(1,164,164,0.05); }
.o477-prl-tbl tbody td input:focus,
.o477-prl-tbl tbody td select:focus {
  outline: none; background: var(--surface);
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,164,164,0.12);
}
/* De ↗-opener in de link-cel is geen invoerveld — die houdt zijn eigen kadertje niet. */
.o477-prl-tbl .o477-prl-bronlink { border-color: transparent; }
.o477-prl-tbl .o477-prl-bronlink:hover { border-color: #cbd5e1; }
.o477-prl-greepcel { text-align: center; padding: 0 !important; }
.o477-prl-greep { cursor: grab; color: var(--text-muted); font-size: 16px; user-select: none; touch-action: none; display: inline-block; padding: 4px 8px; }
.o477-prl-ghost { position: fixed; z-index: 1400; pointer-events: none; padding: 6px 10px; background: #0f172a; color: #fff; font-size: 12px; border-radius: 6px; box-shadow: 0 6px 20px rgba(15,23,42,.3); max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-prl-greep:hover { color: var(--primary); }
tr.o477-prl-regel.is-sleep { opacity: .45; }
tr.o477-prl-regel.is-doel > td { box-shadow: inset 0 2px 0 var(--primary); }
.o477-prl-groep.is-doel { outline: 2px dashed var(--primary); outline-offset: -2px; }
.o477-prl-mini { width: 26px; height: 26px; border: 1px solid var(--border); background: transparent; border-radius: 5px; cursor: pointer; font-size: 11px; color: var(--text-secondary); margin-left: 2px; }
.o477-prl-mini:hover { background: #f1f5f9; }
.o477-prl-mini.is-del { color: #dc2626; }
.o477-prl-mini.is-del:hover { background: #fee2e2; border-color: #fecaca; }
/* Offerteregels (11-9): getalvelden (aantal, prijs) rechts uitgelijnd met gelijke cijferbreedte. */
.o477-bijlage-tbl td.num input.num { text-align: right; font-variant-numeric: tabular-nums; }
.o477-bijlage-tbl thead th.num { text-align: right; }
/* Bevestiging na opslaan op de offertepagina (11-9). */
.o477-od-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1300; padding: 10px 16px; border-radius: 8px; background: #0f172a; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(15,23,42,.25); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.o477-od-toast.is-zichtbaar { opacity: 1; transform: none; }
.o477-od-toast.is-fout { background: #dc2626; }
/* Eigen artikel-keuzelijst onder het Artikel-veld (11-9): breed, code vooraan. */
.o477-artlijst { position: fixed; z-index: 1200; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.16); padding: 4px; }
.o477-artlijst-rij { display: grid; grid-template-columns: 64px 1fr 44px 100px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.o477-artlijst-rij:hover, .o477-artlijst-rij.is-actief { background: #E0F7F7; }
.o477-artlijst-code { font-weight: 700; color: var(--primary-dark, #018585); font-variant-numeric: tabular-nums; }
.o477-artlijst-oms { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-artlijst-een { color: var(--text-muted); font-size: 12px; }
.o477-artlijst-prijs { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .o477-artlijst-rij { grid-template-columns: 60px 1fr 90px; } .o477-artlijst-een { display: none; } }
/* Kolom Artikel op de tab Offerteregels (11-9): prijslijst-code, rood als onbekend. */
.o477-bijlage-artikel { font-weight: 700; color: var(--primary-dark, #018585); text-transform: uppercase; }
.o477-bijlage-artikel.is-onbekend { color: #dc2626; border-color: #fecaca; }
/* Prijslijst-kiezer op de tab Offerteregels (11-9). */
.o477-plk-modal { max-width: 860px; padding: 20px 22px; display: flex; flex-direction: column; max-height: 88vh; }
.o477-plk-modal h2 { margin-bottom: 12px; }
.o477-plk-top { display: flex; gap: 8px; margin-bottom: 8px; }
.o477-plk-modal .o477-plk-top select { flex: 0 0 300px; margin: 0; }
.o477-plk-modal .o477-plk-top input { flex: 1 1 auto; margin: 0; }
.o477-plk-body { flex: 1 1 auto; overflow: auto; border: 1px solid var(--border); border-radius: 8px; min-height: 200px; }
.o477-plk-kop { position: sticky; top: 0; background: #f7f5f2; padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.o477-plk-rij { display: grid; grid-template-columns: 22px 64px 1fr 44px 100px 76px; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border-light, #eef2f6); font-size: 13px; cursor: pointer; }
.o477-plk-rij:hover { background: #fafbfc; }
.o477-plk-rij.is-aan { background: #E0F7F7; }
.o477-plk-modal .o477-plk-rij input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.o477-plk-modal .o477-plk-rij input.o477-plk-aantal { margin: 0; padding: 4px 6px; font-size: 13px; text-align: right; width: 76px; }
.o477-plk-code { font-weight: 700; color: var(--primary-dark, #018585); font-variant-numeric: tabular-nums; }
.o477-plk-oms { min-width: 0; }
.o477-plk-een { color: var(--text-muted); font-size: 12px; }
.o477-plk-prijs { text-align: right; font-variant-numeric: tabular-nums; }
.o477-plk-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.o477-plk-stat { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
@media (max-width: 720px) {
  .o477-plk-top { flex-direction: column; }
  .o477-plk-modal .o477-plk-top select { flex: 1 1 auto; }
  .o477-plk-rij { grid-template-columns: 22px 56px 1fr 70px; }
  .o477-plk-een, .o477-plk-prijs { display: none; }
}

/* ===== Rekenblad (o477-rekenblad.js, 11-9): eenvoudig spreadsheet als tab op de offerte ===== */
.o477-rb { outline: none; padding: 0 14px 14px; }
.o477-rb:focus-within .o477-rb-tabel td.is-actief { box-shadow: inset 0 0 0 2px var(--primary); }
.o477-rb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.o477-rb-toolbar .o477-btn { padding: 5px 10px; font-size: 13px; min-height: 32px; }
.o477-rb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.o477-rb-groei { flex: 1 1 auto; }
/* Kleurknoppen met uitklappalet (vulling / tekst). */
.o477-rb-kleur { position: relative; display: inline-block; }
.o477-rb-palet {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  width: 176px; padding: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.16);
  flex-wrap: wrap; gap: 6px;
}
.o477-rb-kleur.is-open .o477-rb-palet { display: flex; }
.o477-rb-palet-vak { width: 24px; height: 24px; border: 1px solid rgba(15,23,42,.18); border-radius: 5px; cursor: pointer; padding: 0; }
.o477-rb-palet-vak:hover { transform: scale(1.12); border-color: var(--primary); }
.o477-rb-palet [data-rb-lijndik] { flex: 1 1 45%; }
.o477-rb-palet-geen { flex: 1 1 100%; font-size: 12px; padding: 4px 6px; border: 1px dashed var(--border); border-radius: 5px; background: transparent; cursor: pointer; color: var(--text-secondary); }
.o477-rb-palet-geen:hover { border-color: var(--primary); color: var(--primary-dark, #018585); }
/* Rechtermuisknop-menu op rij-/kolomkoppen en cellen. */
.o477-rb { position: relative; }
.o477-rb-ctx { position: absolute; z-index: 30; display: flex; flex-direction: column; min-width: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.16); }
.o477-rb-ctx button { text-align: left; padding: 8px 12px; font-size: 13px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text); }
.o477-rb-ctx button:hover { background: #E0F7F7; color: var(--primary-dark, #018585); }
.o477-rb-fs { min-height: 32px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); width: auto; min-width: 0; }
.o477-rb-formulebalk { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.o477-rb-celnaam { min-width: 64px; padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary); background: #f7f5f2; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.o477-rb-formule { flex: 1 1 auto; padding: 6px 10px; font-size: 13px; font-family: ui-monospace, Consolas, monospace; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.o477-rb-formule:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,164,164,.15); }
.o477-rb-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.o477-rb-tabel { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.o477-rb-tabel th, .o477-rb-tabel td { border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 0; height: 28px; box-sizing: border-box; line-height: 1.3; }
.o477-rb-tabel thead th { position: sticky; top: 0; z-index: 3; background: #f7f5f2; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: center; user-select: none; }
.o477-rb-tabel thead th.o477-rb-hoek { left: 0; z-index: 4; cursor: pointer; }
.o477-rb-tabel tbody th.o477-rb-rijkop { position: sticky; left: 0; z-index: 2; background: #f7f5f2; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: center; user-select: none; cursor: pointer; }
.o477-rb-tabel th.is-sel { background: #e0f7f7; color: var(--primary-dark, #018585); }
.o477-rb-kolkop { position: relative; cursor: pointer; }
.o477-rb-greep { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 5; }
.o477-rb-greep:hover { background: rgba(1,164,164,.35); }
.o477-rb-tabel td.o477-rb-cel { padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: cell; color: var(--text); background: var(--surface); font-variant-numeric: tabular-nums; }
.o477-rb-tabel td.al-l { text-align: left; }
.o477-rb-tabel td.al-c { text-align: center; }
.o477-rb-tabel td.al-r { text-align: right; }
.o477-rb-tabel td.is-vet { font-weight: 700; }
.o477-rb-tabel td.is-fout { color: #dc2626; font-weight: 600; }
.o477-rb-tabel td.is-formule { color: #0f4c81; }
.o477-rb-tabel td.is-sel { box-shadow: inset 0 0 0 100px rgba(1,164,164,.12); }
.o477-rb-tabel td.is-actief { box-shadow: inset 0 0 0 2px rgba(1,164,164,.6); }
.o477-rb-edit { width: 100%; height: 100%; box-sizing: border-box; border: 0; outline: none; padding: 4px 8px; font: inherit; background: #fffbe6; color: var(--text); }
.o477-rb-status { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); min-height: 18px; }
.o477-rb-status [data-rb-stat] { font-weight: 600; color: var(--primary-dark, #018585); white-space: nowrap; }
.o477-rb-tip { color: var(--text-muted); font-style: italic; }
@media (max-width: 720px) {
  .o477-rb { padding: 0 8px 8px; }
  .o477-rb-tip { display: none; }
  .o477-rb-toolbar .o477-btn { min-height: 36px; }
}

.o477-off-pdf-uploaded {
  display: inline-flex; align-items: center; gap: 4px;
}
.o477-off-pdf-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: all var(--transition);
}
.o477-off-pdf-link:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.o477-off-pdf-del {
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.o477-off-pdf-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Meerdere PDF's per offerte: compacte chips die horizontaal wrappen + "+ PDF"-knop */
.o477-off-pdf-cell {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 5px;
}
/* ===== STABU-calculatie (offertesoort 'stabu') ===== */
.o477-stabu-ond { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 14px; overflow: hidden; }
.o477-stabu-ond-head { display: flex; align-items: center; gap: 8px; background: #eef2f7; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.o477-stabu-ond-naam { flex: 1; font-weight: 700; }
.o477-stabu-ond-tot { font-weight: 700; color: var(--primary-dark); min-width: 110px; text-align: right; }
.o477-stabu-h { margin: 8px; }
.o477-stabu-h-head { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.o477-stabu-h-code { flex: 0 0 36px; width: 36px; padding-left: 4px; padding-right: 4px; text-align: left; }
/* Compacte groepen-kolom: vaste breedte, links uitgelijnd (niet over de hele rij uitsmeren).
   8-9: nummer smaller (36px) en titel direct erachter, zodat titels strak links staan. */
.o477-stabu-h-naam { flex: 0 1 420px; min-width: 0; font-weight: 600; text-align: left; padding-left: 4px; }
/* Verplaats-pijltjes (hoofdgroep/groep omhoog en omlaag): twee losse knopjes met
   duidelijke pijlen, zelfde uiterlijk als de inklap-knop (8-9, verzoek Jannie). */
.o477-stabu-mv { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.o477-stabu-ond-mv, .o477-stabu-h-mv {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid var(--border); border-radius: 5px; background: #fff;
  color: var(--primary-dark, #0f766e); font-size: 13px; font-weight: 700; cursor: pointer;
}
.o477-stabu-ond-mv:hover:not([disabled]), .o477-stabu-h-mv:hover:not([disabled]) { background: #e0f2f2; }
.o477-stabu-ond-mv[disabled], .o477-stabu-h-mv[disabled] { color: #cbd5e1; cursor: default; background: #f8fafc; }
.o477-stabu-h-tot { margin-left: auto; min-width: 100px; text-align: right; color: var(--text-secondary); font-weight: 600; }
/* Vaste kolom-layout zodat elke hoofdstuk-tabel identieke breedtes heeft (uitlijnen
   tussen blokken) en de smalle CODE/FASE/EENH-kolommen niet de waarden afkappen. */
.o477-stabu-tbl { table-layout: fixed; }
.o477-stabu-tbl thead th { padding: 6px 6px; }
.o477-stabu-tbl tbody td { padding: 4px 6px; }
.o477-stabu-tbl tbody td input { padding: 5px 6px; }
.o477-stabu-tbl input { width: 100%; }
/* Hoev. en Prijs/eh: waarden rechts uitgelijnd, net als de kolomkop (8-9, verzoek Jannie). */
.o477-stabu-tbl input.num { text-align: right; font-variant-numeric: tabular-nums; }
.o477-stabu-tbl input.num::-webkit-outer-spin-button, .o477-stabu-tbl input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.o477-stabu-tbl input.num[type=number] { -moz-appearance: textfield; }
.o477-stabu-tbl tbody td,
.o477-stabu-tbl thead th { overflow: hidden; text-overflow: ellipsis; }
/* Marktconforme richtprijs (indicatie) onder het prijs/eh-veld: klik = overnemen */
.o477-stabu-richt { display: block; font-size: 11px; line-height: 1.2; color: var(--text-secondary, #64748b); cursor: pointer; text-align: right; white-space: nowrap; }
.o477-stabu-richt:hover { text-decoration: underline; }
.o477-stabu-richt.afwijkend { color: #d97706; font-weight: 600; }
.o477-stabu-h-foot, .o477-stabu-ond-foot { padding: 4px 8px 10px; }
/* Inklapbare onderdelen/hoofdstukken (collapse-toggle) */
.o477-stabu-toolbar { display: flex; gap: 8px; margin: 0 0 10px; }
.o477-stabu-collapse {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid var(--border); border-radius: 5px; background: #fff;
  color: var(--primary-dark, #0f766e); font-size: 13px; cursor: pointer;
}
.o477-stabu-collapse:hover { background: #e0f2f2; }
.o477-stabu-ond.is-collapsed > .o477-stabu-h,
.o477-stabu-ond.is-collapsed > .o477-stabu-ond-foot { display: none; }
.o477-stabu-h.is-collapsed > .o477-stabu-tbl,
.o477-stabu-h.is-collapsed > .o477-stabu-h-foot { display: none; }
/* Start-scherm: zelf-benoemde hoofdgroepen + lijst-keuze met voorvertoning */
.o477-stabu-start { max-width: 980px; margin: 12px auto; padding: 22px 26px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); }
.o477-stabu-start textarea { width: 100%; resize: vertical; }
.o477-stabu-start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 16px; }
@media (max-width: 760px) { .o477-stabu-start-grid { grid-template-columns: 1fr; } }
.o477-stabu-start-lbl { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.o477-stabu-start .o477-stabu-bib-keuze { width: 100%; }
.o477-stabu-start-info {
  margin-top: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary); background: var(--bg, #f1f5f9);
  border: 1px solid var(--border); border-radius: 8px;
  max-height: 150px; overflow-y: auto;
}
.o477-stabu-start-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.o477-stabu-regel-del, .o477-stabu-bk-del { border: none; background: none; cursor: pointer; font-size: 14px; }
.o477-stabu-samenvatting { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--surface, #fff); max-width: 560px; margin: 8px 0 8px auto; }
.o477-stabu-sv-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.o477-stabu-sv-row > span:first-child { flex: 1; }
.o477-stabu-sv-row .o477-stabu-staart { width: 70px; text-align: right; }
.o477-stabu-sv-row > strong { min-width: 120px; text-align: right; }
.o477-stabu-btw { width: 70px; }
.o477-stabu-sv-strong { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; }
.o477-stabu-sv-incl { border-top: 2px solid var(--primary); margin-top: 6px; padding-top: 8px; font-size: 16px; color: var(--primary-dark); font-weight: 700; }

/* Overzicht investering (klant-weergave) op tab "Offerte" bij een STABU-offerte */
.o477-stabu-ov tr.o477-stabu-ov-head td { font-weight: 600; color: #0f766e; background: #f0fdfa; padding-top: 10px; }
.o477-stabu-ov tr.o477-stabu-ov-sub td { font-weight: 700; border-top: 1.5px solid #94a3b8; }
.o477-stabu-ov tr.o477-stabu-ov-tot td { font-weight: 700; font-size: 15px; color: var(--primary-dark, #0f766e); border-top: 2px solid var(--primary, #01A4A4); }

/* Groepskop-rij bij "Groepeer per behandelaar" */
/* 18-8: zelfde groepskop-opmaak als de hoofdgroep-rijen op /projecten —
   licht-turquoise, hogere regel, grotere titel-letter */
.o477-table tr.o477-off-grouphead td {
  background: #E0F7F7; border-bottom: 2px solid #cbd5e1;
  font-weight: 700; font-size: 15px; color: var(--primary-dark, #017a7a); padding: 14px 12px;
  position: sticky; left: 0;
}
.o477-off-pdf-chip { position: relative; display: inline-flex; }
.o477-off-pdf-chip .o477-off-pdf-link { padding: 4px 8px; }
/* Verwijder-knop als klein overlay-kruisje (alleen bij hover, zodat de chip smal blijft) */
.o477-off-pdf-chip .o477-off-pdf-del {
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; min-width: 0;
  border-radius: 50%;
  background: var(--danger); color: #fff; border: 1px solid #fff;
  font-size: 11px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  padding: 0; box-shadow: var(--shadow-sm); z-index: 2;
}
.o477-off-pdf-chip:hover .o477-off-pdf-del,
.o477-off-pdf-chip:focus-within .o477-off-pdf-del { display: flex; }
.o477-off-pdf-chip .o477-off-pdf-del:hover { background: #b91c1c; }
/* Overige PDF's verborgen tot uitgeklapt (display:contents laat de chips meedoen in de wrap) */
.o477-off-pdf-rest { display: none; }
.o477-off-pdf-cell.expanded .o477-off-pdf-rest { display: contents; }
/* "+N" / inklap-badge */
.o477-off-pdf-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 4px 9px;
  background: #f1f5f9; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 700; font-size: 12px;
  cursor: pointer; line-height: 1;
}
.o477-off-pdf-more:hover { background: #e2e8f0; color: var(--text); }
.o477-off-pdf-drop.compact {
  flex-direction: row; gap: 4px;
  width: auto; height: auto; min-height: 28px;
  padding: 4px 8px;
  border-width: 1px;
  font-size: 11px;
}
.o477-off-pdf-drop.compact .o477-off-pdf-drop-icon { font-size: 13px; margin-bottom: 0; }

/* ======================
   OFFERTE-DETAIL — Financieel KPI-tegels + regels-tabel inputs
====================== */
.o477-od-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}
.o477-od-kpi {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--border);
}
.o477-od-kpi-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.o477-od-kpi-value {
  font-size: 20px; font-weight: 700;
  color: var(--primary-dark);
}
/* Regels-tabel inputs zonder border om visueel rustig te blijven binnen tabel-cellen */
#o477-od-regels-tbl tbody td .o477-pd-edit {
  border-color: transparent;
  background: transparent;
}
#o477-od-regels-tbl tbody td .o477-pd-edit:hover,
#o477-od-regels-tbl tbody td .o477-pd-edit:focus {
  background: var(--surface);
  border-color: var(--primary);
}
.o477-od-regel-del {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--danger); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.o477-od-regel-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Rode prullenbak-SVG op alle verwijderknoppen van de offertepagina (11-9). */
svg.o477-prul { width: 16px; height: 16px; color: #dc2626; vertical-align: middle; pointer-events: none; }
.o477-od-regel-del:hover svg.o477-prul, .o477-od-bestand-del:hover svg.o477-prul { color: #fff; }
.o477-bijlage-regel-del, .o477-foto-del, .o477-od-termijn-del, .o477-stabu-regel-del, .o477-stabu-bk-del {
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.o477-bijlage-regel-del:hover, .o477-foto-del:hover, .o477-od-termijn-del:hover, .o477-stabu-regel-del:hover, .o477-stabu-bk-del:hover { background: #fee2e2; border-color: #fecaca; }
.o477-od-bestand-del:hover { background: #dc2626; border-color: #dc2626; }

/* ======================
   PROJECT-DETAIL — Planregels-pills (Soort werk / Discipline / Status)
   Uniforme grootte, kleine radius, gecentreerd
====================== */
.o477-pd-table .pill {
  display: inline-block;
  min-width: 100px;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.5;
  box-sizing: border-box;
}

/* ======================
   TEAMS — drag-indicators voor custom-sortering
====================== */
.o477-team-member.o477-drop-above {
  border-top: 3px solid var(--primary);
  margin-top: -3px;
}
.o477-team-member.o477-drop-below {
  border-bottom: 3px solid var(--primary);
  margin-bottom: -3px;
}

/* ======================
   MEDEWERKERS — vaste kolombreedtes
====================== */
.o477-mw-table-fixed {
  table-layout: fixed;
  width: 100%;
}
.o477-mw-table-fixed th,
.o477-mw-table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.o477-mw-table-fixed td a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

/* ======================
   MEDEWERKERS — team-groep (collapsible)
====================== */
.o477-mw-team-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.o477-mw-team-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  background: linear-gradient(to right, var(--bg-alt), var(--surface));
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--primary-dark);
  user-select: none;
}
.o477-mw-team-group > summary::-webkit-details-marker { display: none; }
.o477-mw-team-group > summary::before {
  content: '▶';
  display: inline-block;
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform var(--transition);
}
.o477-mw-team-group[open] > summary::before { transform: rotate(90deg); }
.o477-mw-team-group > summary:hover { background: linear-gradient(to right, #f0ece6, #fafbfc); }
.o477-mw-team-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.o477-mw-team-count {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.o477-mw-team-group > table { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

/* ======================
   PROJECT-DETAIL — Planregels bulk-edit bar
====================== */
/* === Mail-modal: medewerker-keuze-rijen === */
.o477-mail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  min-width: 0;
  transition: background 0.1s;
}
.o477-mail-row:hover { background: #f1f5f9; }
.o477-mail-row input[type="checkbox"] { flex-shrink: 0; margin: 0; }
.o477-mail-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.o477-mail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  overflow: hidden;
}
.o477-mail-naam {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o477-mail-naam small {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}
.o477-mail-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o477-mail-pill {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.o477-mail-pill-eigen { background: #dcfce7; color: #166534; }
.o477-mail-pill-zzp { background: #fef3c7; color: #92400e; }

/* === Gantt-chart in project-detail === */
.o477-gantt-section-head {
  margin: 16px 0 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  background: linear-gradient(to right, #eaf6f6, #fafbfc);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border-light);
  text-transform: none;
  letter-spacing: 0.02em;
}
.o477-gantt-section-head:first-of-type { border-top: 0; margin-top: 0; }

.o477-gantt-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.o477-gantt-toolbar { padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.o477-gantt-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.o477-gantt-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.o477-gantt-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.o477-gantt-scroll { overflow-x: auto; overflow-y: visible; max-height: 70vh; }
.o477-gantt-grid { position: relative; }
.o477-gantt-header { display: flex; position: sticky; top: 0; z-index: 10; background: #f8fafc; border-bottom: 2px solid var(--border); }
.o477-gantt-label-corner { padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid var(--border); background: #f8fafc; position: sticky; left: 0; z-index: 11; }
.o477-gantt-header-track { position: relative; height: 50px; }
.o477-gantt-weeks { position: relative; height: 22px; border-bottom: 1px solid var(--border-light); background: #f1f5f9; }
.o477-gantt-weekcell { position: absolute; top: 0; height: 22px; border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--primary-dark); }
.o477-gantt-days { position: relative; height: 28px; }
.o477-gantt-daycell { position: absolute; top: 0; height: 28px; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.o477-gantt-daycell.weekend { background: #f7f5f2; }
.o477-gantt-daycell.today { background: #e0f5f5; }
.o477-gantt-day-dow { font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.o477-gantt-day-num { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 1px; }
.o477-gantt-body { position: relative; }
.o477-gantt-row { display: flex; border-bottom: 1px solid var(--border-light); }
.o477-gantt-row:hover { background: #f8fafc; }
.o477-gantt-label { padding: 6px 12px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--border); background: var(--surface); position: sticky; left: 0; z-index: 5; }
.o477-gantt-track { position: relative; flex-shrink: 0; }
.o477-pd-foto-thumb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.o477-gantt-bar { position: absolute; top: 4px; height: calc(100% - 8px); border-radius: 4px; padding: 0 6px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; color: #fff; font-size: 11px; font-weight: 600; overflow: hidden; transition: transform 0.1s, box-shadow 0.1s; }
.o477-gantt-bar:hover { transform: scale(1.02); box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 3; }
.o477-gantt-bar-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-gantt-today-line { position: absolute; top: 0; width: 2px; background: #dc2626; pointer-events: none; z-index: 4; }
/* Print-header: alleen zichtbaar bij printen via @media print */
.o477-gantt-print-header { display: none; }
.o477-gantt-print-title { font-size: 20px; font-weight: 700; color: #1f2937; margin: 0 0 4px; }
.o477-gantt-print-meta  { font-size: 12px; color: #64748b; margin-bottom: 12px; }
/* Medewerker-naam direct na de gekleurde bar (zoals Monday-style) */
.o477-gantt-bar-after {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
}

/* === Print-modus: isoleer de planregel-Gantt + project-header === */
@media print {
  body.o477-print-gantt { background: #fff; }
  body.o477-print-gantt > *:not(main) { display: none !important; }
  body.o477-print-gantt .o477-header,
  body.o477-print-gantt .o477-footer,
  body.o477-print-gantt .o477-pd-backbar,
  body.o477-print-gantt .o477-pd-hero,
  body.o477-print-gantt .o477-pd-tabs,
  body.o477-print-gantt [data-pd-tab-panel]:not([data-pd-tab-panel="gantt"]),
  body.o477-print-gantt .o477-gantt-toolbar,
  body.o477-print-gantt #o477-pd-modal { display: none !important; }
  /* In de gantt-tab: alleen het printable-section blok tonen, niet de Per medewerker view */
  body.o477-print-gantt [data-pd-tab-panel="gantt"] > div > .o477-section-head,
  body.o477-print-gantt [data-pd-tab-panel="gantt"] .o477-gantt-wrap > .o477-gantt-section-head:not(:has(+ [data-print-section])),
  body.o477-print-gantt [data-pd-tab-panel="gantt"] .o477-gantt-wrap > .o477-gantt-scroll:not([data-print-section] .o477-gantt-scroll) { display: none !important; }
  /* Selector-fallback (browsers zonder :has): verberg eerste sectie (Per medewerker) via order */
  body.o477-print-gantt .o477-gantt-wrap > .o477-gantt-section-head:first-of-type,
  body.o477-print-gantt .o477-gantt-wrap > .o477-gantt-scroll:first-of-type { display: none !important; }
  body.o477-print-gantt .o477-gantt-print-section .o477-gantt-section-head { display: none !important; }
  /* Toon de print-header */
  body.o477-print-gantt .o477-gantt-print-header { display: block !important; padding: 0 0 12px; border-bottom: 2px solid #1f2937; margin-bottom: 14px; }
  /* Zorg dat de Gantt-grid volledig zichtbaar is (geen scrollbar) */
  body.o477-print-gantt .o477-gantt-scroll { max-height: none !important; overflow: visible !important; }
  body.o477-print-gantt .o477-gantt-wrap { border: 0; }
  body.o477-print-gantt .o477-app { max-width: none; padding: 0; margin: 0; }
  /* Forceer kleur-printing voor de bars (anders Chrome blanke kleuren) */
  body.o477-print-gantt .o477-gantt-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.o477-print-gantt .o477-gantt-daycell.weekend { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.o477-print-gantt .o477-gantt-today-line { display: none !important; }
  /* A4 landscape voor maximale breedte */
  @page { size: A4 landscape; margin: 12mm; }
}

/* Inline-edit selects in de planregels-tabel (soort werk / discipline / status) — pill-look met dropdown */
.o477-pl-inline-sel {
  border: 0;
  border-radius: 6px;
  padding: 4px 22px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%), linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 140px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.o477-pl-inline-sel:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.o477-pl-inline-sel option { background: #fff; color: var(--text); font-weight: 500; }
.o477-pl-inline-status { text-transform: capitalize; }

.o477-pl-bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid var(--warning);
  border-radius: var(--radius);
  font-size: 13px;
}
.o477-pl-bulk-count { font-weight: 500; color: var(--text); margin-right: 4px; }
.o477-pl-bulk-bar select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: #fff; min-width: 140px;
}
.o477-pl-bulk-bar .o477-btn { padding: 6px 12px; font-size: 13px; }
.o477-pl-bulk-datum { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); white-space: nowrap; }
.o477-pl-bulk-datum input[type=date] {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: #fff;
}
/* Tekst-/nummervelden in de bulk-balk (groep, uren, kostprijs, VKP): zelfde
   omlijning + radius als de selects en het datumveld ernaast. */
.o477-pl-bulk-bar input[type=text],
.o477-pl-bulk-bar input[type=number] {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: #fff;
}
.o477-pl-bulk-bar label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Selectie-checkboxes planregels — groter + huisstijlkleur, makkelijker (touch-)aanvinken */
.o477-pl-sel, #o477-pl-sel-all {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); vertical-align: middle; margin: 0;
}

/* Verplicht-asterisk indicator op formulier-labels */
.o477-req {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}

/* Uren-invoerveld + "Hele dag"-pil: twee gelijke lichtgroene pillen naast elkaar (planning + planregels edit-modals) */
.o477-uren-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 360px;
  align-items: stretch;
  margin-top: 3px;
  margin-bottom: 14px; /* vervangt de onderspacing die de losse .o477-modal input bood */
}
.o477-uren-paar .o477-uren-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  margin: 0; /* override .o477-modal input margin-bottom:14px → anders korter dan de pil onder align-items:stretch */
  padding: 7px 10px;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
}
.o477-uren-paar .o477-heledag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 38px;
  margin: 0; /* override .o477-modal label margin-bottom:4px → gelijke hoogte met het uren-veld */
  padding: 7px 12px;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.o477-uren-paar .o477-heledag input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: #22c55e; cursor: pointer; }
.o477-uren-paar .o477-heledag.is-on { background: #22c55e; color: #fff; border-color: #22c55e; }

/* ======================
   PROJECT-DETAIL — Planregels foto-strip
====================== */
.o477-pd-foto-strip {
  display: flex; align-items: center; gap: 4px;
}
.o477-pd-foto-thumb {
  display: block;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f3f4f6;
  flex-shrink: 0;
}
.o477-pd-foto-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.o477-pd-foto-thumb:hover {
  border-color: var(--primary);
  transform: scale(1.05);
  transition: all var(--transition);
}
.o477-pd-foto-more {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 2px 6px; background: var(--border-light); border-radius: var(--radius-sm);
}

/* ======================
   PLANREGEL-MODAL — checklist + foto's + na-werk-sectie
====================== */
.plm-section {
  margin: 16px 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-light);
}
.plm-section-na {
  margin-top: 20px;
  padding: 16px;
  background: #faf9f6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.plm-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
/* Checklist */
#plm-wz-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.plm-wz-row {
  display: flex; align-items: center; gap: 8px;
}
.plm-wz-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--primary);
}
.plm-wz-row .plm-wz-tekst {
  flex: 1; min-width: 0;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px;
}
.plm-wz-row .plm-wz-tekst:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,164,164,0.1);
}
.plm-wz-del {
  width: 28px; height: 28px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--danger); cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.plm-wz-del:hover {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.plm-wz-add {
  margin-top: 4px; font-size: 13px;
}
/* Upload-knoppen per type (bovenaan de bijlagen-sectie) */
.plm-bijlagen-uploaders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.plm-bijlage-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.plm-bijlage-upload-btn:hover {
  border-color: var(--primary, #01A4A4);
  background: #ecfeff;
}
.plm-bijlage-upload-btn.is-uploading {
  opacity: 0.6;
  pointer-events: none;
}
.plm-bijlage-wrap {
  position: relative;
}
.plm-bijlage-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.plm-bijlage-del:hover { background: var(--danger, #cf2e2e); }

/* Planregel-bijlagen (toon Projectbon / Opdracht / Foto's voor / Werklijst) */
.plm-section-bijlagen {
  background: #f8fafc;
  border-left: 3px solid var(--primary, #01A4A4);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 12px 0;
}
.plm-bijlagen-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.plm-bijlage-groep {
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
}
.plm-bijlage-groep-titel {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark, #017a7a);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plm-bijlage-count {
  background: #ecfeff;
  color: #017a7a;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.plm-bijlage-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.plm-bijlage-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plm-bijlage-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.plm-bijlage-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.plm-bijlage-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 11px;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 80px;
  gap: 4px;
}
.plm-bijlage-file:hover {
  border-color: var(--primary, #01A4A4);
  background: #ecfeff;
}
.plm-bijlage-icon {
  font-size: 28px;
  line-height: 1;
}
.plm-bijlage-naam {
  word-break: break-word;
  line-height: 1.2;
  font-weight: 500;
}
@media (max-width: 480px) {
  .plm-bijlage-items {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .plm-bijlage-file { font-size: 10px; padding: 8px 6px; min-height: 70px; }
  .plm-bijlage-icon { font-size: 22px; }
}

/* Foto-grid */
.plm-fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.plm-foto {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #f3f4f6;
}
.plm-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.plm-foto-del {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.65); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.plm-foto-del:hover { background: var(--danger); }
.plm-foto-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.plm-foto-actions label.o477-btn { cursor: pointer; margin: 0; }
.plm-foto-status {
  font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.plm-empty-hint {
  padding: 12px; background: var(--border-light); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;
}
/* Auto-grow textareas */
textarea.plm-auto {
  resize: vertical;
  min-height: 48px;
  overflow: hidden;  /* groeit vanzelf via JS */
  transition: height 0.1s ease;
}

/* === Planregels bulk-bewerken === */
.o477-pr-bulkbar {
  background: linear-gradient(135deg, #E0F7F7 0%, #ffffff 100%);
  border: 1px solid #a7e7e7;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(1, 164, 164, 0.08);
}
.o477-pr-bulkbar-head {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--primary-dark, #017a7a);
  margin-bottom: 10px;
  font-weight: 600;
}
.o477-pr-bulkbar-head b {
  color: var(--primary, #01A4A4);
  font-size: 16px;
  margin-right: 4px;
}
.o477-pr-bulkbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.o477-pr-bulkbar-row label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 2px;
}
.o477-pr-bulkbar-row select,
.o477-pr-bulkbar-row input {
  padding: 6px 8px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  min-width: 120px;
}
.o477-pr-bulkbar-row button.o477-btn-primary {
  margin-left: auto;
  padding: 8px 16px;
}
.o477-pr-row.is-selected td {
  background: #ecfeff !important;
}
.o477-pr-row.is-selected td:first-child {
  border-left: 3px solid var(--primary, #01A4A4);
}

/* ======================
   DASHBOARD-HEADER — bedrijfsnaam + account
====================== */
.o477-dash-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #E0F7F7 0%, #ffffff 100%);
  border: 1px solid #a7e7e7;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(1, 164, 164, 0.06);
}
.o477-dash-bedrijfsnaam {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark, #017a7a);
  line-height: 1.2;
}
.o477-dash-ondertitel {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
}
.o477-dash-account {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Welkomstbanner onderaan dashboard — dynamisch met tenant-korte-naam */
.o477-dash-banner {
  margin-top: 64px;
  padding: 40px 32px;
  background: #faf7f1;
  border-radius: 10px;
  text-align: center;
}
.o477-dash-banner-title {
  margin: 0;
  font-size: 32pt;
  color: var(--primary-dark);
  line-height: 1.15;
  font-weight: 800;
}
.o477-dash-banner-kort {
  color: var(--primary);
}
.o477-dash-account strong {
  color: var(--text);
  font-weight: 600;
}

/* ======================
   DASHBOARD-TEGELS — vaste grootte
====================== */
.o477-dash-grid {
  display: grid;
  /* Compact, links uitgelijnd: vaste tegelbreedte (~6 op een gangbaar breed scherm), auto-fill zodat
     een groep met weinig tegels niet paginabreed uitrekt maar strak links blijft staan. */
  grid-template-columns: repeat(auto-fill, minmax(175px, 200px));
  justify-content: start;
  gap: 16px;
}
.o477-dash-tile {
  display: block;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  color: var(--text);
  text-decoration: none;
}
.o477-dash-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
}
.o477-dash-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}
.o477-dash-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.2px;
}
/* Mobile: compactere tegels, ~2 per rij */
@media (max-width: 720px) {
  .o477-dash-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .o477-dash-tile { padding: 20px 18px; }
  .o477-dash-icon { font-size: 30px; margin-bottom: 8px; }
  .o477-dash-label { font-size: 15px; }
}

/* ======================
   DASHBOARD-GROEPEN — inklapbare secties met kop
====================== */
.o477-dash-tools {
  display: flex;
  gap: 8px;
  margin: 16px 0 10px;
}
.o477-dash-tool {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark, #017a7a);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.o477-dash-tool:hover {
  background: rgba(1, 164, 164, 0.08);
  border-color: var(--primary-light);
}
.o477-dash-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}
.o477-dash-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.o477-dash-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #E0F7F7 0%, #ffffff 100%);
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.o477-dash-group.is-collapsed .o477-dash-group-head {
  border-bottom-color: transparent;
}
.o477-dash-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark, #017a7a);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.o477-dash-group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(1, 164, 164, 0.10);
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 22px;
  text-align: center;
}
.o477-dash-group-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform var(--transition);
}
.o477-dash-group.is-collapsed .o477-dash-group-chevron {
  transform: rotate(-90deg);
}
.o477-dash-group .o477-dash-grid {
  padding: 16px 18px 18px;
}
.o477-dash-group.is-collapsed .o477-dash-grid {
  display: none;
}

/* === Externe dashboard-tegels (BvR Weekcijfers / Bezettingsgraad) === */
.o477-ext-dashboards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}
.o477-ext-tile {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.o477-ext-tile:hover {
  border-left-color: var(--accent-warm);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.o477-ext-icon { font-size: 32px; flex-shrink: 0; }
.o477-ext-body { flex: 1; min-width: 0; }
.o477-ext-title { font-size: 15px; font-weight: 700; color: var(--primary-dark); margin-bottom: 2px; }
.o477-ext-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.35; margin-bottom: 4px; }
.o477-ext-url {
  font-size: 10px;
  color: var(--text-muted);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.o477-ext-arrow { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.o477-ext-tile:hover .o477-ext-arrow { color: var(--accent-warm); }

/* ======================
   RAPPORTEN — Nieuwe dashboards (Omzet / Rendement / Bezettingsgraad)
====================== */
.o477-rap-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.o477-rap-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: -1px;
  transition: all var(--transition);
}
.o477-rap-tab:hover { color: var(--primary-dark); background: var(--border-light); }
.o477-rap-tab.is-active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  background: var(--surface);
}
.o477-rap-toolbar { flex-wrap: wrap; gap: 16px; }
.o477-rap-toolbar-item { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.o477-rap-toolbar-item input,
.o477-rap-toolbar-item select { margin: 0; }

.o477-rap-panel { animation: o477-rap-fadein 0.18s ease-out; }
@keyframes o477-rap-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.o477-rap-h2 {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
}
.o477-rap-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 960px) {
  .o477-rap-grid2 { grid-template-columns: 1fr; }
}

/* Bar-chart varianten voor rapporten */
.o477-bar-chart-tall { height: 260px; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); padding: 12px 12px 32px; align-items: end; }
.o477-bar-pair { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end; }
.o477-bar-stack { display: flex; align-items: end; gap: 2px; width: 100%; justify-content: center; }
.o477-bar-omzet { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); width: 14px; }
.o477-bar-bw    { background: linear-gradient(180deg, var(--accent-warm), var(--accent-warm-dark)); width: 10px; opacity: 0.85; }

.o477-rap-legend { display: flex; gap: 18px; padding: 8px 4px 4px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.o477-rap-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.o477-rap-legend-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.06); }
.o477-rap-legend-omzet { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); }
.o477-rap-legend-bw    { background: linear-gradient(180deg, var(--accent-warm), var(--accent-warm-dark)); }

/* Marge-kleuren in tabel-cellen */
.o477-marge-groen { color: #047857; font-weight: 600; }
.o477-marge-geel  { color: #b45309; font-weight: 600; }
.o477-marge-oranje{ color: #c2410c; font-weight: 600; }
.o477-marge-rood  { color: #b91c1c; font-weight: 700; }
.o477-marge-nvt   { color: var(--text-muted); }

/* Bezettingsgraad heatmap */
.o477-bez-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.o477-bez-table { min-width: 800px; }
.o477-bez-table th.o477-bez-wk,
.o477-bez-table td.o477-bez-cell {
  width: 56px;
  min-width: 56px;
  text-align: right;
  padding: 8px 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.o477-bez-table th.o477-bez-name,
.o477-bez-table td.o477-bez-name { min-width: 200px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.o477-bez-table tbody tr:hover td.o477-bez-name { background: #fafbfc; }
.o477-bez-table th.o477-bez-tot,
.o477-bez-table td:nth-child(2) { min-width: 70px; }
.o477-bez-table th.o477-bez-gem,
.o477-bez-table td.o477-bez-gem-cell { min-width: 70px; font-weight: 700; }
.o477-bez-type {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Totaal-rij in rapporten-tabel */
.o477-row-totaal { font-weight: 700; background: var(--bg-alt); }
.o477-row-totaal td { border-top: 2px solid var(--border); }

/* Planning empty-state helper voor admins (boven het grid) */
.o477-plan-empty-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(1,164,164,0.06);
  border: 1px solid rgba(1,164,164,0.25);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 14px;
}
.o477-plan-empty-banner .o477-plan-empty-icon { font-size: 32px; }
.o477-plan-empty-banner b { color: var(--primary-dark); }
.o477-plan-empty-banner small { color: var(--text-secondary); font-size: 13px; }
.o477-plan-empty-banner a { color: var(--primary); font-weight: 600; }

/* === TAAK-DETAIL: drop-zone + staged-list in upload-modal === */
.td-up-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 12px;
  text-align: left;
}
.td-up-dropzone:hover,
.td-up-dropzone.is-dragover {
  border-color: var(--primary);
  background: rgba(1, 164, 164, 0.08);
}
.td-up-dropzone-icon { font-size: 36px; flex-shrink: 0; }
.td-up-dropzone-text { font-size: 14px; color: var(--text); line-height: 1.4; }
.td-up-dropzone-text small { color: var(--text-muted); font-size: 12px; }

.td-up-staged {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 6px;
}
.td-up-staged-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 4px;
  background: var(--bg-alt);
}
.td-up-staged-icon { font-size: 18px; flex-shrink: 0; }
.td-up-staged-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-up-staged-size { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.td-up-staged-del {
  background: transparent; border: none; color: var(--danger); font-size: 18px;
  cursor: pointer; width: 22px; height: 22px; border-radius: 50%; line-height: 1;
}
.td-up-staged-del:hover { background: rgba(220, 38, 38, 0.10); }

/* Drop-state op de bestanden-tab zelf — visuele feedback bij sleep over het tab-panel */
[data-td-panel="bestanden"].o477-td-tab-dragover {
  outline: 3px dashed var(--primary);
  outline-offset: -8px;
  background: rgba(1, 164, 164, 0.04);
}

/* ============ TAAKPAGINA — MOBIEL (≤720px): bestanden/links-tabellen → verticale kaarten ============
   Zelfde patroon als de documenten-module: één kaart per rij, dicht = omschrijving + datum,
   ▾-toggle rechtsboven, open = lichtgroene kaart met veldnaam boven elk veld (data-label)
   en actieknoppen verticaal op volle breedte met hun naam (uit het title-attribuut). */
.o477-td-kaart-toggle { display: none; }
@media (max-width: 720px) {
  /* Actie- en filterrijen op de taak- én projectpagina: verticaal op volle breedte.
     (.o477-pd-app dekt beide: taak-detail heeft o477-pd-app + o477-td-app.) */
  .o477-pd-app .o477-pd-actions { flex-direction: column; align-items: stretch; }
  .o477-pd-app .o477-pd-actions .o477-btn { min-height: 40px; justify-content: flex-start; text-align: left; }
  .o477-pd-app .o477-pd-actions input,
  .o477-pd-app .o477-pd-actions select { width: 100%; box-sizing: border-box; min-height: 40px; }
  .o477-pd-app .o477-pd-actions input[type="text"] { font-size: 16px; } /* geen iOS-zoom */

  .o477-td-tabel thead { display: none; }
  .o477-td-tabel, .o477-td-tabel tbody, .o477-td-tabel tr, .o477-td-tabel td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .o477-td-tabel { background: transparent; box-shadow: none; overflow: visible; }
  .o477-td-tabel tbody tr {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
  }
  .o477-td-tabel tbody td { border-bottom: 0; padding: 6px 0; }
  /* Lege-staat-rij ("Geen bestanden." / "Nog geen links...") blijft gewoon zichtbaar. */
  .o477-td-tabel tbody td[colspan] { display: block !important; }

  /* ▾-knop rechtsboven op de kaart; draait om als de kaart open is. */
  .o477-td-kaart-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: #fff; color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; cursor: pointer; padding: 0;
    transition: transform 0.15s ease;
  }
  .o477-td-tabel tbody tr.is-open .o477-td-kaart-toggle {
    transform: rotate(180deg);
    color: var(--primary, #01A4A4);
    border-color: var(--primary, #01A4A4);
    background: #ecfeff;
  }
  /* Dicht: alleen omschrijving (vet) + datum, zonder veldnamen. */
  .o477-td-tabel tbody tr:not(.is-open) > td { display: none; }
  .o477-td-tabel tbody tr:not(.is-open) > td[data-label="Omschrijving"],
  .o477-td-tabel tbody tr:not(.is-open) > td[data-label="Datum"] { display: block; }
  .o477-td-tabel tbody tr:not(.is-open) > td::before { display: none; }
  .o477-td-tabel tbody tr:not(.is-open) > td[data-label="Omschrijving"] {
    font-weight: 600; font-size: 15px; line-height: 1.35;
    padding: 2px 48px 2px 0;
  }
  .o477-td-tabel tbody tr:not(.is-open) > td[data-label="Datum"] {
    font-size: 12px; color: var(--text-muted, #94a3b8);
    padding: 2px 48px 0 0;
  }
  /* Open: lichtgroene kaart (zoals documenten/werkbord). */
  .o477-td-tabel tbody tr.is-open { background: #dcfce7; border-color: #bbf0d0; }
  .o477-td-tabel tbody tr.is-open > td[data-label="Omschrijving"] { padding-right: 48px; font-weight: 600; }
  .o477-td-tabel td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 3px;
  }
  /* Actieknoppen: volle breedte, touch-maat, label uit het title-attribuut achter het icoon. */
  .o477-td-tabel td[data-label="Acties"] .o477-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box;
    margin: 0 0 7px;
  }
  .o477-td-tabel td[data-label="Acties"] .o477-btn:last-child { margin-bottom: 0; }
  .o477-td-tabel td[data-label="Acties"] .o477-btn::after { content: attr(title); font-size: 14px; }
}

/* === TAAK-DETAIL: NOTITIES-TAB (gekoppelde notities uit de Notities-module) === */
.o477-td-not-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 12px;
}
.o477-td-not-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* Standaard alleen de titel (verzoek 18-7); "Tekst openen ▾" klapt de inhoud uit (card.is-open). */
.o477-td-not-body { display: none; }
.o477-td-not-card.is-open .o477-td-not-body { display: flex; flex-direction: column; gap: 6px; }
.o477-td-not-toggle {
  align-self: flex-start; margin: -2px 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--primary-dark, #018585);
}
.o477-td-not-toggle:hover { text-decoration: underline; }
.o477-td-not-titel { font-weight: 600; font-size: 14px; flex-shrink: 0; }
/* Compacte actie-knopjes rechtsonder op de kaart (bewerken / ontkoppelen / open in Notities). */
.o477-td-not-acts { display: inline-flex; gap: 4px; flex-shrink: 0; }
.o477-td-not-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(255, 255, 255, 0.7); color: var(--text);
  font-size: 13px; cursor: pointer; text-decoration: none;
}
.o477-td-not-act:hover { border-color: var(--primary); color: var(--primary); }
.o477-td-not-badge { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.o477-td-not-tekst { font-size: 13px; line-height: 1.45; white-space: normal; word-break: break-word; }
.o477-td-not-check { font-size: 13px; }
.o477-td-not-check.done { color: var(--text-muted); }   /* lichtgrijs i.p.v. doorstrepen (23-8) */
.o477-td-not-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
/* Kleur-swatches in de nieuwe-notitie-modal */
.o477-td-not-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.o477-td-not-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); cursor: pointer; padding: 0;
}
.o477-td-not-swatch.active { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Koppel-modal: lijst van eigen ongekoppelde notities */
.o477-td-not-koplijst { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.o477-td-not-koprow {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; text-align: left; font-size: 13px;
}
.o477-td-not-koprow:hover { border-color: var(--primary); }
.o477-td-not-koprow span { color: var(--text-muted); font-size: 12px; }

/* === PROJECT AANTEKENINGEN (rich-text notitie per project) === */
.o477-pd-aant {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0;
}
.o477-pd-aant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.o477-pd-aant-titel {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark);
  flex: 1;
  min-width: 200px;
}
.o477-pd-aant-actions { display: flex; gap: 8px; }

.o477-pd-aant-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.o477-pd-aant-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.o477-pd-aant-grouplbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-right: 4px;
}
.o477-pd-aant-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.o477-pd-aant-tool:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.o477-pd-aant-tool:active { background: rgba(1,164,164,0.10); }
.o477-pd-aant-size { padding: 5px 8px; min-width: 70px; }
.o477-pd-aant-color {
  position: relative;
  cursor: pointer;
}
.o477-pd-aant-color input[type=color] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
.o477-pd-aant-tip {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  font-style: italic;
}
.o477-pd-aant-status {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  min-width: 18px;
}
.o477-pd-aant-status.pending { color: var(--text-muted); }
.o477-pd-aant-status.ok      { color: var(--success); }
.o477-pd-aant-status.err     { color: var(--danger); }

/* === OPMAAKKNOPPEN ACHTER EEN HAMBURGERMENU (23-8) ===
   De ☰-knop staat in de kopregel naast Inklappen/Leesweergave/Word/Mail.
   Desktop: de balk klapt gewoon open/dicht boven het schrijfvlak.
   Mobiel: de balk wordt een paneel dat van onderen inschuift. */
.o477-pd-aant-mtoggle { display: none; }        /* oude brede balk-knop, niet meer gebruikt */
.o477-aant-ham { font-size: 17px; line-height: 1; padding: 6px 12px; }
.o477-aant-ham.is-on { background: #e0f7f7; border-color: #01A4A4; color: #018585; }
.o477-aant-tb-sluit { display: none; }
/* Balk staat dicht tot de hamburger hem opent (ook op desktop) */
.o477-pd-aant .o477-pd-aant-toolbar { display: none; }
.o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar { display: flex; }

/* Zwevend selectiebalkje uitgezet (23-8): opmaak gaat via het ☰-menu. */
.o477-aant-bubble { display: none !important; }

/* === HAMBURGERMENU ALLEEN OP MOBIEL (23-8, verduidelijkt op verzoek Jannie) ===
   PC: de opmaakbalk blijft gewoon horizontaal boven het schrijfvlak staan en de
   ☰-knop is daar overbodig. Telefoon: ☰ opent een verticaal menu (bottom sheet). */
.o477-aant-ham { display: none; }              /* alleen ≤720px zichtbaar */
.o477-aant-tb-sluit { display: none; }
.o477-pd-aant .o477-pd-aant-toolbar { display: flex; }   /* pc: altijd zichtbaar */

/* Kopregel: op welke plek in het document werkt de opmaak? (23-8, alleen mobiel) */
.o477-aant-tb-plek { display: none; }

/* Voorloop-symbool van een opmaakknop (⇕, ↕), door de editor in een eigen span
   gezet zodat het in het mobiele menu in dezelfde icoonkolom valt als de
   <b>-letters. Op een breed scherm houdt de marge de knop er hetzelfde uit. */
/* Afsluiter na tekst die naast een zwevende foto staat: alles daarna begint
   weer onder de foto, over de volle breedte. */
.o477-aant-clear { clear: both; height: 0; line-height: 0; font-size: 0; }

/* === Mail: meerdere mails aanvinken (23-8) ===
   Rijen met een vinkje krijgen een lichte teal achtergrond; de balk met de
   bulk-acties valt op met een teal rand zodat duidelijk is dat de knoppen op
   de selectie slaan en niet op de hele lijst. */
.o477-mail-vinkcel { cursor: pointer; }
.o477-table tbody tr.is-gekozen > td { background: #ecfeff; }
.o477-table tbody tr.is-gekozen.ongelezen > td { background: #e0f7f7; }
.o477-mail-bulkbalk {
  border: 1px solid var(--primary, #01A4A4);
  background: #f0fdfa;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
}

/* === PDF-bijlage in de tekst (23-8) ===
   Een PDF komt niet als plaatje maar als klikbaar kaartje in het document:
   miniatuur van pagina 1, bestandsnaam en aantal pagina's. contenteditable=
   "false" op het kaartje houdt het als één geheel bij het typen. */
.o477-pd-aant-area .o477-aant-pdf {
  display: inline-flex; align-items: center; gap: 10px; vertical-align: middle;
  max-width: 100%; margin: 8px 0; padding: 8px 14px 8px 8px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: var(--surface-2, #f8fafc);
  color: var(--text, #0f172a); text-decoration: none;
  font-size: 12pt; line-height: 1.3; cursor: pointer;
}
.o477-pd-aant-area .o477-aant-pdf:hover { border-color: #01A4A4; background: #f0fdfa; }
.o477-aant-pdf-thumb {
  width: 54px; height: 72px; flex: none; object-fit: cover; object-position: top center;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fff;
}
.o477-aant-pdf-ico { width: 54px; flex: none; text-align: center; font-size: 30px; }
.o477-aant-pdf-tekst { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.o477-aant-pdf-naam { font-weight: 700; overflow-wrap: anywhere; }
.o477-aant-pdf-meta { font-size: 10pt; color: var(--muted, #64748b); }
/* ⤢ rechts op het kaartje: vouwt de hele PDF als paginabeelden uit in de
   tekst. Het teken komt uit CSS en niet uit de HTML, zodat het in Word, mail
   en de leesweergave niet als los kastje meeloopt. */
.o477-aant-pdf-vouw {
  flex: none; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; padding: 0 4px 0 10px; min-width: 30px;
  border-left: 1px solid var(--border, #e2e8f0);
  color: var(--muted, #64748b); font-size: 15px; line-height: 1;
}
.o477-pd-aant-area .o477-aant-pdf-vouw::after { content: "\2922"; }
.o477-pd-aant-area .o477-aant-pdf.is-uitgevouwen .o477-aant-pdf-vouw::after { content: "\2921"; }
.o477-pd-aant-area .o477-aant-pdf-vouw:hover { color: #01A4A4; }

/* Het uitgevouwen vel: alle pagina's onder elkaar, als één blok. Staat in de
   opgeslagen HTML, dus het loopt vanzelf mee in leesweergave, Print PDF, Word
   en de mail-bijlage. */
.o477-aant-pdf-vel { margin: 6px 0 14px; }
.o477-aant-pdf-vel-kop {
  font-size: 10pt; color: var(--muted, #64748b); margin: 0 0 6px;
}
.o477-aant-pdf-pag {
  display: block; width: 100%; max-width: 900px; height: auto;
  margin: 0 0 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  background: #fff; page-break-inside: avoid; break-inside: avoid;
}
/* Op een telefoon is naast elkaar te smal — daar komt de foto weer boven de
   tekst te staan, met behoud van de instelling voor het grote scherm. */
@media (max-width: 560px) {
  .o477-pd-aant-area img[style*="float"] {
    float: none !important; width: 100% !important; margin: 8px 0 !important;
  }
}
.o477-aant-mobar { display: none; }
.o477-aant-ico { margin-right: .3em; }
/* Naam van een icoon-knop: alleen zichtbaar in het verticale menu op mobiel. */
.o477-aant-mlabel { display: none; }

@media (max-width: 720px) {
  /* Hamburger: groot genoeg om met een duim te raken (44px-richtlijn) */
  .o477-aant-ham {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 10px;
    font-size: 14px; line-height: 1;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .o477-aant-ham.is-on { background: #e0f7f7; border-color: #01A4A4; color: #018585; }
  /* Balk staat dicht tot de hamburger hem opent */
  .o477-pd-aant .o477-pd-aant-toolbar { display: none; }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar { display: flex; }
  /* Menu als raster van blokjes (23-8): elk item een vierkantje met het icoon
     boven een kort label. Vier op een rij leest sneller dan een lange lijst en
     je hoeft er niet doorheen te scrollen. */
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px;
  }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-group {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    width: 100%; align-items: stretch;
  }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-grouplbl {
    grid-column: 1 / -1;
    padding: 8px 2px 2px; margin-top: 4px; border-top: 1px solid #eef2f7; letter-spacing: .06em;
  }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-group:first-child > .o477-pd-aant-grouplbl { border-top: 0; margin-top: 0; }
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: auto; min-height: 66px; padding: 8px 4px; margin: 0;
    background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
    text-align: center; font-size: 11px; line-height: 1.2; color: #0f172a;
    overflow-wrap: anywhere;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool:active,
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool.is-on {
    background: #e0f7f7; border-color: #01A4A4; color: #018585;
  }
  /* Icoon groot bovenin het blokje, label eronder */
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool > .o477-aant-ico,
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool > b {
    flex: 0 0 auto; font-size: 19px; line-height: 1; margin: 0;
  }
  .o477-pd-aant.o477-aant-tb-open .o477-aant-mlabel { display: inline; }
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool > .o477-aant-mlabel,
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool > .o477-aant-rest { order: 3; }
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool > .o477-aant-color-swatch {
    order: 2; margin: 0; width: 26px; height: 5px; border-radius: 3px;
  }
  /* Heeft een blokje een echte naam, dan is losse tekst als "▾" alleen ruis. */
  .o477-pd-aant.o477-aant-tb-open button.o477-pd-aant-tool:has(.o477-aant-mlabel) > .o477-aant-rest {
    display: none;
  }
  /* De lettergrootte is een keuzelijst, geen blokje: volle breedte eronder. */
  .o477-pd-aant.o477-aant-tb-open select.o477-pd-aant-tool {
    grid-column: 1 / -1; width: 100%; min-height: 42px; font-size: 14px;
  }
  /* Toolbar zelf: gelijke marge links en rechts */
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar { padding-left: 10px; padding-right: 10px; }
  .o477-pd-aant.o477-aant-tb-open .o477-aant-tb-plek { margin-left: 0; margin-right: 0; }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-status,
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-tip { display: none; }
  /* Kopregel met de plek waar de opmaak op werkt */
  .o477-pd-aant.o477-aant-tb-open .o477-aant-tb-plek {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    padding: 8px 10px; margin: 0 0 4px;
    background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 8px;
    font-size: 12px; line-height: 1.4;
  }
  .o477-aant-tb-plek-soort { font-weight: 700; color: #018585; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
  .o477-aant-tb-plek-tekst { color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .o477-aant-tb-plek-sel { color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 700; }
  .o477-aant-tb-plek-leeg { color: #64748b; font-style: italic; }
  /* Paneel van onderen: los van de paginascroll, met eigen sluitknop */
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 10060;
    width: auto;                      /* volle breedte, niet het smalle desktop-menu */
    max-height: 62vh; overflow-y: auto;
    padding: 40px 12px 16px;
    background: #fff;
    border-top: 1px solid var(--border, #e2e8f0);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(15,23,42,.22);
  }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-toolbar::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 999px; background: #cbd5e1;
  }
  .o477-pd-aant.o477-aant-tb-open .o477-aant-tb-sluit {
    display: block; position: absolute; top: 6px; right: 10px;
    background: none; border: 0; font-size: 20px; color: #64748b; padding: 4px 8px; cursor: pointer;
  }
  /* Knoppen in het paneel ruim aantikbaar */
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-group { gap: 2px; }
  .o477-pd-aant.o477-aant-tb-open .o477-pd-aant-tool { min-height: 46px; font-size: 15px; padding: 10px 12px; }
  /* lange tip-regel is te rommelig op een smal scherm */
  .o477-pd-aant-tip { display: none; }

  /* === Mobiel: foto's altijd binnen handbereik (23-8) ===
     De opmaakbalk staat op mobiel ingeklapt; camera en fotobibliotheek zijn
     juist de knoppen die je onderweg nodig hebt. Die krijgen daarom een eigen
     rij vlak boven het schrijfvlak, ook als de rest van de balk dicht is. */
  .o477-pd-aant [data-aant-camera],
  .o477-pd-aant [data-aant-foto] {
    display: inline-flex !important;
    position: static;
    flex: 1 1 0;
    justify-content: center;
    min-height: 46px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: #e0f7f7;
    border-color: #01A4A4;
    color: #018585;
  }
  /* Kopknoppen op een telefoon: twee per rij in een vast raster. Op één rij
     passen vijf pillen niet — dan werd het label onder het icoon gebroken en
     viel Mail buiten beeld (23-8). Mail pakt de volle breedte zodat er geen
     gat overblijft. */
  .o477-pd-aant-head { padding: 12px 10px; gap: 10px; }
  .o477-pd-aant-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .o477-pd-aant-actions > .o477-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; min-height: 44px; padding: 8px 10px;
    white-space: nowrap; font-size: 14px; line-height: 1;
  }
  .o477-pd-aant-actions > [data-aant-mail] { grid-column: 1 / -1; }
  /* De hamburger vult hier gewoon zijn cel; het vaste 46px-raakvlak geldt
     alleen als hij los in een rij staat. */
  .o477-pd-aant-actions > .o477-aant-ham { min-width: 0; width: auto; }
  .o477-pd-aant-actions .o477-aant-mlabel { display: inline; }
  /* Zwevende opmaakbalk boven het toetsenbord (23-8). Verschijnt zodra je in
     de tekst bezig bent; JS schuift hem met visualViewport omhoog zodat het
     toetsenbord hem niet afdekt. */
  .o477-pd-aant.o477-aant-typt .o477-aant-mobar {
    display: flex; align-items: center; gap: 5px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10055;
    padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .14);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .o477-aant-mobar button {
    flex: 1 1 34px; max-width: 56px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1;
    background: #f8fafc; border: 1px solid var(--border, #e2e8f0);
    border-radius: 9px; color: #0f172a;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .o477-aant-mobar button:active { background: #e0f7f7; border-color: #01A4A4; }
  .o477-aant-mobar button b { font-size: 16px; }
  .o477-aant-mobar [data-aant-mobar-menu] { background: #e0f7f7; border-color: #01A4A4; color: #018585; }
  .o477-aant-mobar .o477-aant-mobar-klaar {
    margin-left: auto; position: sticky; right: 0;
    background: #01A4A4; border-color: #01A4A4; color: #fff; font-weight: 700;
  }
  /* Ruimte onder de tekst zodat de balk de laatste regels niet afdekt */
  .o477-pd-aant.o477-aant-typt .o477-pd-aant-area { padding-bottom: var(--o477-mobar-hoogte, 72px); }
  .o477-pd-aant .o477-aant-fotorij {
    display: flex; gap: 8px; padding: 8px 10px 0;
    background: var(--surface, #fff);
  }
  /* Toolbar-knoppen groter aantikbaar op een telefoon */
  .o477-pd-aant-toolbar .o477-pd-aant-tool { min-height: 40px; font-size: 14px; }
  .o477-pd-aant-area { padding: 14px 14px; }
}

.o477-pd-aant-area {
  min-height: 320px;
  padding: 16px 22px;
  /* Standaard tekst (Tekst-knop / paragraaf) = 16pt — aanpasbaar via lettergrootte-select in toolbar */
  font-size: 16pt;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  outline: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.o477-pd-aant-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}
/* Foto's in het aantekeningen-document (📷-knop / plakken / slepen) */
.o477-pd-aant-area img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 8px 0;
  cursor: grab;   /* handje: klik = maat-bubble, vasthouden = verslepen */
}
.o477-pd-aant-area img:active { cursor: grabbing; }
.o477-pd-aant-area img.is-slepen { opacity: .5; }
/* Schaalbare foto's (21-8): klik = maat-bubble; actieve foto krijgt een rand */
.o477-pd-aant-area img.is-resizing { outline: 2px dashed #01A4A4; outline-offset: 2px; }
/* Nieuwe titel na een zwevende foto begint altijd onder de foto */
.o477-pd-aant-area h2, .o477-pd-aant-area h3, .o477-pd-aant-area h4 { clear: both; }
/* 📄 Paginaeinde (22-8): zichtbare markering in de editor; bij Print PDF
   een echte pagina-overgang (zie print-stylesheet). Klik = verwijderen. */
.o477-pd-aant-area hr.o477-aant-pagebreak {
  border: none; border-top: 2px dashed #01A4A4; margin: 24px 0;
  position: relative; overflow: visible; cursor: pointer;
}
.o477-pd-aant-area hr.o477-aant-pagebreak::after {
  content: '📄 Paginaeinde'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--surface, #fff); color: #01A4A4; font-size: 11px; font-weight: 700;
  padding: 2px 10px; letter-spacing: .04em; border: 1px solid #01A4A4; border-radius: 999px; white-space: nowrap;
}
.o477-pd-aant-area hr.o477-aant-pagebreak:hover { border-top-color: #dc2626; }
.o477-pd-aant-area hr.o477-aant-pagebreak:hover::after {
  content: '✕ Paginaeinde verwijderen'; color: #dc2626; border-color: #dc2626;
}
/* Mobiel (21-8): desktop-procenten worden op een smal scherm te klein —
   geschaalde foto's vullen daar de breedte en floats (tekst ernaast) gaan
   uit; alleen "naast elkaar" (inline-block) behoudt zijn eigen maat zodat
   foto-paren naast elkaar blijven staan. Foto's zonder maat blijven op
   natuurlijke grootte (anders zouden kleine plaatjes uitvergroten). */
@media (max-width: 720px) {
  .o477-pd-aant-area img[style*="width"]:not([style*="inline-block"]) {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 !important;
  }
}
.o477-aant-img-bubble {
  position: fixed; z-index: 100000; display: flex; flex-direction: column; gap: 6px;
  background: #0f172a; color: #fff; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 12px;
}
.o477-aant-img-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o477-aant-img-bubble input[type="range"] { width: 110px; accent-color: #01A4A4; }
.o477-aant-img-bubble button {
  background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.o477-aant-img-bubble button:hover { background: #01A4A4; border-color: #01A4A4; color: #fff; }
.o477-aant-img-bubble button.is-actief { background: #01A4A4; border-color: #01A4A4; color: #fff; }
.o477-aant-img-pct { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
/* Vrij schalen: teal sleep-hoekje rechtsonder op de geselecteerde foto */
.o477-aant-img-handle {
  position: fixed; z-index: 100001; width: 16px; height: 16px;
  background: #01A4A4; border: 2px solid #fff; border-radius: 4px;
  cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4); touch-action: none;
}
/* Prullenbak-knop in het bewerkingsbalkje */
.o477-aant-img-bubble button.o477-aant-img-del { margin-left: auto; border-color: #7f1d1d; background: #450a0a; }
.o477-aant-img-bubble button.o477-aant-img-del:hover { background: #dc2626; border-color: #dc2626; }
/* ✏️ Teken-overlay (21-8): tekenen op een leeg vel of over een foto */
.o477-teken-ov { position: fixed; inset: 0; z-index: 100002; background: rgba(15,23,42,.88); display: flex; flex-direction: column; }
.o477-teken-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0f172a; flex-wrap: wrap; }
.o477-teken-bar button {
  background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px;
  padding: 6px 10px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.o477-teken-bar button:hover { border-color: #01A4A4; }
.o477-teken-bar button.is-actief { background: #134e4a; border-color: #01A4A4; }
.o477-teken-kleur { width: 28px; height: 28px; padding: 0 !important; border-radius: 50% !important; }
.o477-teken-kleur.is-actief { box-shadow: 0 0 0 3px #01A4A4; }
.o477-teken-dikte { width: 34px; height: 34px; }
.o477-teken-ok { background: #01A4A4 !important; border-color: #01A4A4 !important; color: #fff !important; font-weight: 600; }
.o477-teken-vlak { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; min-height: 0; }
.o477-teken-vlak canvas {
  max-width: 100%; max-height: 100%; background: #fff; touch-action: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: crosshair; border-radius: 4px;
}
/* Mobiel: geplakte Excel/Word-tabellen dragen vaste width-attributen
   (width="397" + <col>) — auto-layout rekt dan het schrijfvlak breder dan
   het scherm en foto's in zo'n cel schuiven uit beeld. table-layout:fixed
   op 100% laat de cellen (en dus img max-width:100%) naar het scherm krimpen. */
@media (max-width: 720px) {
  .o477-pd-aant-area table { width: 100% !important; table-layout: fixed; }
  .o477-pd-aant-area col { width: auto !important; }
  .o477-pd-aant-area td, .o477-pd-aant-area th { width: auto !important; height: auto !important; }
}
/* === h2 KOPtitel — hoogste inklap-niveau (klap alles in, ook h3/h4) === */
/* Standaard 24pt — aanpasbaar via lettergrootte-select in toolbar */
/* Groep (h1) — bovenste laag boven de KOP (23-8) */
.o477-pd-aant-area h1 {
  color: #01A4A4;
  font-size: 28pt;
  font-weight: 800;
  margin: 26px 0 12px;
  padding-left: 32px;
  padding-bottom: 8px;
  border-bottom: 3px solid #01A4A4;
  position: relative;
  cursor: text;
}
.o477-pd-aant-area h1:first-child { margin-top: 0; }
.o477-pd-aant-area h1::before {
  content: '▾';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 24px; text-align: center; font-size: 15px; line-height: 1;
  color: #01A4A4; background: rgba(1,164,164,0.10); border-radius: 4px;
  padding: 3px 0; cursor: pointer; user-select: none;
}
.o477-pd-aant-area h1:hover::before { background: rgba(1,164,164,0.22); }
.o477-pd-aant-area h1.o477-aant-collapsed::before { content: '▸'; }
.o477-pd-aant-area h1.o477-aant-collapsed { opacity: .92; }

.o477-pd-aant-area h2 {
  color: #0f172a;
  font-size: 26pt;
  font-weight: 800;
  margin: 22px 0 10px;
  padding-left: 32px;
  padding-bottom: 6px;
  position: relative;
  border-bottom: 2px solid var(--primary, #01A4A4);
  letter-spacing: -0.01em;
}
.o477-pd-aant-area h2:first-child { margin-top: 0; }
.o477-pd-aant-area h2::before {
  content: '▾';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-60%);
  font-size: 16px;
  color: var(--primary, #01A4A4);
  cursor: pointer;
  user-select: none;
  transition: transform .15s, color .15s, background .15s;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  pointer-events: auto;
  background: rgba(1,164,164,0.10);
  font-weight: 700;
}
.o477-pd-aant-area h2:hover::before { background: rgba(1,164,164,0.20); color: var(--primary-dark, #018585); }
.o477-pd-aant-area h2.o477-aant-collapsed::before {
  transform: translateY(-60%) rotate(-90deg);
}
.o477-pd-aant-area h2.o477-aant-collapsed {
  background: linear-gradient(to bottom, transparent calc(100% - 3px), var(--primary, #01A4A4) calc(100% - 3px));
  padding-bottom: 10px;
}

/* h3 Titel — standaard 18pt, aanpasbaar via toolbar lettergrootte */
.o477-pd-aant-area h3 {
  color: var(--primary-dark);
  font-size: 22pt;
  margin: 18px 0 8px;
  /* Chevron-zone links voor h3-zelf inklap; "⇕ subs"-knop rechts (alleen als h3 h4-subs heeft) */
  position: relative;
  padding-left: 28px;
  padding-right: 80px;
}
.o477-pd-aant-area h3:first-child { margin-top: 0; }
.o477-pd-aant-area h3::before {
  content: '▾';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  user-select: none;
  transition: transform .15s, color .15s, background .15s;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  pointer-events: auto;
  font-weight: normal;
}
.o477-pd-aant-area h3:hover::before { background: rgba(1,164,164,0.10); color: var(--primary-dark); }
/* Chevron rechts: alleen tonen als h3 een class 'has-subs' heeft (gezet door JS).
   Toggle alleen de h4-subs onder déze h3. */
.o477-pd-aant-area h3.o477-h3-has-subs::after {
  content: '⇕ subs';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--accent, #52088c);
  cursor: pointer;
  user-select: none;
  text-align: center;
  opacity: 0.7;
  transition: opacity .15s;
  pointer-events: auto;
  font-weight: 600;
  background: rgba(82,8,140,0.08);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.o477-pd-aant-area h3.o477-h3-has-subs:hover::after { opacity: 1; background: rgba(82,8,140,0.16); }
.o477-pd-aant-area h3.o477-aant-collapsed::before {
  transform: translateY(-50%) rotate(-90deg);
  color: var(--primary);
}
.o477-pd-aant-area h3.o477-aant-collapsed {
  background: linear-gradient(to bottom, transparent calc(100% - 2px), var(--border) calc(100% - 2px));
  padding-bottom: 8px;
}

/* === h4 Subtitel — tweede inklap-niveau === */
/* Standaard 14pt — aanpasbaar via toolbar lettergrootte */
.o477-pd-aant-area h4 {
  color: var(--accent, #52088c);
  /* 23-8: op verzoek even groot als Titel (18pt); het onderscheid met Titel
     zit in de paarse kleur en de extra indent. */
  font-size: 18pt;
  font-weight: 700;
  margin: 14px 0 6px;
  padding-left: 28px;
  position: relative;
  margin-left: 8px;            /* visuele indent t.o.v. h3 */
}
.o477-pd-aant-area h4::before {
  content: '▾';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--accent, #52088c);
  cursor: pointer;
  user-select: none;
  transition: transform .15s, color .15s, background .15s;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  pointer-events: auto;
}
.o477-pd-aant-area h4:hover::before { background: rgba(82,8,140,0.10); }
.o477-pd-aant-area h4.o477-aant-collapsed::before {
  transform: translateY(-50%) rotate(-90deg);
  color: var(--accent, #52088c);
}
.o477-pd-aant-area h4.o477-aant-collapsed {
  background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--border-light, #e2e8f0) calc(100% - 1px));
  padding-bottom: 6px;
}
/* Verborgen content onder ingeklapte titels. Class i.p.v. inline style="display:none",
   omdat wp_kses inline style strip bij opslaan — class blijft wel behouden. */
.o477-pd-aant-area .o477-aant-hidden { display: none !important; }

/* === Hierarchie-indent: regels onder een KOP/Titel/Subtitel inspringen ===
   Set door updateIndents() in JS, op basis van laatste heading-niveau hierboven.
   Niveau 1 = na h2 (KOP), niveau 2 = na h3 (Titel), niveau 3 = na h4 (Subtitel).
   Geen `>` (direct child) — werkt ook voor genestelde paragrafen/cb-lines. */
.o477-pd-aant-area [data-indent="1"] { padding-left: 16px; }
.o477-pd-aant-area [data-indent="2"] { padding-left: 32px; }
.o477-pd-aant-area [data-indent="3"] { padding-left: 48px; }

/* === Vinkje-regel als eigen block (voor sleep-modus + nette structuur) === */
.o477-pd-aant-area .o477-aant-cb-line,
.o477-pd-aant-area .o477-aant-list-line {
  display: block;
  margin: 2px 0;
  min-height: 1.4em;
  line-height: 1.5;
}
.o477-pd-aant-area .o477-aant-cb-line .o477-pd-aant-cb {
  margin-right: 2px;
}
/* Toolbar-knoppen die toggle-modus hebben → turquoise als aan */
.o477-pd-aant-tool.is-on,
.o477-aant-drag-toggle.is-on,
.o477-aant-cb-toggle.is-on {
  background: var(--primary, #01A4A4);
  color: #fff;
  border-color: var(--primary, #01A4A4);
  font-weight: 600;
}

/* === RECHTERMUISKNOP CONTEXT-MENU in aantekeningen-veld === */
.o477-aant-ctxmenu {
  z-index: 99999;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.22);
  padding: 5px 0;
  min-width: 240px;
  max-width: 300px;
  font-size: 13px;
  user-select: none;
  font-family: Inter, Arial, sans-serif;
}
.o477-aant-ctxmenu .ctxmenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .08s;
}
.o477-aant-ctxmenu .ctxmenu-item:hover {
  background: rgba(1,164,164,0.12);
}
.o477-aant-ctxmenu .ctxmenu-ico {
  width: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--primary, #01A4A4);
  flex-shrink: 0;
}
.o477-aant-ctxmenu .ctxmenu-lbl {
  flex: 1;
  color: #2c3e50;
  font-weight: 500;
}
.o477-aant-ctxmenu .ctxmenu-hint {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  font-family: 'Courier New', monospace;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}
.o477-aant-ctxmenu .ctxmenu-sep {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 4px 0;
}

/* === SLIM SELECTIEMENU (zwevend balkje bij tekstselectie, Notion/Word-stijl) === */
/* Donkere pill = duidelijk anders dan de witte boven-toolbar, met pijltje naar de selectie. */
.o477-aant-bubble {
  position: fixed;
  z-index: 99999;
  display: none;            /* JS zet display:flex bij tonen */
  align-items: center;
  gap: 1px;
  padding: 4px;
  background: #1f2937;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.40);
  font-family: Inter, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
.o477-aant-bubble.is-visible { animation: o477-bubble-in .12s ease-out; }
@keyframes o477-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Pijltje naar de selectie — horizontale positie via --bub-arrow (JS) */
.o477-aant-bubble::after {
  content: '';
  position: absolute;
  left: var(--bub-arrow, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border: 7px solid transparent;
}
.o477-aant-bubble:not(.is-below)::after { top: 100%; border-top-color: #1f2937; }   /* balk boven → pijl onder */
.o477-aant-bubble.is-below::after       { bottom: 100%; border-bottom-color: #1f2937; } /* balk onder → pijl boven */
.o477-aant-bubble .o477-bub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1;
  color: #f1f5f9;
  font-family: inherit;
}
.o477-aant-bubble .o477-bub-btn:hover  { background: rgba(255,255,255,0.14); }
.o477-aant-bubble .o477-bub-btn:active { background: rgba(255,255,255,0.24); }
.o477-aant-bubble .o477-bub-k { font-weight: 800; }
.o477-aant-bubble .o477-bub-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.16);
  margin: 0 4px;
  flex-shrink: 0;
}

/* === KLEUR-POPOVER (tekstkleur + markeerkleur) === */
.o477-aant-color-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.o477-aant-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  vertical-align: middle;
}
.o477-aant-color-pop {
  z-index: 99999;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 10px;
  min-width: 220px;
}
.o477-aant-color-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.o477-aant-color-sw {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: transform .08s, border-color .12s;
}
.o477-aant-color-sw:hover { transform: scale(1.12); border-color: var(--primary, #01A4A4); }
.o477-aant-color-sw.is-active {
  border: 2px solid var(--primary, #01A4A4);
  box-shadow: 0 0 0 2px rgba(1,164,164,0.20);
}
.o477-aant-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.o477-aant-color-hexlbl {
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  font-size: 13px;
}
.o477-aant-color-hex {
  width: 80px;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  text-transform: lowercase;
}
.o477-aant-color-hex:focus {
  border-color: var(--primary, #01A4A4);
  outline: none;
}
.o477-aant-color-native {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.o477-aant-color-apply {
  margin-left: auto;
  padding: 4px 10px;
  background: var(--primary, #01A4A4);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.o477-aant-color-apply:hover { background: var(--primary-dark, #018585); }

/* === SLEEPMODUS: regels/secties verschuiven via drag-and-drop === */
.o477-aant-drag-toggle.is-on,
.o477-aant-cb-toggle.is-on {
  background: var(--primary, #01A4A4);
  color: #fff;
  border-color: var(--primary, #01A4A4);
  font-weight: 600;
}
.o477-pd-aant-area.o477-aant-drag-mode {
  background: linear-gradient(0deg, rgba(1,164,164,0.03), rgba(1,164,164,0.03)), #fff;
  border-style: dashed !important;
  border-color: var(--primary, #01A4A4) !important;
  cursor: default;
  user-select: none;
}
/* Direct children = top-level blocks: krijgen border, hover-bg, grip-handle */
.o477-pd-aant-area.o477-aant-drag-mode > * {
  border: 1px dashed transparent;
  border-radius: 6px;
  margin: 4px 0;
  transition: background .15s, border-color .15s, box-shadow .12s;
  position: relative;
}
.o477-pd-aant-area.o477-aant-drag-mode > *:hover {
  background: rgba(1,164,164,0.06);
  border-color: rgba(1,164,164,0.35);
  cursor: grab;
}
.o477-pd-aant-area.o477-aant-drag-mode > *:active { cursor: grabbing; }
/* Grip-handle voor non-headings (h2/h3/h4 hergebruiken hun bestaande ::before — zie hieronder) */
.o477-pd-aant-area.o477-aant-drag-mode > *:not(h2):not(h3):not(h4) {
  padding-left: 32px !important;
}
.o477-pd-aant-area.o477-aant-drag-mode > *:not(h2):not(h3):not(h4)::before {
  content: '⋮⋮';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: rgba(1,164,164,0.18);
  color: var(--primary, #01A4A4);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: -2px;
  cursor: grab;
}
/* h2/h3/h4: hergebruik hun bestaande chevron-positie, vervang inhoud door grip.
   pointer-events: none zorgt dat de native drag-start van het heading-element zelf
   wordt getriggerd ipv vast te lopen op de pseudo-grip. */
.o477-pd-aant-area.o477-aant-drag-mode h2::before,
.o477-pd-aant-area.o477-aant-drag-mode h3::before,
.o477-pd-aant-area.o477-aant-drag-mode h4::before {
  content: '⋮⋮' !important;
  transform: translateY(-50%) !important;
  background: rgba(1,164,164,0.18) !important;
  color: var(--primary, #01A4A4) !important;
  font-size: 13px !important;
  letter-spacing: -2px;
  cursor: grab;
  pointer-events: none !important;
}
.o477-pd-aant-area.o477-aant-drag-mode h3::after { display: none !important; } /* ⇕ subs verbergen */
.o477-pd-aant-area.o477-aant-drag-mode h2,
.o477-pd-aant-area.o477-aant-drag-mode h3,
.o477-pd-aant-area.o477-aant-drag-mode h4 {
  background: rgba(1,164,164,0.04);
}
/* Tijdens dragging: gesleept block fade-en */
.o477-pd-aant-area.o477-aant-drag-mode > *.o477-aant-dragging {
  opacity: 0.35 !important;
  cursor: grabbing !important;
}
/* Drop-indicator: dikke turquoise lijn boven of onder de target */
.o477-pd-aant-area.o477-aant-drag-mode > *.o477-aant-drop-above {
  box-shadow: 0 -3px 0 0 var(--primary, #01A4A4);
  border-top-color: transparent !important;
}
.o477-pd-aant-area.o477-aant-drag-mode > *.o477-aant-drop-below {
  box-shadow: 0 3px 0 0 var(--primary, #01A4A4);
  border-bottom-color: transparent !important;
}
.o477-pd-aant-area hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}
.o477-pd-aant-area p { margin: 0 0 8px; }
.o477-pd-aant-cb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.o477-pd-aant-cb input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
}
.o477-pd-aant-date {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  font-family: inherit;
}

@media (max-width: 640px) {
  .o477-pd-aant-toolbar { padding: 10px 12px; gap: 10px; }
  .o477-pd-aant-area    { padding: 12px 14px; min-height: 240px; }
}

/* === HANDLEIDING-PAGINA ===
   Sticky TOC links + leesbare content rechts, met print-styles. */
.o477-hl-app { max-width: 1200px; }
.o477-hl-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.o477-hl-search {
  flex: 1;
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
}
.o477-hl-search:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}
.o477-hl-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .o477-hl-grid { grid-template-columns: 1fr; }
}
.o477-hl-toc {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
}
.o477-hl-toc h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.o477-hl-toc details {
  margin-bottom: 8px;
}
.o477-hl-toc details > summary {
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
  color: var(--primary-dark);
  list-style: none;
}
.o477-hl-toc details > summary::-webkit-details-marker { display: none; }
.o477-hl-toc details > summary::before {
  content: '▸';
  font-size: 10px;
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.15s;
  color: var(--text-muted);
}
.o477-hl-toc details[open] > summary::before { transform: rotate(90deg); }
.o477-hl-toc ul { list-style: none; padding: 0; margin: 4px 0 8px 14px; }
.o477-hl-toc li { margin: 2px 0; }
.o477-hl-toc a {
  display: block;
  padding: 4px 8px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.35;
}
.o477-hl-toc a:hover {
  background: var(--bg-alt);
  color: var(--primary-dark);
}
.o477-hl-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 36px;
  line-height: 1.6;
  font-size: 14.5px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 600px) {
  .o477-hl-content { padding: 16px 18px; font-size: 14px; }
}
.o477-hl-content h2 {
  margin-top: 38px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  font-size: 22px;
  color: var(--primary-dark);
}
.o477-hl-content h2:first-of-type { margin-top: 0; }
.o477-hl-content h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--primary-dark);
  scroll-margin-top: 80px;
}
.o477-hl-content p { margin: 0 0 12px; }
.o477-hl-content ul, .o477-hl-content ol { margin: 8px 0 14px 24px; padding: 0; }
.o477-hl-content li { margin: 4px 0; }
.o477-hl-content code {
  background: var(--bg-alt);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
  color: var(--primary-dark);
}
.o477-hl-content pre {
  background: #1f2937;
  color: #f8fafc;
  padding: 14px 18px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12.5px;
  margin: 12px 0;
}
.o477-hl-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.o477-hl-content table { margin: 12px 0 20px; }
.o477-hl-content table td, .o477-hl-content table th { padding: 8px 12px; font-size: 13px; }
.o477-hl-content mark {
  background: #fef9c3;
  color: var(--text);
  padding: 1px 2px;
  border-radius: 2px;
}
.o477-hl-versie {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* Print: alleen content, TOC weg */
@media print {
  .o477-hl-toolbar, .o477-hl-toc, .o477-header, .o477-footer { display: none !important; }
  .o477-hl-grid { display: block !important; }
  .o477-hl-content { border: none; box-shadow: none; padding: 0; max-width: 100%; }
  .o477-hl-content h2 { page-break-before: always; }
  .o477-hl-content h2:first-of-type { page-break-before: avoid; }
}

/* Projecten — leesbare hover-tooltip met korte werkomschrijving op naam-cel.
   Globale tooltip-div in body (gepositioneerd via JS in projecten.js), zodat
   .o477-table { overflow: hidden } 'm niet wegknipt. */
.o477-proj-naam-cell.has-werk { cursor: help; }
/* v2.212.1: ↗-opener rechts uitgelijnd in de Naam-kolom. Inner-flex vult de cel
   (block-div = volle td-breedte) zodat margin-left:auto de pijl tegen de rechterrand
   duwt; de <td> zelf blijft table-cell (sticky-pin + kolomlayout intact). */
.o477-proj-naam-inner { display: flex; align-items: center; }
.o477-proj-naam-inner .o477-proj-arrow { margin-left: auto; padding-left: 8px; flex: 0 0 auto; }
/* v2.215.0: kleur+cijfer o.b.v. open taken — blauw + aantal = nog open, groen = alle taken klaar. */
.o477-proj-arrow { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.o477-proj-arrow.is-open { color: #2563eb; }
.o477-proj-arrow.is-done { color: #16a34a; }
.o477-proj-arrow-count { font-weight: 700; margin-right: 2px; }
.o477-proj-arrow:hover { opacity: .7; }
/* Offertes-overzicht (11-9, zoals projecten): Nummer + Datum + Naam links vastgepind,
   deellijn rechts van Naam, ↗-opener rechts in de Naam-cel. Groepskop- en
   spacer-rijen (één colspan-cel) pinnen niet. */
.o477-off-naam-cell { overflow: hidden; }
.o477-off-naam-inner { display: flex; align-items: center; min-width: 0; }
.o477-off-naam-inner .o477-off-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-off-naam-inner .o477-proj-arrow { margin-left: auto; padding-left: 8px; flex: 0 0 auto; }
.o477-table.o477-off-table th:nth-child(-n+3),
.o477-table.o477-off-table tbody tr:not(.o477-off-grouphead):not(.o477-off-spacer) > td:nth-child(-n+3) {
  position: sticky; background: var(--surface); z-index: 1;
}
.o477-table.o477-off-table th:nth-child(1),
.o477-table.o477-off-table tbody tr:not(.o477-off-grouphead):not(.o477-off-spacer) > td:nth-child(1) { left: 0; }
.o477-table.o477-off-table th:nth-child(2),
.o477-table.o477-off-table tbody tr:not(.o477-off-grouphead):not(.o477-off-spacer) > td:nth-child(2) { left: var(--o477-off-col1, 110px); }
.o477-table.o477-off-table th:nth-child(3),
.o477-table.o477-off-table tbody tr:not(.o477-off-grouphead):not(.o477-off-spacer) > td:nth-child(3) {
  left: var(--o477-off-col12, 210px); box-shadow: inset -1px 0 0 var(--border);
}
.o477-table.o477-off-table thead th { z-index: 2; }
/* v2.227.0: groen ✅-blokje ná de ↗ — linkt naar de conceptfactuur van dit project op /facturering.
   GEEN margin-left:auto (die zit op .o477-proj-arrow en duwt de pijl al naar rechts) → het blokje
   blijft direct rechts naast de pijl staan. */
.o477-proj-naam-inner .o477-proj-factuur {
  flex: 0 0 auto; margin-left: 6px; padding: 0 5px;
  display: inline-flex; align-items: center; line-height: 1.7;
  background: #dcfce7; border: 1px solid #86efac; border-radius: 4px;
  text-decoration: none; font-size: 12px;
}
.o477-proj-naam-inner .o477-proj-factuur:hover { background: #bbf7d0; }
#o477-proj-werk-tip {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: 480px;
  white-space: pre-wrap;
  background: #01A4A4;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 10px 28px rgba(1,164,164,0.28), 0 2px 6px rgba(0,0,0,0.14);
  pointer-events: none;
}

/* Ontwikkeling per week */
.o477-rap-toelichting {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-alt);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
  margin-bottom: 16px;
}
.o477-rap-toelichting code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

/* Strakke kolom-uitlijning: vaste breedtes zodat alle tabellen er identiek uitzien */
.o477-rap-ontw-table { table-layout: fixed; width: 100%; }
.o477-rap-ontw-table th, .o477-rap-ontw-table td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o477-rap-ontw-table th:nth-child(1),
.o477-rap-ontw-table td:nth-child(1) { width: 110px; text-align: left;  padding-left: 14px; }   /* Week           */
.o477-rap-ontw-table th:nth-child(2),
.o477-rap-ontw-table td:nth-child(2) { width: 18%;   text-align: right; padding-right: 18px; }  /* Omzet (cum)    */
.o477-rap-ontw-table th:nth-child(3),
.o477-rap-ontw-table td:nth-child(3) { width: 18%;   text-align: right; padding-right: 18px; }  /* Kosten (cum)   */
.o477-rap-ontw-table th:nth-child(4),
.o477-rap-ontw-table td:nth-child(4) { width: 18%;   text-align: right; padding-right: 18px; }  /* Brutowinst     */
.o477-rap-ontw-table th:nth-child(5),
.o477-rap-ontw-table td:nth-child(5) { width: 18%;   text-align: right; padding-right: 18px; }  /* Δ Brutowinst   */
.o477-rap-ontw-table th:nth-child(6),
.o477-rap-ontw-table td:nth-child(6) { width: 110px; text-align: right; padding-right: 18px; }  /* Brutomarge     */
.o477-rap-ontw-totaal-row { background: #fef9e7; font-weight: 600; }
.o477-rap-ontw-totaal-row:hover { background: #fdf3d4; }
/* Snapshot-rijen: officiële weekoverzicht-cijfers — subtiele turquoise tint */
.o477-rap-ontw-snapshot-row { background: rgba(1, 164, 164, 0.05); }
.o477-rap-ontw-snapshot-row.o477-rap-ontw-totaal-row { background: rgba(1, 164, 164, 0.10); }
.o477-rap-ontw-snapshot-row:hover { background: rgba(1, 164, 164, 0.10); }
.o477-rap-snapshot-badge { font-size: 11px; margin-left: 4px; opacity: 0.85; cursor: help; }

.o477-rap-delta-up    { color: #047857; font-weight: 600; }
.o477-rap-delta-down  { color: #b91c1c; font-weight: 600; }
.o477-rap-delta-zero  { color: var(--text-muted); }
.o477-rap-delta-nvt   { color: var(--text-muted); }

.o477-rap-ontw-leider {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.o477-rap-ontw-leider > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.o477-rap-ontw-leider > summary::-webkit-details-marker { display: none; }
.o477-rap-ontw-leider > summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.o477-rap-ontw-leider[open] > summary::before { transform: rotate(90deg); }
.o477-rap-ontw-leider-name { font-size: 15px; color: var(--primary-dark); flex: 1; }
.o477-rap-ontw-leider-meta {
  display: flex; gap: 24px;
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
/* Twee vaste kolommen met label links + waarde rechts uitgelijnd, zodat alle
   rijen mooi onder elkaar staan in plaats van rechtsboven samengeklit. */
.o477-rap-ontw-leider-meta > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.o477-rap-ontw-leider-meta > span:nth-child(1) { width: 220px; }
.o477-rap-ontw-leider-meta > span:nth-child(2) { width: 240px; }
.o477-rap-ontw-leider-meta b { color: var(--text); margin-left: 0; text-align: right; }
.o477-rap-ontw-bw-pos { color: #047857; }
.o477-rap-ontw-bw-neg { color: #b91c1c; }
.o477-rap-ontw-leider-body { padding: 0; }
.o477-rap-ontw-leider-body .o477-rap-ontw-table { border-radius: 0; box-shadow: none; }

/* Print: alleen actief paneel + verberg toolbar + tabs */
@media print {
  .o477-rap-tabs,
  .o477-rap-toolbar,
  .o477-header,
  .o477-footer { display: none !important; }
  .o477-rap-panel[hidden] { display: none !important; }
  .o477-bez-scroll { overflow: visible !important; }
  .o477-rap-ontw-leider[open] > .o477-rap-ontw-leider-body { display: block !important; }
}

/* ======================================================================
   AGENDA — persoonlijke agenda met afspraken + werkbord-taken
   ====================================================================== */
.o477-ag-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.o477-ag-view-toggle {
  display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 3px;
  margin-right: 6px;
}
.o477-ag-view-btn {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #475569; cursor: pointer;
  transition: background .15s, color .15s;
}
.o477-ag-view-btn:hover { color: #0f172a; }
.o477-ag-view-btn.is-active {
  background: #ffffff; color: #01A4A4;
  box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.o477-ag-label { font-weight: 600; color: #334155; padding: 0 4px; }

/* Zoekveld in de filterkaart (enige inhoud sinds 8-8): altijd de volle breedte —
   flex:1 in de flex-toolbar (desktop) én alle kolommen in de grid-toolbar (mobiel). */
.o477-ag-zoek {
  width: 100%; flex: 1 1 100%; grid-column: 1 / -1; box-sizing: border-box;
  max-width: 100%;
  border: 1px solid #cbd5e1; border-radius: 8px;
  /* 16px is bewust: bij <16px zoomt iOS automatisch in op het veld,
     waardoor de pagina uit de schermbreedte "breekt". */
  padding: 10px 14px; font-size: 16px; background: #ffffff; color: #0f172a;
  min-height: 42px;
}
.o477-ag-zoek:focus { outline: none; border-color: #01A4A4; box-shadow: 0 0 0 3px rgba(1,164,164,.15); }
/* "Ook: bvr kuijkshof vveregie" onder het zoekveld (meekijken, alleen jdo):
   desktop op één regel, mobiel vol-breed over alle grid-kolommen (11-9). */
.o477-ag-extra {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  grid-column: 1 / -1; flex: 1 1 100%; font-size: 12.5px; color: #64748b;
}
.o477-ag-extra-rij { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; min-height: 28px; }
.o477-ag-extra-rij input { width: auto; min-width: 0; margin: 0; }
.o477-ag-extra-rij.is-uit { cursor: default; color: #94a3b8; }
.o477-ag-extra-rij.is-uit a { color: #01A4A4; text-decoration: none; }
.o477-ag-extra-rij.is-uit a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .o477-ag-extra { font-size: 14px; gap: 14px; }
  .o477-ag-extra-rij { min-height: 36px; }
  .o477-ag-extra-rij input { width: 20px; height: 20px; }
}

/* --- Weergave-menu: één knop met de huidige weergave, klik → uitklaplijst --- */
.o477-ag-view-menu { position: relative; }
/* Kleine pil met hamburger (☰) in logo-cyclaam (#E8247C, het cyclaam blokje
   uit het Office477-beeldmerk) — de huidige weergave staat gemarkeerd in de lijst. */
.o477-ag-view-menu-knop {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E8247C; background: #E8247C; border-radius: 999px;
  padding: 5px 14px; font-size: 15px; line-height: 1; color: #ffffff;
  cursor: pointer; transition: background .15s;
}
.o477-ag-view-menu-knop:hover { background: #c41d68; border-color: #c41d68; }
.o477-ag-view-menu.is-open .o477-ag-view-menu-knop { background: rgba(232,36,124,.10); color: #E8247C; border-color: #E8247C; }
.o477-ag-view-menu-lijst {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 130;
  display: none; flex-direction: column; min-width: 150px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16); padding: 4px;
}
.o477-ag-view-menu.is-open .o477-ag-view-menu-lijst { display: flex; }
.o477-ag-view-menu-lijst .o477-ag-view-btn {
  display: block; width: 100%; text-align: left;
  border-radius: 6px; padding: 9px 12px;
}
.o477-ag-view-menu-lijst .o477-ag-view-btn.is-active {
  background: #E0F7F7; color: #01A4A4; box-shadow: none;
}

/* Periode-titel boven het agenda-vlak: welke dag/week/maand/jaar er in beeld is —
   altijd zichtbaar, ook als de filterkaart (met het kleine label) ingeklapt is. */
/* Titelregel: periode-titel links, hamburger-menu rechts op dezelfde regel. */
.o477-ag-periode-rij { display: flex; align-items: center; gap: 8px; margin: 12px 2px 8px; }
.o477-ag-periode-rij .o477-ag-view-menu { margin-left: auto; }
.o477-ag-periode-titel { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; min-width: 0; }

/* Bladeren op de pc (17-8): pillen ‹ Vandaag › naast de periode-titel.
   Mobiel verborgen — daar bladert vegen (swipe) al. */
.o477-ag-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.o477-ag-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; background: #ffffff; border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-weight: 600; line-height: 1;
  color: #64748b; cursor: pointer; font-family: var(--font, inherit);
  transition: border-color .15s, color .15s, background .15s;
  min-height: 28px;
}
.o477-ag-nav-btn:hover { border-color: #01A4A4; color: #018585; background: rgba(1,164,164,.06); }
#o477-ag-prev, #o477-ag-next { font-size: 16px; padding: 4px 12px; }
@media (max-width: 720px) { .o477-ag-nav { display: none; } }

/* --- DAG-view: lijst met cards --- */
.o477-ag-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.o477-ag-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #01A4A4;
  border-radius: 8px; padding: 6px 10px;   /* compacter (verzoek 8-8: regels verkleinen) */
  display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow .15s, transform .05s;
}
.o477-ag-card[role="button"] { cursor: pointer; }
.o477-ag-card[role="button"]:hover { box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.o477-ag-card[role="button"]:active { transform: translateY(1px); }
.o477-ag-card-taak { background: #fafafa; }
.o477-ag-card-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
/* Icoon + titel als één blok, zodat ze samen blijven en de titel de resterende ruimte pakt. */
.o477-ag-card-titelwrap { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; }
.o477-ag-card-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
/* break-word i.p.v. anywhere → breekt op woordgrenzen, niet letter-voor-letter. */
.o477-ag-card-titel { font-weight: 600; color: #0f172a; flex: 1; min-width: 0;
  line-height: 1.3; overflow-wrap: break-word; word-break: normal; }
.o477-ag-card-tijd { font-size: 12px; font-weight: 700; color: #0f766e;
  background: #d7f0ef; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
/* Uren op een agendakaart (16-9): zelfde vorm als de tijd-pil, in het
   taken-amber zodat je tijd (afspraak) en uren (taak) uit elkaar houdt. */
.o477-ag-card-uren { font-size: 12px; font-weight: 700; color: #92400e;
  background: #fef3c7; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
/* Dagtotaal uren in de dagkop / weekkolom / weekblad (16-9). */
.o477-ag-dagtot { font-size: 12px; font-weight: 700; color: #92400e;
  background: #fef3c7; padding: 1px 8px; border-radius: 999px; white-space: nowrap; margin-left: 4px; }
.o477-ag-dagtot.is-kort { font-size: 10px; padding: 0 6px; }
/* De uren-pil in de kopregel is er alleen voor een ingeklapte kaart: dan is
   de meta-regel verborgen en zou je de uren kwijt zijn (16-9). */
.o477-ag-card-uren.is-kop { display: none; }
.o477-ag-card.is-collapsed .o477-ag-card-uren.is-kop { display: inline-block; }
/* Uren achter de titel op een weekblad-regel. */
.o477-ag-wb-uren { font-size: 10px; font-weight: 700; color: #92400e;
  background: #fef3c7; padding: 0 5px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
/* Scheiding tussen agenda's als er meekijk-agenda's aan staan (16-9):
   een streep met de naam van die agenda erboven. */
.o477-ag-agenda-sep { border-top: 2px dashed #cbd5e1; margin: 20px 0 10px; padding-top: 10px;
  font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: .04em; text-transform: uppercase; }
.o477-ag-wb-sep { border-top: 2px dashed #cbd5e1; margin: 14px 0 7px; padding-top: 7px;
  font-size: 9px; font-weight: 700; color: #64748b; letter-spacing: .04em; text-transform: uppercase; }
.o477-ag-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 12px; color: #64748b; margin-top: 2px;
}
.o477-ag-card-proj { color: #475569; }
.o477-ag-card-om { color: #94a3b8; }
.o477-ag-card-bel { font-size: 11px; } /* 🔔 = herinnering staat aan */
/* Label-pil op een taakkaart (27-8): zelfde vorm als op het werkbord. */
.o477-ag-card-label { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  line-height: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-ag-week-grid .o477-ag-card-label { font-size: 10px; padding: 2px 6px; }
/* Herinnering-select op de taak-detailpagina (naast de agenda-toggle). */
.o477-td-her-wrap { display: inline-flex; align-items: center; gap: 4px; }
.o477-td-herinnering {
  font-size: 12px; padding: 2px 6px; border: 1px solid #cbd5e1;
  border-radius: 6px; background: #ffffff; color: #334155; cursor: pointer;
}
/* Acties rechts op de kaart: dupliceren (⧉) + sorteer-pijltjes (▲▼). */
.o477-ag-card-acties { display: inline-flex; align-items: flex-start; gap: 4px;
  margin-left: auto; flex-shrink: 0; }
.o477-ag-act-btn {
  width: 28px; height: 24px; padding: 0; line-height: 1; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; background: #ffffff; color: #64748b;
  border-radius: 5px; cursor: pointer;
}
.o477-ag-act-btn:hover { background: #f1f5f9; color: #01A4A4; border-color: #cbd5e1; }
.o477-ag-act-btn:active { transform: scale(.92); }
.o477-ag-card-klant {
  color: #ffffff; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; letter-spacing: .3px;
}
.o477-ag-card-loc { color: #475569; }
/* Afgeronde taak blijft in de agenda staan: groen "✓ Klaar"-label + gedimde,
   doorgestreepte titel zodat je in één oogopslag ziet dat het af is. */
.o477-ag-card-klaar {
  flex-shrink: 0; color: #ffffff; background: #16a34a;
  font-weight: 700; font-size: 11px; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
/* Status-pil op taakblokken (kleur per status; mirror van de hover-popover-kleuren).
   Is een <select> → aanklikbaar om de status direct vanaf de kaart te wijzigen. */
.o477-ag-card-status {
  flex-shrink: 0; color: #ffffff; background-color: #64748b;
  font-weight: 700; font-size: 11px; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.o477-ag-card-status.is-doen  { background-color: #64748b; }
.o477-ag-card-status.is-bezig { background-color: #d97706; }
.o477-ag-card-status.is-klaar { background-color: #16a34a; }
.o477-ag-card-status.is-wacht { background-color: #0891b2; }
/* Select-variant: verwijder de native chrome en teken een witte caret rechts. */
select.o477-ag-card-status {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: none; cursor: pointer; line-height: 1.4; height: auto;
  padding-right: 20px; max-width: 150px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath fill='%23ffffff' d='M0 0h8L4 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
select.o477-ag-card-status:hover { filter: brightness(1.06); }
select.o477-ag-card-status:focus { outline: 2px solid rgba(255,255,255,.65); outline-offset: 1px; }
select.o477-ag-card-status option { color: #0f172a; background: #ffffff; font-weight: 600; }
/* Ingeklapte kaart = smalle strook van 1 regel: titel afkappen, meta + sorteer-pijltjes weg. */
.o477-ag-card.is-collapsed { padding-top: 6px; padding-bottom: 6px; gap: 0; }
.o477-ag-card.is-collapsed .o477-ag-card-head { flex-wrap: nowrap; align-items: center; }
.o477-ag-card.is-collapsed .o477-ag-card-titelwrap { align-items: center; }
.o477-ag-card.is-collapsed .o477-ag-card-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o477-ag-card.is-collapsed .o477-ag-card-meta { display: none; }
.o477-ag-card.is-collapsed .o477-ag-card-acties { align-items: center; }
/* Klaar = lichtgrijze kaart (geen doorhaling). */
.o477-ag-card.is-klaar .o477-ag-card-titel { color: #94a3b8; }
.o477-ag-card.is-klaar .o477-ag-card-icon { opacity: .55; }
/* Klaar-knop (✓) op afspraak-kaarten: grijs als 'niet klaar', groen als 'klaar'. */
.o477-ag-klaar-btn.is-on { background: #16a34a; border-color: #16a34a; color: #ffffff; }

/* === Markeren in de agenda (15-9) ==========================================
   Drie markeringen naast status/klaar: 🚩 vlag, ✅ afvinken en een
   markeerstift-kleur (zachte achtergrondtint). De statuskleur van de tekst
   blijft leidend — de markering raakt alleen de achtergrond, de vlag en de
   doorhaling. */
.o477-ag-vlag { flex-shrink: 0; font-size: 13px; line-height: 1.3; }
.o477-ag-card.is-gemarkeerd { border-left-width: 6px; }
/* Afgevinkt (los van de status): titel doorgehaald en gedimd. */
.o477-ag-card.is-gedaan .o477-ag-card-titel { text-decoration: line-through; color: #94a3b8; }
.o477-ag-card.is-gedaan .o477-ag-card-icon { opacity: .55; }
.o477-ag-wb-item.is-gedaan .o477-ag-wb-titel { text-decoration: line-through; opacity: .6; }
/* 🚩-knop op de kaart: rood geaccentueerd zodra de vlag staat. */
.o477-ag-mk-btn.is-on { background: #fee2e2; border-color: #fca5a5; }
/* Zwevend markeer-menu (rechtsklik of 🚩-knop). */
.o477-ag-mk-menu {
  position: fixed; z-index: 1300; min-width: 210px; max-width: 260px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(15,23,42,.22); padding: 8px; font-size: 13px;
}
.o477-ag-mk-titel {
  font-weight: 700; color: #0f172a; font-size: 12px; margin: 2px 4px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o477-ag-mk-actie {
  display: block; width: 100%; text-align: left; padding: 8px 8px;
  border: 0; background: transparent; color: #334155; border-radius: 7px;
  font-size: 13px; cursor: pointer;
}
.o477-ag-mk-actie:hover { background: #f1f5f9; color: #01A4A4; }
.o477-ag-mk-kop {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; margin: 8px 4px 4px;
}
.o477-ag-mk-kleuren { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 2px; }
.o477-ag-mk-kleur {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid #cbd5e1;
  cursor: pointer; padding: 0; line-height: 1;
}
.o477-ag-mk-kleur:hover { transform: scale(1.08); }
.o477-ag-mk-kleur.is-on { outline: 2px solid #0f172a; outline-offset: 1px; }
.o477-ag-mk-geen { background: #ffffff; color: #64748b; font-size: 12px; }
/* Markeer-regel in de detailvensters (taak- en afspraak-modal). */
.o477-ag-mkrij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 2px; padding: 8px 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}
.o477-ag-mkrij-kop {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b;
}
.o477-ag-mkrij-btn {
  padding: 5px 10px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
  border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.o477-ag-mkrij-btn:hover { border-color: #01A4A4; color: #01A4A4; }
.o477-ag-mkrij-btn.is-on { background: #01A4A4; border-color: #01A4A4; color: #ffffff; }
/* Filterknop "🚩 Alleen gemarkeerd" naast het zoekveld. */
.o477-ag-filter-mk {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
}
.o477-ag-filter-mk input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
/* Herinnering-select op taakkaarten: compact; groen geaccentueerd als er een herinnering staat. */
.o477-ag-her { font-size: 11px; padding: 2px 4px; max-width: 96px; border: 1px solid #cbd5e1;
  border-radius: 6px; background: #ffffff; color: #334155; cursor: pointer; }
.o477-ag-her.is-on { background: #ecfdf5; border-color: #16a34a; color: #0f766e; font-weight: 600; }
/* Checkboxes in agenda-modals niet oprekken tot 100% (erven anders de veld-styling → label breekt af). */
#o477-ag-modal input[type="checkbox"] { width: 19px; height: 19px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; vertical-align: middle; }
/* "In agenda tonen"-regel: nette links-uitgelijnde checkbox-regel. */
#o477-ag-modal .o477-ag-checkrow { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-weight: 600; color: #334155; cursor: pointer; }
/* Actieblok onder in de taak-bewerk-modal: kopje + 3 gelijke knoppen op één rij. */
#o477-ag-modal .o477-ag-actblok { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
#o477-ag-modal .o477-ag-actblok-kop { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 6px; }
#o477-ag-modal .o477-ag-actbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#o477-ag-modal .o477-ag-actbtns .o477-btn { width: 100%; justify-content: center; text-align: center; padding: 8px 6px; font-size: 13px; white-space: nowrap; }
/* In-planning-staat: turquoise gevulde pil zodra de taak op het planbord staat
   (zelfde tint als de planning-toggle op het werkbord); klik opent dan de weekplanning. */
#o477-ag-modal .o477-ag-actbtns .o477-btn.is-in-planning {
  background: #01A4A4;
  color: #ffffff;
  border-color: #01A4A4;
  box-shadow: 0 1px 3px rgba(1,164,164,.30);
}
#o477-ag-modal .o477-ag-actbtns .o477-btn.is-in-planning:hover {
  background: #018585;
  border-color: #018585;
}
@media (max-width: 520px) { #o477-ag-modal .o477-ag-actbtns { grid-template-columns: 1fr; } }
/* Buitendienst-beheer in het actieblok: label + lijst toegewezen medewerkers + toevoeg-dropdown. */
#o477-ag-modal .o477-ag-bd-row { margin-top: 10px; }
#o477-ag-modal .o477-ag-bd-row label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 3px; }
#o477-ag-modal .o477-ag-bd-row select { margin-bottom: 0; }
#o477-ag-modal .o477-ag-bd-list { margin-bottom: 6px; }
#o477-ag-modal .o477-ag-bd-empty { font-size: 12px; color: #94a3b8; font-style: italic; padding: 4px 0; }
#o477-ag-modal .o477-ag-bd-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; margin-bottom: 4px; font-size: 13px; color: #334155; }
#o477-ag-modal .o477-ag-bd-del { flex-shrink: 0; width: 28px; height: 26px; padding: 0; border: 1px solid #e2e8f0; background: #ffffff; color: #dc2626; border-radius: 5px; cursor: pointer; line-height: 1; }
#o477-ag-modal .o477-ag-bd-del:hover { background: #fef2f2; border-color: #fecaca; }
#o477-ag-modal .o477-ag-bd-del:disabled { opacity: .5; cursor: default; }
/* Foto's & video's na het werk — bladerboek: één item groot, ◀ ▶ + swipe, teller + uploader in de voet. */
#o477-ag-modal .o477-ag-bd-fotoblok { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
#o477-ag-modal .o477-ag-bd-fotoblok > label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
#o477-ag-modal .o477-ag-bd-boek { display: flex; align-items: center; gap: 6px; }
#o477-ag-modal .o477-ag-bd-boek-stage { flex: 1; min-width: 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #0f172a; }
#o477-ag-modal .o477-ag-bd-boek-stage img,
#o477-ag-modal .o477-ag-bd-boek-stage video { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #0f172a; }
#o477-ag-modal .o477-ag-bd-boek-nav { flex-shrink: 0; width: 32px; height: 56px; padding: 0; border: 1px solid #e2e8f0; background: #ffffff; border-radius: 8px; font-size: 22px; line-height: 1; color: #334155; cursor: pointer; }
#o477-ag-modal .o477-ag-bd-boek-nav:hover { background: #f1f5f9; }
#o477-ag-modal .o477-ag-bd-boek-voet { text-align: center; font-size: 11px; color: #64748b; margin-top: 5px; }
/* Werkzaamheden-editor (uit te voeren werkzaamheden) in de taak-bewerk-modal. */
#o477-ag-modal .o477-ag-hint { color: #94a3b8; font-weight: 400; font-size: 11px; }
#o477-ag-modal .o477-ag-werkz-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#o477-ag-modal .o477-ag-werkz-inp { flex: 1; margin-bottom: 0; background: #fef9c3; border-color: #fde68a; }   /* geel = nog te doen */
#o477-ag-modal .o477-ag-werkz-row.is-done .o477-ag-werkz-inp { background: #eef2f6; border-color: #cbd5e1; color: #64748b; }   /* afgevinkt = lichtgrijs (geen doorstreping) */
#o477-ag-modal .o477-ag-werkz-del { flex-shrink: 0; width: 36px; height: 38px; padding: 0; border: 1px solid #e2e8f0; background: #ffffff; color: #dc2626; border-radius: 6px; cursor: pointer; line-height: 1; }
#o477-ag-modal .o477-ag-werkz-del:hover { background: #fef2f2; border-color: #fecaca; }
#o477-ag-modal .o477-ag-werkz-add { padding: 6px 12px; font-size: 13px; margin-top: 2px; }
/* Opmerkingveld groen zodra er tekst in staat (heeft een placeholder → :placeholder-shown werkt). */
#o477-ag-modal #ag-e-opmerking:not(:placeholder-shown) { background: #ecfdf5; border-color: #16a34a; color: #0f766e; }

/* --- DAG-view: omhullende week-wrap (inklapbaar) --- */
.o477-ag-weekwrap {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  margin-top: 8px; overflow: hidden;
  transition: box-shadow .15s;
}
.o477-ag-weekwrap[open] { box-shadow: 0 2px 8px rgba(15,23,42,.05); }
/* Week-kopbalk: lichte teal-tint met donkere tekst (was wit-op-teal-verloop —
   slecht leesbaar, feedback 19-7); zelfde familie als de filterkaart. */
.o477-ag-weekwrap-head {
  list-style: none;
  padding: 12px 16px; cursor: pointer;
  background: #E0F7F7;
  color: #017a7a;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700;
  user-select: none;
}
.o477-ag-weekwrap-head::-webkit-details-marker { display: none; }
.o477-ag-weekwrap-head:hover { filter: brightness(.97); }
.o477-ag-weekwrap-chevron {
  display: inline-block; font-size: 12px;
  color: rgba(1,122,122,.75);
  transition: transform .15s; transform-origin: center;
}
.o477-ag-weekwrap[open] > .o477-ag-weekwrap-head .o477-ag-weekwrap-chevron {
  transform: rotate(90deg);
}
.o477-ag-weekwrap-title { flex: 1; }
.o477-ag-weekwrap-head b {
  font-weight: 700; background: rgba(1,164,164,.15);
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
}
.o477-ag-weekwrap.is-current { border-color: #01A4A4; }
.o477-ag-weekwrap > .o477-ag-week {
  margin-top: 0; padding: 8px;
}

/* --- DAG-view: verticale lijst van inklapbare dagen (binnen week-wrap) --- */
.o477-ag-week {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
}
.o477-ag-weekday {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  overflow: hidden;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.o477-ag-weekday[open] { box-shadow: 0 1px 3px rgba(15,23,42,.04); }
/* Zaterdag + zondag krijgen een beige tint */
.o477-ag-weekday.is-weekend { background: #fdf8eb; border-color: #ecd9a4; }
.o477-ag-weekday.is-weekend .o477-ag-weekday-head { background: #f7eecf; }
.o477-ag-weekday.is-weekend .o477-ag-card { background: #fffdf5; }
/* Vandaag krijgt cyclaam-rand (verzoek 8-8: vandaag-titel in cyclaam) */
.o477-ag-weekday.is-today { border-color: #E8247C; }

.o477-ag-weekday-head {
  list-style: none;                 /* verberg native marker */
  padding: 10px 14px; cursor: pointer;
  background: #f8fafc;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: #334155;
  user-select: none;
}
.o477-ag-weekday-head::-webkit-details-marker { display: none; }
.o477-ag-weekday-head:hover { background: #f1f5f9; }
.o477-ag-weekday.is-weekend .o477-ag-weekday-head:hover { background: #f0e4b8; }
/* Vandaag: cyclaam titeltekst op lichte cyclaam-tint (leesbaar, valt direct op). */
.o477-ag-weekday-head.is-today {
  background: #FDE7F1; color: #E8247C;
  box-shadow: inset 4px 0 0 #E8247C;
}
.o477-ag-weekday-head.is-today:hover { background: #F9CFE3; }
.o477-ag-weekday-head.is-today b { color: #ffffff; background: #E8247C; }
.o477-ag-weekday-chevron {
  display: inline-block; color: #94a3b8; font-size: 11px;
  transition: transform .15s; transform-origin: center;
}
.o477-ag-weekday[open] > .o477-ag-weekday-head .o477-ag-weekday-chevron {
  transform: rotate(90deg);
}
.o477-ag-weekday-head.is-today .o477-ag-weekday-chevron { color: #E8247C; }
.o477-ag-weekday-name { flex: 1; text-transform: capitalize; }
.o477-ag-weekday-head b {
  font-weight: 700; color: #01A4A4;
  background: rgba(1,164,164,.10); padding: 2px 8px; border-radius: 999px;
  font-size: 11px; min-width: 18px; text-align: center;
}

.o477-ag-weekday-items {
  /* Vrije ruimte rond de taak-/afspraakregels: 20px links/rechts + 20px onder de laatste (verzoek 8-8). */
  padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 5px;
}
.o477-ag-weekday-empty {
  padding: 16px; text-align: center; color: #94a3b8; font-size: 12px;
  font-style: italic;
}

/* Drag & drop visuals */
.o477-ag-card[draggable="true"] { cursor: grab; }
.o477-ag-card[draggable="true"]:active { cursor: grabbing; }
.o477-ag-card.is-dragging { opacity: .45; }
/* Invoeg-indicator bij herordenen binnen een dag: lijn boven de doelkaart, of onderaan
   de dag-lijst als je onderaan invoegt. */
.o477-ag-card.o477-ag-drop-before { box-shadow: inset 0 3px 0 -1px #01A4A4; }
.o477-ag-drop-end .o477-ag-weekday-items,
.o477-ag-drop-end .o477-ag-week-cell-items { box-shadow: inset 0 -3px 0 -1px #01A4A4; }
.o477-ag-weekday.is-drop-target,
.o477-ag-week-cell.is-drop-target {
  background: #ecfeff !important; border-color: #01A4A4 !important;
  box-shadow: 0 0 0 3px rgba(1,164,164,.18);
}
.o477-ag-weekday.is-drop-target .o477-ag-weekday-head,
.o477-ag-week-cell.is-drop-target .o477-ag-week-cell-head {
  background: #cffafe !important; color: #01A4A4;
}
.o477-ag-weekday.is-drop-target .o477-ag-weekday-empty,
.o477-ag-week-cell.is-drop-target .o477-ag-week-cell-empty {
  color: #01A4A4; font-style: normal; font-weight: 600;
}

/* --- WEEK-view: 7-koloms grid (oorspronkelijke layout, met weekend-beige + drop-target) --- */
.o477-ag-week-grid {
  /* Paginabreed (verzoek 2026-07-18): alle 7 dagen passen samen in de viewport,
     zonder horizontaal scrollen. Kleine ondergrens per kolom als vangnet op erg
     smalle vensters — dan neemt de overflow-x het alsnog over. */
  display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 6px; margin-top: 8px;
  overflow-x: auto; overflow-y: visible; padding-bottom: 8px;
  scrollbar-width: thin;
}
.o477-ag-week-cell {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  display: flex; flex-direction: column; min-height: 240px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.o477-ag-week-cell.is-weekend { background: #fdf8eb; border-color: #ecd9a4; }
.o477-ag-week-cell.is-weekend .o477-ag-week-cell-head { background: #f7eecf; }
.o477-ag-week-cell.is-weekend .o477-ag-card { background: #fffdf5; }
.o477-ag-week-cell-head {
  padding: 8px 10px; border-bottom: 1px solid #a7e7e7; background: #E0F7F7;
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 13px; font-weight: 700; color: #01A4A4;   /* dagtitel in accentkleur op accent-tint */
  cursor: pointer; user-select: none;   /* klik = kolom in-/uitklappen */
}
.o477-ag-week-cell-head:hover { background: #d0f0f0; }
.o477-ag-week-cell.is-weekend .o477-ag-week-cell-head:hover { background: #f0e4b8; }
/* Vandaag: cyclaam titeltekst op lichte cyclaam-tint (verzoek 8-8, dag én week). */
.o477-ag-week-cell-head.is-today {
  background: #FDE7F1; color: #E8247C; border-bottom-color: #E8247C; box-shadow: none;
}
.o477-ag-week-cell-head.is-today:hover { background: #F9CFE3; }
.o477-ag-week-cell-head.is-today .o477-ag-wcol-chevron { color: #E8247C; }
.o477-ag-week-cell-head.is-today b { color: #ffffff; background: #E8247C; padding: 1px 7px; border-radius: 999px; }
.o477-ag-week-cell-head b { font-weight: 700; color: #01A4A4; }
.o477-ag-wcol-chevron { color: #94a3b8; font-size: 11px; flex-shrink: 0; }
.o477-ag-wcol-full { flex: 1; min-width: 0; }
.o477-ag-wcol-short { display: none; }
/* Ingeklapte dagkolom = smalle verticale strook: items weg, korte datum verticaal, aantal onderaan. */
.o477-ag-week-cell.is-col-collapsed .o477-ag-week-cell-items,
.o477-ag-week-cell.is-col-collapsed .o477-ag-week-cell-empty { display: none; }
.o477-ag-week-cell.is-col-collapsed .o477-ag-week-cell-head {
  flex: 1; flex-direction: column; justify-content: flex-start; align-items: center;
  gap: 8px; padding: 8px 2px; border-bottom: none; border-radius: 8px;
}
.o477-ag-week-cell.is-col-collapsed .o477-ag-wcol-full { display: none; }
.o477-ag-week-cell.is-col-collapsed .o477-ag-wcol-short {
  display: inline-block; writing-mode: vertical-rl; text-orientation: mixed;
  white-space: nowrap; font-weight: 700; letter-spacing: .3px;
}
/* Aantal netjes onderaan de smalle strook. */
.o477-ag-week-cell.is-col-collapsed .o477-ag-week-cell-head b { margin-top: auto; }
.o477-ag-week-cell-items {
  /* Zelfde 20px zij-lucht als de dag-view + 20px onder de laatste regel (verzoek 8-8). */
  padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.o477-ag-week-cell-empty {
  padding: 12px; text-align: center; color: #94a3b8; font-size: 11px;
  font-style: italic; flex: 1; display: flex; align-items: center; justify-content: center;
}
.o477-ag-week-grid .o477-ag-card { padding: 6px 8px; border-radius: 6px; }
.o477-ag-week-grid .o477-ag-card-titel { font-size: 12px; }
.o477-ag-week-grid .o477-ag-card-tijd { font-size: 10px; padding: 1px 5px; }
.o477-ag-week-grid .o477-ag-card-uren { font-size: 10px; padding: 1px 5px; }
/* Smalle week-kolommen: titel pakt de volle eerste regel; badges + acties wrappen eronder. */
.o477-ag-week-grid .o477-ag-card-titelwrap { flex: 1 1 100%; }
.o477-ag-week-grid .o477-ag-card-acties { margin-left: auto; }
.o477-ag-week-grid .o477-ag-card-klaar { font-size: 10px; padding: 1px 6px; }
.o477-ag-week-grid .o477-ag-card-meta { font-size: 10px; }

@media (max-width: 800px) {
  .o477-ag-week-grid { grid-template-columns: 1fr; }
  .o477-ag-week-cell { min-height: 60px; }
}

/* --- WEEKBLAD-view: papieren-agenda-opzet (2 kolommen, za+zo delen het laatste vak) --- */
.o477-ag-wb-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  /* 1fr i.p.v. auto: bij schermvullende min-height (gezet in agenda.js) delen
     de rijen de extra hoogte gelijk op — vakken groeien mee met het scherm. */
  grid-template-rows: repeat(6, minmax(78px, 1fr));
  grid-template-areas: "ma do" "ma do" "di vr" "di vr" "wo za" "wo zo";
  gap: 1px; background: #e2e8f0;              /* 1px-gap op grijs = strakke gridlijnen */
  border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
  margin-top: 8px;
}
.o477-ag-wb-cell { background: #ffffff; display: flex; flex-direction: column; min-width: 0; }
.o477-ag-wb-cell.wb-ma { grid-area: ma; } .o477-ag-wb-cell.wb-di { grid-area: di; }
.o477-ag-wb-cell.wb-wo { grid-area: wo; } .o477-ag-wb-cell.wb-do { grid-area: do; }
.o477-ag-wb-cell.wb-vr { grid-area: vr; } .o477-ag-wb-cell.wb-za { grid-area: za; }
.o477-ag-wb-cell.wb-zo { grid-area: zo; }
.o477-ag-wb-cell.is-weekend { background: #fffdf5; }
.o477-ag-wb-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 6px 10px; border-bottom: 1px solid #eef2f7;
  font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer; user-select: none;
}
.o477-ag-wb-head:hover { background: #f1f5f9; }
.o477-ag-wb-head b { font-weight: 600; font-size: 12px; color: #94a3b8; white-space: nowrap; }
/* Vandaag in cyclaam, zelfde stijl als dag- en week-view. */
.o477-ag-wb-cell.is-today .o477-ag-wb-head {
  background: #FDE7F1; color: #E8247C; border-bottom-color: #E8247C;
}
.o477-ag-wb-cell.is-today .o477-ag-wb-head:hover { background: #F9CFE3; }
.o477-ag-wb-cell.is-today .o477-ag-wb-head b { color: #E8247C; }
.o477-ag-wb-items { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.o477-ag-wb-item {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; color: #0f172a; cursor: pointer;
  border-radius: 6px; padding: 2px 4px;
}
.o477-ag-wb-item:hover { background: #f1f5f9; }
.o477-ag-wb-tijd {
  flex: 0 0 auto; color: #ffffff; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.o477-ag-wb-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.o477-ag-wb-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Klaar = niet doorstrepen, alleen lichter (verzoek 8-8). */
.o477-ag-wb-item.is-klaar { opacity: .55; }
.o477-ag-wb-item.is-klaar .o477-ag-wb-titel { color: #94a3b8; }
/* De tekstkleur van een regel volgt de status (15-9, verzoek Jannie). Die kleur
   staat NIET hier: de statussen zijn per tenant instelbaar, dus agenda.js zet
   de kleur uit status_kleur inline op de titel. Daardoor wint hij ook van de
   grijze is-klaar-regel hierboven — de dempende opacity blijft wel staan, zodat
   afgevinkt werk naar de achtergrond zakt. */
/* Slepen in het weekblad: zelfde signalen als dag/weeklijst. */
.o477-ag-wb-item.is-dragging { opacity: .45; }
.o477-ag-wb-item.o477-ag-drop-before { box-shadow: inset 0 3px 0 -1px #01A4A4; }
.o477-ag-drop-end .o477-ag-wb-items { box-shadow: inset 0 -3px 0 -1px #01A4A4; }
.o477-ag-wb-cell.is-drop-target { background: #ecfeff; }
.o477-ag-wb-cell.is-drop-target .o477-ag-wb-head { background: #d4f3f3; }

/* --- Zwevende plus-knop (FAB) rechtsonder: Nieuwe taak / Nieuwe afspraak --- */
.o477-ag-fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 120;   /* boven pagina-chrome, onder de modal-overlay (1000) */
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.o477-ag-fab-knop {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary, #01A4A4); color: #ffffff;
  font-size: 30px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .30);
  transition: transform .15s, background .15s;
}
.o477-ag-fab-knop:hover { background: #018f8f; }
.o477-ag-fab.is-open .o477-ag-fab-knop { transform: rotate(45deg); }  /* + wordt × */
.o477-ag-fab-actie {
  display: none; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  white-space: nowrap;
}
.o477-ag-fab.is-open .o477-ag-fab-actie { display: inline-flex; }

/* --- MAAND-view: kalender-grid --- */
.o477-ag-cal { margin-top: 8px; }
/* Eerste kolom (28px) = weeknummer; daarna 7 dag-kolommen. Header + grid delen
   exact dezelfde template zodat de wk-cel boven elke week uitlijnt. */
.o477-ag-cal-header {
  display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.o477-ag-cal-header span {
  text-align: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: #94a3b8; letter-spacing: .5px;
  padding: 4px 0;
}
.o477-ag-cal-header .o477-ag-cal-wkhead { color: #cbd5e1; }
.o477-ag-cal-grid {
  display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 4px;
}
/* Weeknummer-cel links van elke week-rij */
.o477-ag-cal-wk {
  display: flex; align-items: flex-start; justify-content: center;
  font-size: 11px; font-weight: 700; color: #94a3b8;
  padding-top: 6px;
}
/* Toolbar boven maand-grid (toggle + uitleg) */
.o477-ag-cal-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px dashed #e2e8f0;
}
.o477-ag-cal-cell {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px;
  min-height: 90px; padding: 4px; cursor: pointer;   /* heel het vak klikt naar dag-view */
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  text-align: left; transition: background .15s, border-color .15s;
}
/* Full-mode: cellen groeien mee + scroll als heel veel items */
.o477-ag-cal.is-full .o477-ag-cal-cell { min-height: 120px; max-height: 280px; overflow-y: auto; }
/* Per-dag uitgeklapt ("+N meer"): groeit mee, cap met scroll bij heel veel items. */
.o477-ag-cal-cell.is-expanded { max-height: 280px; overflow-y: auto; }
.o477-ag-cal-cell:hover { background: #f8fafc; border-color: #cbd5e1; }
.o477-ag-cal-cell.is-other-month { background: #fafafa; opacity: .55; }
/* Vandaag in logo-cyclaam (verzoek 8-8), zelfde als dag/weeklijst/weekblad. */
.o477-ag-cal-cell.is-today {
  border-color: #E8247C; background: #FDE7F1;
}
/* Dag-nummer blijft gewoon tekst (verzoek 8-8: geen groot gevuld bolletje meer);
   alleen vandaag krijgt een cyclaam-gevuld nummer. */
.o477-ag-cal-cell.is-today .o477-ag-cal-num { background: #E8247C; color: #ffffff; font-weight: 800; border-radius: 999px; }
.o477-ag-cal-cell.is-weekend { background: #fdf8eb; }
.o477-ag-cal-cell.is-weekend.is-today { background: #FDE7F1; }
/* Maand-cel toont geen pillen meer (verzoek 8-8): alleen kleurbolletjes,
   op de onderste regel van het vak. */
.o477-ag-cal-tot {
  margin-top: auto;   /* duwt de bolletjes naar de onderkant */
  display: flex; justify-content: center; padding-bottom: 2px;
  pointer-events: none;   /* klik valt door naar het dag-vak */
}
.o477-ag-cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; align-items: center; }
.o477-ag-cal-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.o477-ag-cal-tot b { font-size: 11px; font-weight: 600; color: #64748b; margin-left: 4px; }
.o477-ag-cal-cell.is-drop-target {
  background: #cffafe !important; border-color: #01A4A4 !important;
  box-shadow: 0 0 0 2px rgba(1,164,164,.20) inset;
}
.o477-ag-cal-num {
  font-size: 13px; font-weight: 600; color: #334155;
  background: transparent; border: 0; padding: 1px 4px;
  border-radius: 4px; cursor: pointer;
  align-self: flex-start;
}
.o477-ag-cal-num:hover { background: rgba(1,164,164,.10); color: #01A4A4; }
.o477-ag-cal-pills {
  display: flex; flex-direction: column; gap: 3px;
}
.o477-ag-cal-pill {
  display: block; cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  font-size: 12px; font-weight: 600;
  color: #ffffff; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
  transition: transform .1s, opacity .1s, box-shadow .1s;
}
.o477-ag-cal-pill:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.18); }
.o477-ag-cal-pill.is-dragging { opacity: .45; }
/* Touch-sleep (mobiel): de zwevende kopie van het item die de vinger volgt. */
.o477-ag-drag-ghost { box-shadow: 0 8px 20px rgba(0,0,0,.28); border-radius: 4px; }
/* Afgeronde taak-pill: gedimd + doorgestreept (blijft zichtbaar in de kalender) */
.o477-ag-cal-pill.is-klaar { color: #475569; } /* klaar = lichtgrijze pil (achtergrond via JS), geen doorhaling */
/* "+N meer" / "− minder": klikbare chip die alleen die dag uit-/inklapt. */
.o477-ag-cal-more {
  align-self: flex-start; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #0f766e;
  background: #e6f6f5; border: 1px solid #c2e9e7;
  padding: 2px 8px; border-radius: 5px; margin-top: 1px; /* kleine radius (was 999px-pil), zelfde als de item-pills */
  transition: background .1s, border-color .1s;
}
.o477-ag-cal-more:hover { background: #d3f0ee; border-color: #01A4A4; }
/* Tijd-prefix in een maand-pill (afspraak met begintijd). */
.o477-ag-cal-pill-tijd { font-weight: 800; opacity: .9; }

/* === Hover-popover: volledige info van een agenda-item === */
.o477-ag-card-tenant {
  background: #475569; color: #fff; border-radius: 6px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.o477-ag-card-link {
  color: #01A4A4; font-weight: 600; text-decoration: none;
  background: rgba(1, 164, 164, .10); border-radius: 6px; padding: 1px 6px;
}
.o477-ag-card-link:hover { background: rgba(1, 164, 164, .18); text-decoration: underline; }
/* Opener achter de titel (2-9): klein, ook zichtbaar op ingeklapte kaarten. */
.o477-ag-card-golink {
  text-decoration: none; font-size: 12px; line-height: 1;
  margin-left: 4px; flex: 0 0 auto; opacity: .85;
}
.o477-ag-card-golink:hover { opacity: 1; transform: scale(1.15); }

/* Planregels: grotere selectieblokjes + shift-klik reeks-selectie (2-9). */
.o477-pl-sel, #o477-pl-sel-all {
  width: 20px; height: 20px;
  accent-color: #01A4A4; cursor: pointer;
  vertical-align: middle;
}

.o477-ag-pop {
  position: fixed; z-index: 100000; pointer-events: none;
  width: 280px; max-width: 88vw;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.22);
  font-size: 12px; color: #334155; overflow: hidden;
}
.o477-ag-pop-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-left: 4px solid #01A4A4;
  background: #f8fafc; border-bottom: 1px solid #eef2f6;
}
.o477-ag-pop-icon { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.o477-ag-pop-titel { font-weight: 700; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; }
.o477-ag-pop-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; }
.o477-ag-pop-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; line-height: 1.35; }
.o477-ag-pop-lab { color: #94a3b8; font-weight: 600; }
.o477-ag-pop-status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-weight: 700; font-size: 11px; color: #ffffff; background: #64748b;
}
.o477-ag-pop-status.is-doen  { background: #64748b; }
.o477-ag-pop-status.is-bezig { background: #d97706; }
.o477-ag-pop-status.is-klaar { background: #16a34a; }
.o477-ag-pop-status.is-wacht { background: #0891b2; }
.o477-ag-pop-hint {
  padding: 6px 12px; border-top: 1px solid #eef2f6;
  font-size: 11px; color: #94a3b8; background: #fbfdfe;
}

/* === Jaar-view: 12 mini-kalenders in grid === */
.o477-ag-yr {
  display: grid; gap: 16px; margin-top: 8px;
  grid-template-columns: repeat(4, 1fr);
}
.o477-ag-yr-month {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 10px;
}
.o477-ag-yr-month-name {
  display: block; width: 100%;
  background: transparent; border: 0;
  font-size: 13px; font-weight: 700; color: var(--primary-dark, #018585);
  text-align: left; cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.o477-ag-yr-month-name:hover { background: rgba(1,164,164,.10); }
.o477-ag-yr-dows {
  display: grid; grid-template-columns: 18px repeat(7, 1fr);   /* wk-kolom (23-8) */
  font-size: 9px; color: #94a3b8; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  text-align: center;
  margin-bottom: 4px;
  padding: 0 2px;
}
.o477-ag-yr-grid {
  display: grid; grid-template-columns: 18px repeat(7, 1fr);   /* wk-kolom (23-8) */
  gap: 1px;
}
/* Weeknummers links in de mini-maanden van de jaarweergave */
.o477-ag-yr-wkhead { opacity: .8; }
.o477-ag-yr-wk {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  height: 22px; border-right: 1px solid #eef2f7;
}
.o477-ag-yr-empty { display: block; }
.o477-ag-yr-day {
  background: transparent; border: 0;
  font-size: 10px; font-weight: 500; color: #475569;
  cursor: pointer;
  padding: 0; height: 22px; line-height: 22px;
  border-radius: 4px;          /* vierkant label i.p.v. cirkel */
  position: relative;
  transition: background .15s, color .15s, transform .1s;
}
.o477-ag-yr-day:hover { background: rgba(1,164,164,.15); color: #01A4A4; transform: scale(1.08); }
.o477-ag-yr-day.is-weekend { color: #b4884a; }
/* Dagen met items: gevulde kleur-achtergrond → meteen zichtbaar */
.o477-ag-yr-day.has-items {
  background: var(--dot, #01A4A4);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.o477-ag-yr-day.has-items:hover {
  filter: brightness(1.12);
  color: #ffffff;
}
/* Vandaag: turquoise rand om elke andere achtergrond heen */
.o477-ag-yr-day.is-today {
  background: #01A4A4;
  color: #ffffff;
  font-weight: 800;
  outline: 2px solid #01A4A4;
  outline-offset: 1px;
}
.o477-ag-yr-day.is-today.has-items {
  /* Vandaag-met-items: behoud vandaag-turquoise (overrulet item-kleur) maar krijgt extra ring */
  background: #01A4A4;
}

@media (max-width: 1100px) {
  .o477-ag-yr { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .o477-ag-week { grid-template-columns: 1fr; }
  .o477-ag-weekday { min-height: 60px; }
  .o477-ag-cal-cell { min-height: 60px; padding: 4px; }
  .o477-ag-cal-num { font-size: 12px; }
  .o477-ag-yr { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .o477-ag-yr { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE-PROOF — overkoepelende aanpassingen voor < 800px
   Coverage: agenda-toolbar · maand-cellen · jaar-view ·
   instellingen-tabs · modal-rows · header-nav · uren-modal ·
   project-detail tabs · gantt-toolbar
   ============================================================ */
@media (max-width: 800px) {
  /* --- Agenda toolbar: laat 'm wrappen, compactere knoppen (padding komt
         van de filterkaart eromheen) --- */
  .o477-crm-toolbar.o477-ag-toolbar { flex-wrap: wrap; gap: 6px; padding: 0; }
  .o477-ag-view-toggle { order: 0; }
  .o477-ag-view-btn { padding: 5px 10px; font-size: 12px; }
  .o477-crm-toolbar.o477-ag-toolbar .o477-btn { padding: 5px 10px; font-size: 12px; }
  .o477-ag-label { font-size: 12px; flex-basis: 100%; text-align: center; order: 99; }

  /* --- Agenda-kaarten (dag/week): pillen netjes gerangschikt op mobiel ---
     Kop = titel + actieknopjes rechts; daaronder de status-pil op een eigen
     regel over de volle breedte (tekst links); de 🔔-herinnering in de
     meta-regel ook vol-breed. Ingeklapte kaarten (1-regelstrook) doen niet mee. */
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-titelwrap { order: 0; flex: 1 1 0; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-acties { order: 1; margin-left: auto; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-klant { order: 2; }
  /* Status blijft een compacte pil op eigen regel (was vol-breed/40px — oogde te groot). */
  .o477-ag-card:not(.is-collapsed) select.o477-ag-card-status,
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-klaar {
    order: 3; flex: 0 0 auto; width: auto; max-width: 100%; box-sizing: border-box;
    align-self: flex-start; margin-top: 6px;
    text-align: left; text-align-last: left;
    font-size: 12px; padding: 4px 22px 4px 10px;
    border-radius: 999px;
    background-position: right 8px center;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-her {
    width: 100%; max-width: none; box-sizing: border-box;
    min-height: 40px; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  }

  /* --- Agenda maand-view: kleinere cellen + pills --- */
  .o477-ag-cal-cell { min-height: 56px; padding: 2px; }
  .o477-ag-cal.is-full .o477-ag-cal-cell { min-height: 80px; max-height: 180px; }
  .o477-ag-cal-num { font-size: 11px; padding: 0 3px; }
  .o477-ag-cal-pill { font-size: 11px; padding: 3px 6px; }
  .o477-ag-cal-more { font-size: 10px; padding: 2px 6px; }
  .o477-ag-cal-header span { font-size: 10px; padding: 2px 0; }

  /* --- Agenda jaar-view: kleinere mini-kalenders --- */
  .o477-ag-yr-month { padding: 6px; }
  .o477-ag-yr-month-name { font-size: 12px; }
  .o477-ag-yr-day { font-size: 9px; height: 20px; line-height: 20px; }
  .o477-ag-yr-dows { font-size: 8px; }

  /* --- /instellingen tabs: horizontale scroll i.p.v. wrap --- */
  .o477-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0 -12px 12px;
    padding: 0 12px;
  }
  .o477-tabs .o477-tab {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* --- Modals op een telefoon: bovenaan uitlijnen en de overlay laten scrollen.
     Gecentreerd valt de bovenkant buiten beeld zodra het schermtoetsenbord de
     viewport verkleint — je komt er dan niet meer bij (melding 2-8). --- */
  .o477-modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 28px;
  }
  /* --- Modal-rows: stack op smal scherm --- */
  .o477-modal { padding: 16px; max-height: none; margin: 0 auto; }
  .o477-modal .o477-modal-row { flex-direction: column; gap: 4px; }
  .o477-modal .o477-modal-row > div { width: 100%; }
  .o477-modal h2 { font-size: 17px; margin-bottom: 12px; }
  /* Veldgrids in modals (inline style="grid-template-columns:1fr 1fr…") stapelen
     op mobiel verticaal — !important is nodig om de inline stijl te verslaan. */
  .o477-veldgrid { grid-template-columns: 1fr !important; }

  /* --- Header-nav dropdowns: full-width op mobile --- */
  .o477-nav { flex-wrap: wrap; gap: 4px; }
  .o477-nav-group-btn { padding: 6px 10px; font-size: 13px; }
  .o477-nav-dropdown {
    position: fixed;
    left: 8px; right: 8px;
    top: auto;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .o477-nav-dropdown-item { padding: 10px 12px; font-size: 14px; }

  /* --- Project-detail tabs: scrollbar i.p.v. wrap --- */
  .o477-pd-tabs {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px; padding: 0 12px;
  }

  /* --- Gantt toolbar: stackt netjes --- */
  .o477-gantt-toolbar { flex-wrap: wrap; gap: 6px; }
  .o477-gantt-toolbar .o477-btn { padding: 5px 10px; font-size: 12px; }

  /* --- Uren-modal + algemene form-inputs: groter touch-target --- */
  .o477-modal input[type="text"],
  .o477-modal input[type="number"],
  .o477-modal input[type="date"],
  .o477-modal input[type="time"],
  .o477-modal input[type="email"],
  .o477-modal select,
  .o477-modal textarea {
    min-height: 40px;
    font-size: 16px;        /* voorkomt zoom-in op iOS bij focus */
  }

  /* --- Knoppen algemeen: min touch-target 40px --- */
  .o477-btn { min-height: 36px; padding: 6px 12px; }

  /* --- Page-header marges --- */
  .o477-page-title { font-size: 20px; }
  .o477-page-desc { font-size: 13px; }
}

/* ============ AGENDA — MOBIEL (≤720px): toolbar verticaal ============
   Zelfde lijn als werkbord/documenten: rijen op volle breedte met touch-maat
   40px. Grid van 6 kolommen: weergave-toggle en periode-label vol-breed,
   Vorige/Vandaag/Volgende als drieluik, de twee +Nieuwe-knoppen als
   halve-rij-paar (zoals de datum-chips op het werkbord). */
@media (max-width: 720px) {
  .o477-crm-toolbar.o477-ag-toolbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0; }
  .o477-ag-view-toggle { grid-column: 1 / -1; display: flex; }
  .o477-ag-view-btn { flex: 1 1 0; min-height: 40px; padding: 5px 4px; font-size: 13px; }
  #o477-ag-prev, #o477-ag-today, #o477-ag-next { grid-column: span 2; min-height: 40px; padding: 6px 4px; font-size: 13px; white-space: nowrap; }
  .o477-ag-label { grid-column: 1 / -1; order: 0; text-align: center; font-size: 13px; padding: 0; }
  /* Actiebalk onder de kaart: beide +Nieuwe-knoppen half-om-half, touch-maat */
  .o477-ag-actiebalk .o477-btn { flex: 1 1 0; min-height: 40px; font-size: 13px; }
  /* Weergave-menu: klein hamburger-pilletje rechts, touch-maat; lijst rechts uitgelijnd. */
  .o477-ag-view-menu-knop { min-height: 40px; min-width: 56px; }
  .o477-ag-view-menu-lijst .o477-ag-view-btn { min-height: 40px; }
}

@media (max-width: 500px) {
  /* Extra compact voor smartphone-portrait */
  /* Kleurbolletjes-rij (o477-ag-cal-dots) toont de items al — geen extra stip. */
  .o477-ag-yr-day { font-size: 8px; height: 18px; line-height: 18px; }
  .o477-app { padding: 8px 8px 80px; }
}

/* ===========================================================================
   PLANREGELS - Mobile cards-view
   Op klein scherm verbergen we de tabel en tonen tegels per dag.
   =========================================================================== */
.o477-pr-mobile {
  display: none;
}
@media (max-width: 800px) {
  /* Verberg desktop-tabel en pagination-banner op mobile (mobile heeft eigen versies) */
  #o477-pr-tabel > div[style*="overflow-x"],
  #o477-pr-tabel .o477-pr-pagination-banner.o477-pr-pagination-desktop {
    display: none;
  }
  .o477-pr-mobile {
    display: block;
    margin-top: 8px;
  }
  /* Toolbar overflow zorgen voor scrollbaar op mobile */
  .o477-crm-toolbar {
    overflow-x: auto;
    flex-wrap: wrap;
  }
}
.o477-pr-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 16px 0 8px;
  background: linear-gradient(135deg, #01A4A4 0%, #018888 100%);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(1,164,164,0.2);
}
.o477-pr-day-header.is-vandaag {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 2px 8px rgba(220,38,38,0.25);
}
.o477-pr-day-header.is-morgen {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.o477-pr-day-header .o477-pr-day-naam {
  flex: 1;
}
.o477-pr-day-header .o477-pr-day-count {
  background: rgba(255,255,255,0.25);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.o477-pr-day-header .o477-pr-day-uren {
  background: rgba(255,255,255,0.18);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.o477-pr-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: grid;
  gap: 6px;
}
.o477-pr-card .o477-pr-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 2px;
}
.o477-pr-card .o477-pr-card-foto {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.o477-pr-card .o477-pr-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.o477-pr-card .o477-pr-card-foto-empty {
  font-size: 24px;
  color: #cbd5e1;
}
.o477-pr-card .o477-pr-card-info {
  flex: 1;
  min-width: 0;
}
.o477-pr-card .o477-pr-card-title {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.3;
  margin-bottom: 2px;
}
.o477-pr-card .o477-pr-card-projnr {
  font-family: monospace;
  font-size: 11px;
  color: #6366f1;
  font-weight: 600;
}
.o477-pr-card .o477-pr-card-adres {
  font-size: 13px;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.o477-pr-card .o477-pr-card-adres-link {
  color: #2563eb;
  text-decoration: none;
}
.o477-pr-card .o477-pr-card-adres-link:hover {
  text-decoration: underline;
}
.o477-pr-card .o477-pr-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: #4b5563;
}
.o477-pr-card .o477-pr-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.o477-pr-card .o477-pr-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.o477-pr-card .o477-pr-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}
.o477-pr-card .o477-pr-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}
.o477-pr-card .o477-pr-card-btn {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #475569;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.o477-pr-card .o477-pr-card-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* ===========================================================================
   Print fallback voor /opdrachtbon/?id=NN detail-pagina
   Als user Ctrl+P doet ZONDER eerst de print-knop te gebruiken, geef tenminste
   een melding. Voor de echte PDF moet de "Print opdrachtbon"-knop gebruikt worden
   die de schone HTML-template opent.
   =========================================================================== */
@media print {
  /* Verberg ALLES op de detail-pagina behalve de print-melding */
  body.page-template-page-opdrachtbon-php * {
    visibility: hidden;
  }
  body.page-template-page-opdrachtbon-php::before {
    content: "⚠ Gebruik de knop '🖨 Print opdrachtbon' onderin de pagina voor de schone PDF — niet Ctrl+P op dit scherm.";
    visibility: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16pt;
    color: #dc2626;
    background: #fff;
    padding: 20pt;
    border: 2pt solid #dc2626;
    border-radius: 8pt;
    max-width: 400pt;
    text-align: center;
    line-height: 1.5;
  }
}

/* === Offerteregels-invoer (offerte-detail, tab "Offerteregels"; interne slug 'bijlages') === */
.o477-bijlage-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--surface);
}
.o477-bijlage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.o477-bijlage-titel { flex: 1; font-size: 15px; font-weight: 700; color: var(--primary-dark); }
.o477-bijlage-del { white-space: nowrap; }
/* Specificaties (bulletlijst) onder de omschrijving van een offerteregel */
.o477-bijlage-omschr { vertical-align: top; }
.o477-bijlage-omschr input { width: 100%; }
.o477-bijlage-specs {
  width: 100%; margin-top: 6px; font-size: 12px; line-height: 1.5;
  resize: vertical; color: var(--text-secondary);
}
.o477-bijlage-specs.o477-specs-hidden { display: none; }
.o477-bijlage-specs-toggle {
  display: block; background: none; border: none; padding: 3px 0 0;
  font-size: 11px; color: var(--primary); cursor: pointer;
}
.o477-bijlage-specs-toggle:hover { text-decoration: underline; }
.o477-bijlage-foot {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.o477-bijlage-totals {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  margin-left: auto; font-size: 13px; color: var(--text-secondary); text-align: right;
}
.o477-bijlage-totals .o477-bt-row strong { color: var(--text); }
.o477-bijlage-totals .o477-bt-incl {
  font-size: 15px; font-weight: 700; color: var(--primary-dark);
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px;
}
.o477-bijlage-totals .o477-bt-incl strong { color: var(--primary-dark); }

/* === Fotobijlage (offerte-detail, tab "Fotobijlage") === */
.o477-foto-tbl td { vertical-align: top; }
.o477-foto-cell { white-space: normal; }
.o477-foto-thumb-wrap { margin-bottom: 8px; }
.o477-foto-thumb {
  max-width: 240px; max-height: 150px; display: block;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.o477-foto-up { display: inline-block; cursor: pointer; }
.o477-foto-status { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }
/* Sorteren van bijlage-groepen (▲▼) */
.o477-bijlage-move { display: inline-flex; gap: 2px; margin-right: 6px; }
.o477-bijlage-move .o477-btn { padding: 2px 9px; line-height: 1.2; font-size: 12px; }

/* === Print: hele offerte-detail (alle tabs incl. bijlages), schone documentweergave === */
@media print {
  body.page-template-page-offerte-detail-php { background: #fff; }
  /* Verberg page-chrome + bewerk-affordances */
  body.page-template-page-offerte-detail-php .o477-header,
  body.page-template-page-offerte-detail-php .o477-footer,
  body.page-template-page-offerte-detail-php .o477-pd-backbar,
  body.page-template-page-offerte-detail-php .o477-pd-hero-actions,
  body.page-template-page-offerte-detail-php .o477-pd-tabs,
  body.page-template-page-offerte-detail-php .o477-noprint,
  body.page-template-page-offerte-detail-php .o477-od-regel-del { display: none !important; }
  /* Toon alle tab-panelen onder elkaar */
  body.page-template-page-offerte-detail-php #o477-od-root [data-tab-panel] { display: block !important; margin-bottom: 14px; }
  /* Invoervelden als platte tekst printen */
  body.page-template-page-offerte-detail-php .o477-pd-edit,
  body.page-template-page-offerte-detail-php .o477-pd-table tbody td input,
  body.page-template-page-offerte-detail-php .o477-pd-table tbody td select {
    border: none !important; background: transparent !important; box-shadow: none !important;
    -webkit-appearance: none; appearance: none; padding: 0 !important; color: #000 !important;
  }
  body.page-template-page-offerte-detail-php textarea.o477-pd-edit { height: auto !important; }
  /* Houd een sectie/groep bij elkaar op de pagina */
  body.page-template-page-offerte-detail-php .o477-bijlage-group,
  body.page-template-page-offerte-detail-php .o477-pd-section { break-inside: avoid; }
  /* Volle breedte, geen schermmarges, eigen portrait-pagina */
  body.page-template-page-offerte-detail-php .o477-app { max-width: none; padding: 0; margin: 0; page: offerte; }
  body.page-template-page-offerte-detail-php .o477-pd-section { border: none; }
  @page offerte { size: A4 portrait; margin: 14mm; }
}

/* === Grootboek + Grootboekkaarten: Groeperen op hoofdgroep (schermwissel met totaalbalk) ===
   Inklapbare groepskop-rijen (Activa/Passiva/Eigen Vermogen/Opbrengsten/Kosten/Rente en
   Afschrijvingen) over de server-gerenderde tabellen; opbouw in js/grootboek.js.
   Bedragen staan in echte kolom-cellen zodat ze verticaal uitlijnen met de rijen eronder
   (bankboek-les v2.234.9). Specificiteit (0,2,3)+ zodat de inline page-CSS niet wint. */
.o477-gb-groeplbl { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text); white-space:nowrap; }
.o477-table tbody tr.o477-gbgrp { cursor:pointer; background:#eef6f6; }
.o477-table tbody tr.o477-gbgrp:hover { background:#e0f2f2; }
.o477-table tbody tr.o477-gbgrp > td {
    font-size:13px; color:#0f766e; padding:10px 12px; white-space:nowrap;
    font-variant-numeric:tabular-nums; border-top:1px solid #b6e3e3;
}
.o477-table tbody tr.o477-gbgrp:focus-visible { outline:2px solid #01A4A4; outline-offset:-2px; }
.o477-table tbody tr.o477-gbgrp .caret { display:inline-block; font-size:15px; color:#01A4A4; transition:transform 150ms; }
.o477-table tbody tr.o477-gbgrp.is-collapsed .caret { transform:rotate(-90deg); }
.o477-table tbody tr.o477-gbgrp .o477-gbgrp-tel { font-size:12px; font-weight:400; color:#5b8a8a; }
.o477-table tbody tr.o477-gbgrp .o477-gbgrp-extra { font-size:12px; font-weight:600; color:#0f766e; }
.o477-table tbody tr.o477-gbgrp .o477-gbgrp-lbl {
    display:block; font-size:11px; font-weight:400; color:#5b8a8a;
    text-transform:uppercase; letter-spacing:.03em; line-height:1.2;
}
.o477-table tbody tr.o477-gbgrp .o477-gbgrp-bedrag { font-weight:700; }
/* Zoekfilter op /grootboekkaarten verbergt rijen via dezelfde klasse als /grootboek. */
#o477-gk-tabel tr.is-filtered { display:none; }
/* "Alles in-/uitklappen"-knoppen naast Groeperen — alleen zichtbaar bij actieve groepering
   ([hidden]-regel expliciet, anders wint display:inline-flex van het hidden-attribuut). */
.o477-gbgrp-acties { display:inline-flex; gap:6px; align-items:center; }
.o477-gbgrp-acties[hidden] { display:none; }
.o477-gbgrp-acties .o477-btn { font-size:12px; }

/* ============ PLANREGELS-TABEL: uitgelijnde koppen + sleepbare kolombreedtes ============
   Koppen op 1 regel (nowrap) en verticaal gecentreerd zodat pillen/velden op een lijn
   staan; elke kop heeft rechts een sleepgreep (o477-pl-greep) voor de kolombreedte. */
.o477-pl-tabel thead th { vertical-align: middle; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; }
.o477-pl-tabel tbody td { vertical-align: middle; }
.o477-pl-greep { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
.o477-pl-greep:hover { background: rgba(8, 145, 178, .25); }

/* Afrekeningsregel met "✓ Betaald"-knop rechts (huishoudpotje). */
.o477-pot-overboeking { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.o477-pot-overboeking .o477-pot-betaald-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
  .o477-pot-overboeking { flex-wrap: wrap; }
  .o477-pot-overboeking .o477-pot-betaald-btn { width: 100%; }
}

/* ============ MOBIELE KAARTEN — generiek stramien (2-8) ============
   Huishoudpotje-model voor álle stramien-tabellen: onder 720px worden rijen
   kaarten (veldnaam klein boven de waarde), dicht = alleen kop 1 + kop 2,
   ▾ klapt open. o477-mobiel-kaarten.js stempelt data-label/data-kop en de
   klasse .o477-mk automatisch; .o477-mob-scroll zet het per tabel uit. */
@media (max-width: 720px) {
  /* Niets mag het scherm uit duwen: de pagina zelf scrolt nooit horizontaal.
     Binnen .o477-table-scroll (niet-omgebouwde tabellen) mag het wél. */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .o477-app img, .o477-app svg, .o477-app video { max-width: 100%; height: auto; }

  table.o477-mk thead { display: none; }
  table.o477-mk, table.o477-mk tbody, table.o477-mk tr, table.o477-mk td {
    display: block; width: 100%; box-sizing: border-box;
  }
  table.o477-mk { background: transparent; box-shadow: none; overflow: visible; min-width: 0 !important; }
  .o477-table-scroll:has(table.o477-mk) { overflow: visible; }
  table.o477-mk tbody tr {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
    height: auto;
  }
  table.o477-mk tbody td {
    height: auto; border-bottom: 0; padding: 6px 0;
    text-align: left !important; white-space: normal;
  }
  table.o477-mk td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 3px;
  }
  table.o477-mk td:empty { display: none; }

  /* Dicht: alleen de kopregel; ▾ rechtsboven klapt open. */
  .o477-mk-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: #fff; color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
    font-size: 14px; cursor: pointer; padding: 0;
    transition: transform .15s ease;
  }
  table.o477-mk tbody tr.is-open .o477-mk-toggle {
    transform: rotate(180deg);
    color: var(--primary, #01A4A4); border-color: var(--primary, #01A4A4); background: #ecfeff;
  }
  table.o477-mk tbody tr:not(.is-open):not(.o477-mk-blok) > td { display: none; }
  table.o477-mk tbody tr:not(.is-open) > td[data-kop] { display: block; padding-right: 48px; }
  table.o477-mk tbody tr:not(.is-open) > td[data-kop]::before { display: none; }
  table.o477-mk tbody tr:not(.is-open) > td[data-kop="1"] { font-weight: 600; font-size: 15px; }
  table.o477-mk tbody tr:not(.is-open) > td[data-kop="2"] { font-size: 13px; color: var(--text-muted, #64748b); padding-top: 0; }
  table.o477-mk tbody tr.is-open { background: #f0fdfa; border-color: #99e6e6; }

  /* Groepskoppen/totaalregels (colspan): compact blok zonder toggle. */
  table.o477-mk tbody tr.o477-mk-blok { padding: 8px 14px; }
  table.o477-mk tbody tr.o477-mk-blok .o477-mk-toggle { display: none; }
  table.o477-mk tbody tr.o477-mk-blok > td { display: block; }

  /* Pillen en regel-knoppen in kaarten: inhoud-breed, tikbare hoogte. */
  table.o477-mk .pill,
  table.o477-mk .o477-dos-reg-btn,
  table.o477-mk select.o477-str-pill-sel {
    display: inline-flex; width: auto !important; max-width: 100% !important;
    justify-content: center; box-sizing: border-box;
    height: auto; min-height: 34px; padding: 6px 14px;
    border-radius: 8px; font-size: 14px;
  }
  table.o477-mk td.o477-doc-acties { border-left: 0; padding-left: 0; width: 100%; white-space: normal; }
  table.o477-mk td.o477-doc-acties .o477-doc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: 20px; margin-right: 8px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff;
  }
}

/* ============================================================= agenda mobiel
   ≤720px (verzoek 8-8): kaarten tonen ingeklapt alléén de titel; een tik op de
   kaart klapt uit en toont alle info verticaal onder elkaar. Dagkoppen worden
   duidelijker (groter, sticky, vandaag = volle accentbalk). Desktop onveranderd. */
.o477-ag-openbtn { display: none; } /* alleen zichtbaar op mobiel, uitgeklapte kaart */
@media (max-width: 720px) {
  /* --- Dagkoppen: sticky balk, grotere vette dagnaam --- */
  .o477-ag-weekday-head {
    position: sticky; top: 0; z-index: 5;
    background: #e8f1f1; border-bottom: 1px solid #d3e2e2;
    font-size: 15px; font-weight: 800; color: #0f172a;
    padding: 12px 14px;
  }
  .o477-ag-weekday.is-weekend .o477-ag-weekday-head { background: #f5eccc; }
  /* Vandaag: cyclaam titeltekst op lichte cyclaam-tint (verzoek 8-8). */
  .o477-ag-weekday-head.is-today {
    background: #FDE7F1; color: #E8247C; box-shadow: inset 0 -2px 0 #E8247C;
  }
  .o477-ag-weekday-head.is-today:hover { background: #FDE7F1; }
  .o477-ag-weekday-head.is-today .o477-ag-weekday-chevron { color: #E8247C; }
  .o477-ag-weekday-head.is-today b { background: #E8247C; color: #ffffff; }
  .o477-ag-weekday-head b { font-size: 12px; }

  /* --- Niets mag buiten het scherm vallen (16-9, melding Jannie: kaarten en
     dagkoppen liepen rechts uit beeld) ---
     Oorzaak: de titel-wrapper stond op `flex: 1 1 auto`, dus zijn basisbreedte
     was de VOLLE tekstbreedte. Bij een ingeklapte kaart staat de titel op
     nowrap; zo'n lange regel rekte de hele lijst op en alles schoof mee.
     Met basis 0 krimpt hij netjes en doet de ellipsis zijn werk. */
  #o477-ag-content, .o477-ag-week, .o477-ag-weekday,
  .o477-ag-weekday-items { max-width: 100%; overflow-x: hidden; }
  .o477-ag-card { max-width: 100%; box-sizing: border-box; }
  /* Lucht onder elke dag (16-9, verzoek Jannie): op de telefoon plakken de
     dagblokken anders aan elkaar en zie je niet waar een dag ophoudt. */
  .o477-ag-week { gap: 18px; }
  /* Smalle zijmarges op de telefoon (16-9, verzoek Jannie: "de regels meer
     naar links"): op het scherm is 20px links en rechts zonde van de breedte. */
  .o477-ag-weekday-items { padding: 8px 8px 22px; }

  /* Hetzelfde voor de WEEK-weergave (die valt onder 800px terug naar een
     kolom, dus op de telefoon zie je die cellen, niet de dag-lijst) en voor
     het weekblad. Zonder dit gebeurde er op de telefoon niets: de regels
     hierboven raken alleen de dag-weergave (16-9). */
  .o477-ag-week-grid, .o477-ag-week-cell, .o477-ag-week-cell-items,
  .o477-ag-wb-grid, .o477-ag-wb-cell, .o477-ag-wb-items { max-width: 100%; overflow-x: hidden; }
  .o477-ag-week-grid { gap: 18px; padding-bottom: 12px; }
  .o477-ag-week-cell-items { padding: 6px 8px 22px; }
  .o477-ag-wb-items { padding: 6px 8px 16px; }

  /* Dagtitels groter op de telefoon (16-9, verzoek Jannie): de dagkop is het
     ankerpunt bij het scrollen, dus die mag opvallen. */
  .o477-ag-week-cell-head { font-size: 17px; font-weight: 800; padding: 12px 10px; }
  .o477-ag-week-cell-head .o477-ag-wcol-full { font-size: 17px; }
  .o477-ag-weekday-head { font-size: 17px; }
  .o477-ag-wb-head { font-size: 15px; font-weight: 800; padding: 10px 10px; }
  .o477-ag-card-head, .o477-ag-card-titelwrap { min-width: 0; }
  .o477-ag-card-titelwrap { flex: 1 1 0; }
  .o477-ag-card-titel { min-width: 0; }

  /* --- Ingeklapte kaart: alléén de titel (+ stille chevron rechts) --- */
  .o477-ag-card.is-collapsed .o477-ag-card-status,
  .o477-ag-card.is-collapsed .o477-ag-card-klant,
  .o477-ag-card.is-collapsed .o477-ag-card-acties { display: none; }
  .o477-ag-card.is-collapsed .o477-ag-card-head::after {
    content: '▸'; color: #94a3b8; font-size: 12px; flex-shrink: 0; align-self: center;
  }

  /* --- Uitgeklapte kaart: alle info verticaal, ruime tap-targets --- */
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-head {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-titel { font-size: 15px; }
  /* Status als compacte pil, niet vol-breed (verzoek 8-8: label stond opeens vergroot). */
  .o477-ag-card:not(.is-collapsed) select.o477-ag-card-status {
    max-width: 100%; width: auto; height: auto; align-self: flex-start;
    padding: 4px 22px 4px 10px; font-size: 12px;
    background-position: right 8px center;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-klant {
    align-self: flex-start; font-size: 12px; padding: 4px 12px;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-klaar { align-self: flex-start; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-acties { margin-left: 0; gap: 8px; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-act-btn { width: 42px; height: 36px; font-size: 15px; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-meta {
    flex-direction: column; align-items: stretch; gap: 6px; margin-top: 4px;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-card-tijd { align-self: flex-start; }
  .o477-ag-card:not(.is-collapsed) .o477-ag-her {
    max-width: none; width: 100%; padding: 8px 10px; font-size: 13px;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-openbtn {
    display: block; width: 100%; margin-top: 8px;
    padding: 9px 12px; font-size: 14px; font-weight: 600;
    background: #ffffff; color: #01A4A4;
    border: 1px solid #01A4A4; border-radius: 8px; cursor: pointer;
  }
  .o477-ag-card:not(.is-collapsed) .o477-ag-openbtn:active { background: #ecfeff; }
}

/* === Leesweergave aantekeningen (📖-knop): wit, doorlopend scrollen (22-8) === */
.o477-aant-pres { position: fixed; inset: 0; z-index: 10050; background: #fff; color: #1e293b; display: flex; flex-direction: column; }
.o477-aant-pres-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: #64748b; font-size: 13px; flex: 0 0 auto; background: #fff; border-bottom: 1px solid #e2e8f0; }
.o477-aant-pres-doc { font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o477-aant-pres-tel { margin-left: auto; font-variant-numeric: tabular-nums; }
.o477-aant-pres-x { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.o477-aant-pres-x:hover { color: #0f172a; }
.o477-aant-pres-doc-body { flex: 1; overflow-y: auto; padding: 28px clamp(18px, 3vw, 44px) 80px; max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.o477-aant-pres-sectie { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid #eef2f7; }
.o477-aant-pres-sectie:last-child { border-bottom: 0; }
.o477-aant-pres-kruimel { color: #01A4A4; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; margin-bottom: 4px; }
/* Titelkleuren als in het document: KOP donker, Titel teal (23-8).
   Eigen kleuren die je zelf op een titel hebt gezet (inline) winnen hiervan. */
.o477-aant-pres-titel { font-size: clamp(22px, 3vw, 30px); margin: 0 0 14px; color: #0f172a; border-bottom: 3px solid #01A4A4; padding-bottom: 8px; }
.o477-aant-pres-titel--h3 { color: #018585; }
.o477-aant-pres-titel--h1 { color: #01A4A4; font-size: clamp(26px, 3.4vw, 34px); }
/* Alle documenttekst op één maat (16px): afwijkende lettergroottes uit de
   editor worden hier bewust genegeerd, zodat de leesweergave rustig oogt. */
.o477-aant-pres-body { font-size: 16px; line-height: 1.65; }
.o477-aant-pres-body p, .o477-aant-pres-body div, .o477-aant-pres-body span,
.o477-aant-pres-body li, .o477-aant-pres-body td, .o477-aant-pres-body th,
.o477-aant-pres-body label, .o477-aant-pres-body h1, .o477-aant-pres-body h2, .o477-aant-pres-body h3,
.o477-aant-pres-body h4, .o477-aant-pres-body h5, .o477-aant-pres-body h6,
.o477-aant-pres-body font { font-size: 16px !important; }
/* Koppen die middenin een sectie staan: zelfde maat, eigen documentkleur */
.o477-aant-pres-body h1 { color: #01A4A4; font-weight: 800; margin: 16px 0 6px; }
.o477-aant-pres-body h2 { color: #0f172a; font-weight: 800; margin: 16px 0 6px; }
.o477-aant-pres-body h3 { color: #018585; font-weight: 700; margin: 16px 0 6px; }
.o477-aant-pres-body p { margin: 0 0 10px; }
.o477-aant-pres-body h4 { color: #52088c; font-weight: 700; margin: 16px 0 6px; }
/* Foto's: ORIGINELE opmaak behouden (22-8) — inline width/float/display uit de
   editor winnen van deze regels, dus "naast elkaar" en "tekst ernaast" blijven
   staan. Alleen een veiligheidsplafond zodat niets buiten de kolom valt. */
.o477-aant-pres-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 10px 0; }
/* Titels beginnen altijd onder een zwevende foto (zelfde als editor/print) */
.o477-aant-pres-body h1, .o477-aant-pres-body h2, .o477-aant-pres-body h3, .o477-aant-pres-body h4 { clear: both; }
.o477-aant-pres-sectie::after { content: ''; display: block; clear: both; }
.o477-aant-pres-body hr.o477-aant-pagebreak { display: none; }
/* Smal scherm: geschaalde foto's vullen de breedte, maar "naast elkaar"-paren
   (inline-block) houden hun percentage — zelfde regel als in de editor. */
@media (max-width: 720px) {
  .o477-aant-pres-body img[style*="width"]:not([style*="inline-block"]) {
    width: 100% !important; float: none !important; margin: 10px 0 !important;
  }
}

/* Downloadknop in de presentatie-kopbalk (22-8) */
.o477-aant-pres-dl {
  background: rgba(148,163,184,.15); border: 0; color: #e2e8f0; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.o477-aant-pres-dl:hover:not(:disabled) { background: rgba(1,164,164,.45); }
.o477-aant-pres-dl:disabled { opacity: .6; cursor: default; }

/* ============================================================ projecten mobiel
   ≤720px (23-8): de brede projecttabel wordt verticale kaarten — zelfde model
   als het werkbord (groep Werk) en de agenda. Ingeklapt toont een kaart alleen
   projectnummer + naam; ▾ klapt uit en zet elk veld (status, uren, bedragen,
   acties) op een eigen regel met de kolomnaam erboven. Het stempelen van
   data-label/data-kop doet o477-mobiel-kaarten.js via de opt-in .o477-mk-auto;
   deze regels zetten alleen de desktop-tabelmechaniek uit (vaste kolombreedtes,
   sticky Nummer/Naam, nowrap-ellipsis) die anders het scherm uit duwt.
   Bewust ONDERAAN het bestand: gelijke specificiteit met de desktopregels
   hierboven, dus de laatste regel wint. Desktop blijft onveranderd. */
@media (max-width: 720px) {
  table.o477-table.o477-proj-table.o477-mk { table-layout: auto; }
  table.o477-table.o477-proj-table.o477-mk th,
  table.o477-table.o477-proj-table.o477-mk td {
    position: static; left: auto; box-shadow: none;
    white-space: normal; overflow: visible; text-overflow: clip;
    background: transparent;
  }
  /* Sticky horizontale schuifbalk heeft geen functie meer zonder brede tabel. */
  #o477-proj-hscroll { display: none; }

  /* Groepskoppen (hoofdgroep + status) en de totaalregel blijven blokken zonder
     ▾-knop. De kop-tds hebben hun eigen inline padding → de rij zelf op 0. */
  table.o477-proj-table.o477-mk tbody tr.o477-proj-hoofd-row,
  table.o477-proj-table.o477-mk tbody tr.o477-proj-status-row { padding: 0; overflow: hidden; }
  table.o477-proj-table.o477-mk tbody tr.o477-proj-hoofd-row { margin-top: 18px; }
  /* Brutowinst + hoofdgroep-keuze passen niet naast de titel: onder de titel. */
  /* !important: de inline float:right/inline-flex uit projecten.js verslaan. */
  table.o477-proj-table.o477-mk .o477-proj-grp-inner { display: block !important; position: static !important; max-width: none !important; }
  table.o477-proj-table.o477-mk .o477-proj-grp-titel { min-width: 0 !important; }
  table.o477-proj-table.o477-mk .o477-proj-grp-rechts {
    float: none !important; display: flex !important; flex-wrap: wrap; gap: 8px 18px;
    justify-content: flex-start; margin: 6px 0 0 0 !important; padding-left: 0 !important; border-left: 0 !important;
  }
  /* Spacerrijen zijn desktop-ruimte tussen de groepen; op de kaarten doen de
     kaart-marges dat werk al. */
  table.o477-proj-table.o477-mk tbody tr.o477-proj-spacer { display: none; }

  /* Lege cellen in een blok-rij horen weg te vallen: de generieke td:empty-regel
     (0,2,2) verliest het van .o477-mk-blok > td (0,2,3), dus hier zwaarder herhaald. */
  table.o477-mk tbody tr.o477-mk-blok > td:empty { display: none; }

  /* Totaalregel: grijs blok met veldnaam boven elk bedrag, lege cellen vallen
     weg. Kop "Totaal" + aantal zonder veldnaam. */
  table.o477-proj-table.o477-mk tbody tr.o477-proj-totals {
    background: #eef2f7; border-color: #cbd5e1; padding: 10px 14px;
  }
  table.o477-proj-table.o477-mk tbody tr.o477-proj-totals > td { padding: 5px 0; }
  table.o477-proj-table.o477-mk tbody tr.o477-proj-totals > td:nth-child(1) { font-size: 15px; font-weight: 700; }
  table.o477-proj-table.o477-mk tbody tr.o477-proj-totals > td:nth-child(1)::before,
  table.o477-proj-table.o477-mk tbody tr.o477-proj-totals > td:nth-child(2)::before { display: none; }

  /* Ingeklapt: nummer klein grijs, naam eronder vet — de ↗ (project openen) en
     ✅ (conceptfactuur) blijven rechts staan, links van de ▾-knop. */
  table.o477-proj-table.o477-mk tbody tr:not(.is-open) > td[data-kop="2"] { padding-top: 0; }
  table.o477-proj-table.o477-mk .o477-proj-naam-inner { gap: 6px; }
  table.o477-proj-table.o477-mk .o477-proj-arrow,
  table.o477-proj-table.o477-mk .o477-proj-factuur { font-size: 17px; padding: 4px; }

  /* Status- en afdelingspil en de twee actieknoppen op tikbare maat. */
  table.o477-proj-table.o477-mk select.o477-status-select,
  table.o477-proj-table.o477-mk select.o477-afdeling-select {
    width: auto; max-width: 100%; min-height: 36px; font-size: 14px;
  }
  table.o477-proj-table.o477-mk .o477-quick-uren-btn,
  table.o477-proj-table.o477-mk td button[data-edit] {
    min-height: 40px; min-width: 48px; font-size: 17px;
  }
  table.o477-proj-table.o477-mk .o477-proj-sel { width: 20px; height: 20px; }
}

/* =====================================================================
   STARTPAGINA (/dashboard) — de bovenlaag boven de module-tegels.

   Blok 3 (de "📊 Overzicht"-KPI-strook) hergebruikt de bestaande
   .o477-kpi-*-klassen hierboven; hier staat alleen wat nieuw is:
   de signaalvlag op een KPI-kaart, de kolomkaarten met het werk van
   vandaag, en het ingeklapte blok "Alle modules". Geen nieuwe kleuren —
   dezelfde tinten als de groepsbanden (#E0F7F7 / #cbd5e1) en dezelfde
   pilmaten als het stramien.
   ===================================================================== */

/* --- Signaalvlag rechtsboven op een KPI-kaart ("€ 4.180 te laat"). */
.o477-st-vlag {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.o477-st-vlag.is-rood { background: #fee2e2; color: #991b1b; }
.o477-st-vlag.is-oranje { background: #ffedd5; color: #9a3412; }
.o477-st-vlag.is-groen { background: #dcfce7; color: #166534; }
.o477-st-vlag.is-grijs { background: #f1f5f9; color: #475569; }

/* --- Kolommen met het werk van vandaag. */
.o477-st-kolommen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin: 0 0 20px; align-items: start;
}
.o477-st-kaart {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.o477-st-kaart > header {
  background: #E0F7F7; padding: 11px 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid #cbd5e1;
}
.o477-st-kaart > header h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--primary-dark, #018585);
}
.o477-st-meta { font-size: 12px; color: #64748b; }
.o477-st-rechts { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary-dark, #018585); }

.o477-st-rij {
  display: flex; gap: 10px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--border-light, #f0f4f8);
  min-height: var(--o477-rij-h, 44px);
  text-decoration: none; color: inherit; transition: background .12s ease;
}
.o477-st-rij:last-of-type { border-bottom: 0; }
a.o477-st-rij:hover { background: #f8fafc; text-decoration: none; }
.o477-st-tijd {
  flex: 0 0 44px; width: 44px; font-size: 12px; font-weight: 700;
  color: var(--primary-dark, #018585);
}
.o477-st-tekst { flex: 1; min-width: 0; }
.o477-st-tekst b {
  display: block; font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o477-st-tekst span {
  display: block; font-size: 11.5px; color: var(--text-secondary, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o477-st-pil {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 10px; border-radius: var(--o477-pil-r, 6px);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.o477-st-pil.is-rood { background: #fee2e2; color: #991b1b; }
.o477-st-pil.is-oranje { background: #ffedd5; color: #9a3412; }
.o477-st-pil.is-groen { background: #dcfce7; color: #166534; }
.o477-st-pil.is-teal { background: #ccf3f3; color: #0f766e; }
.o477-st-pil.is-grijs { background: #f1f5f9; color: #475569; }
.o477-st-leeg { padding: 22px 14px; text-align: center; color: #94a3b8; font-size: 13px; }
.o477-st-kaart footer {
  padding: 9px 14px; background: #fbfaf8;
  border-top: 1px solid var(--border-light, #f0f4f8); font-size: 12.5px; font-weight: 600;
}

/* --- "🧩 Alle modules": de oude dashboard-tegels, ingeklapt onder het werk. */
.o477-st-modules {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 24px;
}
.o477-st-modules > summary {
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; list-style: none;
}
.o477-st-modules > summary::-webkit-details-marker { display: none; }
.o477-st-modules > summary::after {
  content: '▾'; margin-left: auto; font-size: 13px; color: var(--text-secondary, #64748b);
  transition: transform .2s ease;
}
.o477-st-modules[open] > summary::after { transform: rotate(180deg); }
.o477-st-modules > summary:hover .o477-st-mod-titel { color: var(--primary, #01A4A4); }
.o477-st-mod-titel {
  font-size: 15px; font-weight: 700; color: var(--primary-dark, #018585);
  transition: color .15s ease;
}
.o477-st-modules > .o477-dash-tools { padding: 0 16px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 12px; }
.o477-st-modules > .o477-dash-groups { padding: 0 16px 16px; }

/* Op telefoon en tablet staan het 🗓️ Vandaag-blok én de 📊 Overzicht-strip
   helemaal uit op het dashboard (verzoek 28-8). Breedte alleen is niet genoeg:
   een tablet in liggende stand is breder dan 1024px — vandaar óók
   pointer:coarse (aanraakscherm als hoofdbediening). */
@media (max-width: 1024px), (pointer: coarse) {
  .o477-st-werkdeel, #o477-st-kpi { display: none; }
}

@media (max-width: 768px) {
  .o477-st-kolommen { grid-template-columns: 1fr; gap: 10px; }
  .o477-st-rij { padding: 9px 12px; }
  .o477-st-modules > .o477-dash-tools,
  .o477-st-modules > .o477-dash-groups { padding-left: 10px; padding-right: 10px; }
}


/* ===== EEN AFRONDING VOOR ALLE BEDIEN-ELEMENTEN (27-8) ===== */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body select,
body textarea,
body button:not(.o477-fab):not(.wb-labelknop):not(.o477-mail-labelknop):not(.o477-asst-knop):not(.o477-pu-labelknop),
body .o477-btn,
body .pill:not(.wb-labelknop):not(.o477-mail-labelknop):not(.o477-ag-card-label) {
  border-radius: var(--radius-sm) !important;
}

/* Pictogram naast de type-pil van een bestand (27-8, nr. 004). De pil zelf is
   een select op volle celbreedte, dus het icoon en de pil staan naast elkaar in
   een flexregel — anders springt het icoon op een eigen regel erboven. */
.o477-bs-typewrap { display: flex; align-items: center; gap: 5px; }
.o477-bs-typewrap > .o477-pd-type-pill { flex: 1; min-width: 0; }
.o477-bs-typeico { display: inline-flex; align-items: center; margin-right: 5px; vertical-align: middle; }
.o477-bs-typeico svg { display: block; }
.o477-pd-type-pill .o477-bs-ico { vertical-align: -2px; margin-right: 3px; }

/* ============================================================================
   DATUMKIEZER MET WEEKNUMMERS (o477-datumkiezer.js)
   Kleine kalender-overlay voor lijsten waar je een datum ter plekke kiest; de
   browser-eigen kiezer toont geen weeknummers en bij het plannen van werk is
   juist de week het houvast.
   ========================================================================== */
.o477-dk {
  position: absolute; z-index: 1300; width: 280px; padding: 10px;
  background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  font-size: 13px; color: var(--text, #0f172a);
}
.o477-dk-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.o477-dk-titel { font-weight: 700; }
.o477-dk-nav {
  border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 2px 8px; border-radius: 6px; color: var(--text-secondary, #475569);
}
.o477-dk-nav:hover { background: #eef2f7; }
.o477-dk-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; }
.o477-dk-tabel th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #94a3b8); font-weight: 600; padding: 2px 0;
}
.o477-dk-tabel td { padding: 1px; text-align: center; }
.o477-dk-wk {
  font-size: 11px; color: var(--text-muted, #94a3b8); font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border, #e2e8f0); width: 28px;
}
.o477-dk-dag {
  width: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 6px;
  padding: 5px 0; font: inherit; font-variant-numeric: tabular-nums; color: inherit;
}
.o477-dk-dag:hover { background: #E0F7F7; }
.o477-dk-dag.is-buiten { color: var(--text-muted, #cbd5e1); }
.o477-dk-dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--primary, #01A4A4); }
.o477-dk-dag.is-gekozen { background: var(--primary, #01A4A4); color: #fff; font-weight: 700; }
.o477-dk-voet { display: flex; gap: 8px; margin-top: 8px; }
.o477-dk-knop {
  flex: 1; border: 1px solid var(--border, #e2e8f0); background: #fff; cursor: pointer;
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px;
}
.o477-dk-knop:hover { background: #f1f5f9; }
.o477-dk-wis { color: #c41d68; }

/* De afspraakcel zelf: leest als tekst, gedraagt zich als knop. */
.o477-datumknop {
  border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit;
  padding: 2px 4px; border-radius: 6px; text-align: left;
}
.o477-datumknop:hover { background: #E0F7F7; }
.o477-datumknop .o477-wk { color: var(--text-muted, #94a3b8); font-size: 11.5px; }

/* ============================================================================
   TEKSTPOPUP (o477-tekstpopup.js)
   Volledige omschrijving bij een lijstregel, zonder de lijst te verlaten.
   ========================================================================== */
.o477-tp-laag {
  position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(15, 23, 42, .45);
}
.o477-tp {
  position: relative; width: min(620px, 100%); max-height: 80vh; overflow: auto;
  background: var(--card, #fff); border-radius: 12px; padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); color: var(--text, #0f172a);
}
.o477-tp-sluit {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted, #94a3b8);
  padding: 2px 6px; border-radius: 6px;
}
.o477-tp-sluit:hover { background: #f1f5f9; color: var(--text, #0f172a); }
.o477-tp-titel { margin: 0 24px 2px 0; font-size: 17px; line-height: 1.3; }
.o477-tp-sub { margin: 0 0 12px; color: var(--text-secondary, #475569); font-size: 13px; }
.o477-tp-tekst { white-space: pre-wrap; line-height: 1.6; font-size: 14px; }

/* Omschrijving in een lijst: leest als tekst, opent de volledige tekst. */
.o477-tekstknop {
  border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit;
  padding: 2px 4px; border-radius: 6px; text-align: left; width: 100%;
}
.o477-tekstknop:hover { background: #E0F7F7; }
.o477-tekstknop .o477-meer { color: var(--primary, #01A4A4); font-size: 11.5px; }

/* Omschrijving in een lijst op één regel: afkappen met … , volledige tekst
   staat in de tooltip en in de popup. */
.o477-tekstknop.is-regel {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Prijslijst: herkomst-kolommen (15-9) — link-cel = invoerveld met ↗-opener ernaast. */
.o477-prl-broncel { display: flex; align-items: center; gap: 4px; }
.o477-prl-broncel .o477-prl-bron { flex: 1 1 auto; min-width: 0; }
.o477-prl-bronlink {
  flex: 0 0 auto; text-decoration: none; font-size: 13px; line-height: 1;
  padding: 3px 5px; border: 1px solid #e2e8f0; border-radius: 5px; color: #01A4A4; background: #ffffff;
}
.o477-prl-bronlink:hover { background: #f1f5f9; border-color: #cbd5e1; }

/* Prijslijst: marge-cel (15-9) — bedrag met het percentage er klein achter; rood bij verlies. */
.o477-prl-marge { white-space: nowrap; }
.o477-prl-marge-eur { font-weight: 600; color: #15803d; }
.o477-prl-marge-pct { margin-left: 6px; font-size: 11px; color: #64748b; }
.o477-prl-marge-eur.is-neg, .o477-prl-marge-pct.is-neg { color: #dc2626; }
.o477-prl-marge-leeg { color: #cbd5e1; }

/* Prijslijst: "Groeperen" staat op dezelfde regel, direct achter het zoekveld
   (verzoek Jannie 15-9). Het gedeelde zoekveld is flex 1 1 100% en duwde de
   keuzelijst anders naar de volgende regel; hier krimpt hij mee. Op een smal
   scherm stapelen ze alsnog. */
#o477-prl-filtercard .o477-ag-zoek { flex: 1 1 320px; width: auto; min-width: 180px; grid-column: auto; }
@media (max-width: 720px) {
  #o477-prl-filtercard .o477-ag-zoek { flex: 1 1 100%; }
}
/* Prijslijst: "Groeperen"-keuzelijst in de filterkaart (15-9). */
.o477-prl-grp-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
.o477-prl-grp-filter select { font-size: 13px; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #334155; cursor: pointer; }

/* ============ HULP IN HUIS (18-9) — uren/aankopen/betalingen huishoudelijke hulp ============
   .o477-str-table geeft pillen alleen maatvoering; de kleuren per soort staan hier. */
.pill.o477-hulp-pil.o477-hulp-uren     { background: #01A4A4; color: #fff; }
.pill.o477-hulp-pil.o477-hulp-aankoop  { background: #f59e0b; color: #fff; }
.pill.o477-hulp-pil.o477-hulp-betaling { background: #16a34a; color: #fff; }
.o477-hulp-table th.o477-hulp-num, .o477-hulp-table td.o477-hulp-num { text-align: right; white-space: nowrap; }
.o477-hulp-table th.o477-hulp-num .o477-th-greep { right: auto; left: 0; }
.o477-hulp-table .o477-wnk-sub { display: block; font-size: 11.5px; color: var(--text-muted, #64748b); }
.o477-hulp-table .o477-hulp-open, .o477-hulp-table b.o477-hulp-open { color: #b45309; font-weight: 600; }
.o477-hulp-table th.o477-doc-acties-th, .o477-hulp-table td.o477-doc-acties { border-left: 1px solid var(--border); padding-left: 12px; }
/* Groepsregel: totalen recht onder hun kolom (18-9). */
.o477-hulp-table tr.o477-str-groeprij > td.o477-hulp-num { font-size: 14px; font-weight: 700; color: var(--primary-dark, #017a7a); }
.o477-hulp-table tr.o477-str-groeprij > td.o477-hulp-num.o477-hulp-open { color: #b45309; }
.o477-hulp-table tr.o477-str-groeprij .o477-hulp-stil { color: #94a3b8; font-weight: 400; }
/* Soortkeuze in de modal: drie knoppen naast elkaar. */
.o477-hulp-soorten { display: flex; gap: 8px; margin: 2px 0 12px; }
.o477-hulp-soortkeuze { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; background: #fff; }
.o477-hulp-soortkeuze.is-actief { border-color: #01A4A4; background: #e6f6f6; color: #0f766e; }
.o477-hulp-soortkeuze input { width: auto; min-width: 0; margin: 0; }

/* ============ HUISDIEREN (18-9) — Tikkies uitlaatservice + dierkosten ============
   Hergebruikt de tabel-/modalopmaak van Hulp in huis; alleen de pillen zijn eigen. */
.pill.o477-hd-pil.o477-hd-tikkie    { background: var(--primary, #01A4A4); color: #fff; }
.pill.o477-hd-pil.o477-hd-kosten    { background: #f59e0b; color: #fff; }
.pill.o477-hd-pil.o477-hd-open      { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; cursor: pointer; }
.pill.o477-hd-pil.o477-hd-betaald   { background: #16a34a; color: #fff; cursor: pointer; }
.pill.o477-hd-pil.o477-hd-vervallen { background: #e2e8f0; color: #64748b; cursor: pointer; text-decoration: line-through; }
.o477-hd-table tr.o477-hd-rij-vervallen td { color: #94a3b8; }
.o477-hd-table td.o477-hd-stil { color: #94a3b8; }
.o477-hd-table tr.o477-str-groeprij > td.o477-hd-groepstatus { font-size: 13px; font-weight: 700; color: var(--primary-dark, #017a7a); white-space: nowrap; }
.o477-hd-table tr.o477-str-groeprij > td.o477-hd-groepstatus.o477-hulp-open { color: #b45309; }