/*
 * TFC Dubbing Tracker - Sleek & Modern Stylesheet
 * This stylesheet creates a fixed, collapsible sidebar that "púlishes" the main content.
 *
 * MODIFIED to be container-less and sleek.
 * FURTHER MODIFIED to revert all sizing (fonts, padding, margins, dimensions) to the original version.
 * UPDATED for left-aligned text on carousel overlay with gradient background.
 * REMOVED smaller custom project selection carousel styling, now using standard dashboard card size.
 * ADDED REFINEMENTS to prevent image overflow and ensure proper carousel scrolling.
 * DIAGNOSTIC: Temporarily set project-poster-card background to blue for visibility.
 * FINALIZED: Added specific styles for "thumbnail-like" carousel in manage project.
 * ADDED RESPONSIVENESS AND MOBILE-FRIENDLY STYLES.
 * UPDATED: Increased max-width for main content areas to reduce 'overloaded' feel.
 * NEW: Global scaling to make everything ~15% smaller using rem units.
 * UPDATED: Added padding below logo in sidebar and changed logo animation to fade effect for image logos.
 * FIXED: Missing closing braces at the end of the file.
 * NEW: Removed border from the sidebar logo container.
 * UPDATED: Sized down sidebar logos by 20%.
 * UPDATED: Added padding above logo and further reduced logo size.
 * NEW: Used only the full logo for both states with a "shrink and crop" animation.
 * UPDATED: Restructured Schedule Grid to Vertical Hour Slots and Refined Column Headers/Styling (CSS part).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables for easy management of colors and sizes */
:root {
    /* Base values for scaling */
    --base-font-size: 1rem; /* This will be scaled by html font-size */

    --sidebar-expanded-width: 16.25rem; /* 260px / 16 */
    --sidebar-collapsed-width: 5rem;     /* 80px / 16 */
    --sidebar-transition-duration: 0.3s;

    /* New Color Palette based on User's Guide */
    --color-bg-primary: #f9fafb; /* Light gray for general body */
    --color-bg-secondary: #ffffff; /* White for sections/cards */
    --color-bg-tertiary: #e2e8f0; /* Light border color, also used for very light backgrounds or inputs */

    --color-dark-element-bg: #0f172a; /* Slate-900 for dark elements like sidebar background */
    --color-dark-element-bg-light: #1e3a8a; /* Blue-900, slightly lighter for gradient starts in dark elements */

    --color-accent-primary: #1d4ed8; /* Blue-700 for buttons, icons */
    --color-accent-secondary: #3b82f6; /* Blue-500 for gradient end, hover */

    --color-text-general: #334155; /* Slate-700 for general body text */
    --color-text-heading: #1e293b; /* Slate-800 for section headings */
    --color-text-paragraph: #475569; /* Slate-600 for paragraph text */
    --color-text-on-dark: #ffffff; /* White text on dark backgrounds */
    --color-text-on-dark-blue: #bfdbfe; /* Blue-200 for text on dark blue */

    --color-border: #e2e8f0; /* Light slate gray for borders */
    
    /* New Sidebar Specific Colors */
    --color-sidebar-active-bg: #f0f0f0; /* Light grey for active item background */
    --color-sidebar-active-shadow: rgba(0,0,0,0.1); /* Subtle shadow for active item */
    --color-sidebar-hover-bg: rgba(0,0,0,0.03); /* Very light grey for hover */
    
    /* Existing Error/Warning/Info colors - keeping as is unless specified */
    --color-error: #dc3545;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;
}

/* Base font size for global scaling */
html {
    font-size: 85%; /* Scales 16px to 13.6px, making everything 15% smaller */
}

/* --- Global & Typography --- */
* {
    box-sizing: border-box;
}

body { /* Removed .dark-mode as it's now a light theme by default */
    background-color: var(--color-bg-primary); /* Use light gray */
    color: var(--color-text-general); /* Use dark slate gray for text */
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-left: var(--sidebar-expanded-width);
    transition: padding-left var(--sidebar-transition-duration) ease-in-out;
    line-height: normal;

    /* Hero Section Background Pattern */
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(to right, var(--color-border) 1px, transparent 1px);
    background-size: 2rem 2rem; /* 32px by 32px grid */
}


/* --- Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;

    width: var(--sidebar-expanded-width);
    background: var(--color-bg-secondary); /* White background for sidebar */
    border-right: 1px solid var(--color-border); /* Light border */
    transition: width var(--sidebar-transition-duration) ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: scroll; /* Ensure scrolling */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

