/* ==========================================================================
   Bassdrive Archive — sidebar shell
   Palette from bassdrive.com/css/style.css (read 2026-08-26), matched to the
   supplied mockups: near-black ground, cyan accent, condensed uppercase heads.
   ========================================================================== */

:root {
  --bg:        #0b0b0c;
  --panel:     #131417;
  --panel-2:   #17181c;
  --panel-3:   #1d1e23;
  --line:      #26272d;
  --line-hi:   #33353d;

  --text:      #ffffff;
  --text-dim:  #b9bcc4;
  --text-mute: #7e828c;

  --accent:      #8cd2f4;
  --accent-deep: #2898ce;
  --accent-hi:   #b3e2fa;
  --danger:      #ff6969;
  --ok:          #57c98b;

  --font:   "Roboto", Arial, Helvetica, sans-serif;
  --font-c: "Roboto Condensed", Arial, Helvetica, sans-serif;

  --sidebar: 246px;
  --player-h: 78px;
  --r: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  /* subtle dot grid, as in the mockups */
  background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 22px 22px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

h1, h2, h3, h4 { font-family: var(--font-c); color: var(--text); margin: 0; font-weight: 700; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- shell -- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: 18px;
  padding: 16px;
  align-items: start;
  padding-bottom: calc(var(--player-h) + 24px);
}

/* ---------------------------------------------------------------- sidebar - */

.side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }

.side__brand {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}

/* Official lockup: white equaliser bars, BASS/DRIVE wordmark and strapline,
   all in one transparent PNG. Its blues (#8bd2f4 / #2999cf) are the same as
   --accent and --accent-deep, so it sits natively in the palette. */
.logo { display: block; }

.logo__img {
  display: block;
  width: 100%;
  max-width: 205px;
  height: auto;
}
.logo:hover .logo__img { opacity: .88; }

.side__kicker {
  margin-top: 14px; font-family: var(--font-c); font-size: 13px;
  color: var(--accent); text-transform: uppercase; letter-spacing: .06em;
}
.side__desc {
  font-size: 11px; color: var(--text-mute); text-transform: uppercase;
  letter-spacing: .04em; margin-top: 2px;
}

.nav { display: flex; flex-direction: column; gap: 7px; }

.nav a {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  font-family: var(--font-c);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav a:hover { border-color: var(--line-hi); color: var(--text); background: var(--panel-2); }
.nav a.is-active { border-color: var(--accent-deep); color: var(--accent); }
.nav a .dot {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-hi);
}
.nav a.is-active .dot { background: var(--accent); }
.nav a .badge {
  margin-left: auto; background: var(--accent-deep); color: #04202f;
  font-size: 11px; border-radius: 9px; padding: 0 7px; font-family: var(--font);
}

.side__stats {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}
.side__stats .big {
  font-family: var(--font-c); font-size: 25px; color: var(--text); line-height: 1.1;
}
.side__stats .cap { font-size: 11.5px; color: var(--text-mute); margin-bottom: 12px; }
.side__stats hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* ----------------------------------------------------------------- main --- */

.main { min-width: 0; }

.page-head { margin-bottom: 18px; display: flex; align-items: flex-start; gap: 20px; }
.page-head__text { flex: 1; min-width: 0; }
.page-head h1 {
  font-size: 40px; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em;
}
.page-head h1 .thin { color: var(--accent); }
.page-head p { margin: 8px 0 0; color: var(--text-mute); font-size: 13.5px; }
.page-head__aside { text-align: right; flex: none; }
.page-head__aside .v { font-family: var(--font-c); font-size: 27px; color: var(--text); }
.page-head__aside .l { font-size: 11.5px; color: var(--text-mute); }

@media (max-width: 720px) {
  .page-head h1 { font-size: 27px; }
  .page-head { flex-direction: column; gap: 8px; }
  .page-head__aside { text-align: left; }
}

/* ---------------------------------------------------------------- search -- */

.searchbar { display: flex; gap: 10px; margin-bottom: 12px; }
.searchbar input {
  flex: 1; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font); font-size: 15px;
  padding: 13px 15px;
}
.searchbar input::placeholder { color: var(--text-mute); }
.searchbar input:focus { outline: none; border-color: var(--accent-deep); }

