/* Spots · Tafel (C.5) mit Länder-Themes (Anhang 2). Werte je Theme als Variablen. */

.board {
  --b-font: var(--font); --b-leg-font: var(--font); --b-track: -0.01em;
  --b-date-size: 30px; --b-date-weight: 700;
  --b-time-size: 22px; --b-time-weight: 700;
  --b-name-size: 17px; --b-name-weight: 600;
  --b-area-size: 14px; --b-status-size: 14px; --b-foot-size: 14px; --b-leg-size: 14px;
  --b-cols: 64px minmax(0, 1fr);
  --b-warn-pad: 0; --b-warn-bg: transparent;
  --b-res-bg: transparent; --b-res-pad: 0; --b-res-w: 700;

  /* neutral, Tag */
  --b-bg: #FFFFFF; --b-fg: #1C1C1E; --b-dim: #66666B; --b-faint: #B4B4B9; --b-area: #66666B; --b-time: #1C1C1E;
  --b-line: #E6E6E8; --b-rule: #1C1C1E; --b-foot: #66666B;
  --b-leg-fg: #66666B; --b-leg-line: #C4C4C8; --b-seg-bd: #D0D0D4; --b-seg-on-bg: #1C1C1E; --b-seg-on-fg: #FFFFFF; --b-seg-off-fg: #66666B;
  --b-hotel-bg: #F6F6F7; --b-warn-fg: #DA3329; --b-res-fg: #DA3329; --b-open: #1C1C1E; --b-done: #85858A; --b-status-w: 500;
  --b-now: #DA3329;

  display: flex;
  flex-direction: column;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--b-font);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .board[data-board="neutral"] {
  --b-bg: #1F2023; --b-fg: #EDEDF0; --b-dim: #A3A4AA; --b-faint: #6A6B71; --b-area: #A3A4AA; --b-time: #EDEDF0;
  --b-line: #36383D; --b-rule: #6A6B71; --b-foot: #A3A4AA;
  --b-leg-fg: #A3A4AA; --b-leg-line: #55575D; --b-seg-bd: #55575D; --b-seg-on-bg: #EDEDF0; --b-seg-on-fg: #1F2023; --b-seg-off-fg: #A3A4AA;
  --b-hotel-bg: #26282B; --b-warn-fg: #FF5A50; --b-res-fg: #FF5A50; --b-open: #EDEDF0; --b-done: #85868C; --b-now: #FF5A50;
}
.board[data-board="uk"] {
  --b-bg: #141414; --b-fg: #FFB31F; --b-dim: #B98415; --b-faint: #6E4E0E; --b-area: #D99A1C; --b-time: #FFB31F;
  --b-line: #2A2A2A; --b-rule: #3A3A3A; --b-foot: #FFB31F;
  --b-font: 'Doto', ui-monospace, monospace; --b-leg-font: 'Doto', ui-monospace, monospace; --b-track: 0.02em;
  --b-date-weight: 800; --b-time-weight: 800; --b-name-size: 20px; --b-name-weight: 800;
  --b-area-size: 15px; --b-status-size: 15px; --b-foot-size: 15px; --b-leg-size: 15px; --b-cols: 78px minmax(0, 1fr);
  --b-leg-fg: #D99A1C; --b-leg-line: #6E4E0E; --b-seg-bd: #6E4E0E; --b-seg-on-bg: #FFB31F; --b-seg-on-fg: #141414; --b-seg-off-fg: #D99A1C;
  --b-hotel-bg: #1C1A14; --b-warn-fg: #141414; --b-warn-bg: #FFB31F; --b-warn-pad: 2px 7px;
  --b-res-bg: #FFB31F; --b-res-fg: #141414; --b-res-w: 800; --b-res-pad: 1px 6px; --b-open: #FFB31F; --b-done: #FFB31F; --b-status-w: 700;
  --b-now: #FFB31F;
}
.board[data-board="ch"] {
  --b-bg: #1D3160; --b-fg: #FFFFFF; --b-dim: #B7C2DD; --b-faint: #5D6E97; --b-area: #C9D2E7; --b-time: #FFFFFF;
  --b-line: #34497A; --b-rule: #FFFFFF; --b-foot: #C9D2E7;
  --b-time-size: 24px; --b-name-size: 18px; --b-cols: 66px minmax(0, 1fr);
  --b-leg-fg: #C9D2E7; --b-leg-line: #5D6E97; --b-seg-bd: #5D6E97; --b-seg-on-bg: #FFFFFF; --b-seg-on-fg: #1D3160; --b-seg-off-fg: #C9D2E7;
  --b-hotel-bg: transparent; --b-warn-fg: #FFFFFF;
  --b-res-bg: #FFFFFF; --b-res-fg: #1D3160; --b-res-pad: 1px 7px; --b-open: #FFFFFF; --b-done: #C9D2E7;
  --b-now: #FFFFFF;
}
.board[data-board="fr"] {
  --b-bg: #1E1F22; --b-fg: #F4F4F6; --b-dim: #A2A3A9; --b-faint: #55565B; --b-area: #B7B8BD; --b-time: #FFC94A;
  --b-line: #303136; --b-rule: #46474D; --b-foot: #B7B8BD;
  --b-font: 'Barlow Condensed', var(--font); --b-track: 0.02em;
  --b-date-size: 32px; --b-date-weight: 600; --b-time-weight: 600; --b-name-size: 20px;
  --b-area-size: 16px; --b-status-size: 16px; --b-foot-size: 16px; --b-cols: 73px minmax(0, 1fr);
  --b-leg-fg: #B7B8BD; --b-leg-line: #55565B; --b-seg-bd: #55565B; --b-seg-on-bg: #F4F4F6; --b-seg-on-fg: #1E1F22; --b-seg-off-fg: #B7B8BD;
  --b-hotel-bg: transparent; --b-warn-fg: #FFC94A; --b-res-fg: #FFC94A; --b-res-w: 600; --b-open: #F4F4F6; --b-done: #A2A3A9;
  --b-now: #FFC94A;
}
.board[data-board="jp"] {
  --b-bg: #101012; --b-fg: #F2F2F2; --b-dim: #8E8E94; --b-faint: #4A4A50; --b-area: #74E07C; --b-time: #FF9B30;
  --b-line: #26262A; --b-rule: #3A3A40; --b-foot: #FF9B30;
  --b-font: 'Bitcount Prop Single', ui-monospace, monospace; --b-track: 0.01em;
  --b-date-size: 28px; --b-date-weight: 500; --b-time-weight: 500; --b-name-size: 18px; --b-name-weight: 500;
  --b-area-size: 15px; --b-status-size: 15px; --b-foot-size: 15px; --b-cols: 66px minmax(0, 1fr);
  --b-leg-fg: #8E8E94; --b-leg-line: #4A4A50; --b-seg-bd: #4A4A50; --b-seg-on-bg: #F2F2F2; --b-seg-on-fg: #101012; --b-seg-off-fg: #8E8E94;
  --b-hotel-bg: transparent; --b-warn-fg: #FF5B4F; --b-res-fg: #FF5B4F; --b-res-w: 500; --b-open: #F2F2F2; --b-done: #8E8E94;
  --b-now: #FF5B4F;
}

