:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #dde1e6;
  --color-border-strong: #c3c9d1;
  --color-text: #1c2129;
  --color-text-muted: #656d78;
  --color-accent: #2454ff;
  --color-accent-hover: #1a3fd6;
  --color-accent-contrast: #ffffff;
  --color-todo: #b9750c;
  --color-todo-bg: #fdf1de;
  --color-done: #1f8a4c;
  --color-done-bg: #e5f6ec;
  --color-done-bg-strong: #bfe8cf;
  --color-danger: #c62f3f;
  --color-danger-bg: #fbe7e9;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
}

button, input, select { font: inherit; color: inherit; }

.hidden { display: none !important; }

/* ---------- Identity modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 28px 32px;
  width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.modal-box h1 { font-size: 1.15rem; margin: 0 0 6px; padding-right: 56px; }
.modal-box p { color: var(--color-text-muted); margin: 0 0 18px; font-size: 0.9rem; }
.help-list {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--color-text);
}
.help-list li { margin-bottom: 10px; }
.help-list li:last-child { margin-bottom: 0; }
.help-list a,
.help-list .link-button {
  color: var(--color-accent);
  font-size: inherit;
  text-decoration: underline;
}
/* Buttons carry the browser's default padding, which offsets its text from
   the plain list items next to it — flatten it so both line up. */
.help-list .link-button { padding: 0; }
.modal-box form { display: flex; flex-direction: column; gap: 12px; }
.modal-box label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--color-text-muted); }
.modal-box input {
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.modal-box .primary { margin-top: 6px; }

.modal-box-wide { width: 560px; max-width: 90vw; }

.modal-box.maximized { width: 90vw; max-width: none; height: 90vh; max-height: 90vh; }
.modal-box.maximized .issuers-list { max-height: 65vh; }
.modal-box.maximized .terms-fields textarea { min-height: 45vh; }

.modal-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
}
.modal-icon-btn {
  border: none;
  background: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
}
.modal-icon-btn:hover { background: var(--color-bg); color: var(--color-text); }
.modal-icon-btn svg { width: 16px; height: 16px; }

.terms-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.terms-field { display: flex; flex-direction: column; gap: 4px; }
.terms-field label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }
.terms-field textarea {
  min-height: 110px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  resize: vertical;
  font: inherit;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-actions button:not(.primary) {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}

.identity-logout { margin-top: 14px; }

#email-modal label { margin-bottom: 18px; }

.issuers-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.issuer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}
.issuer-row input {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.issuer-row .issuer-usage {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}
.issuer-row button.danger {
  padding: 6px 10px;
}
.issuers-empty { color: var(--color-text-muted); font-size: 0.85rem; padding: 8px 2px; }

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--color-border);
}
.user-row:last-child { border-bottom: none; }
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { font-weight: 600; }
.user-row-email {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.user-row-admin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.user-row-admin input { cursor: pointer; }
.user-row button.danger { padding: 6px 10px; }

.user-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 6px;
  margin-top: -4px;
  border-bottom: 1px solid var(--color-border-strong);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.user-list-header .user-row-count,
.user-list-header .user-row-admin { font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.user-list-header-spacer { min-width: 66px; }

/* ---------- Layout ---------- */

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.drag-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 84, 255, 0.08);
  border: 3px dashed var(--color-accent);
}
.drag-overlay-message {
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 18px 30px;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}


.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-filters,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbar-filters { flex: 1; }

/* On wide screens the filters (search/person/status) and the actions
   (send/refresh/menu) push to opposite ends with a real gap between them,
   instead of the actions trailing tightly right after the search box.
   Below this width there usually isn't enough spare room for that to read
   as anything but cramped, so it's left at the plain single-gap layout. */
@media (min-width: 1280px) {
  .toolbar-controls { justify-content: space-between; }
  #search-input { flex-grow: 0; max-width: 420px; }
}

/* Every toolbar control shares one height (34px, border-box, matching
   .icon-button) and one font-size, so the row reads as one consistent
   line instead of each item's own padding/border/size quietly disagreeing
   by a pixel or two. */
#search-input {
  flex: 1;
  min-width: 160px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: 0.9rem;
}

.status-filter {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
}

button.primary {
  height: 34px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
}
button.primary:hover:not(:disabled) { background: var(--color-accent-hover); }
button.primary:disabled { opacity: 0.4; cursor: not-allowed; }

.badge {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.78rem;
}

.link-button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  white-space: nowrap;
}

.icon-button {
  margin-left: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
}
.icon-button:hover { background: var(--color-bg); }
.icon-button svg { width: 18px; height: 18px; }

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.icon-button.spinning svg { animation: icon-spin 0.7s linear infinite; }

.menu-wrap { position: relative; margin-left: auto; }
.menu-wrap .icon-button { margin-left: 0; }

.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text);
}
.menu-dropdown button:hover { background: var(--color-bg); }
.menu-divider { height: 1px; background: var(--color-border); margin: 5px 4px; }