/* Hide scrollbar for WebKit browsers */
.sidebar::-webkit-scrollbar {
    display: none;
}


.sidebar-header {
    /* Fixed height for the header area to contain the logo */
    height: 5rem; /* 80px */
    display: flex; /* Enable Flexbox for centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    padding: 0.75rem 0; /* 12px top/bottom padding, no side padding */
    border-bottom: none; /* Removed border */
    overflow: hidden; /* Crucial to crop the overflowing parts of the logo image */
    margin-bottom: 1.25rem; /* 20px of space below the logo */
    position: relative; /* Needed for positioning elements inside */
}

/* Styling for the single logo image */
.sidebar-header .sidebar-logo-img { /* Changed from .full-logo-img */
    display: block; /* Ensure it behaves as a block for centering and positioning */
    height: auto; /* Maintain aspect ratio */
    width: 12rem; /* Default width for the expanded state logo (e.g., 192px) */
    
    /* Ensure smooth transitions for logo changes */
    transition: width var(--sidebar-transition-duration) ease-in-out,
                height var(--sidebar-transition-duration) ease-in-out,
                transform var(--sidebar-transition-duration) ease-in-out; /* Add transform for positioning */
}

/* Collapsed state for the logo: scale up and shift to crop the text */
body.sidebar-collapsed .sidebar-header .sidebar-logo-img {
    width: 300%; /* Make the image much wider, effectively scaling it up */
    height: 140%; /* Maintain height relative to its container */
    object-fit: contain; /* Ensure the image scales within its bounds */
    transform: translateX(34%); /* Adjusted: Set to 0% to align the leftmost part of the scaled image within the container */
    /* This should make the icon perfectly visible. Adjust if fine-tuning is needed. */
}


.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0; 
    flex-grow: 1;
}

.sidebar-nav a {
    height: 3.125rem; /* 50px */
    display: flex;
    align-items: center; /* Vertically center content */
    padding: 0 0.9375rem 0 1.25rem; /* 15px 20px */
    margin: 0.3125rem 0; /* 5px */
    color: var(--color-text-paragraph); /* Lighter grey for inactive links */
    text-decoration: none;
    border-radius: 0.5rem; /* 8px */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    gap: 0.625rem; /* 10px */
}

.sidebar-nav a:hover {
    background-color: var(--color-sidebar-hover-bg);
    color: var(--color-text-heading);
}

.sidebar-nav a.active {
    background-color: var(--color-sidebar-active-bg);
    color: var(--color-text-heading);
    font-weight: 600;
    box-shadow: 0 0.125rem 0.3125rem var(--color-sidebar-active-shadow); /* 2px 5px */
}

.sidebar-nav a.active:hover {
    background-color: var(--color-sidebar-active-bg);
    color: var(--color-text-heading);
}

.sidebar-nav i {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    line-height: 1.5rem; /* 24px */
    font-size: 1.2rem; /* Standard icon size for both states */
    text-align: center;
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-right: 0; /* Ensure no conflicting margin-right */
}

.sidebar-nav span {
    transition: opacity var(--sidebar-transition-duration) ease-in-out,
                width var(--sidebar-transition-duration) ease-in-out,
                margin-left var(--sidebar-transition-duration) ease-in-out;
    flex-grow: 1;
}

/* NEW: Style for the clickable avatar/name area (profile link) */
.profile-avatar-link {
    height: 3.75rem; /* 60px */
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    padding: 0 0.9375rem 0 1.25rem; /* 15px 20px */
    margin: 0.3125rem 0; /* 5px */
    border-radius: 0.5rem; /* 8px */
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    gap: 0.625rem; /* 10px */
}

.profile-avatar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(0.3125rem); /* 5px */
}

.user-avatar {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    margin-right: 0; /* Ensure no conflicting margin-right */
}

/* NEW: Sidebar Toggle Button Styling */
.sidebar-toggle {
    position: fixed;
    bottom: 1.25rem; /* 20px */
    left: calc(var(--sidebar-expanded-width) - 1.5625rem); /* 25px */
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    border-radius: 50%;
    background-color: var(--color-accent-primary);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.2); /* 2px 5px */
    border: none;
    outline: none;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.2s ease, left var(--sidebar-transition-duration) ease-in-out;
    z-index: 1001;
}

