/* assets/style.css - Studio Dark Master */

/* 1. BASE ENVIRONMENT */
body {
    background-color: #121212 !important; /* Deep charcoal root */
    color: #E0E0E0 !important;
    font-family: -apple-system, "SF Pro Display", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. STUDIO DARK NAVBAR */
/* assets/style.css */
/* Remove default padding from the outer container to hit the screen edges */
.navbar-studio {
    background: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid #2A2A2A;
    padding: 0.8rem 0 !important; /* Slimmer height */
}

/* Ensure brand and links have margin from the screen edges */
.navbar-brand {
    padding-left: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3em !important;
    color: #FFFFFF !important;
}

.nav-link-studio {
    padding-right: 2rem !important; /* Spacing for the right-most link */
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FFFFFF !important;
    opacity: 0.6;
}

.nav-link-studio:hover, .nav-link-studio.active {
    opacity: 1;
}

/* RESPONSIVE NAVBAR STYLES */
@media (max-width: 991.98px) {
    /* DO NOT manually hide .navbar-collapse here! 
      Bootstrap automatically handles hiding/showing and the smooth drop-down animation.
    */
    
    /* Adjust brand padding on mobile */
    .navbar-brand {
        padding-left: 1rem !important;
    }
    
    /* Adjust nav links for vertical stacking on mobile */
    .nav-link-studio {
        padding: 0.8rem 1rem !important; /* Added vertical padding so stacked links aren't squished */
        border-bottom: 1px solid #2A2A2A; /* Optional: adds a nice dark separator line between links */
    }

    /* Remove the bottom border from the last link so it looks clean */
    .navbar-nav .nav-link-studio:last-child {
        border-bottom: none;
    }
    
    /* Style the hamburger button */
    .navbar-toggler {
        border: none !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Your custom white-line SVG (Looks great!) */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* 3. CARDS & STUDIO TABLES */
.card, .table, .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1A1A1A !important; /* Slightly lighter depth */
    color: #E0E0E0 !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 0px !important; /* Sharp "Studio" corners */
}

.card:hover {
    border-color: #FFFFFF !important; /* White highlight on hover */
}

.table thead th {
    background-color: #121212 !important;
    border-bottom: 1px solid #FFFFFF !important; /* Signature white hairline */
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 4. HAIRLINE SEPARATOR & TYPOGRAPHY */
.hairline-separator {
    border-left: 1px solid #FFFFFF !important; /* Sharp vertical anchor */
    padding-left: 40px;
}

h1 {
    font-weight: 200;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;
}

.movie-title-minimal {
    font-weight: 700;
    font-size: 1.1rem;
    color: #FFFFFF !important;
}

/* 5. PLOTLY TRANSPARENCY OVERRIDES */
.js-plotly-plot .plotly .main-svg, 
.bg-white, 
.card-body {
    background: transparent !important; /* Eliminates "white box" around charts */
}

/* 6. BUTTONS & INPUTS */
.btn-primary {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 0px !important;
    font-weight: 700;
    padding: 12px 30px !important;
    border: none !important;
}

.form-control {
    background-color: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    color: #FFFFFF !important;
    border-radius: 0px !important;
}

.form-control::placeholder {
    color: #CCCCCC !important; /* Light gray for placeholder text */
}

/* 7. ACCORDION STYLING */
.accordion {
    --bs-accordion-bg: #1A1A1A !important;
    --bs-accordion-border-color: #2A2A2A !important;
}

.accordion-button {
    background-color: #2A2A2A !important;
    color: #FFFFFF !important;
    border: 1px solid #3A3A3A !important;
}

.accordion-button:not(.collapsed) {
    background-color: #3A3A3A !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 -1px 0 #3A3A3A !important;
}

.accordion-button:hover {
    background-color: #353535 !important;
    color: #FFFFFF !important;
}

.accordion-body {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border-top: 1px solid #2A2A2A !important;
}

/* 8. LIST GROUP STYLING */
.list-group-item {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #2A2A2A !important;
}

.list-group-item span {
    color: #FFFFFF !important;
}

.form-control::placeholder {
    color: #CCCCCC !important; /* Light gray for placeholder text */
}


/* 1. The Container */
.poster-container-fixed {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: #1A1A1A;
    overflow: hidden;
    border: 1px solid #2A2A2A !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease;
    cursor: pointer;
}

.poster-container-fixed:hover {
    transform: scale(1.08);
    border-color: #FFFFFF !important;
    z-index: 10;
}

/* 2. The Image Blur */
.poster-img-fixed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.poster-container-fixed:hover .poster-img-fixed {
    filter: blur(12px); /* Increased blur for better text contrast */
    opacity: 0.3;      /* Darker background for the white text */
}

/* 3. The Title Container - ENSURE THIS IS VISIBLE ON HOVER */
.poster-title-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;      /* Vertically center */
    justify-content: center;   /* Horizontally center */
    padding: 20px;
    text-align: center;
    opacity: 0;               /* Hidden by default */
    transition: opacity 0.4s ease;
    pointer-events: none;     /* Critical: let hover pass through to container */
    z-index: 5;
}

/* This is the trigger that makes the title show up! */
.poster-container-fixed:hover .poster-title-container {
    opacity: 1 !important;
}

.poster-title-text {
    color: #FFFFFF !important;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 4px 15px rgba(0,0,0,1); /* Heavy shadow to pop off the blur */
}

/* assets/style.css - Loading State */

/* Makes the loading spinner container dark so it doesn't flash white */
.dash-loading-callback {
    background-color: rgba(18, 18, 18, 0.5) !important;
    backdrop-filter: blur(4px);
}

/* Ensure the chart area has a minimum height so the page doesn't jump */
#hourly-habit-chart {
    min-height: 450px;
}

#recent-watches-table {
    min-height: 200px;
}