/* ===== DISPLAY / KIOSK ===== */

.display-body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

#display-root {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface);
  box-shadow: 0 0 40px rgba(0,0,0,.08);
}

/* ── Top Bar ──────────────────────────────────────────────────────────────── */
.display-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 12px;
  background: linear-gradient(135deg, #064E3B 0%, var(--primary-dark) 55%, var(--primary) 100%);
  border-bottom: 4px solid var(--primary-mid);
  position: relative;
  overflow: hidden;
}

/* Sehr dezentes Muster */
.display-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.topbar-left  { display: flex; align-items: center; gap: 14px; position: relative; }
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; position: relative; }

#logo-img {
  height: clamp(44px,7vw,72px); width: auto; object-fit: contain; display: none;
  filter: brightness(0) invert(1);
  border-radius: 8px;
}
#logo-img.visible { display: block; }

.day-label {
  font-size: clamp(18px,3vw,30px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.date-label {
  font-size: clamp(12px,1.8vw,17px);
  color: rgba(255,255,255,.75);
  font-weight: 700;
}

/* ── Clock ────────────────────────────────────────────────────────────────── */
.clock-box {
  background: #fff;
  color: var(--primary-dark);
  font-size: clamp(30px,5.5vw,60px);
  font-weight: 900;
  padding: 8px 22px 6px;
  border-radius: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 3px;
  min-width: 130px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.18), 0 0 0 3px rgba(34,197,94,.5);
  line-height: 1.1;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.display-title-row {
  padding: 16px 24px 12px;
  text-align: center;
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--surface) 100%);
  border-bottom: 1px solid #D1FAE5;
}

.mission-label {
  font-size: clamp(10px,1.6vw,13px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: .8;
}

.display-title {
  font-size: clamp(24px,5vw,54px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.5px;
}

/* ── Slogan Banner ────────────────────────────────────────────────────────── */
.slogan-banner {
  background: linear-gradient(135deg, #064E3B 0%, var(--primary-dark) 50%, var(--primary) 100%);
  color: #fff;
  text-align: center;
  padding: 14px 28px;
  font-size: clamp(17px,3.5vw,36px);
  font-weight: 800;
  line-height: 1.2;
  display: none;
  position: relative;
  overflow: hidden;
}
.slogan-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.slogan-banner.visible { display: block; }

/* ── Schedule Table ───────────────────────────────────────────────────────── */
.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  flex: 1;
  padding: 10px 14px;
  background: var(--bg);
}

.schedule-table td {
  padding: 11px 16px;
  vertical-align: middle;
  background: var(--surface);
  font-size: clamp(14px,2.2vw,22px);
  line-height: 1.35;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.schedule-table tr td:first-child {
  border-radius: 12px 0 0 12px;
  border-left: 5px solid var(--border);
  border-right: none;
}
.schedule-table tr td:last-child {
  border-radius: 0 12px 12px 0;
  border-right: 1px solid var(--border-soft);
}

/* Typ-Balken */
tr.type-default   td:first-child { border-left-color: #D1D5DB; }
tr.type-important td:first-child { border-left-color: var(--primary); }
tr.type-break     td:first-child { border-left-color: #D1D5DB; }
tr.type-meal      td:first-child { border-left-color: var(--amber); }

tr.type-important .col-activity { color: var(--primary-dark); font-weight: 900; }
tr.type-break .col-activity     { color: var(--muted); font-style: italic; }
tr.type-meal td:first-child     { background: #FFFDF5; }

/* ── Aktueller Eintrag ────────────────────────────────────────────────────── */
.schedule-table tr.is-current td {
  background: var(--primary-light);
}
.schedule-table tr.is-current td:first-child {
  border-left-color: var(--primary);
  background: var(--green-bg);
}
.schedule-table tr.is-current .col-activity {
  font-weight: 900;
  color: var(--primary-deeper);
}
.schedule-table tr.is-current .col-time {
  color: var(--primary);
  font-weight: 900;
}

/* Spalten */
.col-time     { width: 22%; font-weight: 800; color: var(--text-soft); word-break: break-word; font-variant-numeric: tabular-nums; }
.col-activity { width: 36%; font-weight: 700; color: var(--text); word-break: break-word; }
.col-note     { width: 42%; color: var(--blue); word-break: break-word; font-size: 92%; font-weight: 600; }

.no-entries-msg {
  text-align: center; padding: 40px; color: var(--muted);
  font-size: 18px; font-weight: 600;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
}

/* ── Zwischenüberschriften ────────────────────────────────────────────────── */
tr.section-heading td.heading-cell {
  background: linear-gradient(135deg, #064E3B 0%, var(--primary-dark) 60%, var(--primary) 100%);
  color: #fff;
  font-size: clamp(13px,2vw,21px);
  font-weight: 900;
  text-align: center;
  letter-spacing: 1.5px;
  padding: 10px 20px;
  border-radius: 12px !important;
  border: none !important;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* ── Schlusstext ──────────────────────────────────────────────────────────── */
.closing-section {
  padding: 24px 24px 12px;
  text-align: center;
  border-top: 2px dashed #BBF7D0;
  display: none;
  background: var(--primary-light);
}
.closing-section.visible { display: block; }
.closing-text {
  font-size: clamp(20px,4vw,40px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--text);
}

/* ── Footer-Bild ──────────────────────────────────────────────────────────── */
.footer-image-section { display: none; overflow: hidden; }
.footer-image-section.visible { display: block; }
.footer-image-section img { width: 100%; max-height: 220px; object-fit: cover; display: block; }

/* ── Footer Bar ───────────────────────────────────────────────────────────── */
.display-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px;
  border-top: 1px solid #D1FAE5;
  background: var(--primary-light);
  margin-top: auto;
}
.admin-link { font-size: 11px; color: var(--muted); transition: color .15s; }
.admin-link:hover { color: var(--primary); }
.fullscreen-btn { font-size: 16px; color: var(--muted); padding: 4px 8px; border-radius: 6px; transition: color .15s; }
.fullscreen-btn:hover { color: var(--primary); }

/* ── Status ───────────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); margin-right: 6px; transition: background .3s;
}
.status-dot.ok  { background: var(--primary-mid); }
.status-dot.err { background: var(--red); }