:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #2563eb;

  --shift-bg: #dbeafe;
  --shift-text: #1e40af;

  /* shift-time color rotation (uke 34+ 3-shift turnus etc.) */
  --shift-c0-bg: #dbeafe; --shift-c0-text: #1e40af; /* blue */
  --shift-c1-bg: #ede9fe; --shift-c1-text: #6d28d9; /* violet */
  --shift-c2-bg: #ccfbf1; --shift-c2-text: #0f766e; /* teal */
  --shift-c3-bg: #ffedd5; --shift-c3-text: #c2410c; /* orange */
  --shift-c4-bg: #cffafe; --shift-c4-text: #0e7490; /* cyan */
  --shift-c5-bg: #fce7f3; --shift-c5-text: #be185d; /* pink */
  --shift-c6-bg: #e0e7ff; --shift-c6-text: #4338ca; /* indigo */
  --shift-c7-bg: #ecfccb; --shift-c7-text: #4d7c0f; /* lime */
  --shift-sat-bg: #fae8ff; --shift-sat-text: #86198f; /* dedicated Saturday color */

  --off-bg: #f1f5f9;
  --off-text: #64748b;
  --vacation-bg: #dcfce7;
  --vacation-text: #15803d;
  --closed-bg: #334155;
  --closed-text: #ffffff;
  --left-bg: #fee2e2;
  --left-text: #991b1b;
  --other-bg: #e0f2fe;
  --other-text: #0369a1;
  --holiday-bg: #fef3c7;
  --holiday-text: #92400e;
  --note-bg: #f5f5f4;
  --note-text: #57534e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px 0 16px;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  min-height: 44px;
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.view { display: none; }
.view.active { display: block; }

.week-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}

.week-title {
  flex: 1;
  min-width: 120px;
  text-align: center;
  order: 1;
}

.week-label {
  font-weight: 700;
  font-size: 16px;
}

.week-dates {
  font-size: 12px;
  color: var(--text-muted);
}

#ov-prev, #ms-prev { order: 0; }
#ov-next, #ms-next { order: 2; }
#ov-today, #ms-today { order: 3; flex-basis: 100%; }

.nav-btn, .today-btn {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
  min-height: 44px;
  min-width: 44px;
}

.today-btn {
  width: 100%;
}

.nav-btn:hover, .today-btn:hover {
  background: #eef2f7;
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.notes {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-chip {
  background: var(--holiday-bg);
  color: var(--holiday-text);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.grid-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.grid-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 13px;
}

.grid-table .day-cell { width: 62px; }

.grid-table td .badge:not(.stacked) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.2;
}

.grid-table th, .grid-table td {
  padding: 8px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.grid-table thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 12px;
  position: sticky;
  top: 0;
}

.grid-table .day-cell {
  text-align: left;
  padding-left: 10px;
  font-weight: 600;
  white-space: normal;
}

.grid-table .day-cell .gc-weekday {
  display: block;
  font-size: 13px;
}

.grid-table .day-cell .gc-date {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.grid-table tbody tr.today-row td {
  background: #eff6ff;
}

.grid-table tbody tr:last-child td {
  border-bottom: none;
}

.grid-table .totals-row td {
  font-weight: 700;
  background: #fbfcfe;
  border-top: 2px solid var(--border);
  color: var(--text-muted);
}

.grid-table .totals-row .day-cell {
  color: var(--text);
}

.extra-section {
  margin-top: 16px;
}

.extra-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.extra-day-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.extra-day-row .ed-label {
  font-weight: 700;
  font-size: 13px;
  min-width: 80px;
}

.extra-day-row .ed-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.extra-day-row .ed-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.badge {
  position: relative;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.swap-icon {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}

.badge.shift { background: var(--shift-bg); color: var(--shift-text); }

.badge.shift-c0 { background: var(--shift-c0-bg); color: var(--shift-c0-text); }
.badge.shift-c1 { background: var(--shift-c1-bg); color: var(--shift-c1-text); }
.badge.shift-c2 { background: var(--shift-c2-bg); color: var(--shift-c2-text); }
.badge.shift-c3 { background: var(--shift-c3-bg); color: var(--shift-c3-text); }
.badge.shift-c4 { background: var(--shift-c4-bg); color: var(--shift-c4-text); }
.badge.shift-c5 { background: var(--shift-c5-bg); color: var(--shift-c5-text); }
.badge.shift-c6 { background: var(--shift-c6-bg); color: var(--shift-c6-text); }
.badge.shift-c7 { background: var(--shift-c7-bg); color: var(--shift-c7-text); }
.badge.shift-sat { background: var(--shift-sat-bg); color: var(--shift-sat-text); }

.badge.stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  padding: 4px 7px;
  gap: 0;
}

.badge.stacked .bt-end {
  font-size: 0.85em;
  opacity: 0.8;
}
.badge.off { background: var(--off-bg); color: var(--off-text); }
.badge.vacation { background: var(--vacation-bg); color: var(--vacation-text); }
.badge.closed { background: var(--closed-bg); color: var(--closed-text); }
.badge.left { background: var(--left-bg); color: var(--left-text); text-decoration: line-through; }
.badge.other-location { background: var(--other-bg); color: var(--other-text); }
.badge.holiday { background: var(--holiday-bg); color: var(--holiday-text); }
.badge.note { background: var(--note-bg); color: var(--note-text); }

.empty-cell { color: #cbd5e1; }

.person-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.person-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.person-btn {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}

.person-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.extra-buttons .person-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  min-height: 32px;
  color: var(--text-muted);
}

.extra-buttons .person-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.hours-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hours-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
}

.hours-tile .h-value {
  font-size: 18px;
  font-weight: 700;
}

.hours-tile .h-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.swap-open-btn {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--primary);
  background: var(--primary);
  cursor: pointer;
}