.btn {
  background: var(--accent);
  color: #06222f;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 0 22px;
  font-family: var(--font-c); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.btn--ghost {
  background: var(--panel); color: var(--text-dim); border-color: var(--line-hi);
  padding: 9px 15px;
}
.btn--ghost:hover { background: var(--panel-3); color: var(--text); border-color: var(--accent-deep); }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #2b0a0a; }
.btn--ok { background: var(--ok); border-color: var(--ok); color: #062515; }

/* quick-filter chip row */
.quick { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.quick button {
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--r);
  color: var(--text-dim);
  font-family: var(--font-c); font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
}
.quick button:hover { border-color: var(--accent-deep); color: var(--text); }
.quick button.is-on { background: var(--accent); border-color: var(--accent); color: #06222f; }

/* ------------------------------------------------------------ stat tiles -- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 17px 18px;
}
.tile__v { font-family: var(--font-c); font-size: 28px; color: var(--text); line-height: 1.1; }
.tile__l { font-size: 12px; color: var(--text-mute); margin-top: 3px; }

/* --------------------------------------------------------------- section -- */

.section { margin-bottom: 26px; }

.section__head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.section__head h2 {
  font-size: 21px; text-transform: uppercase; color: var(--accent); letter-spacing: .01em;
}
.section__head .meta { margin-left: auto; font-size: 12px; color: var(--text-mute); }

/* ----------------------------------------------------------------- table -- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; font-family: var(--font-c); font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute);
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
  white-space: nowrap;
}
table.grid td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--panel-2); }
table.grid tbody tr[aria-current="true"] { background: var(--panel-3); }

.cell-title { color: var(--text); font-weight: 500; }
.cell-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.cell-num { font-variant-numeric: tabular-nums; }
.rank { font-family: var(--font-c); font-size: 15px; color: var(--accent); }

.tableWrap { overflow-x: auto; }

.rowbtns { display: flex; gap: 7px; justify-content: flex-end; }

.iconbtn {
  width: 31px; height: 31px; flex: none;
  display: grid; place-items: center;
  background: var(--panel-3); border: 1px solid var(--line-hi);
  border-radius: var(--r); color: var(--text-dim); cursor: pointer;
}
.iconbtn:hover { border-color: var(--accent-deep); color: var(--accent); }
.iconbtn svg { fill: currentColor; }

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

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px; display: flex; flex-direction: column; gap: 4px;
}
.card:hover { border-color: var(--line-hi); }
.card__rank { font-family: var(--font-c); font-size: 12px; color: var(--accent); }
.card__t { color: var(--text); font-weight: 500; }
.card__s { font-size: 12.5px; color: var(--text-mute); }
.card__foot {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 11.5px; color: var(--accent);
  font-family: var(--font-c); letter-spacing: .04em;
}

/* -------------------------------------------------------------- calendar -- */

.calwrap { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .calwrap { grid-template-columns: 1fr; } }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  font-family: var(--font-c); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 11px 8px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.cal__day {
  min-height: 84px; padding: 8px; border: 1px solid var(--line);
  margin: -1px 0 0 -1px; background: var(--panel);
  display: flex; flex-direction: column; gap: 3px;
}
.cal__day.is-empty { color: var(--text-mute); background: var(--panel-2); }
.cal__day.has-shows { border-color: var(--accent-deep); cursor: pointer; }
.cal__day.has-shows:hover { background: var(--panel-3); }
.cal__day.is-sel { background: var(--panel-3); border-color: var(--accent); }
.cal__n { font-family: var(--font-c); font-size: 17px; color: var(--text); }
.cal__day.is-empty .cal__n { color: var(--text-mute); }
.cal__c {
  font-family: var(--font-c); font-size: 10.5px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.25;
}

.daylist { display: flex; flex-direction: column; gap: 10px; }
.dayitem { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; }
.dayitem h4 { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--text); }
.dayitem .m { font-size: 12px; color: var(--text-mute); margin: 3px 0 10px; }
.dayitem .b { display: flex; gap: 8px; }

/* --------------------------------------------------------------- filters -- */

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-bottom: 16px; }
.filters select, .filters input {
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--r);
  color: var(--text-dim); font-family: var(--font); font-size: 14px; padding: 11px 12px;
  width: 100%;
}
.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent-deep); }

/* ---------------------------------------------------------------- player -- */

