/* One toolbar component for Facturen, Uitgaven and Uren. */
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar {
  /* Summa-onderdelen (25 sep 2026): twee witte pillen en rechts een ronde zoekknop, zoals de avatar op Vandaag. */
  position:relative; display:grid; grid-template-columns:minmax(0,max-content) minmax(0,max-content) minmax(0,1fr) 44px;
  gap:8px; align-items:start; margin:0 0 14px; padding:0;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-controls,
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search-wrap {
  display:contents;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-menu {
  position:static; min-width:0; margin:0; grid-row:1;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar [data-toolbar-filters] { grid-column:1; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar [data-toolbar-sort] { grid-column:2; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar :is(summary,.invoice-search-toggle) {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  min-width:0; height:44px; min-height:44px; padding:0 16px; margin:0;
  border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink);
  box-shadow:none; font:500 14px/1.3 Figtree,sans-serif; list-style:none; cursor:pointer; white-space:nowrap;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar summary::-webkit-details-marker { display:none; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .summa-icon {
  flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar summary > .summa-icon:last-child { flex-basis:14px; width:14px; height:14px; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search-toggle { grid-column:4; grid-row:1; width:44px; padding:0; border-radius:50%; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar :is(summary,.invoice-search-toggle):hover { background:var(--hover); }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar :is(details[open] > summary,.is-open .invoice-search-toggle) { background:var(--hover); border-color:var(--muted); }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar :is(summary,button,input,select):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-panel {
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:auto;
  display:grid; gap:12px; width:min(100%,360px); padding:12px;
  max-height:min(60dvh,440px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 8px 24px #00000016;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-field { display:grid; gap:6px; min-width:0; margin:0; font:400 12px/1.4 Figtree,sans-serif; color:var(--muted); }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-field[hidden] { display:none; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-native { display:none; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choices { display:grid; gap:2px; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-field > span { padding:0 10px; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-width:0; min-height:44px; height:auto; padding:10px;
  border:0; border-radius:8px; background:transparent; color:var(--ink);
  text-align:left; white-space:normal; overflow-wrap:anywhere;
  font:400 14px/1.4 Figtree,sans-serif; box-shadow:none; cursor:pointer;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice::after {
  content:''; flex:0 0 6px; height:11px; margin:0 5px 4px 0;
  border:solid transparent; border-width:0 2px 2px 0; transform:rotate(45deg);
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice[aria-pressed="true"] { background:var(--surface-soft); font-weight:600; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice[aria-pressed="true"]::after { border-color:currentColor; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice:hover { background:var(--surface-soft); }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-choice:disabled { opacity:.5; cursor:default; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar select {
  width:100%; min-width:0; max-width:100%; height:44px; min-height:44px; margin:0; padding:8px 12px;
  border:1px solid var(--line); border-radius:12px; background-color:var(--paper); color:var(--ink); font:400 16px/1.3 Figtree,sans-serif;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search {
  display:none; grid-column:1 / -1; grid-row:2; width:100%; min-width:0; height:44px; min-height:44px;
  padding:0 12px; margin:0; gap:8px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .is-open .invoice-search { display:flex; align-items:center; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search input {
  width:100%; min-width:0; height:42px; min-height:0; margin:0; padding:0; border:0;
  border-radius:0; background:transparent; color:var(--ink); font:400 16px/1.3 Figtree,sans-serif; box-shadow:none;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search:focus-within {
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; border-color:var(--line);
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .invoice-search input:focus-visible { outline:none; }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-count {
  padding:1px 5px; min-width:18px; border-radius:5px; background:var(--surface-soft); font-size:11px;
}
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .list-toolbar-dot { flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:var(--ink); }
#mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar .has-query { border-color:var(--muted); background:var(--surface-soft); }
@media (max-width:359px) {
  #mainContent :is(#invoicesView,#expensesView,#workView) .list-toolbar summary { gap:4px; padding-inline:10px; font-size:13px; }
}

/* Overzicht in één oogopslag (26 september 2026): op mobiel staat de werkbalk als drie ronde
   icoonknoppen (44px) naast de paginatitel. Een actief filter toont het aantal, een andere sortering
   een stip. Zoeken opent een volle regel onder de titel; de menu's openen rechts onder de knoppen. */
@media (max-width:720px) {
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head.has-list-toolbar {
    position:relative; display:grid; grid-template-columns:minmax(0,1fr); align-items:start;
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head.has-list-toolbar > :not(.list-toolbar):not(p) {
    grid-area:1 / 1; justify-self:start; max-width:calc(100% - 156px); min-height:44px; display:flex; align-items:center;
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head.has-list-toolbar > :not(.list-toolbar)[hidden],
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head.has-list-toolbar > p { display:none; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head.has-list-toolbar h1 { margin:0; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar {
    grid-area:1 / 1; grid-template-columns:minmax(0,1fr) 44px 44px 44px; margin:0; pointer-events:none;
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar :is(.list-toolbar-menu,.invoice-search-toggle,.invoice-search) { pointer-events:auto; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar [data-toolbar-filters] { grid-column:2; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar [data-toolbar-sort] { grid-column:3; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .invoice-search-toggle { grid-column:4; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .invoice-search { grid-column:1 / -1; grid-row:2; margin-top:4px; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar summary {
    position:relative; width:44px; padding:0; border-radius:50%;
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar summary > span:not(.list-toolbar-count):not(.list-toolbar-dot),
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar summary > .summa-icon:last-child { display:none; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar summary > .summa-icon:first-child { flex-basis:18px; width:18px; height:18px; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-count {
    position:absolute; top:-3px; right:-3px; min-width:18px; padding:1px 5px; border-radius:999px;
    background:var(--ink); color:var(--paper); font:600 11px/16px Figtree,sans-serif; text-align:center;
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-count[hidden],
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-dot[hidden] { display:none; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-dot {
    position:absolute; top:6px; right:6px; width:8px; height:8px; border:2px solid var(--paper); box-sizing:content-box;
  }
  /* Het menu hangt aan zijn eigen knop en lijnt uit met de rechterrand van de werkbalk:
     Filters staat twee knoppen (2 × 44px + 2 × 8px) van die rand, Sorteren één (44px + 8px). */
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-menu { position:relative; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar .list-toolbar-panel {
    left:auto; right:0; width:min(calc(100vw - 32px),360px);
  }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar [data-toolbar-filters] .list-toolbar-panel { right:-104px; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head > .list-toolbar [data-toolbar-sort] .list-toolbar-panel { right:-52px; }
}