/* ============================================================================
   AudioMixer Pro — Optiscanner Theme (Cleaned + Responsive)
   ----------------------------------------------------------------------------
   Goals:
   - Retro terminal aesthetic
   - Mobile-friendly spacing & tap targets
   - Stable flex/grid behavior (no random wrapping)
   - iOS/PWA file input tap works
   - No Safari “double-outline” inputs
   ============================================================================ */

/* -- Fonts ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* -- Theme Tokens ----------------------------------------------------------- */
:root{
  --color-background:#e9e9e9;
  --color-panel:#d1d1d1;
  --color-text:#2c2c2c;
  --color-border:#555;
  --color-interactive:#4a4a4a;
  --color-backdrop:#fff;

  --content-max:1200px;
  --radius:0px;
  --touch-height:44px;

  --font-ui:'Roboto Mono','Courier New',monospace;
  --font-body:'Helvetica Neue',Arial,sans-serif;
}

/* -- Base ------------------------------------------------------------------- */
*{ box-sizing:border-box; }

body{
  margin:0;
  padding:0 0 40px;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.4;
}

/* -- Layout ----------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:16px;
}

.grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}

@media (min-width:900px){
  .cols{
    grid-template-columns:400px 1fr;
    align-items:start;
  }
}

@media (max-width: 420px){
  .seg-fields-row{
    grid-template-columns: 1fr;
  }
}

/* -- Typography ------------------------------------------------------------- */
h3{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 1rem 0;
  font-size:1rem;
  border-bottom:2px solid var(--color-border);
  padding-bottom:8px;
  display:inline-block;
}

.small{ font-size:.85rem; color:#444; }
.m-0{ margin:0; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:16px; }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* -- Panels ----------------------------------------------------------------- */
.panel{
  background:var(--color-panel);
  border:2px solid var(--color-border);
  padding:16px;
  border-radius:var(--radius);
  box-shadow:4px 4px 0 rgba(0,0,0,.1);
}

/* -- Header / Toolbar ------------------------------------------------------- */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(233,233,233,.95);
  border-bottom:2px solid var(--color-border);
  padding:10px 0;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

#projectTitle{
  font-family:var(--font-ui);
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  font-weight:700;
  font-size:1.1rem;
  color:var(--color-text);
  min-width:200px;
}
#projectTitle:focus{
  outline:none;
  border-bottom-color:var(--color-interactive);
}

/* Chips */
.chip{
  font-family:var(--font-ui);
  font-size:.75rem;
  padding:4px 8px;
  background:var(--color-backdrop);
  border:1px solid var(--color-border);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Stack: make the "Playback:" label look like plain text (no chip border/box) */
.seg .seg-mode-selector .chip.small{
  background: transparent;
  border: none;
  padding: 0;
}

/* -- Buttons & Inputs (Base) ------------------------------------------------ */
/* Keep these predictable. Only specific toolbars/rows should stretch. */
button, .btn, label.fileBtn, input[type="text"], input[type="number"]{
  font-family:var(--font-ui);
  height:var(--touch-height);
  padding:0 16px;
  font-size:.9rem;

  background:var(--color-backdrop);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--radius);

  cursor:pointer;
  text-transform:uppercase;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
  min-width:fit-content;
}

button:hover:not(:disabled){
  background:var(--color-interactive);
  color:#fff;
  box-shadow:2px 2px 0 rgba(0,0,0,.2);
  transform:translateY(-1px);
}
button:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:none;
}
button:disabled{
  background:#ccc;
  color:#888;
  border-color:#aaa;
  cursor:not-allowed;
  opacity:.7;
}

button.accent{ background:#c0c0c0; font-weight:700; }
button.primary{ background:#a0a0a0; border:2px solid var(--color-border); font-weight:700; }
button.danger{ background:#eab3b3; border-color:#9f1212; }

button.compact{
  height:32px;
  padding:0 12px;
  font-size:.8rem;
  flex:0 0 auto;
}

/* Make toolbar button rows fill space nicely, but don’t balloon icons */
.toolbar .row > button,
.toolbar .row > label.fileBtn{ flex:1 1 auto; }
.toolbar .row > #btnTheme,
.toolbar .row > a.btn{ flex:0 0 auto; }

/* iOS/PWA file input must be what’s tapped */
label.fileBtn{
  position:relative;
  overflow:hidden;
}
label.fileBtn > input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.001;
  cursor:pointer;
  font-size:100px; /* big tap target for iOS */
}
label.fileBtn.disabled{
  opacity:.7;
  pointer-events:none;
  background:#ccc;
  color:#888;
  border-color:#aaa;
}

/* -- Rows / Editor Bar ------------------------------------------------------ */
.row, #editorBar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* Input groups */
.inline{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--color-backdrop);
  padding:0 12px;
  border:1px solid var(--color-border);
  height:var(--touch-height);
  flex:1 0 auto;
  min-width:140px;
  max-width:200px;
}
.inline span.small{
  flex-shrink:0;
  white-space:nowrap;
}
.inline input{
  border:none;
  height:100%;
  background:transparent;
  width:auto;
  flex:1;
  min-width:0;
  text-align:right;
  font-weight:700;
  font-family:var(--font-ui);
  font-size:.9rem;
}
.inline input:focus{ outline:none; }

input[type="range"]{
  height:24px;
  flex:1;
  border:none;
  background:transparent;
  padding:0;
}

/* Zoom controls stay on one line */
.zoom-row{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
}
.zoom-row button{
  flex:0 0 44px;
  padding:0;
  min-width:44px;
}
.zoom-row #inputZoom{
  flex:1 1 60px;
  width:auto;
  min-width:56px;
  max-width:90px;
}

