/* ═══════════════════════════════════════════════════════════════════════════
   Stee Design System — Professional UI
   Geïnspireerd door: Linear, Mint, YNAB, Vercel Dashboard

   Ontwerpprincipes:
   - 8px grid (spacing in veelvouden van 8)
   - Subtiele schaduwen (layered elevation)
   - Ronde hoeken: 12px cards, 8px buttons, 6px inputs
   - Duidelijke hiërarchie via grootte/gewicht/kleur
   - Hover/active states met smooth transitions
   - Clean header met icon-navigatie (Linear-style)
   - Financial cards met clear amount hierarchy (Mint-style)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   🌐 GLOBAL RESET & BASIS
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.stee-themed *,
.stee-themed *::before,
.stee-themed *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔘 LOGOUT & MORE BUTTONS — Uniform header actions (todo-jqnkf)
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .btn-logout {
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.8em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.stee-themed .btn-logout:hover {
  background: var(--btn-danger-bg);
  color: var(--text-on-primary);
  border-color: var(--btn-danger-bg);
}

.stee-themed .btn-more {
  padding: var(--sp-1) var(--sp-2);
  font-size: 1em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: all 0.15s ease;
}

.stee-themed .btn-more:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.stee-themed .header-more-menu {
  font-family: var(--font-body);
}

.stee-themed .header-more-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85em;
  text-align: left;
  font-family: var(--font-body, system-ui);
  transition: background 0.1s ease;
}

.stee-themed .header-more-item:hover {
  background: var(--bg-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📐 SPACING SYSTEM (8px grid)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Gebruik in JS-gegenereerde HTML:
   style="padding:var(--sp-3)" etc.
*/
.stee-themed {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🏠 HEADER / NAVIGATIE — Linear-style clean topbar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sticky header wrapper */
.stee-themed #stickyHeader,
.stee-themed .sticky-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

/* Main app header — op iedere pagina volledige viewportbreedte en helemaal bovenaan. */
body.stee-themed {
  margin: 0 !important;
}

.stee-themed .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) max(var(--sp-4), calc((100vw - 1280px) / 2 + var(--sp-4)));
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

/* Logo — Poppins bold met primaire kleur */
.stee-themed .app-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15em;
  color: var(--logo-color);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  user-select: none;
}

.stee-themed .app-logo-symbol {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
}

.stee-themed .login-logo-symbol {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  object-fit: contain;
}

/* Header sections */
.stee-themed .app-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.stee-themed .app-header-center {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.stee-themed .app-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Navigatie tabs — pill-style (Linear) ── */
.stee-themed .app-nav-link {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.stee-themed .app-nav-link:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.stee-themed .app-nav-link.active {
  color: var(--primary);
  background: var(--bg-selected);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔘 KNOPPEN — Consistent, hierarchisch
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset default button */
.stee-themed button {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  line-height: 1.4;
}

/* ── Header toolbar buttons (compact) ── */
.stee-themed .app-header-right button,
.stee-themed .page-toolbar button {
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.8em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.stee-themed .app-header-right button:hover,
.stee-themed .page-toolbar button:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* ── Primaire knop ── */
.stee-themed .btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg) !important;
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
}

.stee-themed .btn-primary:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── Secundaire knop ── */
.stee-themed .btn-secondary {
  background: var(--bg-surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
  padding: var(--sp-2) var(--sp-4);
}

.stee-themed .btn-secondary:hover {
  border-color: var(--primary) !important;
  background: var(--bg-hover) !important;
}

/* ── Terug-knop ── */
.stee-themed .btn-back {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: var(--sp-2) var(--sp-4);
}

.stee-themed .btn-back:hover {
  background: var(--bg-hover) !important;
}

/* ── Gevaar-knop ── */
.stee-themed .btn-danger,
.stee-themed #clearData {
  background: var(--btn-danger-bg) !important;
  color: var(--text-on-primary) !important;
  border-color: var(--btn-danger-bg) !important;
}

.stee-themed .btn-danger:hover,
.stee-themed #clearData:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📄 PAGINA LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
}

.stee-themed .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ── Page toolbar ── */
/* 2026-08-13 (todo-8560y + todo-kfvt7 vervolg): toolbar als verticale zijbalk
   links van de content, zelfde uitstraling als instellingen-sidebar.
   De toolbar wordt fixed links gepositioneerd; de hoofdinhoud krijgt
   een linkermargin om ruimte te maken. */
.stee-themed .page-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  position: fixed;
  left: 0;
  top: 55px;
  bottom: 0;
  min-height: calc(100vh - 55px);
  overflow-y: auto;
  z-index: 80;
  font-size: 11px;
  box-shadow: 2px 0 10px rgba(0,0,0,.05);
}

