/* ==========================================================================
   Jukebokks — Clean, Consolidated, Responsive Styles
   - Dark Spotify-inspired theme
   - Full responsiveness (phone / tablet / desktop + landscape tune)
   - White idle glow (universal, visible despite overflow) with same "size" as green pulse
   - Green playing glow preserved (matches original feel)
   - Organized by components, no duplicate rules
   ========================================================================== */

/* ========== 1) Design Tokens (CSS variables) ========== */
:root{
  /* Colors */
  --bg-main:#121212;
  --surface-translucent:rgba(28,28,30,.7);
  --surface-raised:#1c1c1e;
  --surface-raised-hover:#232326;
  --spotify-green:#1DB954;
  --text-primary:#fff;
  --text-secondary:#b3b3b3;
  --border-color:rgba(255,255,255,.15);

  /* Radii */
  --pill-radius:999px;
  --card-radius:16px;

  /* Typography */
  --font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;

  /* Layout */
  --header-h:56px;
  --tabsbar-h: var(--header-h);
  --tabsbar-actual-h: var(--tabsbar-h); /* Dynamisk höjd baserat på collapsed/expanded */
  --main-top-offset: calc(var(--header-h) + var(--tabsbar-actual-h)); /* Header + group menu */

  /* Grid tokens (desktop defaults; overridden in media queries) */
  --pad-minw: 220px;
  --pad-minh: 120px;
  --grid-gap: 20px;
  --chip-h: 28px;        /* bank-tab height */
  --chip-font: 14px;
}

/* ========== 2) Base Resets & Global ========== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--font-family);
  overflow:hidden; /* app uses internal scroller */
}

/* Main scroll container */
.main-content{
  padding:0 24px 24px;
  /* OBS: app-shell ger redan 56px offset för header. 
     Här lägger vi BARA till gruppmenyns höjd: 12px (hidden) */
  padding-top: 12px; /* default: tabs hidden */
  width:100%;
  max-width:none;
  margin:0;
  overflow-y:auto;
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  scrollbar-width:none;
  transition: padding-top 0.3s ease; /* Smooth padding change */
}
/* När tabs är SYNLIGA (expanded), lägg till 56px för gruppmeny */
body:not(.tabs-hidden) .main-content {
  padding-top: 56px; /* tabs expanded */
}
  position: relative;
}
.main-content::-webkit-scrollbar{ display:none }

/* Utilities */
.hidden{ display:none !important }
.center{ display:flex; align-items:center; justify-content:center }

/* ========== 3) Buttons ========== */
.btn{
  background:var(--surface-raised);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  padding:10px 16px;
  border-radius:var(--pill-radius);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .2s;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-raised-hover); border-color:var(--text-secondary) }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-primary{ background:var(--spotify-green); color:#000; border:none; font-weight:700 }
.btn-primary:hover{ background:#1ed760 }
.btn.active{ background:var(--text-primary); color:var(--bg-main) }
.btn-tiny{ padding:4px 8px; font-size:12px; min-width:28px; height:28px; border-radius:4px; font-weight:700; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.3) }
.btn-tiny:hover{ border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05) }
.circle{ width:44px; height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center }
.btn.circle i,
.btn.circle svg{ width:22px; height:22px; font-size:22px; line-height:1; }.btn#audioHealth { position: relative; }

/* Gear button – rund, samma storlek som +, ikon följer currentColor */
.gear-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#9aa3ae; }
.gear-btn svg{ fill: currentColor; }
/* Färger styrs av status-klasser (same palette som tidigare prick) */
/* Status-färger borttagna - diagnostik finns i menyn istället */

/* Valfri “aktiv”-indikering när menyn är öppen */
.gear-btn.active{ filter: brightness(1.1); }

/* Popover (återanvänd stil som +-menyn har; fallback om saknas) */
#settingsPopover.popover { min-width: 180px; right:0; z-index: 10010; }
#settingsPopover .menu-item { width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; cursor:pointer; }
#settingsPopover .menu-item:hover { background: rgba(255,255,255,0.08); }
#settingsPopover .menu-item.danger { color:#e74c3c; }

/* Förhindra textmarkering/long-press-menyer på knappen i iOS */
#settingsBtn { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action: manipulation; }

/* ========== 4) App Shell & Header ========== */
.app-shell{ min-height:100vh; padding-top:var(--header-h); position:relative }

