/* ============================================================
   Tutte grids — shared interaction styling
   ============================================================ */

/* Shared SVG icon system. */
.tutte-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutte-treble-clef {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-family: "Noto Music", "Segoe UI Symbol", "Arial Unicode MS", serif;
  font-size: 1.65em;
  line-height: 1;
  vertical-align: -0.2em;
  stroke: none;
}

.tutte-icon .tutte-icon-fill {
  fill: currentColor;
  stroke: none;
}

.tutte-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.material-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 0.55rem;
  background: #f4f1f1;
  color: var(--tutte-burgundy);
}

.material-format-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #667085;
  white-space: nowrap;
}

/* Text links and primary labels inside data grids use the choir burgundy
   instead of Bootstrap's default blue. Buttons keep their own colors. */
.table tbody a:not(.btn),
.table tbody .grid-primary {
  color: var(--tutte-burgundy);
}

.table tbody a:not(.btn):hover,
.table tbody a:not(.btn):focus {
  color: var(--tutte-burgundy-dark);
}

/* Rows that drill into an object or perform the row's primary action. */
.table tbody tr.clickable-row {
  cursor: pointer;
}

.table tbody tr.clickable-row:hover > td {
  background: var(--tutte-burgundy-soft);
}

.table tbody tr.clickable-row:focus {
  outline: 2px solid var(--tutte-burgundy);
  outline-offset: -2px;
}

.table tbody tr.clickable-row:focus > td {
  background: var(--tutte-burgundy-soft);
}

/* Material action buttons use stable semantic colors. This helps on narrow
   screens where labels wrap and actions are easier to recognize by color. */
.table tbody a.btn[download] {
  color: #315f86;
  background: #eef6fd;
  border-color: #bfd8eb;
}

.table tbody a.btn[download]:hover,
.table tbody a.btn[download]:focus {
  color: #244966;
  background: #dfeefa;
  border-color: #9fc4df;
}

.table tbody [data-material-player-toggle] {
  color: #356548;
  background: #eff8f2;
  border-color: #bddbc7;
}

.table tbody [data-material-player-toggle]:hover,
.table tbody [data-material-player-toggle]:focus {
  color: #284f38;
  background: #dff0e5;
  border-color: #9cc9aa;
}

.table tbody a.btn[target="_blank"]:not([download]) {
  color: #7c4a20;
  background: #fff7ec;
  border-color: #ead0ad;
}

.table tbody a.btn[target="_blank"]:not([download]):hover,
.table tbody a.btn[target="_blank"]:not([download]):focus {
  color: #613817;
  background: #fcedd8;
  border-color: #dab982;
}

/* Material playback stays compact inside the grid. */
.material-audio {
  min-width: 230px;
  max-width: 420px;
  height: 38px;
}

.material-player-panel {
  width: min(560px, 72vw);
}

.material-video {
  display: block;
  width: 100%;
  max-height: 315px;
  border-radius: 8px;
  background: #000;
}

.material-player-panel iframe {
  border: 0;
  border-radius: 8px;
}

.event-poster-preview {
  display: block;
  width: min(420px, 100%);
  max-height: 560px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--tutte-border);
  box-shadow: 0 8px 24px rgba(24, 35, 55, 0.08);
  background: #fff;
}