/* --- Base & Variables --- */
:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e; /* Background for cards and filter section */
    --input-bg: #282828; /* Slightly different background for inputs for contrast */
    --text-color: #ffffff;
    --text-muted: #b3b3b3;
    --accent-color: #1DB954;
    --accent-hover: #1ED760;
    --border-color: #383838; /* Slightly lighter border for better visibility */
    --focus-border-color: var(--accent-color); /* Highlight focus with accent color */
    --error-color: #f44336;
    --font-family: 'Poppins', sans-serif;
    --border-radius: 8px;
    --transition-speed: 0.2s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; display: flex; justify-content: center; min-height: 100vh; padding: 20px; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; }

/* --- Typography & Links --- */
h1, h2, h3 { margin-bottom: 0.8em; font-weight: 600; }
h1 { font-size: 2.5rem; text-align: center; margin-bottom: 40px; color: var(--accent-color); letter-spacing: 1px; }
h2 { font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; }
h3 { font-size: 1.2rem; font-weight: 500; color: var(--text-color); }
p { margin-bottom: 1em; color: var(--text-muted); }
#login-section p { color: var(--text-color); }
a { color: var(--accent-color); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--accent-hover); }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--border-radius); background-color: var(--accent-color); color: var(--text-color); font-family: var(--font-family); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, transform 0.1s ease; text-align: center; white-space: nowrap; }
.btn:hover:not(:disabled) { background-color: var(--accent-hover); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn i { margin-right: 8px; }
.btn-spotify { background-color: #1DB954; color: white; }
.btn-spotify:hover:not(:disabled) { background-color: #1ED760; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; }
.btn-small i { margin-right: 5px; }
.btn-secondary { background-color: var(--input-bg); color: var(--text-muted); border-color: var(--border-color); }
.btn-secondary:hover:not(:disabled) { background-color: var(--border-color); color: var(--text-color); border-color: var(--text-muted); }
.action-button-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Layout & Sections --- */
header {
    margin-bottom: 40px;
    text-align: center; /* Center inline/inline-block children like the h1/p */
}

/* Style for the Header Logo */
header img {
    display: block;       /* Allows margin auto to work for centering */
    max-width: 300px;     /* Set a smaller maximum width (adjust as needed) */
    width: 100%;          /* Make it scale down if container is narrower */
    height: auto;         /* Maintain aspect ratio */
    margin: 0 auto 20px auto; /* Center horizontally, add 20px margin below */
}

/* START: Basic Auth Section Styling */
#basic-auth-section {
    text-align: center;
    background-color: var(--card-bg);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    margin: 40px auto;
    border: 1px solid var(--border-color);
}
#basic-auth-section h2 {
    border-bottom: none;
    margin-bottom: 25px; /* Increased margin */
    color: var(--text-color);
}
#basic-auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Increased gap */
}
.auth-input-group {
    text-align: left;
}
.auth-input-group label {
    display: block;
    margin-bottom: 6px; /* Spacing for label */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}
.auth-input-group input[type="text"],
.auth-input-group input[type="password"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color var(--transition-speed) ease;
}
.auth-input-group input:focus {
    outline: none;
    border-color: var(--focus-border-color);
}
#auth-submit-button {
    margin-top: 10px; /* Space above button */
}
#auth-error {
    margin-top: 5px; /* Reduced top margin for error */
    text-align: center;
}
/* END: Basic Auth Section Styling */


#login-section {
    text-align: center;
    background-color: var(--card-bg);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    margin: 40px auto;
    border: 1px solid var(--border-color);
}
#login-section h2 {
    border-bottom: none;
    margin-bottom: 15px;
    color: var(--text-color);
}
#app-section { margin-top: 20px; }
.user-info { text-align: right; margin-bottom: 25px; color: var(--text-muted); font-size: 0.9rem; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }

/* --- Playlist Input Section --- */
.playlist-input-section { margin-bottom: 35px; background-color: var(--card-bg); padding: 25px; border-radius: var(--border-radius); border: 1px solid var(--border-color); }

