/* DJ Console — extends styles.css */

/* ── Auth Gate ── */
.auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.auth-gate.hidden { display: none; }
.auth-gate__inner { text-align: center; }
.auth-gate__inner h1 {
  font-family: 'Lilex', monospace; font-size: 1.8rem; font-weight: 800;
  color: var(--accent); margin: 0 0 .5rem;
}
.auth-gate__inner p { color: var(--text-dim); margin: 0 0 1.5rem; }
.btn-primary {
  display: inline-block; padding: .7rem 1.5rem;
  background: var(--accent); color: var(--btn-text);
  border: none; border-radius: .3rem; font-weight: 700;
  text-decoration: none; cursor: pointer; font-size: .95rem;
}
.btn-primary:hover { background: var(--accent-2); color: var(--btn-text); text-decoration: none; }

/* ── Console Header ── */
.console-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.25rem; min-height: 48px;
  background: linear-gradient(180deg, rgba(12,13,15,.97) 0%, rgba(12,13,15,.92) 100%);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.console-header__left { display: flex; align-items: center; gap: .75rem; }
.console-label {
  font-family: 'Lilex', monospace; font-size: .8rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em;
}
.console-header__center {
  display: flex; align-items: center; gap: 1rem;
  font-family: 'Lilex', monospace; font-size: .85rem;
}
.live-badge { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.live-badge--live { color: var(--green); }
.header-stat { color: var(--text-dim); }
.console-header__right { display: flex; gap: .5rem; }

.btn-live {
  padding: .45rem 1rem; border-radius: .25rem; border: none;
  background: var(--green); color: #111; font-weight: 700;
  cursor: pointer; font-size: .85rem;
}
.btn-live:hover { background: #8fd8a8; }
.btn-live--end {
  background: var(--red); color: #fff;
}
.btn-live--end:hover { background: #ef5555; }

/* ── Console Shell (3-column) ── */
.console-shell {
  display: grid; grid-template-columns: 260px 1fr 320px;
  gap: 1rem; padding: 1rem 1.25rem;
  height: calc(100vh - 50px); min-height: 0;
}

/* ── Left: Source Browser ── */
.console-sources {
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 0; overflow: hidden;
}
.source-results {
  list-style: none; padding: 0; margin: 0;
  flex: 1; overflow-y: auto; min-height: 0;
}
.source-results:empty::after {
  content: "Search for tracks above"; color: var(--text-dim);
  font-style: italic; font-size: .85rem; padding: .5rem;
  display: block;
}
.source-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .5rem; border-bottom: 1px solid var(--line);
  font-size: .8rem; cursor: default;
}
.source-item:hover { background: var(--panel); }
.source-item__info { flex: 1; min-width: 0; }
.source-item__title {
  font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.source-item__creator {
  color: var(--text-dim); font-size: .75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-item__add {
  flex-shrink: 0; width: 24px; height: 24px;
  background: none; border: 1px solid var(--border);
  color: var(--accent); border-radius: .2rem;
  cursor: pointer; font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.source-item__add:hover { background: var(--panel-2); border-color: var(--accent); }

/* Album rows — slightly elevated background */
.source-item--album { background: var(--panel); }
.source-item--album:hover { background: var(--panel-2); }

/* Track rows — indented with tree connector lines */
.source-item--track {
  padding-left: 1.4rem;
  position: relative;
}
.source-item--track::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0; bottom: 0;
  border-left: 1px solid var(--border);
}
.source-item--track::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 0.45rem;
  border-top: 1px solid var(--border);
}
.source-item--track .source-item__title { font-weight: 400; }

.source-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
}
.source-tab {
  flex: 1; padding: .4rem; background: none; border: none;
  color: var(--text-dim); font-size: .75rem; font-weight: 600;
  cursor: pointer; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid transparent;
}
.source-tab:hover { color: var(--text); }
.source-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.source-library {
  list-style: none; padding: 0; margin: 0;
  flex: 1; overflow-y: auto; min-height: 0;
}

.queue-stats {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--text-dim);
  font-family: 'Lilex', monospace; padding: .4rem .2rem;
  border-top: 1px solid var(--line);
}

/* ── Center: Broadcast Controls ── */
.console-broadcast {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 0; overflow: hidden;
}
.console-np { flex-shrink: 0; }
.console-np__status {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .5rem; font-size: .8rem; font-weight: 600;
}
.console-np__title {
  font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.3;
}
.console-np__creator {
  font-size: .9rem; color: var(--text-dim); margin: .15rem 0 .5rem;
}
.console-np__actions {
  display: flex; gap: .5rem; margin-top: .6rem;
}

/* ── Setlist bar ── */
.queue-setlist-bar {
  display: flex; gap: .4rem; align-items: center;
  padding: .4rem 0 .5rem; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.setlist-select {
  flex: 1; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: .25rem;
  padding: .25rem .4rem; font-size: .78rem;
}

/* ── Queue management ── */
.console-queue { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.console-queue .section-heading { flex-shrink: 0; }
.queue-manage {
  list-style: none; padding: 0; margin: 0;
  flex: 1; overflow-y: auto; min-height: 0;
}
.queue-manage-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .3rem; border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.queue-manage-item:last-child { border-bottom: none; }
.queue-manage-item:hover { background: var(--panel-2); }
.queue-drag {
  cursor: grab; color: var(--text-dim); font-size: .75rem;
  padding: .15rem; user-select: none;
}
.queue-drag:active { cursor: grabbing; }
.queue-manage-info { flex: 1; min-width: 0; }
.queue-manage-title {
  font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.queue-manage-creator {
  color: var(--text-dim); font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.queue-manage-dur {
  font-family: 'Lilex', monospace; font-size: .75rem;
  color: var(--text-dim); flex-shrink: 0;
}
.queue-manage-actions { display: flex; gap: .15rem; flex-shrink: 0; }
.queue-manage-actions button {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: .2rem; font-size: .8rem; border-radius: .15rem;
}
.queue-manage-actions button:hover { color: var(--text); background: var(--panel); }

/* ── Right: Chat + Requests ── */
.console-sidebar {
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 0; overflow-y: auto;
}
.console-sidebar .sidebar-chat { flex: 1; min-height: 200px; max-height: 300px; }
.console-sidebar .chat-messages-mini { min-height: 100px; }

.console-requests { flex-shrink: 0; max-height: 250px; overflow: hidden; display: flex; flex-direction: column; }
.console-requests .section-heading { flex-shrink: 0; }
.requests-manage {
  list-style: none; padding: 0; margin: 0;
  overflow-y: auto; flex: 1; min-height: 0;
}
.requests-manage:empty::after {
  content: "No requests yet"; color: var(--text-dim);
  font-style: italic; font-size: .85rem;
}
.request-manage-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.request-manage-item:last-child { border-bottom: none; }
.request-manage-score {
  font-family: 'Lilex', monospace; font-weight: 700;
  color: var(--accent); min-width: 2ch; text-align: right; font-size: .8rem;
}
.request-manage-score::before { content: "▲"; font-size: .65rem; margin-right: .2rem; }
.request-manage-info { flex: 1; min-width: 0; }
.request-manage-title {
  font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.request-manage-by { color: var(--text-dim); font-size: .75rem; }
.request-manage-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.btn-accept {
  padding: .2rem .5rem; font-size: .7rem; font-weight: 700;
  background: var(--green); color: #111; border: none;
  border-radius: .2rem; cursor: pointer;
}
.btn-accept:hover { background: #8fd8a8; }
.btn-dismiss {
  padding: .2rem .4rem; font-size: .75rem;
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: .2rem; cursor: pointer;
}
.btn-dismiss:hover { color: var(--red); border-color: var(--red); }

/* ── Show Notes ── */
.console-notes { flex-shrink: 0; }
.notes-textarea {
  width: 100%; padding: .5rem .7rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: .25rem;
  font-size: .85rem; font-family: inherit; resize: vertical;
  outline: none; line-height: 1.4;
}
.notes-textarea:focus { border-color: var(--accent); }
.console-notes .btn-sm { margin-top: .4rem; }

/* ── Station Settings ── */
.console-settings { flex-shrink: 0; }
.console-settings summary { list-style: none; }
.console-settings summary::-webkit-details-marker { display: none; }
.console-settings .form-label { font-size: .8rem; margin-top: .5rem; }
.console-settings .search-input, .console-settings .notes-textarea { font-size: .8rem; }
.console-settings .btn-sm { margin-top: .5rem; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .console-shell { grid-template-columns: 220px 1fr 280px; }
}
@media (max-width: 900px) {
  .console-shell {
    grid-template-columns: 1fr;
    height: auto; overflow: visible;
  }
  .console-sources { max-height: 300px; }
  .console-sidebar { max-height: none; }
}