.stee-themed .page-toolbar :is(button,label,input,select,span,div){font-size:11px !important;}

.stee-themed .page-toolbar-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.stee-themed .page-toolbar-title strong {
  font-family: var(--font-heading);
  font-size: 1em;
  color: var(--text);
}

.stee-themed .page-toolbar-title span {
  font-size: .78em;
  color: var(--text-muted);
}

/* De navigatieheader breekt uit de gecentreerde container en beslaat de hele
   viewport. Alleen de kasboekinhoud schuift op voor het filterpaneel. */
.stee-themed #stickyHeader {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.stee-themed #predictionsInlineContainer,
.stee-themed #tableContainer {
  margin-left: 252px;
}

.stee-themed .page-toolbar-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}

.stee-themed .page-toolbar-group > div,
.stee-themed .page-toolbar-group > input,
.stee-themed .page-toolbar-group > button,
.stee-themed .page-toolbar-group > select {
  width: 100% !important;
  min-width: 0;
}

.stee-themed .page-toolbar-group.prediction-horizon-group {
  display: grid;
  grid-template-columns: 1fr 42px 28px;
  align-items: center;
}

.stee-themed .page-toolbar-group.prediction-horizon-group > * {
  width: auto !important;
}

.stee-themed .page-toolbar-label {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Toolbar knoppen compacter in zijbalk */
.stee-themed .page-toolbar button,
.stee-themed .page-toolbar select {
  font-size: 0.85em;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.stee-themed .page-toolbar input[type="text"] {
  width: 100%;
  font-size: 0.85em;
  padding: 4px 8px;
}

.stee-themed .page-toolbar input[type="text"]#predictionMonthsInput {
  width: 3ch;
  text-align: center;
}

/* ── Topbar ── */
.stee-themed .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}

.stee-themed .topbar-left,
.stee-themed .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   💳 TRANSACTIE KAARTEN — Mint-style clean rows
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .transaction-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.12s ease;
  min-height: 40px;
}

.stee-themed .transaction-card:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Card header layout */
.stee-themed .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
}

.stee-themed .card-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}

.stee-themed .card-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}

/* Bedrag — Poppins SemiBold, thema-bewust */
.stee-themed .card-date { white-space:nowrap !important; min-width:64px; display:inline-block; }

.stee-themed .card-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.stee-themed .card-amount.negative {
  color: var(--amount-negative);
}

.stee-themed .card-amount.positive {
  color: var(--amount-positive);
}

.stee-themed .fin-amt-neg { color: var(--amount-negative); }
.stee-themed .fin-amt-pos { color: var(--amount-positive); }

/* ── Categorie tag — pill badge (uniform op alle cards) ── */
.stee-themed .card-category-detail,
.stee-themed .card-category-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: 0.82em !important;
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
  line-height: 1.6;
  font-family: var(--font-heading, system-ui);
  /* 2026-08-12 (todo-dqsim): data-cat-bg/fg uit ui-cards.js bepalen kleur,
     fallback naar thema-variabelen als data-attributen ontbreken */
  background: attr(data-cat-bg color, var(--tag-bg));
  color: attr(data-cat-fg color, var(--tag-text));
}

/* Fallback: browsers zonder attr() support (Chrome <125, Firefox <125) —
   JS-patch hieronder zet de inline styles; de !important hier zorgt dat
   uniformiteit ook mét JS-geïnjecteerde styles behouden blijft.
   2026-08-12 (todo-xxmaa): background = categoriekleur, color = tekstkleur */