.sidebar-toggle:hover {
    background-color: var(--color-accent-secondary);
}
.sidebar-toggle:focus {
    outline: none;
}

.sidebar-toggle i {
    transform: rotate(0deg); 
    transition: transform var(--sidebar-transition-duration) ease-in-out;
    margin-right: 0; /* Remove default icon margin */
}


/* --- COLLAPSED SIDEBAR STATE --- */
body.sidebar-collapsed {
    padding-left: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Header in Collapsed State */
body.sidebar-collapsed .sidebar-header {
    height: 5rem; /* Keep fixed height */
    padding-top: 0.75rem; /* 12px top padding */
    padding-bottom: 1.25rem; /* 20px bottom padding */
}

/* Navigation Links in Collapsed State */
body.sidebar-collapsed .sidebar-nav a {
    padding-left: 1.25rem; /* 20px */
    padding-right: 0.9375rem; /* 15px */
    height: 3.125rem; /* 50px */
}
body.sidebar-collapsed .sidebar-nav a:hover {
    transform: none; /* Remove translateX on hover for collapsed state */
}

/* Icons in Collapsed State (Fixed as per request) */
body.sidebar-collapsed .sidebar-nav i {
    font-size: 1.2rem; /* Maintain the same font-size as expanded */
    margin-right: 0; /* Ensure no conflicting margin-right */
}

/* Text in Collapsed State (Disappears as per request) */
body.sidebar-collapsed .sidebar-nav span {
    opacity: 0; /* Hide text */
    width: 0; /* Collapse width */
    margin-left: 0; /* Ensure no residual space */
    pointer-events: none; /* Disable interaction with hidden text */
}

/* Profile Avatar Link in Collapsed State */
body.sidebar-collapsed .profile-avatar-link {
    padding-left: 1.25rem; /* 20px */
    padding-right: 0.9375rem; /* 15px */
    height: 3.75rem; /* 60px */
}
body.sidebar-collapsed .profile-avatar-link .user-avatar {
    margin-right: 0; /* Ensure no margin */
}
body.sidebar-collapsed .profile-avatar-link .user-name {
    opacity: 0; /* Hide name */
    width: 0; /* Collapse width */
    overflow: hidden;
}

body.sidebar-collapsed .sidebar-toggle {
    left: calc(var(--sidebar-collapsed-width) - 1.5625rem); /* 25px */
    transform: rotate(0deg);
}

body.sidebar-collapsed .sidebar-toggle i {
    transform: rotate(180deg); 
}


/* --- Main Content Area --- */
.main-content {
    width: 100%;
    padding: 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Apply max-width and center alignment to the containers within main-content */
.main-content > h2,
.main-content > h3,
.main-content > h4,
.main-content > form,
.main-content > .table-container,
.main-content > .info-card,
.main-content > .project-type-section,
.main-content > .project-card-container,
.main-content > .error-message {
    max-width: 87.5rem; /* 1400px */
    width: 100%;
    margin-bottom: 2rem;
}
/* Ensure form-actions within a form don't get excessive margin-bottom */
.main-content > form .form-actions {
    margin-bottom: 0;
}


/* --- General UI Elements (Forms, Tables, Buttons for a Sleek Look) --- */
h2.main-dashboard-title {
    font-size: 2rem;
    color: var(--color-accent-primary);
    text-align: left;
    margin-bottom: 2rem;
    padding-bottom: 0.625rem; /* 10px */
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

/* --- Core Changes: Apply light theme styles to containers --- */
.info-card, form {
    background-color: var(--color-bg-secondary);
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--color-border);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05); /* 4px 15px */
    margin-bottom: 2rem;
}

.info-card h3 {
    margin-top: 0;
    color: var(--color-text-heading);
    font-size: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.625rem; /* 10px */
    margin-bottom: 1.5625rem; /* 25px */
    font-weight: 500;
}

form label {
    display: block;
    color: var(--color-text-heading);
    margin-bottom: 0.5rem; /* 8px */
    font-weight: 500;
    font-size: var(--base-font-size); /* Uses base font size */
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 0.75rem 0.9375rem; /* 12px 15px */
    border-radius: 0.5rem; /* 8px */
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-general);
    margin-bottom: 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 0.1875rem rgba(29, 78, 216, 0.3); /* 3px */
}

button, a.button {
    padding: 0.75rem 1.5625rem; /* 12px 25px */
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-dark);
    border: none;
    border-radius: 0.5rem; /* 8px */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: none;
}

