/**
 * studio-theme.css — Surfin' Pale Studios
 * Gemensam designtema. Inkludera EFTER per-sidans <style>-block
 * så att dessa regler får rätt prioritet.
 *
 * Färgpalett:
 *   Surf:     --pale-sky #B8D8E8  --foam #C2E0DD  --ocean #5EC4BF  --coral #DC8060  --sand #CDB98A
 *   Industri: --void #0E0E13  --coal #181824  --soot #20202C  --iron #3C3C52  --ash #ACACBE  --bone #E8E4DC
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Caveat:wght@400;600&display=swap');

/* ── GLOBALT TYPSNITT ──────────────────────────────────── */
*, *::before, *::after {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ── HAVSHORISONT ──────────────────────────────────────── */
.sp-horizon {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 400px;
  pointer-events: none;
  z-index: 0;
  animation: sp-shimmer 9s ease-in-out infinite;
  background: linear-gradient(
    to bottom,
    #B8D8E8   0%,
    #9DC8DC   12%,
    #62B0C0   28%,
    #2E7A78   48%,
    #1C4A52   65%,
    #0E0E13   90%,
    #0E0E13   100%
  );
  opacity: 0.42;
}
.sp-horizon::before {
  content: '';
  position: absolute;
  bottom: 135px; left: 0; right: 0;
  height: 80px;
  background:
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(194,224,221,0.5) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 45% 70%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 78% 85%, rgba(194,224,221,0.4) 0%, transparent 60%);
}
.sp-horizon::after {
  content: '';
  position: absolute;
  bottom: 182px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(184,216,232,0.5) 15%, rgba(255,255,255,0.3) 40%, rgba(184,216,232,0.5) 70%, transparent);
}
@keyframes sp-shimmer {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 0.46; }
}

/* ── INDUSTRISILUETT ───────────────────────────────────── */
.sp-silhouette {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.30;
}

/* ── GRIT-TEXTUR ───────────────────────────────────────── */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  opacity: 0.022 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 128px 128px !important;
}

