/*
  Backoffice-Stil = Tischkraft-Markenlook. Werte gespiegelt aus
  ../tischvermietung/src/styles/tokens.css: Forest-Gruen (dunkle Flaeche),
  Canvas/Bone (helle Flaechen), Amber als einziger Akzent, weiche Radien,
  getoente Schatten. Marken-Fonts mit generischem Fallback (nicht mitgeliefert).
*/
:root {
  --tk-forest-900: #101f18;
  --tk-forest-700: #1e3a2b;
  --tk-forest-600: #2a5140;
  --tk-canvas: #f1ebdd;
  --tk-bone: #faf6ec;
  --tk-sand: #e6dcc7;
  --tk-ink: #1c1a13;
  --tk-ink-soft: #4c4838;
  --tk-cream: #f3eee2;
  --tk-cream-soft: #b3c0b3;
  --tk-amber: #b5751a;
  --tk-amber-bright: #d28e26;
  --tk-line: #d8cdb6;
  --tk-error: #a23a26;
  --tk-radius-sm: 12px;
  --tk-radius-md: 16px;
  --tk-radius-lg: 28px;
  --tk-shadow-soft: 0 1px 2px rgba(28, 26, 19, 0.04), 0 8px 24px rgba(28, 26, 19, 0.06);
  --tk-font-display: 'Bricolage Grotesque Variable', ui-serif, Georgia, serif;
  --tk-font-sans: 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif;
  --tk-font-mono: 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--tk-font-sans);
  background: var(--tk-canvas);
  color: var(--tk-ink);
  line-height: 1.5;
}
a { color: var(--tk-forest-600); }

.topbar {
  background: var(--tk-forest-700);
  color: var(--tk-cream);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .brand { font-family: var(--tk-font-display); font-weight: 700; letter-spacing: 0.01em; }
.topbar a { color: var(--tk-cream-soft); text-decoration: none; margin-left: 1rem; }
.topbar a:hover { color: var(--tk-cream); }

.shell { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
h1, h2 { font-family: var(--tk-font-display); color: var(--tk-forest-700); }
h1 { font-size: 1.6rem; margin: 0 0 1.2rem; }

.card {
  background: var(--tk-bone);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-soft);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.2rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--tk-line); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tk-ink-soft); }
td.mono, .mono { font-family: var(--tk-font-mono); font-size: 0.9rem; }
tr:hover td { background: var(--tk-sand); }

.badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-family: var(--tk-font-mono); border: 1px solid var(--tk-line);
}
.badge.anfrage { background: var(--tk-sand); color: var(--tk-ink); }
.badge.angebot { background: #fff3df; color: var(--tk-amber); border-color: var(--tk-amber); }
.badge.buchung { background: var(--tk-forest-600); color: var(--tk-cream); border-color: var(--tk-forest-600); }
.badge.abgelehnt, .badge.storniert { background: #f3ded9; color: var(--tk-error); border-color: var(--tk-error); }

.btn {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: var(--tk-radius-sm);
  border: 1px solid var(--tk-forest-700); background: var(--tk-forest-700); color: var(--tk-cream);
  font: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--tk-forest-600); }
.btn.secondary { background: transparent; color: var(--tk-forest-700); }
.btn.amber { border-color: var(--tk-amber); background: var(--tk-amber); }
.btn.amber:hover { background: var(--tk-amber-bright); }

label { display: block; font-size: 0.85rem; color: var(--tk-ink-soft); margin: 0.8rem 0 0.3rem; }
input, select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit;
  border: 1px solid var(--tk-line); border-radius: var(--tk-radius-sm); background: #fff;
}
textarea { font-family: var(--tk-font-mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--tk-amber); border-color: var(--tk-amber); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
.grid2 .k { color: var(--tk-ink-soft); }
.grid2 .v { font-family: var(--tk-font-mono); font-size: 0.9rem; }

/* -------- Kalender -------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 1rem; }
.cal-head { text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--tk-ink-soft); padding: 0.3rem 0; }
.cal-cell { min-height: 4.5rem; background: var(--tk-canvas); border: 1px solid var(--tk-line); border-radius: var(--tk-radius-sm); padding: 3px; }
.cal-empty { background: transparent; border: none; }
.cal-num { font-family: var(--tk-font-mono); font-size: 0.75rem; color: var(--tk-ink-soft); }
.cal-chip { display: block; font-family: var(--tk-font-mono); font-size: 0.7rem; text-decoration: none; border-radius: 6px; padding: 1px 4px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.buchung { background: var(--tk-forest-600); color: var(--tk-cream); }
.cal-chip.angebot { background: #fff3df; color: var(--tk-amber); border: 1px solid var(--tk-amber); }

.login { max-width: 380px; margin: 8vh auto; }
.fehler { color: var(--tk-error); font-size: 0.9rem; margin-top: 0.6rem; }
.hint { color: var(--tk-ink-soft); font-size: 0.85rem; }
.row-actions { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; }
.right { text-align: right; }