/* --- Root Variables & Base --- */
:root {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --text-primary: #E2E8F0;
    --text-secondary: #94A3B8;
    --border-color: #334155;

    /* Accent colors will be overridden by tenant-specific styles in the layout */
    --accent-primary: #38BDF8; /* Default if tenant color not set */
    --accent-secondary: #2563EB; /* Default darker shade */
    --accent-primary-rgb: 56, 189, 248; /* Default RGB for accent */

    --success-color: #22C55E;
    --warning-color: #F59E0B;
    --danger-color: #EF4444;

    --success-color-rgb: 34, 197, 94;
    --warning-color-rgb: 245, 158, 11;
    --danger-color-rgb: 239, 68, 68; /* Added for consistency */
    --text-secondary-rgb: 148, 163, 184; /* For status badges */

    /* Tenant-specific overrides (defined in layout.php <style>) */
    /* --tenant-defined-primary-color: #someValue; */
    /* --tenant-defined-primary-color-rgb: R, G, B; */
    /* --tenant-defined-primary-darker: #someValue; */
    /* --tenant-button-text-color-on-primary: #someValue; */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lexend', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- Sidebar --- */
aside.sidebar {
    width: 260px; /* Slightly wider */
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary)); /* New gradient background */
    padding: 20px;
    position: fixed;
    height: 100%;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%); /* Hidden by default on mobile */
    display: flex; /* Added for flex column layout */
    flex-direction: column; /* Added for flex column layout */
}
#sidebar-toggle:checked ~ .sidebar {
    transform: translateX(0);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999; 
}

#sidebar-toggle:checked ~ .sidebar-overlay {
    display: block;
}

.sidebar-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center; /* Center logo/name */
}

.sidebar-header .tenant-logo {
    max-height: 50px; /* Slightly larger logo */
    margin-bottom: 10px;
}

.sidebar-header .tenant-name-sidebar {
    color: var(--accent-primary); /* Use accent color for tenant name */
    font-size: 1.4em;
    font-weight: 700;
}

aside.sidebar ul {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Allows user profile to be pushed to bottom */
}

aside.sidebar ul li a {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 15px 10px; /* Increased padding */
    margin-bottom: 8px;
    border-radius: 8px; /* More rounded corners */
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    font-weight: 500;
}
aside.sidebar ul li a:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.15); /* Slightly stronger hover */
    color: var(--accent-primary);
    padding-left: 15px; /* Indent on hover */
}
aside.sidebar ul li a.active {
    background-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3); /* Shadow for active link */
}
aside.sidebar ul li a .fa-fw {
    margin-right: 15px; /* More space for icon */
    width: 20px;
}