/* START: Admin Button Styles */
.admin-actions {
    display: flex; /* Arrange buttons horizontally */
    gap: 10px; /* Add space between the buttons */
    margin-bottom: 20px; /* Add space below the button group */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
/* Make sure anchor tags styled as buttons behave well */
.admin-actions .btn {
    text-decoration: none; /* Ensure no underline */
}
/* END: Admin Button Styles */

#playlist-url-input-group #playlist-form { display: flex; gap: 15px; }
#playlist-url { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--input-bg); color: var(--text-color); font-size: 1rem; transition: border-color var(--transition-speed) ease; }
#playlist-url::placeholder { color: var(--text-muted); opacity: 0.7; }
#playlist-url:focus { outline: none; border-color: var(--focus-border-color); }
#playlist-preset-input-group { display: flex; flex-direction: column; gap: 10px; }
#playlist-preset-input-group label { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); margin-bottom: 3px; }
.preset-controls { display: flex; gap: 15px; align-items: center; }
#preset-select { flex-grow: 1; padding: 9px 14px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--input-bg); color: var(--text-color); font-size: 0.95rem; font-family: var(--font-family); cursor: pointer; transition: border-color var(--transition-speed) ease; }
#preset-select:focus { outline: none; border-color: var(--focus-border-color); }
#preset-select:disabled { opacity: 0.5; cursor: not-allowed; }
.playlist-input-section .btn-secondary { margin-top: 10px; align-self: flex-start; }

/* --- Playlist Display Area --- */
#playlist-display { margin-top: 30px; }
#playlist-description, #playlist-owner { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 8px; }
#playlist-owner { margin-bottom: 25px; font-style: italic; }
.playlist-actions-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 35px; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); }
.playlist-actions-container .btn { font-size: 0.9rem; padding: 8px 15px; }

/* --- Filter Controls Styling --- */
.filter-controls { background-color: var(--card-bg); padding: 20px 25px; margin-bottom: 30px; border-radius: var(--border-radius); border: 1px solid var(--border-color); }
.filter-controls h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; color: var(--text-color); border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.filter-group { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 15px 20px; align-items: center; }
.filter-group:last-of-type { margin-bottom: 5px; }
.filter-controls label { margin-right: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.filter-controls input[type="text"], .filter-controls input[type="date"] { padding: 9px 14px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--input-bg); color: var(--text-color); font-size: 0.9rem; font-family: var(--font-family); transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; }
.filter-controls input::placeholder { color: var(--text-muted); opacity: 0.7; }
.filter-controls input:focus { outline: none; border-color: var(--focus-border-color); box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.2); }
.filter-controls input[type="text"] { flex-grow: 1; min-width: 280px; }
.filter-controls input[type="date"] { color-scheme: dark; min-width: 150px; cursor: pointer; }
#clear-filters-btn { margin-left: auto; padding: 6px 12px; font-size: 0.8rem; }
#clear-filters-btn i { margin-right: 5px; }
#filter-error { margin-top: 15px; margin-bottom: 0; flex-basis: 100%; order: 10; /* Uses .error-message base style */ }

