/* Task-first layout. Scope stays within the four revised tabs.
   One visible filter per choice; original floating add controls are preserved. */
#mainContent :is(#invoicesView,#expensesView,#workView,#moneyView) > .page-head {
  position:relative; overflow:visible; height:auto; min-height:44px; margin:0 0 18px;
}
/* 25 sep 2026: ook Inzichten zonder regel onder de titel, zoals de andere tabbladen. */
#mainContent :is(#invoicesView,#expensesView,#workView,#moneyView) > .page-head p { display:none; }
/* Compatibility hook for the renderer; the period is selected inside Filters. */
#mainContent #invoicesView > .page-head #invoicePeriodLabel { display:none; }
#invoicesView .invoice-summary #invoiceKpiOverdue.is-zero { color:var(--ink); }
#invoicesView .invoice-summary {
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; background:var(--paper); margin-bottom:14px;
}
#invoicesView .invoice-summary .invoice-kpi-secondary { display:contents; }
#invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) {
  align-self:stretch; justify-content:flex-start; min-height:100px;
  padding:14px 16px; gap:5px; border:0; border-radius:0; background:transparent;
}
#invoicesView .invoice-summary .invoice-kpi-card { border-left:1px solid var(--line); }
#invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > span {
  min-height:34px; font-size:12px; text-transform:none; letter-spacing:0;
}
#invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > strong {
  font-size:clamp(20px,2.4vw,30px); margin:0; line-height:1.25;
}
#invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > small { font-size:11px; }
#invoicesView .invoice-summary button.is-active {
  background:var(--invoice-tint); box-shadow:inset 0 -3px var(--invoice-accent);
}
#invoicesView .invoice-summary button:focus-visible { outline-offset:-4px; }
#invoicesView .invoice-extra-filters { margin-left:0; flex:0 1 auto; }
#invoicesView .invoice-extra-filters > summary { border-radius:12px; padding:8px 12px; }
#invoicesView .invoice-extra-filter-panel { left:0; right:auto; }
#invoicesView .invoice-toolbar-controls { align-items:start; }

:is(#expensesView,#workView) .task-extra-controls { position:relative; min-width:0; }
:is(#expensesView,#workView) .task-extra-controls > summary {
  display:flex; align-items:center; justify-content:center; min-height:44px; gap:3px;
  padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); color:var(--ink); font:500 13px/1.3 Figtree,sans-serif; list-style:none; cursor:pointer;
}
:is(#expensesView,#workView) .task-extra-controls > summary::-webkit-details-marker { display:none; }
:is(#expensesView,#workView) .task-controls-panel {
  position:absolute; right:0; top:calc(100% + 6px); z-index:35; display:grid; gap:10px;
  width:min(260px,calc(100vw - 28px)); padding:12px; border:1px solid var(--line);
  border-radius:14px; background:var(--paper); box-shadow:0 8px 24px #00000016;
}
:is(#expensesView,#workView) .task-controls-panel select { width:100%; }
:is(#invoicesView,#expensesView,#workView) :is(.invoice-toolbar,.work-toolbar) select {
  border-radius:12px;
}

#expensesView .expense-summary { display:block; margin:0 0 12px; }
#expensesView .expense-toolbar-controls #expenseTypeFilter { min-width:0; }
#expensesView .expense-context-total {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
  padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--expense-tint);
}
#expensesView .expense-context-total > span { align-self:center; color:var(--muted); font-size:13px; }
#expensesView .expense-context-total > strong { color:var(--ink); font:400 30px/1.25 var(--font-display); letter-spacing:-.03em; overflow-wrap:anywhere; min-width:0; }
#expensesView .expense-context-total > small { grid-column:1 / -1; color:var(--muted); font-size:11px; }
#expensesView .expense-context-total > #expensesAttentionHint { color:var(--amber); font-size:12px; }

#workView .work-summary { border-color:var(--line); border-radius:16px; }
#workView .work-summary .work-kpi-secondary,
#workView .work-summary .work-kpi-card + .work-kpi-card { border-color:var(--line); }
#workView .work-summary .work-hero-card { padding:12px 16px; gap:3px; }
#workView .work-summary .work-hero-card > strong { font-size:30px; }
#workView .work-summary .work-hero-card > small { font-size:11px; }
#workView .work-summary .work-kpi-card { padding:10px 12px; gap:3px; }
#workView .work-summary .work-kpi-card > strong { font:600 17px/1.3 Figtree,sans-serif; }
#workView .work-summary .work-kpi-card > small { display:none; }
#workView .work-list-head { display:none; }

