/*
     _         _                    
 ___| |_ _   _| | ___   ___ ___ ___ 
/ __| __| | | | |/ _ \ / __/ __/ __|
\__ \ |_| |_| | |  __/| (__\__ \__ \
|___/\__|\__, |_|\___(_)___|___/___/
         |___/                      

Imported fonts in HTML for styling purposes.
Font used: Ranchers, Nunito
SVG files include the pattern and logo.
*/

/* For mobile view, under 480px */
@media (max-width: 480px) {

    #logged-in-user-info.user-is-customer {
        max-width: 0; /* Collapse width */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
        opacity: 0;
        transition: max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    }

    .movie-card .stars-container i.fa-star {
        font-size: 0.8em;
        margin-right: 1px;
    }

    .movie-card .stars-container .rating-text {
        display: none !important;
    }

    #logged-in-user-info {
         font-size: 0.75rem;
    }
    #app-header .container .gap-4 {
        gap: 0.5rem;
    }
    .logo-container {
        margin-right: 0.5rem;
    }
    .logo-text {
        font-size: 20px;
    }
    .logo-container svg {
        height: 30px;
    }

    #qr-zoom-modal.is-hidden {
    display: none !important;
    }
}

/* Base Styles with Dark Mode.*/
body {
    font-family: "Nunito Sans", sans-serif; /* Use Nunito Sans instead of generic font. */
    font-weight: 400;
    background-color: #252525; /* Dark background */
    color: #e0e0e0; /* Light default text */
    margin: 0;
    padding: 0;
    transition: background-image 0.3s ease-in-out; /* For smooth transition */
}

/* Apply background pattern only when logged out */
body:not(.logged-in) {
    background: url('./svg/pattern.svg');
    background-repeat: repeat;
    background-size: 400px 400px;
    background-attachment: fixed;
    background-color: #252525;
}

/* Style for body when user is logged in */
body.logged-in {
    background-image: none; /* Remove the pattern */
    background-color: #252525; 
}

/* Centering Auth View */
#auth-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}


/* Helper to hide elements */
.is-hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#auth-view.is-hidden,
#customer-view.is-hidden,
#admin-view.is-hidden,
#vendor-dashboard-view.is-hidden,
#movie-details-modal.is-hidden,
#payment-modal.is-hidden,
#qr-validation-modal.is-hidden,
#booking-success-modal.is-hidden,
#qr-zoom-modal.is-hidden {
    display: none !important; /* Hide these specific containers completely when is-hidden is added */
}

/* App Header */
#app-header {
    background-color: #1a1a1a;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #333333;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#app-header .user-info-text {
     color: #b1b1b1;
}

/* To hide movie card details by default */
.movie-card-details {
    display: none;
}

/* Logo Styles */
.logo-container {
    display: flex;
    align-items: center;
}
.logo-container img {
    height: 35px;
    width: auto;
    margin-right: 8px;
    flex-shrink: 0;
}
.ranchers-regular {
  font-family: "Ranchers", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.logo-text {
    font-size: 24px; 
    line-height: 1;
}
.logo-silver {
    color: #b1b1b1;
}
.logo-seat {
    color: #787878;
}

/* Containers */
.auth-container, .movie-card, .analytics-card, #admin-manage-movies .p-6, #admin-manage-vendors .p-6, #admin-vendor-list, .modal-content, #my-bookings-view > div:last-child, #admin-bookings-list, #admin-preview-customer-view {
    background-color: #333333;
    border: 1px solid #444444;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    color: #e0e0e0;
}
.auth-container { 
    max-width: 450px; 
    margin: 2rem auto; 
    padding: 3rem; 
}

.movie-card { 
    overflow: hidden; 
    transition: transform 0.2s ease-in-out; 
    display: flex; 
    flex-direction: column; 
}

.analytics-card { 
    padding: 1.25rem; 
    margin-bottom: 1.5rem; 
}

.auth-container { 
    max-width: 450px; 
    margin: 2rem auto; 
    padding: 2rem; 
}

.movie-card { 
    overflow: hidden; 
    transition: transform 0.2s ease-in-out; 
    display: flex; 
    flex-direction: column; 
}

