/* css/timetable-table.css — Inner timetable table base rendering (rows, hover, sortable, active/next/past variants — NON-editing). Imported into the components layer. */

/* ── Table base + non-editing rows (Section 9 base from legacy.css) ─── */
.timetable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.timetable-table thead th {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(240, 236, 228, 0.1);
  white-space: nowrap;
}

.timetable-row td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
  border-bottom: 1px solid rgba(240, 236, 228, 0.04);
  transition: background var(--transition);
}

/* State: past */
.timetable-row--past td {
  opacity: 0.35;
}

/* State: active (currently on) */
.timetable-row--active td {
  background: rgba(232, 168, 56, 0.07);
}

.timetable-row--active .timetable-row__time {
  color: var(--accent-amber);
  font-weight: 700;
}

.timetable-row--active .timetable-row__label {
  font-weight: 600;
}

/* Accent bar via box-shadow on time td */
/* Phase 28: was first-child; drag handle column added in front, so accent bar moves to the time cell (now nth-child(2)). */
.timetable-row--active td:nth-child(2) {
  box-shadow: inset 3px 0 0 var(--accent-amber);
}

/* State: countdown separator */
.timetable-row--countdown td {
  padding: 6px var(--space-3);
  text-align: center;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--accent-amber);
  background: rgba(232, 168, 56, 0.05);
  letter-spacing: 0.04em;
}

/* State: next slot (row just after countdown) */
.timetable-row--next .timetable-row__label {
  color: var(--text-primary);
}

/* Hover on editable rows */
.timetable-row:not(.timetable-row--countdown):not(.timetable-row--past):hover td {
  background: rgba(240, 236, 228, 0.04);
  cursor: pointer;
}

.timetable-row--past:hover td {
  cursor: pointer;
  opacity: 0.55;
}

/* Columns */
.timetable-row__time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--text-muted);
}

.timetable-row__type {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.timetable-row__label {
  color: var(--text-primary);
}

.timetable-row__notes-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.timetable-row__duration {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
}

/* Empty state */
.timetable-empty {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.83rem;
}

/* ── Phase 11 — operator-perspective row highlight (relocated from legacy.css section 8e in Phase 18 per R-PATTERNS-CW2-2) ─── */
/* Phase 11 — "this is my slot" row highlight (right-edge stripe, never collides with --active left bar) */
.timetable-row--mine {
  box-shadow: inset 0 0 0 2px rgba(232, 168, 56, 0.55);
}

.timetable-row--mine td:last-child {
  box-shadow: inset -3px 0 0 var(--accent-amber);
}

.timetable-row--mine .timetable-row__time {
  color: var(--accent-amber);
  font-weight: 700;
}

.timetable-row--mine .timetable-row__label {
  font-weight: 600;
}

/* ── Phase 30 SHR-10 (D-30-05) — operator-set pickedBy badge + override precedence over band self-pick.
       Same source-order routing as .timetable-row--mine (R-PATTERNS-CW2-2). ─── */
.timetable-row__pick {
  margin-left: var(--space-2);
  font-size: 0.9em;
  opacity: 0.85;
}

.timetable-row__pick--op {
  color: var(--accent-amber);
  font-weight: 600;
}

.timetable-row__pick--band {
  color: var(--text-muted);
}

/* When the operator has picked this slot, displace the band's --mine highlight on the SAME slot.
       Override is one-way: band local pick is NOT cleared (notifications still fire), only the visual
       highlight defers to the operator's authoritative pick.
       Phase 30 review F-02: D-30-05 mandates the band's --mine highlight is fully displaced. The
       original override neutralized only the outer ring + right-edge stripe (box-shadow), but
       --mine also applies amber color + 700 weight on .timetable-row__time and 600 weight on
       .timetable-row__label. Without the typography override, an operator-picked row that the
       band also self-picked rendered with double-amber emphasis instead of "operator wins". The
       extra rules below revert that row's time + label cells to the default (un-mine) typography
       so the only highlight left is the amber 🎤 badge from .timetable-row__pick--op. */
.timetable-row--mine.timetable-row--pickedby-op {
  box-shadow: none;
}

.timetable-row--mine.timetable-row--pickedby-op td:last-child {
  box-shadow: none;
}

.timetable-row--mine.timetable-row--pickedby-op .timetable-row__time {
  color: var(--text-muted);
  font-weight: inherit;
}

.timetable-row--mine.timetable-row--pickedby-op .timetable-row__label {
  font-weight: inherit;
}

/* ── Phase 5 — read-only row paperclip icon (relocated from legacy.css section 10d in Phase 18 per R-PATTERNS-CW2-4 — renders on non-editing rows) ─── */
/* Paperclip icon in read-only timetable row */
.timetable-row__attach-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  opacity: 0.6;
  vertical-align: middle;
  margin-left: var(--space-1);
  transition: opacity 0.15s;
}

.timetable-row__attach-btn:hover {
  opacity: 1;
}

/* ── Phase 28 (UX-06) — drag handle + drop indicator + ghost + drop flash ─── */
/* Leftmost drag-handle cell. Glyph rendered as inline text from js/timetable.js. */
.timetable-row__drag {
  width: 28px;
  text-align: center;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
  touch-action: none; /* prevent scroll-hijack on touch devices that we explicitly bail on */
}

.timetable-row__drag:hover {
  opacity: 1;
  color: var(--accent-amber);
}

/* Empty header cell for the drag column — reserves layout space, no visual content. */
.timetable-header__drag {
  width: 28px;
}

/* Source row visual state while drag is in progress. */
.timetable-row--dragging td,
.stage-row--dragging td {
  opacity: 0.3;
  cursor: grabbing;
}

/* The dragged-ghost overlay — positioned + sized inline by JS; this rule provides shadow only. */
.timetable-drag-ghost {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: var(--radius);
}

/* The horizontal amber insertion-point line — positioned inline by JS. */
.timetable-drop-indicator {
  background: var(--accent-amber);
  box-shadow: 0 0 6px rgba(232, 168, 56, 0.5);
}

/* Brief amber flash on the just-dropped row (200ms; class added + removed by flashDroppedSlot). */
.timetable-row--dropped td {
  background: rgba(232, 168, 56, 0.25) !important;
  transition: background 200ms ease-out;
}