/* Text tabs are navigation; figures belong to their own panel, not the tab. */
#moneyView .insights-tabs {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
  padding:4px; margin:0 0 16px; border-radius:12px; background:var(--surface-soft);
}
#moneyView .insights-tabs [role="tab"] {
  min-width:0; min-height:44px; padding:8px 10px; border:0; border-radius:9px;
  background:transparent; color:var(--muted); font:500 14px/1.3 Figtree,sans-serif;
  white-space:normal; overflow-wrap:anywhere; box-shadow:none;
}
#moneyView .insights-tabs [aria-selected="true"] { background:var(--paper); color:var(--insight-accent); box-shadow:0 1px 4px #0000000c; }
#moneyView .insights-tabs [role="tab"]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
#moneyView .insights-context-warning { margin:0 0 16px; color:var(--amber); font-size:12px; line-height:1.5; }
#moneyView .insights-context-warning.is-overdue { color:var(--danger); }
#moneyView .insights-year-context {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:14px 16px; margin:0 0 18px;
  border:1px solid var(--line); border-radius:16px; background:var(--insight-tint);
}
#moneyView .insights-year-context > span { align-self:center; font-size:12px; color:var(--muted); }
#moneyView .insights-year-context > strong,
#moneyView .insights-panel-amount { display:block; min-width:0; font:400 30px/1.25 var(--font-display); letter-spacing:-.03em; color:var(--ink); overflow-wrap:anywhere; }
#moneyView .insights-year-context > small { grid-column:1 / -1; font-size:11px; color:var(--muted); }
#moneyView .insights-panel-amount { margin:8px 0; }
#moneyView #moneyPanelProfit .money-buddy-head { margin-bottom:12px; }
#moneyView #moneyPanelProfit .money-month-summary { margin-bottom:12px; }
#moneyView #moneyPanelProfit .money-month-summary > div { padding:10px 0; }
#moneyView #moneyPanelProfit .money-month-summary strong { font-size:22px; }
#moneyView #moneyPanelProfit .money-profit-chart-head h3 { font-size:24px; }

/* Compact page content; add controls keep their original mobile styles. */
@media (max-width:720px) {
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head { min-height:44px; }
  #mainContent :is(#invoicesView,#expensesView,#workView) > .page-head h1 { font-size:32px; line-height:44px; margin:0; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) { padding:10px 9px; gap:3px; min-height:100px; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > span { font-size:11px; min-height:31px; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > strong { font-size:clamp(14px,3.75vw,24px); }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > small { font-size:10px; }
  #invoicesView .invoice-toolbar-controls select { flex:1 1 95px; font-size:16px; }
  #invoicesView .invoice-extra-filters > summary { font-size:13px; }
  #invoicesView .invoice-extra-filters.is-active { flex-basis:100%; }
  #invoicesView .invoice-extra-filters > summary { max-width:100%; }
  #expensesView .expense-context-total { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
  #expensesView .expense-context-total > strong { font-size:27px; text-align:right; }
  #expensesView .expense-toolbar-controls, #workView .work-toolbar-controls {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px;
  }
  #expensesView .expense-toolbar-controls #expenseTypeFilter,
  #workView .work-toolbar-controls #workFilter { grid-column:1; width:100%; font-size:16px; }
  #expensesView .expense-toolbar-controls .task-controls-panel select,
  #workView .work-toolbar-controls .task-controls-panel select { grid-column:auto; width:100%; font-size:16px; }
  #moneyView .insights-tabs [role="tab"] { font-size:13px; padding:8px 4px; }
  #moneyView .insights-year-context { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px; }
  #moneyView .insights-year-context > strong { font-size:25px; text-align:right; }
  #moneyView .money-detail-head h2 { font-size:24px; }
}
@media (max-width:359px) {
  #invoicesView .invoice-summary { display:block; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:2px 10px;
    min-height:62px; padding:10px 12px; border-left:0;
  }
  #invoicesView .invoice-summary .invoice-kpi-card { border-top:1px solid var(--line); }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > span { min-height:0; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > strong { grid-column:2; grid-row:1 / 3; align-self:center; text-align:right; font-size:18px; }
  #invoicesView .invoice-summary :is(.invoice-hero-card,.invoice-kpi-card) > small { grid-column:1; }
}