/* Navidrome-like dark theme variables */
:root {
  --app-bg: #0f1113;
  --surface: #151617;
  --muted: rgba(255,255,255,0.6);
  --accent: #1db954;
  --sidebar-width: 240px;
}

body {
  margin: 0;
  font-family: Roboto, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--app-bg);
  color: #e6eef3;
}

#root { height: 100vh }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-right: 1px solid rgba(255,255,255,0.03);
}

/* Library grid (album/artist style) */
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 12px; }
.card-media { position: relative; overflow: hidden; border-radius: 6px; background: #0b0b0b; }
.card-media img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms ease-in-out; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.32)); }
.card-media:hover .card-overlay,
.card-media:focus-within .card-overlay { opacity: 1; }
.card-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.5); color: #fff; padding: 2px 6px; border-radius: 12px; font-size: 12px; }

/* Play icon in overlay */
.card-overlay .play-button { background: rgba(0,0,0,0.6); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }

/* card server badge variant */
.card-badge.server-badge { left: auto; right: 8px; background: rgba(255,255,255,0.04); }

/* Touch-friendly helpers and mobile layout */
.touch-target { min-height: 48px; min-width: 48px; padding: 8px 12px; }

@media (max-width:600px) {
  .app-content { padding: 4px !important; }
  .touch-target { min-height: 56px; padding: 10px 16px; font-size: 1rem; }
  .library-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; padding: 8px 0; }
  .card-media img { height: 140px; object-fit: cover; }
}

@media (hover: none), (pointer: coarse) {
  .card-overlay { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.38)); }
  .card-overlay .play-button { width: 52px; height: 52px; }
}