.stee-themed .card-category-label[style*="background"] {
  border-radius: var(--radius-full, 999px) !important;
  padding: 2px 10px !important;
  min-width: 60px !important;
  font-size: 0.82em !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading, system-ui) !important;
}

/* Naam */
.stee-themed .card-name {
  font-size: 0.98em;
  font-weight: 600;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.stee-themed .card-date,
.stee-themed .prediction-frequency {
  font-size: 0.88em;
  color: inherit;
  opacity: .88;
}

/* Saldo */
.stee-themed .card-balance {
  font-size: 0.86em;
  color: inherit;
  opacity: .82;
  font-variant-numeric: tabular-nums;
}

/* ── Select mode ── */
.stee-themed .transaction-card.select-mode.selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--bg-selected);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📥 FORMULIEREN & INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed input[type="text"],
.stee-themed input[type="email"],
.stee-themed input[type="password"],
.stee-themed input[type="number"],
.stee-themed input[type="date"],
.stee-themed select,
.stee-themed textarea {
  font-family: var(--font-body);
  font-size: 0.9em;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text);
  transition: all 0.15s ease;
  outline: none;
}

.stee-themed input:focus,
.stee-themed select:focus,
.stee-themed textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 45, 135, 0.1);
}

/* Checkbox */
.stee-themed input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⚙️ INSTELLINGEN TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .settings-tablist {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
}

.stee-themed .settings-tab {
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85em;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.stee-themed .settings-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.stee-themed .settings-tab.active {
  color: var(--primary);
  background: var(--bg-selected);
  font-weight: 600;
}

/* Settings panel */
.stee-themed .settings-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

/* Settings row */
.stee-themed .settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.stee-themed .settings-row label {
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text);
}

.stee-themed .autosave-field-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.stee-themed .account-name-input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--border) !important;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.stee-themed .account-name-undo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  font-size: 1.1em !important;
}

.stee-themed .account-name-undo[hidden] {
  display: none !important;
}

.stee-themed .account-name-input.account-save-pending {
  border-color: #f9ab00 !important;
  box-shadow: 0 0 0 3px rgba(249,171,0,.12);
}

.stee-themed .account-name-input.account-save-success {
  border-color: #2e7d32 !important;
  background: #f1f8f1 !important;
  box-shadow: 0 0 0 3px rgba(46,125,50,.12);
}

.stee-themed .account-name-input.account-save-error {
  border-color: #c62828 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.12);
}

.stee-themed .stee-autosave-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.stee-themed .stee-autosave-wrap > input:not([type="checkbox"]):not([type="radio"]),
.stee-themed .stee-autosave-wrap > select,
.stee-themed .stee-autosave-wrap > textarea {
  flex: 1 1 auto !important;
  min-width: 0;
}

.stee-themed .stee-field-undo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  font-size: 1.05em !important;
}

.stee-themed .stee-field-undo[hidden],
.stee-themed [data-action="category-save"][hidden],
.stee-themed [data-action="statement-rule-save"][hidden],
.stee-themed [data-action="prediction-save"][hidden],
.stee-themed [data-action="save-transaction-details"][hidden],
.stee-themed [data-action="app-todo-settings-edit-save"][hidden] {
  display: none !important;
}

.stee-themed .stee-autosave-status {
  color: #2e7d32;
  font-size: .82em;
  font-weight: 600;
  margin-left: auto;
}

.stee-themed .stee-save-pending {
  border-color: #f9ab00 !important;
  box-shadow: 0 0 0 3px rgba(249,171,0,.12) !important;
}

.stee-themed .stee-save-success {
  border-color: #2e7d32 !important;
  background-color: #f1f8f1 !important;
  box-shadow: 0 0 0 3px rgba(46,125,50,.12) !important;
}

.stee-themed .stee-save-error {
  border-color: #c62828 !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.12) !important;
}

/* Remove button */
.stee-themed .settings-list-row .remove-button {
  padding: var(--sp-1) var(--sp-3);
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8em;
  transition: all 0.15s ease;
}

