/* css/slot-modal.css — Phase 44: Slot Add/Edit Modal overlay.
   All rules within @layer components (imported from style.css).
   D-V2.0-COLOR-MIX: every color-mix declaration must have an rgba() fallback on the preceding line. */

/* ── Backdrop ──────────────────────────────────────── */

.sc-backdrop {
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  z-index: 200; /* above timetable panel, below toasts */
}

.sc-backdrop[hidden] {
  display: none;
}

/* ── Modal card ────────────────────────────────────── */

@keyframes sc-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.sc-modal {
  background: var(--bg-panel, #1a1a1a);
  border: 1px solid var(--text-muted, #333);
  border-radius: var(--radius, 8px);
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: sc-modal-in 150ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sc-modal { animation: none; }
}

/* ── Modal head ────────────────────────────────────── */

.sc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--text-muted, #333);
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.sc-modal__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #f0f0f0);
  margin: 0;
  flex: 1;
}

/* ── Modal body ────────────────────────────────────── */

.sc-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  overflow-y: auto;
  flex: 1;
}

/* ── Modal footer ──────────────────────────────────── */

.sc-modal__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--text-muted, #333);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.sc-modal__foot-spacer {
  flex: 1;
}

/* ── Two-column row ────────────────────────────────── */

.sc-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 12px);
}

/* ── Field wrapper ─────────────────────────────────── */

.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.sc-field__lbl {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted, #aaa);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sc-field__opt {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  opacity: 0.7;
  margin-left: 0.3em;
}

/* ── Input / textarea ──────────────────────────────── */

