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

:root {
  /* Mint/Sky Pastellpalette */
  --pastel-1: #B9FBC0;   /* Mintgrün */
  --pastel-2: #98F5E1;   /* Aqua/Mint */
  --pastel-3: #90DBF4;   /* Sky Blue */
  --pastel-4: #A0C4FF;   /* Hellblau */
  --pastel-5: #BDB2FF;   /* Fliederblau */

  --bg-card: #ffffff;
  --text: #2F2F33;
  --muted-text: #5F5F65;

  --btn-bg: var(--pastel-3);
  --btn-bg-hover: #74c7df;
  --btn-text: #1f2937;

  --border: #DDE6F0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: linear-gradient(135deg, var(--pastel-1), var(--pastel-2), var(--pastel-3));
  background-attachment: fixed;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; position: relative;
  color: var(--text);
}

h1 {
  margin: 24px 0 12px;
  color: var(--pastel-5);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

#supported-formats {
  margin: 10px 0 16px;
  text-align: center;
  font-size: 0.95em;
  color: var(--muted-text);
}

#drop-area {
  border: 2px dashed var(--pastel-5);
  border-radius: 12px;
  width: 90%; max-width: 640px;
  padding: 28px;
  background: var(--bg-card);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
#drop-area.highlight {
  background: var(--pastel-2);
  border-color: var(--pastel-3);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

#fileElem {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#fileLabel, #convertBtn {
  margin-top: 12px;
  padding: 12px 22px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.04);
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#fileLabel:hover, #convertBtn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
#convertBtn:disabled {
  background: #E3E8EF;
  color: #9AA3AF;
  cursor: not-allowed;
}

#options {
  margin: 18px 0;
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center; align-items: center;
  color: var(--text);
}
#options label { font-weight: 500; }
#options select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff; color: var(--text);
}
#options select:focus { box-shadow: 0 0 0 3px rgba(144,219,244,0.35); }

#fileList {
  margin: 18px 0;
  width: 90%; max-width: 640px;
  background: var(--bg-card);
  padding: 18px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.file-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.file-item:last-child { border-bottom: none; }