.person-filter-wrap { position: relative; }
.person-filter-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0 12px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.9rem;
  max-width: 200px;
}
.person-filter-btn:hover { background: var(--color-bg); }
.person-filter-btn svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--color-text-muted); }
#person-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.person-filter-dropdown { max-height: 320px; overflow-y: auto; }
.person-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.88rem;
}
.person-filter-option:hover { background: var(--color-bg); }
.person-filter-option input[type="checkbox"] { cursor: pointer; }
.person-filter-option-muted { color: var(--color-text-muted); }

/* ---------- Table + detail layout ---------- */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}

.layout.with-detail {
  grid-template-columns: 1fr var(--detail-width, 440px);
}

.table-wrap {
  overflow: auto;
  padding: 0 0 16px;
}

table#invoice-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: 0.86rem;
}

#invoice-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  z-index: 1;
}

#invoice-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
#invoice-table tbody tr:hover { background: #f8f9fb; }
#invoice-table tbody tr.row-completed { background: var(--color-done-bg); }
#invoice-table tbody tr.row-completed:hover { background: #d3ecdc; }
#invoice-table tbody tr.selected { background: #eef2ff; }
#invoice-table tbody tr.missing-fields td.col-status { color: var(--color-todo); }

#invoice-table td {
  padding: 4px 6px;
  vertical-align: middle;
}

.col-period { white-space: nowrap; }
.col-status { white-space: nowrap; }

/* Narrow screens: the table has less room, so give it back from the columns
   that don't need much (Typ, Zeitraum, Status, Lieferant) and let Betreff —
   the one column whose content is routinely the longest — absorb it.
   Hochgeladen-von goes away entirely while filtered to just one person —
   see .filtered-to-self, toggled in syncPersonFilterUI(). */
@media (max-width: 1399px) {
  .col-type, .col-period, .col-status { width: 1%; white-space: nowrap; }

  /* typeOptions() still renders the full "KK – Bezahlt mit..." label in
     each <option> (shown in full once the dropdown is open) — this only
     clips the closed select's own box down to roughly the code. Wide
     enough for a 2-char code plus the native arrow; ellipsis is just a
     safety net if a longer code ever gets added. */
  .col-type .cell-editable {
    min-width: 60px;
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Supplier names are typically one short word — capping this column
     (rather than leaving it to share leftover space with Betreff roughly
     evenly) is what actually hands that space to Betreff instead. */
  .col-issuer { width: 200px; max-width: 200px; }

  #invoice-table.filtered-to-self .col-user { display: none; }
}

.cell-editable {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 5px 6px;
}
.cell-editable:hover { border-color: var(--color-border-strong); }
.cell-editable:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  outline: none;
}
.cell-editable.empty { color: var(--color-text-muted); font-style: italic; }
/* "Unbekannt" here is an actual value (not a placeholder hint like the
   other empty-state cells), so it stays upright — just muted. */
.col-user .cell-editable.empty { font-style: normal; }

.period-cell { display: flex; gap: 4px; align-items: center; }
.period-cell input { width: 100px; }

/* Fully empty Zeitraum reads as a blank cell by default — border, dash and
   placeholder only appear on hover/focus, same reveal already used for the
   other inline-editable cells, just applied to the pair as one unit. */
.period-cell.empty .cell-editable { border-color: transparent; }
.period-cell.empty .cell-editable::placeholder { color: transparent; }
.period-cell.empty .period-dash { visibility: hidden; }

.period-cell.empty:hover .cell-editable,
.period-cell.empty:focus-within .cell-editable {
  border-color: var(--color-border-strong);
}
.period-cell.empty:hover .cell-editable::placeholder,
.period-cell.empty:focus-within .cell-editable::placeholder {
  color: var(--color-text-muted);
}
.period-cell.empty:hover .period-dash,
.period-cell.empty:focus-within .period-dash {
  visibility: visible;
}
/* Keep the normal focus ring even while otherwise hidden. */
.period-cell.empty .cell-editable:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}
.status-pill.todo { background: var(--color-todo-bg); color: var(--color-todo); }
.status-pill.ready { background: var(--color-done-bg); color: var(--color-done); }
/* Completed rows are already tinted --color-done-bg (and a darker shade of
   it on hover), so the pill needs a visibly different fill or it disappears
   into the row in both states. */
.status-pill.completed { background: var(--color-done-bg-strong); color: var(--color-done); }

.col-select { width: 34px; text-align: center; }
.col-select input[type="checkbox"] { cursor: pointer; }
.col-select input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.35; }

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 48px 0;
}
#empty-state-message { margin: 0; }
#empty-state-all-mine { margin-top: 8px; }