.stee-themed .settings-list-row .remove-button:hover {
  background: var(--danger);
  color: var(--text-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🪟 MODAL — Vercel-style
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.stee-themed .modal-content {
  background: var(--bg-surface);
  margin: 5vh auto;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.stee-themed .close {
  color: var(--text-muted);
  float: right;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.stee-themed .close:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📌 SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .financien-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.stee-themed .financien-sidebar-overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.stee-themed .financien-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: var(--bg-surface);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--border);
}

.stee-themed .financien-sidebar:not(.hidden) {
  transform: translateX(0);
}

.stee-themed .financien-sidebar-header {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stee-themed .financien-sidebar-content {
  padding: var(--sp-4);
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.stee-themed .sidebar-subtitle {
  font-weight: 600;
  margin-bottom: var(--sp-2);
  font-size: 0.85em;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stee-themed .sidebar-toggle {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85em;
  transition: all 0.15s ease;
}

.stee-themed .sidebar-toggle:hover {
  background: var(--bg-selected);
}

.stee-themed .sidebar-close {
  background: none;
  border: none;
  font-size: 1.3em;
  cursor: pointer;
  padding: var(--sp-1);
  color: var(--text-muted);
  transition: color 0.15s;
}

.stee-themed .sidebar-close:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📊 ACCOUNT SECTIES & DROP ZONES
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .account-layout-panel {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.stee-themed .page-toolbar .account-layout-panel {
  width: 100%;
  margin: 0;
  padding: var(--sp-2);
  box-shadow: none;
  border-radius: var(--radius-md);
}

.stee-themed .page-toolbar .account-layout-heading > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.stee-themed .page-toolbar .drop-zone-container {
  flex-direction: column;
  gap: 4px !important;
}

.stee-themed .page-toolbar .drop-zone {
  min-height: 0;
  width: 100%;
  padding: 4px 6px;
}

.stee-themed .page-toolbar .drop-zone-label {
  margin-bottom: 2px;
}

.stee-themed .account-layout-heading > div {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.stee-themed .account-layout-heading strong {
  font-family: var(--font-heading);
  color: var(--text);
}

.stee-themed .account-layout-heading span {
  color: var(--text-muted);
  font-size: .78em;
}

.stee-themed .account-dropzone-topbar,
.stee-themed .drop-zone-container {
  width: 100%;
}

.stee-themed .drop-zone-container {
  gap: var(--sp-2) !important;
  padding: 0 !important;
}

.stee-themed .account-section-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: space-between;
  position: relative;
  max-height: 48px;
  overflow-y: auto;
}

.stee-themed .drop-zone {
  flex: 1;
  min-width: 0;
  max-width: none;
  min-height: 48px;
  padding: var(--sp-1);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-md);
  text-align: left;
  color: var(--text-muted);
  background: var(--bg-app);
  font-size: 0.85em;
  line-height: 1.3;
  transition: border-color .15s, background-color .15s;
}

.stee-themed .drop-zone-label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--text-muted);
  font-size: .72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stee-themed .drop-zone.has-section {
  border-style: solid;
  border-color: var(--border);
  background: var(--bg-surface);
}

.stee-themed .drop-zone .account-section {
  max-width: none;
  min-width: 0;
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-selected);
  border-radius: var(--radius-sm);
}

/* 2026-08-13 (todo-3a2my): account-section tekst groter, header compacter */
.stee-themed .account-section h3,
.stee-themed .account-section-header {
  font-size: 0.9em;
  font-weight: 700;
  margin: 0 0 2px;
  text-align: center;
}

.stee-themed .account-section {
  font-size: 0.85em;
}

.stee-themed .account-section.drag-over {
  outline: 2px dashed var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔔 BADGES & INDICATOREN
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .prediction-badge.matched {
  background: var(--success);
  color: var(--text-on-primary);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: 0.72em;
  font-weight: 600;
  margin-left: var(--sp-2);
}

.stee-themed .prediction-badge.deviation,
.stee-themed .transaction-badge.deviation {
  background: var(--warning);
  color: var(--text-on-primary);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: 0.72em;
  font-weight: 600;
  margin-left: var(--sp-2);
}

.stee-themed .linked-indicator {
  color: var(--info);
  font-size: 0.75em;
  font-weight: 600;
  margin-left: var(--sp-2);
  white-space: nowrap;
}

.stee-themed .attachment-icon {
  color: var(--text-muted);
  font-size: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ℹ️ INFO BLOKKEN & STATUS
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .info-box {
  background: var(--accent-light-bg);
  padding: var(--sp-3);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--sp-3) 0;
  font-size: 0.9em;
}

.stee-themed .status {
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-light-bg);
  border-radius: var(--radius-md);
  font-size: 0.85em;
}

/* Tooltip */
.stee-themed .fin-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  cursor: help;
  margin-left: var(--sp-2);
  user-select: none;
  font-style: normal;
}

.stee-themed .fin-info:hover {
  background: var(--bg-selected);
  border-color: var(--primary);
  color: var(--primary);
}

/* 2026-08-13 (todo-4slkr): info-icoon in settings modals verbergen —
   de uitleg staat al in de veldlabels en neemt hier alleen ruimte */
.stee-themed #transactionModal .fin-info {
  display: none;
}

.stee-themed #finTooltip {
  background: var(--text);
  color: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8em;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛒 BOODSCHAPPEN TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .tab-btn {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.82em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.stee-themed .tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.stee-themed .tab-btn.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
}

.stee-themed .cat-tab {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.82em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.stee-themed .cat-tab.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.stee-themed .shop-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.15s ease;
}

.stee-themed .shop-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📊 OVERZICHTEN
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .overview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

/* Overzichten-tabbladen (2026-08-18, todo-…-wd5as): semantische kleuren in
   plaats van inline hex, zodat licht én donker na een klik correct blijven. */
.stee-themed .overview-tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.stee-themed .overview-tab:hover { background: var(--bg-hover); }
.stee-themed .overview-tab.active {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
  border-color: var(--primary);
}

/* Gemiddelden: totaalbalk en presets (2026-08-18, todo-…-j3mo1/c6ibt/w5nnq). */
.stee-themed .avg-total-bar {
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg-selected);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
}
.stee-themed .avg-preset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0;
  background: var(--bg-surface);
  color: var(--text);
}
.stee-themed .avg-preset-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
}
.stee-themed .avg-preset-header:hover { background: var(--bg-hover); border-radius: 8px; }
.stee-themed .avg-preset-header > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stee-themed .avg-chev { width: 12px; color: var(--text-secondary); font-size: .8em; }
.stee-themed .avg-preset-meta { color: var(--text-secondary); font-size: .8em; white-space: nowrap; }
.stee-themed .avg-preset-body { padding: 2px 10px 10px; }
.stee-themed .avg-preset-apply,
.stee-themed .avg-preset-delete {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-size: .8em;
  padding: 4px 10px;
}
.stee-themed .avg-preset-apply { font-weight: 700; color: var(--primary); border-color: var(--primary); }
.stee-themed .avg-preset-delete { padding: 4px 8px; color: var(--amount-negative, #C62828); }
.stee-themed .avg-preset-apply:hover,
.stee-themed .avg-preset-delete:hover { background: var(--bg-hover); }

/* Bonnen-tabblad: uitklapbare groepen (2026-08-18, todo-…-cdrrg). */
.stee-themed .rcp-bucket {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  margin-bottom: 8px;
  padding: 8px 10px;
}
.stee-themed .rcp-bucket > summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text);
}
.stee-themed .rcp-bucket-single { margin-top: 4px; }
.stee-themed .rcp-bucket-single > summary { font-size: .85em; color: var(--text-secondary); }