button:hover, a.button:hover {
    background-color: var(--color-accent-secondary);
    transform: translateY(-0.125rem); /* 2px */
}

.button.secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-general);
    border: 1px solid var(--color-border);
}

.button.secondary:hover {
    background-color: var(--color-border);
    color: var(--color-text-heading);
}

.button.tertiary {
    background-color: #0d6efd; /* Adjusted from --color-dark-element-bg to use a defined dark color */
    color: var(--color-text-on-dark);
}

.button.tertiary:hover {
    background-color: #0b5ed7;
}

.form-row {
    display: flex;
    gap: 1.25rem; /* 20px */
    margin-bottom: 0;
}
.form-row .form-group {
    flex: 1;
}
.form-row:last-of-type {
    margin-bottom: 0;
}


/* --- Form Grid Layout (used in create_project) --- */
.form-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.875rem 2.5rem; /* 30px 40px */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 2rem;
}
.form-grid-item {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-secondary);
    padding: 1.875rem; /* 30px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--color-border);
}
.form-grid-item h3 {
    margin-top: 0;
    padding-bottom: 0.625rem; /* 10px */
    border-bottom: 1px solid var(--color-border);
    font-size: 1.2rem;
    color: var(--color-accent-primary);
}
.form-grid-item .form-group {
    margin-bottom: 1rem;
}
.form-grid-item .form-group:last-child {
    margin-bottom: 0;
}


/* --- Table Styles --- */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    background-color: var(--color-bg-secondary);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
    border: 1px solid var(--color-border);
}

th, td {
    padding: 0.9375rem 1.25rem; /* 15px 20px */
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

tr:last-child td {
    border-bottom: none;
}

th {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem; /* 0.05em */
}

tr:hover {
    background-color: rgba(29, 78, 216, 0.05);
}

/* Auth Page styles */
body.auth-page {
    /* Changed to flex-end for right alignment, adjusted padding for spacing */
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Center content vertically */
    min-height: 100vh;
    padding-left: 0; /* Remove default padding-left */
    padding: 2rem 5rem;
    box-sizing: border-box; /* Include padding in element's total width and height */
}

.auth-container {
    background-color: var(--color-bg-secondary);
    /* Reduced padding */
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1); /* 10px 30px */
    width: 100%;
    max-width: 26.25rem; /* 420px */
    text-align: center;
}


.button-small-edit {
    padding: 0.375rem 0.9375rem; /* 6px 15px */
    font-size: 0.8rem;
    font-weight: 500;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-general);
    border-radius: 0.375rem; /* 6px */
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: 1px solid var(--color-border);
    box-shadow: none;
    transform: none;
}

.button-small-edit:hover {
    background-color: var(--color-border);
    transform: none;
}

/* --- Page Header with Top Summary Bar --- */
.page-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 87.5rem; /* 1400px */
    margin-bottom: 0.9375rem; /* 15px */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.9375rem; /* 15px */
}

.page-header-with-actions .main-dashboard-title {
    margin: 0;
    padding: 0;
    border: none;
}

.top-summary-bar {
    display: flex;
    gap: 0.625rem; /* 10px */
}
.top-summary-button {
    padding: 0.5rem 0.9375rem; /* 8px 15px */
    border-radius: 0.5rem; /* 8px */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: none;
    display: inline-block;
}
.top-summary-button:hover {
    transform: translateY(-0.125rem); /* 2px */
    filter: brightness(1.1);
}
.top-summary-block {
    padding: 0.5rem 0.9375rem; /* 8px 15px */
    border-radius: 0.5rem; /* 8px */
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-heading);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
}


/* --- Universal Status Color-Coding --- */
.status-pending, .status-not-done {
    color: #dc3545;
}
.status-in-progress, .status-under-mixing {
    color: #1d4ed8;
}
.status-done, .status-dubbing-completed, .status-mixed, .status-delivered, .status-verified, .status-approved {
    color: #198754;
}
.status-unverified {
    color: #dc3545;
    font-weight: 500;
}