.movie-card:hover { 
    transform: translateY(-5px); 
}
    
.analytics-card { padding: 1.25rem; margin-bottom: 1.5rem; }
.auth-container h2, .analytics-card h3, .admin-section h2, .admin-section h3, .modal-content h2, .movie-card h3 { color: #ffffff; }

/* Movie Card Specifics */
.movie-poster {
    display: block; /* Ensure image is block level */
    width: 100%;
    height: auto; /* Let aspect-ratio control height */
    aspect-ratio: 1587 / 2245; /* Desired aspect ratio */
    object-fit: cover; /* Cover the area */
    background-color: #444444;
    border-bottom: 1px solid #444444;
}

.movie-card {
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    background-color: #333333;
    border: 1px solid #444444;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    color: #e0e0e0;
    position: relative; /* Needed if absolute positioning was ever used inside */
}

.movie-card .p-4 { /* Content area of card */
    padding: 0.75rem;
    background-color: #333333;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.movie-card-details {
    display: none !important;
}

/* Styles for Title and Rating*/
 .movie-card h3 {
    color: #ffffff;
    font-size: 1rem; /* Adjust title size if needed for 3 columns */
    line-height: 1.2;
    margin-bottom: 0.25rem; /* Space below title */
}
.movie-card .stars-container {
    margin-bottom: 0; /* Remove extra space below stars if details are hidden */
}
.movie-card .stars-container .ml-2 { /* Rating text */
   font-size: 0.75rem;
   color: #aaaaaa;
}

.movie-card-details p {
   /* Styles for when they are visible */
   color: #cccccc;
   font-size: 0.875rem;
}
.movie-card-details .text-blue-600 { /* Showtimes text */
    color: #8bc0ef !important;
}

/* Forms */
.form-label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: 500; 
    color: #b1b1b1; 
}

.form-input, .form-select { 
    border: 1px solid #555555; 
    border-radius: 0.375rem; 
    padding: 0.75rem 1rem; 
    width: 100%;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
    background-color: #444444; 
    color: #f0f0f0; 
}