/* PWA/Standalone justeringar och iOS safe areas */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .app-header { height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .main-content { padding-bottom: env(safe-area-inset-bottom); }
}

/* Fullscreen-knapp aktiv-färg (återanvänd tokens) */
#goFS.active { background: var(--text-primary); color: var(--bg-main); }
#app-container{ transition: opacity .3s ease }
.app-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h); z-index:5000;
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
  padding:8px 24px;
  background:rgba(18,18,18,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-color);
}
.header-title{ display:flex; align-items:center; gap:8px; flex-grow:1 }
.header-title .title{ font-weight:700; letter-spacing:.2px }
.header-title .ver{ font-size:12px; color:var(--text-secondary) }
.header-controls,.app-header .right{ display:flex; align-items:center; gap:10px }

/* Brand (logo + name) */
.brand-name{ font-weight:800; letter-spacing:.3px }
.brand-logo{ display:block; object-fit:contain }
.brand-logo--header{ height:44px; width:auto; margin:0; padding:0; border-radius:8px }
.brand-logo--login{ 
  width: min(85vw, 420px); 
  height: auto; 
  max-width: 100%; 
  margin: 0 auto;
}
@media (max-width:600px){ 
  .brand-logo--header{ height:36px }
  .brand-logo--login{ width: min(75vw, 280px); }
}

/* ========== 5) Login View ========== */
.login-view{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 1200px at 80% -20%, rgba(29,185,84,.18), transparent 60%),
    radial-gradient(1000px 1000px at -10% 110%, rgba(255,255,255,.06), transparent 50%),
    var(--bg-main);
  text-align:center;
}
.login-view h1{ font-size:2.4rem; margin:0; color:var(--spotify-green); letter-spacing:.2px }
#login-view > h1,
#login-view > p,
#login-view > button{ margin:6px 0 }
.login-card{
  width:100%; max-width:540px;
  background:rgba(28,28,30,.78);
  border:1px solid var(--border-color);
  border-radius:16px;
  backdrop-filter:blur(20px);
  padding:36px 40px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.login-brand{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px }
.login-brand .logo{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1ed760,#1DB954 55%,#169b46);
  color:#000; font-weight:900; box-shadow:0 6px 18px rgba(29,185,84,.35)
}
.login-brand .name{ font-weight:800; font-size:1.6rem; letter-spacing:.3px }
.login-card .tagline{ margin:12px 0 24px; color:var(--text-secondary); font-size:1.06rem }
.login-card .small{ margin-top:16px; font-size:.85rem; color:var(--text-secondary) }
.btn-google{ background:#fff; color:#333; border:1px solid #ccc; border-radius:var(--pill-radius) }
.btn-google:hover{ background:#f1f1f1 }

/* ========== 6) Tabs (Banks) ========== */
#bank-tabs{
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-main);
  height: var(--tabsbar-h);
  display:flex; align-items:center; gap:8px;
  padding-inline:24px;
  padding-block: 0;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  white-space:nowrap;
  overflow: hidden; /* Dölj allt som är utanför */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  scrollbar-width:none;
  /* Transition ENDAST på height - inget annat */
  transition: height 0.3s ease;
}
/* Stäng av ALLA transitions när vi renderar innehåll */
#bank-tabs.no-transition,
#bank-tabs.no-transition * {
  transition: none !important;
}
#bank-tabs::-webkit-scrollbar{ height:0 !important }

/* Gömd variant - liten flik som rullgardinshandtag */
#bank-tabs.hidden-tabs {
  --tabsbar-actual-h: 12px; /* Uppdatera variabeln för main-content padding */
  height: 12px;
  border-bottom: none;
  padding: 0;
  cursor: pointer;
  -webkit-mask-image: none; /* Ta bort mask när kollapsad */
          mask-image: none;
  /* INGEN transition här - bara på bas-elementet */
}
/* Dölj alla barn när hidden */
#bank-tabs.hidden-tabs > * {
  display: none !important;
}
#bank-tabs.hidden-tabs::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  z-index: 2;
  /* Transition bara på background för hover-effekt */
  transition: background 0.2s ease;
}
#bank-tabs.hidden-tabs:hover::after {
  background: rgba(255,255,255,0.5);
}