.file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text); display:flex; align-items:center; }
.file-size { margin-left:10px; color: var(--muted-text); }
.remove-btn {
  background: #ECFDF5; color:#064E3B;
  border:1px solid var(--border);
  padding:8px 12px; border-radius:10px;
  cursor:pointer; font-weight:500;
}
.remove-btn:hover { background:#D1FAE5; }

#status { margin:8px 0 20px; color: var(--text); font-weight:500; }

.progress-container {
  width:90%; max-width:640px;
  background-color: var(--pastel-2);
  border-radius: 10px;
  margin: 12px 0 18px;
  display:none; border:1px solid var(--border);
}
.progress-bar {
  width:0; height:22px;
  background-color: var(--pastel-3);
  border-radius:10px;
  text-align:center; line-height:22px;
  color:#1f2937; font-weight:700;
}

.home-icon {
  position:absolute; top:16px; left:16px;
  width:44px; height:44px;
  background-color: var(--bg-card);
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.15s, box-shadow 0.2s;
}
.home-icon:hover { transform:scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,0.16); }
.home-icon svg { width:24px; height:24px; fill:#60A5FA; }

.format-badge {
  display:inline-block; padding:4px 8px;
  margin-right:8px; border-radius:8px;
  font-size:0.8em;
  background-color: var(--pastel-2);
  color: var(--text);
  border:1px solid var(--border);
}
.format-flac, .format-mp3, .format-wav {
  background-color:#E0F2FE; color: var(--text);
}

.conversion-details {
  background-color: var(--bg-card);
  border-radius:12px; padding:14px 16px;
  margin-bottom:16px; width:90%; max-width:640px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  border:1px solid var(--border);
}
.conversion-details h3 { margin:0 0 10px; font-size:1.05em; font-weight:700; color: var(--text); }
.detail-row { display:flex; justify-content:space-between; margin-bottom:6px; }
.detail-label { font-weight:500; color: var(--muted-text); }

@media (max-width:600px) {
  .options-group { flex-direction: column; }
  #drop-area { padding:22px; }
}
/* ----------------------------------------------
   🌙 Dark Mode (automatisch via prefers-color-scheme)
   Greift nur, wenn das System/der Browser auf „Dunkel" steht
-----------------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrale Grundfarben für dunklen Hintergrund */
    --bg-card: #1f2937;      /* dunkles Grau für Karten/Panels */
    --text: #E5E7EB;         /* sehr hellgrauer Text */
    --muted-text: #9CA3AF;   /* abgeschwächter Text */
    --border: #374151;       /* dezente Border */

    /* Buttons etwas kräftiger, aber stimmig zum Mint/Sky-Thema */
    --btn-bg: #2563EB;       /* kräftiges Blau */
    --btn-bg-hover: #3B82F6; /* Hover-Blau */
    --btn-text: #F9FAFB;     /* heller Button-Text */
  }

  body {
    /* gedämpfter Verlauf in dunklen Blautönen mit leichtem Cyan-Stich */
    background: linear-gradient(135deg, #0b1220, #152238, #1b2f44);
    color: var(--text);
  }

  h1 {
    color: #93C5FD; /* helles Sky-Blue als Akzent */
    text-shadow: none;
  }

  #drop-area {
    background: #111827; /* fast schwarzgrau */
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  #drop-area.highlight {
    background: #0f172a; /* dunkler beim Drag-Over */
    border-color: #60A5FA; /* lebendiger Rand */
  }

  #fileLabel, #convertBtn {
    border-color: rgba(255,255,255,0.06);
    color: var(--btn-text);
  }
  #convertBtn:disabled {
    background: #334155; color: #94A3B8;
  }

  #options select {
    background: #0b1220; color: var(--text);
    border-color: var(--border);
  }
  #options select:focus { box-shadow: 0 0 0 3px rgba(96,165,250,0.35); }

  #fileList {
    background: #111827;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    border: 1px solid var(--border);
  }
  .file-item { border-bottom-color: var(--border); }
  .file-size { color: var(--muted-text); }

  .remove-btn {
    background: #0b1220; color: #E5E7EB; border-color: var(--border);
  }
  .remove-btn:hover { background: #121a2b; }

  #status { color: var(--text); }

  .progress-container {
    background-color: #0b1220; border-color: var(--border);
  }
  .progress-bar {
    background-color: #3B82F6; /* Blue Akzent */
    color: #F9FAFB;
  }

  .home-icon { background-color: #0b1220; box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
  .home-icon svg { fill: #60A5FA; }

  .format-badge { background-color: #0b1220; border-color: var(--border); color: var(--text); }
  .format-flac, .format-mp3, .format-wav { background-color: #1e293b; }

  .conversion-details { background-color: #111827; border-color: var(--border); }
  .conversion-details h3 { color: var(--text); }
}

/* ----------------------------------------------
   🌓 Manuelle Theme-Overrides (haben Vorrang vor prefers-color-scheme)
   Setze <html data-theme="dark"> oder "light" – JS-Toggle erledigt das automatisch
-----------------------------------------------*/
:root[data-theme="light"] {
  --bg-card: #ffffff;
  --text: #2F2F33;
  --muted-text: #5F5F65;
  --border: #DDE6F0;

  --btn-bg: var(--pastel-3);
  --btn-bg-hover: #74c7df;
  --btn-text: #1f2937;
}
:root[data-theme="light"] body {
  background: linear-gradient(135deg, var(--pastel-1), var(--pastel-2), var(--pastel-3));
}

:root[data-theme="dark"] {
  --bg-card: #1f2937;
  --text: #E5E7EB;
  --muted-text: #9CA3AF;
  --border: #374151;

  --btn-bg: #2563EB;
  --btn-bg-hover: #3B82F6;
  --btn-text: #F9FAFB;
}
:root[data-theme="dark"] body {
  background: linear-gradient(135deg, #0b1220, #152238, #1b2f44);
}

/* ----------------------------------------------
   Toggle-Button Styling
-----------------------------------------------*/
#themeToggle {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 110; /* über Home-Icon */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  font: 500 14px/1 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#themeToggle:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
#themeToggle svg { width: 18px; height: 18px; display: block; }

/* kleine visuelle States */
#themeToggle[aria-pressed="true"] .icon-moon { display: none; }
#themeToggle[aria-pressed="true"] .icon-sun { display: inline-block; }
#themeToggle[aria-pressed="false"] .icon-moon { display: inline-block; }
#themeToggle[aria-pressed="false"] .icon-sun { display: none; }