aside.sidebar ul li a.disabled {
    color: var(--text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* User Profile section in new sidebar */
aside.sidebar .user-profile {
    display: flex;
    align-items: center;
    padding: 15px 0; /* Adjust padding */
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Pushes to the bottom due to flex-grow on ul */
}
aside.sidebar .user-profile img {
    width: 40px; /* Larger avatar */
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid var(--accent-primary);
}
aside.sidebar .user-profile .user-info span { display: block; font-size: 0.875em; }
aside.sidebar .user-profile .user-info .username { font-weight: 500; color: var(--text-primary); }
aside.sidebar .user-profile .user-info .user-role,
aside.sidebar .user-profile .user-info a { /* For logout link */
    font-size: 0.75em; color: var(--text-secondary);
    text-decoration: none;
}
aside.sidebar .user-profile .user-info a:hover {
    color: var(--accent-primary);
}

/* Tenant Name in Main Header */
.tenant-name-header {
    font-family: 'Georgia', serif; /* Example: different font */
    font-size: 2.2em; /* Larger size */
    color: var(--accent-primary); /* Use accent color */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow */
    /* Override any existing h1 styles if needed */
    margin: 0; /* Reset margin if it was in the original h1 */
}


/* --- Main Content Area --- */
.main-content {
    flex-grow: 1;
    padding: 24px;
    transition: margin-left 0.3s ease-in-out;
    padding-top: 90px; /* New: To account for fixed header */
    margin-left: 0; /* Mobile first */
    overflow-x: hidden; /* Prevent horizontal scroll on all pages */
}

header.main-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0; /* Spans full width on mobile */
    z-index: 999;
    background-color: var(--bg-primary);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: left 0.3s ease-in-out;
}
header.main-header h1 {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.mobile-menu-toggle {
    display: block; /* Hidden on desktop via media query */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
}
.mobile-menu-toggle:hover {
    color: var(--accent-primary);
}
.header-actions {
    width: 100%; /* Make actions full width on mobile */
}
.mobile-menu-toggle:hover {
    color: var(--accent-primary);
}

/* --- Dashboard Grid Layout (Prototype) --- */
.dashboard-layout {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr; /* Mobile first */
}

@media (min-width: 992px) { /* Desktop */
    .dashboard-layout {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "welcome welcome welcome" /* Added for welcome message */
            "earnings streams quickactions"
            "releases releases releases"
            "notifications analytics filler"; /* Example for other cards */
    }
    .card-welcome { grid-area: welcome; }
    .card-earnings { grid-area: earnings; }
    .card-streams { grid-area: streams; }
    .card-notifications { grid-area: notifications; }
    .card-releases { grid-area: releases; }
    .card-analytics { grid-area: analytics; }
    .card-quickactions { grid-area: quickactions; }
}
@media (min-width: 768px) and (max-width: 991px) { /* Tablet */
    .dashboard-layout {
        grid-template-columns: repeat(2, 1fr);
         grid-template-areas:
            "welcome welcome"
            "earnings streams"
            "quickactions quickactions"
            "releases releases"
            "notifications analytics";
    }
}


/* --- Cards --- */
.card {
    background-color: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInCard 0.4s ease-out forwards;
}
@keyframes fadeInCard { to { opacity: 1; transform: translateY(0); } }
/* Stagger card animations */
.dashboard-layout > .card:nth-child(1) { animation-delay: 0.05s; }
.dashboard-layout > .card:nth-child(2) { animation-delay: 0.1s; }
/* ... add more if you have more than 6 direct children cards in dashboard-layout */

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.card-header h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0; /* Remove default h3 margin */
}
.card-header .fa-solid { font-size: 1em; color: var(--text-secondary); }
.card-header .btn-link { font-size: 0.85em; font-weight: 500; padding: 4px 0; }

/* Specific card content styles */
.stat-prominent .stat-value {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.stat-prominent .stat-label {
    font-size: 0.875em;
    color: var(--text-secondary);
}

/* --- Minimal Auth Layout Styles --- */
.auth-container {
    width: 100%;
    max-width: 420px; /* Typical width for auth forms */
    padding: 2rem;   /* More padding */
    background-color: var(--bg-secondary); /* From existing dark theme */
    border-radius: 0.5rem; /* Using a common value, can be var(--border-radius-lg) if defined */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175); /* Using a common shadow, can be var(--box-shadow-lg) if defined */
    margin-top: 20px; /* Ensure some space from top if content is short */
    margin-bottom: 20px; /* Ensure some space from bottom if content is short */
}

.auth-container .card-header h3, /* If auth forms use cards */
.auth-container h2 { /* Or standalone headings */
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* Ensure form elements inside .auth-container also pick up dark theme correctly */
/* These are general rules, assuming .form-group, .form-control are used in auth views */
.auth-container .form-group label {
    color: var(--text-secondary);
}
.auth-container .form-control { /* Assuming inputs in auth views will have .form-control */
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.auth-container .form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
}
.auth-container .btn-primary {
    /* Ensure it uses the tenant-aware or default primary button styling */
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary)); /* Match layout button color */
}
.auth-container .btn-primary:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}
.auth-container .form-hint a,
.auth-container p a { /* For links like "Forgot password?", "Register here" */
    color: var(--accent-primary);
    text-decoration: underline;
}
.auth-container p a:hover {
    color: var(--accent-secondary);
}
.stat-prominent .stat-change {
    font-size: 0.8em;
    margin-left: 8px;
}
.stat-change.positive { color: var(--success-color); }
.stat-change.negative { color: var(--danger-color); }

.list-item {
    display: flex; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background-color: rgba(var(--accent-primary-rgb), 0.05); }

.list-item-icon {
    width: 32px; height: 32px; border-radius: 6px; margin-right: 12px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}
.list-item-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px;}
.list-item-content h4 {
    font-size: 0.95em; font-weight: 500; margin-bottom: 2px; color: var(--text-primary);
}
.list-item-content p { font-size: 0.8em; color: var(--text-secondary); margin: 0; }
.list-item-meta { margin-left: auto; text-align: right; font-size: 0.8em; color: var(--text-secondary); }
.list-item-meta .btn-sm { margin-left: 10px; }