/* Toggle-knapp */
.bank-tabs-toggle {
  flex-shrink: 0;
  /* INGEN transition - knappen ska aldrig animera */
}
.bank-tab{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--chip-h); line-height:var(--chip-h);
  padding:0 12px;
  font-size:var(--chip-font); font-weight:600;
  border-radius:var(--pill-radius);
  background:var(--spotify-green);
  color:#000; border:none; cursor:pointer;
  /* INGA transitions alls - buttons ska aldrig slide */
}
.bank-tab:hover{ background:#1ed760; color:#000 }
.bank-tab.active{ color:var(--bg-main); background:var(--text-primary) }

/* --- Edit-pen på bank-tab: visa ENDAST på aktiv tab i admin-läge --- */

/* Basutseende för penn-knappen, men dold */
.bank-tab .edit-pen{
  display:none;                 /* helt dold som default */
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  margin-left:8px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(0,0,0,.08);
  line-height:0;
  pointer-events:none;          /* inte klickbar när dold */
  opacity:0;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
  position:relative;
  z-index:2001;
}

/* Hoverstil (används bara när knappen är synlig) */
.bank-tab .edit-pen:hover{
  background:rgba(0,0,0,.06);
}

/* När tabben är aktiv i admin-läge → visa pennan och gör den klickbar */
body.admin-mode .bank-tab.active .edit-pen{
  display:inline-flex;
  pointer-events:auto;
  opacity:1;
  /* liten kontur i aktivt läge för kontrast */
  background:rgba(0,0,0,.10);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.18);
}

/* För säkerhets skull: på inaktiva tabs i admin-läge är pennan alltid döljd & oklickbar */
body.admin-mode .bank-tab:not(.active) .edit-pen{
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
}


/* ========== 7) Grid & Pads ========== */
.grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--pad-minw), 1fr));
  margin-top: 0;
  padding-top: 15px;
}
.pad{
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius);
  padding:16px;
  min-height:var(--pad-minh);
  color:#fff;
  background:var(--surface-raised);
  border:2px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition: transform .4s ease, opacity .4s ease, filter .4s ease, box-shadow .2s ease;
  container-type: size;  /* Låter jersey skala efter pad-storlek */
}
.pad:hover{ transform:scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,.4) }
.pad .pad-name{ font-size: clamp(13px, 1.4vw, 16px) }

/* Tools shown in admin mode */
.pad .tools{ position:absolute; top:10px; right:10px; display:none; gap:6px; z-index:10 }
body.admin-mode .pad .tools{ display:flex }
.toolbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:rgba(0,0,0,.40); border:1px solid rgba(255,255,255,.18);
  color:#fff; line-height:0; cursor:pointer;
  transition:filter .15s ease, background .15s ease;
}
.toolbtn:hover{ background:rgba(0,0,0,.55) }

/* Jersey number overlay */
.pad-number{
  position:absolute; 
  inset: -5%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color: rgba(255,255,255,.42);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  border-radius:inherit;
  pointer-events:none;
  line-height: 1;
}

/* Olika storlekar baserat på antal tecken */
.jersey-0 { font-size: 0; } /* Tom jersey */
.jersey-1 { font-size: 110cqw; } /* 1 tecken = 110% av pad */
.jersey-2 { font-size: 90cqw; }  /* 2 tecken */
.jersey-3 { font-size: 70cqw; }  /* 3 tecken */
.jersey-4 { font-size: 55cqw; }  /* 4 tecken */

/* För browsers utan container queries - fallback */
@supports not (font-size: 1cqw) {
  .jersey-1 { font-size: clamp(80px, 22vw, 160px); }
  .jersey-2 { font-size: clamp(70px, 18vw, 130px); }
  .jersey-3 { font-size: clamp(60px, 15vw, 110px); }
  .jersey-4 { font-size: clamp(50px, 12vw, 90px); }
}

/* Progress overlay when playing */
.pad-progress{
  position:absolute; top:0; left:0; height:100%;
  background-color:rgba(34,197,94,.2);
  width:0%; transition:width 16ms linear;
  z-index:5; pointer-events:none;
}

/* ---- Playing (keep original feel) ---- */
.pad.playing{
  position:relative;
  outline:2px solid var(--spotify-green);
  box-shadow:0 0 0 3px rgba(29,185,84,.6), 0 0 18px rgba(29,185,84,.45);
  transform:translateY(-1px);
  transition: box-shadow .15s ease, transform .15s ease;
  animation: glowPulse 1.4s ease-out infinite;
}
@keyframes glowPulse{
  0%{ box-shadow:0 0 0 0 rgba(29,185,84,.55), 0 0 18px rgba(29,185,84,.4) }
  70%{ box-shadow:0 0 0 10px rgba(29,185,84,0), 0 0 22px rgba(29,185,84,.35) }
  100%{ box-shadow:0 0 0 0 rgba(29,185,84,0), 0 0 18px rgba(29,185,84,.4) }
}
@media (prefers-reduced-motion:reduce){ .pad.playing{ animation:none } }


