:root {
  --color-card: #fff;
  --color-ink: #222018;
  --color-accent: #0e7a6b;
  --color-primary: #B23962;
  --color-secondary: #255c9f;
  --color-muted: #6a665d;
  --color-rim: #eee;
}

/* Body-Hintergrund (Radial-Gradient nicht via Tailwind-Utilities abbildbar) */
body {
  background: white;
  min-height: 100vh;
}

/* ── Eingabefelder für Arbeitsstunden ──────────────────────────────── */
input[inputmode="decimal"] {
  width: 100%;
  padding: 4px;
  border: none;
  outline: none;
  border-radius: 0;
  background: #fffef0;
  color: #222018;
  font: inherit;
  font-size: inherit;
  text-align: right;
  font-weight: 600;
  appearance: textfield;
  box-sizing: border-box;
}

input[inputmode="decimal"]::-webkit-inner-spin-button,
input[inputmode="decimal"]::-webkit-outer-spin-button {
  opacity: 1;
}

input[inputmode="decimal"]:focus {
  outline: none;
  background: #fffbdb;
}

/* Zellen mit Eingabefeld: kein Padding, damit das Feld bündig abschließt */
.results-table td:has(input[inputmode="decimal"]) {
  background: #fffef0;
}

.results-table td:has(input[inputmode="decimal"]:focus) {
  background: #fffbdb;
}

/* ── Datentabellen ─────────────────────────────────────────────────── */
.results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.results-table caption {
  caption-side: top;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 2rem;
  color: inherit;
}

/* Jede Zelle: nur rechte + untere Border (verhindert Doppellinien) */
.results-table th,
.results-table td {
  border-right: 0.5px solid #d7cfbd;
  border-bottom: 0.5px solid #d7cfbd;
  border-top: none;
  border-left: none;
  padding: 6px 6px;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

/* Erste Zeile bekommt obere Border */
.results-table thead tr:first-child th {
  border-top: 0.5px solid #d7cfbd;
}

/* Erste Spalte jeder Zeile bekommt linke Border */
.results-table tr th:first-child,
.results-table tr td:first-child {
  border-left: 0.5px solid #d7cfbd;
}

.results-table thead th {
  background-color: rgb(219 234 254);
  text-align: center;
  font-weight: 600;
  white-space: normal;
}

.results-table thead tr.muted th {
  background-color: var(--color-card);
  font-weight: 400;
  font-size: 0.65rem;
}

.results-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
}

.results-table tbody th {
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
}

.results-table tfoot th,
.results-table tfoot td {
  background-color: var(--color-rim);
  font-weight: 700;
}

.results-table tfoot th {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
}

/* ── Tabellen-Scroll-Wrapper ────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.5rem;
}

/* ── Chart-Container ───────────────────────────────────────────────── */
.chart-panel {
  height: 520px;
  margin-bottom: 1rem;
}

.chart-panel.tall { height: 650px; }

.chart-wrapper {
  margin: 1rem 0;
}

/* ── Details-Toggle ─────────────────────────────────────────────────── */
.hideable {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
}

.hideable.open {
  max-height: 10000px;
  opacity: 1;
}

.details-toggle {
  margin-left: auto;
  margin-right: auto;
}

.debug-stop {
  background-color: rgba(255, 0, 0, 0.2);
}