/* Uren only: one calm summary, existing registration and source semantics. */
#workView { --work-accent: #224f3c; --work-tint: #edf3ee; --work-line: #d5e2d8; }
:root[data-theme="dark"] #workView { --work-accent:#b5d5c2; --work-tint:#263b31; --work-line:#455e50; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #workView { --work-accent:#b5d5c2; --work-tint:#263b31; --work-line:#455e50; }
}
#mainContent #workView > .page-head { margin-bottom:16px; }
#workView .work-summary { border:1px solid var(--work-line); border-radius:18px; background:var(--work-tint); margin:0 0 16px; overflow:hidden; }
#workView .work-summary .work-hero-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; min-width:0;
  min-height:0; height:auto; padding:20px 24px; border:0; border-radius:0;
  background:transparent; color:var(--ink); box-shadow:none; cursor:default;
}
#workView .work-summary .work-hero-card > span { padding:0; margin:0; color:var(--muted); font:500 13px/1.4 Figtree,sans-serif; }
#workView .work-summary .work-hero-card > strong { padding:0; margin:2px 0; max-width:100%; color:var(--ink); font:400 clamp(34px,4vw,52px)/1.15 var(--font-display); letter-spacing:-.035em; white-space:normal; overflow-wrap:anywhere; }
#workView .work-summary .work-hero-card > small { padding:0; margin:0; max-width:100%; color:var(--muted); font:400 12px/1.45 Figtree,sans-serif; white-space:normal; }
#workView .work-summary .work-kpi-secondary {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0;
  overflow:visible; border-top:1px solid var(--work-line); background:color-mix(in srgb,var(--paper) 60%,var(--work-tint));
}
#workView .work-summary .work-kpi-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0;
  width:auto; min-height:0; height:auto; margin:0; padding:14px 24px; border:0;
  border-radius:0; background:transparent; color:var(--ink); box-shadow:none; cursor:default;
}
#workView .work-summary .work-kpi-card + .work-kpi-card { border-left:1px solid var(--work-line); }
#workView .work-summary .work-kpi-card:last-child { grid-column:auto; }
#workView .work-summary .work-kpi-card > span { padding:0; margin:0; max-width:100%; color:var(--muted); font:500 12px/1.4 Figtree,sans-serif; }
#workView .work-summary .work-kpi-card > strong { padding:0; margin:0; max-width:100%; color:var(--ink); font:400 25px/1.15 var(--font-display); white-space:normal; overflow-wrap:anywhere; }
#workView .work-summary .work-kpi-card > small { padding:0; margin:0; max-width:100%; color:var(--muted); font:400 11px/1.4 Figtree,sans-serif; white-space:normal; }
#workView .work-summary :is(.invoice-hero-icon,.invoice-kpi-icon) { display:none; }
#workView .work-list-panel { margin:0 0 16px; padding:0; }
#workView .work-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:8px; margin:0 0 14px; padding:0; }
#workView .work-toolbar-controls { display:flex; flex-wrap:wrap; grid-column:1; grid-row:1; gap:8px; min-width:0; justify-content:flex-start; }
#workView .work-toolbar-controls select,
#workView .work-toolbar-controls #workFilter { width:auto; min-width:0; max-width:100%; min-height:44px; margin:0; background-color:var(--paper); font-size:14px; }
#workView #workSearchWrap { grid-column:2; grid-row:1; }
#workView #workSearchWrap .invoice-search { display:none; width:100%; }
#workView #workSearchToggle { display:grid; place-items:center; width:44px; height:44px; padding:0; background:var(--paper); color:var(--muted); border:1px solid var(--line); border-radius:12px; }
#workView #workSearchWrap.is-open { display:grid; grid-column:1 / -1; grid-row:2; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
#workView #workSearchWrap.is-open .invoice-search { display:flex; }
#workView .work-list-panel > #serviceList { gap:10px; }
#workView .work-list-panel .work-list-row { grid-template-columns:minmax(0,1fr) 44px; min-height:80px; padding:0; border-radius:16px; }
#workView .work-list-panel .work-row-main {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.38fr); grid-template-areas:"partij bedrag" "partij status";
  min-height:78px; padding:12px 2px 12px 16px; gap:4px 12px; margin:0;
}
#workView .work-row-party { grid-area:partij; min-width:0; gap:10px; }
#workView .work-row-party .grow { min-width:0; overflow:visible; }
#workView .work-row-party :is(strong,small) { display:block; white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.45; }
#workView .work-row-party strong { font-size:14px; font-weight:600; }
#workView .work-row-party small { font-size:12px; margin-top:4px; }
#workView .work-row-icon { color:var(--muted); background:var(--surface-soft); border-radius:50%; }
#workView .work-row-main > .amount { grid-area:bedrag; align-self:end; max-width:100%; margin:0; font-size:16px; font-weight:600; white-space:normal; overflow-wrap:anywhere; }
#workView .work-source-badge { grid-area:status; align-self:start; justify-self:end; min-width:0; width:auto; max-width:100%; padding:3px 8px; min-height:22px; background:var(--surface-soft); color:var(--muted); font-size:11px; font-weight:500; line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-align:right; }
#workView .work-list-panel .work-row-menu > .invoice-more { width:44px; min-height:44px; }
#workView :is(button,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:720px) {
  #workView .work-summary .work-hero-card { padding:16px; }
  #workView .work-summary .work-kpi-card { padding:12px; }
  #workView .work-summary .work-kpi-card > strong { font-size:23px; }
  #workView .work-summary .work-kpi-card > span { font-size:11px; }
  #workView .work-summary .work-kpi-card > small { font-size:10px; }
  #workView .work-toolbar-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #workView .work-toolbar-controls select,
  #workView .work-toolbar-controls #workFilter { width:100%; font-size:16px; }
  #workView .work-toolbar-controls #workFilter { grid-column:1 / -1; }
  #workView .work-toolbar-controls #workSort { grid-column:1 / -1; }
  #workView .work-toolbar-controls:has(#workYear:not([hidden])) #workSort { grid-column:auto; }
  #workView .work-toolbar-controls #workYear:not([hidden]) { width:100%; }
  #workView .work-list-panel .work-row-main { padding-left:12px; gap:4px 8px; grid-template-columns:minmax(0,1fr) minmax(0,.4fr); }
  #workView .work-row-main > .amount { font-size:15px; }
}
@media (max-width:359px) { #workView .work-row-icon { display:none; } }

/* Knoppen rechtsboven (27 sep 2026, gebruikersverzoek): Uren heeft dezelfde koprij als Facturen en Uitgaven.
   Op de computer verschijnt een invoerblok pas na een klik op zo'n knop (niet meer als kaart met een plusje);
   op mobiel blijft de plusknop met het invoervel en is de koprij verborgen, net als op de andere tabbladen. */
@media (min-width: 721px) {
  #workView .work-entry-panel:not([open]) { display: none; }
}
@media (max-width: 720px) {
  #workView .page-head .page-actions { display: none; }
}