/* Quick Actions (Dashboard) */
.quick-action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    background-color: var(--bg-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    text-decoration: none;
}
.quick-action-button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--accent-primary-rgb), 0.1);
}
.quick-action-button .fa-solid {
    font-size: 1.5em;
    margin-bottom: 8px;
}
.quick-action-button span {
    font-size: 0.875em;
    font-weight: 500;
}
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 8px;
}


/* --- Buttons --- */
.btn {
    padding: 8px 16px; border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; font-weight: 500; font-size: 0.9em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; /* Prevent wrapping on small buttons */
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}
.btn:disabled:hover, .btn.disabled:hover { /* Prevent hover effects on disabled */
    background-color: var(--accent-primary); /* Keep original color */
    border-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
    transform: none;
}


.btn-primary {
    background-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary)); /* Uses tenant logic */
    border-color: var(--accent-primary);
}
.btn-primary:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    background-color: rgba(var(--text-secondary-rgb), 0.1);
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--text-primary); /* White text on danger red */
    border-color: var(--danger-color);
}
.btn-danger:hover {
    background-color: darken(var(--danger-color), 10%); /* Needs a SASS-like darken or manual darker shade */
    border-color: darken(var(--danger-color), 10%);
}


.btn-link {
    background: none; border: none; color: var(--accent-primary); padding: 4px;
    font-size: 0.9em; font-weight: 500;
}
.btn-link:hover { color: var(--accent-secondary); text-decoration: underline; }

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8em;
}


/* --- Modals (Prototype's general modal) --- */
.modal {
    display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(15, 23, 42, 0.8);
    align-items: center; justify-content: center; padding: 16px;
}
.modal.active { display: flex; animation: fadeInModalBg 0.3s ease; }
@keyframes fadeInModalBg { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: var(--bg-secondary); margin: auto; padding: 24px; border-radius: 8px;
    width: 100%; max-width: 550px; position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: slideInModal 0.3s ease-out;
}
@keyframes slideInModal { from { transform: translateY(-30px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color);
}
.modal-header h2 { font-size: 1.25em; color: var(--text-primary); font-weight: 600; margin:0; }
.modal .close-btn { color: var(--text-secondary); font-size: 1.5em; cursor: pointer; transition: color 0.2s; background: none; border: none; }
.modal .close-btn:hover { color: var(--text-primary); }

.modal-footer {
    padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end; gap: 12px;
}


/* --- Forms --- */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; margin-bottom: 6px; font-weight: 500;
    font-size: 0.875em; color: var(--text-secondary);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group textarea,
.form-group select, /* Basic select styling */
.form-group .select2-container--bootstrap-5 .select2-selection { /* Select2 specific */
    width: 100%; padding: 10px 12px; background-color: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-primary); font-size: 0.9em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Special styling for flatpickr input to look like others */
input.flatpickr-input { /* This class is added by flatpickr to the original input */
    width: 100%; padding: 10px 12px; background-color: var(--bg-primary) !important; /* important for flatpickr */
    border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-primary); font-size: 0.9em;
    line-height: 1.5; /* Ensure consistent height */
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-group input.flatpickr-input:focus, /* Focus for flatpickr */
.form-group .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2); /* Adjusted shadow */
    outline: none;
}
.form-group input[readonly], .form-group input[disabled] {
    background-color: var(--bg-secondary) !important; /* Make readonly/disabled distinct */
    opacity: 0.7;
    cursor: not-allowed;
}
.form-group textarea { min-height: 80px; resize: vertical; }
.form-group input[type="file"] { padding: 8px 12px; } /* Slightly less padding for file input */

.form-error-message {
    display: block;
    color: var(--danger-color);
    font-size: 0.8em;
    margin-top: 4px;
}
.required-asterisk {
    color: var(--danger-color);
    margin-left: 2px;
}
.form-hint, small { /* General hint styling */
    font-size:0.8em; color:var(--text-secondary); display:block; margin-top:4px;
}