/* --- Track Card --- */
#track-list { display: grid; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); }
.track-card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 20px; display: flex; flex-direction: column; gap: 15px; transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease, border-color var(--transition-speed) ease; border: 1px solid var(--border-color); overflow: hidden; }
.track-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transform: translateY(-4px); border-color: var(--text-muted); }
.track-card-row { border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.track-card-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Row 1: Overview */
.track-row-1 { display: flex; gap: 20px; align-items: flex-start; }
.track-thumbnail-section { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.track-thumbnail { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; background-color: var(--input-bg); }
.play-preview-button { background: none; border: none; color: var(--text-muted); font-size: 2rem; cursor: pointer; transition: color var(--transition-speed) ease, transform 0.1s ease; padding: 0; line-height: 1; }
.play-preview-button:hover:not(:disabled) { color: var(--accent-color); transform: scale(1.1); }
.play-preview-button:active:not(:disabled) { transform: scale(1.0); }
.play-preview-button:disabled { color: #444; cursor: not-allowed; }
.play-preview-button.playing { color: var(--accent-color); }
.track-info-add-section { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.track-info { font-size: 0.9rem; margin-bottom: 15px; }
.track-info strong { color: var(--text-color); font-weight: 600; }
.track-title { font-size: 1.15rem; font-weight: 600; color: var(--text-color); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artists, .track-album { color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-album { margin-bottom: 10px; }
.track-meta { font-size: 0.8rem; color: var(--text-muted); opacity: 0.8; }
.track-meta span { margin-right: 12px; display: inline-block; margin-bottom: 4px; }
.track-meta strong { font-weight: 500; color: var(--text-muted); margin-right: 3px; }

/* --- UPDATED Styles for SINGLE Add Section --- */
.track-add-section { /* Wrapper for the single dropdown and two buttons */
    display: flex;
    align-items: center;
    gap: 8px;             /* Space between dropdown and buttons */
    margin-top: auto;     /* Push to bottom */
    padding-top: 12px;    /* Space above */
    border-top: 1px solid var(--border-color); /* Separator */
}

.track-add-section .playlist-select {
    flex-grow: 1; /* Dropdown takes available space */
    min-width: 120px; /* Prevent extreme shrinking */
     /* Inherit base styles or redefine */
    padding: 6px 10px;
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-speed) ease;
}
.track-add-section .playlist-select:focus { outline: none; border-color: var(--focus-border-color); }
.track-add-section .playlist-select:disabled { opacity: 0.5; cursor: not-allowed; }

.track-add-section .add-track-button,
.track-add-section .add-album-button {
    /* Inherit .btn .btn-small .btn-secondary */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}
.track-add-section .btn i { margin-right: 4px; } /* Adjust icon margin */
/* --- END UPDATED Add Section Styles --- */


/* Row 2 & 3: Action Rows */
.track-row-2, .track-row-3 { display: flex; flex-direction: column; gap: 8px; }
.action-row-title { font-weight: 600; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }

/* --- Utility --- */
.hidden { display: none !important; }
.error-message { /* Base style for all error messages */
    color: var(--error-color);
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.5);
    padding: 12px 15px;
    border-radius: var(--border-radius);
    margin-top: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
}
/* Remove specific margin-bottom from filter error as it's handled by container */
#filter-error { margin-bottom: 0; }

.feedback-message { padding: 10px 20px; border-radius: var(--border-radius); margin-top: 15px; font-size: 0.9rem; border: 1px solid; background-color: rgba(0,0,0, 0.1); }
.feedback-message.success-message { color: var(--accent-color); background-color: rgba(29, 185, 84, 0.1); border-color: rgba(29, 185, 84, 0.5); }
.feedback-message.error-message { color: var(--error-color); background-color: rgba(244, 67, 54, 0.1); border-color: rgba(244, 67, 54, 0.5); }
.toast-feedback { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 12px 25px; border-radius: var(--border-radius); z-index: 1001; color: white; font-size: 0.95rem; opacity: 0; transition: opacity 0.4s ease-in-out, bottom 0.4s ease-in-out; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.4); pointer-events: none; }
.toast-feedback.show { opacity: 1; bottom: 40px; }
.toast-feedback.success { background-color: var(--accent-color); }
.toast-feedback.error { background-color: var(--error-color); }
.text-muted { color: var(--text-muted); }

/* --- Loading Indicator --- */
#loading-indicator { text-align: center; margin: 50px 0; color: var(--text-muted); }
.spinner { border: 5px solid var(--border-color); border-top: 5px solid var(--accent-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Footer --- */
footer { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.9rem; opacity: 0.7; }
footer .fa-heart { color: var(--accent-color); margin: 0 3px; }

/* --- Responsiveness --- */
@media (max-width: 992px) { #track-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }
@media (max-width: 768px) {
    body { padding: 15px; } .container { padding: 15px; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; margin-bottom: 20px; }
    #playlist-url-input-group #playlist-form { flex-direction: column; gap: 15px; } .preset-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    #track-list { grid-template-columns: 1fr; gap: 20px; }
    .filter-group { gap: 15px; } .filter-group-dates { flex-direction: column; align-items: stretch; gap: 12px; } .filter-controls input[type="text"], .filter-controls input[type="date"] { width: 100%; min-width: 0; } .filter-controls label { margin-bottom: 3px; display: block; margin-right: 0; } #clear-filters-btn { margin-left: 0; margin-top: 10px; align-self: flex-start; } #filter-error { margin-top: 10px; }
    .track-card { padding: 15px; } .track-row-1 { flex-direction: column; align-items: stretch; gap: 15px; } .track-thumbnail-section { margin-bottom: 10px; justify-content: flex-start; }
    /* Adjust add section on medium screens */
    .track-add-section { flex-wrap: wrap; /* Allow buttons to wrap below dropdown */ }
    .track-add-section .playlist-select { flex-basis: 100%; margin-bottom: 8px; } /* Dropdown full width */
    .track-add-section .btn { flex-grow: 1; } /* Buttons share remaining space */
    .action-button-group { gap: 6px; } .btn-small { padding: 5px 10px; font-size: 0.75rem; }
}

/* Remove specific breakpoint for add actions stacking, handled by flex-wrap now */
/* @media (max-width: 550px) { ... } */

@media (max-width: 480px) {
    body { padding: 10px; } .container { padding: 10px; } h1 { font-size: 1.7rem; margin-bottom: 30px; } h2 { font-size: 1.4rem; }
    .btn { padding: 9px 16px; font-size: 0.9rem; } .btn-small { padding: 5px 8px; font-size: 0.7rem;} .btn i { margin-right: 6px; } .btn-small i { margin-right: 4px;}

    #basic-auth-section, #login-section { padding: 30px 20px; } /* Adjust padding for auth/login */
    .auth-input-group input { font-size: 0.95rem; }

    .playlist-input-section { padding: 20px; } #playlist-url, #preset-select { font-size: 0.9rem; }
    .playlist-actions-container { gap: 8px; padding-bottom: 20px; margin-bottom: 30px;}
    .filter-controls { padding: 15px 20px; margin-bottom: 25px; } .filter-controls h3 { font-size: 1rem; margin-bottom: 15px; padding-bottom: 10px;} .filter-group { gap: 12px; margin-bottom: 15px; } .filter-controls input { padding: 8px 12px; font-size: 0.85rem;}
    #track-list { gap: 15px; } .track-card { padding: 12px; gap: 12px; } .track-card-row { padding-bottom: 12px; }
    .track-row-1 { gap: 12px; } .track-thumbnail { width: 60px; height: 60px; } .play-preview-button { font-size: 1.8rem; }
    .track-title { font-size: 1rem; } .track-info, .track-meta { font-size: 0.8rem; } .action-row-title { font-size: 0.75rem; }
    /* Adjust add section again for very small screens */
    .track-add-section { gap: 6px; } /* Reduce gap */
    .track-add-section .btn { padding: 5px 8px; font-size: 0.7rem; } /* Match other small buttons */
    .feedback-message, .error-message { padding: 10px 12px; font-size: 0.85rem;} .toast-feedback { padding: 10px 20px; font-size: 0.9rem; }
}

/* --- Optional: Style for Delete Button --- */
.btn-danger-outline {
    border-color: var(--error-color);
    color: var(--error-color);
    background-color: transparent;
}

.btn-danger-outline:hover:not(:disabled) {
    background-color: rgba(244, 67, 54, 0.1); /* Light red background on hover */
    color: var(--error-color);
    border-color: var(--error-color);
}