/* Slates page. Builds on style.css (tokens, cards, player, break strip, ad buttons, page nav). */

body.slates-page {
  display: block;
  padding: 20px 20px 40px;

  /* Same chart roles as the health page */
  --chart-series-1: #3987e5;      /* difference */
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-reference: #94a3b8;     /* threshold line */
  --status-warning: #f59e0b;
  --status-critical: #ef4444;
}

.slates-header {
  max-width: 1300px;
  margin: 0 auto 20px;
  gap: 16px;
}

.slates-locked {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 32px;
}

.slates-locked a {
  text-decoration: none;
  width: auto;
  padding: 12px 24px;
}

.slates-layout {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
}

.slates-card {
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.slates-wide {
  grid-column: 1 / -1;
}

.slates-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.slates-ad-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.slates-ad-buttons .btn-ad {
  padding: 10px 6px;
}

.chart-state {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ---------- form fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.slates-page input[type="text"],
.slates-page input[type="number"],
.slates-page input[type="file"],
.slates-page select {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.slates-page input[type="file"] {
  padding: 6px 8px;
}

.slates-page input:focus,
.slates-page select:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 10px var(--accent-glow);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-purple);
}

.slates-page button:disabled {
  opacity: 0.45;
  cursor: default;
}

.form-message {
  font-size: 12px;
  color: var(--text-secondary);
}

.form-message.error {
  color: var(--status-critical);
}

.form-message.ok {
  color: var(--live-green);
}

/* ---------- detector card ---------- */

.detect-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.detect-state::before { font-weight: 800; }
.detect-state.armed { border-color: var(--live-green); }
.detect-state.armed::before { content: "\2713"; color: var(--live-green); }
.detect-state.in-break,
.detect-state.break-announced { border-color: var(--accent-purple); }
.detect-state.in-break::before,
.detect-state.break-announced::before { content: "\25B6"; color: var(--accent-purple); }
.detect-state.cooldown { border-color: var(--status-warning); }
.detect-state.cooldown::before { content: "\23F8"; color: var(--status-warning); }
.detect-state.no-video { border-color: var(--status-critical); }
.detect-state.no-video::before { content: "\2715"; color: var(--status-critical); }
.detect-state.disabled::before { content: "\2014"; color: var(--text-secondary); }

.detect-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detect-fact {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
}

.fact-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 2px;
}

.fact-value {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.detect-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.detect-settings .check-row {
  flex-basis: 100%;
}

.detect-settings .field {
  width: 220px;
}

/* ---------- upload ---------- */

.upload-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(150px, 1fr) 110px 120px auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}

.upload-form .form-message {
  grid-column: 1 / -1;
}

.upload-btn {
  white-space: nowrap;
}

/* ---------- slate cards ---------- */

.slate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slate-card {
  display: grid;
  grid-template-columns: 200px 150px minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}

.slate-card.matched {
  border-color: var(--live-green);
  box-shadow: 0 0 0 1px var(--live-green) inset;
}

.slate-card.off {
  opacity: 0.6;
}

.slate-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: fill; /* stretched like the comparison: it ignores the image's aspect ratio */
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
}

.slate-live {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slate-live .live-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.slate-live .live-value {
  font-family: monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.slate-live .live-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.match-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--live-green);
  color: var(--live-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.match-badge::before { content: "\2713"; }

.slate-chart {
  min-width: 0;
}

.slate-chart .chart-svg {
  width: 100%;
  height: 110px;
  display: block;
  touch-action: none;
}

.chart-svg text {
  fill: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
}

.slate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slate-fields .field-name {
  grid-column: 1 / -1;
}

.slate-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.slate-actions .spacer {
  flex: 1;
}

.btn-delete:hover {
  border-color: var(--status-critical);
  color: var(--status-critical);
}

.slate-error {
  font-size: 12px;
  color: var(--status-critical);
}

/* ---------- tooltip ---------- */

.chart-tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: rgba(9, 13, 22, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chart-tooltip .tip-time {
  color: var(--text-secondary);
  font-family: monospace;
}

@media (max-width: 1100px) {
  .slate-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .slate-chart,
  .slate-fields {
    grid-column: 1 / -1;
  }

  .upload-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .slates-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .slates-ad-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .slate-card,
  .upload-form {
    grid-template-columns: minmax(0, 1fr);
  }
}