/* =========================================================
   Schedule table
   ========================================================= */
.table-wrapper {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--color-white);
}

.schedule-table th,
.schedule-table td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--color-border);
}

.schedule-table th {
  background: var(--color-bg);
  color: var(--color-secondary);
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.schedule-table td.time {
  font-weight: 600;
  background: #F5F5F5;
  color: var(--color-muted);
}

.schedule-table td.empty {
  background: var(--color-bg);
}

td.slot {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-left: 4px solid var(--color-brand);
}

td.slot:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-brand);
}

td.slot a {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text);
  font-size: 13px;
}

td.slot a:hover {
  text-decoration: underline;
}

/* =========================================================
   Legend
   ========================================================= */
.legend {
  margin-top: 40px;
}

.legend h3 {
  margin-bottom: 20px;
  color: var(--color-brand);
  font-size: 24px;
}

#legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.legend-item {
  flex: 1 1 280px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.legend-item a {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: underline;
}

.legend-item a:hover {
  text-decoration: none;
}

/* =========================================================
   Private calendar
   ========================================================= */
#private-calendar h2 {
  color: var(--color-secondary);
  margin-top: 0;
  font-size: 26px;
}

.note {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.private-slot {
  background: #FCE4EC;
  color: var(--color-brand);
  font-weight: 600;
}

/* =========================================================
   Week navigation
   ========================================================= */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 0 20px;
}

.week-nav-btn {
  padding: 8px 18px;
  border: 1.5px solid var(--color-brand);
  color: var(--color-brand);
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.18s, color 0.18s;
}

.week-nav-btn:hover { background: var(--color-brand); color: white; }
.week-nav-btn.hidden { visibility: hidden; pointer-events: none; }

.week-nav-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  min-width: 130px;
  text-align: center;
}

/* Today column highlight */
.schedule-table th.today-col {
  border-top: 3px solid var(--color-brand);
  background: rgba(194, 24, 91, 0.05);
  color: var(--color-brand);
}

.schedule-table td.today-col {
  border-left: 1.5px solid rgba(194, 24, 91, 0.35);
  border-right: 1.5px solid rgba(194, 24, 91, 0.35);
  background-color: rgba(194, 24, 91, 0.03);
}

.schedule-table td.studio-busy {
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6,
    #f3f4f6 4px,
    #e5e7eb 4px,
    #e5e7eb 8px
  );
  cursor: default;
}

/* =========================================================
   Table header day + date
   ========================================================= */
.day-name {
  font-weight: 600;
  color: var(--color-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.day-date {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

@media (max-width: 768px) {
  #legend {
    flex-direction: column;
  }
}