.swap-open-btn .h-value {
  color: white;
  font-size: 15px;
}

.hidden,
.swap-overlay.hidden {
  display: none;
}

.swap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
}

.swap-panel {
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .swap-overlay { align-items: center; }
  .swap-panel { border-radius: 16px; }
}

.swap-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
}

.swap-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.swap-candidates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swap-candidate-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
  min-height: 44px;
}

.swap-candidate-btn:hover {
  background: #eef2f7;
}

.swap-cand-name {
  font-weight: 700;
}

.calendar-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: 26px repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 0 8px 0;
}

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

.cal-weeknum {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: #f8fafc;
  border-radius: 6px;
}

.cal-cell {
  position: relative;
  min-height: 60px;
  border-radius: 8px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fbfcfe;
  border: 1px solid transparent;
  text-align: center;
}

.cal-cell.outside {
  opacity: 0.35;
}

.cal-cell.is-today {
  border-color: var(--primary);
}

.cal-daynum {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cal-cell.is-today .cal-daynum {
  color: var(--primary);
}

/* When a cell has a color class, tint the daynum with the cell's own
   (currentColor) text color instead of the neutral muted gray. */
.cal-cell:not(.outside)[class*="shift-"] .cal-daynum,
.cal-cell:not(.outside).off .cal-daynum,
.cal-cell:not(.outside).vacation .cal-daynum,
.cal-cell:not(.outside).closed .cal-daynum,
.cal-cell:not(.outside).left .cal-daynum,
.cal-cell:not(.outside).other-location .cal-daynum,
.cal-cell:not(.outside).holiday .cal-daynum,
.cal-cell:not(.outside).note .cal-daynum {
  color: currentColor;
  opacity: 0.75;
}

.cal-time {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.cal-time-end {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.cal-status {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cal-cell.left .cal-status {
  text-decoration: line-through;
}

.cal-cell.shift-c0 { background: var(--shift-c0-bg); color: var(--shift-c0-text); }
.cal-cell.shift-c1 { background: var(--shift-c1-bg); color: var(--shift-c1-text); }
.cal-cell.shift-c2 { background: var(--shift-c2-bg); color: var(--shift-c2-text); }
.cal-cell.shift-c3 { background: var(--shift-c3-bg); color: var(--shift-c3-text); }
.cal-cell.shift-c4 { background: var(--shift-c4-bg); color: var(--shift-c4-text); }
.cal-cell.shift-c5 { background: var(--shift-c5-bg); color: var(--shift-c5-text); }
.cal-cell.shift-c6 { background: var(--shift-c6-bg); color: var(--shift-c6-text); }
.cal-cell.shift-c7 { background: var(--shift-c7-bg); color: var(--shift-c7-text); }
.cal-cell.shift-sat { background: var(--shift-sat-bg); color: var(--shift-sat-text); }
.cal-cell.off { background: var(--off-bg); color: var(--off-text); }
.cal-cell.vacation { background: var(--vacation-bg); color: var(--vacation-text); }
.cal-cell.closed { background: var(--closed-bg); color: var(--closed-text); }
.cal-cell.left { background: var(--left-bg); color: var(--left-text); }
.cal-cell.other-location { background: var(--other-bg); color: var(--other-text); }
.cal-cell.holiday { background: var(--holiday-bg); color: var(--holiday-text); }
.cal-cell.note { background: var(--note-bg); color: var(--note-text); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
  font-size: 14px;
}

.upload-title {
  font-size: 18px;
  margin: 12px 0;
}

.upload-intro {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.upload-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upload-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.upload-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 15px;
  background: var(--bg);
}

.upload-status {
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.upload-status.ok { color: var(--vacation-text); }
.upload-status.error { color: var(--left-text); }
.upload-status.info { color: var(--text-muted); }

.upload-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 10px;
}

.upload-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  overflow-x: auto;
  display: block;
}

.upload-preview-table th, .upload-preview-table td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: left;
  white-space: nowrap;
}

.upload-preview-table th {
  background: #f8fafc;
}

.upload-preview-more {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.upload-publish {
  width: 100%;
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: 700;
}

.upload-publish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  #app { padding: 12px; }
  .week-label { font-size: 14px; }
  .badge { font-size: 13px; padding: 4px 9px; }
}