/* Static structural CSS — colors/fonts come from the DB-backed theme,
   injected per-request as :root custom properties (see includes/theme.php
   and page.php / index.php's <style id="site-theme"> block). This file
   only maps those tokens to usable classes and lays things out. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--site-color-background, #121212);
  color: var(--site-color-text, #e8e8e8);
  font-family: var(--site-font-sans, sans-serif);
}

a { color: var(--site-color-primary, #3b82f6); }

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.card {
  background: var(--site-color-surface, #1a1a1a);
  border: 1px solid var(--site-color-border, #333);
  border-radius: var(--site-radius, 0.5rem);
  padding: 20px;
  transition: border-color 0.15s ease;
}
a.card:hover { border-color: color-mix(in srgb, var(--site-color-border, #333) 40%, var(--site-color-primary, #3b82f6)); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--site-color-primary, #3b82f6);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--site-radius, 0.5rem);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--site-color-primary, #3b82f6); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.btn.secondary {
  background: transparent;
  border: 1px solid var(--site-color-border, #333);
  color: var(--site-color-text-muted, #a0a0a0);
}
.btn.secondary:hover { border-color: var(--site-color-primary, #3b82f6); color: var(--site-color-text, #e8e8e8); filter: none; }

.btn.danger { background: var(--site-color-danger, #ef4444); }

input, textarea, select {
  background: var(--site-color-background, #121212);
  color: var(--site-color-text, #e8e8e8);
  border: 1px solid var(--site-color-border, #333);
  border-radius: var(--site-radius, 0.5rem);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--site-color-border, #333) 60%, var(--site-color-text-muted, #a0a0a0)); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--site-color-primary, #3b82f6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-color-primary, #3b82f6) 25%, transparent);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a0a0a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Custom checkboxes/radios — native controls can't be themed for a
   dark UI, so they're rebuilt with appearance:none + a drawn check/dot,
   sized and colored from the same theme tokens as everything else. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  background: var(--site-color-background, #121212);
  border: 1px solid var(--site-color-border, #333);
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--site-color-primary, #3b82f6); }

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--site-color-primary, #3b82f6);
  border-color: var(--site-color-primary, #3b82f6);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--site-color-primary, #3b82f6);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; }

label { display: block; font-size: 13px; color: var(--site-color-text-muted, #a0a0a0); margin-bottom: 4px; }

/* Inline label pairing a checkbox/radio with its text, e.g.
   <label class="check-label"><input type="checkbox"> Remember me</label> */
label.check-label, label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--site-color-text, #e8e8e8);
  cursor: pointer;
  margin-bottom: 0;
}

.field { margin-bottom: 14px; }

.notice { color: var(--site-color-text-muted, #a0a0a0); font-size: 14px; }
.error { color: var(--site-color-danger, #ef4444); font-size: 14px; }
.success { color: var(--site-color-success, #22c55e); font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--site-color-border, #333); }
th { color: var(--site-color-text-muted, #a0a0a0); font-weight: 500; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: var(--site-color-surface, #1a1a1a); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

/* Toast / notification banner (spec §4.3/§10) — shown once after a
   redirect via includes/flash.php, not a floating auto-dismiss popup
   (no JS framework in this build). */
.toast {
  padding: 10px 14px;
  border-radius: var(--site-radius, 0.5rem);
  border: 1px solid var(--site-color-border, #333);
  background: var(--site-color-surface, #1a1a1a);
  margin-bottom: 16px;
  font-size: 14px;
}
.toast.success { border-color: var(--site-color-success, #22c55e); color: var(--site-color-success, #22c55e); }
.toast.error { border-color: var(--site-color-danger, #ef4444); color: var(--site-color-danger, #ef4444); }

/* Responsive (spec §4.3/§10: "fully responsive"). Mobile-first
   adjustments for the admin shell and public layout. */
/* Stats-page layout: format/decade breakdowns are short lists (a
   handful of rows) so they don't need equal billing with Top Artists,
   which now shows up to 10 rows with room to breathe. */
.stats-columns { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 32px; }

@media (max-width: 720px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: auto; border-right: none; border-bottom: 1px solid var(--site-color-border, #333); display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-main { padding: 16px; }
  .container { padding: 0 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .stats-columns { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}