/* ═══════════════════════════════════════════════════════════════════════
   responsive.css — Ooki Music Global Layout System
   Loaded on EVERY page. Controls breakpoints, shell layout, mobile fixes.
   DO NOT add design/color rules here — only layout & responsiveness.

   Breakpoints:
     Mobile   : ≤768px
     Tablet   : 769px–1024px
     Desktop  : ≥1025px
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Box-model safety ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
button { min-height: 44px; cursor: pointer; }

/* ── 1. Prevent horizontal overflow globally ──────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   SHELL PAGES (.ooki-shell) — listener-dashboard, artist-dashboard,
   developers/* etc. — CSS grid layout: nav | sidebar+main | player
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop shell vars */
:root {
  --shell-nav-height:    64px;
  --shell-player-height: 72px;
  --shell-sidebar-width: 220px;
  --shell-tabbar-height: 54px;
}

/* ── 2. MOBILE shell layout ≤768px ───────────────────────────────── */
@media (max-width: 768px) {

  /* Lock body — only .ooki-main scrolls */
  body { overflow: hidden; }

  /* Grid: nav top | main fills | player bottom */
  .ooki-shell {
    display: grid !important;
    grid-template-areas:
      "nav"
      "main"
      "player" !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
      var(--shell-nav-height, 64px)
      1fr
      var(--shell-player-height, 72px) !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* When tab bar is injected, shrink shell height */
  .ooki-shell.has-tabbar {
    height: calc(100dvh - var(--shell-tabbar-height, 54px)) !important;
  }

  /* Nav bar — logo + hamburger ONLY */
  .ooki-nav {
    grid-area: nav !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    gap: 0 !important;
    height: var(--shell-nav-height, 64px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Nav logo: left-aligned, full text visible */
  .ooki-nav .nav-logo {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }
  .ooki-nav .nav-logo img      { height: 26px !important; width: auto !important; }
  .ooki-nav .nav-logo-text     { font-size: 17px !important; }

  /* Hide everything in nav EXCEPT logo and hamburger */
  .ooki-nav .nav-search,
  .ooki-nav .nav-icon-btn,
  .ooki-nav .theme-toggle,
  .ooki-nav .nav-avatar,
  .ooki-nav .dropdown,
  .ooki-nav .nav-actions       { display: none !important; }

  /* Hamburger (injected by ooki-public-nav.js) */
  .ooki-nav .nav-hamburger {
    display: inline-flex !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Sidebar: completely off screen */
  .ooki-sidebar { display: none !important; }

  /* Main: fills remaining space, scrolls vertically only */
  .ooki-main {
    grid-area: main !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    /* bottom pad: content clears the player grid row */
    padding-bottom: 20px !important;
    width: 100% !important;
  }

  /* Player bar: stays in grid row, compact */
  .ooki-player {
    grid-area: player !important;
    height: var(--shell-player-height, 72px) !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  /* Player: hide extras on mobile */
  .ooki-player .player-extra,
  .ooki-player .player-volume,
  .ooki-player .player-progress { display: none !important; }

  /* Player controls: horizontal always */
  .ooki-player .player-controls,
  .ooki-player .player-buttons  {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Player: compact sizes */
  .ooki-player .player-track-art   { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; }
  .ooki-player .player-track       { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
  .ooki-player .player-track-title { font-size: 12px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .ooki-player .player-track-artist{ font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .ooki-player .player-btn         { width: 34px !important; height: 34px !important; font-size: 15px !important; min-height: 34px !important; }
  .ooki-player .player-btn.play-btn{ width: 42px !important; height: 42px !important; min-height: 42px !important; }

  /* Tab bar (injected by ooki-shell.js) */
  #mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: var(--shell-tabbar-height, 54px) !important;
    z-index: 500 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Page content: uniform padding */
  .ooki-main .page-content,
  .ooki-main .dash-page-content {
    padding: 14px 14px 100px !important;
  }

  /* ── Content grids: 2-col cards, 1-col tracks ─────────────────── */
  .grid-5, .grid-6      { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .grid-6.artist-grid   { grid-template-columns: repeat(3, 1fr) !important; }

  /* Quick picks: 1-col, full width */
  .quick-pick, #quick-picks {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .quick-pick-item {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; box-sizing: border-box !important;
  }

  /* Genre pills: horizontal scroll */
  .genre-filter-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .genre-filter-row::-webkit-scrollbar { display: none !important; }
  .genre-filter-row .genre-pill        { flex-shrink: 0 !important; }

  /* Track rows: info + duration only */
  .track-row {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important; padding: 10px 12px !important;
    overflow: hidden !important; width: 100% !important;
  }
  .track-number, .track-play-hover,
  .track-plays, .track-actions { display: none !important; width: 0 !important; }
  .track-info     { min-width: 0 !important; overflow: hidden !important; }
  .track-meta     { min-width: 0 !important; overflow: hidden !important; }
  .track-title    { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .track-artist   { font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .track-duration { font-size: 11px !important; min-width: 32px !important; text-align: right !important; }

  /* Section spacing */
  .section         { margin-bottom: 24px !important; }
  .section-header  { margin-bottom: 12px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .section-title   { font-size: 16px !important; }

  /* Hero card */
  .dash-hero-wrap { padding: 12px 14px 0 !important; }
  .dash-hero-card {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 12px !important; padding: 18px 20px !important;
  }
  .dash-hero-title { font-size: 19px !important; line-height: 1.3 !important; }
  .dash-hero-cta   { width: 100% !important; justify-content: center !important; }
  .dash-hero-bg    { display: none !important; }

  /* Card text: always truncate */
  .music-card-title, .music-card-sub, .artist-name {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .music-card-title { font-size: 12px !important; }
  .music-card-sub   { font-size: 11px !important; }
  .artist-name      { font-size: 12px !important; }

  /* FABs: raise above player + tab bar */
  .ooki-shell .muse-fab,
  .ooki-shell .ooki-search-fab {
    bottom: calc(var(--shell-player-height, 72px) + var(--shell-tabbar-height, 54px) + 14px) !important;
    right: 14px !important;
  }
  .ooki-shell .muse-panel {
    bottom: calc(var(--shell-player-height, 72px) + var(--shell-tabbar-height, 54px) + 74px) !important;
    right: 14px !important;
    width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 200px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET — 769px to 1024px
   Sidebar collapses to icon-only; grids go 2–3 col
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  .ooki-sidebar {
    width: 72px !important;
    overflow: visible !important;
  }
  .sidebar-section-label,
  .sidebar-nav-item > span:not(.nav-icon),
  .sidebar-nav-item > a:not(.nav-icon),
  .sidebar-footer .sidebar-nav-item > span:not(.nav-icon) {
    display: none !important;
  }
  .sidebar-nav-item {
    justify-content: center !important;
    padding: 12px 8px !important;
  }
  .nav-icon { margin: 0 auto !important; }

  .grid-5  { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-6  { grid-template-columns: repeat(4, 1fr) !important; }
  .quick-pick { grid-template-columns: repeat(2, 1fr) !important; }

  .page-content { padding: 0 20px 100px !important; }
  .section-title { font-size: 18px !important; }

  /* Hide desktop-only nav items on tablet too */
  .ooki-nav .nav-search { max-width: 260px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC (non-shell) pages — marketing, guides, legal, etc.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Public nav: logo + hamburger only (hides links, cta-group) */
  .public-nav .nav-links,
  .public-nav .nav-cta-group,
  .main-nav    > div:not(:first-child):not(.nav-mobile-menu),
  .story-nav   .nav-links,
  .story-nav   .nav-cta-group,
  .top-nav     .nav-links,
  .pt-nav      .nav-links-row,
  .pt-nav      .nav-actions,
  .search-nav  .nav-actions,
  .legal-nav   > div:not(.nav-mobile-menu),
  .lic-nav     .nav-links-row,
  .omg-nav     > div:last-child,
  .omg-dev-nav > div:last-child,
  .guide-nav   .nav-cta-group { display: none !important; }

  /* Always show hamburger on all nav types */
  .nav-hamburger { display: inline-flex !important; }

  /* Body: scrolls normally on public pages (not fixed-shell) */
  body:not(:has(.ooki-shell)) { overflow-x: hidden; overflow-y: auto; }

  /* Public player bar: fixed bottom */
  body:not(:has(.ooki-shell)) .ooki-player,
  .ooki-player-public {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 68px !important;
    z-index: 800 !important;
    padding: 0 14px !important;
  }
  body:not(:has(.ooki-shell)) { padding-bottom: 68px; }
}

/* ═══════════════════════════════════════════════════════════════════
   OMG RADIO page — centered fullscreen layout
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .omg-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100dvh - 60px - 68px) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .station-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .visualizer-wrap {
    width: 180px !important;
    height: 180px !important;
    margin-bottom: 24px !important;
  }

  .station-name   { font-size: 28px !important; }
  .station-tagline{ font-size: 13px !important; line-height: 1.5 !important; }

  .omg-controls   { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; }

  .omg-nav {
    padding: 0 14px !important;
    height: 60px !important;
    gap: 10px !important;
  }
  .omg-nav .nav-link { display: none !important; }
  .omg-nav > div:last-child { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER DRAWER — items that appear inside the nd-drawer
   These supplement ooki-public.css nd-drawer rules
   ═══════════════════════════════════════════════════════════════════ */

/* Shell-page extras in drawer: search bar row */
.nd-drawer .nd-shell-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 16px;
}
.nd-drawer .nd-shell-search i {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 14px;
  flex-shrink: 0;
}
.nd-drawer .nd-shell-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary, #fff);
  font-size: 14px;
  min-width: 0;
}
.nd-drawer .nd-shell-search input::placeholder {
  color: var(--text-muted, rgba(255,255,255,0.35));
}

/* Notification row in drawer */
.nd-drawer .nd-notif-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  margin: 0 8px;
  transition: background 0.15s;
}
.nd-drawer .nd-notif-row:hover {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
}
.nd-drawer .nd-notif-row i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: var(--text-muted, rgba(255,255,255,0.45));
}
.nd-drawer .nd-notif-badge {
  margin-left: auto;
  background: var(--ooki-red, #ff0a3d);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

/* Divider between shell extras and menu sections */
.nd-drawer .nd-shell-divider {
  height: 1px;
  background: var(--border-subtle, rgba(255,255,255,0.07));
  margin: 8px 16px 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TOUCH + PERFORMANCE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Touch targets */
  button, a, [role="button"] { min-height: 44px; }
  .genre-pill, .sidebar-nav-item { min-height: 36px !important; }

  /* Smooth scrolling */
  .ooki-main { scroll-behavior: smooth; }

  /* Prevent content flash during scroll */
  .ooki-main > * { contain: layout style; }
}