/* Checkbox specific for review page */
.form-group input[type="checkbox"] {
    width: auto; /* Override full width */
    margin-right: 8px;
    appearance: none; /* Remove default browser checkbox */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: relative;
    top: 2px; /* Align better with text */
}
.form-group input[type="checkbox"]:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.form-group input[type="checkbox"]:checked::after {
    content: '\2713'; /* Checkmark */
    font-size: 12px;
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.form-group label input[type="checkbox"] + span { /* If label wraps checkbox and text */
    vertical-align: middle;
}


/* --- Select2 Dark Theme Customization --- */
.select2-container--bootstrap-5.select2-container--dark .select2-dropdown {
    background-color: var(--bg-secondary); border-color: var(--border-color);
}
.select2-container--bootstrap-5.select2-container--dark .select2-results__option {
    color: var(--text-primary); padding: 8px 12px; font-size: 0.9em;
}
.select2-container--bootstrap-5.select2-container--dark .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-primary) !important;
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary)) !important;
}
.select2-container--bootstrap-5.select2-container--dark .select2-search__field {
    background-color: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary);
    padding: 8px 10px;
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 0.9em; padding: 4px 8px;
    min-height: calc(1.5em + .75rem + 8px); /* Match input height */
    line-height: 1.5; /* Adjust line height */
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--single {
    height: calc(1.5em + .75rem + 10px); /* Match Bootstrap 5 input height */
    padding: .375rem .75rem;
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    padding-left: 0; /* Reset padding if Bootstrap theme adds it */
    line-height: 1.9; /* Vertically center text */
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--single .select2-selection__placeholder {
    color: var(--text-secondary); /* Placeholder text color */
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent;
}
.select2-container--bootstrap-5.select2-container--dark.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-secondary) transparent; /* Arrow down when open */
}

.select2-container--bootstrap-5.select2-container--dark .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 10px); /* Match Bootstrap 5 input height */
    padding: .375rem .25rem .0rem .75rem; /* Adjust padding for multiple */
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
    border: none; font-size: 0.8em; padding: 3px 6px; margin-right: 5px; margin-bottom: .375rem;
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
    opacity: 0.7;
}
.select2-container--bootstrap-5.select2-container--dark .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
}


/* --- Flash Messages (Global) --- */
.flash-message-container {
    margin-bottom: 20px; /* Space below all messages */
    /* Position fixed example (optional)
    position: fixed; top: 80px; right: 24px; z-index: 1060; width: 350px; */
}
.flash-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9em;
    border: 1px solid transparent;
    display: flex; /* For icon alignment */
    align-items: center;
}
.flash-message i.fa-solid { /* Icon for flash messages */
    margin-right: 10px;
    font-size: 1.2em;
}
.flash-message.success {
    background-color: rgba(var(--success-color-rgb), 0.15);
    color: var(--success-color);
    border-color: var(--success-color);
}
.flash-message.error {
    background-color: rgba(var(--danger-color-rgb), 0.15);
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.flash-message.warning {
    background-color: rgba(var(--warning-color-rgb), 0.15);
    color: var(--warning-color);
    border-color: var(--warning-color);
}

/* --- Release Creation Steps Indicator --- */
.release-creation-steps {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
    padding: 10px 0;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.85em;
    padding: 5px 10px;
    cursor: default;
    flex: 1;
    text-align: center;
    position: relative;
}
.step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(15px + 1px); /* Half of circle height + half of line height */
    left: calc(50% + 15px + 5px); /* Center of circle + small gap */
    width: calc(100% - 30px - 10px); /* Span towards next, minus circle and gaps */
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}
.step-indicator span { /* The number circle */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    margin-bottom: 6px;
    font-weight: 500;
    background-color: var(--bg-secondary); /* Match parent */
    z-index: 2;
    position: relative;
}
.step-indicator.active { color: var(--accent-primary); }
.step-indicator.active span {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
}
.step-indicator.completed span {
    border-color: var(--success-color); /* Or use accent-primary for completed too */
    background-color: var(--success-color); /* Or use accent-primary */
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
}
.step-indicator.clickable { cursor: pointer; }
.step-indicator.clickable:hover { color: var(--text-primary); }
.step-indicator.clickable.completed:hover span { border-color: var(--accent-secondary); } /* Example hover */
.step-indicator.clickable.active:hover span { border-color: var(--accent-secondary); }