/* Bijlagebak: dropzone, statuskaarten en scanstatus (todo-…-9hytg/4mct2). */
.stee-themed .bijl-drop {
  border: 2px dashed var(--primary);
  background: var(--bg-selected);
  color: var(--text);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.stee-themed .bijl-drop.dragover { background: var(--bg-hover); border-color: var(--primary-dark, var(--primary)); }
.stee-themed .bijl-scan-status {
  font-size: .78em;
  color: var(--text);
  background: var(--bg-selected);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  margin-top: 4px;
}
.stee-themed .bijl-card {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  border-radius: 6px;
}
.stee-themed .bijl-card-collapsed {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  transition: transform .15s, box-shadow .15s;
}
.stee-themed .bijl-card-collapsed:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.stee-themed .bijl-card-expanded { border-radius: 8px; overflow: hidden; }
.stee-themed .bijl-card-title {
  font-size: .85em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: inherit;
}
.stee-themed .bijl-card-meta { font-size: .75em; color: var(--text-secondary); white-space: nowrap; }
.stee-themed .bijl-status-badge {
  font-size: .72em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-selected);
  color: var(--text);
  border: 1px solid var(--border);
}
/* Statuskleuren blijven betekenisvol, maar via zachte accentranden. */
.stee-themed .bijl-status-nieuw { border-left: 4px solid #E53935; }
.stee-themed .bijl-status-uitgelezen { border-left: 4px solid #F9A825; }
.stee-themed .bijl-status-gekoppeld { border-left: 4px solid #43A047; }

/* ═══════════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stee-themed .container {
    padding: 0 var(--sp-3);
  }

  .stee-themed .app-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .stee-themed .app-header-center {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .stee-themed .app-header-right {
    gap: var(--sp-1);
  }

  .stee-themed .settings-panel {
    padding: var(--sp-4);
  }

  .stee-themed .account-section-container {
    flex-direction: column;
  }

  .stee-themed .page-toolbar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: var(--sp-2) 0;
  }

  .stee-themed .page-toolbar-title {
    width: 100%;
  }

  .stee-themed .page-toolbar-group {
    min-width: 150px;
    flex: 1;
  }

  .stee-themed .account-layout-panel,
  .stee-themed #predictionsInlineContainer,
  .stee-themed #tableContainer {
    margin-left: 0;
  }

  .stee-themed .drop-zone-container {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .stee-themed .app-nav-link {
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.78em;
  }

        /* 2026-08-13 (todo-8560y): op kleine schermen toolbar horizontaal onder de header */
        .stee-themed .page-toolbar {
          position: static;
          flex-direction: row;
          flex-wrap: wrap;
          width: 100%;
          bottom: auto;
          border-right: none;
          border-bottom: 1px solid var(--border);
          gap: var(--sp-2);
          max-height: none;
          overflow-y: visible;
        }
      }

/* Boodschappen: consistente hoofdtabs, basisproducten en voorraadbeheer. */
.stee-themed .shopping-main-tabs,.stee-themed .shopping-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.stee-themed .shopping-main-tabs .tab-btn{padding:8px 14px}.stee-themed .shopping-view{display:flex;flex-direction:column;gap:10px}.stee-themed .base-products-list{display:flex;flex-direction:column;gap:6px}.stee-themed .base-product-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 7px;min-height:30px;border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);font-size:12px;line-height:1.2}.stee-themed .base-product-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:140px}.stee-themed .base-product-actions button{min-width:42px;padding:2px 6px;font-size:11px}.stee-themed .base-product-actions button:first-of-type{min-width:72px}.stee-themed .base-product-actions input{height:24px;padding:2px 4px}.stee-themed .base-tab-wrap{display:inline-flex;align-items:center;gap:2px}.stee-themed .base-tab-edit{min-width:26px!important;padding:4px!important}.stee-themed .inventory-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,360px));gap:6px;align-items:start}.stee-themed .inventory-view>.shopping-subtabs,.stee-themed .inventory-view>p,.stee-themed .inventory-view>.add-item-row,.stee-themed .inventory-view>button{grid-column:1/-1}.stee-themed .inventory-view .base-product-row{width:auto;max-width:360px}.stee-themed .inventory-view .base-product-actions{min-width:125px}.stee-themed .inventory-view .base-product-actions select{max-width:105px;font-size:11px}