/* Stack: Active Recall goes to its own full-width row under the number fields */
.seg .seg-fields-row .field-checkbox{
  grid-column: 1 / -1;   /* span all columns */
  justify-content: flex-start;
  padding-top: 2px;
}

/* -- Lists & Cards ---------------------------------------------------------- */
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.seg {
  background: var(--color-backdrop);
  border: 1px solid var(--color-border);
  padding: 12px;
  border-radius: var(--radius);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  
  cursor: pointer; 
  transition: background 0.1s;
}

/* Optional: visual feedback on hover */
.seg:hover {
  background: #fff; /* or slightly lighter color in dark mode */
  border-color: var(--color-interactive);
}

.seg.selected{
  border:2px solid var(--color-text);
  background:#fff;
  box-shadow:4px 4px 0 rgba(0,0,0,.1);
}

.seg-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.seg-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  min-width:0;
}
.seg-ctrls{ display:flex; gap:4px; }

#stack, #playlist{ overflow-x:hidden; }

/* Responsive grid inside stack cards */
/* Stack fields: compact grid (don’t stretch fields across the whole card) */
/* Stack fields: 2-up, tighter width */
.seg-fields-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 170px));
  gap: 10px;
  margin-top: 10px;
  justify-content: start;
}

.seg-fields-row > *{ min-width:0; }

/* Standard field layout */
.field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field label{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.1;
  margin:0 0 6px 0;
}
.field input{
  width:100%;
  text-align:center;
}

/* Active Recall checkbox should NOT look like a boxed input */
.seg .field-checkbox,
.checkbox-field{
  background:transparent;
  border:none;
  padding:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:0;
}
.seg .field-checkbox label,
.checkbox-field label{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.seg .field-checkbox input[type="checkbox"],
.checkbox-field input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:0;
}

/* Ensure stack fields use grid sizing, not flex sizing */
.seg-fields-row .field,
.seg-fields-row .field-checkbox{
  width: auto;
  max-width: 180px;   /* matches your grid */
}

/* Safari/iOS “double outline” fix for stack inputs */
#stack .field input[type="number"],
#stack .field input[type="text"]{
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none;
  outline:none;
  background-clip:padding-box;
}

/* Focus ring (clean + intentional) */
#stack .field input[type="number"]:focus,
#stack .field input[type="text"]:focus{
  outline:2px solid var(--color-interactive);
  outline-offset:0;
}


.seg .field input[type="number"],
.seg .field input[type="text"]{
  display: block;        /* override global inline-flex */
  width: 100%;
  height: 36px;          /* a bit smaller than 44px inside cards */
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-backdrop);
  color: var(--color-text);
  font-family: var(--font-ui);
  text-align: center;
}



/* -- Media ------------------------------------------------------------------ */
audio{
  width:100%;
  display:block;
  height:40px;
  border-radius:var(--radius);
}

/* -- Waveform ---------------------------------------------------------------- */
.wave-wrap{
  background:#111;
  border:4px solid var(--color-border);
  padding:0;
  position:relative;
  margin-top:16px;
}
canvas{ display:block; width:100%; height:160px; }
.playhead{ position:absolute; top:0; bottom:0; width:2px; background:#0f0; pointer-events:none; }

/* -- Minimap ---------------------------------------------------------------- */
.minimap-container{
  height:64px;
  width:100%;
  background:#111;
  border:2px solid var(--color-border);
  margin-top:15px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
#minimap{
  width:100%;
  height:100%;
  display:block;
}

/* -- Playlist Player UI (Hero Layout) --------------------------------------- */
.playlist-player-ui {
  display: flex;
  flex-direction: column;
  background: var(--color-backdrop);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
}

/* Hero Art Wrapper: Centered Square */
.hero-art-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 240px; /* Adjust size of the square here */
  aspect-ratio: 1 / 1;
  background: #333;
  border: 2px solid var(--color-text);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
}

.hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero Meta Data */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-title {
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-artist {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero Progress Bar */
.pl-progress-track {
  width: 100%;
  height: 8px; /* Thinner, cleaner look */
  background: #ccc;
  border: 1px solid var(--color-border);
  position: relative;
  cursor: pointer; /* Ready for seeking logic later */
  border-radius: 4px;
  overflow: hidden;
}
.pl-progress-bar {
  height: 100%;
  background: var(--color-interactive);
  width: 0%;
  transition: width 0.1s linear;
}

/* Hero Controls */
.hero-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Playlist Scroll Area (Ensure list doesn't get squashed) */
.playlist-scroll-area {
  max-height: 400px; /* Optional: Makes the list scrollable if it gets too long */
  overflow-y: auto;
  border-top: 2px solid var(--color-border);
  padding-top: 16px;
}

/* Dark Mode Overrides for Hero */
body.dark-mode .playlist-player-ui {
  background: #1e1e1e;
}
body.dark-mode .hero-art-wrapper {
  border-color: #666;
}
body.dark-mode .pl-progress-track {
  background: #444;
  border-color: #666;
}

/* Drag & Drop Visual State */
.hero-art-wrapper.drag-over {
  border-color: var(--color-interactive);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); /* Blue glow */
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.hero-art-wrapper.drag-over::after {
  content: 'Drop Image';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: bold;
  font-family: var(--font-ui);
  pointer-events: none;
}

/* --- Album art: never let it stretch the playlist width ------------------- */
#plArt,
#metaArtPreview {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover;
  flex: 0 0 48px;
  display: block;
}

/* If playlist cards render album art images inside the playlist list,
   clamp those too (safe + prevents "full width art" in cards). */
#playlist img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: cover;
  display: block;
}

/* -- Dialog ----------------------------------------------------------------- */
dialog{
  background:var(--color-background);
  border:2px solid var(--color-text);
  box-shadow:8px 8px 0 rgba(0,0,0,.2);
  padding:20px;
  max-width:90vw;
  width:400px;
}
dialog::backdrop{ background:rgba(0,0,0,.6); }

/* -- Header Redesign (Sponsorship) ----------------------------------------- */
.header-top-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  border-bottom:2px solid var(--color-border);
  padding-bottom:10px;
  margin-bottom:10px;
}
.header-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.sponsor-card{
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:700;
  background:#fff;
  border:2px solid var(--color-text);
  padding:6px 12px;
  text-decoration:none;
  color:var(--color-text);
  box-shadow:3px 3px 0 rgba(0,0,0,.1);
  transition:all .1s;
  display:inline-block;
}
.sponsor-card:hover{
  transform:translateY(1px);
  box-shadow:1px 1px 0 rgba(0,0,0,.1);
  background:var(--color-interactive);
  color:#fff;
}

/* -- Footer ----------------------------------------------------------------- */
.app-footer{
  margin-top:40px;
  padding:40px 0;
  border-top:2px solid var(--color-border);
  background:var(--color-background);
  text-align:center;
  font-family:var(--font-ui);
  font-size:.8rem;
  color:#666;
}
.app-footer a{
  color:var(--color-text);
  text-decoration:none;
  font-weight:700;
}
.app-footer a:hover{
  text-decoration:underline;
  color:var(--color-interactive);
}
.footer-links{
  margin:10px 0;
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
}
.sep{ color:var(--color-border); }
.small-print{
  font-size:.7rem;
  opacity:.7;
  margin-top:8px;
}

/* -- Dark Mode -------------------------------------------------------------- */
body.dark-mode{
  --color-background:#121212;
  --color-panel:#1e1e1e;
  --color-text:#e0e0e0;
  --color-border:#444;
  --color-interactive:#3b82f6;
  --color-backdrop:#2a2a2a;
}

body.dark-mode header{ background:rgba(30,30,30,.95); }
body.dark-mode #projectTitle{ color:#fff; }

body.dark-mode .playlist-player-ui{
  background:var(--color-panel);
  border-color:var(--color-border);
}

body.dark-mode .sponsor-card{
  background:var(--color-panel);
  border-color:var(--color-border);
  color:var(--color-text);
}

/* Dark mode buttons */
body.dark-mode button{
  background:#333;
  color:#eee;
  border-color:#555;
}
body.dark-mode button.accent{ background:#444; color:#fff; }
body.dark-mode button.primary{ background:#222; border-color:#666; }
body.dark-mode button.danger{ background:#522; color:#faa; border-color:#833; }
body.dark-mode button:hover:not(:disabled){
  background:#525252;
  color:#fff;
  border-color:#737373;
}

/* Audio player inversion for dark mode */
body.dark-mode audio{
  filter:invert(1) hue-rotate(180deg);
}

/* Selected card */
body.dark-mode .seg.selected{
  background:#262626;
  border-color:#a3a3a3;
}

/* Dark footer tweaks */
body.dark-mode .app-footer{
  color:#888;
  border-color:#333;
}
body.dark-mode .app-footer a{ color:#ccc; }
body.dark-mode .app-footer a:hover{ color:#fff; }