/* --- Netflix Style Project Carousel --- */
.project-type-section {
    width: 100%;
    max-width: 87.5rem; /* 1400px */
    margin-bottom: 2rem;
}
.project-type-section h3 {
    font-size: 1.5rem;
    color: var(--color-text-heading);
    margin-bottom: 1.5625rem; /* 25px */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.625rem; /* 10px */
    font-weight: 600;
}
.project-type-section .project-carousel-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1.25rem; /* 20px */
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
/* Styles for the smaller project selection carousel in manage project (horizontal layout) */
.project-carousel-container.selection-thumbnail-view .project-poster-card {
    flex: 0 0 6.25rem; /* 100px */
    height: 9.375rem; /* 150px */
    margin-right: 0.625rem; /* 10px */
    background-color: var(--color-bg-secondary);
    margin-bottom: 0;
}
.project-carousel-container.selection-thumbnail-view .project-poster-overlay {
    padding: 0.625rem; /* 10px */
}
.project-carousel-container.selection-thumbnail-view .project-poster-overlay h4 {
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Styles for 3:2 aspect ratio specifically in the management project list view */
.management-projects-carousel {
    flex-wrap: wrap;
    overflow: hidden;
    padding-bottom: 0;
}

.management-projects-carousel .project-poster-card {
    flex: 0 0 17.8125rem; /* 285px */
    height: 11.875rem; /* 190px */
    margin-right: 1.25rem; /* 20px */
    margin-bottom: 1.25rem; /* 20px */
}


/* Custom scrollbar for a sleeker look */
.project-type-section .project-carousel-container::-webkit-scrollbar {
    height: 0.5rem; /* 8px */
}
.project-type-section .project-carousel-container::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 0.625rem; /* 10px */
}
.project-type-section .project-carousel-container::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 0.625rem; /* 10px */
}
.project-type-section .project-carousel-container::-webkit-scrollbar-thumb:hover {
    background: #626262; /* Using hardcoded darker grey for hover */
}

.project-poster-card {
    position: relative;
    flex: 0 0 13.75rem; /* 220px */
    height: 20.625rem; /* 330px */
    background-color: var(--color-bg-secondary);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
    margin-right: 1.25rem; /* 20px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid var(--color-border);
    text-decoration: none;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05); /* 4px 15px */
}

.project-poster-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1); /* 10px 30px */
}

.project-poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-poster-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    padding: 2.5rem 0.9375rem 0.9375rem 0.9375rem; /* 40px 15px 15px 15px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--color-text-on-dark);
}

.project-poster-card:hover .project-poster-overlay {
    opacity: 1;
}

.project-poster-overlay h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
    font-size: 1.2rem;
    color: var(--color-text-on-dark);
}

.project-poster-overlay p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-on-dark-blue);
    line-height: 1.4;
}

.project-poster-overlay .status {
    font-weight: bold;
}

.project-poster-card .edit-button-container {
    position: absolute;
    top: 0.9375rem; /* 15px */
    right: 0.9375rem; /* 15px */
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-poster-card:hover .edit-button-container {
    opacity: 1;
}

/* --- Sleek Single-Line Form Layout --- */
.sleek-form-container {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem; /* 20px */
    width: 100%;
    background-color: var(--color-bg-secondary);
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--color-border);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05); /* 4px 15px */
    margin-bottom: 2rem;
}

.sleek-form-container .form-group {
    flex-grow: 1;
    flex-basis: 0;
    margin-bottom: 0;
}

.sleek-form-container .form-group.small {
    flex-grow: 0.5;
}

.sleek-form-container .form-group.action {
    flex-grow: 0;
}

/* Ensure all input types inside have consistent height */
.sleek-form-container input,
.sleek-form-container select,
.sleek-form-container .button {
    margin-bottom: 0 !important;
    height: 3rem; /* 48px */
    box-sizing: border-box;
}

.sleek-form-container .button {
    padding-left: 1.875rem; /* 30px */
    padding-right: 1.875rem; /* 30px */
    flex-shrink: 0;
}

/* --- Form Actions (Right-aligned buttons) --- */
.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

/* --- Specific Tracker Table Styles --- */
.status-cell {
    padding: 0 !important;
    vertical-align: middle;
}

.scene-timing-text {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-paragraph);
    margin-top: 0.3125rem; /* 5px */
    letter-spacing: 0.05rem; /* 0.05em */
}

/* UNIFIED STYLES for both span and select elements */
.scene-indicator-block, .scene-status-select-styled {
    display: flex; /* Changed to flex for centering */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Occupy full cell height */
    padding: 0.9375rem 1.25rem; /* Match original td padding */
    border-radius: 0; /* No radius within the cell */
    font-size: 0.9rem;
    font-weight: 500;
    color: #FFF;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent; /* Base transparency */
    cursor: pointer;
}