/* Fade controls on playing pad (consistent small pills) */
.fade-controls{ display:none; opacity:0 }
.pad.playing .fade-controls{
  position:absolute; top:8px; left:8px; right:8px;
  z-index:10;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:0;
  pointer-events:none; opacity:1; transition:opacity .3s ease;
}
.fade-btn{
  background:var(--spotify-green); color:#000; border:none;
  font-weight:700; font-size: clamp(11px, 1.2vw, 13px);
  padding:3px 8px; border-radius:var(--pill-radius);
  cursor:pointer; pointer-events:auto; white-space:nowrap;
  min-width:80px; max-width:45%; flex:0 0 auto;
  transition:background .2s;
}
.fade-btn:hover{ background:#1ed760 }

/* ========== 8) Focus Mode ========== */
#toggleFocusModeBtn.active{ background:var(--text-primary); color:var(--bg-main) }
body.focus-mode-active{ overflow:hidden; overscroll-behavior:contain }
body.focus-mode-active .main-content{ overflow:hidden !important; height:calc(100dvh - var(--header-h)) }
body.focus-mode-active .pad,
body.ios-pad-playing .pad:not(.playing) { 
  opacity:.2; 
  filter: blur(3px); 
  pointer-events:none 
}body.focus-mode-active .pad.focused-pad{
  opacity:1; filter:none; z-index:1000; pointer-events:auto; cursor:default;
  position: fixed !important;
  left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important;
  width:min(92vw, 980px) !important; max-width:100vw;
  border-radius:28px !important;
  box-shadow: 0 0 0 3px rgba(27,230,102,.35), 0 0 30px rgba(27,230,102,.25);
}
body.ios-pad-playing .pad.playing {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
/* Panic stop (logo) alltid klickbar på iOS */
body.ios-pad-playing #panicStopBtn {
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
}
.focus-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:1001 }

/* ========== 9) Admin Panel ========== */
.admin-slideout{
  position:fixed; top:0; left:0; width:450px; height:100%;
  background:var(--surface-translucent);
  border-right:1px solid var(--border-color);
  transform:translateX(-100%); transition:transform .35s ease;
  display:flex; flex-direction:column; backdrop-filter:blur(20px); z-index:200;
}
.admin-slideout.open{ transform:translateX(0) }
.admin-header{ padding:16px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between }
.admin-title{ font-size:20px; margin:0 }
.admin-content{ padding:24px; overflow-y:auto; flex:1 }
.admin-content label{ display:block; font-size:13px; color:var(--text-secondary); margin:16px 0 8px }
.admin-content input{
  width:100%; padding:12px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--surface-raised); color:var(--text-primary)
}
.admin-content input:focus{ outline:none; border-color:var(--spotify-green) }
/* Ta bort upp/ner-pilar på number inputs */
.admin-content input[type="number"]::-webkit-outer-spin-button,
.admin-content input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-content input[type="number"] {
  -moz-appearance: textfield;
}

/* ========== 10) Import Modal ========== */
#import-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); z-index:9999; backdrop-filter:blur(5px)
}
#import-modal.active{ display:flex }
.modal-content{
  background:var(--surface-raised);
  border:1px solid var(--border-color);
  border-radius:16px; padding:24px;
  width:90%; max-width:600px; max-height:80vh;
  display:flex; flex-direction:column;
}
#import-modal .modal-list{ list-style:none; padding-left:0; margin:0 }
#import-modal .modal-list li{
  padding:12px 16px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:12px; border:1px solid transparent;
}
#import-modal .modal-list li + li{ margin-top:4px }
#import-modal .modal-list li:hover{ background:var(--surface-raised-hover) }
#import-modal .modal-list li.selected{ background:var(--spotify-green); color:#000; font-weight:600 }
#import-modal .modal-list-container{ max-height:60vh; overflow:auto; -webkit-overflow-scrolling:touch; padding-right:4px }
#import-modal .modal-footer{ display:flex; justify-content:flex-end; gap:12px; margin-top:12px }
#import-modal .btn{ pointer-events:auto }
body.modal-open #app-container{ pointer-events:none }

