:root {
  --bg: #faf5ec;                /* warm Mallorca sand instead of cool grey */
  --surface: #ffffff;
  --surface-2: #faf7f1;
  --border: #e7e0d3;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #ee263b;            /* Hürzeler brand red */
  --accent-soft: #fde8ea;
  --danger: #c0392b;
  --ok: #1a7f52;
  --warn: #b9791a;
  --wait: #8b3fd6;              /* Waitinglist purple */
  --update: #2563eb;            /* "this changed" blue — the Protokoll's Aktualisierung
                                   tag and Central's version badge are the same fact
                                   about the same booking, so they are one colour */
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e131b; --surface: #161d29; --surface-2: #1b2433; --border: #2a3648;
    --text: #e6edf6; --muted: #9fb0c4; --accent: #ff5a6e; --accent-soft: #3a1620;
    --warn: #e6b667; --wait: #b892f0; --update: #6ea8fe;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
/* The browser hides [hidden] with a rule so weak that ANY class saying `display`
   silently beats it, and the element stays on screen while el.hidden reads true —
   the code and the tests agree with each other and disagree with the reader. That
   left a black "UNRESOLVED DATA" band standing over an empty database. Said once,
   with the weight to actually hold, instead of remembered per element. */
[hidden] { display: none !important; }
html { margin: 0; height: 100%; }
/* min-height (not height:100%) so the page grows with its content and the sticky
   topbar keeps sticking the whole way down instead of scrolling off after one
   viewport. */
body {
  margin: 0; min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); font-size: 14px; line-height: 1.5;
  /* warm sand base with a soft sun glow (top-right) and a distant sea hint
     (bottom-left); anchored to the viewport, kept faint so text stays crisp. */
  background:
    radial-gradient(52vw 38vh at 94% -8%, rgba(255,193,120,.22), transparent 62%),
    radial-gradient(48vw 40vh at -10% 112%, rgba(120,170,210,.13), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body { background:
    radial-gradient(52vw 38vh at 94% -8%, rgba(255,170,90,.10), transparent 62%),
    radial-gradient(48vw 40vh at -10% 112%, rgba(90,140,190,.10), transparent 60%),
    var(--bg); background-attachment: fixed; }
}
/* Logged-in workspace backdrop: the Mallorca watercolor sits BLURRED behind the
   whole app, under an ~80% sand scrim, so it only shimmers through faintly and
   text stays crisp. Scoped to :not(.locked) — the login page keeps its own
   crisp, full-bleed scene. Both layers are fixed, so they stay put while the
   content scrolls, and pointer-events:none keeps them click-through. */
body:not(.locked)::before {
  content: ""; position: fixed; inset: -40px; z-index: -2; pointer-events: none;
  background: url("../assets/mallorca-tramuntana.webp") center center / cover no-repeat;
  filter: blur(9px) saturate(1.04);
}
body:not(.locked)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52vw 38vh at 94% -8%, rgba(255,193,120,.10), transparent 62%),
    rgba(250, 245, 236, .58);
}
@media (prefers-color-scheme: dark) {
  body:not(.locked)::after { background:
    radial-gradient(52vw 38vh at 94% -8%, rgba(255,170,90,.08), transparent 62%),
    rgba(14, 19, 27, .66); }
}
/* Center content "sheet": a soft, warm near-white panel behind the main column
   so the eye settles on the actual content, while the lighter scrim above lets
   the blurred scene show through more at the sides. ~90% opaque (not pure
   white) so a whisper of the backdrop still lives under the content. */
body:not(.locked) main {
  background: rgba(252, 249, 243, .90);
  border-radius: 18px;
  box-shadow: 0 12px 44px rgba(70, 45, 20, .12);
  margin-top: 16px; margin-bottom: 22px; min-height: 68vh;
}
@media (prefers-color-scheme: dark) {
  body:not(.locked) main {
    background: rgba(22, 29, 41, .90);
    box-shadow: 0 12px 44px rgba(0, 0, 0, .38);
  }
}

/* inline icons */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tab-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo-mark { width: 27px; height: auto; fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.logo-mark .logo-sun { fill: #ffd98a; stroke: none; opacity: .95; }
/* image logo (Canva emblem): cream tile, zoomed to trim its margin */
.logo.logo-img { background: #f4ecd8; overflow: hidden; padding: 0; border: 1px solid var(--border); box-shadow: var(--shadow); }
.logo.logo-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); display: block; }
/* icon-only tabs (Settings, Test) + a gentle divider before them */
.tab.tab-icon { padding-left: 12px; padding-right: 12px; }
.tab.tab-groupstart { margin-left: 14px; position: relative; }
.tab.tab-groupstart::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 1px; background: var(--border); }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; padding: 14px 24px; background: var(--surface);
  /* sticks right below the data gate when that is up (--gate-h = its height) */
  border-bottom: 1px solid var(--border); position: sticky; top: var(--gate-h, 0px); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #a3132a); color: #fff;
  font-weight: 800; font-size: 20px; letter-spacing: .5px;
}
.brand-text h1 { margin: 0; font-size: 16px; letter-spacing: .6px; }
.brand-text p { margin: 0; font-size: 12px; color: var(--muted); }
.brand-text em { color: var(--accent); font-style: normal; }