.sc-input {
  background: var(--bg-surface-2, #1c2026);
  border: 1px solid var(--text-muted, #444);
  border-radius: calc(var(--radius, 8px) - 2px);
  color: var(--text-primary, #f0f0f0);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
  -webkit-appearance: none;
  appearance: none;
}

.sc-input:focus {
  outline: none;
  border-color: var(--accent-amber, #e8a838);
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.18); /* fallback */
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-amber) 18%, transparent);
}

.sc-input--ta {
  resize: vertical;
  min-height: 4rem;
}

.sc-input--mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.sc-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Attachment block ──────────────────────────────── */

.sc-attach {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

/* ── Artwork block (per-slot logo upload) ──────────── */

.sc-artwork {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.sc-artwork__preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xs, 4px);
  object-fit: contain;
  background: var(--bg-surface-3, #1c2026);
  border: 1px solid var(--border-subtle, #333);
  display: block;
}

/* WR-05: match onerror removeAttribute('src') + keep [src=""] gate (mirrors slot-rows.css:155 / slot-cards.css:230) */
.sc-artwork__preview:not([src]),
.sc-artwork__preview[src=""] { display: none; }

/* ── More options disclosure ───────────────────────── */

.sc-more {
  display: flex;
  flex-direction: column;
}

.sc-more__btn {
  background: none;
  border: none;
  color: var(--accent-amber, #e8a838);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: var(--space-1, 4px) 0;
  text-align: left;
  opacity: 0.85;
}

.sc-more__btn:hover { opacity: 1; }

.sc-more__inner {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 200ms ease;
}

.sc-more.open .sc-more__inner {
  grid-template-rows: 1fr;
}

.sc-more__inner > * {
  min-height: 0;
}

.sc-more__inner > div,
.sc-more__inner > input,
.sc-more__inner > p {
  min-height: 0;
}

/* The disclosure inner wrapper holds multiple children; wrap them */
.sc-more__inner > :first-child,
.sc-more__inner > :not(:first-child) {
  min-height: 0;
}

/* AUDIT-G: .sc-more__body removed — zero live refs */

/* Since the children are direct, they all need min-height: 0 via the grid trick */
.sc-more__inner .sc-seg,
.sc-more__inner .sc-field,
.sc-more__inner .sc-toggle,
.sc-more__inner input[type="hidden"] {
  min-height: 0;
  margin-bottom: var(--space-3, 12px);
}

/* ── Segmented timing mode control ─────────────────── */

.sc-seg {
  display: flex;
  border: 1px solid var(--text-muted, #555);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.sc-seg__btn {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  color: var(--text-muted, #aaa);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.sc-seg__btn + .sc-seg__btn {
  border-left: 1px solid var(--text-muted, #555);
}

.sc-seg__btn.on {
  background: rgba(232, 168, 56, 0.20); /* fallback */
  background: color-mix(in oklab, var(--accent-amber) 20%, transparent);
  color: var(--accent-amber, #e8a838);
}

/* ── Toggle + switch ───────────────────────────────── */

.sc-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  cursor: pointer;
  user-select: none;
}

.sc-toggle--inline {
  flex-shrink: 0;
}

.sc-toggle__txt {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary, #f0f0f0);
  line-height: 1.3;
}

.sc-toggle__txt small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted, #aaa);
  margin-top: 0.1rem;
}

.sc-switch {
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--text-muted, #555);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 150ms, border-color 150ms;
}

.sc-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--text-muted, #555);
  transition: transform 150ms, background 150ms;
}

.sc-switch.on {
  background: rgba(232, 168, 56, 0.32); /* fallback */
  background: color-mix(in oklab, var(--accent-amber) 32%, transparent);
  border-color: rgba(232, 168, 56, 0.55); /* fallback */
  border-color: color-mix(in oklab, var(--accent-amber) 55%, transparent);
}

.sc-switch.on::after {
  transform: translateY(-50%) translateX(1rem);
  background: var(--accent-amber, #e8a838);
}

/* ── Hint text ─────────────────────────────────────── */

.sc-hint {
  font-size: 0.78rem;
  color: var(--text-muted, #aaa);
  margin: 0.2rem 0 0;
}

.sc-hint[hidden] { display: none; }

/* ── Buttons ───────────────────────────────────────── */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.45rem 1rem;
  border-radius: calc(var(--radius, 8px) - 2px);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, opacity 120ms;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc-btn--primary {
  background: var(--accent-amber, #e8a838);
  color: var(--ink-on-accent); /* AUD-F41 */
  border-color: var(--accent-amber, #e8a838);
}

.sc-btn--primary:hover {
  opacity: 0.88;
}

.sc-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.70); /* fallback */
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-amber) 70%, transparent);
}

.sc-btn--ghost {
  background: transparent;
  color: var(--text-secondary, #ccc);
  border-color: var(--text-muted, #555);
}

.sc-btn--ghost:hover {
  background: color-mix(in oklab, var(--fg) 6%, transparent);
}

.sc-btn--danger {
  background: transparent;
  color: var(--color-error, #ef5b5b);
  border-color: rgba(239, 91, 91, 0.50); /* fallback */
  border-color: color-mix(in oklab, var(--color-error) 50%, transparent);
}

.sc-btn--danger:hover {
  background: rgba(239, 91, 91, 0.14); /* fallback */
  background: color-mix(in oklab, var(--color-error) 14%, transparent);
}

/* ── Icon button ───────────────────────────────────── */

.sc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted, #aaa);
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
  position: relative;
}

/* Review P4: 44px hit area on coarse pointers (visual stays 32px) */
@media (pointer: coarse) {
  .sc-iconbtn::after { content: ''; position: absolute; inset: -6px; }
}

.sc-iconbtn:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  color: var(--text-primary, #f0f0f0);
}

.sc-iconbtn--danger:hover {
  background: rgba(239, 91, 91, 0.16); /* fallback */
  background: color-mix(in oklab, var(--color-error) 16%, transparent);
  color: var(--color-error, #ef5b5b);
}

/* ── Text selection ────────────────────────────────── */

.sc-modal ::selection {
  background: rgba(232, 168, 56, 0.40); /* fallback */
  background: color-mix(in oklab, var(--accent-amber) 40%, transparent);
}

/* ── CSS data-mode visibility gates ────────────────── */

/* Delete only visible in edit mode */
#slot-modal-delete-btn { display: none; }
.sc-backdrop[data-mode="edit"] #slot-modal-delete-btn { display: inline-flex; }

/* Add-another wrapper only visible in add mode */
#slot-modal-add-another-wrap { display: none; }
.sc-backdrop:not([data-mode="edit"]) #slot-modal-add-another-wrap { display: flex; }