/* assets/css/style.css (FULL - CLEAN GLOBAL)
   - Desktop layout preserved
   - Mobile: bottom nav + full width content
   - Sidebar CSS moved to assets/css/sidebar.css
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --sidebar-width: 240px;
    --topbar-height: 80px;
    --app-max-width: 1000px;

    --bg-main: #F3F4F6;
    --text-dark: #1F2937;
    --text-gray: #6B7280;
    --accent-yellow: #FFD600;

    /* ✅ ONE SOURCE OF TRUTH (mobile fixed bars) */
    --mobile-nav-height: 64px;        /* bottom nav actual height */
    --mobile-player-height: 72px;     /* player actual height */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

html, body{
    width: 100%;
    overflow-x: hidden; /* ✅ prevent horizontal side gaps */
}

body {
    min-height: 100vh;
    overflow-y: auto;
    background: var(--bg-main);
    display: block;
}

/* Lock scroll when menu open */
body.menu-open { overflow: hidden; }

/* --- TOPBAR --- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--topbar-height);
    width: 100%;
    background: #ffffff;
    border-bottom: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    padding: 0;
    z-index: 3000 !important;
}

.topbar-inner {
    width: 100%;
    max-width: var(--app-max-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
}

/* Brand */
.app-brand {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 220px;
    flex-shrink: 0;
}
.app-brand i {
    background: #1F2937;
    color: #fff;
    padding: 7px;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Mobile hamburger (hidden on desktop) */
.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #fff;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
    flex-shrink: 0;
}
.mobile-menu-btn i { font-size: 16px; }

/* --- APP WRAPPER --- */
.app-wrapper {
    margin-top: var(--topbar-height);
    display: flex;
    min-height: calc(100vh - var(--topbar-height));
    width: 100%;
    max-width: var(--app-max-width);
    margin-left: auto;
    margin-right: auto;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    overflow: visible;
}

/* --- MAIN CONTENT --- */
.main-content { flex: 1; min-width: 0; }
.content-scroll { width: 100%; }

/* =========================================
   PAGINATION
   ========================================= */
.pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding-bottom: 8px;
}

.page-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #6B7280;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1;
}

.page-btn:hover:not(.active):not(.disabled) {
  background: #F3F4F6;
  color: #111827;
}

.page-btn.active {
  background: #E50914;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.18);
}

.page-btn.disabled {
  color: #E5E7EB;
  cursor: default;
}

.page-dots {
  color: #9CA3AF;
  font-size: 0.75rem;
  margin: 0 2px;
}

/* =========================================
   FOOTER
   ========================================= */
.app-footer {
    width: 100%;
    margin-top: 12px;
    padding: 40px 20px;
    background-color: #ffffff;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: center;
}

.footer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 600px;
}

.f-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2px 0;
}
.f-links a {
    font-size: 0.8rem;
    font-weight: 500;
    color: #4B5563;
    text-decoration: none;
    transition: color 0.2s ease;
}
.f-links a:hover { color: #111827; }

.f-copy {
    font-size: 0.72rem;
    color: #9CA3AF;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.f-brand { display:flex; justify-content:center; margin-bottom:10px; }
.f-logo { height: 28px; width: auto; display:block; }

@media (max-width: 520px){
    .f-links { gap: 18px; }
    .app-footer { padding: 34px 16px; }
}


/* MOBILE BREAKPOINT */
@media (max-width: 900px) {

    /* ✅ FLUSH EDGE FIX (TOPBAR + APP WRAPPER) */
    .topbar{
        justify-content: flex-start !important;
    }
    .topbar-inner{
        max-width: 100% !important;  /* remove boxing on mobile */
        width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }

    .app-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - var(--topbar-height));
    }

    .app-brand{
        width: auto;
        font-size: 1.1rem;
        gap: 8px;
        margin-right: auto;
    }

    .mobile-menu-btn{
        display: inline-flex !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2005 !important;
    }

    .main-content { width: 100%; }
    .mobile-nav { display: block; }
}

