/* Color scheme with updated blue accent */
:root {
    --spotify-black: #121212; /* Dark background */
    --spotify-dark-gray: #181818; /* Slightly lighter dark shade */
    --spotify-alt-row: #282828; /* Lighter shade for alternating rows */
    --spotify-blue: #0066a1; /* New accent color replacing spotify-green */
    --spotify-light-gray: #B3B3B3; /* Light text for readability */
    --spotify-white: #FFFFFF; /* Pure white for emphasis */
    --spotify-border: #282828; /* Subtle borders */
    --spotify-light-input: #E0E0E0; /* Lighter background for form inputs */
    --spotify-error: #FF3333; /* Red for error messages */
}

/* Body styling for overall dark theme */
body {
    background-color: var(--spotify-black);
    color: var(--spotify-light-gray);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Login page specific styling */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Login container */
#login-container {
    background-color: var(--spotify-white);
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
}

#login-container h2 {
    color: var(--spotify-black);
    margin-top: 0;
    font-size: 24px;
}

#login-container .error {
    color: var(--spotify-error);
    margin: 10px 0;
    font-size: 14px;
}

#login-container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#login-container label {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: var(--spotify-black);
    font-weight: bold;
}

#login-container input[type="email"],
#login-container input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--spotify-light-input);
    color: var(--spotify-black);
    border: 1px solid var(--spotify-border);
    border-radius: 4px;
    padding: 6px;
    margin-top: 5px;
}

#login-container input[type="submit"] {
    background-color: var(--spotify-blue);
    color: var(--spotify-white);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}

#login-container input[type="submit"]:hover {
    background-color: #0080c5;
}

#login-container .g-recaptcha {
    margin: 10px 0;
    display: inline-block;
}

/* Header panel */
#top-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--spotify-white);
    width: 100%;
    box-sizing: border-box;
}

#top-panel button {
    background-color: var(--spotify-blue);
    color: var(--spotify-white);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#top-panel button:hover {
    background-color: #0080c5;
}

/* Main flex container for left and right panels */
#main-panel {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    min-height: calc(100vh - 70px);
}

/* Left panel */
#left-panel {
    width: 200px;
    flex-shrink: 0;
    padding: 10px;
    background-color: var(--spotify-dark-gray);
    box-sizing: border-box;
}

#left-panel h3 {
    color: var(--spotify-white);
    font-size: 14px;
    text-transform: uppercase;
    margin: 10px 0;
}

#left-panel a {
    color: var(--spotify-light-gray);
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#left-panel a:hover {
    color: var(--spotify-white);
    background-color: var(--spotify-blue);
    border-radius: 4px;
    padding-left: 5px;
}

/* Right panel */
#right-panel {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--spotify-black);
}

/* General table styling */
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    background-color: var(--spotify-dark-gray);
    border: none;
}

th, td {
    border: none;
    padding: 8px;
    color: var(--spotify-light-gray);
    text-align: left;
}

/* Alternating row backgrounds for non-form tables */
tbody tr:nth-child(odd) {
    background-color: var(--spotify-dark-gray);
}

tbody tr:nth-child(even) {
    background-color: var(--spotify-alt-row);
}

th {
    background-color: var(--spotify-dark-gray);
    color: var(--spotify-white);
    font-weight: bold;
}

th select {
    background-color: var(--spotify-black);
    color: var(--spotify-light-gray);
    border: 1px solid var(--spotify-alt-row);
    border-radius: 4px;
    padding: 4px;
}

th select option {
    background-color: var(--spotify-dark-gray);
    color: var(--spotify-light-gray);
}

/* Specific styles for tables inside #editForm */
#editForm table {
    background-color: var(--spotify-white);
    border: none;
    margin: 10px 0;
}

/* Override alternating row backgrounds for #editForm tables */
#editForm tbody tr,
#editForm tbody tr:nth-child(odd),
#editForm tbody tr:nth-child(even) {
    background-color: var(--spotify-white);
}

#editForm td {
    color: var(--spotify-black);
    padding: 3px;
}

#editForm td:first-child {
    font-weight: bold;
    width: 30%;
}

#editForm input,
#editForm textarea,
#editForm select {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--spotify-light-input);
    color: var(--spotify-black);
    border: 1px solid var(--spotify-border);
    border-radius: 4px;
    padding: 6px;
}

#editForm input[type="checkbox"] {
    width: auto;
}

#editForm input[type="file"] {
    padding: 3px;
}

#editForm button {
    background-color: var(--spotify-blue);
    color: var(--spotify-white);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    text-align: center;
}

#editForm button:hover {
    background-color: #0080c5;
}

#editForm .fileButton{
	//color:red;
	text-decoration:none;
	background-color:silver;
	color:black;
	border:1px solid black;
	padding: 5px;
	margin: 3px;
}

#editForm .deleteButton{
	color:red;
	text-decoration:none;
}

.exportOptionsForm{
	padding: 40px;
}