/* ── BODY & BAKGRUND ───────────────────────────────────── */
body {
  background: var(--bg, #0E0E13) !important;
  color: var(--text, #E8E4DC) !important;
  line-height: 1.55;
}

/* ── HEADER ────────────────────────────────────────────── */
header {
  position: relative;
  z-index: 100;
  background: rgba(14,14,19,0.92) !important;
  border-bottom: 1px solid var(--border, #3C3C52) !important;
  backdrop-filter: blur(8px);
}

.sp-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-logo-sub {
  font-family: 'Caveat', cursive !important;
  font-size: 12px;
  color: var(--accent, #5EC4BF);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.sp-logo-main {
  font-size: 20px;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  color: var(--text, #E8E4DC);
  line-height: 1;
}
.sp-logo-main .sp-accent { color: var(--accent, #5EC4BF); }

/* ── NAVIGATION ────────────────────────────────────────── */
.nav-bar {
  position: sticky !important;
  top: 0;
  z-index: 90 !important;
  background: rgba(24,24,36,0.95) !important;
  border-bottom: 1px solid var(--border, #3C3C52) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 20px !important;
  height: auto !important;
  min-height: 48px !important;
  overflow-x: auto;
  scrollbar-width: none;
  backdrop-filter: blur(6px);
}
.nav-bar::-webkit-scrollbar { display: none; }

.nav-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  color: var(--text-dim, #ACACBE) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s !important;
  background: transparent !important;
}
.nav-link:hover {
  color: var(--text, #E8E4DC) !important;
  border-color: var(--border, #3C3C52) !important;
  background: rgba(60,60,82,0.3) !important;
}
.nav-link.active, .nav-link[aria-current] {
  color: var(--accent, #5EC4BF) !important;
  border-color: rgba(94,196,191,0.4) !important;
  background: rgba(94,196,191,0.08) !important;
}
.nav-divider {
  width: 1px !important;
  height: 16px !important;
  background: var(--border, #3C3C52) !important;
  margin: 0 4px !important;
}
.nav-home {
  color: var(--accent, #5EC4BF) !important;
}

/* ── KNAPPAR ────────────────────────────────────────────── */
button, .btn, [class*="btn-"], input[type="submit"] {
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 2px !important;
  transition: all 0.2s !important;
}

/* ── KORT / YTOR ───────────────────────────────────────── */
.card, [class*="-card"] {
  border-radius: 3px !important;
}

/* ── FORMULÄR-INPUTS ───────────────────────────────────── */
input, textarea, select {
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: 2px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--accent, #5EC4BF) !important;
  box-shadow: 0 0 0 2px rgba(94,196,191,0.15) !important;
}

/* ── STATUSRING-FÄRGER (gitarr + sång) ─────────────────── */
/* State: LISTENING / active → ocean */
.state-ring.state-listening,
.state-ring.state-orienting {
  border-color: var(--accent, #5EC4BF) !important;
  box-shadow: 0 0 0 4px rgba(94,196,191,0.15), 0 0 40px rgba(94,196,191,0.3) !important;
}
/* State: ANALYZING / processing → coral */
.state-ring.state-analyzing,
.state-ring.state-responding,
.state-ring.state-briefing {
  border-color: var(--accent2, #DC8060) !important;
  box-shadow: 0 0 0 4px rgba(220,128,96,0.15), 0 0 40px rgba(220,128,96,0.25) !important;
}
/* State: DECIDING → sand */
.state-ring.state-deciding {
  border-color: var(--accent3, #CDB98A) !important;
  box-shadow: 0 0 0 4px rgba(205,185,138,0.15), 0 0 30px rgba(205,185,138,0.2) !important;
}
/* State: SUMMARIZING → muted green */
.state-ring.state-summarizing {
  border-color: #6DD49A !important;
  box-shadow: 0 0 0 4px rgba(109,212,154,0.15), 0 0 30px rgba(109,212,154,0.2) !important;
}

/* ── PROGRESSBAR ────────────────────────────────────────── */
.progress-bar, .cover-progress-track {
  background: var(--border, #3C3C52) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.progress-fill, .cover-progress-fill {
  background: linear-gradient(to right, #2E7A78, #5EC4BF) !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}

/* ── COVERS SEKTION (dashboard) ─────────────────────────── */
.cover-loading {
  color: var(--text-dim, #ACACBE);
  font-size: 13px;
  padding: 24px 0;
  grid-column: 1/-1;
}
.cover-card {
  border: 1px solid var(--border, #3C3C52);
  border-radius: 3px;
  padding: 24px;
  background: var(--surface, #181824);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}
.cover-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent2, #DC8060), transparent);
  opacity: 0;
  transition: opacity 0.22s;
}
.cover-card:hover {
  border-color: rgba(220,128,96,0.40);
  background: var(--surface2, #20202C);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.cover-card:hover::before { opacity: 1; }
.cover-title  { font-size: 18px; font-weight: 700; color: var(--text, #E8E4DC); margin-bottom: 4px; }
.cover-artist { font-family: 'Caveat', cursive !important; font-size: 17px; color: var(--accent, #5EC4BF); margin-bottom: 16px; }
.cover-genre  { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim, #ACACBE); margin-bottom: 16px; }
.cover-progress-wrap { margin-bottom: 14px; }
.cover-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim, #ACACBE); margin-bottom: 6px; }
.cover-progress-label strong { color: var(--text, #E8E4DC); }
.cover-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sect-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; padding: 3px 10px; border-radius: 2px; white-space: nowrap; }
.s-not_started { background: rgba(60,60,82,0.5);     color: #ACACBE; border: 1px solid #3C3C52; }
.s-learning    { background: rgba(205,185,138,0.10); color: #CDB98A; border: 1px solid rgba(205,185,138,0.25); }
.s-slow_tempo  { background: rgba(94,196,191,0.10);  color: #C2E0DD; border: 1px solid rgba(94,196,191,0.28); }
.s-done        { background: rgba(80,200,120,0.10);  color: #6dd49a; border: 1px solid rgba(80,200,120,0.25); }

/* ── MODALS ────────────────────────────────────────────── */
.modal-overlay {
  backdrop-filter: blur(4px) !important;
}

/* ── TOAST-MEDDELANDEN ─────────────────────────────────── */
.toast {
  border-radius: 3px !important;
  border-left: 3px solid var(--accent, #5EC4BF) !important;
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border, #3C3C52); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright, #5A5A70); }

/* ── LOGIN-SIDA ────────────────────────────────────────── */
.login-box {
  border: 1px solid var(--border, #3C3C52) !important;
  border-radius: 3px !important;
  background: var(--surface, #181824) !important;
}

/* ── Z-INDEX SKYDD (innehåll ovanpå bakgrundselement) ──── */
header, nav, main, .container, .page,
.main-layout, .chat, .editor, .panel,
.modal-overlay, .toast, .fab,
.top-bar, .page-header,
.server-status, .state-area, .main-content,
footer {
  position: relative;
  z-index: 10;
}