/* --- File Uploader (Step 1) --- */
.upload-section { margin-bottom: 24px; }
.upload-section .section-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.file-upload-progress, .file-upload-list .file-upload-progress {
    margin-top: 10px;
    padding: 10px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85em;
}
.file-upload-progress .file-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.file-upload-progress .file-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-progress .status-icon { font-size: 1.1em; margin-left: 10px; }
.file-upload-progress .status-icon.success { color: var(--success-color); }
.file-upload-progress .status-icon.error { color: var(--danger-color); }
.file-upload-progress .status-icon.pending { color: var(--accent-primary); }
.progress-bar-wrapper { height: 8px; background-color: var(--border-color); border-radius: 4px; overflow: hidden; margin-bottom: 4px;}
.progress-bar { height: 100%; width: 0%; background-color: var(--accent-primary); transition: width 0.3s ease; }
.progress-text { color: var(--text-secondary); font-size: 0.9em; }
.error-message-slot { color: var(--danger-color); font-size: 0.9em; margin-top: 4px; }
.step-navigation { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.modal-footer.step-navigation { /* For consistency if using modal-footer class */
    border-top: 1px solid var(--border-color);
    margin-top: 20px; padding-top:20px; padding-left:0; padding-right:0; padding-bottom: 0;
}

/* --- Track Fields Form (Step 3 - _track_fields.php) --- */
.track-form-card .card-header .collapse-icon { transition: transform 0.2s ease-in-out; }
.track-form-card .card-header[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
.track-parties-container .track-party-entry:last-child { border-bottom: none; margin-bottom: 0; }

/* --- Review Page (Step 4) --- */
.review-submission-container .review-section { margin-bottom: 24px; }
.review-submission-container .review-section-title {
    font-size: 1.1em; font-weight: 600; color: var(--text-primary);
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.definition-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 0.9em; }
.definition-list dt { font-weight: 500; color: var(--text-secondary); text-align: right; }
.definition-list dd { margin-left: 0; color: var(--text-primary); word-break: break-word; }
.review-submission-container .file-list { list-style: none; padding-left: 0; font-size: 0.9em; }
.review-submission-container .file-list li { padding: 4px 0; border-bottom: 1px dashed var(--border-color); }
.review-submission-container .file-list li:last-child { border-bottom: none; }
.text-warning { color: var(--warning-color); }
.track-review-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.track-review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.track-review-title { font-size: 1em; font-weight: 500; color: var(--accent-primary); margin-bottom: 8px; }


/* --- Release List Table & View Details --- */
.release-list-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.release-list-table th, .release-list-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9em;
    vertical-align: middle;
}
.release-list-table th {
    color: var(--text-secondary);
    font-weight: 500;
    background-color: var(--bg-primary);
}
.release-list-table tbody tr:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.05);
}
.no-records-container { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.no-records-container .no-records { font-size: 1.1em; margin-bottom: 10px; color: var(--text-primary); }

/* Status Badges */
.status-badge {
    padding: 4px 10px; border-radius: 12px; /* Pill shape */
    font-size: 0.75em; font-weight: 500;
    display: inline-block; text-transform: capitalize;
    line-height: 1.2;
}
.status-badge.status-live, .status-badge.status-approved { background-color: rgba(var(--success-color-rgb), 0.15); color: var(--success-color); }
.status-badge.status-pending, .status-badge.status-submitted, .status-badge.status-in_review { background-color: rgba(var(--warning-color-rgb), 0.15); color: var(--warning-color); }
.status-badge.status-draft { background-color: rgba(var(--text-secondary-rgb), 0.15); color: var(--text-secondary); }
.status-badge.status-rejected, .status-badge.status-action_required, .status-badge.status-takedown { background-color: rgba(var(--danger-color-rgb), 0.15); color: var(--danger-color); }

/* Release View Specifics */
.release-view-container .card { margin-bottom: 24px; }
.release-main-info { display: flex; flex-wrap: wrap; gap: 24px; }
.release-artwork-column { flex: 0 0 250px; max-width: 250px; }
.release-artwork-large { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border-color); }
.release-details-column { flex: 1; min-width: 300px; }
.release-title-main { font-size: 1.8em; margin-bottom: 8px; color: var(--text-primary); }
.release-formal-title, .release-subtitle { font-size: 0.9em; color: var(--text-secondary); margin-bottom: 12px; }
.release-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; font-size: 0.9em; }
.release-meta-grid .meta-item .meta-label { font-weight: 500; color: var(--text-secondary); margin-right: 6px; }
.contributor-list { list-style: none; padding-left: 0; font-size: 0.9em; }
.contributor-list li { padding: 6px 0; border-bottom: 1px solid var(--border-color); }
.contributor-list li:last-child { border-bottom: none; }
.contributor-list.small li { font-size: 0.9em; padding: 4px 0;}
.tracks-section .track-item { padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.tracks-section .track-item:last-child { border-bottom: none; padding-bottom: 0; }
.track-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.track-number { font-weight: 600; color: var(--accent-primary); font-size: 1.1em; }
.track-title { font-size: 1.1em; font-weight: 500; color: var(--text-primary); margin: 0; }
.track-duration { font-size: 0.85em; color: var(--text-secondary); margin-left: auto; }
.track-audio-player audio { width: 100%; margin: 10px 0; filter: invert(1) hue-rotate(180deg) contrast(0.8); } /* Basic dark theme for audio player */
.track-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; font-size: 0.85em; margin-top: 10px; }
.track-contributors { margin-top: 12px; }
.contributors-title { font-size: 0.9em; font-weight: 500; margin-bottom: 4px; color: var(--text-secondary); }
.history-list { list-style-type: none; padding-left: 0; }
.history-item { padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.85em; }
.history-item:last-child { border-bottom: none; }
.history-timestamp { color: var(--text-secondary); }
.history-notes { margin-top: 4px; padding-left: 10px; font-size: 0.95em; color: var(--text-primary); background-color: var(--bg-primary); padding: 8px; border-radius: 4px; }


