/* Full height for body and html */
html, body {
    height: 100%; /* Ensure body takes full viewport height */
    margin: 0;
    padding: 0;
}

/* Body styling */
body {
    font-family: Arial, sans-serif;
    background-color: #121212; /* Dark background color */
    color: #e1e1e1; /* Light text color for contrast */
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

h1 {
    color: #1DB954; /* Spotify green for headers */
}

/* Form styling */
form {
    margin-top: 20px;
}

/* Button styling */
button {
    padding: 10px 20px;
    background-color: #1DB954; /* Spotify green */
    border: none;
    border-radius: 30px; /* Rounded corners */
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition */
}

button:hover {
    background-color: #17a34a; /* Darker green on hover */
}

/* Wrapper for centering */
.search-wrapper {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    margin: 0 auto;
}

/* Search container styling to manage layout */
.search-container {
    position: relative; /* Needed for dropdown positioning */
    width: 200px; /* Fixed width for both search bar and dropdown */
    margin-bottom: 1px; /* Small spacing to avoid visual gap */
}

/* Input field styling */
.search-bar {
    padding: 10px 15px; /* Increased padding for better touch targets */
    width: 100%; /* Full width of the container */
    box-sizing: border-box; /* Include padding and border in element's total width */
    border: none; /* Remove default border */
    border-radius: 25px; /* Rounded corners */
    background-color: #282828; /* Dark background for input */
    color: white; /* White text color */
    font-size: 16px; /* Slightly larger text for readability */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

/* Apply rounded corners only on top when dropdown is visible */
.search-bar:hover.dropdown-open {
    border-radius: 25px 25px 0 0; /* Rounded corners only on top */
    border-bottom: none;
}

/* Input focus state */
.search-bar:focus {
    outline: none; /* Remove default outline */
    border: 2px solid #1DB954; /* Green border for a Spotify-like appearance */
    background-color: #3a3a3a; /* Lighter background on focus */
}

.search-bar:focus.dropdown-open {
    border-radius: 25px 25px 0 0; /* Rounded corners only on top */
    border-bottom: none;
}

/* Input hover state */
.search-bar:hover {
    outline: none; /* Remove default outline */
    border: 2px solid #1DB954; /* Green border for a Spotify-like appearance */
    background-color: #3a3a3a; /* Lighter background on focus */
}

/* Additional styling for better UI */
.artist-dropdown {
    box-sizing: border-box; /* Include padding and border in element's total width */
    border: 2px solid #1DB954; /* Green border for a Spotify-like appearance */
    display: none; /* Initially hidden */
    position: absolute; /* Position relative to the container */
    width: 100%; /* Match the width of the input */
    background-color: #282828; /* Dark background for dropdown */
    max-height: 200px; /* Limit height */
    overflow-y: auto; /* Enable scrolling */
    z-index: 1000; /* Ensure dropdown is on top */
    border-top: none; /* Remove top border to integrate with the search box */
    border-radius: 0 0 25px 25px; /* Rounded corners on the bottom */
    opacity: 0; /* Initial opacity for the closed state */
    height: 0; /* Initial height for the closed state */
    transition: height 0.8s ease, opacity 0.8s ease; /* Smooth transition */
}

/* Show dropdown */
.artist-dropdown.show {
    height: auto;
    max-height: 400px;
    opacity: 1; /* Full opacity for the open state */
    transition: height 0.8s ease, opacity 0.8s ease; /* Smooth transition */
}

/* Dropdown item styling */
.artist-dropdown-item {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align content */
    padding: 10px 15px; /* Consistent padding */
    cursor: pointer;
    color: #e1e1e1; /* Light text color */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.no-click {
   pointer-events: none;
}

/* Dropdown item hover state */
.artist-dropdown-item:hover {
    background-color: #1DB954; /* Green highlight on hover */
}

/* Image styling for artist images */
.artist-dropdown-image {
    width: 40px; /* Fixed width for the image */
    height: 40px; /* Fixed height for the image */
    border-radius: 50%; /* Circular image */
    object-fit: cover; /* Ensure image covers the container */
    margin-right: 10px; /* Space between image and text */
}

.selected-artists {
    padding: 0;
}

.selected-artist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #444; /* Dark border */
}

.selected-artist-info {
   display: flex;
   align-items: center;
   gap: 10px;
}

.selected-artist-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.artist-name {
    color: #1DB954;
    text-decoration: none;
    flex-grow: 1;
}

.artist-name:hover {
    text-decoration: underline;
    font-weight: bold;
}

.no-artists-message {
    margin-top: 20px;
    color: #888;
    text-align: center;
    padding: 20px;
    background-color: #282828;
    border-radius: 5px;
}

.playlist-creation-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 15px;
}