.scene-indicator-block.status-done, .scene-status-select-styled.status-done { background-color: #198754; }
.scene-indicator-block.status-in-progress, .scene-status-select-styled.status-in-progress { background-color: #1d4ed8; }
.scene-indicator-block.status-not-done, .scene-status-select-styled.status-not-done { background-color: #dc3545; }


/* Styling for the options within the select dropdown list (browser dependent) */
.scene-status-select-styled option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-general);
}

/* --- Client Comment Display --- */
.comment-row { background-color: var(--color-bg-tertiary); }
.comment-row td { vertical-align: top; padding: 0.9375rem; /* 15px */ }

.comment-bubble {
    background-color: var(--color-bg-secondary);
    border-radius: 0.5rem; /* 8px */
    padding: 0.625rem; /* 10px */
    margin-bottom: 0.625rem; /* 10px */
    border-left: 0.1875rem solid var(--color-accent-primary); /* 3px */
}
.comment-text {
    margin: 0 0 0.3125rem 0; /* 5px */
    font-style: italic;
    color: var(--color-text-general);
    font-size: 0.9em;
}
.comment-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-paragraph);
    text-align: right;
}
.comment-status-select {
    width: 100%;
    margin-top: 0.5rem; /* 8px */
    padding: 0.3125rem; /* 5px */
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-general);
    border-radius: 0.3125rem; /* 5px */
}
.comment-status-select option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-general);
}
.comment-status-display {
    display: block;
    font-size: var(--base-font-size);
    color: var(--color-text-paragraph);
    margin-top: 0.3125rem; /* 5px */
}
.add-comment-button {
    background: none;
    border: none;
    color: var(--color-accent-primary);
    padding: 0;
    border-radius: 0;
    width: auto;
    text-align: left;
    cursor: pointer;
    transition: none;
    margin-top: 0;
    display: inline;
}
.add-comment-button:hover {
    background-color: transparent;
    color: var(--color-accent-secondary);
    border-color: transparent;
}


/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: none;
}
.modal-content {
    background-color: var(--color-bg-secondary);
    margin: 15% auto;
    padding: 1.5625rem; /* 25px */
    border: 1px solid var(--color-border);
    width: 80%;
    max-width: 31.25rem; /* 500px */
    border-radius: 0.75rem; /* 12px */
    position: relative;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2); /* 4px 15px */
}
.close-button {
    color: var(--color-text-general);
    float: right;
    font-size: 1.75rem; /* 28px */
    font-weight: bold;
    position: absolute;
    top: 0.625rem; /* 10px */
    right: 1.25rem; /* 20px */
}
.close-button:hover,
.close-button:focus {
    color: var(--color-accent-primary);
    text-decoration: none;
    cursor: pointer;
}

/* --- Error/Status Messages --- */
.error-message {
    background-color: #dc3545;
    color: white;
    padding: 0.9375rem 1.5625rem; /* 15px 25px */
    border-radius: 0.5rem; /* 8px */
    text-align: center;
    font-weight: 500;
    margin-bottom: 0.9375rem; /* 15px */
}
.status-message {
    background-color: var(--color-accent-primary);
    color: white;
    padding: 0.9375rem 1.5625rem; /* 15px 25px */
    border-radius: 0.5rem; /* 8px */
    text-align: center;
    font-weight: 500;
    margin-bottom: 0.9375rem; /* 15px */
}


/* New/Updated Styles for Character Display with DP */
.character-avatar-name {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    white-space: nowrap;
}

.character-avatar-name img {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.character-avatar-name span {
    font-weight: 500;
    color: var(--color-text-heading);
}

/* --- Slider Toggle Switch Styles --- */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
    margin-bottom: 1px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Hide default HTML checkbox */
.switch input.hidden-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider - the actual toggle visual */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-tertiary);
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.slider:before {
    content: "";
    position: static;
    height: 16.5px;
    width: 16.5px;
    background-color: var(--color-text-paragraph);
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
    flex-shrink: 0;
    margin-left: 4px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

.slider.round:before {
    border-radius: 50%;
}

/* When checked: change background color and move slider */
.switch input.hidden-checkbox:checked + .slider {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    justify-content: flex-end;
}

/* Optional: Focus style */
.switch input.hidden-checkbox:focus + .slider {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3);
}

