/**
 * SunskaRecords Responsive Styles
 * Additional responsive overrides
 */

/* Mobile Navigation Overlay */
.sr-mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--sr-bg, #fff);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: var(--sr-shadow-lg);
}

.sr-mobile-nav.open {
    transform: translateX(0);
}

.sr-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sr-mobile-overlay.visible {
    opacity: 1;
}

.sr-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    font-size: 20px;
    color: var(--sr-text);
}

@media screen and (max-width: 992px) {
    .sr-mobile-nav {
        display: block;
    }

    .sr-mobile-overlay {
        display: block;
        pointer-events: none;
    }

    .sr-mobile-overlay.visible {
        pointer-events: auto;
    }

    .sr-hamburger {
        display: block;
    }

    /* Adjust main content for no sidebar */
    .sr-main {
        height: calc(100vh - var(--sr-topbar-height) - 64px);
    }
}

@media screen and (max-width: 768px) {
    /* Stack the topbar elements */
    .sr-topbar .logo span {
        display: none;
    }

    .sr-search-bar {
        max-width: none;
    }

    .sr-user-menu {
        gap: 8px;
    }

    /* Full width song cards on very small screens */
    .sr-section-header h2 {
        font-size: 18px;
    }

    /* Compact song rows */
    .sr-song-list .song-row {
        padding: 8px;
    }

    .sr-song-list .song-row .row-artwork {
        width: 36px;
        height: 36px;
    }
}

/* Compact header search on small screens */
@media screen and (max-width: 640px) {
    header[role="banner"] form[role="search"] input[type="search"] {
        font-size: 12px;
    }
    header[role="banner"] form[role="search"] input[type="search"]::placeholder {
        content: "Search...";
    }
}

/* Admin bar adjustment */
.admin-bar .sr-topbar {
    top: 32px;
}

.admin-bar .sr-sidebar {
    top: calc(var(--sr-topbar-height) + 32px);
    height: calc(100vh - var(--sr-topbar-height) - var(--sr-player-height) - 32px);
}

.admin-bar .sr-main {
    height: calc(100vh - var(--sr-topbar-height) - var(--sr-player-height) - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .sr-topbar {
        top: 46px;
    }
}

/* ============================================
   MOBILE RESPONSIVE FIXES (v1.5.0)
   ============================================ */

/* ------------------------------------------
   1A. Player Bar — Mobile Layout
   ------------------------------------------ */
@media screen and (max-width: 767px) {
    /* Reduce player height */
    #sr-player {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 12px !important;
    }

    /* Now-playing: remove fixed width, flex fill */
    #sr-player > div:first-child {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0%;
        gap: 8px !important;
    }

    /* Smaller artwork */
    #sr-player > div:first-child > div:first-child {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
    }
    #sr-player > div:first-child > div:first-child img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Hide love button in now-playing */
    #sr-np-love {
        display: none;
    }

    /* Transport controls: collapse */
    #sr-player > div:nth-child(2) {
        flex: 0 0 auto !important;
        max-width: none !important;
        margin: 0 8px !important;
    }

    /* Hide shuffle and repeat */
    #sr-btn-shuffle,
    #sr-btn-repeat {
        display: none;
    }

    /* Reduce gap between transport buttons */
    #sr-player > div:nth-child(2) > div:first-child {
        gap: 12px !important;
    }

    /* Hide progress bar row */
    #sr-player > div:nth-child(2) > div:last-child {
        display: none;
    }

    /* Right side: remove fixed width, auto size */
    #sr-player > div:last-child {
        width: auto !important;
        flex: 0 0 auto;
    }

    /* Hide volume control on mobile */
    #sr-player > div:last-child > div.group {
        display: none;
    }

    /* Adjust content padding for shorter player */
    main[role="main"] > div {
        padding-bottom: 80px !important;
    }

    /* Queue/notif panels: adjust bottom for shorter player */
    #sr-queue-panel,
    #sr-notifications-panel {
        bottom: 64px !important;
    }
}