/* --- Mobile Optimizations & Media Queries --- */

/* Default is mobile-first, so these media queries are min-width */

@media (min-width: 992px) {
    aside.sidebar {
        transform: translateX(0); /* Sidebar is visible */
    }
    #sidebar-toggle:checked ~ .sidebar {
        transform: translateX(0); /* Ensure it stays visible if checked */
    }
    .main-content {
        margin-left: 260px; /* Make space for the visible sidebar */
    }
    header.main-header {
        left: 260px; /* Position header next to the sidebar */
    }
    .mobile-menu-toggle {
        display: none; /* Hide the mobile toggle on desktop */
    }
}

@media (max-width: 991px) {
    /* On mobile/tablet, the sidebar is hidden by default */
    aside.sidebar {
        transform: translateX(-100%);
    }
    /* When the checkbox is checked, the sidebar slides in */
    #sidebar-toggle:checked ~ .sidebar {
        transform: translateX(0);
        box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    }
    /* The main content and header remain at left: 0 */
    .main-content, header.main-header {
        margin-left: 0;
        left: 0;
    }
    .mobile-menu-toggle {
        display: block; /* Ensure it's visible */
    }

    /* Additional mobile-specific refinements from previous setup */
    .main-content { padding: 16px; padding-top: 80px; }
    header.main-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
     header.main-header .header-actions {
        margin-left:auto; /* Pushes button to the right */
    }
    .stat-prominent .stat-value { font-size: 1.75em; }
    .card { padding: 16px; }
    .modal-content { padding: 20px; }
    .modal-header h2 { font-size: 1.1em; }
}


/* --- Release Creation Steps Indicator (Mobile First) --- */
.release-creation-steps {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center the items */
    margin-bottom: 24px;
    padding: 10px 0;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.release-creation-steps::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari, Opera */
    display: none;
}
.step-indicator {
    display: flex; /* Changed to inline-flex for horizontal layout */
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.8em; /* Slightly smaller for mobile */
    padding: 5px 15px; /* More horizontal padding for spacing */
    cursor: default;
    text-align: center;
    position: relative;
    width: 25%; /* Give each item a width */
    min-width: 100px; /* Minimum width for each step */
}
/* Connector lines adapted for horizontal scroll */
.step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px; 
    left: calc(100% - 10px); /* Position to the right of the circle */
    width: 30px; /* Short line between items, adjust as needed */
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}
.step-indicator span { /* The number circle */
    width: 28px; /* Slightly smaller circle for mobile */
    height: 28px;
    font-size: 0.9em; /* Slightly smaller number */
    /* Other styles remain mostly the same */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    margin-bottom: 6px;
    font-weight: 500;
    background-color: var(--bg-secondary); 
    z-index: 2;
    position: relative;
}
/* Active and Completed states remain the same */
.step-indicator.active { color: var(--accent-primary); }
.step-indicator.active span {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
}
.step-indicator.completed span {
    border-color: var(--success-color);
    background-color: var(--success-color);
    color: var(--tenant-button-text-color-on-primary, var(--bg-primary));
}
.step-indicator.clickable { cursor: pointer; }
.step-indicator.clickable:hover { color: var(--text-primary); }
.step-indicator.clickable.completed:hover span { border-color: var(--accent-secondary); }
.step-indicator.clickable.active:hover span { border-color: var(--accent-secondary); }

