/* ══════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-light);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.card h2:first-child {
  margin-top: 0.25rem;
}

.card-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}

.card-meta {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.card-section-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

/* Event list cards (index pages) */
a.event-card {
  display: block;
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration), box-shadow var(--duration);
  position: relative;
}

.event-card-status {
  position: absolute;
  top: 1.25rem;
  right: 1rem;
}

.event-title-status {
  margin-left: 0.5rem;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

a.event-card:hover {
  border-color: var(--color-mid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Inline event marker on rehearsal list */
a.event-inline-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  background: #eff6ff;
  border: 0.5px solid #bfdbfe;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  text-decoration: none;
  color: #1d4ed8;
  font-size: 0.875rem;
  transition: background var(--duration), border-color var(--duration);
}

a.event-inline-card:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.event-inline-card-name {
  font-weight: 600;
  flex: 1;
  color: #1e40af;
}

.event-inline-card-date {
  color: #3b82f6;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════════════════════════════════════ */

.flash {
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.flash--alert {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 0.5px solid var(--color-error-border);
}

.flash--notice {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 0.5px solid var(--color-success-border);
}

/* ══════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════ */

.badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.badge--sub {
  background: #e8f0fe;
  color: #1a56db;
}

.badge--inactive {
  background: #f3f4f6;
  color: var(--color-muted);
}

/* Event status badges */
.badge--event-draft       { background: #f3f4f6; color: var(--color-muted); }
.badge--event-tentative   { background: #fef3c7; color: #92400e; }
.badge--event-firm        { background: #d1fae5; color: #065f46; }
.badge--event-canceled    { background: #fee2e2; color: #991b1b; }

/* Rehearsal status badges */
.badge--rehearsal-scheduled    { background: #d1fae5; color: #065f46; }
.badge--rehearsal-no_rehearsal { background: #fef3c7; color: #92400e; }
.badge--rehearsal-canceled     { background: #fee2e2; color: #991b1b; }
.badge--rehearsal-completed    { background: #e0e7ff; color: #3730a3; }

/* Inline status tag (admin title list) */
.status-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: 0.4rem;
}

.status-tag--draft {
  background: #f0ede8;
  color: #706860;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE ACTIONS
   ══════════════════════════════════════════════════════════════════════ */

/* Legacy page header (title + action button side by side) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  height: 4em;
}

@media (max-width: 480px) {
  .page-header {
    height: auto;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
}

.page-header h1 {
  margin: 0;
  text-align: left;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Action buttons row (back link + right-side actions) */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  height: 4em;
}

.page-actions-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Centered nav tabs (musician show page) */
.musician-nav {
  display: flex;
  gap: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.musician-nav-link {
  font-size: 0.9rem;
  color: var(--color-mid);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   DATA TABLES
   ══════════════════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 0.5px solid var(--color-border-mid);
}

.data-table th.col-title {
  width: 30%;
}

.data-table--musicians-summary th:nth-child(1) { width: 40%; }
.data-table--musicians-summary th:nth-child(2) { width: 30%; }
.data-table--musicians-summary th:nth-child(3) { width: 30%; }

.data-table th.col-shrink,
.data-table td.col-shrink {
  width: 8%;
  white-space: nowrap;
  overflow: hidden;
}

.data-table td {
  padding: 0.375rem 0.75rem 0.375rem 0;
  border-bottom: 0.5px solid var(--color-border-light);
  color: var(--color-dark);
}

.email-cell {
  overflow-wrap: break-word;
  word-break: break-all;
}

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

.data-table-row:hover td {
  background: #f5f5f8;
}

.data-table-link {
  display: block;
  padding: 0.375rem 0.75rem 0.375rem 0;
  color: inherit;
  text-decoration: none;
}

.data-table td:has(.data-table-link) {
  padding: 0;
}

.data-table-title-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
}

/* Expandable table rows */
.data-table-row--expandable {
  cursor: pointer;
}

.data-table-row--expandable:hover {
  background: var(--color-light-silver);
}

.expandable-row-detail {
  background: var(--color-light-silver);
  padding: 0.75rem 1rem;
}

.expandable-detail-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.expandable-detail-fields dt {
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.expandable-detail-fields dd {
  margin: 0;
  word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════
   PROFILE / DETAIL VIEWS
   ══════════════════════════════════════════════════════════════════════ */

.detail-card {
  margin-bottom: 1.25rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 0.75rem;
  column-gap: 1rem;
}

.detail-list dt {
  font-weight: 600;
  color: var(--color-muted);
  font-size: 0.9rem;
  align-self: start;
  padding-top: 0.15rem;
}

.detail-list dd {
  margin: 0;
  color: #111;
  align-self: start;
}

.detail-list code {
  font-family: monospace;
  font-size: 0.85rem;
  background: #f0ece8;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

@media (max-width: 480px) {
  .detail-list {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
  }

  .detail-list dt {
    margin-top: 0.5rem;
  }
}

/* Map direction links */
.map-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Public URL row (show views) */
.public-url-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.public-url-link {
  font-size: 0.875rem;
  word-break: break-all;
}

.copy-btn {
  flex-shrink: 0;
  transition: border-color var(--duration);
}

.copy-btn.copy-btn--copied {
  border-color: var(--color-success);
}

.copy-btn.copy-btn--copied:hover {
  background: #eaf5ee;
}

/* Confirm modal */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.confirm-modal {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.75rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.confirm-modal__message {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
}

.confirm-modal__input-wrap {
  margin-bottom: 1.25rem;
}

.confirm-modal__input {
  width: 100%;
}

.confirm-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.description-block {
  padding-bottom: 0.6rem;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGINATION (pagy series-nav)
   ══════════════════════════════════════════════════════════════════════ */

nav.pagy.series-nav {
  display: flex;
  gap: 0.35rem;
}