/**
 * SPBX Sound — shared design system (admin, review, presentation)
 * Loads after page inline styles to override legacy gold theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300&display=swap');

:root {
  --background: #0D0D0D;
  --surface: #111111;
  --surface-raised: #1A1A1A;
  --accent: #5B7FA6;
  --accent-dim: rgba(91, 127, 166, 0.35);
  --accent-border: rgba(91, 127, 166, 0.15);
  --accent-border-hover: rgba(91, 127, 166, 0.4);
  --accent-soft: rgba(91, 127, 166, 0.1);
  --accent-soft-hover: rgba(91, 127, 166, 0.05);
  --identity: #A8874A;
  --identity-soft: rgba(168, 135, 74, 0.15);
  --text: #F0EDE6;
  --text-dim: rgba(240, 237, 230, 0.38);
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

@keyframes spbxPageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spbxFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

html {
  color-scheme: dark;
}

body {
  background: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(91, 127, 166, 0.04) 0%, transparent 70%), var(--background) !important;
  background-color: var(--background) !important;
  color: var(--text) !important;
  animation: spbxPageFade 0.6s ease both;
}

.app {
  animation: spbxFadeUp 1.1s ease both 0.1s;
}

/* ── Typography ── */
.gate-title,
.auth-title,
.np-title,
.title-main,
.rank-head h2,
.hub-title,
.modal-title,
.gate-card h1 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.brand,
.brand .brand-text,
.brand .brand-label,
.bproj {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  color: var(--identity) !important;
  font-size: 17px;
}

.bproj .top-proj-name {
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  color: var(--text) !important;
}

.bproj .top-client {
  font-size: 17px;
  font-weight: 600;
  font-style: normal;
}

/* ── Surfaces & chrome ── */
.topbar,
.project-sidebar,
.file-panel,
.gate-card,
.auth-card,
.rank-panel,
.modal-card,
.hub-card,
.tile,
.note-item,
.toast,
.waveform,
.player-panel,
.review-player-col,
.review-media-zone,
.review-scroll-below > .file-panel,
.review-scroll-below > .review-notes-zone,
.filmstrip,
.now-playing,
.audio-player,
.decision-section,
.mobile-menu-panel {
  background: var(--surface) !important;
  border-color: var(--accent-border) !important;
}

.topbar,
.project-sidebar,
.file-panel,
.divider,
.now-playing,
.audio-player,
.decision-section,
.ps-footer,
.posting-tabs,
.rank-head,
.mobile-menu-panel {
  border-color: var(--accent-border) !important;
}

.player-panel,
.review-player-col,
.review-media-zone,
.review-notes-zone,
.review-scroll-below > .review-notes-zone {
  background: var(--background) !important;
}

.fp-row:hover,
.ps-item:hover,
.ptab:hover,
.tile:hover,
.fp-folder-head:hover,
.rank-close:hover {
  background: var(--accent-soft-hover) !important;
}

.fp-row.active,
.ps-item.active,
.tile.active,
.ptab.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border-hover) !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}

/* ── Labels / eyebrows ── */
.fp-head,
.ps-head,
.ds-label,
.ns-label,
.gate-kicker,
.auth-field-label,
.gate-label,
.hub-eyebrow,
.section-label {
  color: rgba(91, 127, 166, 0.7) !important;
}

/* ── Inputs ── */
.gate-input,
.auth-input,
.note-input,
.note-name-input,
.tb-posting-select,
.topbar select,
.field-inp,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(91, 127, 166, 0.3) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
}

.gate-input:focus,
.auth-input:focus,
.note-input:focus,
.note-name-input:focus,
.tb-posting-select:focus,
.topbar select:focus,
input:focus,
textarea:focus {
  outline: none !important;
  border-bottom-color: var(--accent) !important;
}

/* ── Primary buttons ── */
.gate-btn,
.auth-btn,
.play-btn,
.vid-play-btn,
.btn-primary,
.exp-primary {
  background: var(--accent) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 0 !important;
}

.gate-btn:hover,
.auth-btn:hover,
.btn-primary:hover {
  filter: brightness(1.08);
}