@media (min-width: 768px) { /* Tablet and up */
    .release-creation-steps {
        overflow-x: visible; /* No scroll needed */
        justify-content: space-around; /* Distribute items evenly */
    }
    .step-indicator {
        font-size: 0.85em; /* Restore original font size */
        padding: 5px 10px; /* Restore original padding */
        flex: 1; /* Allow flex to distribute space */
    }
    .step-indicator span {
        width: 30px;
        height: 30px;
        font-size: 1em;
    }
    .step-indicator:not(:last-child)::after {
        left: calc(50% + 15px + 5px); 
        width: calc(100% - 30px - 10px);
    }
}

/* Form Grid (Mobile First) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 16px; /* Gap between form groups */
    margin-bottom: 20px; /* Space below the grid */
}
@media (min-width: 768px) { /* Tablet and up */
    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Multi-column on larger screens */
        gap: 16px 24px; /* Row and column gap */
    }
}

/* Track Contributor Grid (Mobile First) */
.form-grid-contributor {
    display: grid;
    grid-template-columns: 1fr; /* Stack all elements by default */
    gap: 12px; /* Gap between stacked elements */
    align-items: flex-start; /* Align to start for stacked layout */
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.form-grid-contributor .new-party-fields-container {
    display: none; /* JS will toggle to grid */
    grid-template-columns: 1fr; /* Stack within this container too */
    gap: 12px;
}
.form-grid-contributor .new-party-fields-container.active {
    display: grid;
}
.form-grid-contributor .party-action-buttons {
    padding-bottom: 0; /* Remove bottom padding when stacked */
    margin-top: 8px; /* Add some space above button */
}
@media (min-width: 992px) { /* Desktop: restore multi-column layout */
    .form-grid-contributor {
        grid-template-columns: 2fr 1fr 1fr auto; /* Original layout */
        gap: 12px 16px;
        align-items: flex-end;
    }
    .form-grid-contributor .new-party-fields-container {
        grid-column: span 2; /* Spans 2 columns in the main grid */
        grid-template-columns: 1fr 1fr; /* Side-by-side for new name/type */
        gap: 12px 16px;
    }
     .form-grid-contributor .new-party-fields-container.active ~ .role-group {
        /* This rule might be complex due to JS interaction; JS might need to directly control grid-column for role-group */
        /* Assuming JS sets the role-group to span appropriately or hide if new-party-fields are active */
    }
    .form-grid-contributor .party-action-buttons {
        padding-bottom: 10px; /* Restore original padding */
        margin-top: 0;
    }
}


/* Step Navigation (Mobile First) */
.step-navigation {
    display: flex;
    flex-direction: column; /* Stack buttons by default */
    gap: 10px; /* Space between stacked buttons */
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.step-navigation .btn {
    width: 100%; /* Make buttons full width when stacked */
}
@media (min-width: 576px) { /* Small screens and up */
    .step-navigation {
        flex-direction: row; /* Side-by-side layout */
        justify-content: space-between;
        align-items: center;
    }
    .step-navigation .btn {
        width: auto; /* Auto width for buttons */
    }
}
.modal-footer.step-navigation {
    padding-left:0; padding-right:0; padding-bottom: 0;
}


/* --- Tom Select Dark Theme Customization --- */
/* Ensuring Tom Select inputs match the dark theme form styles */
.ts-wrapper .ts-control {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    border-radius: 6px; /* Match existing form input border-radius */
    padding: 10px 12px; /* Match existing form input padding */
    font-size: 0.9em; /* Match existing form input font-size */
}
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.ts-wrapper .ts-control input::placeholder {
    color: var(--text-primary);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2);
}

/* Dropdown styles */
.ts-dropdown {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color); /* Ensure top border is visible */
    border-radius: 0 0 6px 6px; /* Match bottom corners with control */
    color: var(--text-primary);
    font-size: 0.9em;
}
.ts-dropdown .option {
    padding: 8px 12px;
    color: var(--text-primary);
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background-color: var(--accent-primary);
    color: var(--bg-primary); /* Or var(--tenant-button-text-color-on-primary) if dynamic */
}
.ts-dropdown .create { /* "Add..." option */
    color: var(--accent-primary);
}
.ts-dropdown .create:hover {
    color: var(--bg-primary); /* Match active option text color */
}