.form-input::placeholder { color: #888888; }

.form-input:focus, .form-select:focus { 
    border-color: #6fa8dc; 
    box-shadow: 0 0 0 3px rgba(111, 168, 220, 0.3); 
    background-color: #505050; 
    outline: none; 
}

.form-input:disabled, .form-select:disabled { 
    background-color: #3a3a3a;
     opacity: 0.7; cursor: not-allowed; 
}

textarea.form-input { min-height: 80px; }

/* Buttons Styling */
.btn { 
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600; cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1; border: 1px solid transparent; 
}

.btn:disabled { 
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #555 !important;
    color: #999 !important; 
    border-color: #666 !important; 
    box-shadow: none !important;
}

.btn-primary { 
    background-color: #4a90e2;
    color: white; border-color: #4a90e2;
}

.btn-primary:hover:not(:disabled) { 
    background-color: #357abd; 
    border-color: #357abd; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: #555555;
    color: #f0f0f0; 
    border: 1px solid #666; 
}

.btn-secondary:hover:not(:disabled) { 
    background-color: #666666;
    border-color: #777; 
}

.btn-danger { 
    background-color: #e57373; 
    color: white; 
    border-color: #e57373; 
}

.btn-danger:hover:not(:disabled) { 
    background-color: #d32f2f; 
    border-color: #d32f2f; 
}

.btn-success { 
    background-color: #66bb6a; 
    color: white; 
    border-color: #66bb6a; 
}
.btn-success:hover:not(:disabled) {
    background-color: #4caf50;
    border-color: #4caf50;
}
.btn-link {
    background: none;
    border: none;
    color: #6fa8dc;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.btn-link:hover:not(:disabled) {
    color: #8bc0ef;
}
.btn-icon {
    padding: 0.5rem;
    margin-left: 0.5rem;
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Error Messages */
#customer-login-error, #register-error, #admin-login-error, #vendor-login-error, #payment-error, #date-error {
    color: #ff8a80;
    min-height: 1.25em;
}
.text-red-500 { color: #ff8a80 !important; }
.text-green-600 { color: #a5d6a7 !important; }
.text-blue-600 { color: #8bc0ef !important; }
.text-purple-600 { color: #ce93d8 !important; }
.text-gray-500 { color: #aaaaaa !important; }
.text-gray-600 { color: #bbbbbb !important; }
.text-gray-700 { color: #cccccc !important; }
.text-gray-800 { color: #dddddd !important; }

/* Stars */
.stars-container .fa-star, .stars-container .fa-regular.fa-star {
    color: #facc15;
    margin-right: 2px;
    transition: transform 0.1s ease-in-out;
}
.stars-container.interactive .fa-star:hover, .stars-container.interactive .fa-regular.fa-star:hover {
    transform: scale(1.2);
}
.stars-container:not(.interactive) {
    cursor: default;
}
.stars-container .ml-2 {
    color: #aaaaaa;
}

/* Admin Navigation */
#admin-nav {
    border-bottom-color: #444444;
}
.admin-nav-button {
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: #999999;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-nav-button.active {
    color: #6fa8dc;
    border-bottom-color: #6fa8dc;
}

/* Modals */
#movie-details-modal, #payment-modal, #qr-validation-modal, #booking-success-modal, #qr-zoom-modal {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.modal-content {
    background-color: #333333;
    color: #e0e0e0;
    border: 1px solid #444444;
}
.modal-content .border-b, .modal-content .border-t {
    border-color: #444444 !important;
}
.modal-content .bg-gray-50 { background-color: #2d2d2d !important; }
.modal-content .bg-blue-50 {
    background-color: #3a4a5f !important;
    border-color: #5a7a9f !important;
    color: #e0e0e0;
}
.modal-content .bg-green-50 { background-color: #204d3a !important; }
.modal-content .text-gray-500, .modal-content .text-gray-600, .modal-content .text-gray-700 {
    color: #aaaaaa !important;
}
.modal-content .text-gray-800, .modal-content .text-green-800 {
    color: #ffffff !important;
}
.modal-content button.text-gray-500, .modal-content button.text-green-700 {
    color: #bbbbbb !important;
}
.modal-content button.hover\:text-gray-800:hover, .modal-content button.hover\:text-green-900:hover {
    color: #ffffff !important;
}

/* Showtime Selection */
.showtime-label {
    padding: 0.5rem 1rem;
    border: 1px solid #555555;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #444444;
    color: #e0e0e0;
}
.showtime-label:hover:not(.disabled) {
    background-color: #555555;
}
input[type="radio"].showtime-radio {
    display: none;
}
input[type="radio"]:checked + .showtime-label {
    background-color: #4a90e2;
    color: white;
    border-color: #4a90e2;
}
input[type="radio"]:disabled + .showtime-label, .showtime-label.disabled {
    background-color: #3a3a3a;
    color: #777777;
    cursor: not-allowed;
    opacity: 0.7;
    border-color: #4a4a4a;
}

/* Seat Map */
.screen {
    width: 80%;
    height: 15px;
    background-color: #666666;
    margin: 15px auto 25px;
    border-radius: 3px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
    color: #dddddd;
    text-align: center;
    font-size: 0.7rem;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: 1px;
}
.seat-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.seat-row {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}
.seat {
    width: 28px;
    height: 28px;
    margin: 3px;
    background-color: #555555;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #aaaaaa;
    font-size: 0.8rem;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.seat i {
    transition: color 0.2s ease;
}
.seat:hover:not(.unavailable):not(.selected) {
    background-color: #ffffff;
}
.seat.selected {
    background-color: #4a90e2;
    color: #4a90e2;
    transform: scale(1.1);
}
.seat.selected i {
    color: #ffffff;
}
.seat.unavailable {
    background-color: #404040;
    cursor: not-allowed;
    color: #777777;
    opacity: 0.6;
}
.seat.unavailable i {
    color: #777777;
}
.seat-spacer {
    width: 28px;
    height: 28px;
    margin: 3px;
}

/* Booking List */
.booking-list-item {
    background-color: #3a3a3a;
    padding: 1rem;
    border: 1px solid #4a4a4a;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.booking-list-item .text-lg { color: #ffffff; }
.booking-list-item strong { color: #cccccc; }
.booking-list-item .seats {
    font-family: monospace;
    background-color: #555555;
    color: #e0e0e0;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    margin-left: 4px;
}
.booking-meta {
    font-size: 0.8rem;
    color: #aaaaaa;
    border-top: 1px dashed #555555;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}
.booking-meta .text-red-600 { color: #ff8a80 !important; }
.qr-code-container {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border: 1px solid #555;
    padding: 4px;
    background: white;
}
.qr-code-container img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Admin Booking List Section */
.admin-booking-group h3 {
    color: #ffffff;
    border-bottom: 1px solid #444444; /* Added border for separation */
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}
.admin-booking-item {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-left: 4px solid #666666;
    background-color: #3a3a3a;
    border-radius: 0 0.25rem 0.25rem 0;
}
.admin-booking-item span {
    color: #cccccc;
    display: block; /* used to make each span take its own seperate line */
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}
.admin-booking-item span:last-of-type {
     margin-bottom: 0;
}
.admin-booking-item i {
    color: #aaaaaa;
    width: 1.1em;
    margin-right: 0.35rem;
    text-align: center;
}
.admin-booking-item span .seats {
    font-family: monospace;
    background-color: #555555;
    color: #e0e0e0;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    margin-left: 4px;
}
.admin-booking-item span .text-xs {
     font-size: 0.75rem;
     color: #888888 !important;
     margin-left: 4px;
}
.status-label {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    color: white;
    display: inline-block;
}
.status-used { background-color: #16a34a; color: white; }
.status-not-used { background-color: #d97706; color: white; }
.status-error { background-color: #dc2626; color: white; }
.status-ok { background-color: #16a34a; color: white; }

.admin-booking-item > div:last-child { 
    margin-top: 0.75rem; 
    padding-top: 0.5rem; 
    border-top: 1px solid #555555; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-booking-item > div:last-child .text-xs { 
    font-size: 0.75rem;
    color: #aaaaaa !important;
}

/* QR Scanner Section */
#admin-qr-reader {
    border: 1px solid #555;
    background-color: #000;
}
#scan-status { color: #bbbbbb; }
#qr-validation-modal .modal-body strong { color: #ffffff; }
#validation-status {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: 500;
}
#validation-status.status-ok { background-color: #204d3a; color: #dcfce7; }
#validation-status.status-used { background-color: #634504; color: #fef08a; }
#validation-status.status-error { background-color: #5f2120; color: #fecaca; }

/* Calendar Section */
#calendar-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}
.pika-single {
    border: 1px solid #444 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    z-index: 150 !important;
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}
.pika-lendar { width: auto; }
.pika-label {
    color: #ffffff !important;
    background-color: #333333 !important;
    font-size: 1.1em;
    padding: 0.5em;
}
.pika-table th { color: #aaaaaa !important; }
.pika-button {
    background-color: #444444 !important;
    color: #e0e0e0 !important;
    padding: 0.5em 0.5em; 
    height: auto; 
    line-height: 1.2; 
    font-size: 0.9em; 
    border-radius: 3px; 
}
.pika-button:hover { background-color: #555555 !important; }
.is-selected .pika-button {
    background-color: #4a90e2 !important;
    box-shadow: none !important;
    color: white !important;
}
.is-today .pika-button {
    color: #8bc0ef !important;
    font-weight: bold !important;
    border: 1px solid #8bc0ef !important;
}
.is-disabled .pika-button {
    color: #777777 !important;
    opacity: 0.5 !important;
    background: none !important;
    cursor: not-allowed !important;
}
.pika-prev, .pika-next { color: #aaaaaa !important; }
.pika-prev:hover, .pika-next:hover { background-color: #555555 !important; }

/* Calendar scalability */
.pika-single {
    width: auto;
    max-width: 95vw; 
    font-size: 16px; 
}
.pika-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}
.pika-table th {
    font-size: 0.8em;
    padding: 0.5em 0.25em;
}


/* Vendor List */
.vendor-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #444444;
}
.vendor-list-item:last-child { border-bottom: none; }
.vendor-list-item .font-medium { color: #ffffff; }
.vendor-list-item .text-sm { color: #aaaaaa; }

/* QR Zoom Zoom*/
#qr-zoom-modal {
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.85);
}
#qr-zoom-modal .relative {
    background-color: #333;
    border: 1px solid #444;
}
#qr-zoom-content {
    background-color: white;
    padding: 0.5rem;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
#qr-zoom-content img,
#qr-zoom-content canvas { 
    display: block;
    max-width: 100%;   
    max-height: 100%;  
    width: auto;
    height: auto;
    object-fit: contain; 
}
#qr-zoom-close-btn {
    background-color: #b91c1c;
    color: white;
}

/* Analytics Summary */
.summary-card {
    background-color: #3a3a3a;
    border: 1px solid #4a4a4a;
    color: #ccc;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    text-align: center;
}
.summary-card-title {
    font-weight: 500;
    color: #aaa;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.summary-card-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: #eee;
}
.summary-card-value.text-green-600 { color: #81c784 !important; }
.summary-card-value.text-blue-600 { color: #64b5f6 !important; }
.summary-card-value.text-purple-600 { color: #ba68c8 !important; }

/* Analytics Tables  */
#admin-weekly-occupancy-table {
    border-collapse: collapse;
    color: #ccc;
}
#admin-weekly-occupancy-table thead th {
    font-weight: 600;
    color: #eee;
    background-color: #3a3a3a;
    border-bottom: 1px solid #555;
    padding: 0.75rem 1rem; 
}
#admin-weekly-occupancy-table tbody tr { border-bottom: 1px solid #444; }
#admin-weekly-occupancy-table tbody tr:nth-child(even) { background-color: #2c2c2c; }
#admin-weekly-occupancy-table tbody tr:hover { background-color: #404040; }
#admin-weekly-occupancy-table td { padding: 0.75rem 1rem; } 
#admin-weekly-occupancy-table .text-gray-900 { color: #fff !important; }

/* Occupancy Labels */
.occupancy-label {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    min-width: 70px;
}
.occupancy-empty { background-color: #4b5563; color: #d1d5db; }
.occupancy-low { background-color: #7f1d1d; color: #fecaca; }
.occupancy-moderate { background-color: #78350f; color: #fde68a; }
.occupancy-high { background-color: #064e3b; color: #a7f3d0; }


/* Occupancy Bar */
.occupancy-bar-container {
    width: 100%;
    height: 8px;
    background-color: #555555;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.occupancy-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
}
.occupancy-bar-fill.occupancy-low { background-color: #fecaca; }
.occupancy-bar-fill.occupancy-moderate { background-color: #fde68a; }
.occupancy-bar-fill.occupancy-high { background-color: #a7f3d0; }
.occupancy-bar-fill.occupancy-empty { background-color: #6b7280; }
.daily-perf-card .performance-label-container { text-align: right; }

/* Daily Movie Performance Cards */
#admin-daily-movie-performance { margin-bottom: 1.5rem; }
.daily-perf-card {
    background-color: #3a3a3a;
    border: 1px solid #4a4a4a;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daily-perf-card .movie-title {
    font-weight: 600;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.daily-perf-card .details {
    font-size: 0.875rem;
    color: #bbbbbb;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.daily-perf-card .details strong { color: #e0e0e0; }

/* Monthly Seats Card */
#monthly-seats-list .pb-1 { border-bottom-color: #444444 !important; }
#monthly-seats-list .font-medium { color: #ffffff; }
#monthly-seats-list .text-blue-600 { color: #8bc0ef !important; }

/* Seat Legend */
.seat-map-container .flex.justify-center.gap-4 { color: #aaaaaa; } 
i.seat-legend-available { color: #aaaaaa; } 
i.seat-legend-selected { color: #4a90e2; } 
i.seat-legend-unavailable { color: #666666; } 


/* Overrides just in case*/

/* Ensure Pikaday isn't hidden by other high z-index elements */
.pika-single { z-index: 150; }

/* Final overrides if tailwind is stubborn */
.bg-white { background-color: #333333 !important; }