.switch input.hidden-checkbox:checked + .slider:before {
    background-color: white;
    margin-right: 4px;
    margin-left: 0;
}

/* Adaptations for table cells in assign_characters.php */
td .switch {
    width: 36px;
    height: 18px;
    margin-bottom: 0;
}

td .switch .slider.round {
    border-radius: 18px;
}

td .switch .slider:before {
    height: 12px;
    width: 12px;
    margin-left: 3px;
}

td .switch input.hidden-checkbox:checked + .slider:before {
    margin-right: 3px;
    margin-left: 0;
}


/* --- Alignment Fix for Toggles and Text --- */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Override margin-bottom for .switch when it's inside a .toggle-row */
.toggle-row .switch {
    margin-bottom: 0;
}

/* Ensure consistent base font size and reset potential conflicting styles for text next to toggles */
.toggle-row span {
    font-size: 1rem;
    color: var(--color-text-general);
    margin: 0;
    padding: 0;
}

/* Style for the date navigation buttons in the new multi-day view */
.schedule-multi-day-grid-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.schedule-multi-day-grid-controls .button {
    flex-grow: 0; /* Don't grow */
    flex-shrink: 0; /* Don't shrink */
    padding: 0.5rem 1rem; /* Adjust padding for aesthetics */
    font-size: 0.9rem;
    height: auto; /* Allow height to adjust to content */
}
.schedule-multi-day-grid-controls #currentDateRangeDisplay {
    text-align: center;
    flex-grow: 1;
    font-size: 1.1rem;
    white-space: nowrap; /* Prevent date range from wrapping */
}

/* Multi-day schedule grid container */
.schedule-multi-day-grid-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem; /* 20px between day columns */
    padding-bottom: 0.625rem; /* 10px for scrollbar space */
    width: 100%;
    flex-wrap: nowrap;
}

.schedule-day-column {
    flex: 1 0 calc(33.333% - 0.8333rem); /* Three columns per row, with gap */
    min-width: 250px; /* Minimum width for readability per day */
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem; /* 12px */
    padding: 0.9375rem; /* 15px */
    box-sizing: border-box;
}

.schedule-day-column .column-title {
    font-size: 1.2rem;
    color: var(--color-text-heading);
    margin-top: 0;
    margin-bottom: 0.9375rem; /* 15px */
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem; /* 8px */
}

/* Adjustments for the inner schedule grid table */
.schedule-grid-inner {
    overflow-x: auto; /* For tables that are too wide even within their column */
}

/* NEW Vertical Time Axis Grid Styles */
.schedule-grid.vertical-time-grid {
    table-layout: fixed; /* Fixed layout for consistent columns */
    width: 100%; /* Make inner table fill its container */
    border-collapse: separate; /* Changed to separate for visible borders */
    border-spacing: 0; /* Remove space between cells */
    margin-top: 0; /* No top margin here */
    border: none; /* Remove table level border if present, it's on the container */
    background-color: transparent; /* No background for the inner table */
}

