:root {
  --steffen: #4F81BD;
  --doreen:  #9BBB59;
  --weekend: #FFFFCC;
  --handover-border: #C00000;
  --ferien: #FFFF00;
  --hol-bb: #E6B8B7;
  --hol-be: #F8CBAD;
  --special: #DDEBF7;
  --bg: #fafafa;
  --fg: #222;
  --muted: #777;
}

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
header { background: #fff; border-bottom: 1px solid #ddd; padding: .6em 1em; }
nav { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; }
nav a { text-decoration: none; color: #036; }
nav .downloads { margin-left: auto; display: flex; gap: .8em; font-size: .9em; }
nav .downloads a { color: var(--muted); }
main { padding: 1em; max-width: 960px; margin: 0 auto; }
h1 { font-size: 1.4em; }
h1 a { text-decoration: none; color: #036; padding: 0 .3em; }

/* --- Monatsansicht --- */
table.month { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.month th { background: #eee; padding: .4em; font-size: .85em; }
table.month td { border: 1px solid #ddd; vertical-align: top; height: 5.5em; padding: .25em; font-size: .8em; }
table.month th.kw-col, table.month td.kw-col {
  width: 3.2em;
  text-align: center;
  background: #f2f2f2;
  color: #444;
  font-weight: 600;
}
td.pad { background: #f4f4f4; }
td.weekend { background-color: var(--weekend); }
td.owner-steffen { background-color: var(--steffen); color: #fff; }
td.owner-doreen  { background-color: var(--doreen);  color: #fff; }
/* Übergabetag: links-oben Vortag, rechts-unten neuer Inhaber (Diagonale) */
td.handover.owner-steffen.from-doreen {
  background: linear-gradient(135deg, var(--doreen) 0 49.5%, #fff 49.5% 50.5%, var(--steffen) 50.5% 100%);
}
td.handover.owner-doreen.from-steffen {
  background: linear-gradient(135deg, var(--steffen) 0 49.5%, #fff 49.5% 50.5%, var(--doreen) 50.5% 100%);
}
td .head { display: flex; align-items: center; gap: .25em; }
td .num { font-weight: bold; font-size: 1.1em; }
td .badge { font-size: .65em; padding: 0 .35em; border-radius: 3px; background: #fff; color: #333; line-height: 1.4; }
td .badge.bb { background: var(--hol-bb); color: #500; }
td .badge.be { background: var(--hol-be); color: #500; }
td .badge.fer { background: var(--ferien); color: #555; }
td .hol   { font-size: .7em; font-weight: bold; opacity: .95; }
td .block { font-size: .75em; opacity: .9; }
td .tpc   { font-size: .75em; font-style: italic; }
td .appt  { font-size: .75em; background: var(--special); color: #023; padding: 0 .25em; border-radius: 2px; margin-top: .1em; }
td .note  { font-size: .75em; font-style: italic; color: #666; border-left: 2px solid #aaa; padding-left: .3em; margin-top: .1em; background: #fff8; }

/* Ferien-/Feiertags-Markierung als seitliche Streifen, damit Owner-BG sichtbar bleibt */
td.ferien { box-shadow: inset 4px 0 0 var(--ferien); }
td.hol-bb { box-shadow: inset 4px 0 0 var(--hol-bb); }
td.hol-be { box-shadow: inset 4px 0 0 var(--hol-be); }
td.ferien.hol-bb { box-shadow: inset 4px 0 0 var(--hol-bb), inset 8px 0 0 var(--ferien); }
td.ferien.hol-be { box-shadow: inset 4px 0 0 var(--hol-be), inset 8px 0 0 var(--ferien); }

/* --- Legende --- */
.legend { margin-top: 1em; }
.swatch { display: inline-block; padding: .2em .6em; margin-right: .4em; border-radius: 3px; color: #fff; font-size: .85em; }
.swatch.owner-steffen { background: var(--steffen); }
.swatch.owner-doreen  { background: var(--doreen); }
.swatch.handover { color: #000; background: linear-gradient(135deg, var(--steffen) 0 49%, #fff 49% 51%, var(--doreen) 51% 100%); }
.swatch.ferien { background: var(--ferien); color: #333; }
.swatch.hol-bb { background: var(--hol-bb); color: #500; }
.swatch.hol-be { background: var(--hol-be); color: #500; }
.swatch.special { background: var(--special); color: #023; }
.swatch.note { background: #f4f4f4; color: #555; font-style: italic; }

/* --- Jahresübersicht --- */
.year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; }
.mini-month h2 { font-size: 1em; margin: 0 0 .3em; }
table.mini { width: 100%; border-collapse: collapse; font-size: .75em; }
table.mini th { background: #eee; padding: .15em; }
table.mini td { border: 1px solid #ddd; text-align: center; padding: .15em; }
table.mini th.kw-col, table.mini td.kw-col {
  width: 2.6em;
  background: #f2f2f2;
  color: #444;
  font-weight: 600;
}
table.mini td.owner-steffen { background: var(--steffen); color: #fff; }
table.mini td.owner-doreen  { background: var(--doreen);  color: #fff; }
table.mini td.handover.owner-steffen.from-doreen {
  background: linear-gradient(135deg, var(--doreen) 0 49%, #fff 49% 51%, var(--steffen) 51% 100%);
}
table.mini td.handover.owner-doreen.from-steffen {
  background: linear-gradient(135deg, var(--steffen) 0 49%, #fff 49% 51%, var(--doreen) 51% 100%);
}
table.mini td.ferien { box-shadow: inset 0 -4px 0 var(--ferien); }
table.mini td.hol-bb, table.mini td.hol-be { font-weight: bold; text-decoration: underline; text-decoration-thickness: 2px; }
table.mini td.hol-bb { text-decoration-color: var(--hol-bb); color: #fff; }
table.mini td.hol-be { text-decoration-color: var(--hol-be); color: #fff; }
table.mini td.hol-bb::before, table.mini td.hol-be::before { content: ""; display: block; height: 4px; margin: -2px -2px 1px; }
table.mini td.hol-bb::before { background: var(--hol-bb); }
table.mini td.hol-be::before { background: var(--hol-be); }
table.mini td.ferien.hol-bb, table.mini td.ferien.hol-be { box-shadow: inset 0 -4px 0 var(--ferien); }
table.mini td.pad { background: #f4f4f4; }

/* --- Statistik --- */
table.stats { border-collapse: collapse; min-width: 420px; }
table.stats th, table.stats td { border: 1px solid #ddd; padding: .35em .7em; text-align: right; }
table.stats th:first-child, table.stats td:first-child { text-align: left; }
table.stats tfoot th { background: #eee; }

/* --- Login --- */
main.login { max-width: 320px; margin: 4em auto; background: #fff; padding: 1.5em; border: 1px solid #ddd; border-radius: 6px; }
main.login h1 { margin-top: 0; }
main.login form { display: flex; flex-direction: column; gap: .8em; }
main.login label { display: flex; flex-direction: column; font-size: .9em; }
main.login input { padding: .5em; font-size: 1em; border: 1px solid #ccc; border-radius: 3px; }
main.login button { padding: .6em; font-size: 1em; background: var(--steffen); color: #fff; border: 0; border-radius: 3px; cursor: pointer; }
.error { color: #a00; }
.flash { background: #ffd; border: 1px solid #cc9; padding: .5em .8em; border-radius: 3px; }

/* --- Vorschläge --- */
.actions { display: flex; gap: .6em; flex-wrap: wrap; }
.btn { display: inline-block; padding: .4em .8em; background: var(--steffen); color: #fff !important; border-radius: 3px; text-decoration: none; }
.btn:hover { opacity: .9; }
table.proposals, table.meta { border-collapse: collapse; width: 100%; max-width: 720px; }
table.proposals th, table.proposals td, table.meta th, table.meta td { border: 1px solid #ddd; padding: .4em .7em; text-align: left; vertical-align: top; }
table.meta th { background: #fafafa; width: 9em; }
.badge.st-pending  { background: #fc6; color: #421; padding: .15em .5em; border-radius: 3px; font-size: .8em; }
.badge.st-approved { background: #6c9; color: #062; padding: .15em .5em; border-radius: 3px; font-size: .8em; }
.badge.st-rejected { background: #c66; color: #500; padding: .15em .5em; border-radius: 3px; font-size: .8em; }

/* --- Forms --- */
form.propose, form.decide { display: flex; flex-direction: column; gap: .7em; max-width: 480px; }
form.propose label, form.decide label { display: flex; flex-direction: column; font-size: .9em; gap: .2em; }
form.propose input, form.propose textarea, form.propose select,
form.decide input, form.decide textarea { padding: .45em; font-size: 1em; border: 1px solid #ccc; border-radius: 3px; }
form.propose button, form.decide button { padding: .55em 1em; font-size: 1em; background: var(--steffen); color: #fff; border: 0; border-radius: 3px; cursor: pointer; align-self: flex-start; }
form.decide { flex-direction: row; align-items: flex-end; gap: 1em; flex-wrap: wrap; }
form.decide button.danger { background: #c44; }

/* --- Diff Vorher/Nachher --- */
.diff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
table.month.compact td.day { height: 2.4em; padding: .1em .2em; font-size: .75em; }
table.month.compact td.day .num { font-size: .9em; }
table.month.compact td.day.tpc { box-shadow: inset 0 -4px 0 #e08; }
table.month.compact td.day.tpc .tpc-mini { font-size: .65em; font-weight: bold; color: #e08; line-height: 1; }
table.month.compact td.day.changed { outline: 3px solid #ffb000; outline-offset: -3px; position: relative; }
table.month.compact td.day.changed::after {
  content: "Δ"; position: absolute; top: 0; right: 2px;
  font-size: .7em; font-weight: bold; color: #b35900;
}
@media (max-width: 720px) { .diff-pair { grid-template-columns: 1fr; } }

/* Vorschau-Box in den Erstell-Formularen */
.preview-box { margin: 1em 0; padding: 1em; border: 2px dashed #ffb000; border-radius: 4px; background: #fffbea; }
.preview-box h3 { margin-top: 0; }
button.danger, .btn.danger { background: #c44 !important; color: #fff; }

/* Filter-Tabs */
.filters { display: flex; gap: .4em; flex-wrap: wrap; margin: .6em 0 1em; }
.filters .tab { padding: .3em .7em; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; color: #036; background: #fff; font-size: .9em; }
.filters .tab.active { background: var(--steffen); color: #fff; border-color: var(--steffen); }
.filters .tab .count { opacity: .8; font-size: .85em; }

/* Warnhinweis (z.B. beim Block-Editor) */
.warn { background: #fff3cd; border: 1px solid #ffc107; border-radius: 3px; padding: .6em .9em; color: #664d03; margin: .5em 0 1em; }
.warn a { color: #664d03; text-decoration: underline; }

/* ---- Planning Bar + Click-to-Flip ---- */
.planning-bar {
  background: #FFF3CD;
  border: 1px solid #E6C86A;
  border-radius: 6px;
  padding: .6em 1em;
  margin: .6em 0 1em;
  display: flex;
  gap: .8em;
  align-items: center;
  flex-wrap: wrap;
}
.planning-bar button { padding: .3em .8em; cursor: pointer; }
.planning-bar button.secondary { background: #eee; border: 1px solid #bbb; }
.planning-bar .hint { color: var(--muted); font-size: .85em; margin-left: auto; }
td.day { cursor: pointer; user-select: none; }
td.day.dirty { outline: 2px dashed #C08000; outline-offset: -2px; }
.badge.dirty { background: #C08000; color: #fff; border-radius: 50%; padding: 0 .25em; font-size: .9em; }

/* ---- Lock-Badge + Hint ---- */
.lock-badge {
  display: inline-block;
  background: #6b7280;
  color: #fff;
  font-size: .55em;
  vertical-align: middle;
  padding: .2em .5em;
  border-radius: 4px;
  margin-left: .4em;
  letter-spacing: .03em;
}