/* Staff skin: admin / operator / musician screens.
   Brief: "operativas, sin florituras, ergonomia para tablets" - large
   touch targets (min 44px), high information density, minimal
   decoration, works in both landscape and portrait tablet viewports.
   Shares brand.css tokens with public.css but stays deliberately plainer. */
@import url('brand.css');

.staff-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.staff-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.staff-main {
  flex: 1;
  padding: var(--space-4);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.staff-nav {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.staff-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.staff-nav a:hover { background: var(--bg-muted); color: var(--text); }
.staff-nav a[aria-current='page'] {
  background: var(--bg-muted);
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--brand-orange);
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.card-title {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  font-weight: 700;
}

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Two-pane staff layouts (event list + detail, song list + editor).
   Collapses to one column on tablet/mobile - the old inline
   `grid-template-columns: 320px 1fr` had no such fallback. */
.split-pane {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  grid-template-columns: 320px minmax(0, 1fr);
}
.split-pane--reverse { grid-template-columns: minmax(0, 1fr) 380px; }
.songs-page .staff-main { max-width: 1800px; }
.songs-workspace {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.songs-browser {
  min-width: 0;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.songs-browser__header,
.songs-editor__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}
.songs-browser__title,
.songs-editor h2 { margin: 0; font-size: 1.35rem; }
.songs-browser__hint,
.songs-editor__tip,
.field-help { color: var(--text-subtle); font-size: 0.78rem; }
.eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--brand-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.songs-search { padding: var(--space-3); }
.songs-search .field-label { margin-bottom: var(--space-2); }
.songs-list-card {
  min-height: 0;
  overflow: auto;
  padding: var(--space-2);
}
.songs-list-card .setlist-row {
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 54px;
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.songs-list-card .setlist-row:hover {
  border-color: var(--brand-orange);
  background: var(--bg-muted);
}
.songs-list-card .setlist-row.is-selected {
  border-color: var(--brand-orange);
  box-shadow: inset 3px 0 0 var(--brand-orange);
  background: color-mix(in srgb, var(--brand-orange) 10%, var(--bg-elevated));
}
.songs-list-card .setlist-row strong { font-size: 0.94rem; }
.songs-list-card .badge { margin-top: 3px; padding: 1px var(--space-2); font-size: 0.68rem; }
.songs-editor {
  min-width: 0;
  min-height: calc(100vh - 112px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.songs-editor__header { margin-bottom: var(--space-5); }
.songs-editor form {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.song-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.song-field { min-width: 0; }
.input-lg {
  min-height: 58px;
  padding: var(--space-3) var(--space-4);
  font-size: 1.08rem;
}
.song-text-grid {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.song-text-grid > .song-field {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.song-text-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.song-text-label .field-label { margin: 0; font-size: 1rem; color: var(--text); }
.song-textarea {
  display: block;
  min-height: 0;
  height: 100%;
  flex: 1;
  resize: vertical;
  padding: var(--space-4);
  line-height: 1.45;
  font-size: 0.93rem;
  tab-size: 4;
}
.songs-editor__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.songs-editor__actions .btn-primary { min-width: 220px; }
.songs-review-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.songs-review-actions__title {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  .split-pane, .split-pane--reverse { grid-template-columns: minmax(0, 1fr); }
  .songs-browser { position: static; max-height: none; }
  .songs-list-card { max-height: 360px; }
  .songs-editor { padding: var(--space-4); }
  .song-meta-grid, .song-text-grid { grid-template-columns: minmax(0, 1fr); }
  .song-field--key { max-width: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .song-meta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .song-field--key { grid-column: 1 / -1; max-width: 220px; }
  .song-text-grid { grid-template-columns: minmax(0, 1fr); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-muted);
  color: var(--text);
  text-decoration: none;
  transition: filter var(--transition-fast) ease;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { filter: brightness(0.92); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

.btn-primary { background: var(--brand-gradient); color: #fff; }
.btn-danger { background: transparent; border-color: var(--state-error); color: var(--state-error); }
.btn-danger:hover { background: color-mix(in srgb, var(--state-error) 14%, transparent); filter: none; }
.btn-outline { background: transparent; border-color: var(--border); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: 0.9em; }
.btn-lg { min-height: 56px; padding: var(--space-3) var(--space-6); font-size: 1.1em; }

.input, select.input, textarea.input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--brand-orange);
}
.input::placeholder { color: var(--text-subtle); }
textarea.input { min-height: 120px; font-family: var(--font-mono); }

.field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Monospace for IPs, codes and other fixed-width data. */
.mono { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-subtle); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-muted);
}
/* Tokenized so they follow the theme - these used to be hardcoded hex. */
.badge-draft { background: color-mix(in srgb, var(--text-subtle) 22%, transparent); color: var(--text-muted); }
.badge-active { background: color-mix(in srgb, var(--state-success) 20%, transparent); color: var(--state-success); }
.badge-paused { background: color-mix(in srgb, var(--state-warning) 20%, transparent); color: var(--state-warning); }
.badge-closed { background: color-mix(in srgb, var(--text-subtle) 22%, transparent); color: var(--text-muted); }
.badge-archived { background: color-mix(in srgb, var(--text-subtle) 14%, transparent); color: var(--text-subtle); }
.badge-danger { background: color-mix(in srgb, var(--state-error) 20%, transparent); color: var(--state-error); }

.setlist-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  margin-bottom: var(--space-2);
  cursor: grab;
}
.setlist-row.dragging { opacity: 0.5; }
.setlist-row.drag-over { border-color: var(--brand-orange); }
.setlist-row[data-status='CURRENT'] { border-left: 4px solid var(--brand-red); }

/* Collapsible section header (duplicate-IP alerts, etc.) */
.section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  margin: 0;
  font-size: 1.05rem;
  min-height: var(--touch-min);
}

.form-error {
  color: var(--state-error);
  font-weight: 600;
  margin: var(--space-2) 0 0;
}

.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon { font-size: 2rem; opacity: 0.6; display: block; margin-bottom: var(--space-2); }
.empty-state__title { font-weight: 700; color: var(--text); }
.empty-state__hint { font-size: 0.9rem; color: var(--text-subtle); margin-top: var(--space-1); }

/* Operator quick actions: destructive controls must never sit flush
   against "next" (docs §10). */
.control-cluster {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.control-cluster--danger { margin-left: auto; padding-left: var(--space-6); }

kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

/* Tablet ergonomics: bump touch targets further in portrait (musicians
   holding a tablet often use thumbs at the screen edges). */
@media (max-width: 900px) and (orientation: portrait) {
  .btn { min-height: 52px; }
  .staff-nav a { min-height: 52px; }
}