.schedule-grid.vertical-time-grid th,
.schedule-grid.vertical-time-grid td {
    border: none; /* Remove default cell borders */
    padding: 0.5rem;
    text-align: center;
    height: 3rem; /* Height of a schedule row */
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap; /* Prevent wrapping in time cells */
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

/* Apply subtle bottom border to header cells to separate from content */
.schedule-grid.vertical-time-grid thead th {
    border-bottom: 1px solid var(--color-border); /* Separator line for header */
    background-color: var(--color-bg-tertiary); /* Header background */
}

/* Outlines for Time cells (`td.hour-range`) */
.schedule-grid.vertical-time-grid td.hour-range {
    border-right: 2px solid var(--color-border); /* Increased thickness */
    border-bottom: 1px solid var(--color-border); /* Keep bottom subtle for row separation */
    background-color: var(--color-bg-tertiary); /* Consistent background for time column */
    font-weight: bold; /* Keep font bold for time */
}

/* Specific styling for the merged Artist column headers */
.schedule-grid.vertical-time-grid th[colspan="2"] {
    border-left: 1px solid var(--color-border); /* Keep the left border of the merged header */
    /* Other borders are handled by thead th or explicitly by the cells below */
}

/* Styling for the two 30-minute cells within an hour (conceptual, border will be on .booked-slot) */
.schedule-grid.vertical-time-grid td.half-hour-cell-first,
.schedule-grid.vertical-time-grid td.half-hour-cell-second {
    /* These specific classes won't have individual borders here; they inherit from td or get border from .booked-slot */
}

/* Outlines for Booked Artist Cells (`.booked-slot`) - now they will have an outline */
.schedule-grid td.booked-slot {
    background-color: var(--color-accent-primary); /* Default for booked */
    color: var(--color-text-on-dark);
    font-size: 0.75rem;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid rgba(0, 0, 0, 0.3); /* More prominent, slightly darker border */
    border-radius: 0.3125rem; /* Small border radius for the blocks */
    z-index: 1; /* Bring slightly forward for border visibility */
}

/* Ensure hover effect for booked slots */
.schedule-grid td.booked-slot:hover {
    filter: brightness(1.1); /* Slightly brighter on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* To maintain horizontal lines in free slots, if desired */
.schedule-grid td.free-slot {
    background-color: transparent; /* Changed to transparent for a cleaner look */
    border-bottom: 1px dashed var(--color-border); /* Add subtle dashed border to free slots to maintain horizontal lines */
}


/* Status specific colors for booked slots (example) */
.schedule-grid td.status-booked { background-color: #1d4ed8; } /* Blue */
.schedule-grid td.status-confirmed { background-color: #198754; } /* Green */
.schedule-grid td.status-completed { background-color: #6c757d; } /* Grey */
.schedule-grid td.status-cancelled { background-color: #dc3545; } /* Red */


/* Responsive adjustments for schedule grid */
@media (max-width: 47.9375rem) { /* 767px */
    .schedule-grid th, .schedule-grid td {
        min-width: 2.5rem; /* Smaller cells on mobile */
        height: 2.5rem;
        font-size: 0.65rem;
        padding: 0.3rem;
    }
    .schedule-grid thead tr:first-child th {
        font-size: 0.75rem;
    }

    .schedule-multi-day-grid-container {
        flex-direction: column; /* Stack day columns vertically on small screens */
        gap: 1rem;
    }
    .schedule-day-column {
        flex: 1 0 100%; /* Ensure full width when stacked */
        min-width: unset; /* Remove min-width to allow stacking */
        max-width: 100%; /* Ensure full width when stacked */
    }
    .schedule-multi-day-grid-controls .button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    .schedule-multi-day-grid-controls #currentDateRangeDisplay {
        font-size: 1rem;
    }
}
/* Responsive for larger tablets or smaller desktops */
@media (min-width: 48rem) and (max-width: 64rem) { /* 768px to 1024px */
    .schedule-multi-day-grid-container {
        flex-wrap: wrap; /* Allow wrapping if 4 columns are too tight */
        justify-content: center;
    }
    .schedule-day-column {
        flex: 1 0 calc(50% - 0.625rem); /* Two columns per row, with gap */
    }
}

/* --- Styles for Sticky Table Column (Freeze Pane Effect) --- */
.table-container {
    overflow-x: auto;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.sticky-table {
    width: 100%;
    border-collapse: collapse; /* Crucial for sticky positioning */
    margin: 0;
    border: none;
}

/* Make the first column sticky */
.sticky-table th:first-child,
.sticky-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--color-bg-secondary); /* Must have a solid background */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05); /* Subtle shadow for "raised" effect */
}

/* Ensure the sticky header is above the sticky column cells */
.sticky-table th:first-child {
    z-index: 3;
}

/* Ensure all cells have consistent styling */
.sticky-table th, .sticky-table td {
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 0.9375rem 1.25rem;
    white-space: nowrap; /* Prevent content from wrapping */
}

/* Remove right border from the very last cell in a row */
.sticky-table th:last-child,
.sticky-table td:last-child {
    border-right: none;
}


/* --- NEW: Tooltip Styles --- */
[data-tooltip-text] {
    position: relative;
    cursor: pointer;
}

[data-tooltip-text]:before,
[data-tooltip-text]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

[data-tooltip-text]:before {
    content: attr(data-tooltip-text);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    white-space: pre-line; /* Allows line breaks from \n */
    min-width: 150px;
    text-align: left;
}

[data-tooltip-text]:after {
    content: '';
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #333 transparent transparent transparent;
    width: 0;
    height: 0;
    bottom: calc(125% - 6px);
}

[data-tooltip-text]:hover:before,
[data-tooltip-text]:hover:after {
    visibility: visible;
    opacity: 1;
}