/* ============================================================================
   GLOBAL BASE STYLES
   ============================================================================ */

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    font-family: 'Trebuchet Sans', system-ui, -apple-system, sans-serif;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #000000;
    box-sizing: border-box;
    overflow-x: hidden;
}


.hidden {
    display: none !important;
}

/* ============================================================================
   VIEW WRAPPERS
   ============================================================================ */

/* View Wrapper Base Styles - Consolidated */
.login-view,
.music-view,
.profile-view {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    width: 95vw;
    max-width: 900px;
    height: 90vh;
    min-height: 750px;
    max-height: 1200px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    /* Scene background applied to entire page-view */
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Container styling applied to page-view */
    border-radius: 25px;
    box-shadow: 1px 2px 4px rgba(45, 45, 45, 0.25);
}

.login-view.fade-out,
.music-view.fade-out,
.profile-view.fade-out {
    opacity: 0 !important;
    transform: translateY(-20px) scale(0.95) !important;
    pointer-events: none;
}

.login-view.fade-in,
.music-view.fade-in,
.profile-view.fade-in {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto;
}

/* ============================================================================
   CONTAINER (Main Page Container)
   ============================================================================ */

/* Base container styling - simplified since page-view now has the main styling */
.container,
.music-view .container[data-page="music"],
.login-view .container,
.login-view #loginContainer.container,
.profile-view .container[data-page="profile"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Transparent background so page-view scene shows through */
    background-color: transparent;
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 1;
    /* Uniform padding for all views - dropdown toggles are first child */
    padding: 20px;
}

/* Container States */
.container.scene-loading {
    opacity: 0.3;
}

.container.scene-loaded {
    opacity: 1;
}

/* Background Image Container */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.6s ease-in-out;
    background-image: var(--next-bg-image, none);
}

.container.background-transitioning::before {
    opacity: 1;
}

.container > * {
    position: relative;
    z-index: 1;
}

/* Uniform Viewports */
@media screen and (max-width: 900px) {
    .login-view,
    .music-view,
    .profile-view {
        margin: 10px 0px;
    }
    
    .container,
    .music-view .container[data-page="music"],
    .login-view .container,
    .login-view #loginContainer.container,
    .profile-view .container[data-page="profile"] {
        padding: 20px;
    }
}

@media screen and (max-width: 825px) {
    .music-view .container > .header {
        width: 85%;
    }
}

@media screen and (min-width: 525px) {
    .login-view,
    .music-view,
    .profile-view {
        min-width: 475px;
    }
}

/* PWA/Standalone Mode - Consolidated for all container variants */
@media all and (display-mode: standalone) {
    .login-view,
    .music-view,
    .profile-view {
        width: 100vw;
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
}

/* Alternative Detection for iOS Standalone */
@supports (-webkit-touch-callout: none) {
    @media all and (display-mode: standalone) {
        .login-view,
        .music-view,
        .profile-view {
            width: 100vw;
            border-radius: 0;
            height: 100vh;
            min-height: 100vh;
            max-height: 100vh;
        }
    }
}

/* ============================================================================
   SEARCH CONTAINER
   ============================================================================ */

div.app-search-container {
  width: 50%;
  max-width: 500px;
  margin: 0px auto 15px auto;
  position: relative;
  justify-content: center;
  align-items: center;
}

.app-search-input {
  width: 100%;
  padding: 10px 0px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
  color: #ddd;
  font-size: 1em;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.3s, background-color 0.3s;
}

.app-search-input::placeholder {
  color: #bbb;
  font-size: 0.9em;
}

.app-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}

.app-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Neumorphic Buttons */
button.neumorphic {
  container-type: inline-size;
  border: 0.25rem solid transparent;
  border-radius: 1rem;
  color: #ddd;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  width: 40%;
  height: 35px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center;
  margin: auto;
  gap: 1rem;
  --shadow: 
    -.5rem -.5rem 1rem hsl(0 0% 85% / .5),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  outline: none;  
  transition: all 0.1s;
}

button.neumorphic:hover,
button.neumorphic:focus-visible {
  color: #c7995c;
  scale: 1.1;
}

button.neumorphic:active,
button.neumorphic.active {
  box-shadow:
    var(--shadow),
    inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
    inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
  color: #c7995c;
}

button.neumorphic > i {
  font-size: 31cqi;
}

button.neumorphic > span {
  font-family: system-ui, sans-serif;
  font-size: 16cqi;
}

button.neumorphic.active > i {
  font-size: 28cqi;
}

button.neumorphic.active > span {
  font-size: 13cqi;
}