.playlist-name-container {
   display: flex;
   align-items: center;
   gap: 10px;
}

.playlist-name-container label {
   color: #1DB954;
   font-weight: bold;
}

.playlist-name-container input {
   padding: 8px;
   width: 250px;
   background-color: #282828;
   border: 1px solid #1DB954;
   color: white;
   border-radius: 5px;
}

/* Navbar styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #181818; /* Dark navbar background */
    color: #fff;
    padding: 1rem;
}

.navbar-brand a {
    color: #1DB954; /* Spotify green for brand */
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-brand {
    transition: transform 0.2s; /* Smooth scaling on hover */
}

.navbar-brand:hover {
    transform: scale(1.1); /* Scale up slightly on hover */
}

.navbar-links a {
    color: #e1e1e1; /* Light text color */
    text-decoration: none;
    margin-left: 1rem;
}

.navbar-links a:hover {
    text-decoration: underline;
}

/* User avatar and name styling */
.navbar-user {
    position: relative; /* Necessary for absolute positioning of the modal */
    cursor: pointer; /* Change cursor to indicate clickability */
    display: flex; /* Flexbox for aligning items */
    align-items: center; /* Center items vertically */
}

.user-image {
    width: 40px; /* Set width for user image */
    height: 40px; /* Set height for user image */
    border-radius: 50%; /* Makes the image circular */
    border: 2px solid #1DB954; /* Green border for a Spotify-like appearance */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.2s; /* Smooth scaling on hover */
}

.user-image:hover {
    transform: scale(1.1); /* Scale up slightly on hover */
}

.user-name {
    margin-right: 10px; /* Space between image and username */
    color: #fff; /* User name color */
    font-weight: bold; /* Make it bold */
    font-size: 1rem; /* Font size for the name */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for text */
}

/* Main content styling */
#wrapper {
    flex: 1; /* This allows the wrapper to grow and take the available space */
    display: flex;
    flex-direction: column; /* Ensures the content flows vertically */
}

/* Content area */
#content {
    flex: 1; /* Takes remaining space */
    padding: 2rem;
}

/* Footer styling */
footer {
    background-color: #181818; /* Dark footer background */
    color: #e1e1e1; /* Light text color */
    text-align: center;
    padding: 1rem 0;
    flex-shrink: 0; /* Prevents footer from shrinking */
}

footer p {
    margin: 0; /* Remove default margin */
}

/* Modal styling */
.modal  {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the navbar-user */
    z-index: 1000; /* Sit on top */
    right: 0; /* Align to the right of the user section */
    top: calc(100% + 10px); /* Position slightly below the navbar */
    min-width: 300px;
    max-width: 400px;
    background-color: #1e1e1e; /* Dark background for the modal */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect */
}

.modal-content {
    padding: 20px;
}

.modal-content .button {
    margin-top: 20px;
}

.modal-user {
    display: flex;
}

.modal-user .user-image {
    margin-right: 10px;
}

.modal .button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #1DB954; /* Spotify green */
    color: white;
    border: none;
    border-radius: 30px; /* Rounded corners */
    text-decoration: none; /* Remove underline from link */
}

.modal .button:hover {
    background-color: #17a34a; /* Darker green on hover */
}

.modal .user-image {
    width: 60px; /* Set width for user image */
    height: 60px; /* Set height for user image */
    border-radius: 50%; /* Makes the image circular */
    border: 2px solid #1DB954; /* Green border for a Spotify-like appearance */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.remove-artist-button {
    color: white;
    float: right;
    font-size: 22px;
    font-weight: bold;
}

.remove-artist-button:hover,
.remove-artist-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}