@import 'colors.css';

/* ── Base ────────────────────────────────────────────────── */

html
{
    background-color: var(--bg-base);
}

body
{
    background-color: var(--bg-base);
    font-family: 'Inter', sans-serif;
    color: var(--navy);
    line-height: 1.75;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6
{
    font-weight: 700;
}

/* Dashboard view titles. Every active view renders its <h3> title inside
   #live-view (Calendar, Contacts, Manage Access, Shot List, Board, ...). Size
   them to match the sidebar's production-name title (dashboard.html, 1.15rem)
   so the page title reads at the same level as the sidebar title instead of
   Bootstrap's larger default h3. Weight (700) and navy color are already
   inherited, so only size is set here. The deferred "Not Yet Available" splash
   keeps its own (smaller) inline size since inline wins, and the offcanvas
   detail sheets carry no <h3>, so neither is affected. */
#live-view h3 { font-size: 1.15rem; }

/* ── Alignment ───────────────────────────────────────────── */

.center_object
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center_object_vertically
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.right_object
{
    display: flex;
    justify-content: flex-end;
}

.center_text
{
    text-align: center;
}

hr
{
    width: 95%;
    border-color: var(--border);
    opacity: 1;
}

/* ── Layout ──────────────────────────────────────────────── */

.paper
{
    margin-left: 15vw;
    margin-right: 15vw;
}

.form_paper
{
    padding: 28px;
}

.new_page
{
    padding: 28px 32px;
}

/* ── Navigation ──────────────────────────────────────────── */

.nav_background
{
    background-color: #1F2937;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav_logo
{
    height: 48px;
    margin-right: 8px;
}

.nav_link_light
{
    color: rgba(255, 255, 255, 0.85) !important;
}

.nav_link_light:hover
{
    color: white !important;
}

.nav_link_active
{
    color: white !important;
    font-weight: 600;
}

@media (min-width: 992px)
{
    .nav_background .navbar-nav
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 991px)
{
    .nav_background .navbar-collapse
    {
        padding: 16px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 8px;
    }

    .nav_background .nav-link
    {
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hero_text
    {
        width: 90% !important;
    }

    .hero h1
    {
        font-size: 2.2rem !important;
    }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero
{
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 60px 20px;
    position: relative;
}

.hero_content_left
{
    margin-left: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .hero { min-height: 88vh; }
    .hero_content_left { margin-left: 10%; }
}

.hero_overlay
{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(15, 20, 30, 0.9) 0%, rgba(15, 20, 30, 0.4) 60%, transparent 100%);
    z-index: 0;
}

.hero > *
{
    position: relative;
    z-index: 1;
}

.hero_text
{
    width: 58%;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
}

.hero_popup
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.85rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background-color: var(--gold-faint);
    color: var(--gold);
    letter-spacing: 0.03em;
}

.hero_logo
{
    height: 60px;
    margin-bottom: 10px;
}

/* ── Footer ──────────────────────────────────────────────── */

.footer_bg
{
    position: relative;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.footer_overlay
{
    position: absolute;
    inset: 0;
    background: rgba(26, 31, 44, 0.85);
    z-index: 0;
}

.footer_bg > *
{
    position: relative;
    z-index: 1;
}

.footer_logo
{
    height: 36px;
    margin-bottom: 16px;
}

footer
{
    padding: 24px;
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
}

/* ── Buttons ─────────────────────────────────────────────── */

.auth_button
{
    background-color: var(--gold);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 7px 18px;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.auth_button:hover
{
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.40);
    transform: translateY(-1px);
    background-color: var(--gold);
    color: white;
}

.button_hover_harsh
{
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.button_hover_harsh:hover
{
    background-color: var(--gold);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.30);
    transform: translateY(-1px);
}

.soft_button
{
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.soft_button:hover
{
    color: var(--navy);
    background-color: var(--bg-muted);
}

/* ── Sections ────────────────────────────────────────────── */

.new_section
{
    padding: 80px 10%;
}

.new_section_secondary
{
    padding: 60px 10%;
    background-color: var(--bg-warm);
}

.new_section_dark
{
    padding: 80px 10%;
    background-color: #1F2937;
    color: white;
}

/* ── Utilities ───────────────────────────────────────────── */

.disable_link
{
    pointer-events: none;
    opacity: 0.45;
}

.no_decoration
{
    text-decoration: none;
}

/* ── Cards ───────────────────────────────────────────────── */

.card_img_cover
{
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card
{
    --bs-card-bg:            var(--bg-card);
    --bs-card-border-color:  var(--border);
    --bs-card-border-radius: 12px;

    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.card-header
{
    background-color: #1F2937;
    border-bottom: none;
    padding: 12px 16px;
}

.card-body
{
    padding: 20px;
}

.card:hover
{
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.no_hover
{
    box-shadow: none;
}

.no_hover:hover
{
    box-shadow: none;
    transform: none;
    cursor: default;
}

/* ── Colors ──────────────────────────────────────────────── */

.primary_text                 { color: var(--navy); }
.accent_text                  { color: var(--gold); }
.gold_text                    { color: var(--accent-gold); }
.muted_text                   { color: var(--text-muted); }
.accent_background            { background-color: var(--gold); }
.primary_background           { background-color: var(--navy); }
.primary_secondary_background { background-color: var(--bg-warm); }

/* ── Auth Inputs ─────────────────────────────────────────── */

.auth_input
{
    width: 100%;
    padding: 14px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.auth_input::placeholder
{
    color: rgba(255, 255, 255, 0.4);
}

.auth_input:focus
{
    border-color: var(--gold);
}

/* ── Dashboard ───────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────
   Dashboard shell (.dash-layout / .dash-sidebar / .dash-main / …)

   Shared shell used by two surfaces today:
     1. /productions/<id>/*  (auth_pages/dashboard.html)
     2. /budgets/open after a file is uploaded (landing_pages/budget_view.html)

   Full design narrative: see DASHBOARD_SHELL_DESIGN.md at the repo root.

   ── Shape ──────────────────────────────────────────────────────────
   .dash-layout       100vh flex row, no page-level scroll. The browser
                      window IS the viewport; internal panes scroll on
                      their own.
   .dash-sidebar      260px fixed-width left rail (desktop). Vertical
                      flex column with a scrollable section list on top
                      and a 52px-tall pinned user bar at the bottom.
                      52px must match footer_compact.html height so the
                      dashboard and budget surfaces line up.
   .dash-main         flex:1 right pane, --bg-primary background.
   .dash-main-inner   The single scrollable region per page. All page
                      scroll lives here, never on body.
   .dash-main-content padding 38px 40px on desktop, 16px on mobile.
                      Hosts the h3 title + actions header and the
                      list / detail / table for the active view.

   ── Why this CSS is shared, not inlined ───────────────────────────
   Each consumer (dashboard.html, budget_view.html) composes the SAME
   shell. Inlining the rules in one template and not the other (the
   original bug) silently broke the second consumer's layout: the
   sidebar fell back to block flow and stacked above the main pane.
   Hoisting these rules to universal.css makes the shell a true
   primitive: any future page that needs a sidebar+main shell can drop
   in the same markup and inherit the responsive behaviour for free.

   ── Mobile (≤768px) ───────────────────────────────────────────────
   The sidebar becomes a slide-in drawer (translateX), the backdrop
   dims the page, and .dash-hamburger appears at the top of .dash-main
   as the open trigger. Each consumer wires its own openX() / closeX()
   JS pair (see openSidebar/closeSidebar in dashboard.html and the
   openBudgetSidebar/closeBudgetSidebar pair in budget_view.html).

   When extending: gate the .dash-sidebar-user display rule via the
   class itself, not via a new media query, so the bottom user bar
   hides on mobile drawers consistently across surfaces.
   ──────────────────────────────────────────────────────────────────── */
.dash-layout { display: flex; height: 100vh; overflow: hidden; }
.dash-sidebar { width: 260px; min-width: 260px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; overflow: hidden; }
.dash-main { flex: 1; background-color: var(--bg-primary); display: flex; flex-direction: column; overflow: hidden; }
.dash-main-inner { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.dash-main-content { padding: 38px 40px; flex: 1; display: flex; flex-direction: column; }
.dash-backdrop { display: none; }
.dash-hamburger { display: none; }

@media (max-width: 768px) {
    .dash-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px; min-width: 280px;
    }
    .dash-sidebar.open { transform: translateX(0); }
    .dash-backdrop {
        display: none; position: fixed; inset: 0; z-index: 1040;
        background: rgba(0,0,0,0.4);
    }
    .dash-backdrop.open { display: block; }
    .dash-hamburger {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg-primary);
        position: sticky; top: 0; z-index: 100;
    }
    .dash-hamburger button {
        background: none; border: none; padding: 4px; cursor: pointer;
        color: var(--text-primary); display: flex; align-items: center;
    }
    .dash-hamburger span {
        font-weight: 600; font-size: 0.92rem; color: var(--text-primary);
    }
    .dash-main-inner { padding: 0; }
    .dash-main-content { padding: 16px; }
    .dash-sidebar-user { display: none; }
}

.dash_card
{
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.dash_seg_active
{
    background-color: var(--gold) !important;
    color: white !important;
    border-color: var(--gold) !important;
}

.dash_seg
{
    background-color: transparent;
    color: var(--navy);
    border-color: var(--border) !important;
}

.dash_action
{
    color: var(--navy);
    border: 1px solid var(--border);
}

.dash_action:hover
{
    background-color: var(--bg-warm);
}

/* ── Sidebar ────────────────────────────────────────────── */

.sidebar-custom-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.sidebar-custom-icon svg { width: 16px; height: 16px; }
.sidebar-item:hover
{
    background-color: var(--bg-hover);
}
/* A <button> styled as a sidebar row (e.g. Settings) needs its default button
   chrome stripped so it reads like the anchor rows AND so the rule above can
   paint the hover background. Kept at this low specificity (one class + one
   element) on purpose: `.sidebar-item:hover` must win on hover, which it does.
   Don't move these back inline; an inline background would beat :hover. */
button.sidebar-item
{
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}
/* Vertical rhythm between sidebar sections. Single knob: adds a uniform gap
   between every adjacent section (on top of each section's own 4px top/bottom
   padding) so Production Details / Tools / Departments / Episodes / Scenes /
   Elements are evenly and comfortably separated. Scoped to #dashSidebar so the
   budget view's sidebar (#budgetSidebar, same .sidebar-section class) is left
   untouched. Adjacent-sibling (+) selector skips the first section, so it never
   adds space below the production-name + search cluster. */
#dashSidebar .sidebar-section + .sidebar-section { margin-top: 6px; }

/* ── Dark mode overrides for Bootstrap components ─────── */
@media (prefers-color-scheme: dark) {
    .form-control {
        background-color: var(--bg-input);
        border-color: var(--border);
        color: var(--text-primary);
    }
    .form-control:focus {
        background-color: var(--bg-input-focus);
        border-color: var(--gold);
        color: var(--text-primary);
    }
    /* Same class of bug as .dropdown-item:disabled below, inverted: Bootstrap's
       .form-control:disabled sets background-color: var(--bs-secondary-bg)
       (#e9ecef, a light gray) which is never overridden here, while this
       theme's own .form-control rule above still supplies --text-primary
       (near-white) for the text color — near-white text on a near-white
       background. Locked `<select disabled>` fields (e.g. the Type picker in
       Edit Contact Field / Edit Custom Property) were unreadable in dark mode. */
    .form-control:disabled {
        background-color: var(--bg-input);
        color: var(--text-muted);
    }
    .dropdown-menu {
        background-color: var(--bg-card);
        border-color: var(--border);
    }
    .dropdown-item {
        color: var(--text-secondary);
    }
    .dropdown-item:hover, .dropdown-item:focus {
        background-color: var(--bg-hover);
        color: var(--text-primary);
    }
    .dropdown-item.active {
        background-color: var(--gold);
        color: white;
    }
    /* Bootstrap's own .dropdown-item:disabled color (rgba(33,37,41,.5), a
       translucent near-black) assumes a light dropdown background. Against
       this theme's dark --bg-card it's effectively invisible — the "current
       tier" item in permission-change kebabs (e.g. production_access_list.html)
       renders as a blank gap instead of a dimmed "✓ Change to X". */
    .dropdown-item:disabled, .dropdown-item.disabled {
        color: var(--text-muted);
    }
    .dropdown-divider {
        border-color: var(--border-subtle);
    }
    /* Bootstrap's .list-group-item background/color (--bs-list-group-bg:
       white, --bs-list-group-color: near-black) is never overridden here.
       The Export Shot List modal's column-picker rows (export_shotlist_
       modal.html) sat in a white box; commit 747bd64 fixed the surrounding
       modal's label contrast by setting color on .modal-content, but that
       cascaded --text-primary (near-white) as the *inherited* text color
       into these rows while their own background stayed Bootstrap-white —
       still near-invisible, just inverted (white-on-white). */
    .list-group-item {
        background-color: var(--bg-primary);
        border-color: var(--border);
        color: var(--text-primary);
    }
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }
    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    .offcanvas {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
    .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--text-primary);
        --bs-table-border-color: var(--border);
        --bs-table-hover-bg: var(--bg-hover);
        --bs-table-hover-color: var(--text-primary);
    }
    .card {
        --bs-card-color: var(--text-primary);
    }
    .card-text {
        color: var(--text-secondary);
    }
    .muted_text {
        color: var(--text-muted) !important;
    }
    .new_section {
        background-color: var(--bg-primary);
    }
    .hero_popup {
        color: var(--text-secondary);
    }
}

/* ── Task status / priority badges ────────────────────────────────────
   One badge component shared by the dashboard task table (Jinja macro in
   partials/_badges.html), the task detail off-canvas, and the calendar
   date sheet. Colors come from the semantic vars in colors.css; labels
   come from domain_enums.py (server-rendered, or via window.DOMAIN_ENUMS
   in JS). Class suffixes are the Swift rawValues, so JS can build the
   class as `'enum-badge enum-badge-status-' + value`. Named .enum-badge
   (not .badge) to avoid clobbering Bootstrap's own .badge. The five
   declarations below match the previous inline span styles exactly. */
.enum-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.enum-badge-status-todo        { color: var(--status-todo-fg);       background: var(--status-todo-bg); }
.enum-badge-status-inProgress  { color: var(--status-inProgress-fg); background: var(--status-inProgress-bg); }
.enum-badge-status-done        { color: var(--status-done-fg);       background: var(--status-done-bg); }
.enum-badge-prio-low           { color: var(--prio-low-fg);          background: var(--prio-low-bg); }
.enum-badge-prio-medium        { color: var(--prio-medium-fg);       background: var(--prio-medium-bg); }
.enum-badge-prio-high          { color: var(--prio-high-fg);         background: var(--prio-high-bg); }

/* Calendar date-sheet status rail: the 4px solid-color bar left of a
   task title. Geometry here; color reuses the status -fg vars. */
.cal-status-bar {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
}
.cal-status-bar.enum-bar-status-todo        { background: var(--status-todo-fg); }
.cal-status-bar.enum-bar-status-inProgress  { background: var(--status-inProgress-fg); }
.cal-status-bar.enum-bar-status-done        { background: var(--status-done-fg); }

/* Completed-task title treatment, shared by the table + calendar rows. */
.task-title--done {
    text-decoration: line-through;
    color: var(--text-muted);
}