.b-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 20px 12px; }
.b-date { font-size: var(--b-date-size); font-weight: var(--b-date-weight); line-height: 1; letter-spacing: var(--b-track); }
.b-place { text-align: right; font-size: 14px; line-height: 1.3; color: var(--b-dim); font-family: var(--font); }

.b-cols {
  display: grid; grid-template-columns: var(--b-cols); column-gap: 10px;
  padding: 8px 20px 6px;
  font-family: var(--font); font-size: 12px; color: var(--b-dim);
  border-bottom: 1px solid var(--b-rule);
}
.b-cols > span:last-child { display: flex; justify-content: space-between; }

.b-row {
  display: grid; grid-template-columns: var(--b-cols); column-gap: 10px;
  padding: 11px 20px 10px;
  border-bottom: 1px solid var(--b-line);
  align-items: start;
}
.b-row.hotel { align-items: center; padding: 12px 20px; background: var(--b-hotel-bg); }
.b-row.done { opacity: .4; }
.b-time { font-size: var(--b-time-size); font-weight: var(--b-time-weight); line-height: 26px; color: var(--b-time); letter-spacing: var(--b-track); }
.b-time.faint { color: var(--b-faint); }
.b-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; }
.b-name {
  font-size: var(--b-name-size); font-weight: var(--b-name-weight); line-height: 1.2; color: var(--b-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
button.b-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.b-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.b-area {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--b-area-size); color: var(--b-area);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b-status {
  flex-shrink: 0; min-height: 28px; border-radius: 3px;
  font-family: inherit; font-size: var(--b-status-size); font-weight: var(--b-status-w); color: var(--b-open);
}
.b-status.reserved { background: var(--b-res-bg); color: var(--b-res-fg); font-weight: var(--b-res-w); padding: var(--b-res-pad); }
.b-status.done { color: var(--b-done); }
.b-hotel-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.b-hotel-name > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.b-hotel-name .b-name { font-size: var(--b-name-size); }
.b-note { flex-shrink: 0; font-size: var(--b-status-size); color: var(--b-dim); }

/* Abschnitt zwischen zwei Zeilen */
.b-leg { padding: 8px 20px 10px; font-family: var(--b-leg-font); }
.b-leg-line { position: relative; display: flex; justify-content: center; align-self: stretch; min-height: 54px; }
.b-leg-line::before { content: ''; position: absolute; top: -8px; bottom: -10px; left: 50%; border-left: 2px dotted var(--b-leg-line); }
.b-leg-line span { position: relative; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--b-bg); color: var(--b-leg-fg); }
.b-leg-text { font-size: var(--b-leg-size); line-height: 1.35; color: var(--b-leg-fg); overflow-wrap: anywhere; }
.b-leg-text.faint { color: var(--b-faint); }
.b-leg-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-seg { display: flex; border: 1px solid var(--b-seg-bd); border-radius: 6px; }
.b-seg button:first-child { border-radius: 5px 0 0 5px; }
.b-seg button:last-child { border-radius: 0 5px 5px 0; }
.b-seg button {
  height: 30px; padding: 0 10px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--b-seg-off-fg);
}
.b-seg button + button { border-left: 1px solid var(--b-seg-bd); }
.b-seg button[aria-pressed="true"] { background: var(--b-seg-on-bg); color: var(--b-seg-on-fg); }
.b-ext {
  height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border: 1px solid var(--b-fg); border-radius: 6px; color: var(--b-fg);
  font-family: var(--font); font-size: 13px; font-weight: 700; text-decoration: none;
}
.b-warn {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  padding: var(--b-warn-pad); border-radius: 3px; background: var(--b-warn-bg); color: var(--b-warn-fg);
  font-family: var(--font); font-size: 14px; font-weight: 700;
}
.b-warn::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.b-hint {
  align-self: flex-start; min-height: 28px;
  color: var(--b-leg-fg); font-family: var(--font); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Irgendwann heute */
.b-later-head {
  padding: 22px 20px 8px; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--b-rule);
}
.b-later-head strong { font-size: var(--b-name-size); font-weight: var(--b-date-weight); }
.b-later-head span { font-family: var(--font); font-size: 13px; color: var(--b-dim); }
.b-later .b-row { align-items: center; padding: 10px 20px; }
.b-later .b-row.dragging { background: var(--b-line); }
.b-later-main { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.b-handle {
  width: 32px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--b-dim); cursor: grab; touch-action: none;
}
.b-foot { padding: 14px 20px 18px; font-size: var(--b-foot-size); color: var(--b-foot); }
.b-notice { padding: 10px 20px 0; font-family: var(--font); font-size: 13px; color: var(--b-dim); }
.b-empty { padding: 18px 20px; font-family: var(--font); font-size: 15px; color: var(--b-dim); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Jetzt-Linie */
.b-now { position: relative; height: 0; }
.b-now::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px solid var(--b-now); }
.b-now span {
  position: absolute; left: 20px; top: -10px; padding: 0 4px;
  background: var(--b-bg); color: var(--b-now);
  font-family: var(--font); font-size: 13px; font-weight: 700;
}

/* Japan: farbige Kategorie-Marken */
.b-badge { flex-shrink: 0; padding: 2px 5px; border-radius: 3px; color: #111113; font-family: var(--font); font-size: 11px; font-weight: 700; }

/* Frankreich: Fallblatt-Zellen */
.flap { display: flex; gap: 2px; }
.flap span {
  position: relative; width: 13px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #303136; border-radius: 2px;
  font-size: 19px; font-weight: 600; color: #F4F4F6;
}
.flap.time span { color: #FFC94A; }
.flap span::after { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: #1E1F22; }
.b-refresh {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--b-line); border-radius: 6px; color: var(--b-fg);
}

/* Platzhalter-Zeilen (laden, leer) */
.b-skel .b-time { color: var(--b-faint); }
.b-skel i { display: block; height: 12px; border-radius: 2px; background: var(--b-line); animation: pulse 1.4s ease-in-out infinite; }