/* Selection tools links must be white */
#import-modal .selection-tools a{ color:#fff !important; text-decoration:underline }

/* ========== 11) Account Menu (mini) ========== */
.accmenu-anchor{ position:relative; margin-left:8px }

.accmenu-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border-color); background:var(--surface-raised);
  cursor:pointer; overflow:hidden; padding:0; line-height:0;
}
.accmenu-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block }
.accmenu-btn.ok{ box-shadow:0 0 0 2px rgba(29,185,84,.6), 0 0 14px rgba(29,185,84,.45) }
.accmenu-btn.error{ box-shadow:0 0 0 2px rgba(239,68,68,.6), 0 0 14px rgba(239,68,68,.45) }
.accmenu-btn .acc-initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#2d2d31; color:#fff; font-weight:700 }

/* Popover — auto-bredd med min/max så den inte blir onödigt bred */
.accmenu-pop{
  position:absolute; top:44px; right:0;
  width:auto;                /* shrink-to-content */
  min-width:300px;           /* inte för smal */
  max-width:420px;           /* inte för bred */
  max-width:calc(100vw - 24px);
  background:var(--surface-raised); color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:10000; overflow:hidden;
}
/* --- Viktigt: rader som ligger direkt under .accmenu-pop ska ha innermarginal --- */
.accmenu-pop > .acc-row{
  padding-left:20px;                 /* luft mot vänster kant */
  padding-right:20px;                /* luft mot höger kant */
}

/* Knappraden under kontot ska linjera efter avataren + containerpadding
   40 (avatar) + 10 (gap) + 20 (container L-padding) = 70px */
.accmenu-pop > .acc-row .acc-buttons{
  padding-left:70px;
}


/* Header – mer sidpadding för luft mot kanten */
.acc-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:20px;            /* mer luft mot vänster/höger */
  border-bottom:1px solid var(--border-color);
  background:var(--surface-raised-hover);
}