/* Selected items / tags */
.ts-wrapper .ts-control > div, /* Single item selected */
.ts-wrapper.multi .ts-control > div { /* Multi-select items */
    background-color: var(--accent-primary);
    color: var(--bg-primary); /* Or var(--tenant-button-text-color-on-primary) */
    border-radius: 4px;
    padding: 2px 6px;
    margin: 2px 4px 2px 0;
}
.ts-wrapper.multi .ts-control > div .remove { /* Remove button on multi-select items */
    color: var(--bg-primary); /* Or var(--tenant-button-text-color-on-primary) */
    border-left: 1px solid rgba(0,0,0,0.2); /* Darker separator */
}


/* --- VanillaJS Datepicker Dark Theme Customization --- */
/* Input field for datepicker (should already be styled by .form-group input if it has .form-control) */
/* If it's a separate input without .form-control, add styles here or ensure .form-control is on the input */

/* Datepicker popup */
.datepicker-picker {
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Header: Month/Year display and nav buttons */
.datepicker-header .datepicker-title,
.datepicker-header .datepicker-controls button {
    color: var(--text-primary);
}
.datepicker-header .datepicker-controls button:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
}

/* Days view */
.datepicker-days .datepicker-cell,
.datepicker-months .datepicker-cell,
.datepicker-years .datepicker-cell {
    color: var(--text-primary);
}
.datepicker-days .datepicker-cell.disabled,
.datepicker-months .datepicker-cell.disabled,
.datepicker-years .datepicker-cell.disabled {
    color: var(--text-secondary);
    opacity: 0.5;
}
.datepicker-days .datepicker-cell:not(.disabled):not(.selected):hover,
.datepicker-months .datepicker-cell:not(.disabled):not(.selected):hover,
.datepicker-years .datepicker-cell:not(.disabled):not(.selected):hover {
    background-color: rgba(var(--accent-primary-rgb), 0.2);
    border-radius: 4px;
}
.datepicker-days .datepicker-cell.selected, .datepicker-days .datepicker-cell.selected:hover,
.datepicker-months .datepicker-cell.selected, .datepicker-months .datepicker-cell.selected:hover,
.datepicker-years .datepicker-cell.selected, .datepicker-years .datepicker-cell.selected:hover {
    background-color: var(--accent-primary);
    color: var(--bg-primary); /* Or var(--tenant-button-text-color-on-primary) */
    font-weight: 600;
    border-radius: 4px;
}

/* Day names */
.datepicker-week span {
    color: var(--text-secondary);
}

/* Dashboard Welcome Banner */
.dashboard-welcome-banner {
    grid-column: 1 / -1;
    margin-bottom: 24px;
    background-color: var(--bg-primary);
    border-color: var(--accent-primary);
    padding: 16px;
}

.welcome-banner-title {
    margin: 0;
    font-size: 1.3em;
    color: var(--text-primary);
}

.welcome-banner-subtitle {
    margin: 5px 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.card-full-width-button {
    margin-top: 16px;
    width: 100%;
}

.dashboard-card-full-width {
    grid-column: 1 / -1;
}

.release-view-button {
    margin-left: 10px;
}

.no-releases-container {
    padding: 20px 0;
}

.no-records {
    text-align: center;
}

.no-releases-action {
    text-align: center;
    margin-top: 15px;
}

.card-body {
    padding: 20px;
}

/* Auth Page Styles */
.auth-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 600px;
}

.auth-card .card-header {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

.auth-card .card-header h2 {
    font-size: 1.5em;
}

.centered-header {
    text-align: center;
}

.auth-form-logo {
    display: block;
    margin: 0 auto 20px auto;
    max-height: 50px;
}

.form-switch-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

.form-switch-link a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.form-switch-link a:hover {
    text-decoration: underline;
}

.form-group-submit {
    margin-top: 25px;
}

.full-width-button {
    width: 100%;
    justify-content: center;
}

.centered-text {
    text-align: center;
}

.profile-settings-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.form-text-muted {
    font-size: 0.8em;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

.form-footer {
    border-top: none;
    padding-top: 10px;
    margin-top: 10px;
    padding-right: 0;
}

@media (max-width: 767px) {
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group input[type="file"],
    .form-group textarea,
    .form-group select,
    .ts-wrapper .ts-control {
        font-size: 16px;
    }
}