* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --lw-navy: #172b3a;
  --lw-teal: #087e83;
  --lw-yellow: #ffca19;
  --lw-ivory: #f5f6f0;
  --lw-mint: #bde3d1;
  --primary: #087e83;
  --primary-dark: #066569;
  --primary-light: #e2f1ec;
  --success: #10b981;
  --success-dark: #059669;
  --bg: #f5f6f0;
  --card-bg: #ffffff;
  --text: #172b3a;
  --text-muted: #58686c;
  --border: #dde4df;
  --weekend: #fff7ed;
  --holiday: #fee2e2;
  --school: #fef3c7;
  --close: #ef4444;
  --off: #9ca3af;
  --low: #60a5fa;
  --medium: #34d399;
  --high: #f59e0b;
  --peak: #ec4899;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding: 20px;
  padding-top: 0;
}

/* ─── Top bar (shared LeisureWorkspace header – identical in all tools) ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 20px;
  margin: 0 -20px;
  background: linear-gradient(135deg, #0D1F2E 0%, var(--lw-navy) 60%, #1A3048 100%);
  color: #f1f5f9;
  line-height: normal;
  border-bottom: 3px solid var(--lw-yellow);
  box-shadow: 0 4px 20px rgba(0,0,0,.40);
}

/* Logo block */
.topbar .lw-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; text-decoration: none;
}
.topbar .lw-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.lw-logo-text { line-height: 1.1; }
.lw-logo-name {
  font-size: 13px; font-weight: 800; color: #fff;
  letter-spacing: -.3px;
}
.lw-logo-name span { color: var(--lw-teal); font-weight: 400; }
.lw-logo-sub {
  font-size: 9.5px; color: rgba(255,255,255,.45);
  font-weight: 400; letter-spacing: .1px;
}