/* ── Ghost buttons ── */
.signout,
.btn-ghost,
.rankings-btn,
.tb-tool-btn,
.np-dl-btn,
.note-send,
.add-btn,
.fp-add,
.fp-add-folder,
.ps-copy,
.ps-set,
.ptab-review,
.ptab-pres,
.fp-dl-btn,
.fp-folder-tool,
.ctrl-btn,
.rank-close,
.hub-btn,
.modal-btn,
.exp-secondary,
.exp-full {
  background: none !important;
  border: 1px solid rgba(91, 127, 166, 0.35) !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
  transition: background 0.2s, color 0.2s;
}

.signout:hover,
.btn-ghost:hover,
.rankings-btn:hover,
.tb-tool-btn:hover,
.np-dl-btn:hover,
.note-send:hover,
.add-btn:hover,
.fp-add:hover,
.ps-copy:hover,
.ps-set:hover,
.ptab-review:hover,
.ptab-pres:hover,
.fp-dl-btn:hover,
.fp-folder-tool:hover,
.ctrl-btn:hover,
.hub-btn:hover,
.modal-btn:hover,
.exp-secondary:hover:not(:disabled),
.exp-full:hover:not(:disabled) {
  background: var(--accent) !important;
  color: var(--background) !important;
  border-color: var(--accent) !important;
}

/* ── Accent color replacements ── */
.morse-bar {
  background: linear-gradient(90deg, transparent, rgba(91, 127, 166, 0.35), transparent) !important;
  border-top-color: var(--accent-border) !important;
}

.prog-fill,
.vid-pf,
.tl-fill,
.prog-fill,
.review-loading-spinner {
  background: var(--accent) !important;
}

.review-loading-spinner {
  border-color: var(--accent-border) !important;
  border-top-color: var(--accent) !important;
}

.rank-pill,
.np-badge,
.status-pill,
.hub-status {
  border-radius: 999px;
}

.rank-pill,
.np-badge {
  background: rgba(91, 127, 166, 0.15) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-border-hover) !important;
}

.note-ts,
.rank-section-title,
.copy-flash--ok,
.toast--success {
  color: var(--accent) !important;
}

.toast--success,
.copy-flash--ok {
  border-color: var(--accent-border-hover) !important;
  background: var(--accent-soft) !important;
}

.fp-orphan-warn {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent-border-hover) !important;
  border-radius: 0 !important;
}

/* ── Vote buttons ── */
.thumb-btn,
.vote-btn {
  border-radius: 0 !important;
  border-color: var(--accent-border) !important;
  background: var(--surface) !important;
}

.thumb-btn.yes.active,
.vote-btn.like.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.thumb-btn.maybe.active,
.vote-btn.maybe.active {
  background: rgba(168, 135, 74, 0.12) !important;
  border-color: var(--identity) !important;
}

.thumb-btn.no.active,
.vote-btn.pass.active {
  background: rgba(180, 80, 80, 0.15) !important;
  border-color: #c47070 !important;
}

/* ── Modals ── */
.rank-panel,
.modal-card,
.auth-card,
.gate-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 32px !important;
}

.rank-backdrop,
.modal-backdrop,
.auth-screen {
  background: rgba(13, 13, 13, 0.88) !important;
}

/* ── Lists / tables ── */
.rank-table th,
.rank-table td,
.fp-row,
.ps-item,
.hub-list-row {
  border-bottom: 1px solid rgba(91, 127, 166, 0.12) !important;
}

.rank-table th {
  color: var(--text-dim) !important;
}

/* ── Logo (wide wordmark — height follows row, not square) ── */
.logo,
.brand .logo,
.mx-logo-img {
  height: 22px;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  mix-blend-mode: screen;
  border-radius: 0 !important;
}

.gate-logo,
.auth-logo {
  height: 32px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  mix-blend-mode: screen;
  border-radius: 0 !important;
}

.mx-logo-img {
  height: 24px;
}

/* ── Remove legacy rounded UI chrome ── */
.waveform,
.toast,
.gate-card,
.auth-card,
.fp-row,
.ps-item,
.tile,
.note-item,
.hub-card,
.track-card,
.zone,
.prev-bar,
.drop-area,
.file-pill,
.field-inp,
.note-input,
.note-name-input,
.rank-panel,
.mobile-menu-panel {
  border-radius: 0 !important;
}