/* ═══════════════════════════════════════════════════════════════════════════
   🔄 SYNC STATUS INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed #syncStatus {
  font-family: var(--font-body);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎯 BULK ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed #bulkActionBar {
  background: var(--bg-selected);
  border-bottom: 2px solid var(--primary);
}

.stee-themed #bulkSelectedCount {
  color: var(--primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📝 HEADINGS — consistente hiërarchie
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}

.stee-themed h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}

.stee-themed h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1em;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🍞 ACCOUNT MESSAGE & MISC
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .account-message {
  font-size: 0.9em;
  color: var(--text-secondary);
}

.stee-themed .hidden {
  display: none;
}

/* ── File label ── */
.stee-themed .file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85em;
  transition: all 0.15s ease;
}

.stee-themed .file-label:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.stee-themed .file-label input {
  display: none;
}

/* ── Account checkbox ── */
.stee-themed .account-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-width: 140px;
  max-width: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.15s ease;
}

.stee-themed .account-checkbox:hover {
  background: var(--bg-hover);
}

/* Kasboek dashboard */
.kasboek-dashboard{margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-surface)}
.kasboek-dashboard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.kasboek-dashboard-head button,#dashSave{border:1px solid var(--border);border-radius:7px;padding:6px 10px;background:var(--bg-surface);color:var(--text);cursor:pointer}
.kasboek-dashboard-cards{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.kasboek-dashboard-cards article{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:9px;background:var(--bg-selected)}.kasboek-dashboard-cards strong{font-size:1.35em}.kasboek-dashboard-cards small{color:var(--text-secondary)}
#dashboardSettings{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:grid;gap:9px}#dashboardSettings[hidden]{display:none}#dashboardSettings fieldset{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--border);border-radius:8px}.dashboard-hint{margin:0;padding:8px;border-radius:7px;background:var(--bg-selected);font-size:.85em;color:var(--text-secondary)}
@media(max-width:600px){.kasboek-dashboard-cards{grid-template-columns:1fr}}
.page-toolbar-group[style*="margin-left:auto"] { align-items:center; }
.page-toolbar-group[style*="margin-left:auto"] > button,
.page-toolbar-group[style*="margin-left:auto"] .btn-more { min-height:25px;display:inline-flex;align-items:center;justify-content:center;line-height:1; }
.admin-page .topbar { position:sticky;min-height:52px;margin:0; }
.admin-page .topbar h1 { position:absolute;left:50%;transform:translateX(-50%);margin:0; }
.admin-page .tabs { margin:0!important; }
.dashboard-inline-row{display:grid;grid-template-columns:minmax(250px,1.4fr) minmax(180px,.8fr) minmax(150px,.6fr);gap:10px;align-items:end}.dashboard-inline-row label{display:grid;gap:4px}.info-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--primary);color:var(--text-on-primary);font-size:11px;font-weight:700;cursor:help}@media(max-width:800px){.dashboard-inline-row{grid-template-columns:1fr}}
/* Headeracties: taal, modus en uitloggen exact gelijk gecentreerd. */
.stee-themed .app-header-right { align-items:center!important; }
.stee-themed .app-header-right > :is(select,button,.stee-mode-toggle) { height:34px!important;min-height:34px!important;margin:0!important;align-self:center!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important; }
/* Beheertabs blijven onder de vaste topbar zichtbaar (2026-08-18, todo-…-lblji).
   De offset was hard 52px, terwijl de topbar door e-mailadres/knoppen hoger kan
   worden — de balk schoof daardoor half onder de topbar. --admin-topbar-h wordt
   bij load/resize gemeten in admin.html en valt hier terug op 52px. */
