/* =========================================================================
   Google Material Symbols Outlined — direct @font-face.
   URL from fonts.googleapis.com response for opsz=20,wght=300.
   ========================================================================= */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v321/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDDxHOem.ttf) format('truetype');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: text-bottom;
    margin-right: 0.35rem;
    opacity: 0.7;
}

/* =========================================================================
   Luxury Lakehouse — Custom CSS (on top of Taipy Stylekit)

   Strategy: Taipy Stylekit handles the base theme via gui.run(stylekit={...}).
   This file only adds what the Stylekit doesn't provide.

   Taipy built-in classes used in templates:
   - sidebar          → sticky sidebar with --color-paper bg
   - text-no-transform → removes MUI button uppercase
   - align-columns-center → vertical center alignment in layout
   ========================================================================= */

/* ── 1. Sidebar: padding, border, nav links ───────────────────────────── */

.sidebar {
    padding: 0.75rem 1rem 1.5rem !important;
    border-top: 3px solid var(--color-primary) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Nav group headers (Match Analysis, Player Analysis, Advanced) */
.ll-nav-header {
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

.ll-nav-header:first-child {
    margin-top: 0 !important;
}

.ll-nav-header strong {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05rem;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Nav links */
.sidebar a {
    display: block !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.875rem !important;
    padding: 0.125rem 0 !important;
    transition: all 0.2s ease !important;
}

.sidebar a:hover {
    color: #f59e0b !important;
}

.sidebar a:hover .material-symbols-outlined {
    opacity: 1;
}

/* Tighten paragraph spacing for nav items */
.sidebar p {
    margin: 0 !important;
    line-height: 1.4;
}

/* Sidebar h3 (Filters, Tracking Filters) */
.sidebar h3 {
    color: var(--color-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0 0.4rem 0;
    font-weight: 700;
}

/* ── 2. Title row + brand ─────────────────────────────────────────────── */

.ll-title-row {
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand title — pierce MUI wrappers (gradient matches Streamlit) */
.ll-brand,
.ll-brand * {
    background: linear-gradient(90deg, #f59e0b 0%, transparent 85%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    display: inline-block !important; /* Required for clip to work */
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Brand icon — match the h1 visual size */
.ll-brand .material-symbols-outlined {
    font-size: 2.5rem !important;
    vertical-align: middle !important;
    margin-right: 0.15rem !important;
    opacity: 1 !important;
}

/* Header buttons (Glossary, Getting Started) — outline amber */
.ll-header-btn.taipy-button {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    border-radius: 4px !important;
    padding: 2px 10px !important;
    font-size: 0.8rem !important;
    box-shadow: none !important;
}

.ll-header-btn.taipy-button:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

/* Add Material Symbols icons to header buttons via Unicode code points */
/* help = \e887, school = \e80c */
.ll-btn-glossary.taipy-button::before {
    content: '\e887';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 0.95rem;
    margin-right: 0.25rem;
    display: inline;
}

.ll-btn-started.taipy-button::before {
    content: '\e80c';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 0.95rem;
    margin-right: 0.25rem;
    display: inline;
}

/* Ensure buttons lay out icon + text horizontally */
.ll-header-btn.taipy-button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* ── 3. Metric stack — aggressively strip MUI margins ─────────────────── */

.ll-metric {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    margin-bottom: 1.5rem !important;
}

/* Target all hidden MUI text wrappers */
.ll-metric > div,
.ll-metric > span,
.ll-metric p,
.ll-metric h1, .ll-metric h2, .ll-metric h3,
.ll-metric .taipy-text,
.ll-metric .MuiTypography-root {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    background: transparent !important;
}

/* Specific styling for the Label (First child text) */
.ll-metric .taipy-text:first-child,
.ll-metric .MuiTypography-root:first-child {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: none !important;
}

/* Specific styling for the Value (The header) */
.ll-metric h3,
.ll-metric h3 *,
.ll-metric .taipy-text:nth-child(2) {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* overrides brand gradient if it leaks */
}

/* Metric delta text */
.ll-metric-delta,
.ll-metric-delta span {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic;
}

/* Inverse delta — for metrics where lower is better (e.g. Brier Score).
   Same neutral color; direction arrows in the text indicate improvement. */
.ll-metric-delta-inverse,
.ll-metric-delta-inverse span {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic;
}

/* Help icon — Material Symbols "info" icon with native tooltip */
.ll-help {
    cursor: help;
    opacity: 0.35;
    font-size: 0.95rem !important;
    margin-left: 0.3rem;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.ll-help:hover {
    opacity: 0.75;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

/* ── 4. Footer ────────────────────────────────────────────────────────── */

.ll-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
    margin-top: 2rem;
    opacity: 0.5;
    font-size: 0.85rem;
}


.ll-footer a {
    color: var(--color-primary) !important;
}

/* ── 4b. Empty-state boxes (info vs warning) ─────────────────────────── */

.ll-info-box {
    background: rgba(30, 90, 140, 0.2);
    border: 1px solid rgba(60, 130, 190, 0.4);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #7db8d8;
    margin: 0.5rem 0;
}

.ll-warning-box {
    background: rgba(140, 100, 30, 0.2);
    border: 1px solid rgba(190, 140, 50, 0.4);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #d4a84c;
    margin: 0.5rem 0;
}

/* ── 5. Inline dropdown panels (Glossary, Getting Started) ───────────── */

.ll-dropdown {
    background: var(--color-paper, #1a1a2e) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
    margin-left: auto !important;  /* right-align */
}

.ll-dropdown strong {
    color: var(--color-primary) !important;
}

.ll-dropdown p,
.ll-dropdown .md-para {
    margin-bottom: 0.6rem !important;
    line-height: 1.6 !important;
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.ll-dropdown ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.ll-dropdown ol li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── 6. Page title icons ─────────────────────────────────────────────── */

/* Page heading icons — match h2 size and color */
h2 .material-symbols-outlined {
    font-size: inherit !important;
    vertical-align: middle !important;
    margin-right: 0.3rem !important;
    opacity: 0.9;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ── Sidebar interactive controls — neutral color, consistent with dropdowns ── */
/* Single set of rules for ALL accent-colored controls: sliders, toggles, etc. */

.sidebar .MuiSlider-root,
.sidebar .MuiSlider-thumb,
.sidebar .MuiSlider-track {
    color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar .MuiSlider-thumb {
    width: 14px !important;
    height: 14px !important;
}

.sidebar .MuiSlider-rail {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Toggle switches — neutral color */
.sidebar .MuiSwitch-switchBase.Mui-checked {
    color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.sidebar .MuiSwitch-track {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Reusable filter box — matches MUI outlined input style for toggles/sliders.
   Margin is zero here; spacing is handled by padding on the parent taipy-part
   wrapper to avoid CSS margin pass-through collapsing (see below). */
.ll-filter-box {
    border: 1px solid rgba(255, 255, 255, 0.23) !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    position: relative !important;
    height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Sidebar section — flex column with uniform gap.
   ALL spacing is controlled here. Children have zero margin.
   Hidden widgets (render=false → display:none) are skipped by gap. */
.ll-sidebar-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 0.5rem !important;
}

/* Zero out ALL child margins inside section — gap is the only spacer */
.ll-sidebar-section > .taipy-part {
    margin: 0 !important;
}

/* Section header needs no extra spacing (gap handles it) */
.ll-section-header {
    margin: 0 !important;
}

/* Filter-box wrappers — flex for internal layout, zero margin */
.ll-sidebar-section .taipy-part:has(> .ll-filter-box) {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* MUI selector wrappers inside section — zero margin override */
.ll-sidebar-section .taipy-selector {
    margin: 0 !important;
}

/* Help icon positioned to the right of the widget without affecting width.
   The outer taipy-part wrapper (the <|part|render={...}|> that wraps each
   widget) becomes position:relative so the icon can sit outside the widget's
   flow at vertical center. Works for dropdowns (single-line) and sliders
   (multi-line with label + slider + range) equally.
   :has() requires Chrome 105+, Firefox 121+, Safari 15.4+ (2022+). */
.ll-sidebar-section > .taipy-part:has(.ll-help) {
    position: relative !important;
}

.ll-sidebar-section > .taipy-part > .md-para > .ll-help {
    position: absolute !important;
    right: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

.ll-sidebar-section .taipy-selector .MuiFormControl-root {
    margin: 0 !important;
}

.ll-filter-box:hover {
    border-color: rgb(255, 255, 255) !important;
}

.ll-filter-label {
    position: absolute !important;
    top: -8px !important;
    left: 10px !important;
    background: var(--color-paper, #1a1a2e) !important;
    padding: 0 5px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    border: none !important;
}

/* Toggle box — "OFF [switch] ON" via CSS pseudo-elements on the MUI switch.
   No Taipy markdown needed — pure CSS, consistent everywhere. */
.ll-toggle-box .MuiFormControlLabel-root {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

.ll-toggle-box .MuiFormControlLabel-root::before {
    content: 'OFF';
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 0.25rem;
}

.ll-toggle-box .MuiFormControlLabel-root::after {
    content: 'ON';
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 0.25rem;
}

/* Controls inside filter boxes — compact layout */
.ll-filter-box .taipy-slider,
.ll-filter-box .taipy-toggle {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

.ll-filter-box .MuiFormControlLabel-root {
    margin: 0 !important;
    height: auto !important;
}

.ll-filter-box .MuiSwitch-root {
    margin-right: 4px !important;
}

/* Slider filter-box — same 48px height as all other widgets.
   Column layout: slider on line 1, range labels on line 2.
   Both must fit within 48px. overflow: hidden clips any excess. */
.ll-filter-box:has(.taipy-slider) {
    height: 48px !important;
    padding: 6px 12px 2px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    overflow: visible !important;
}

/* md-para wrapping the slider — constrain height so range labels fit */
.ll-filter-box:has(.taipy-slider) > .md-para {
    width: 100% !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    max-height: 28px !important;
}

/* Slider track — full width, centered between label text and range labels */
.ll-filter-box .MuiSlider-root {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Position the slider rail+track vertically centered in its md-para container */
.ll-filter-box:has(.taipy-slider) > .md-para {
    display: flex !important;
    align-items: center !important;
}

/* Smaller thumb for sidebar sliders */
.ll-filter-box .MuiSlider-thumb {
    width: 14px !important;
    height: 14px !important;
}

/* Hide default MUI slider tooltip — raw numeric values are not user-friendly.
   Time sliders show mm:ss via a Taipy text binding in the filter box label. */
.ll-filter-box .MuiSlider-valueLabel {
    display: none !important;
}

/* Slider end labels (min/max) — flush left/right, same margin as slider.
   Static labels use <span> inside .ll-slider-range.
   Dynamic labels use Taipy <|text|> with .ll-range-start / .ll-range-end. */
.ll-slider-range {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Dynamic range labels (Taipy text elements inside a part).
   Each text is in its own md-para. Flex row spreads them apart. */
.ll-slider-range.taipy-part {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ll-slider-range.taipy-part > .md-para {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.ll-range-start,
.ll-range-start *,
.ll-range-end,
.ll-range-end * {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 7. Page header (title + reference, constrained to diagram width) ─ */

.ll-page-header {
    max-width: 80% !important;  /* matches 4fr of 4fr+1fr layout */
    margin-bottom: 0.5rem !important;
}

/* Reference text (italic citation/methodology in page header) */

.ll-reference,
.ll-reference * {
    font-style: italic !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.ll-reference a {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

/* ── 7b. Section subtitle (consistent size across all pages) ──────────── */

.ll-subtitle {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 1rem 0 0.5rem 0 !important;
}

/* ── 7c. Sub-view 4fr/1fr grid (workaround: Taipy <|layout|> loses columns
   inside <|part|render=...|>; use CSS grid on a part instead) ────────── */

.ll-grid-3-1 {
    display: grid !important;
    grid-template-columns: 4fr 1fr !important;
    gap: 1rem !important;
}

/* ── 7d. Table inside CSS grid fix — Taipy's paginated table sets container
   height to 0px inside CSS grid cells. Override to show content. ─────── */

.ll-grid-3-1 .MuiTableContainer-root {
    height: auto !important;
    max-height: 600px !important;
}

/* ── 7e. Content row — CSS grid for multi-block horizontal layouts ───── */

.ll-content-row {
    display: grid !important;
    gap: 1rem !important;
    width: 100% !important;
}
.ll-content-cols-2 { grid-template-columns: 1fr 1fr !important; }

/* Fix Taipy table zero-height bug inside CSS grid cells and expandables */
.ll-content-row .MuiTableContainer-root,
.MuiAccordionDetails-root .MuiTableContainer-root {
    height: auto !important;
    max-height: 600px !important;
}

/* ── 7f. Sticky metrics column — pins to viewport top while content scrolls.
   Scrolls naturally when metrics exceed viewport height (small screens). ── */

.ll-metrics-column {
    position: sticky;
    top: 4rem;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}

/* ── 8. General ───────────────────────────────────────────────────────── */

h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 1rem 0;
}

img {
    border-radius: 4px;
    max-width: 100%;
}

/* ===== Loading overlay ===== */

.ll-loading-overlay {
    position: fixed;
    top: 0;
    left: 300px;  /* sidebar width */
    right: 0;
    bottom: 0;
    background: rgba(14, 17, 23, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    pointer-events: all;
}

.ll-loading-spinner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #1a1a2e;
    padding: 1rem 2rem;
    border-radius: 8px;
    border: 1px solid #f59e0b;
    color: #f59e0b;
    font-size: 1.1rem;
    font-weight: 600;
}

@keyframes ll-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ll-spin {
    animation: ll-spin 1s linear infinite;
    font-size: 1.5rem;
}

/* Respect prefers-reduced-motion — show the icon statically (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .ll-spin {
        animation: none;
    }
}

/* ===== Table styling (rankings) ===== */

.taipy-table .MuiTableContainer-root {
    background: transparent !important;
}

.taipy-table .MuiTable-root {
    background: transparent !important;
}

.taipy-table .MuiTableHead-root th {
    background: #2a2010 !important;  /* opaque dark amber — no bleed-through on scroll */
    color: #f59e0b !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.taipy-table .MuiTableBody-root td {
    color: #e0e0e0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.taipy-table .MuiTableBody-root tr:hover {
    background: rgba(245, 158, 11, 0.08) !important;
}

.taipy-table .MuiTablePagination-root {
    color: #888 !important;
}

/* Hide default Taipy navbar (we use sidebar links) */
header[class*="taipy-navbar"],
nav[class*="taipy"],
.taipy-navbar {
    display: none !important;
}

/* Hide "Taipy inside" watermark */
.taipy-watermark {
    display: none !important;
}

/* ===== 9. Operations pages (AI/ML Workflows) ===== */

/* Stats bar — horizontal row of summary cards */
.ll-stats-bar {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    flex-wrap: wrap !important;
}

.ll-stat-card {
    flex: 1 1 200px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.ll-stat-card h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 0.25rem 0 !important;
}

.ll-stat-label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 !important;
}

.ll-stat-detail {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 0.25rem !important;
}

/* Override MUI default 16px on text elements inside stat details */
.ll-stat-detail .taipy-text {
    font-size: 0.8rem !important;
}

/* Stat detail with HTML content (content provider iframe) */
.ll-stat-detail-html {
    margin-top: 0 !important;
}

/* Stat detail iframe: fixed height matching tallest content (Workflows 3 lines).
   54px = 3 lines × 0.8rem × 1.4 line-height. Increase if more workflow types are added.
   Taipy sets inline height:100% — must use !important to override.
   Keep in sync with _STAT_DETAIL_STYLE font-size/line-height in state/workflows.py. */
.ll-stat-detail-html iframe[src*="taipy-user-content"] {
    width: 100% !important;
    height: 54px !important;
    min-height: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* The content provider wrapper div also gets a default min-height — kill it */
.ll-stat-detail-html > div {
    min-height: 0 !important;
}

/* Collapse wrapper divs to match iframe height exactly — no extra spacing */
.ll-stat-detail-html .md-para,
.ll-stat-detail-html .taipy-part {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Dashboard scroll wrapper — viewport-contained area with both scrollbars.
   Horizontal scrollbar stays pinned at the bottom of the viewport.
   The wrapper fills remaining viewport height below the page header.
   Content blocks propagate their natural width as min-width.

   245px breakdown: app header (~48px) + brand row (~48px) + page header
   with icon/title/description (~96px) + <hr> + padding (~53px) = ~245px.
   This keeps the scroll wrapper bottom edge at the viewport bottom. */
.ll-dashboard-scroll {
    overflow: auto !important;
    max-height: calc(100vh - 245px) !important;
}

/* Kill table-level scrollbars inside dashboard pages — the scroll wrapper
   is the ONLY scroll surface for horizontal overflow. */
.ll-dashboard-scroll .MuiTableContainer-root {
    overflow: visible !important;
    max-height: none !important;
}

/* DAG container — overflow visible so the iframe can extend to its natural
   width, which the scroll wrapper then makes scrollable.
   margin: auto centers the DAG when its natural width is narrower than
   the table (the widest sibling determines scroll container width). */
.ll-dag-container {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Type badges — pill-shaped colored labels */
.ll-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
}

.ll-badge-blue { background: rgba(88, 166, 255, 0.15) !important; color: #58a6ff !important; }
.ll-badge-purple { background: rgba(188, 140, 255, 0.15) !important; color: #bc8cff !important; }
.ll-badge-teal { background: rgba(63, 185, 160, 0.15) !important; color: #3fb9a0 !important; }
.ll-badge-amber { background: rgba(227, 179, 65, 0.15) !important; color: #e3b341 !important; }
.ll-badge-gray { background: rgba(110, 118, 129, 0.15) !important; color: #6e7681 !important; }
.ll-badge-green { background: rgba(63, 185, 80, 0.15) !important; color: #3fb950 !important; }
.ll-badge-red { background: rgba(248, 81, 73, 0.15) !important; color: #f85149 !important; }

/* Status dots (freshness indicators) */
.ll-status-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 0.4rem !important;
    vertical-align: middle !important;
}

.ll-dot-green { background: #3fb950 !important; }
.ll-dot-yellow { background: #d29922 !important; }
.ll-dot-red { background: #f85149 !important; }
.ll-dot-gray { background: #6e7681 !important; }

/* Runtime icons */
.ll-runtime {
    display: inline-block !important;
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    margin-right: 0.25rem !important;
}

/* Keep runtime hex in sync with ll-cell-rt-* and _stat_detail_html in state/workflows.py */
.ll-runtime-db { background: rgba(255, 99, 71, 0.15) !important; color: #ff6347 !important; }
.ll-runtime-hf { background: rgba(255, 213, 0, 0.15) !important; color: #ffd500 !important; }

/* --- Table cell styles (applied via Taipy cell_class_name[column] callbacks) ---
   Taipy applies the returned class to the <td> element.
   Selectors use `.taipy-table td.ll-cell-*` to beat the built-in
   `.taipy-table .MuiTableBody-root td { color: !important }` rule.
   Colors match DAG node borders exactly for visual consistency. */

/* Type column — colored text matching DAG node colors.
   Keep hex values in sync with _COLOR_HEX in state/workflows.py. */
.taipy-table td.ll-cell-type-train,
.taipy-table td.ll-cell-type-grid,
.taipy-table td.ll-cell-type-heuristic,
.taipy-table td.ll-cell-type-ingestion,
.taipy-table td.ll-cell-type-data-movement,
.taipy-table td.ll-cell-type-validation {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

.taipy-table td.ll-cell-type-train { color: #58a6ff !important; }
.taipy-table td.ll-cell-type-grid { color: #bc8cff !important; }
.taipy-table td.ll-cell-type-heuristic { color: #3fb9a0 !important; }
.taipy-table td.ll-cell-type-ingestion { color: #f0883e !important; }
.taipy-table td.ll-cell-type-data-movement { color: #f778ba !important; }
.taipy-table td.ll-cell-type-validation { color: #e3b341 !important; }

/* Type column shape markers — WCAG 1.4.1 secondary visual cue.
   Each type gets a distinct shape via ::before so color is supplementary.
   Shapes: circle (train), diamond (grid), triangle (heuristic),
   ring (ingestion), bar (data-movement), square (validation).
   Keep in sync with _TYPE_CELL_STYLES in state/workflows_stats.py. */
.taipy-table td.ll-cell-type-train::before,
.taipy-table td.ll-cell-type-grid::before,
.taipy-table td.ll-cell-type-heuristic::before,
.taipy-table td.ll-cell-type-ingestion::before,
.taipy-table td.ll-cell-type-data-movement::before,
.taipy-table td.ll-cell-type-validation::before {
    content: '' !important;
    display: inline-block !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

.taipy-table td.ll-cell-type-train::before {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

.taipy-table td.ll-cell-type-grid::before {
    width: 6px !important;
    height: 6px !important;
    transform: rotate(45deg) !important;
    background: currentColor !important;
}

.taipy-table td.ll-cell-type-heuristic::before {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 7px solid currentColor !important;
}

.taipy-table td.ll-cell-type-ingestion::before {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    border: 2px solid currentColor !important;
    background: transparent !important;
}

.taipy-table td.ll-cell-type-data-movement::before {
    width: 10px !important;
    height: 4px !important;
    border-radius: 1px !important;
    background: currentColor !important;
}

.taipy-table td.ll-cell-type-validation::before {
    width: 7px !important;
    height: 7px !important;
    border-radius: 1px !important;
    background: currentColor !important;
}

/* Runtime column — colored bold text matching mockup DB/HF icons */
.taipy-table td.ll-cell-rt-db,
.taipy-table td.ll-cell-rt-hf,
.taipy-table td.ll-cell-rt-both {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

.taipy-table td.ll-cell-rt-db { color: #ff6347 !important; }
.taipy-table td.ll-cell-rt-hf { color: #ffd500 !important; }

/* DB + HF: hide cell text, replace with individually colored labels */
.taipy-table td.ll-cell-rt-both div { color: transparent !important; font-size: 0 !important; }
.taipy-table td.ll-cell-rt-both::before {
    content: 'DB' !important;
    color: #ff6347 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-right: 0.5em !important;
}
.taipy-table td.ll-cell-rt-both::after {
    content: 'HF' !important;
    color: #ffd500 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Freshness column — colored dot (::before) + colored text */
.taipy-table td.ll-cell-fresh-ok,
.taipy-table td.ll-cell-fresh-warning,
.taipy-table td.ll-cell-fresh-stale {
    white-space: nowrap !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
}

.taipy-table td.ll-cell-fresh-ok::before,
.taipy-table td.ll-cell-fresh-warning::before,
.taipy-table td.ll-cell-fresh-stale::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

.taipy-table td.ll-cell-fresh-ok { color: #3fb950 !important; }
.taipy-table td.ll-cell-fresh-ok::before { background: #3fb950 !important; }

.taipy-table td.ll-cell-fresh-warning { color: #d29922 !important; }
.taipy-table td.ll-cell-fresh-warning::before { background: #d29922 !important; }

.taipy-table td.ll-cell-fresh-stale { color: #f85149 !important; }
.taipy-table td.ll-cell-fresh-stale::before { background: #f85149 !important; }

/* Status column — colored text with WCAG 1.4.1 shape markers.
   Shapes: checkmark (completed), circle-pulse (running), X (failed),
   dash (skipped), triangle-warn (stale). */
.taipy-table td.ll-cell-status-running,
.taipy-table td.ll-cell-status-completed,
.taipy-table td.ll-cell-status-failed,
.taipy-table td.ll-cell-status-skipped {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.taipy-table td.ll-cell-status-running::before,
.taipy-table td.ll-cell-status-completed::before,
.taipy-table td.ll-cell-status-failed::before,
.taipy-table td.ll-cell-status-skipped::before {
    display: inline-block !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

.taipy-table td.ll-cell-status-running {
    color: #58a6ff !important;
    animation: ll-pulse 2s ease-in-out infinite;
}
/* Filled circle for running */
.taipy-table td.ll-cell-status-running::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

.taipy-table td.ll-cell-status-completed { color: #3fb950 !important; }
/* Checkmark for completed */
.taipy-table td.ll-cell-status-completed::before { content: '\2713' !important; font-size: 0.7rem !important; }

.taipy-table td.ll-cell-status-failed { color: #f85149 !important; }
/* X mark for failed */
.taipy-table td.ll-cell-status-failed::before { content: '\2717' !important; font-size: 0.7rem !important; }

.taipy-table td.ll-cell-status-skipped { color: #8b949e !important; font-weight: 500 !important; }
/* Dash for skipped */
.taipy-table td.ll-cell-status-skipped::before { content: '\2014' !important; font-size: 0.7rem !important; }

@keyframes ll-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Detail panel */
.ll-detail-header {
    margin-bottom: 1.5rem !important;
}

.ll-back-link {
    font-size: 0.85rem !important;
    color: var(--color-primary) !important;
    cursor: pointer !important;
    margin-bottom: 0.5rem !important;
}

.ll-detail-meta {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 0.25rem !important;
}

/* Detail sections */
.ll-detail-section {
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ll-detail-section:last-child {
    border-bottom: none !important;
}

.ll-section-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 0.75rem !important;
}

/* Data flow — three-column layout */
.ll-data-flow {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 1rem !important;
    align-items: start !important;
}

.ll-data-flow-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    color: var(--color-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.ll-data-chip {
    display: inline-block !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    margin: 2px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.ll-data-chip a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Execution cards — side-by-side */
.ll-exec-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

.ll-exec-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.ll-exec-card h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.ll-exec-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.85rem !important;
    padding: 0.25rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ll-exec-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Cost cards */
.ll-cost-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

.ll-cost-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.ll-cost-big {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: monospace !important;
}

.ll-cost-source {
    display: inline-block !important;
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.ll-cost-actual { background: rgba(63, 185, 80, 0.15) !important; color: #3fb950 !important; }
.ll-cost-estimated { background: rgba(227, 179, 65, 0.15) !important; color: #e3b341 !important; }
.ll-cost-projected { background: rgba(110, 118, 129, 0.15) !important; color: #8b949e !important; }

/* Reference list */
.ll-ref-item {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ll-ref-role {
    display: inline-block !important;
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    background: rgba(188, 140, 255, 0.15) !important;
    color: #bc8cff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-right: 0.5rem !important;
}

/* Monitoring bars (inline progress indicators) */
.ll-mon-bar {
    height: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    width: 100px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0.5rem !important;
}

.ll-mon-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

/* Source code links */
.ll-source-link {
    font-family: monospace !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: block !important;
    padding: 0.2rem 0 !important;
}

/* Clickable table rows */
.ll-clickable-row {
    cursor: pointer !important;
}

/* Dashboard filter bar */
.ll-filter-bar {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    align-items: center !important;
}

/* Hidden element (for JS callback workarounds) */
.ll-hidden {
    display: none !important;
}

/* ── 10. Image lightbox — click any content image to expand ──────────── */

/* Cursor hint on content images */
.ll-content-row img {
    cursor: zoom-in;
}

/* Full-viewport overlay */
.ll-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
}

.ll-lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

/* Content provider iframes — expand to show full HTML content.
   Taipy renders <|part|content={var}|> via iframes that default to 154px.
   Override to fill container and show all content. */
.ll-detail-section iframe[src*="taipy-user-content"] {
    width: 100% !important;
    min-height: 300px !important;
    border: none !important;
}

/* DAG iframe: layoutstop handler computes zoom + height dynamically */
.ll-dag-container iframe[src*="taipy-user-content"] {
    width: 100% !important;
    border: none !important;
}

/* Generic HTML content iframes (ContentBlock kind="html").
   Auto-sized by RawHtml.AUTOSIZE_JS or content-specific JS.
   Initial min-height prevents layout flash before JS runs. */
.ll-html-content iframe[src*="taipy-user-content"] {
    width: 100% !important;
    min-height: 150px !important;
    border: none !important;
}

/* ── 11. Canonical scope line — per-dimension small-caps label + value ───
   Rendered by page_template._build_standard_page from PageConfig.scope_dims.
   Separators between dimensions come from a CSS pseudo-element on each
   .ll-scope-dim-label except the first — no explicit separator markup.
   Also reused by the lightbox figcaption (JS clones .ll-page-scope). */

.ll-page-scope {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.ll-scope-dim-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-right: 0.35em;
    font-weight: 600;
    font-style: normal;
}

/* Thin vertical divider before every dim-label except the first.
   Replaces the retired U+00B7 middle dot. */
.ll-page-scope .ll-scope-dim-label:not(:first-of-type)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: rgba(255, 255, 255, 0.45);
    margin: 0 0.75em 0 0.35em;
    vertical-align: -1px;
}

.ll-scope-value {
    font-style: italic;
}

/* Legacy .ll-sep — retained for any external reference; new code uses
   the pseudo-element above. */
.ll-sep {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: rgba(255, 255, 255, 0.45);
    margin: 0 0.75em;
    vertical-align: -1px;
}

/* ── 12. Lightbox accessibility upgrade ──────────────────────────────── */

.ll-lightbox-overlay {
    outline: none;
}

.ll-lightbox-overlay figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 90vw;
    max-height: 90vh;
}

.ll-lightbox-overlay figure img {
    max-width: 100%;
    max-height: calc(90vh - 4rem);
    border-radius: 8px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.ll-lightbox-caption {
    font-family: 'Source Sans Pro', -apple-system, sans-serif;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(14, 17, 23, 0.85);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    max-width: 90vw;
    text-align: center;
}

.ll-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    background: rgba(14, 17, 23, 0.85);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ll-lightbox-close:hover,
.ll-lightbox-close:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    outline: none;
}

.ll-content-row img:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── 13. Responsive layout — viewports narrower than 768px ─────────────
   Taipy's taipy-layout emits inline grid-template-columns styles (e.g. "300px 1fr"
   for the top-level sidebar+content layout, "4fr 1fr" for page content+metrics).
   Inline styles beat class selectors, so the overrides below use !important and
   target both .taipy-layout and our own .ll-grid-3-1 wrapper. */

@media (max-width: 768px) {
    /* Main app: stack sidebar over content */
    .taipy-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }

    /* Page content + metrics column: stack vertically */
    .ll-grid-3-1 {
        grid-template-columns: 1fr !important;
    }

    /* Two-column content rows fold to one column */
    .ll-content-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar — remove sticky positioning so it scrolls with content */
    .sidebar {
        position: static !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Metrics column loses sticky positioning on narrow viewports */
    .ll-metrics-column {
        position: static !important;
        max-height: none !important;
    }

    /* Dashboard pages: loosen the viewport-contained scroll */
    .ll-dashboard-scroll {
        max-height: none !important;
    }

    /* Page header max-width 80% becomes 100% */
    .ll-page-header {
        max-width: 100% !important;
    }
}