.acc-hdr-left{ display:flex; gap:12px; align-items:center; min-width:0 }
.acc-avatar{
  width:40px; height:40px;                       /* tydlig men kompakt */
  border-radius:50%; overflow:hidden;
  background:#2d2d31; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:700
}
.acc-avatar img{ width:100%; height:100%; object-fit:cover }
.acc-ident{ display:flex; flex-direction:column; min-width:0 }
.acc-name{ font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px }
.acc-email{ color:var(--text-secondary); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Section body – lite extra luft och större sidpadding */
.acc-sec{ padding:16px 18px 14px }

/* Konto-rad + knapprad under */
.acc-row{
  display:flex; flex-direction:column; align-items:stretch;
  gap:12px;                                       /* luft mellan konto och knappar */
  padding:12px 0 10px;
}
.acc-row + .acc-row{ border-top:1px solid var(--border-color) }

.acc-left{
  display:flex; align-items:center; gap:10px; min-width:0;
}

/* Mini-spotify info */
.acc-spot-mini{ display:flex; align-items:center; gap:10px; min-width:0 }
.acc-spot-mini .img{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:#2d2d31; flex:0 0 auto }
.acc-spot-mini .img img{ width:100%; height:100%; object-fit:cover }
.acc-spot-mini .meta{ display:flex; flex-direction:column; line-height:1.2; min-width:0 }
.acc-spot-mini .meta .dn{
  font-size:16px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:260px;                                  /* tryck inte ut knappar */
}
.acc-spot-mini .meta .prod{ font-size:12px; color:var(--text-secondary) }

/* Knappar – en rad under kontot, indragna så de linjerar efter avataren */
.acc-buttons{
  display:flex; flex-wrap:nowrap; gap:10px;
  justify-content:flex-start;
  padding-left:50px;                                /* 40 avatar + 10 gap */
}

/* Pillerknappar */
.acc-btn{
  height:28px; line-height:28px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border-color);
  background:transparent; color:inherit;
  font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s ease;
}
.acc-btn:hover{ background:#232326 }
.acc-btn.primary{ background:var(--spotify-green); color:#000; border:none; font-weight:700 }

/* ========== 12) Select (harmonized dropdown) ========== */
select{
  appearance:none;
  background-color:#1f1f1f;
  color:#fff;
  border:1px solid #333;
  border-radius:8px;
  padding:8px 12px;
  font-size:14px;
  font-family:inherit;
  transition:all .15s ease;
  cursor:pointer;
  width:100%;
  position:relative;
}
select:hover{ background-color:#2a2a2a; border-color:#444 }
select:focus{ outline:none; border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.3) }
select::-ms-expand{ display:none }

/* ========== 13) Spotify search list (simple) ========== */
.sp-results{ border:1px solid #2a2a2a; border-radius:8px; overflow:hidden }
.sp-results .sp-empty, .sp-results .sp-loading, .sp-results .sp-error{ padding:8px 10px; color:#bbb; background:#1f1f1f }

/* ========== 14) Loading overlay ========== */
.loading-view{
  position:fixed; inset:0; z-index:2147483647;
  min-height:100vh;
  display:none; visibility:hidden; opacity:0;
  background:var(--bg-main);
  align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center;
}
.loading-view[aria-hidden="true"]{ display:none !important; visibility:hidden !important; opacity:0 !important }
.spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:#1DB954;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ========== 15) Misc helpers ========== */
.pad-unavailable{ opacity:.5; pointer-events:none; filter:grayscale(1) }
.pad-ghost{ opacity:.45 }
.pad-drag{ cursor:grabbing }
#grid .pad{ touch-action:none }

/* ========== 16) Responsive Breakpoints ========== */

/* Phone portrait (<600px) */
@media (max-width: 599.98px){
  :root{
    --header-h: 52px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 160px;
    --pad-minh: 110px;
    --grid-gap: 14px;
    --chip-h: 26px;
    --chip-font: 13px;
  }
  .app-header{ padding:6px 12px }
  /* Behåll padding-top från basregeln; ändra bara sidor och botten */
  .main-content{ padding-inline:12px; padding-bottom:16px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:12px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
    scroll-snap-type:x proximity;
  }
  /* Override för hidden state */
  #bank-tabs.hidden-tabs {
    height: 12px !important;
    padding: 0 !important;
  }
  .bank-tab{ height:var(--chip-h); font-size:var(--chip-font); scroll-snap-align:start }
  body.focus-mode-active .pad{ filter:blur(2px) }
}

/* Tablet (600–1023.98px) */
@media (min-width: 600px) and (max-width: 1023.98px){
  :root{
    --header-h: 56px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 200px;
    --pad-minh: 120px;
    --grid-gap: 18px;
    --chip-h: 28px;
    --chip-font: 14px;
  }
  .app-header{ padding:8px 18px }
  /* Behåll padding-top från basregeln; ändra bara sidor och botten */
  .main-content{ padding-inline:18px; padding-bottom:20px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:18px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
  /* Override för hidden state */
  #bank-tabs.hidden-tabs {
    height: 12px !important;
    padding: 0 !important;
  }
}

/* Desktop (>=1024px) */
@media (min-width: 1024px){
  :root{
    --header-h: 56px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 220px;
    --pad-minh: 120px;
    --grid-gap: 20px;
    --chip-h: 28px;
    --chip-font: 14px;
  }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:24px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
  /* Override för hidden state */
  #bank-tabs.hidden-tabs {
    height: 12px !important;
    padding: 0 !important;
  }
}

/* Phone landscape tuning (≈480–740px) */
@media (min-width:480px) and (max-width:740px) and (orientation:landscape){
  :root{
    --pad-minw: 200px;
    --pad-minh: 108px;
    --grid-gap: 16px;
    --header-h: 52px;
    --tabsbar-h: var(--header-h);
    --chip-h: 26px;
    --chip-font: 13px;
  }
  .app-header{ padding:6px 16px }
  /* Behåll padding-top från basregeln; ändra bara sidor och botten */
  .main-content{ padding-inline:16px; padding-bottom:16px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:16px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
  /* Override för hidden state */
  #bank-tabs.hidden-tabs {
    height: 12px !important;
    padding: 0 !important;
  }
  .bank-tab{ height:var(--chip-h); font-size:var(--chip-font) }
  .pad .pad-name{ font-size: clamp(12px, 2.2vw, 14px) }
  .pad:hover{ transform: scale(1.01) }
  body.focus-mode-active .pad{ filter: blur(1.5px) }
}
/* === FIX 1: Add-New menu === */
.add-new-container { position: relative; }
.add-new-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface-translucent);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 150;
}
.add-new-popover.active { display: flex; }

/* Menu items with toggle indicators */
.add-new-popover .btn.popover-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}
.add-new-popover .menu-label {
  flex: 1;
}
.add-new-popover .menu-toggle {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-radius: 3px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
.add-new-popover .btn.popover-btn.toggled .menu-toggle {
  background: var(--spotify-green);
  border-color: var(--spotify-green);
}
.add-new-popover .btn.popover-btn.toggled .menu-toggle::after {
  content: '\2713'; /* Unicode checkmark ✓ */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* === FIX 2: Admin collapsible sections === */
details { border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
.details-content { padding: 0 0 16px 0; }

/* === FIX 3: White glow visibility === */
.pad:not(.playing):not(.focused-pad) {
  position: relative;
  z-index: 1;
}
.pad:not(.playing):not(.focused-pad)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  animation: whitePulseVisible 1.8s ease-in-out infinite;
}
@keyframes whitePulseVisible {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 0 24px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.4); }
}

