/**
 * @file spielplan.css
 * Styling for the Spielplan calendar view (/spielplan).
 * Served directly (no Tailwind rebuild). Uses theme design tokens from theme.css.
 */

.view-spielplan {
  margin-block: 2rem;
}

/* Each month is its own table, preceded by a visible <h2> heading; the table's
   own <caption> is visually hidden (see views-view-table--spielplan.html.twig) */
.view-spielplan table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 3rem;
}

/* Month heading — visible <h2> before each table (Audit-Fix #6) */
.view-spielplan__month {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  padding: 0 0 0.5rem;
  margin: 2.5rem 0 1rem;
  border-bottom: 3px solid var(--accent);
  border-radius: 2px;
}

/* Column labels — plain uppercase petrol, 2px petrol underline (Audit-Fix #6) */
.view-spielplan thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-bottom: 2px solid var(--primary);
  white-space: nowrap;
}

/* Body cells — generous spacing ("Luft") */
.view-spielplan tbody td {
  padding: 1.1rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
}

/* Whole row clickable (CSS stretched-link via the Stück title) */
.view-spielplan tbody tr {
  position: relative;
  transition: background-color 0.15s ease;
}
.view-spielplan tbody tr:hover {
  background: var(--muted, rgba(0, 0, 0, 0.04));
  cursor: pointer;
}
.view-spielplan td.views-field-title {
  font-weight: 600;
  font-size: 1.05rem;
}
.view-spielplan td.views-field-title a {
  color: var(--foreground);
  text-decoration: none;
}
.view-spielplan td.views-field-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Date column a touch emphasised */
.view-spielplan td.views-field-field-datum {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Image column — keep the image at its native (image-style) size, just round it */
.view-spielplan tbody td:first-child {
  width: 100px;
}
.view-spielplan tbody td img {
  display: block;
  height: auto;
  border-radius: calc(var(--radius, 0.75rem) / 2);
}

/* Tickets — stays clickable above the stretched row link */
.view-spielplan td.views-field-field-tickets {
  position: relative;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
}
/* Tickets — eine Behandlung überall: Primär-Button oder „geschlossen" (Fix #4) */
.view-spielplan .ts-ticket-btn,
.view-auffuehrungen .ts-ticket-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: calc(var(--radius, 0.75rem) / 2);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.view-spielplan .ts-ticket-btn:hover,
.view-spielplan .ts-ticket-btn:focus-visible,
.view-auffuehrungen .ts-ticket-btn:hover,
.view-auffuehrungen .ts-ticket-btn:focus-visible {
  background: var(--secondary);
  color: var(--secondary-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.view-spielplan .ts-ticket-closed,
.view-auffuehrungen .ts-ticket-closed {
  color: var(--muted-foreground);
  font-style: italic;
  font-size: 0.85rem;
}

/* Mobile: stack cells into cards */
@media (max-width: 640px) {
  .view-spielplan thead {
    display: none;
  }
  .view-spielplan table,
  .view-spielplan tbody,
  .view-spielplan tbody tr,
  .view-spielplan tbody td {
    display: block;
    width: 100%;
  }
  .view-spielplan tbody td {
    padding: 0.2rem 0;
    border: 0;
  }
  .view-spielplan tbody tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
  }
  .view-spielplan td.views-field-field-tickets {
    text-align: left;
    margin-top: 0.5rem;
  }
}

/* --- Status-Badges für das Hinweis-Feld (Audit-Fix #7) --- */
/* Form + Farbe + Label — nie Farbe allein. */
.ts-badge {
  display: inline-block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 11px;
  border-radius: 999px;
}
.ts-badge--premiere {
  background: var(--mint, #b3e0cc);
  color: var(--primary);
}
.ts-badge--public {
  background: var(--badge-public-bg, #e9f4ee);
  border: 1px solid var(--mint, #b3e0cc);
  color: var(--primary);
}
.ts-badge--school {
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}