.topbar-divider {
  width: 1px; height: 28px; background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

.topbar-title {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: -.2px;
  margin-right: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Info button */
.topbar .btn-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.7);
  font-size: 13px; font-weight: 700; font-family: inherit;
  text-decoration: none;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.topbar .btn-info:hover { background: transparent; border-color: var(--lw-yellow); color: var(--lw-yellow); }

/* Language toggle */
.topbar .btn-lang {
  display: inline-flex; align-items: center; gap: 0;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 20px;
  overflow: hidden; flex-shrink: 0;
}
.topbar .btn-lang-opt {
  padding: 4px 9px; border: none; border-radius: 0; background: transparent;
  color: rgba(255,255,255,.5); font-size: 11px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background .12s, color .12s;
}
.topbar .btn-lang-opt:hover { background: rgba(255,255,255,.12); }
.topbar .btn-lang-opt.active,
.topbar .btn-lang-opt.active:hover { background: var(--lw-teal); color: #fff; }

/* Back to menu button */
.topbar .btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none; border-radius: 22px;
  background: var(--lw-yellow); color: var(--lw-navy);
  font-size: 11.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  text-decoration: none; transition: filter .12s, transform .08s;
}
.topbar .btn-back:hover  { filter: brightness(.92); }
.topbar .btn-back:active { transform: scale(.95); }

/* Action buttons */
.topbar-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: rgba(0,0,0,.25);
  border-radius: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
}
.topbar .btn-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border: none; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, transform .08s;
}
.topbar .btn-act:active { transform: scale(.95); }
.topbar .btn-act:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.topbar .btn-act--save   { background: var(--lw-teal); color: #fff; }
.topbar .btn-act--save:hover { background: #066569; }
.topbar .btn-act--load   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.topbar .btn-act--load:hover { background: rgba(255,255,255,.22); }
.topbar .btn-act--pdf    { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.topbar .btn-act--pdf:hover  { background: rgba(255,255,255,.22); }
.topbar .btn-act--toggle { background: transparent; color: rgba(255,255,255,.55); }
.topbar .btn-act--toggle:hover { background: transparent; color: rgba(255,255,255,.9); }
.topbar .btn-act--pres   { background: rgba(255,202,25,.15); color: #ffca19; }
.topbar .btn-act--pres:hover { background: rgba(255,202,25,.28); }
.topbar .btn-act .ico    { font-size: 13px; }
.hdr-caret { font-size: 9px; opacity: .7; margin-left: 1px; }

/* Thin separator between tool buttons and lang/back controls */
.topbar-sep {
  width: 1px; height: 20px; background: rgba(255,255,255,.15);
  flex-shrink: 0; margin: 0 2px;
}

/* Dropdown menu for exports with several variants */
.hdr-menu { position: relative; display: inline-flex; }
.hdr-menu-list {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 200px;
  display: none; flex-direction: column; gap: 2px;
  padding: 6px;
  background: #0D1F2E;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 300;
}
.hdr-menu.open .hdr-menu-list { display: flex; }
.topbar .hdr-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px;
  border: none; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.88);
  font-size: 12px; font-weight: 600; font-family: inherit;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.topbar .hdr-menu-item:hover { background: rgba(255,255,255,.12); }
.topbar .hdr-menu-item:disabled { opacity: .45; cursor: not-allowed; }

/* Tooltips */
.topbar [data-tip] { position: relative; }
.topbar [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  background: #0D1F2E;
  color: #f1f5f9;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  padding: 5px 10px; border-radius: 6px;
  pointer-events: none; opacity: 0;
  transition: opacity .15s;
  z-index: 400;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.topbar [data-tip]:hover::after { opacity: 1; }
.topbar .hdr-menu.open [data-tip]::after { opacity: 0; }

@media (max-width: 768px) {
  .topbar { padding: 0 10px; gap: 5px; height: 54px; }
  .topbar-title { font-size: 11px; letter-spacing: -.2px; }
  .lw-logo-sub { display: none; }
  .lw-logo-name { font-size: 11px; }
  .topbar .lw-logo svg { width: 28px; height: 28px; }
  .topbar-divider { display: none; }
  .topbar .btn-back { padding: 5px 10px; font-size: 10px; }
  .topbar .btn-act { padding: 6px 9px; font-size: 11px; gap: 3px; }
  .btn-lbl { display: none; } /* icon-only on mobile */
}

header {
  max-width: 1600px;
  margin: 28px auto 24px;
  text-align: center;
}
header h1 {
  font-size: 2.1rem;
  color: var(--lw-navy);
  margin-bottom: 6px;
  font-weight: 700;
}
header p {
  color: var(--text-muted);
  font-size: 1rem;
}

main {
  max-width: 1600px;
  margin: 0 auto;
}

section,
.card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.input-form { background: var(--card-bg); padding: 16px; border-top: 4px solid var(--lw-yellow); }
.input-form h2 { color: var(--lw-navy); margin-bottom: 10px; font-size: 1.2rem; }

section h2,
.card h3 {
  color: var(--primary);
  margin-bottom: 14px;
}
section h2 { font-size: 1.3rem; }
.card h3 { font-size: 1.05rem; }

/* Compact form rows */
.form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.form-group {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  padding: 8px 10px 10px;
  border-radius: 8px;
  background: var(--lw-ivory);
  position: relative;
  flex-wrap: wrap;
}
.form-group[data-color="blue"]   { border-left: 4px solid var(--primary); }
.form-group[data-color="green"]  { border-left: 4px solid var(--success); }
.form-group[data-color="amber"]  { border-left: 4px solid #f59e0b; }
.form-group[data-color="purple"] { border-left: 4px solid #8b5cf6; }
.form-group[data-color="red"]    { border-left: 4px solid #ef4444; }
.form-group[data-color="teal"]   { border-left: 4px solid #0d9488; }

.group-label {
  width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  margin-bottom: 2px;
}

.form-group .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
}
.form-group .field-wide { min-width: 160px; flex: 1; }
.form-group .field-narrow { max-width: 75px; }
.form-group .field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
.form-group .field input,
.form-group .field select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.88rem;
  background: white;
  color: var(--text);
}
.form-group .field input:focus,
.form-group .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(8, 126, 131, 0.18);
}

.field-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(0,0,0,0.12);
  margin: 4px 2px 0;
}
.field-avg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-end;
}
.field-avg label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
.avg-display {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  padding: 5px 7px;
  background: var(--primary-light);
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
}
.avg-display-teal {
  color: #0d9488;
  background: #ccfbf1;
}

/* Form actions */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.action-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Template week */
.template-week {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fafbfc;
}
.tw-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.template-week-ferien {
  background: #fffbeb;
  border-color: #fbbf24;
}
.tw-title-ferien {
  color: #b45309;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.tpl-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: white;
}
.tpl-day label {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.3px;
}
.tpl-day select {
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.tpl-day select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(8, 126, 131, 0.18);
}

.template-bulk {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.template-bulk button {
  font-size: 0.72rem;
  padding: 4px 10px;
}
.template-bulk button[data-bulk="Close"]  { background: var(--close); }
.template-bulk button[data-bulk="Close"]:hover { background: #dc2626; }
.template-bulk button[data-bulk="Off"]    { background: var(--off); }
.template-bulk button[data-bulk="Off"]:hover { background: #6b7280; }
.template-bulk button[data-bulk="Low"]    { background: var(--low); }
.template-bulk button[data-bulk="Low"]:hover { background: #3b82f6; }
.template-bulk button[data-bulk="Medium"] { background: var(--medium); }
.template-bulk button[data-bulk="Medium"]:hover { background: #10b981; }
.template-bulk button[data-bulk="High"]   { background: var(--high); }
.template-bulk button[data-bulk="High"]:hover { background: #d97706; }
.template-bulk button[data-bulk="Peak"]   { background: var(--peak); }
.template-bulk button[data-bulk="Peak"]:hover { background: #db2777; }

.tpl-day select[data-occ="Close"]  { color: var(--close); border-color: var(--close); }
.tpl-day select[data-occ="Off"]    { color: var(--off); border-color: var(--off); }
.tpl-day select[data-occ="Low"]    { color: var(--low); border-color: var(--low); }
.tpl-day select[data-occ="Medium"] { color: var(--medium); border-color: var(--medium); }
.tpl-day select[data-occ="High"]   { color: var(--high); border-color: var(--high); }
.tpl-day select[data-occ="Peak"]   { color: var(--peak); border-color: var(--peak); }
.tpl-day select { font-weight: 700; }

@media (max-width: 900px) {
  .form-row { flex-direction: column; }
  .template-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Buttons */
button {
  padding: 8px 14px;
  border: none;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, transform 0.05s;
}
button:hover { background: var(--primary-dark); }
button:active { transform: translateY(1px); }
button:disabled { background: #9ca3af; cursor: not-allowed; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: vb-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }

.hidden { display: none !important; }

/* Info messages */
.info-msg {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 11px 16px;
  border-radius: 8px;
  border-left: 5px solid #d1d5db;
  background: #f9fafb;
  color: var(--text-muted);
  font-weight: 500;
}
.info-msg:empty { display: none !important; padding: 0; border: 0; background: none; }
.info-msg.error,
.info-msg.warning,
.info-msg.success {
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 5px solid transparent;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-msg.error   { color: #7f1d1d; background: #fee2e2; border-left-color: #dc2626; }
.info-msg.warning { color: #78350f; background: #fef3c7; border-left-color: #d97706; }
.info-msg.success { color: #065f46; background: #d1fae5; border-left-color: #10b981; }
.info-msg.error::before   { content: "\26A0"; color: #dc2626; font-size: 1.1rem; flex-shrink: 0; }
.info-msg.warning::before { content: "\26A0"; color: #d97706; font-size: 1.1rem; flex-shrink: 0; }
.info-msg.success::before { content: "\2713"; color: #10b981; font-size: 1.1rem; flex-shrink: 0; }

/* Occupancy chips bar */
.occ-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card-bg);
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.occ-bar-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.occ-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f3f4f6;
  border: 1px solid var(--border);
  font-size: 0.8rem;
}
.occ-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.occ-chip-label {
  color: var(--text-muted);
  font-weight: 500;
}
.occ-chip-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 0.88rem;
}
.occ-chip-season {
  border-color: var(--primary);
  background: var(--primary-light);
}
.occ-chip-season .occ-chip-label { color: var(--primary-dark); font-weight: 700; }
.occ-chip-season .occ-chip-count { color: var(--primary-dark); }

/* Staff year summary bar */
.summary-bar-staff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.staff-year-card {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}
.staff-year-pos {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.staff-year-neg {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Chart card */
.chart-card {
  padding: 20px;
}
.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.chart-card-header h3 { margin: 0; }
.chart-vis-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.chart-vis-label input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}
#chartWrap {
  width: 100%;
  overflow: hidden;
}
#monthChart {
  display: block;
  width: 100%;
}

/* Summary cards */
.summary-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.summary-bar-revenue {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.summary-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 22px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.summary-card.secondary {
  background: linear-gradient(135deg, #58686c 0%, #172b3a 100%);
}
.revenue-card {
  background: linear-gradient(135deg, #26455a 0%, var(--lw-navy) 100%);
}
.revenue-card-cat {
  background: linear-gradient(135deg, #58686c 0%, #172b3a 100%);
}
.summary-card .label {
  font-size: 0.8rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.summary-card .value {
  font-size: clamp(0.78rem, 10cqw, 2.1rem);
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.summary-card {
  min-width: 0;
  container-type: inline-size;
}

/* Grid layout for counts + monthly */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.grid-2 .card { margin-bottom: 0; }

.counts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.counts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.count-item {
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--border);
  background: #fafbfc;
}
.count-item.count-season { border-left: 4px solid var(--primary); }
.count-season .count-value { color: var(--primary); }
.count-item .count-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.count-item .count-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.count-close { border-left: 4px solid var(--close); }
.count-close .count-value { color: var(--close); }
.count-off { border-left: 4px solid var(--off); }
.count-off .count-value { color: var(--off); }
.count-low { border-left: 4px solid var(--low); }
.count-low .count-value { color: var(--low); }
.count-medium { border-left: 4px solid var(--medium); }
.count-medium .count-value { color: var(--medium); }
.count-high { border-left: 4px solid var(--high); }
.count-high .count-value { color: var(--high); }
.count-peak { border-left: 4px solid var(--peak); }
.count-peak .count-value { color: var(--peak); }

/* Closed month */
.monthly-item-closed {
  opacity: 0.45;
  filter: grayscale(0.7);
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.monthly-item-closed .month-name { color: var(--text-muted); }

/* Monthly grid */
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.monthly-item {
  padding: 14px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.monthly-item .month-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-light);
}
.monthly-item .month-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.month-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.month-line .ml-label {
  color: var(--text-muted);
  font-weight: 500;
}
.month-line .ml-val {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.month-line-umsatz { border-top: 1px solid #e5e7eb; padding-top: 4px; margin-top: 2px; }
.month-line-umsatz .ml-val { color: var(--lw-navy); font-weight: 700; }
.month-line-personal .ml-label { color: #b91c1c; }
.month-line-personal .ml-val { color: #dc2626; font-weight: 600; }
.month-line-ergebnis { border-top: 2px solid var(--primary-light); padding-top: 4px; margin-top: 2px; }
.month-line-ergebnis .ml-label { font-weight: 700; color: var(--text); }
.month-line-ergebnis .ml-val { font-weight: 800; color: var(--primary-dark); }
.month-line-ergebnis .ml-val.ml-val-neg { color: #dc2626; }

/* Actions bar */
.actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: var(--card-bg);
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.sw-weekend { background: var(--weekend); }
.sw-holiday { background: var(--holiday); }
.sw-school { background: var(--school); }
.sw-off-season { background: #cbd5e1; }

/* Table */
.table-card { padding: 0; overflow: hidden; }
.table-card h3 { padding: 20px 20px 10px; margin-bottom: 0; }
.table-wrapper { overflow: auto; max-height: 72vh; }

#dayTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
#dayTable thead {
  position: sticky;
  top: 0;
  background: var(--primary);
  color: white;
  z-index: 10;
}
#dayTable th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
#dayTable td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
#dayTable tbody tr.weekend        { background: var(--weekend); }
#dayTable tbody tr.holiday        { background: var(--holiday); }
#dayTable tbody tr.school-holiday { background: var(--school); }
#dayTable tbody tr.holiday.school-holiday {
  background: linear-gradient(90deg, var(--holiday) 50%, var(--school) 50%);
}
#dayTable tbody tr.off-season     { background: #cbd5e1; color: var(--text-muted); }
#dayTable tbody tr.off-season .visitors-cell,
#dayTable tbody tr.off-season .revenue-cell { color: var(--text-muted); }
#dayTable tbody tr.month-header td {
  background: var(--primary-dark);
  color: white;
  font-weight: 700;
  padding: 10px 12px;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
#dayTable tbody tr.month-header td .month-subtotal {
  float: right;
  font-weight: 500;
  opacity: 0.9;
}

.holiday-cell {
  font-size: 0.82rem;
  line-height: 1.3;
  max-width: 220px;
}
.holiday-cell .ph { color: #b91c1c; font-weight: 600; }
.holiday-cell .sh { color: #92400e; font-style: italic; }

.occupancy-select {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  font-size: 0.85rem;
  cursor: pointer;
  min-width: 110px;
  font-weight: 600;
}
.occupancy-select[data-occ="Close"]  { color: var(--close); }
.occupancy-select[data-occ="Off"]    { color: var(--off); }
.occupancy-select[data-occ="Low"]    { color: var(--low); }
.occupancy-select[data-occ="Medium"] { color: var(--medium); }
.occupancy-select[data-occ="High"]   { color: var(--high); }
.occupancy-select[data-occ="Peak"]   { color: var(--peak); }

.visitors-cell {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dark);
  white-space: nowrap;
}
.revenue-cell {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lw-navy);
  white-space: nowrap;
  font-size: 0.85rem;
}

.note-input {
  width: 100%;
  min-width: 160px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: white;
  font-family: inherit;
}
.note-input:focus {
  outline: none;
  border-color: var(--primary);
}

footer {
  max-width: 100%;
  margin: 32px 0 0;
  background: linear-gradient(135deg, #0D1F2E 0%, var(--lw-navy) 60%, #1A3048 100%);
  border-top: 3px solid var(--lw-yellow);
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  padding: 0;
}
.footer-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 20px;
  text-align: center;
}
.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.footer-privacy {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-links {
  font-size: 0.82rem;
}
.footer-links a {
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
}
.footer-links a:hover {
  color: white;
  text-decoration-color: white;
}
.footer-sep {
  margin: 0 8px;
  opacity: 0.6;
}

/* ============================================================
   PERSONALEINSATZPLANUNG
   ============================================================ */

.staff-section {
  background: linear-gradient(160deg, #eaf4ef 0%, #f5f6f0 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(8,126,131,0.10), 0 0 0 1px rgba(8,126,131,0.10);
}
/* Make inner cards/tables contrast against the tinted background */
.staff-section .staff-panel,
.staff-section .staff-global,
.staff-section .staff-summary-section {
  background: rgba(255,255,255,0.82);
}
.staff-section .staff-cat-setting {
  background: rgba(255,255,255,0.90);
}

.staff-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.staff-section-header h2 {
  color: var(--primary);
  font-size: 1.3rem;
  margin: 0;
}

.btn-staff-toggle {
  background: #e5e7eb;
  color: #374151;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 5px;
}
.btn-staff-toggle:hover { background: #d1d5db; }

/* Global settings row */
.staff-global {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.staff-global-params {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.staff-param-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.staff-param-block > label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.staff-param-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.staff-param-input-wrap input {
  width: 68px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.88rem;
  background: white;
}
.staff-param-input-wrap span {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Per-category settings */
.staff-cat-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.staff-cat-setting {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--border);
  min-width: 160px;
}

.staff-cat-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  user-select: none;
}
.staff-cat-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
}

.staff-rate-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-rate-field > label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.staff-rate-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
}
.staff-rate-wrap input {
  width: 72px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: white;
}
.staff-rate-wrap span {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Category panels */
.staff-panel {
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  margin-bottom: 14px;
  overflow: hidden;
  background: white;
}

.staff-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
}

.staff-panel-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.staff-btn-add {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 5px;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.staff-btn-add:hover { background: var(--primary-dark); }

.staff-panel-inactive .staff-table-wrap {
  padding: 20px;
}
.staff-inactive-msg {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88rem;
  text-align: center;
  padding: 16px;
}

/* Staff table */
.staff-table-wrap {
  overflow-x: auto;
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.staff-table thead th {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border-bottom: 2px solid var(--primary);
}
.staff-table tbody tr:hover { background: #f9fafb; }
.staff-table tbody td,
.staff-table tfoot td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.staff-table tfoot td {
  background: #f4f6fa;
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.staff-inp {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: white;
  font-family: inherit;
  width: 100%;
}
.staff-inp:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(8,126,131,0.15);
}
.staff-inp.staff-name { min-width: 140px; }
.staff-inp[type="time"] { min-width: 90px; max-width: 100px; }
.staff-inp[type="number"] { min-width: 60px; max-width: 80px; text-align: right; }

.staff-calc {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #374151;
  text-align: right;
}
.staff-tageskosten { color: var(--primary-dark); font-weight: 700; }
.staff-foot-label { text-align: right; color: var(--text-muted); font-size: 0.8rem; }
.staff-foot-total { color: var(--primary-dark); font-size: 0.95rem; }

.staff-actions {
  white-space: nowrap;
}
.staff-btn-dup,
.staff-btn-del {
  padding: 3px 8px;
  font-size: 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  margin-left: 4px;
  transition: background 0.12s;
}
.staff-btn-dup { background: #dbeafe; color: #1d4ed8; }
.staff-btn-dup:hover { background: #bfdbfe; }
.staff-btn-del { background: #fee2e2; color: #dc2626; }
.staff-btn-del:hover { background: #fecaca; }

/* Summary section */
.staff-summary-section {
  margin-top: 16px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
}

.staff-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 540px;
}

.staff-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.9rem;
}
.staff-sum-row.staff-sum-add {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.staff-sum-row.staff-sum-total {
  background: var(--primary-light);
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.95rem;
  margin-top: 2px;
}
.staff-sum-row.staff-sum-total + .staff-sum-row.staff-sum-total {
  background: var(--lw-mint);
}

.staff-sum-label { font-weight: 500; }
.staff-sum-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.staff-sum-row.staff-sum-total .staff-sum-value { color: var(--primary-dark); }
.staff-sum-row.staff-sum-cat { font-size: 0.88rem; padding: 4px 8px; }
.staff-sum-row.staff-sum-cat .staff-sum-value { color: var(--text); }
.staff-hc-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.staff-hc-total {
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.staff-sum-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 6px 8px 2px;
}
.staff-sum-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .summary-bar,
  .summary-bar-revenue { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .monthly-grid { grid-template-columns: repeat(3, 1fr); }
  .staff-global { flex-direction: column; }
  .staff-cat-settings { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 10px; }
}
@media (max-width: 600px) {
  body { padding: 12px; }
  header h1 { font-size: 1.5rem; }
  .form-group { flex-direction: column; align-items: stretch; }
  .form-group .field { min-width: 0; }
  .summary-bar,
  .summary-bar-revenue { grid-template-columns: 1fr; }
  .monthly-grid { grid-template-columns: repeat(2, 1fr); }
  #dayTable { font-size: 0.78rem; }
  #dayTable th,
  #dayTable td { padding: 5px 6px; }
  .occupancy-select { min-width: 95px; }
  .staff-global-params { flex-direction: column; }
  .staff-cat-settings { flex-direction: column; }
  .staff-cat-setting { min-width: 0; }
}