/* ===============================
   MOBILE GRID: 4 (<=480), 6 (481-768)
   =============================== */

/* small phones */
@media (max-width: 480px) {
  .station-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* phones/tablets */
@media (min-width: 481px) and (max-width: 768px) {
  .station-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* =======================================================
   ✅ OPTIONAL: Station grid padding on mobile (flush but nice)
   ======================================================= */
@media (max-width: 900px){
  .station-grid{
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =======================================================
   ✅ MOBILE: PLAYER ABOVE BOTTOM NAV
   ======================================================= */
@media (max-width: 768px){

  #player-capsule{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;

    bottom: var(--mobile-nav-height) !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--mobile-player-height) !important;

    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.10);

    border-radius: 0 !important;
    transform: none !important;

    z-index: 2700 !important;

    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* ✅ KEY: space under FOOTER, NOT blank above it */
  .content-scroll{
    padding-bottom: calc(
      var(--mobile-player-height) +
      var(--mobile-nav-height) +
      14px +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  .app-footer{
    margin-bottom: 0 !important;
  }

  .vol-container{ display: none !important; }
}

/* Overlay below topbar */
.mobile-overlay { z-index: 1200 !important; }

/* Heart red */
.btn-fav.active i,
.btn-fav.fa-solid {
    color: #E50914 !important;
    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
}
.btn-fav:hover i { color: #ff4d4d !important; }

/* =========================================
   PLAYLIST MODE (RECENT + FAVORITES)
   ========================================= */
.station-grid.playlist-mode {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.playlist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.playlist-row:hover {
  background: #F9FAFB;
  transform: translateY(-1px);
}
.playlist-row .img-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
  flex-shrink: 0;
}
.playlist-row .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.playlist-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.playlist-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-sub {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.station-grid.playlist-mode .playlist-actions i{
  font-size: 20px;
  line-height: 1;
}
.station-grid.playlist-mode .playlist-actions .pl-btn{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   SMART MARQUEE CSS
   ========================================= */
#pi-title {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
}
#pi-title.is-marquee {
    justify-content: flex-start;
}
.marquee-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-scroll 20s linear infinite;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ✅ DESKTOP: align logo ngadto sa left edge sa app-wrapper/sidebar */
@media (min-width: 901px){
  .topbar-inner{
    padding-left: 0;   /* from 20px -> 0 (or 10px kung gusto gamay) */
    padding-right: 20px;
  }

  .app-brand{
    margin-left: 10px; /* OPTIONAL: match imong sidebar inner padding */
  }
}

/* =======================================================
   MOBILE ALIGN FIX v2 — RECENT & FAVORITE
   - Remove double padding sa wrappers
   - Set exact padding ONLY sa playlist grid
   - Para match sa player left/right edge
   ======================================================= */
@media (max-width: 768px){

  /* wrappers */
  .main-content,
  .app-wrapper,
  .page-content,
  .content,
  .content-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* keep content readable (NOT 0) */
  .content-scroll{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* playlist grid exact (full width inside content-scroll) */
  #station-grid.playlist-mode{
    padding-left: 0px !important;
    padding-right: 0px !important;
    box-sizing: border-box !important;
  }

  #station-grid.playlist-mode .playlist-row{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =======================================================
   EMERGENCY SIDEBAR RESTORE (after generator/player2/content updates)
   - Fixes transform/overflow side-effects
   ======================================================= */

/* 1) Make sure fixed works correctly */
html, body{
  overflow-x: hidden;
}

/* 2) If any wrapper got transform, kill it ONLY for layout wrapper */
.app-wrapper,
#app,
.page-wrapper,
.main-wrapper,
.content-wrapper{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 3) Sidebar fallback: use STICKY (more stable if wrappers changed) */
@media (min-width: 901px){
  .sidebar{
    position: sticky !important;
    left: auto !important;
    top: var(--topbar-height) !important;
    height: calc(100vh - var(--topbar-height)) !important;
    z-index: 1200 !important;
  }

  .main-content{
    margin-left: var(--sidebar-width) !important;
  }
}