/* Issuer typeahead */
.typeahead-wrap { position: relative; }
.typeahead-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
}
.typeahead-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  cursor: pointer;
}
.typeahead-list button:hover, .typeahead-list button.active { background: #eef2ff; }
.typeahead-list button strong { font-weight: 700; }

/* ---------- Detail pane ---------- */

/* Fixed (not a normal grid item height-wise) so it can reach all the way
   to the bottom of the window — covering the upload-hint bar — instead of
   stopping at .layout's own height. .layout's grid-template-columns still
   reserves the same width for it (see .layout.with-detail below), so the
   table is pushed left exactly as before; only the pane's height escapes
   that row. --toolbar-height is measured in JS since the toolbar's exact
   height isn't a fixed constant worth hardcoding. */
.detail-pane {
  position: fixed;
  top: var(--toolbar-height, 55px);
  right: 0;
  bottom: 0;
  width: var(--detail-width, 440px);
  z-index: 15;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-width: 320px;
  max-width: 90vw;
  min-height: 0;
  /* Belt-and-braces: the pane should never force the page to scroll
     sideways, whatever ends up inside it. */
  overflow-x: hidden;
}

.detail-resize-handle {
  position: absolute;
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
}
.detail-resize-handle:hover, .detail-resize-handle.dragging {
  background: var(--color-accent);
  opacity: 0.25;
}

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 2;
}

.detail-filename {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-close {
  flex: 0 0 auto;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
}
.detail-close svg { width: 18px; height: 18px; }
.detail-close:hover { color: var(--color-text); }

.detail-body {
  overflow-y: auto;
  padding: 16px 18px 40px;
  flex: 1;
}

.detail-preview {
  width: 100%;
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  object-fit: contain;
  margin-bottom: 16px;
  display: block;
}

.detail-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.detail-field label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.detail-field input, .detail-field select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.detail-row-inline { display: flex; gap: 8px; }
/* min-width: 0 is required here — a flex item's default min-width is its
   content's intrinsic width, and a plain <input> defaults to ~20
   characters wide, so without this the pair of date fields refuses to
   shrink and forces the whole pane (and page) to scroll horizontally. */
.detail-row-inline > div { flex: 1; min-width: 0; }

.filename-preview {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--color-text);
  word-break: break-word;
  user-select: all;
}

.detail-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 4px 0 16px;
}

.detail-actions { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* Subtle outline style shared by the three detail-pane action buttons
   (An Bexio senden / Neu verarbeiten / Löschen) — deliberately understated
   since the toolbar's own "An Bexio senden" is the real primary action. */
.detail-action-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text);
}
.detail-action-btn:hover:not(:disabled) { background: var(--color-bg); }
.detail-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: icon-spin 0.6s linear infinite;
}

/* .danger needs its own (higher-specificity) neutral base, otherwise the
   plain global button.danger rule (element+class) would win over the
   single-class .detail-action-btn and always show red, even at rest. */
.detail-action-btn.danger {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.detail-action-btn.danger:hover:not(:disabled) {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
/* Armed = first click of the in-button double-confirm. Same red as hover
   (not a solid fill) — just the label changes to ask for the second click. */
.detail-action-btn.danger.armed {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.split-button {
  position: relative;
  display: inline-flex;
  width: fit-content;
}
.split-button .split-main {
  border-radius: var(--radius) 0 0 var(--radius);
}
.split-button .split-caret {
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.split-caret svg { width: 14px; height: 14px; }
.split-button .menu-dropdown { top: calc(100% + 4px); left: 0; right: auto; }
.split-button .menu-dropdown button:disabled { color: var(--color-text-muted); cursor: not-allowed; opacity: 0.5; }

button.secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}
button.secondary:hover:not(:disabled) { background: var(--color-bg); }
button.secondary:disabled { opacity: 0.4; cursor: not-allowed; }

button.danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}
button.danger:hover:not(:disabled) { background: #f6d3d7; }
button.danger:disabled { opacity: 0.4; cursor: not-allowed; }

h2.detail-heading {
  font-size: 1rem;
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history-item { font-size: 0.82rem; }
.history-item .history-action { font-weight: 600; }
.history-item .history-meta { color: var(--color-text-muted); }
.history-item .history-detail { color: var(--color-text-muted); margin-top: 2px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--color-text);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 200;
}
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-done); }

/* ---------- Celebration (last "Zu erledigen" item just cleared) ---------- */

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  /* See-through on purpose — this paints over the real table/toolbar
     rather than a solid takeover screen. */
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  padding: 10px 16px;
}
.celebration-overlay.hidden { display: none; }
.celebration-overlay.fading-out { animation: celebration-fade-out 0.4s ease forwards; }

.celebration-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}

.celebration-word {
  font-weight: 900;
  color: #000;
  font-size: min(14vh, 15vw);
  line-height: 0.85;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  animation: celebration-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--celebration-delay, 0ms);
}

@keyframes celebration-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes celebration-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-word { animation: none; opacity: 1; transform: none; }
  .celebration-overlay.fading-out { animation-duration: 0.01s; }
}