.admin-page .tabs {
  position:sticky;
  top:var(--admin-topbar-h,52px);
  z-index:99;
  background:var(--bg-surface,#fff);
}
/* Tabelkoppen blijven plakken ónder de tabbalk in plaats van eroverheen. */
.admin-page .tbl-wrap { overflow:visible; }
.admin-page thead th {
  position:sticky;
  top:calc(var(--admin-topbar-h,52px) + var(--admin-tabs-h,42px));
  z-index:2;
}
.admin-page #usersTbody td { vertical-align:middle; }
/* Actiecel: een td met display:flex verliest de tabel-kolombreedte, waardoor de
   laatste kolom niet meer uitlijnde (todo-…-twdo7). Inhoud in een flexwrapper,
   de cel zelf blijft een gewone tabelcel. */
.admin-page td.actions { vertical-align:middle;white-space:nowrap; }
.admin-page td.actions > * { vertical-align:middle; }
.stee-themed .sidebar-action-link{min-height:25px;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);color:var(--text);font-size:.8em;line-height:1}.stee-themed .sidebar-action-link:hover{background:var(--bg-hover)}
#agendaTabModal[hidden]{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   🏠 LANDINGSPAGINA (2026-08-18, todo-…-u3bv7)
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-themed .home-main { max-width: 900px; margin: 0 auto; padding: 8px 0 40px; }
.stee-themed .home-greeting { font-size: 1.6em; margin: 18px 0 16px; color: var(--text); }

