/* css/slot-row-states.css — .sc-slot STATES + standalone timeline affordances: slot state classes (active/past/next), editing/drag states, drop-line indicator, add-row dashed button, empty state. Split from css/slot-rows.css in Phase 65 (CSS-01). Imported into components layer immediately after slot-rows.css. */

/* CSS-01 (Phase 75): the duplicate `.sc-btn` base that lived here was DEAD — the empty-state
   CTA (`timetable.js` `.sc-add-first-btn`, classes `sc-btn sc-btn--primary`) has rendered with
   slot-modal.css's general `.sc-btn` family (solid amber) since the import-order conflict, never
   this module's rules. Removed entirely so `.sc-btn` is defined exactly once (slot-modal.css) with
   zero dead code — appearance unchanged. NOTE (backlog): this module's removed CTA rule was the
   ORIGINALLY-intended tinted-amber style for the empty-state CTA; restoring that look would be a
   VISUAL change (out of scope for the behavior-preserving v2.8 cleanup) — see STATE.md deferred items. */

/* ── Slot state classes ─── */

/* Past: reduced emphasis */
.sc-slot--past .sc-slot__card { opacity: .5; }
.sc-slot--past .sc-slot__node { opacity: .5; }

/* Active: amber border + tinted bg + glow — D-V2.0-COLOR-MIX + D-V2.0-NO-TICK-TRANSITION */
.sc-slot--active .sc-slot__card {
  border-color: rgba(232, 168, 56, 0.55);
  border-color: color-mix(in oklab, var(--accent-amber) 55%, transparent);
  background: rgba(232, 168, 56, 0.09);
  background: color-mix(in oklab, var(--accent-amber) 9%, var(--bg-surface));
  box-shadow: 0 0 34px -12px rgba(232, 168, 56, 0.55);
  box-shadow: 0 0 34px -12px color-mix(in oklab, var(--accent-amber) 55%, transparent);
  /* D-V2.0-NO-TICK-TRANSITION: no border/bg/box-shadow transition — these change per tick */
  transition: transform .12s;
}

.sc-slot--active .sc-slot__node {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  /* D-V2.0-COLOR-MIX */
  box-shadow: 0 0 0 4px rgba(232, 168, 56, 0.22);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-amber) 22%, transparent);
}

.sc-slot--active .sc-slot__time .t {
  color: var(--accent-amber);
}

/* Next: amber node outline */
.sc-slot--next .sc-slot__node {
  border-color: var(--accent-amber);
}

/* ── Editing state ─── */
/* CR-02: drop the 3-track (74px 26px 1fr) grid while editing so the editing card
   spans the full row width. */
.sc-slot--editing {
  display: block;
}

.sc-slot--editing-extra {
  /* Extra fields row below the main editing card (mode / duration toggles) */
  grid-column: 1 / -1;
}

/* ── Drag states ─── */
.sc-slot--dragging { opacity: .4; }

/* The dragged-ghost overlay — positioned + sized inline by JS; this rule provides shadow only.
   Relocated from timetable-table.css (DEAD-02) — used by timetable-drag.js:182,248. */
.timetable-drag-ghost {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: var(--radius);
}

/* Drop flash: brief amber bg on dropped slot (200ms; class added + removed by flashDroppedSlot) */
.sc-slot--dropped .sc-slot__card {
  background: rgba(232, 168, 56, 0.25) !important;
  transition: background 200ms ease-out;
}

/* ── Drop line indicator ─── */
.sc-drop-line {
  background: var(--accent-amber);
  /* D-V2.0-COLOR-MIX — box-shadow uses amber; static value only (no color-mix needed here) */
  box-shadow: 0 0 6px rgba(232, 168, 56, 0.5);
  border-radius: 2px;
  height: 2px;
}

/* ── Add-row dashed button ─── */
.sc-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 100px);
  margin: 8px 0 0 100px;
  background: none;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.sc-add-row:hover {
  color: var(--accent-amber);
  /* D-V2.0-COLOR-MIX */
  border-color: rgba(232, 168, 56, 0.50);
  border-color: color-mix(in oklab, var(--accent-amber) 50%, transparent);
  background: rgba(232, 168, 56, 0.07);
  background: color-mix(in oklab, var(--accent-amber) 7%, transparent);
}

.sc-add-row svg { width: 17px; height: 17px; }

/* ── Empty state ─── */
.sc-empty {
  text-align: center;
  padding: 70px 20px;
}

.sc-empty__ic {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--accent-amber);
}

.sc-empty__ic svg { width: 26px; height: 26px; }

.sc-empty h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 7px;
  color: var(--text-primary);
}

.sc-empty p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 22px;
}