.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
.tab {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.pill { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; }

.nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logout { opacity: .8; }
.logout:hover { opacity: 1; }
.lang-switch { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 9px; border: 1px solid var(--border); }
.lang-switch .lang {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .4px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.lang-switch .lang:hover { color: var(--text); }
.lang-switch .lang.active { background: var(--accent); color: #fff; }

/* ---------- layout ---------- */
main { padding: 24px; max-width: 1280px; margin: 0 auto; }
.panel { display: none; animation: fade .2s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

/* ---------- dropzone ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 40px 24px; text-align: center; transition: .15s; cursor: pointer;
}
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.dz-icon { color: var(--accent); }
.dz-svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-ic { width: 34px; height: 34px; display: block; margin: 0 auto 10px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.empty p { margin: 0; }
.dz-title { margin: 10px 0 2px; font-weight: 700; font-size: 16px; }
.dz-sub { margin: 0; color: var(--muted); }
.link { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- queue ---------- */
.queue { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.queue-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.queue-list { list-style: none; margin: 0; padding: 6px 0; }
.queue-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 12px; }
.queue-list .fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-list .fsize { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- results ---------- */
.results { margin-top: 16px; display: grid; gap: 10px; }
.result-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ok);
  border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.result-card.err { border-left-color: var(--danger); }
.result-card .r-main { min-width: 0; }
.result-card .r-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-card .r-sub { color: var(--muted); font-size: 12px; }
.result-card .r-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- preview ---------- */
.preview-col { position: sticky; top: 88px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.preview-actions { display: flex; gap: 6px; }
.preview-body { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 620px; }
#previewFrame { width: 100%; height: 100%; border: 0; background: #525659; display: none; }
#previewFrame.show { display: block; }
.preview-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: .12s; }
.btn:hover { border-color: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- section head ---------- */
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0 0 2px; font-size: 18px; }
.muted { color: var(--muted); }
.muted.small, .small { font-size: 12px; }

/* ---------- log table ---------- */
/* overflow-x:auto (not hidden) so a wide table — e.g. the longer German action
   labels — scrolls instead of clipping the last columns off-screen. */
/* The header row stays put while the rows scroll past it. A sticky header needs
   a scrolling ancestor to stick inside: overflow-x already makes this box one,
   so it also gets a height to scroll within — without it the box simply grows
   and the header rides off the top with the page. */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto; max-height: calc(100vh - 200px); }
.log-table { width: 100%; border-collapse: collapse; }
.log-table th, .log-table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.log-table th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
  position: sticky; top: 0; z-index: 3; }
/* the cell background is what hides the rows passing underneath, so the header
   needs its own border rather than the shared one, which scrolls away with it */
.log-table thead th { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 var(--border); }
.log-table tbody tr:last-child td { border-bottom: 0; }
.log-table .num { text-align: right; }
.log-table .actions-col { text-align: right; white-space: nowrap; }
.log-table tr:hover td { background: var(--surface-2); }
.pdf-link { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-align: left; }
.xml-link { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-align: left; }
.xml-multi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; display: inline-block; white-space: nowrap; }
/* plausibility-check warnings surfaced in the Protokoll */
.chk-chip { border: 1px solid var(--warn); background: var(--surface); color: var(--warn); font: inherit; font-weight: 700;
  font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.chk-chip.err { border-color: var(--danger); color: var(--danger); }
.chk-chip.open { background: var(--warn); color: #fff; }
.chk-chip.err.open { background: var(--danger); color: #fff; }
.chk-row > td { background: rgba(185,121,26,.07); padding: 8px 14px 12px; }
.log-table tr.chk-row:hover td { background: rgba(185,121,26,.07); }
.chk-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 6px; }
.chk-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.chk-list li { font-size: 12.5px; line-height: 1.4; }
.chk-list li.chk-err { color: var(--danger); }
.chk-list li.chk-warn { color: var(--warn); }
.chk-list li::marker { content: "⚠  "; }
.chk-list li.chk-err::marker { content: "⛔  "; }
.chk-ref { font-weight: 700; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; display: inline-block; margin: 1px 2px 1px 0; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.tag.tag-book { background: rgba(26,127,82,.12); color: var(--ok); border-color: transparent; }
.tag.tag-update { background: rgba(37,99,235,.12); color: var(--update); border-color: transparent; }
.tag.tag-cancel { background: rgba(192,57,43,.12); color: var(--danger); border-color: transparent; }
.tag.tag-nochange { background: var(--surface-2); color: var(--muted); }
/* Test bookings: pitch black, white text — unmistakable, and impossible to read
   as one of the four flair colours. Fixed values, not theme variables: it must
   stay black in the dark theme too. */
.tag.tag-test { background: #000; color: #fff; border-color: #000; }
.doss-group.doss-test { border-left: 3px solid #000; }
.test-note { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 12px;
  color: #a8710f; background: rgba(180,120,20,.09);
  border: 1px solid rgba(180,120,20,.25); border-radius: 8px; padding: 6px 10px; }
.test-note .tn-text { flex: 1; }
/* Dismiss the notice for this login. Sits at the right-hand end, quiet until
   pointed at, and big enough to hit without aiming. */
.test-note .tn-close { flex: none; width: 22px; height: 22px; line-height: 1; padding: 0;
  font-size: 16px; color: inherit; background: none; border: 0; border-radius: 6px;
  cursor: pointer; opacity: .55; }
.test-note .tn-close:hover { opacity: 1; background: rgba(180,120,20,.16); }
.test-note .tn-close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
/* Central's saved-search rail is position:fixed against the right edge and
   vertically centred, so on a window narrow enough for the panel to reach that
   edge it floats straight over anything right-aligned there — including this ×,
   which then simply does not take the click. Keep the button out of the rail's
   column (14px inset + 42px wide, plus room for its shadow). */
#hist-test-note { padding-right: 62px; }
.tag.tag-ftp { background: rgba(238,38,59,.12); color: var(--accent); border-color: transparent; }
.tag.tag-self { background: rgba(124,58,237,.12); color: #7c3aed; border-color: transparent; }
.tag.tag-roaming { background: rgba(140,71,173,.14); color: #8c47ad; border-color: transparent; }
/* "Kein Versand": a hotel we cannot place has no address and no send state. Grey
   and quiet on purpose — it is the absence of a to-do, not another one. */
.tag.tag-nomail { background: transparent; color: var(--muted); border-style: dashed; cursor: help; }

/* The same question, said once in Central. It borrows the test-note's shape but
   not its colour — and it has a way out rather than an × , since it goes away by
   being answered. The saved-search rail sits over the right edge here too. */
.test-note.um-note { border-color: rgba(217,119,6,.35); background: rgba(217,119,6,.08); color: inherit;
  display: flex; align-items: center; gap: 10px; padding-right: 62px; }
.um-note .un-text { flex: 1; }

/* The data gate: black on purpose — this is the one banner that means "stop",
   and it must not blend in with the amber notices that mean "when you get to
   it". It sits ABOVE the header and both are sticky: the banner at 0, the
   header right under it (--gate-h is set by the app to the banner's height, 0
   while it is hidden), so neither ever slides over the other. The whole band is
   one big button; it breathes on its own, and a BLOCKED action makes it flare —
   blink and grow — so the refusal visibly points at its reason. */
.data-gate { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px;
  background: #000; color: #fff; padding: 13px 20px; font-size: 15px; cursor: pointer;
  border-bottom: 4px solid #e11d2e; transform-origin: top center;
  animation: dgbreathe 2.2s ease-in-out infinite; }
.data-gate .dg-ic { width: 26px; height: 26px; flex: 0 0 auto; }
.data-gate strong { letter-spacing: .08em; white-space: nowrap; font-size: 16px; color: #ff4d5e; }
.data-gate .dg-text { flex: 1; opacity: .95; font-weight: 600; }
.data-gate .btn { background: #e11d2e; color: #fff; border-color: #e11d2e; font-weight: 700; }
.data-gate .btn:hover { background: #ff2d40; }
.data-gate:hover { background: #17090b; }
@keyframes dgbreathe { 0%, 100% { border-bottom-color: #e11d2e; } 50% { border-bottom-color: #7a0f18; } }
/* The flare after a blocked attempt: slow enough to read rather than a flicker,
   and it GROWS — from the top edge, so it swells down over the page instead of
   nudging it. Transform only: the layout underneath does not move, so a refusal
   never makes the reader lose their place. */
.data-gate.dg-alarm { animation: dgalarm .8s ease-in-out 3; }
@keyframes dgalarm {
  0%, 100% { transform: scaleY(1); background: #000; }
  50% { transform: scaleY(1.35); background: #e11d2e; }
}
/* …and the writing does not stretch with it — the band grows around the words. */
.data-gate.dg-alarm > * { animation: dgalarmtext .8s ease-in-out 3; }
@keyframes dgalarmtext {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.741); }   /* 1 / 1.35 */
}
/* Decisions about how a hotel is WRITTEN, shown on the hotel itself: the
   spellings it answers to, and the spellings ruled not to be it. Each carries its
   own undo — a decision you cannot find is one you cannot take back. */
/* what a batch left behind because the gate holds it */
.batch-gateheld { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger); }
.hm-names { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.hm-names-h { flex: 1 1 100%; }
.hm-name-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 5px 2px 9px;
  border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.hm-ignore .hm-name-chip { border-style: dashed; border-color: rgba(192, 57, 43, .5); color: var(--danger); }
.hm-name-scope, .um-ign-scope { border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; font-size: 11px; line-height: 1; padding: 3px 7px; cursor: pointer; margin-left: 2px; }
.hm-name-scope:hover, .um-ign-scope:hover { color: var(--accent); border-color: var(--accent); }
.hm-name-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; }
.hm-name-x:hover { color: var(--accent); }

/* The fix dialog holds one section per kind of open case; each names itself, so
   two sections never read as one long list. */
.dfx-h { margin: 14px 0 4px; font-size: 14px; }
.modal-box > section:first-of-type .dfx-h { margin-top: 0; }
.hotelfix-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; max-height: 42vh; overflow: auto; }
.hotelfix-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.hfx-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hfx-name { font-weight: 600; }
.hfx-code { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.hfx-why { flex: 1 1 100%; margin: 4px 0 6px; }
.hfx-act { display: flex; gap: 6px; flex-wrap: wrap; }
/* The likely answer is OUTLINED. It used to be `.btn.primary`, which sets white
   text — and `.btn.ghost`, written later in this file at the same specificity,
   took the accent background straight back off it. White on white: a button whose
   whole text was invisible. Nothing here sets a colour without a background. */
.hfx-act .btn.hfx-near { border-color: var(--accent); color: var(--accent); }
/* …and a FILLED one means exactly one thing: this is the answer you have picked.
   Three classes, so it beats `.btn.ghost`'s transparent background. */
.hfx-act .btn.is-picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.hfx-act .btn.hfx-ign-one.is-picked { background: var(--danger); border-color: var(--danger); color: #fff; }
.hotelfix-row.is-answered { border-color: var(--accent); background: rgba(37,99,235,.05); }
.hfx-pending { margin: 2px 0 6px; font-weight: 600; color: var(--accent); }
#hotelfix-syncout:empty { display: none; }
.mealfix-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; max-height: 50vh; overflow: auto; }
.mealfix-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.mealfix-row .mf-code { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.mealfix-row code { font-weight: 600; }
.mealfix-row .mf-name { flex: 1 1 220px; }

/* "Nicht zugeordnet" — hotel names out of the bookings this list cannot answer
   for. Amber rather than red: it is a question waiting for an answer, not a
   failure, and some of the answers are "this is not a hotel at all". */
.unmatched { border: 1px solid rgba(217,119,6,.35); background: rgba(217,119,6,.06);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.um-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.um-head p { flex: 1 1 100%; margin: 4px 0 0; }
.um-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.um-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.um-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; }
.um-name { font-weight: 600; }
.um-alt, .um-sug { flex: 1 1 100%; }
.um-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.um-pick { max-width: 220px; }
.um-ignored { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.um-ign-h { flex: 1 1 100%; }
/* A name ruled "not a hotel" is the same KIND of thing as a spelling a hotel
   answers to, so it wears the same chip the hotel cards use (.hm-name-chip):
   a white bordered pill with its own ✕. It used to be loose text with a dash of
   a border, which read as a sentence rather than as something you can take back. */
.um-ign { display: inline-flex; align-items: center; gap: 6px; padding: 2px 5px 2px 9px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: var(--surface); }
.um-ign-t { font-weight: 600; }
.um-ign-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; }
.um-ign-x:hover { color: var(--accent); }
/* ---- Storno preview (per-browser trial of the new cancellation rules) ---- */
/* The notice is a statement of mode, not a dismissible warning — blue, not amber. */
.test-note.preview-note { border-left: 3px solid var(--update); background: rgba(37,99,235,.07); }
.test-banner.preview-banner { background: rgba(37,99,235,.10); color: var(--update); border-color: transparent; }
/* A cancellation with nothing to send: quiet grey where the amber to-do was. */
.hist-sent-badge.prev { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tag.cxl-prev { background: var(--surface-2); color: var(--muted); border-style: dashed; cursor: help; }
.hist-orig { color: var(--muted); font-size: 11px; cursor: help; }
/* Settings that live in THIS browser only — marked so nobody wonders why a
   colleague's screen disagrees. */
/* "Alle für dieses Hotel" sits apart from Senden/Abbrechen — it changes what is
   about to go out rather than answering the dialog, so it must not be reachable
   by muscle memory aimed at Abbrechen. */
#email-sweep { margin-left: auto; }
#email-sweep.on { border-color: var(--update); color: var(--update); }
.local-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); border: 1px dashed var(--faint, var(--border)); border-radius: 999px;
  padding: 1px 8px; margin-left: 6px; vertical-align: 1px; cursor: help; white-space: nowrap; }
/* The unmatched-hotel notice speaks the same language as the gate band: black,
   the warning triangle, the action on the right. It is not the gate (nothing is
   blocked — a name-only hotel cannot hold a send), but a warning is a warning,
   and the office reads them in one colour. */
.um-note-band { display: flex; align-items: center; gap: 12px; background: #111;
  color: #fff; border-radius: 10px; padding: 9px 14px; margin: 0 0 12px; }
.um-note-band .dg-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.um-note-band strong { letter-spacing: .08em; white-space: nowrap; font-size: 13px; color: #ff4d5e; }
.um-note-band .un-text { flex: 1; opacity: .95; font-weight: 600; font-size: 13px; }
.um-note-band .un-go { background: #fff; color: #111; border-color: #fff; white-space: nowrap; }
/* The two lenses on a rebooked Vorgang. The active side is filled, so it is
   always visible which view is on screen. */
.cxl-viewswitch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden; margin-left: 6px; vertical-align: 2px; }
.cxl-viewswitch .cvw { border: 0; background: var(--surface); color: var(--muted);
  font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer; line-height: 1.2; }
.cxl-viewswitch .cvw.on { background: var(--update); color: #fff; cursor: default; }
/* The Fake-Storno bubble in the fused timeline: closed by default, the caret
   turns when it is open. */
.tl-fake { margin: 4px 0 10px 2px; }
.tl-fake-head { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--border);
  background: var(--surface-2); color: var(--muted); border-radius: 999px; font-size: 12px;
  font-weight: 700; padding: 3px 12px; cursor: pointer; }
.tl-fake-head:hover { color: var(--accent); border-color: var(--accent); }
.tl-fake-head .mono { font-weight: 400; }
.tl-fake-caret { display: inline-block; transition: transform .15s; }
.tl-fake.open .tl-fake-caret { transform: rotate(90deg); }
.tl-fake-body { display: none; margin: 8px 0 0 14px; padding-left: 12px;
  border-left: 2px dashed var(--line); }
.tl-fake.open .tl-fake-body { display: block; }
.tag.cxl-seam-tag { background: rgba(37,99,235,.10); color: var(--update); border-color: transparent; cursor: help; }
@media (prefers-reduced-motion: reduce) { .tl-fake-caret { transition: none; } }
.lock-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35;
  background: rgba(37,99,235,.08); color: #2563eb; border: 1px solid rgba(37,99,235,.25); }
.conn-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
/* the copy address and its CC/BCC choice belong on one line — one decision */
.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row input { flex: 1 1 auto; min-width: 0; }
.copy-row select { flex: 0 0 auto; width: auto; }
.conn-result { color: var(--muted); }
.conn-result.ok { color: var(--ok); font-weight: 600; }
.conn-result.err { color: var(--danger); font-weight: 600; word-break: break-word; }
.status.ok { background: rgba(26,127,82,.12); color: var(--ok); }
.status.err { background: rgba(192,57,43,.12); color: var(--danger); }
.status.nolist { background: rgba(100,116,139,.16); color: var(--muted); }
/* Verlauf-import badge in the Protokoll */
.status.vl { font-size: 11px; }
.status.vl.ok { background: rgba(26,127,82,.12); color: var(--ok); }
.status.vl.warn { background: rgba(214,158,46,.20); color: #a9740b; }
@media (prefers-color-scheme: dark) { .status.vl.warn { color: #e6b74c; } }
.iconbtn { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 4px 7px; cursor: pointer; font-size: 11px; color: var(--text); margin-left: 3px; white-space: nowrap; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.iconbtn.danger:hover { border-color: var(--danger); color: var(--danger); }
/* an action the data gate holds: visibly out of reach, with the reason on hover */
.iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.iconbtn:disabled:hover { border-color: var(--border); color: var(--text); }
/* Per-version delete (🗑) sits at the right end of a timeline entry's header. */
.tl-del { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; opacity: .5; border-radius: 6px; }
.tl-del:hover { opacity: 1; background: color-mix(in srgb, var(--danger) 15%, transparent); }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ---------- settings ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
fieldset legend { font-weight: 700; padding: 0 8px; color: var(--accent); }
/* destructive "data" section: red-tinted frame + button rows */
fieldset.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
fieldset.danger-zone legend { color: var(--danger); }
.data-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.data-row .btn { flex: none; }
fieldset label { display: block; margin: 12px 0; font-weight: 600; font-size: 13px; }
fieldset label small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }
fieldset input[type=text], fieldset select { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
/* fixed / read-only text field (e.g. the agency is always ACTIVE TRAVEL AG) */
fieldset input[type=text][readonly] { background: var(--surface); color: var(--muted); cursor: default; }
/* HOTELCODE of the selected hotel, shown under the booking Hotel picker */
.hotelcode-line { display: block; margin-top: 5px; color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.hotelcode-line:empty { display: none; }
/* Where the keyboard is. Without this the caret was invisible outside the login
   box: you could tab through the whole app and never see what you were on, which
   made every keyboard route effectively unusable even where one existed. Only
   :focus-visible, so a mouse click never draws a ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* a required booking field left empty, briefly outlined after a failed submit */
.field-missing { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent) !important; }
fieldset input[type=color] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); margin-top: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
label.check input { width: auto; margin: 0; }
/* A stated fact, not a choice: looks like the fields around it so it is read in
   the same pass, but plainly not editable. */
label.fixed-note input[readonly] {
  background: var(--panel-2, #f4f4f6); color: var(--muted, #6b6b76);
  cursor: default; font-variant-numeric: tabular-nums;
}
.map-editor { display: grid; gap: 8px; margin: 8px 0; }
.map-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; }
.map-row input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.map-row .del { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; padding: 6px 9px; color: var(--danger); }
/* A code with no name: the same open case the black band counts, marked here in
   the table where the names actually live. */
.map-row-open .mk { border-color: #e11d2e; color: #e11d2e; font-weight: 700; }
.map-row-open .mv { border-color: #e11d2e; box-shadow: 0 0 0 3px rgba(225, 29, 46, .12); }

/* bookings guest list (Surname | Given | delete), one row per occupant */
.guests-field { margin: 12px 0; }
.guests-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.guest-head-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 0 2px 2px; }
.guest-list { display: grid; gap: 6px; }
.guest-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; align-items: center; }
.guest-row input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.guest-row .del { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; padding: 6px 0; color: var(--danger); }
.guests-field small { display: block; margin-top: 6px; }

/* per-hotel room-type rules (Hotel | Code | Name | delete) */
.rule-head, .rule-row { display: grid; grid-template-columns: 1.3fr 74px 1.3fr auto; gap: 8px; align-items: center; }
.rule-head { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 2px 0; }
.rule-row input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.rule-row .del { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; padding: 6px 9px; color: var(--danger); }

/* ---------- settings sub-tabs ---------- */
.subtabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.subtab { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.subtab:hover { color: var(--text); }
.subtab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* ---------- hotel emails editor ---------- */
.hotel-mail-toolbar { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.auto-sync-hint { margin: 8px 0 4px; }
/* ---------- archive counter (Settings) ---------- */
.archive-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; margin: 10px 0 6px; }
.archive-stats .arc-stat { font-size: 13px; }
.archive-stats .arc-stat strong { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.archive-stats .arc-next, .archive-stats .arc-last { flex-basis: 100%; }
.hotel-mail-toolbar input[type=search] { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.hotel-mail-editor { display: grid; gap: 10px; }
/* Each hotel is a bright white card that lifts off the sand panel, so its main
   data reads crisply (inputs inside go cream — see .hm-email). */
.hotel-mail-row { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 10px 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.hm-head { display: flex; gap: 8px; align-items: center; }
.hm-head .hm-hotel { flex: 1; }
.hm-chevron { display: none; user-select: none; font-size: 12px; color: var(--muted); width: 12px; text-align: center; }
.hotel-mail-row.is-notus .hm-chevron { display: inline-block; }
.hotel-mail-row.is-notus .hm-head { cursor: pointer; }
/* NICHT ÜBER UNS hotels stay collapsed (header only) until expanded */
.hotel-mail-row.is-notus:not(.expanded) .hm-sub,
.hotel-mail-row.is-notus:not(.expanded) .hm-rooms,
.hotel-mail-row.is-notus:not(.expanded) .hm-emails,
.hotel-mail-row.is-notus:not(.expanded) .hm-add-email,
.hotel-mail-row.is-notus:not(.expanded) .hm-notus-note { display: none; }
.hm-code { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.hm-code.none { color: var(--muted); font-weight: 400; font-style: italic; }
.hm-sub { margin-top: 6px; }
.hm-rooms { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; display: grid; gap: 2px; max-height: 150px; overflow-y: auto; }
.hm-rooms-label { font-weight: 700; margin-bottom: 2px; }
.hm-room { padding-left: 4px; }
.hm-head .hm-hotel { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; min-width: 0; }
/* the name is synced (read-only): render it like a static title, not a field */
.hm-head .hm-hotel[readonly] { border-color: transparent; background: transparent; padding-left: 2px; cursor: default; }
.hm-emails { display: grid; gap: 6px; margin: 8px 0 4px; }
.hm-email-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.hm-email-row .hm-email { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.hotel-mail-row .del { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; padding: 6px 9px; color: var(--danger); }
.btn.tiny { padding: 4px 9px; font-size: 12px; }
.hm-add-email { margin-top: 2px; }
/* NICHT ÜBER UNS toggle */
.hm-notus { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 7px; cursor: pointer; padding: 6px 10px; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.hm-notus:hover { color: var(--text); }
.hm-notus[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.hotel-mail-row.is-notus { border-color: var(--accent); }
.hotel-mail-row.is-notus .hm-emails, .hotel-mail-row.is-notus .hm-add-email { opacity: .45; }
.hm-notus-note { margin-top: 8px; font-style: italic; color: var(--accent); }
.hotel-mail-row:not(.is-notus) .hm-notus-note { display: none; }
/* "add" buttons placed above their editor need breathing room below */
#addRoomMapTop, #addSvcMapTop, #addHotelEmailTop { margin-bottom: 10px; }

/* ---------- bookings ---------- */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bk-side { display: grid; gap: 20px; align-content: start; }
fieldset input[type=number], fieldset input[type=date], fieldset input[type=datetime-local] {
  width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit;
}
.xml-out {
  width: 100%; min-height: 340px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text); resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5;
  white-space: pre; overflow: auto;
}

/* disabled "not yet available" placeholder fields */
.disabled-group { margin-top: 14px; padding: 10px 12px 4px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); }
.dg-head { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
label.dis { opacity: .55; }
label.dis input:disabled, label.dis select:disabled { cursor: not-allowed; background: var(--bg); color: var(--muted); }

/* Locked (non-editable) booking fields — a feed booking only lets you change
   comments, meal plan and booking date; the rest is greyed out. */
#tab-bookings input:disabled,
#tab-bookings select:disabled,
#tab-bookings .guest-row input:disabled { background: var(--bg); color: var(--muted); opacity: .6; cursor: not-allowed; }
#tab-bookings button:disabled { opacity: .45; cursor: not-allowed; }
#tab-bookings label:has(> input:disabled),
#tab-bookings label:has(> select:disabled) { color: var(--muted); }
/* Editing a feed booking: collapse to the editable fields only; the toggle
   button reveals the rest (still greyed + disabled). */
#b-toggleFields { margin: 0 0 12px; }
#b-toggleFields:not([hidden]) { display: inline-flex; }   /* keep the hidden attribute effective */
#tab-bookings.ext-collapsed [data-bk-lock] { display: none; }
#tab-bookings.ext-collapsed .row2.bk-mixrow { grid-template-columns: 1fr; }
/* pre-reservation (fast create) mode: hide the guest/flight/phone detail fields —
   a prereservation only needs room, board, dates and count. They stay in the DOM
   (populated + shown) when editing a feed booking, so its data is never lost. */
#tab-bookings.prereserva .bk-detail { display: none; }

/* ---------- history / version tree ---------- */
.hist-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hist-search { flex: 1 1 260px; min-width: 200px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.hist-sortwrap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hist-sortwrap select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.hist-showing { font-size: 12px; white-space: nowrap; }
.hist-daterange { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hist-daterange input[type=date] { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.hist-daterange .hist-datefield { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.hist-daterange .link { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.hist-daterange .link:hover { color: var(--accent); }

/* multi-select hotel filter — a checkbox dropdown in the toolbar */
.hist-hotelsel { position: relative; display: inline-flex; }
.hist-hotels-btn { padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hist-hotels-btn::after { content: '▾'; font-size: 11px; opacity: .7; }
.hist-hotels-btn:hover { border-color: var(--accent); }
.hist-hotels-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.hist-hotels-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 300px; max-width: 88vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.20);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hist-hotels-search { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.hist-hotels-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hist-hotels-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.hist-hotels-list label:hover { background: var(--surface-2); }
.hist-hotels-list input { width: 15px; height: 15px; cursor: pointer; flex: none; }
.hist-hotels-list .hs-none { color: var(--muted); font-size: 12.5px; padding: 6px 8px; }
.hist-hotels-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.hist-hotels-foot .link { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; }
.hist-hotels-foot .muted { font-size: 12px; }

/* Verlauf saved searches — a fixed fixture floating on the right edge of the
   screen, outside the content column; shown only while the Verlauf is active. */
.hist-saves { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hist-save-btn { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.hist-save-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.hist-save-btn:disabled { opacity: .4; cursor: default; }
.hist-saves-list { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hist-save-chip { position: relative; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.hist-save-chip:hover { border-color: var(--accent); background: var(--surface-2); }
.hist-save-chip .sc-icon { font-size: 17px; line-height: 1; }
.hist-save-chip .sc-num { position: absolute; bottom: 0; right: 3px; font-size: 9px; font-weight: 800; color: var(--muted); }
.hist-save-chip .sc-del { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1; place-items: center; cursor: pointer; padding: 0; display: none; }
.hist-save-chip:hover .sc-del { display: grid; }
.hist-save-chip .sc-del:hover { color: var(--danger); border-color: var(--danger); }

/* status filter chips: activating one shows only those bookings */
.hist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hist-chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hist-chip:hover { border-color: var(--accent); color: var(--text); }
.hist-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hist-chip .chip-n { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .8; }
.hist-chip .chip-n:empty { display: none; }
.hist-chip .fav-star { color: #e8b923; font-size: 12px; line-height: 1; }
.hist-chip.fav-chip.active .fav-star { color: #fff; }
.hist-chip .wait-flag { color: var(--wait); font-size: 12px; line-height: 1; }
.hist-chip.wait-chip.active .wait-flag { color: #fff; }
/* reset-all-filters button, pushed to the far right of the chip row */
.hist-reset { margin-left: auto; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 6px 4px; text-decoration: underline; }
.hist-reset:hover { color: var(--text); }
/* guest bubbles: one per occupant, easier to read than "; "-separated names */
.gbub { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin: 1px 4px 1px 0; font-size: 11.5px; line-height: 1.6; white-space: nowrap; }
.hist-sub .gbub { font-size: 11px; padding: 0 7px; color: var(--text); }
.hist-sub .hs-stay { color: var(--muted); }
.diff td .gbub { font-weight: 500; }
/* version-diff bubbles: a guest added between versions is green, a removed one
   is struck red, so a name change reads at a glance (unchanged stays neutral) */
.gbub-add { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.gbub-rm { border-color: var(--danger); color: var(--danger); text-decoration: line-through; }
/* per-room blocks in the version detail (a booking can hold several rooms) */
.rooms { margin-top: 8px; }
.rooms-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin: 4px 0 4px; }
.rm { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; background: var(--surface-2); }
.rm.rm-add { border-color: var(--ok); }
.rm.rm-rm { border-color: var(--danger); }
.rm-h { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.rm-g { display: flex; flex-wrap: wrap; gap: 4px; }
/* a changed scalar field inside a room header, shown inline as "old → new" */
.rm-h .chg { font-weight: 700; background: var(--accent-soft); border-radius: 6px; padding: 0 5px; }
.rm-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.rm-tag-add { color: var(--ok); }
.rm-tag-rm { color: var(--danger); }
.history-list { display: grid; gap: 10px; }
.hist-more { width: 100%; margin-top: 4px; }
/* booking-day section header (the "by booking day" overview) */
/* Day-overview separators: full-width title bars marking each day section. */
.hist-dayhead { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; padding: 11px 16px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-radius: var(--radius);
  border-left: 5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.hist-dayhead:first-child { margin-top: 4px; }
.hist-dayhead .dh-rel { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.hist-dayhead .dh-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-dayhead .dh-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-dayhead.today { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.hist-dayhead.today .dh-rel { color: var(--accent); }
.hist-dayhead.recent { border-left-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.hist-groupwrap { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.hist-groupwrap input { margin: 0; }

/* dossier (shared-Reference) grouping */
.doss-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.doss-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; font-weight: 700; }
.doss-head:hover { background: var(--surface); }
.doss-head .caret { color: var(--muted); transition: transform .15s; }
.doss-group.open .doss-head .caret { transform: rotate(90deg); }
.doss-ref { color: var(--accent); }
.doss-main { flex: 1; min-width: 0; }
.doss-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doss-meta .iconbtn { font-weight: 600; }
.doss-body { display: none; padding: 4px 10px 12px; }
.doss-group.open .doss-body { display: grid; gap: 8px; }
.hist-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hist-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; }
.hist-head:hover { background: var(--surface-2); }
.hist-head .caret { color: var(--muted); transition: transform .15s; flex-shrink: 0; }
.hist-card.open .hist-head .caret { transform: rotate(90deg); }
/* favorite star: hollow when off, gold when on */
.hist-fav { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 2px; flex-shrink: 0; transition: color .12s, transform .12s; }
.hist-fav:hover { color: #e8b923; transform: scale(1.15); }
.hist-fav.on { color: #e8b923; }
/* waitlist flag: hollow when off, purple when the booking is held back */
.hist-wait { background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); padding: 0 2px; flex-shrink: 0; transition: color .12s, transform .12s; }
.hist-wait:hover { color: var(--wait); transform: scale(1.15); }
.hist-wait.on { color: var(--wait); }
/* a held booking gets a faint purple wash so it stands out at a glance — laid
   OVER the surface as a translucent overlay so it works in both themes and does
   not fight the status border-left (unsent = amber, resend = red). */
.hist-card.wait { background-image: linear-gradient(rgba(139, 63, 214, .07), rgba(139, 63, 214, .07)); }
.hist-ref { font-weight: 700; font-variant-numeric: tabular-nums; }
.hist-main { min-width: 0; flex: 1; }
.hist-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-booked { color: var(--muted); font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hist-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hist-body { display: none; border-top: 1px solid var(--border); padding: 8px 16px 14px; }
.hist-card.open .hist-body { display: block; }

.timeline { position: relative; margin-left: 8px; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 10px 0; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.tl-item.k-cancel::before { background: var(--danger); }
.tl-item.k-new::before { background: var(--ok); }
.tl-item.k-mod::before { background: var(--update); }   /* was falling through to the brand red */
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-ts { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-src { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
/* version detail: booking table (left, ~half) + send log (right) side by side */
.tl-cols { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tl-body-col { flex: 1 1 340px; min-width: 0; }
.tl-body-col .diff { max-width: none; }
/* per-version send log: when + to whom this exact version was reported */
.tl-sends { flex: 1 1 300px; min-width: 240px; margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; background: rgba(26,127,82,.08); border: 1px solid rgba(26,127,82,.18); }
.tl-sends-h { font-size: 11px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.tl-sends ul { list-style: none; margin: 0; padding: 0; }
.tl-send { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; padding: 1px 0; }
.tl-send::before { content: "✉ "; color: var(--ok); }
.tl-send.manual { color: var(--muted); }
.tl-send.manual::before { content: "✓ "; color: var(--muted); }
/* The banner the mail carried, in that banner's own colour. Smaller than the
   pills in the send dialogs — it annotates a line, it does not head one. */
.tl-send-flair { font-size: 10px; padding: 0 6px; margin-left: 6px; vertical-align: baseline; }
.tl-send.extra { display: none; }
.tl-sends.show-all .tl-send.extra { display: list-item; }
.tl-sends-more { margin-top: 4px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; display: inline-block; }
.badge.k-new { background: rgba(26,127,82,.14); color: var(--ok); }
/* A changed version is not an alarm — it was red, which put it in the same
   visual bracket as a cancellation. Same blue as the Protokoll's tag. */
.badge.k-mod { background: rgba(37,99,235,.14); color: var(--update); }
.badge.k-cancel { background: rgba(192,57,43,.14); color: var(--danger); }
/* "gemeldet" (reported to the hotel) status shown on each Verlauf card */
.hist-sent-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.hist-sent-badge.sent { background: rgba(26,127,82,.14); color: var(--ok); }
.hist-sent-badge.open { background: rgba(214,158,46,.20); color: #a9740b; }
.hist-sent-badge.resend { background: rgba(192,57,43,.15); color: var(--danger); }
/* an un-reported booking is flagged with an amber left edge; a booking that
   changed after being sent (needs re-sending) gets a red edge — more urgent */
.hist-card.unsent { border-left: 3px solid #d69e2e; }
.hist-card.resend { border-left: 3px solid var(--danger); }
/* In the booking-day overview: a dossier member booked on a different day than
   its group's header — shown greyed for context, never removed. */
/* Off-day members stay passive — dimmed, default cursor, no hover reaction. */
.hist-card.off-day { opacity: .42; }
.hist-card.off-day .hist-head { cursor: default; }
.hist-card.off-day .hist-head:hover { background: transparent; }
/* arriving from a Protokoll "Im Verlauf zeigen": pulse the target card(s) */
.hist-card.flash { animation: histflash 2.6s ease-out 1; }
@keyframes histflash {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-color-scheme: dark) { .hist-sent-badge.open { color: #e6b74c; } }
.diff { margin-top: 8px; border-collapse: collapse; width: 100%; max-width: 640px; }
.diff th, .diff td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: top; }
.diff th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.diff .f { font-weight: 600; white-space: nowrap; }
.diff .old { color: var(--danger); text-decoration: line-through; }
.diff .new { color: var(--ok); font-weight: 600; }
.diff-note { margin-top: 6px; color: var(--muted); font-size: 12px; font-style: italic; }
.guestdiff .g-rem, .guestdiff .g-add { display: block; margin: 1px 0; font-weight: 600; }
.guestdiff .g-rem { color: var(--danger); }
.guestdiff .g-rem::before { content: "− "; }
.guestdiff .g-add { color: var(--ok); }
.guestdiff .g-add::before { content: "+ "; }

/* ---------- lock screen ---------- */
body.locked .topbar, body.locked main, body.locked .toast, body.locked .scroll-top { display: none !important; }
.lock { display: none; position: fixed; inset: 0; z-index: 100; background: transparent; }
body.locked .lock { display: grid; place-items: start center; padding-top: clamp(20px, 7vh, 78px); }
/* watercolor-style Mallorca scene behind the login card (login page only) */
.lock-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.lock-scene svg, .lock-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the login stays light/warm regardless of OS theme (the scene is a bright day) */
.lock-box { width: min(360px, 90vw); background: rgba(255, 255, 255, .92); color: #2b2620;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(70, 45, 20, .22); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 32px 28px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.lock-box .lock-logo { width: 58px; height: 58px; border-radius: 16px; overflow: hidden; margin: 0 auto;
  background: #f4ecd8; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 8px 20px rgba(70, 45, 20, .18); }
.lock-box .lock-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); display: block; }
.lock-box h1 { margin: 4px 0 0; font-size: 18px; letter-spacing: .6px; color: #2b2620; }
.lock-box p { margin: 0; color: #6b5f52; font-size: 13px; }
.lock-box input { padding: 10px 12px; border: 1px solid #e7dcc8; border-radius: 9px; background: #fff; color: #2b2620; font: inherit; text-align: center; }
.lock-sub { opacity: .7; }
.lock-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lock-box .btn { width: 100%; }
.lock-error { color: var(--danger) !important; font-weight: 600; }

/* modal dialog (send-by-email recipient) */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .45); }
.modal-box { width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.modal-box h3 { margin: 0 0 14px; font-size: 16px; }
.modal-box label { display: block; font-weight: 600; font-size: 13px; }
.modal-box input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; margin-top: 5px; }
.modal-box .btn-row { margin-top: 6px; }
.email-attach { font-size: 12px; margin: 10px 0; word-break: break-word; }
/* Wider than it was: the hotel lines carry a name, an address, the tags and now a
   preview button, and long hotel names had nowhere to go. */
.modal-box.modal-wide { width: min(760px, 94vw); }
/* The preview shows a real mail at something like its real width — narrower and
   the arrivals table wraps in a way no mail client would wrap it, which is the one
   thing this dialog must not do. */
.modal-box.modal-xwide { width: min(1040px, 96vw); max-height: 92vh; overflow-y: auto; }

/* Test-tab "what's new" recap */
.t-recap { margin-bottom: 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.t-recap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.t-recap-head h3 { margin: 0 0 2px; font-size: 16px; }
.t-recap-cards { display: grid; gap: 14px; }
.recap-card { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 18px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.recap-card.no-img { grid-template-columns: 1fr; }   /* text-only changelog entry */
.recap-img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: block;
  cursor: zoom-in; }
/* click-to-enlarge: the same image, near full-screen, on a dimmed backdrop */
.recap-zoom { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgba(15, 15, 20, .78); cursor: zoom-out; padding: 24px; }
.recap-zoom img { max-width: min(96vw, 1500px); max-height: 92vh; width: auto; height: auto;
  border-radius: 10px; background: #fff; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.recap-title { font-weight: 700; margin-bottom: 4px; }
.recap-text { color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) { .recap-card { grid-template-columns: 1fr; } }
/* bottom "kurz notiert" list — brief one-liners, no images */
.recap-more { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.recap-more-title { font-weight: 700; margin-bottom: 8px; font-size: 13.5px; }
.recap-more-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.recap-more-list li { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---- Help: in-app Wiki (collapsible reference) ---- */
.wiki-head-block { margin-bottom: 14px; }
.wiki-head-block h3 { margin: 0 0 2px; font-size: 16px; }
.wiki-body { display: grid; gap: 10px; }
.wiki-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.wiki-sechead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--text); text-align: left; }
.wiki-sechead:hover { background: var(--surface-2); }
.wiki-caret { color: var(--muted); font-size: 12px; transition: transform .15s; flex: none; }
.wiki-sec.open .wiki-caret { transform: rotate(90deg); }
.wiki-sectitle { min-width: 0; }
.wiki-secbody { display: none; padding: 2px 16px 14px 34px; }
.wiki-sec.open .wiki-secbody { display: block; }
.wiki-lead { color: var(--text); font-size: 13.5px; line-height: 1.5; margin: 4px 0 8px; }
.wiki-points { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.wiki-points li { color: var(--muted); font-size: 13px; line-height: 1.5; }
.wiki-group { margin-top: 11px; }
.wiki-group-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wiki-fixed-title { margin-top: 12px; margin-bottom: 5px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; color: var(--warn); }
.wiki-fixed-list li { color: color-mix(in srgb, var(--warn) 60%, var(--text)); }

/* "currently testing" mail switch banner (amber = active/rerouted, red = blocked) */
.test-banner { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(217,119,6,.12); color: #b45309; border: 1px solid rgba(217,119,6,.35); word-break: break-word; }
.test-banner.block { background: rgba(192,57,43,.12); color: var(--danger); border-color: rgba(192,57,43,.4); }

/* flair selector (New / Update / Roaming) */
.flair-field { margin: 12px 0 4px; }
.flair-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.flair-choice { display: flex; gap: 6px; flex-wrap: wrap; }
.flair-choice label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.flair-choice input { width: auto; margin: 0; }
.flair-choice label:has(input:checked) { border-color: var(--accent); background: rgba(37,99,235,.10); color: var(--accent); }
/* Cancel is a Stornierung, not a colour tag — flag it red when picked */
.flair-choice label.flair-cancel:has(input:checked) { border-color: var(--danger); background: rgba(192,57,43,.10); color: var(--danger); }
/* preview of what "Automatic" resolves to, shown under the flair choices */
.flair-auto { margin-top: 7px; font-size: 12px; }

/* batch mail-out modal */
/* align-items: flex-start keeps the gear its natural compact size (like Start's)
   and level with the title line, instead of stretching it to the button height. */
.hist-head-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; flex: 0 0 auto; }
/* Keep the Verlauf header actions (incl. the gear) on the title line in every
   language: let the longer German title/subtitle shrink instead of dropping the
   whole button row below it (which left the gear off the title line). */
#tab-history .section-head { flex-wrap: nowrap; }
#tab-history .section-head > div:first-child { min-width: 0; }
/* Verlauf gear panel (reuses .start-gear / .start-settings) */
/* The Start board's own checkbox row, beside its day thresholds. Same shape as
   the Verlauf gear's, which it sits next to in spirit if not in the DOM. */
.start-optrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer; margin-top: 2px; }
.start-optrow input { width: 16px; height: 16px; cursor: pointer; flex: none; }
/* A JSON document to read, not to skim: monospaced, scrolling in both
   directions (long lines must not wrap into soup), and tall enough to be worth
   opening. */
.json-view { max-height: 60vh; overflow: auto; margin: 8px 0 4px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; white-space: pre; color: var(--text); }
.json-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hist-optrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.hist-optrow input { width: 16px; height: 16px; cursor: pointer; }
.hist-optrow.disabled { opacity: .5; cursor: default; }
.hist-optrow.disabled input { cursor: default; }
.hist-opt-hint { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.batch-summary { margin: 12px 0; font-size: 13px; }
.batch-counts { font-size: 14px; }
.batch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#email-summary { margin: 10px 0 4px; }
.batch-counts strong { font-size: 16px; }
.batch-warn { color: var(--danger); font-weight: 600; font-size: 12px; margin-top: 6px; }
.batch-wait { color: var(--wait); font-weight: 600; font-size: 12px; margin-top: 6px; }
/* ---- the mail preview: one mail at a time, switched at the top ---- */
.modal-box.modal-xwide { position: relative; }
.mp-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.mp-x:hover { border-color: var(--accent); color: var(--accent); }
#mp-title { padding-right: 40px; }
/* Both switches on one line: which mail on the left, which half of it on the
   right, so neither reads as a heading for the other. */
.mp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 10px; }
.mp-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface-2); }
.mp-switch.mp-views { margin-left: auto; }
.mp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0;
  border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-tab:hover { color: var(--text); }
.mp-tab.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.mp-tab .tag { margin: 0; }
.mp-list { margin: 0 0 4px; }
.mp-field { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 2px 0; }
.mp-field > span:first-child { color: var(--muted); min-width: 74px; flex: none; }
.mp-field b { word-break: break-word; }
.mp-view { margin-top: 10px; }
.mp-part-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; }
.mp-open { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent); }
/* The mail's own document, on its own white ground — a mail client gives it no
   more and no less. A dark app theme must not tint it: nobody receives it tinted. */
.mp-html { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.mp-pdf { width: 100%; height: 620px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.mp-nopdf { font-size: 12px; color: var(--danger); font-weight: 600; }
.mp-att { margin-top: 10px; font-size: 12px; color: var(--muted); word-break: break-word; }
.batch-hotels { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
/* Where the rows sit inside the summary rather than in their own box (the Vorgang
   and single-booking dialogs), the list still needs its gap from the counts. */
.batch-summary .batch-hotels { margin-top: 8px; }
.batch-summary .batch-hotels:empty { display: none; }
.batch-hotel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.batch-hotel:last-child { border-bottom: 0; }
.batch-hotel .bh-name { flex: 1; font-weight: 600; }
.batch-hotel .bh-to { color: var(--muted); word-break: break-all; }
/* The tick that takes a hotel out of this send. First on the line, where a list
   of things to include is read from. */
.batch-hotel .bh-pick { display: inline-flex; align-items: center; flex: none; margin: 0; }
.batch-hotel .bh-pick input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
/* Taken out: still listed, plainly not going. Struck through rather than hidden,
   so the row can be put back and the count above explains itself. */
.batch-hotel.dropped { opacity: .5; }
.batch-hotel.dropped .bh-name { text-decoration: line-through; }
.batch-hotel.dropped .bh-to { font-style: italic; }
/* Pushed to the end of the line, away from the tags it must not read as one of. */
.batch-hotel .bh-preview { margin-left: auto; flex: none; }
.batch-hotel.norecip { background: rgba(192,57,43,.06); }
.batch-hotel.norecip .bh-to { color: var(--danger); font-weight: 600; }
/* No rule of its own for the single-send dialog any more: its rows used to be
   framed one by one because they had no list around them, and that is precisely
   what made the same information look like two different things in two places.
   One row, one look, wherever it is shown. */

/* ---------- re-read an FTP file ---------- */
#reimport-search { width: 100%; margin: 8px 0; }
.reimport-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.reimport-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.reimport-row:last-child { border-bottom: 0; }
.reimport-name { flex: 1; font-weight: 600; word-break: break-all; }
.reimport-meta { white-space: nowrap; }

.dup-row { align-items: flex-start; }
.dup-times { margin: 4px 0 0; padding-left: 16px; font-size: 11px; }
.dup-times li { margin: 1px 0; }

/* live report for the "re-import all FTP files" full scan */
.rescan-status { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 6px 0; }
.rescan-spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent, #4a90d9);
  border-radius: 50%; display: inline-block; animation: rescan-spin 0.7s linear infinite; }
@keyframes rescan-spin { to { transform: rotate(360deg); } }
/* The warning before something is destroyed for everyone. Deliberately unlike
   the rest of the app: black, a red mark, and the consequences spelled out — a
   grey dialog reading "are you sure?" is skimmed and clicked through. */
.danger-modal { background: rgba(0, 0, 0, 0.72); }
.danger-box {
  background: #0b0b0d; color: #f4f4f5; border: 2px solid #e0221f;
  border-radius: 12px; max-width: 560px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}
.danger-mark {
  font-size: 62px; line-height: 1; color: #ff3b30;
  text-shadow: 0 0 24px rgba(224, 34, 31, 0.55); margin: 4px 0 10px;
}
.danger-title {
  margin: 0 0 8px; font-size: 21px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.danger-lead { margin: 0 0 12px; font-size: 14px; color: #f0d5d4; }
.danger-list {
  list-style: none; margin: 0 auto 14px; padding: 12px 14px; max-width: 460px;
  text-align: left; font-size: 13px; background: #17171a;
  border: 1px solid #3a1112; border-radius: 8px;
}
.danger-list li { padding: 4px 0 4px 20px; position: relative; color: #ededf0; }
.danger-list li::before { content: '✖'; position: absolute; left: 0; color: #ff3b30; font-size: 11px; }
.danger-final { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: #ffb4b0; }
.danger-row { justify-content: center; gap: 12px; }
/* The safe way out is the prominent one; the destructive one is plain and has to
   be aimed at deliberately. */
.danger-keep { background: #f4f4f5; color: #111; border-color: #f4f4f5; font-weight: 700; min-width: 140px; }
.danger-go {
  background: transparent; color: #ff6b63; border: 1px solid #e0221f; min-width: 140px;
}
.danger-go:hover { background: #e0221f; color: #fff; }

.rescan-progress { margin: 8px 0 12px; }
.rescan-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rescan-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent, #ee263b); transition: width 0.3s ease; }
/* Files claimed and being worked on right now: the bar's leading edge is striped
   and moving, so a batch that takes a minute reads as work rather than a stall. */
.rescan-bar-fill.working {
  background-image: linear-gradient(90deg, rgba(255,255,255,.35) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%);
  background-size: 18px 18px;
  animation: rescan-stripes 0.9s linear infinite;
}
@keyframes rescan-stripes { from { background-position: 0 0; } to { background-position: 18px 0; } }
@media (prefers-reduced-motion: reduce) { .rescan-bar-fill.working { animation: none; } }
.rescan-prow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5px; }
.rescan-count { font-size: 12px; font-weight: 600; }
.rescan-current { margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rescan-summary { list-style: none; margin: 4px 0 10px; padding: 0; font-size: 12px; }
.rescan-summary li { padding: 2px 0; }
.rescan-summary li.ok { color: var(--ok, #2e7d32); font-weight: 600; }
.rescan-summary li.warn { color: var(--warn, #b26a00); font-weight: 600; }
.rescan-list { max-height: 300px; }
.rescan-ico { width: 16px; text-align: center; font-weight: 700; }
.rescan-row.imported .rescan-ico { color: var(--ok, #2e7d32); }
.rescan-row.uploading .rescan-ico { color: var(--warn, #b26a00); }
.rescan-row.known .rescan-ico, .rescan-row.duplicate .rescan-ico { color: var(--muted, #8a8a8a); }
.rescan-row.imported .reimport-name { font-weight: 700; }
.rescan-row.known, .rescan-row.duplicate { opacity: 0.72; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 600; z-index: 50; }

/* ---------- scroll-to-top ---------- */
.scroll-top {
  position: fixed; bottom: 22px; right: 22px; z-index: 40;
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 22px; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, background .12s;
}
.scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: var(--surface-2); transform: translateY(-2px); }

/* ---------- Test / Vergleich ---------- */
.t-controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.t-pick { display: block; font-weight: 600; font-size: 13px; }
.t-pick select { display: block; width: min(560px, 100%); margin-top: 5px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.t-casenote { margin: 8px 0 0; max-width: 720px; }
.t-own { margin-top: 12px; }
.t-own summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 13px; }
.t-own textarea.xml-out { width: 100%; min-height: 130px; margin-top: 8px; }
.t-controls .btn-row { margin-top: 14px; }

.t-result { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.t-verdict { padding: 12px 16px; border-radius: 10px; font-weight: 700; border: 1px solid var(--border); }
.t-verdict.v-ok { background: rgba(26, 127, 82, .12); border-color: rgba(26, 127, 82, .4); color: var(--ok); }
.t-verdict.v-diff { background: rgba(192, 57, 43, .12); border-color: rgba(192, 57, 43, .4); color: var(--danger); }
.t-verdict.v-info { background: var(--surface-2); color: var(--muted); }

.t-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; box-shadow: var(--shadow); }
.t-block legend { font-weight: 700; padding: 0 8px; }
.t-scroll { overflow-x: auto; margin-top: 8px; }

.t-cmp { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.t-cmp th, .t-cmp td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
.t-cmp thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.t-cmp .rownum, .t-cmp .t-dim { font-weight: 700; white-space: nowrap; }
.t-cmp td.cell-ok { background: rgba(26, 127, 82, .10); }
.t-cmp td.cell-diff { background: rgba(192, 57, 43, .14); color: var(--danger); font-weight: 600; }
.t-cmp td.cell-info { background: rgba(217, 145, 20, .14); color: #a9670a; }
.t-cmp td.cell-diff small { display: block; font-weight: 400; color: var(--danger); opacity: .8; }
.t-cmp-dims td:nth-child(2), .t-cmp-dims td:nth-child(3) { max-width: 340px; }

.t-genxml { margin-top: 14px; }
.t-genxml-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.t-xmlout { margin: 0; max-height: 320px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre; }

.t-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .t-panels { grid-template-columns: 1fr; } }
.t-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.t-pdf { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.t-astronote { display: grid; place-items: center; min-height: 200px; text-align: center; margin: 0; padding: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }

@media (prefers-color-scheme: dark) {
  .t-cmp td.cell-info { color: #e0a944; }
}

/* ---- Help: sub-tabs + room-code reference ---- */
.help-subtabs { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.help-subtab { border: 0; background: none; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.help-subtab:hover { color: var(--text); }
.help-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================ Start / welcome board ============================ */
.start-window { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.start-window select { font: inherit; font-weight: 600; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.start-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.start-open { font-size: 18px; font-weight: 800; color: var(--text); }
.start-doneN { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.start-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.start-chips .sc { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.sc-new { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-change { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.sc-cancel { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.start-list { display: flex; flex-direction: column; gap: 10px; }
.start-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-weight: 600;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); }

.start-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 5px; border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color .12s, transform .06s; }
.start-item:hover { transform: translateY(-1px); }
.start-item.need-new    { border-left-color: var(--accent); }
.start-item.need-change { border-left-color: var(--warn); }
.start-item.need-cancel { border-left-color: var(--danger); }
.start-item.need-done   { border-left-color: var(--border); }

.si-main { flex: 1 1 auto; min-width: 0; }
.si-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.si-badge { font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.si-badge.b-new    { color: #fff; background: var(--accent); }
.si-badge.b-change { color: #3a2a06; background: var(--warn); }
.si-badge.b-cancel { color: #fff; background: var(--danger); }
.si-badge.b-done   { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.si-ref { font-weight: 800; }
.si-hotel { font-weight: 600; color: var(--text); }
.si-arr { color: var(--muted); font-size: 13px; }
.si-arr .si-date { opacity: .8; }
/* divider between the arrival date and how far off it is — both are bold, so the
   separator is muted to keep them apart without competing with either */
.si-arr .si-sep { opacity: .45; margin: 0 7px; font-weight: 400; }
.si-noarr { font-style: italic; }
.si-sub { display: flex; align-items: baseline; gap: 12px; margin-top: 5px; flex-wrap: wrap; }
.si-need { font-weight: 700; color: var(--accent); }
.start-item.need-change .si-need { color: var(--warn); }
.start-item.need-cancel .si-need { color: var(--danger); }
.si-size { color: var(--muted); font-size: 12.5px; }

.si-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.start-item.done { opacity: .62; background: var(--surface-2); box-shadow: none; }
.start-item.done .si-ref, .start-item.done .si-hotel, .start-item.done .si-arr { text-decoration: line-through; }
.start-item.done:hover { transform: none; }
/* Done by other means (e.g. sent from the Verlauf) this session: a pastel-green
   card that stays in its bucket until the user files it with "Erledigt". */
.start-item.green { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border-left-color: var(--ok); }

@media (max-width: 640px) {
  .start-item { flex-direction: column; align-items: stretch; }
  .si-actions { justify-content: flex-start; }
  .start-doneN { margin-left: 0; }
}

/* ---- Start board: arrival-timeline rework (sections, thresholds, categories) ---- */
.start-controls { position: relative; display: flex; align-items: center; gap: 16px; }
.start-thr { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.start-thr input { width: 54px; font: inherit; font-weight: 700; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center; }
.start-thr .unit { font-weight: 500; }

/* the rarely-touched board settings tuck behind a little gear on the right */
.start-gear { border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 6px 9px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--text); }
.start-gear:hover { background: var(--surface-2); }
.start-gear[aria-expanded="true"] { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.start-settings { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  box-shadow: 0 16px 44px rgba(0,0,0,.20); min-width: 232px; max-width: min(300px, 88vw); }
.start-settings-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.start-settings-actions { display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); }

.start-sechead { display: flex; align-items: center; gap: 10px; margin: 20px 2px 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.start-list > .start-sechead:first-child { margin-top: 2px; }
.start-sechead .sh-label { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.start-sechead .sh-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
.start-sechead.sec-cancel .sh-label { color: var(--danger); }
.start-sechead.sec-send   .sh-label { color: var(--accent); }
.start-sechead.sec-resend .sh-label,
.start-sechead.sec-review .sh-label { color: var(--warn); }
.start-sechead.sec-hold   .sh-label { color: var(--wait); }

/* category left rails */
.start-item.cat-cancel { border-left-color: var(--danger); }
.start-item.cat-send   { border-left-color: var(--accent); }
.start-item.cat-resend { border-left-color: var(--warn); }
.start-item.cat-review { border-left-color: var(--warn); }
.start-item.cat-hold   { border-left-color: var(--wait); }
.start-item.cat-new    { border-left-color: var(--accent); }
.start-item.cat-done   { border-left-color: var(--border); }

/* category badges (override the shared b-* rules above via source order) */
.si-badge.b-cancel { color: #fff; background: var(--danger); }
.si-badge.b-send   { color: #fff; background: var(--accent); }
.si-badge.b-resend { color: #3a2a06; background: var(--warn); }
.si-badge.b-review { color: #3a2a06; background: color-mix(in srgb, var(--warn) 72%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.si-badge.b-hold   { color: #fff; background: var(--wait); }
.si-badge.b-new    { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.si-badge.b-done   { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }

/* need-line accent per category */
.start-item.cat-cancel .si-need { color: var(--danger); }
.start-item.cat-send   .si-need { color: var(--accent); }
.start-item.cat-resend .si-need,
.start-item.cat-review .si-need { color: var(--warn); }
.start-item.cat-hold   .si-need { color: var(--wait); }
.start-item.cat-new    .si-need { color: var(--accent); }

@media (max-width: 640px) {
  .start-controls { gap: 10px; }
}

/* ---- Start board: celebration ("juice") when crossing items off ---- */
.start-mute { border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 6px 9px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--text); }
.start-mute:hover { background: var(--surface-2); }
.start-mute.muted { opacity: .55; }

.start-open { display: inline-block; }   /* so the drop-pulse can scale it */
.start-open.bump { animation: celCountBump .5s ease-out; }
@keyframes celCountBump {
  0% { transform: scale(1); } 35% { transform: scale(1.35); color: var(--ok); } 100% { transform: scale(1); }
}

.celebrate-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

.celebrate-float { position: fixed; z-index: 10000; transform: translate(-50%, -50%); pointer-events: none;
  font-weight: 800; font-size: 18px; color: var(--ok); text-shadow: 0 1px 3px rgba(0,0,0,.28);
  animation: celFloat 1.15s ease-out forwards; }
.celebrate-float.combo { font-size: 22px; color: var(--accent); }
@keyframes celFloat {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  15%  { opacity: 1; transform: translate(-50%, -62%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -185%) scale(1); }
}

.celebrate-ring { position: fixed; z-index: 9998; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 3px solid var(--ok); pointer-events: none; animation: celRing .62s ease-out forwards; }
@keyframes celRing { 0% { opacity: .8; transform: scale(.3); } 100% { opacity: 0; transform: scale(4.6); } }

.celebrate-banner { position: fixed; z-index: 10001; left: 50%; top: 36%; transform: translate(-50%, -50%);
  padding: 15px 30px; border-radius: 999px; pointer-events: none; max-width: 90vw; text-align: center;
  background: linear-gradient(135deg, var(--accent), #ff8a3d); color: #fff; font-weight: 800;
  font-size: clamp(20px, 5vw, 27px); letter-spacing: .3px; box-shadow: 0 14px 44px rgba(0,0,0,.3);
  animation: celBannerIn .5s cubic-bezier(.2,1.3,.4,1) both; }
.celebrate-banner.out { animation: celBannerOut .7s ease-in forwards; }
@keyframes celBannerIn  { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes celBannerOut { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-120%) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .celebrate-float, .celebrate-ring, .start-open.bump { animation-duration: .01ms !important; }
  .celebrate-banner { animation-duration: .01ms !important; }
}

.start-reset { border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 6px 11px; font: inherit; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.start-reset:hover { border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }

/* ---- Warteliste (waiting list) tab ---- */
.wait-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wait-sortwrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.wait-sortwrap select { font: inherit; font-weight: 600; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.wait-list { display: flex; flex-direction: column; gap: 12px; }
.wait-item { border: 1px solid var(--border); border-left: 4px solid var(--wait); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px; }
.wi-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.wi-ref { font-weight: 800; }
.wi-hotel { font-weight: 600; }
.wi-arr, .wi-size { font-size: 13px; color: var(--muted); }
.wi-body { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.wi-note { flex: 1 1 260px; min-width: 220px; font: inherit; font-size: 13px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); resize: vertical; }
.wi-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.si-booked { color: var(--muted); font-size: 12.5px; }

.wait-item.flash { animation: histflash 2.6s ease-out 1; }

.start-mood { display: inline-flex; align-items: center; }
.mood-face { display: block; }

/* The website the hotel sync sent where an address was expected — shown with the
   location line, deliberately nowhere near the address inputs. */
.hm-web { margin-top: 4px; word-break: break-all; }
.hotel-mail-row.is-notus:not(.expanded) .hm-web { display: none; }

/* The "only hotels without an address" toggle in the Hotels toolbar. It sits
   pressed while it is on, so the filtered view never looks like the whole list. */
#hotelOnlyMissing { flex: 0 0 auto; white-space: nowrap; }
#hotelOnlyMissing[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* "E-Mails aus dem Service holen": what it would add, before it is written. */
.adopt-list { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.adopt-row { display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: 10px; align-items: baseline;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 8px 10px; }
.adopt-hotel { font-weight: 700; }
.adopt-mails { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
@media (max-width: 700px) { .adopt-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---- Graph: arrivals, when and where -------------------------------------
   The charts are drawn in SVG by graph.js; everything here is the frame around
   them. Bars carry their own colour inline (the series palette lives with the
   drawing, not with the theme), so nothing below names a series hue. */
.gx-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.gx-range { display: flex; align-items: center; gap: 8px; }
.gx-range input[type="date"] { width: auto; }
.gx-quick { display: flex; gap: 6px; }
.gx-note { color: var(--warn); font-size: 12.5px; font-weight: 600; }

.gx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px; }
.gx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; }
.gx-stat b { display: block; font-size: 26px; line-height: 1.1; color: var(--text); }
.gx-stat span { color: var(--muted); font-size: 12.5px; }
.gx-stat.warn b { color: var(--warn); }

.gx-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.gx-card { padding: 14px 16px; }
.gx-card h3 { margin: 0 0 10px; font-size: 14px; }
.gx-wide { grid-column: 1 / -1; }
/* Scaled uniformly — a stretched viewBox stretches the labels with it. */
.gx-svg { width: 100%; height: auto; display: block; }
.gx-donut { width: 168px; height: 168px; flex: none; }
.gx-donutwrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Every slice's number is written out beside it: three of the series hues sit
   below 3:1 on white, so colour is never the only way to read the chart. */
.gx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-width: 150px; }
.gx-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gx-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gx-lname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-lval { font-variant-numeric: tabular-nums; }

.gx-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.gx-rank li { display: grid; grid-template-columns: minmax(90px, 1.4fr) 3fr auto auto;
  align-items: center; gap: 10px; font-size: 13px; }
.gx-rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-rbar { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.gx-rbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.gx-rval { font-weight: 700; font-variant-numeric: tabular-nums; }
.gx-rsub { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }

.gx-listhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.gx-listhead h3 { margin: 0; font-size: 14px; }
.gx-table { font-size: 13px; }
.gx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gx-table .gbub { margin: 1px 3px 1px 0; }
.gx-note-cell { max-width: 220px; }
.gx-ref { font-weight: 700; font-variant-numeric: tabular-nums; }
.gx-sent { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; }
.gx-sent.ok { background: rgba(26,127,82,.12); color: var(--ok); }
.gx-sent.open { background: var(--accent-soft); color: var(--accent); }
.gx-sent.resend { background: rgba(185,121,26,.14); color: var(--warn); }
.gx-sent.nomail { background: var(--surface-2); color: var(--muted); }
.gx-wait { color: var(--wait); font-weight: 700; }

@media (max-width: 900px) {
  .gx-charts { grid-template-columns: 1fr; }
}