/* ── Presentation fullscreen ── */
.present-fs-root:fullscreen,
.present-fs-root:-webkit-full-screen {
  background: #000 !important;
}

.fs-exit-btn {
  border-color: var(--accent-border-hover) !important;
  color: var(--accent) !important;
  border-radius: 0 !important;
}

/* ── Admin hub tiles ── */
.hub-tile,
.posting-tile {
  background: var(--surface) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 0 !important;
}

.hub-tile:hover,
.posting-tile:hover {
  border-color: var(--accent-border-hover) !important;
}

/* ── Status badges (brief) ── */
.badge-pending {
  background: rgba(91, 127, 166, 0.15) !important;
  color: var(--accent) !important;
}

.badge-approved,
.status-done {
  background: rgba(74, 168, 70, 0.15) !important;
  color: #6aaa66 !important;
}

.badge-flagged,
.status-error {
  background: rgba(180, 80, 80, 0.15) !important;
  color: #c47070 !important;
}

.badge-draft {
  background: rgba(168, 135, 74, 0.15) !important;
  color: var(--identity) !important;
}

/* ── Secondary text ── */
.gate-sub,
.auth-sub,
.auth-hint,
.hint,
.fp-meta,
.tile-meta,
.note-author,
.time-row,
.vid-time,
.title-sub,
.rank-foot {
  color: var(--text-dim) !important;
}

/* ── Admin dashboard & modals ── */
.screen-dashboard,
.ws-body {
  background: var(--background) !important;
}

.dash-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  color: var(--text) !important;
}

.dash-card,
.dash-row,
.modal,
.send-modal {
  background: var(--surface) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dash-card::before {
  background: var(--stripe, var(--accent)) !important;
}

.status-pill.status-active {
  background: rgba(74, 157, 95, 0.15) !important;
  color: #6fcf85 !important;
  border-color: rgba(74, 157, 95, 0.4) !important;
}

.status-pill.status-awaiting {
  background: rgba(232, 196, 106, 0.12) !important;
  color: #e8c46a !important;
  border-color: rgba(232, 196, 106, 0.35) !important;
}

.status-pill.status-wrapping {
  background: rgba(212, 135, 42, 0.15) !important;
  color: #e8a85a !important;
  border-color: rgba(212, 135, 42, 0.4) !important;
}

.status-pill.status-closed {
  background: #14120f !important;
  color: #666 !important;
  border-color: #2a2620 !important;
}

.dash-card:hover {
  border-color: var(--accent-border-hover) !important;
  transform: none !important;
}

.dash-filter,
.dash-view-btn {
  border-radius: 999px !important;
}

.dash-filter.active,
.dash-view-btn.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border-hover) !important;
  color: var(--accent) !important;
}

.dash-view-toggle {
  border-color: var(--accent-border) !important;
  border-radius: 0 !important;
}

.modal-confirm,
.ws-btn-primary,
.send-submit {
  background: var(--accent) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 0 !important;
}

.modal-cancel,
.ws-btn,
.modal-danger {
  background: none !important;
  border: 1px solid rgba(91, 127, 166, 0.35) !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
}

.modal-danger {
  border-color: rgba(180, 80, 80, 0.45) !important;
  color: #c47070 !important;
}

.modal-overlay {
  background: rgba(13, 13, 13, 0.88) !important;
}

.send-modal-foot,
.modal-wide .modal-actions {
  background: var(--surface) !important;
  border-top-color: var(--accent-border) !important;
}

.posting-tile,
.hub-posting-card {
  background: var(--surface) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 0 !important;
}

/* ── Presentation vote bar ── */
.vote-btns .vote-btn,
.mobile-vote-bar .vote-btn {
  border-radius: 0 !important;
}

.vote-btn.like.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.vote-btn.maybe.active {
  background: rgba(168, 135, 74, 0.12) !important;
  border-color: var(--identity) !important;
}

.vote-btn.pass.active {
  background: rgba(180, 80, 80, 0.15) !important;
  border-color: #c47070 !important;
}