/* ------------------------------------------
   1B. Queue & Notification Panels — Mobile
   ------------------------------------------ */
@media screen and (max-width: 479px) {
    #sr-queue-panel,
    #sr-notifications-panel {
        width: 100% !important;
        left: 0;
        right: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    #sr-queue-panel,
    #sr-notifications-panel {
        width: 320px !important;
    }
}

/* ------------------------------------------
   1C. Top Nav Bar — Mobile
   ------------------------------------------ */
/* Below sm (480px) — smallest phones */
@media screen and (max-width: 479px) {
    /* Shrink search bar to minimum */
    header[role="banner"] .w-36 {
        width: 90px !important;
    }
    header[role="banner"] form[role="search"] input[type="search"] {
        padding-left: 28px !important;
        padding-right: 6px !important;
        font-size: 11px !important;
    }

    /* Reduce header right-side gap */
    header[role="banner"] > div:last-child {
        gap: 3px !important;
    }

    /* Smaller action buttons in header */
    header[role="banner"] button.w-9 {
        width: 30px !important;
        height: 30px !important;
    }
    header[role="banner"] button.w-9 svg {
        width: 16px;
        height: 16px;
    }

    /* Smaller login/signup buttons */
    header[role="banner"] button[data-sr-auth] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11px !important;
    }

    /* Reduce header height on mobile */
    header[role="banner"] {
        height: 50px !important;
        min-height: 50px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* sm to md (480-767px) — larger phones / small tablets */
@media screen and (min-width: 480px) and (max-width: 767px) {
    /* Truncate logo text if needed */
    header[role="banner"] .flex-shrink-0 {
        max-width: 120px;
        overflow: hidden;
    }
    header[role="banner"] .flex-shrink-0 a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
    }

    /* Shrink search bar */
    header[role="banner"] .w-36 {
        width: 110px !important;
    }

    /* Compact search bar */
    header[role="banner"] form[role="search"] input[type="search"] {
        font-size: 12px !important;
    }

    /* Reduce header right-side gap slightly */
    header[role="banner"] > div:last-child {
        gap: 6px !important;
    }

    /* Slightly smaller action buttons */
    header[role="banner"] button.w-9 {
        width: 34px !important;
        height: 34px !important;
    }

    /* Reduce header height */
    header[role="banner"] {
        height: 54px !important;
        min-height: 54px !important;
    }
}

/* ------------------------------------------
   1D. Profile Stats — Mobile
   ------------------------------------------ */
@media screen and (max-width: 639px) {
    /* Profile cover section stats: wrap and resize */
    .flex.items-center.justify-center.gap-8 {
        flex-wrap: wrap !important;
        gap: 12px 20px !important;
        justify-content: center !important;
    }

    /* Hide divider lines on mobile */
    .flex.items-center.justify-center.gap-8 > .w-px {
        display: none !important;
    }

    /* Reduce stat number size */
    .flex.items-center.justify-center.gap-8 > .text-center > .text-2xl {
        font-size: 1.25rem !important;
    }
}

/* ------------------------------------------
   1E. Song Card Touch Targets — Mobile
   ------------------------------------------ */
@media screen and (max-width: 767px) {
    /* Make song card action buttons always visible (no hover on touch) */
    [data-song-id] .opacity-0.group-hover\:opacity-100,
    .group .opacity-0.group-hover\:opacity-100 {
        opacity: 1 !important;
    }

    /* Increase action button touch targets */
    [data-song-id] button.w-7,
    [data-song-id] button.h-7 {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
    }
}

/* ------------------------------------------
   1F. General Mobile Polish
   ------------------------------------------ */
@media screen and (max-width: 767px) {
    /* Taller form inputs for touch */
    .sr-app input.h-10,
    .sr-app select.h-10,
    input[class*="h-10"],
    select[class*="h-10"] {
        height: 44px !important;
    }

    /* Reduce main content padding on small screens */
    main[role="main"] > div.p-4 {
        padding: 12px !important;
    }
}