.ios-audio-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(18,18,18,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 9999;
  padding: 10px 12px;
  display: none; /* JS sätter display:block på iOS */
}

.ios-audio-banner__inner{
  max-width: 920px;
  margin: 0 auto;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  color: #fff; font-size: 14px;
}

.ios-audio-banner__btn{
  appearance: none; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer;
  background: #1DB954; color: #121212;
}
.ios-audio-banner__btn:active { transform: translateY(1px); }
.ios-reconnect.hidden { display: none; }

.ios-reconnect {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
}

.ios-reconnect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .06s ease;
  background: #b91c1c; /* red by default */
}

.ios-reconnect-btn:active { transform: scale(.98); }

.ios-reconnect-btn.ok { background: #059669; }   /* green */
.ios-reconnect-btn.bad { background: #b91c1c; }  /* red  */

.ios-reconnect-btn .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3) inset;
}
.pad-progress {
  will-change: width;
}


/* iOS Audio Unlock Modal - NO BOX */
.ios-audio-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
}

.ios-audio-modal.hidden {
  display: none;
}

.modal-backdrop {
  display: none;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.modal-icon {
  display: none;
}

.modal-title {
  font-size: 34px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-description {
  display: none;
}

.swipe-container {
  width: 320px;
}

.swipe-track {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 38px;
  height: 76px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.swipe-text {
  display: none;
}

.swipe-thumb {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.swipe-thumb:active {
  cursor: grabbing;
}

.swipe-thumb.near-unlock {
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.5);
}

.swipe-icon {
  font-size: 28px;
  font-weight: 600;
  color: #000000;
  opacity: 0.8;
}

.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.modal-loading .spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 32px;
}


.modal-loading p {
  display: none;
}

.modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.success-icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #000000;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
  margin-top: 32px;
}

.modal-success p {
  display: none;
}

/* Device Modal - Spotify-inspirerad stil */
#device-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

#device-modal.active {
  display: flex;
}

#device-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

#device-modal .modal-dialog {
  position: relative;
  width: min(420px, 90vw);
  max-height: 80vh;
  background: #282828;
  border-radius: 8px;
  z-index: 1;
  overflow: hidden;
}

#device-modal .modal-content {
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
}

#device-modal .modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #404040;
}

#device-modal .modal-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

#device-modal .modal-header p {
  margin: 4px 0 0;
  color: #b3b3b3;
  font-size: 14px;
}

#device-modal .modal-list-container {
  padding: 8px 0;
}

#device-modal .modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #404040;
}

#device-modal .btn {
  padding: 12px 32px;
  border-radius: 500px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

#device-modal .btn:hover {
  transform: scale(1.04);
}

/* Device List Items */
.device-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.device-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  transition: background 0.2s;
  cursor: pointer;
}

.device-item:hover {
  background: #333;
}

.device-item.device-active {
  background: transparent;
  cursor: default;
}

.device-item.device-active::before {
  content: '';
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  background: #1DB954;
}

.device-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}

.device-item.device-active .device-icon {
  color: #1DB954;
}

.device-info {
  flex: 1;
}

.device-name {
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  margin-bottom: 2px;
}

.device-item.device-active .device-name {
  color: #1DB954;
}

.device-type {
  font-size: 13px;
  color: #b3b3b3;
}

.device-active-badge {
  display: none;
}
.spotify-connect-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.spotify-connect-logo svg:first-child {
  color: #1DB954;
}