.stee-themed .home-budget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stee-themed .home-budget[hidden] { display: none; }
.stee-themed .home-budget-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.stee-themed .home-budget-label { font-size: .82em; color: var(--text-secondary); font-weight: 600; }
.stee-themed .home-budget-card strong { font-size: 1.5em; }
.stee-themed .home-budget-card small { color: var(--text-secondary); font-size: .78em; }

.stee-themed .home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.stee-themed .home-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.stee-themed .home-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.stee-themed .home-tile-icon { font-size: 1.9em; line-height: 1; }
.stee-themed .home-tile-body { display: flex; flex-direction: column; gap: 3px; }
.stee-themed .home-tile-title { font-weight: 700; font-size: 1.05em; }
.stee-themed .home-tile-desc { color: var(--text-secondary); font-size: .84em; }
.stee-themed .home-tile-badge {
  align-self: flex-start;
  margin-top: 4px;
  font-size: .72em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-selected);
  color: var(--text-secondary);
}

/* Wachtwoordbevestiging voor financiële onderdelen. */
.stee-themed .home-unlock-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.stee-themed .home-unlock-backdrop[hidden] { display: none; }
.stee-themed .home-unlock {
  width: min(420px, 95vw);
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  display: grid;
  gap: 8px;
}
.stee-themed .home-unlock h2 { margin: 0; font-size: 1.1em; }
.stee-themed .home-unlock p { margin: 0; color: var(--text-secondary); font-size: .88em; }
.stee-themed .home-unlock label { font-size: .82em; font-weight: 600; margin-top: 4px; }
.stee-themed .home-unlock input {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input, var(--bg-surface));
  color: var(--text);
}
.stee-themed .home-unlock-error { color: var(--amount-negative, #C62828); font-weight: 600; }
.stee-themed .home-unlock-error[hidden] { display: none; }
.stee-themed .home-unlock-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.stee-themed .home-unlock-actions button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
}
.stee-themed .home-unlock-actions button.primary {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
  border-color: var(--primary);
  font-weight: 700;
}
.stee-themed .home-unlock-actions button[disabled] { opacity: .6; cursor: progress; }

/* Alleen-lezen-banner voor leden zonder schrijfrechten (todo-…-x6i28). */
.stee-themed .stee-readonly-banner {
  position: sticky;
  top: 0;
  z-index: 10010;
  padding: 7px 14px;
  background: var(--bg-selected);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: .85em;
  font-weight: 600;
  text-align: center;
}

/* Toegang per onderdeel (2026-08-18, todo-…-x6i28). */
.stee-themed .access-intro,
.stee-themed .access-note { color: var(--text-secondary); font-size: .85em; margin: 0 0 10px; }
.stee-themed .access-note { margin-top: 10px; }
.stee-themed .access-table { width: 100%; border-collapse: collapse; }
.stee-themed .access-table th,
.stee-themed .access-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: .88em; }
.stee-themed .access-table th { color: var(--text-secondary); font-weight: 700; }
.stee-themed .access-table select { padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text); }
.stee-themed .access-name { font-weight: 600; }
.stee-themed .access-owner-tag,
.stee-themed .access-owner-cell { color: var(--text-secondary); font-size: .85em; }
.stee-themed .access-status { color: var(--text-secondary); font-size: .82em; margin-top: 8px; }
.stee-themed .access-status[hidden] { display: none; }

/* ToDo-markering op gemelde elementen (2026-08-18, todo-…-001f1). */
.stee-themed .stee-todo-marked {
  position: relative;
  outline: 2px dashed rgba(255, 87, 34, .75);
  outline-offset: 2px;
}
.stee-themed .stee-todo-marker {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ff5722;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.stee-themed .stee-todo-marker:hover { background: #e64a19; }
.stee-themed .stee-todo-marker-inline { position: static; margin-left: 4px; }
@media print { .stee-themed .stee-todo-marker { display: none; } }