.player {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--player-h);
  background: #060607; border-top: 2px solid var(--accent-deep);
  display: grid; grid-template-columns: 1fr minmax(260px, 1.7fr) 1fr;
  align-items: center; gap: 16px; padding: 0 18px; z-index: 60;
}
.player[hidden] { display: none; }
.player__now { min-width: 0; }
.player__t { color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__s { font-size: 11.5px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__mid { display: flex; flex-direction: column; gap: 5px; }
.player__ctl { display: flex; justify-content: center; align-items: center; gap: 9px; }
.pbtn { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 3px; display: grid; place-items: center; }
.pbtn:hover { color: var(--accent); }
.pbtn svg { fill: currentColor; }
.pbtn--main { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #06222f; }
.pbtn--main:hover { background: var(--accent-hi); color: #06222f; }
.scrub { display: flex; align-items: center; gap: 9px; }
.scrub input { flex: 1; accent-color: var(--accent); }
.scrub time { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.player__right { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.player__right input[type=range] { width: 84px; accent-color: var(--accent); }

@media (max-width: 820px) {
  .player { grid-template-columns: 1fr; height: auto; padding: 8px 12px; }
  .player__right { display: none; }
  :root { --player-h: 108px; }
}

/* ----------------------------------------------------------------- queue -- */

.queue {
  position: fixed; right: 0; top: 0; bottom: var(--player-h); width: 336px;
  background: var(--panel); border-left: 1px solid var(--line); z-index: 59;
  display: flex; flex-direction: column;
}
.queue[hidden] { display: none; }
.queue__h { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: #060607; border-bottom: 1px solid var(--line); }
.queue__h h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.queue__l { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.queue__i { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r); font-size: 13px; cursor: pointer; }
.queue__i:hover { background: var(--panel-2); }
.queue__i[aria-current=true] { background: var(--panel-3); color: var(--accent); }
.queue__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ------------------------------------------------------------------ misc -- */

.empty { padding: 40px 20px; text-align: center; color: var(--text-mute); }
.pill {
  display: inline-block; font-family: var(--font-c); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 9px;
  border: 1px solid var(--line-hi); color: var(--text-mute);
}
.pill--pending { border-color: var(--accent-deep); color: var(--accent); }
.pill--upload  { border-color: var(--ok); color: var(--ok); }

.form { display: grid; gap: 13px; max-width: 620px; }
.form label { display: block; font-family: var(--font-c); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 5px; }
.form input, .form textarea, .form select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line-hi);
  border-radius: var(--r); color: var(--text); font-family: var(--font); font-size: 14px; padding: 11px 12px;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent-deep); }
.notice { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-hi); background: var(--panel-2); font-size: 13.5px; }
.notice--ok  { border-color: var(--ok); color: var(--ok); }
.notice--err { border-color: var(--danger); color: var(--danger); }

.loading { padding: 40px; text-align: center; color: var(--text-mute); }

.pager { display: flex; gap: 9px; justify-content: center; padding: 16px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; }
  .nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ------------------------------------------------------------ health tab -- */

.checks { display: grid; gap: 9px; }

.check {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 12px 14px;
}
.check--pass { border-left-color: var(--ok); }
.check--warn { border-left-color: #e0a53c; }
.check--fail { border-left-color: var(--danger); }

.check__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.check--pass .check__dot { background: var(--ok); }
.check--warn .check__dot { background: #e0a53c; }
.check--fail .check__dot { background: var(--danger); }

.check__label { color: var(--text); font-weight: 500; }
.check__detail { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.check__value {
  font-family: var(--font-c); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
  border: 1px solid var(--line-hi); border-radius: 10px; padding: 2px 10px;
}

.issue { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; }
.issue + .issue { margin-top: 9px; }
.issue__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.issue__title { color: var(--text); font-weight: 500; }
.issue__detail { font-size: 13px; color: var(--text-mute); margin-top: 6px; }
.issue__where { font-size: 12px; color: var(--accent); margin-top: 5px; font-family: var(--font-c); }
.pill--fixed { border-color: var(--ok); color: var(--ok); }
.pill--open  { border-color: var(--danger); color: var(--danger); }
.pill--high  { border-color: var(--danger); color: var(--danger); }
.pill--medium{ border-color: #e0a53c; color: #e0a53c; }
.pill--low   { border-color: var(--line-hi); color: var(--text-mute); }