/* ============================================================
   Baltic Salmon IBM — "Lagoon Field Station" Theme
   Curonian Lagoon environmental riverine/lake aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Work+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- CSS Custom Properties --- */
:root {
    --lagoon-deep:      #0b1f2c;
    --lagoon-dark:      #132f3e;
    --lagoon-mid:       #1a3d50;
    --lagoon-surface:   #1f4d63;
    --lagoon-teal:      #2a7a7a;
    --lagoon-shallow:   #3d9b8f;
    --sediment:         #c4a87c;
    --sediment-light:   #e8d5b7;
    --sediment-pale:    #f5ede0;
    --reed-gold:        #b8963e;
    --reed-dark:        #8a6f2e;
    --riparian:         #3d6b4f;
    --riparian-light:   #5a9970;
    --salmon:           #d4826a;
    --salmon-bright:    #e8956e;
    --salmon-deep:      #b05a3f;
    --mist:             #e4e8e6;
    --mist-warm:        #f0ebe3;
    --water-glass:      rgba(26, 61, 80, 0.85);
    --card-bg:          rgba(19, 47, 62, 0.92);
    --card-border:      rgba(42, 122, 122, 0.3);
    --text-primary:     #e4e8e6;
    --text-secondary:   #9cb5b5;
    --text-accent:      #e8d5b7;
    --text-muted:       #6a8a8a;

    --font-display:     'Cormorant Garamond', Georgia, serif;
    --font-body:        'Work Sans', -apple-system, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-elevated:  0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Light Theme: Cool Aquatic --- */
[data-theme="light"] {
    --lagoon-deep:      #f8faf9;
    --lagoon-dark:      #f0f6f4;
    --lagoon-mid:       #e8f0ee;
    --lagoon-surface:   #dce8e4;
    --lagoon-teal:      #2a7a7a;
    --lagoon-shallow:   #2d8a7f;
    --sediment:         #8a7040;
    --sediment-light:   #5a4a32;
    --sediment-pale:    #f5ede0;
    --reed-gold:        #8a7020;
    --reed-dark:        #6a5520;
    --riparian:         #2d5a3f;
    --riparian-light:   #3d7a55;
    --salmon:           #c06a50;
    --salmon-bright:    #d4826a;
    --salmon-deep:      #b05a3f;
    --mist:             #1a3d50;
    --mist-warm:        #e8f0ee;
    --water-glass:      rgba(240, 246, 244, 0.9);
    --card-bg:          rgba(255, 255, 255, 0.95);
    --card-border:      rgba(42, 122, 122, 0.2);
    --text-primary:     #1a3d50;
    --text-secondary:   #4a7a7a;
    --text-accent:      #1a3d50;
    --text-muted:       #507070;

    --shadow-card:      0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-elevated:  0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Light theme: background, scrollbar, selection */
[data-theme="light"] body,
[data-theme="light"] html {
    background: var(--lagoon-deep);
}

[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 120% 80% at 20% 90%, rgba(42, 122, 122, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 80% 20%, rgba(61, 107, 79, 0.04) 0%, transparent 50%),
        linear-gradient(175deg, #f8faf9 0%, #f0f6f4 40%, #e8f0ee 70%, #f8faf9 100%);
}

[data-theme="light"] body::after {
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(42, 122, 122, 0.02) 60px,
            rgba(42, 122, 122, 0.02) 61px
        );
}

[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f6f4; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #2a7a7a; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #2d8a7f; }

[data-theme="light"] ::selection {
    background: rgba(42, 122, 122, 0.2);
    color: #1a3d50;
}

[data-theme="light"] .navbar,
[data-theme="light"] .navbar-default,
[data-theme="light"] .navbar-static-top,
[data-theme="light"] nav.navbar,
[data-theme="light"] header.navbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* --- Base & Background --- */
html, body {
    margin: 0;
    padding: 0;
    background: var(--lagoon-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 120% 80% at 20% 90%, rgba(42, 122, 122, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 80% 20%, rgba(61, 107, 79, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(26, 61, 80, 0.3) 0%, transparent 70%),
        linear-gradient(175deg, var(--lagoon-deep) 0%, #0e2a38 40%, #132f3e 70%, #0b1f2c 100%);
}

/* Subtle animated wave at bottom */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: -1;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(42, 122, 122, 0.03) 60px,
            rgba(42, 122, 122, 0.03) 61px
        );
    mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--lagoon-deep); }
::-webkit-scrollbar-thumb {
    background: var(--lagoon-teal);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--lagoon-shallow); }

/* --- Page Title / Navbar --- */
.navbar, .navbar-default, .navbar-static-top,
nav.navbar, header.navbar {
    background: linear-gradient(135deg, var(--lagoon-dark) 0%, var(--lagoon-mid) 100%) !important;
    border-bottom: 1px solid var(--card-border) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
    min-height: auto !important;
}

.navbar-brand, .navbar-default .navbar-brand,
h1.navbar-brand, .bslib-page-title,
header > span, nav > span {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: var(--sediment-light) !important;
    letter-spacing: 0.02em !important;
    padding: 12px 20px !important;
}

/* --- Navbar icon (salmon emoji, lifted from the old sidebar header) --- */
.navbar-icon {
    font-size: 1.4rem;
    margin-right: 8px;
    line-height: 1;
    /* Slight vertical nudge — the emoji glyph's baseline sits slightly
     * above the surrounding text otherwise. */
    transform: translateY(1px);
}

/* --- Navbar title text --- */
.navbar-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--sediment-light);
    font-size: 1.35rem;
}

.navbar-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Theme toggle button --- */
.theme-toggle {
    margin-left: auto;
    background: var(--lagoon-mid);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 20px;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    padding: 0;
    line-height: 1;
}

.theme-toggle:hover {
    background: var(--lagoon-teal);
    color: var(--text-primary);
}

/* --- Sidebar --- */
.bslib-sidebar-layout > .sidebar,
.bslib-sidebar-layout aside,
aside.sidebar {
    background: linear-gradient(180deg, var(--lagoon-dark) 0%, var(--lagoon-deep) 100%) !important;
    border-right: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    /* 8px top padding (was 16px) keeps the status strip and Landscape
     * accordion close to the top edge — there's no header text above
     * them now that 'Salmon IBM' moved to the navbar. */
    padding: 8px 14px !important;
    overflow-y: auto;
}

.bslib-sidebar-layout > .sidebar h4,
.bslib-sidebar-layout > .sidebar h5,
aside.sidebar h4, aside.sidebar h5 {
    font-family: var(--font-display) !important;
    color: var(--sediment-light) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 12px !important;
    margin-top: 4px !important;
}

.bslib-sidebar-layout > .sidebar h4,
aside.sidebar h4 {
    font-size: 1.2rem !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.bslib-sidebar-layout > .sidebar h5,
aside.sidebar h5 {
    font-size: 0.95rem !important;
    color: var(--lagoon-shallow) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}

.bslib-sidebar-layout > .sidebar hr,
aside.sidebar hr {
    border-color: var(--card-border) !important;
    margin: 14px 0 !important;
    opacity: 0.6;
}

/* Section icon decorators */
.sidebar-section-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: 0.7;
}

/* --- Accordion (parameter groups: Landscape / Bioenergetics / …) ---
 * Bootstrap's default accordion renders white-on-light, which jars
 * against the dark lagoon sidebar.  Override every layer that bslib
 * uses (bslib wraps Bootstrap's .accordion-* classes verbatim). */
aside.sidebar .accordion,
.bslib-sidebar-layout .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--card-border);
    --bs-accordion-border-radius: var(--radius-md);
    --bs-accordion-btn-color: var(--sediment-light);
    --bs-accordion-btn-bg: var(--lagoon-mid);
    --bs-accordion-btn-focus-border-color: var(--lagoon-teal);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.25);
    --bs-accordion-active-color: var(--sediment-light);
    --bs-accordion-active-bg: var(--lagoon-surface);
    background: transparent !important;
    border: none !important;
}

aside.sidebar .accordion-item,
.bslib-sidebar-layout .accordion-item {
    background: transparent !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 6px !important;
    overflow: hidden;
}

aside.sidebar .accordion-button,
.bslib-sidebar-layout .accordion-button {
    background: var(--lagoon-mid) !important;
    color: var(--sediment-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    border: none !important;
}

aside.sidebar .accordion-button:not(.collapsed),
.bslib-sidebar-layout .accordion-button:not(.collapsed) {
    background: var(--lagoon-surface) !important;
    color: var(--lagoon-shallow) !important;
    box-shadow: inset 0 -1px 0 var(--card-border) !important;
}

aside.sidebar .accordion-button:focus,
.bslib-sidebar-layout .accordion-button:focus {
    box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.25) !important;
    border-color: var(--lagoon-teal) !important;
    outline: none !important;
}

/* Bootstrap's default chevron is a hard-coded SVG with a near-black
 * fill, invisible against the dark header.  Replace it with a teal
 * version inline (data-URI) so it stays crisp at any zoom level. */
aside.sidebar .accordion-button::after,
.bslib-sidebar-layout .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233d9b8f'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 1 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

aside.sidebar .accordion-body,
.bslib-sidebar-layout .accordion-body {
    background: var(--lagoon-dark) !important;
    color: var(--text-primary) !important;
    padding: 10px 12px !important;
    border-top: 1px solid var(--card-border) !important;
}

/* Hint text under input groups */
aside.sidebar .param-hint,
.bslib-sidebar-layout .param-hint {
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 0.72rem !important;
    font-style: italic;
    margin: 4px 0 8px 0;
    line-height: 1.35;
}

/* --- Form Controls (sidebar inputs) --- */
.form-group > label, .control-label,
.shiny-input-container > label {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 0.78rem !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 3px !important;
    text-transform: none !important;
}

.form-control, input.form-control, select.form-control,
input[type="number"], input[type="text"], select {
    background: var(--lagoon-mid) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.82rem !important;
    border-radius: var(--radius-sm) !important;
    padding: 5px 8px !important;
    height: auto !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus, input.form-control:focus,
input[type="number"]:focus, select:focus {
    border-color: var(--lagoon-teal) !important;
    box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.25) !important;
    outline: none !important;
}

.shiny-input-container {
    margin-bottom: 8px !important;
}

/* --- Slider --- */
.irs--shiny .irs-bar {
    background: linear-gradient(90deg, var(--lagoon-teal), var(--lagoon-shallow)) !important;
    border: none !important;
}
.irs--shiny .irs-handle {
    background: var(--sediment) !important;
    border: 2px solid var(--lagoon-teal) !important;
    box-shadow: var(--shadow-card) !important;
    cursor: grab;
}
.irs--shiny .irs-line {
    background: var(--lagoon-mid) !important;
    border: 1px solid var(--card-border) !important;
}
.irs--shiny .irs-min, .irs--shiny .irs-max,
.irs--shiny .irs-single, .irs--shiny .irs-from, .irs--shiny .irs-to {
    background: var(--lagoon-surface) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
}
.irs--shiny .irs-grid-text {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
}

/* --- Buttons --- */
.btn {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.03em !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 16px !important;
    transition: all var(--transition) !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-run {
    background: linear-gradient(135deg, var(--riparian) 0%, var(--riparian-light) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(61, 107, 79, 0.4) !important;
}
.btn-run:hover {
    box-shadow: 0 4px 16px rgba(61, 107, 79, 0.5) !important;
    transform: translateY(-1px);
}

.btn-step {
    background: var(--lagoon-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--card-border) !important;
}
.btn-step:hover {
    background: var(--lagoon-teal) !important;
    border-color: var(--lagoon-teal) !important;
}

.btn-pause {
    background: transparent !important;
    color: var(--sediment) !important;
    border-color: var(--sediment) !important;
}
.btn-pause:hover {
    background: rgba(196, 168, 124, 0.1) !important;
    color: var(--sediment-light) !important;
}

.btn-reset {
    background: transparent !important;
    color: var(--salmon) !important;
    border-color: rgba(212, 130, 106, 0.4) !important;
}
.btn-reset:hover {
    background: rgba(212, 130, 106, 0.1) !important;
    border-color: var(--salmon) !important;
}

/* Override Bootstrap button classes */
.btn-primary {
    background: linear-gradient(135deg, var(--riparian) 0%, var(--riparian-light) 100%) !important;
    border-color: var(--riparian) !important;
    color: white !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--riparian-light) 0%, var(--riparian) 100%) !important;
    box-shadow: 0 4px 16px rgba(61, 107, 79, 0.5) !important;
}
.btn-warning {
    background: transparent !important;
    border-color: rgba(212, 130, 106, 0.4) !important;
    color: var(--salmon) !important;
}
.btn-warning:hover, .btn-warning:focus {
    background: rgba(212, 130, 106, 0.1) !important;
    border-color: var(--salmon) !important;
    color: var(--salmon-bright) !important;
}
.btn-default, .btn-secondary {
    background: var(--lagoon-surface) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--lagoon-teal) !important;
}

/* --- Tabs --- */
.nav-tabs, .nav-underline {
    border-bottom: 1px solid var(--card-border) !important;
    margin-bottom: 16px !important;
}
.nav-tabs .nav-link, .nav-underline .nav-link {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    border: none !important;
    padding: 10px 20px !important;
    transition: color var(--transition) !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: relative;
}
.nav-tabs .nav-link:hover, .nav-underline .nav-link:hover {
    color: var(--text-primary) !important;
}
.nav-tabs .nav-link.active, .nav-underline .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--sediment-light) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--lagoon-shallow) !important;
}

/* --- Main Content Area --- */
.bslib-sidebar-layout > main,
.bslib-sidebar-layout > .main,
.container-fluid, .tab-content {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.tab-pane {
    padding: 0 !important;
}

/* --- Cards & Panels --- */
.card, .well, .panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-primary) !important;
}

/* --- Sidebar status strip — single tight row above the accordion ---
 * Holds progress_text + status_text on one line with `gap` separating
 * them.  No wrap: at 290px sidebar width the two short labels fit
 * comfortably; if they ever don't, we'd rather see overflow than a
 * second line that pushes the accordion down. */
.sidebar-status-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--lagoon-shallow);
    padding: 2px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
    overflow-x: auto;
}

.sidebar-status-strip > * {
    /* Shiny output_text() wraps in a <div>; collapse it into the flex line. */
    display: inline;
}

/* --- Status & Progress Display --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-primary);
}

.status-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--riparian-light);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.progress-indicator {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-accent);
    letter-spacing: 0.05em;
}

/* --- Run controls layout --- */
.run-controls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.run-controls-bar .btn-group {
    display: flex;
    gap: 6px;
}

.run-controls-bar .spacer {
    flex: 1;
}

.run-controls-bar .speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
}

.run-controls-bar .speed-control label {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    white-space: nowrap;
    margin: 0 !important;
}

/* --- Chart containers --- */
.chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: var(--shadow-card);
    margin-bottom: 12px;
    overflow: hidden;
}

.chart-card-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sediment-light);
    padding: 10px 14px 2px;
    letter-spacing: 0.02em;
}

/* --- Plotly overrides for dark theme --- */
.js-plotly-plot .plotly .modebar {
    background: transparent !important;
}
.js-plotly-plot .plotly .modebar-btn {
    color: var(--text-muted) !important;
}
.js-plotly-plot .plotly .modebar-btn:hover {
    color: var(--text-primary) !important;
}
.js-plotly-plot .plotly .modebar-btn.active {
    color: var(--lagoon-shallow) !important;
}

/* --- Section separator with decorative line --- */
.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-body);
    font-weight: 500;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--card-border), transparent);
}

/* --- Bootstrap grid inside dark theme --- */
.row { margin-left: -6px !important; margin-right: -6px !important; }
.row > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }

/* --- Header bar custom --- */
.app-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--lagoon-dark) 0%, var(--lagoon-mid) 100%);
    border-bottom: 1px solid var(--card-border);
}

.app-header .logo-mark {
    font-size: 1.6rem;
    line-height: 1;
}

.app-header .title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sediment-light);
    letter-spacing: 0.02em;
}

.app-header .subtitle {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 300;
    letter-spacing: 0.04em;
}

/* --- Toggle sidebar button --- */
.bslib-sidebar-layout > .collapse-toggle,
button[aria-label="Toggle sidebar"] {
    color: var(--text-secondary) !important;
    background: var(--lagoon-mid) !important;
    border-color: var(--card-border) !important;
}

/* --- Shiny output text --- */
#status_text, #progress_text {
    font-family: var(--font-mono) !important;
    font-size: 0.82rem !important;
    color: var(--text-accent) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .run-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .run-controls-bar .btn-group {
        justify-content: stretch;
    }
    .run-controls-bar .btn {
        flex: 1;
    }
}

/* --- Selection color --- */
::selection {
    background: rgba(42, 122, 122, 0.4);
    color: var(--text-primary);
}

/* --- Sidebar resize handle --- */
.bslib-sidebar-layout > .sidebar-resize-handle,
[role="separator"] {
    background: var(--card-border) !important;
}

/* --- Parameter hint annotations --- */
.param-hint {
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
    font-style: italic;
    margin: -2px 0 8px 0;
    padding: 5px 8px;
    border-left: 2px solid var(--lagoon-teal);
    background: rgba(42, 122, 122, 0.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Science / Reference tab --- */
.science-content {
    padding: 8px 4px;
}

.ref-header {
    margin-bottom: 20px;
}

.ref-intro {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 800px;
}

.ref-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition);
}

.ref-card:hover {
    border-color: rgba(42, 122, 122, 0.5);
}

.ref-title {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--sediment-light) !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.ref-body {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.ref-sources {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--card-border);
    padding-top: 8px;
}

.ref-sources li {
    font-size: 0.72rem;
    margin-bottom: 3px;
}

.ref-sources a {
    color: var(--lagoon-shallow);
    text-decoration: none;
    font-family: var(--font-body);
    transition: color var(--transition);
}

.ref-sources a:hover {
    color: var(--sediment-light);
    text-decoration: underline;
}

/* --- Model info badges (for Science tab) --- */
.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    background: var(--water-glass);
    margin-right: 6px;
    margin-bottom: 6px;
}

/* ── Streaming Charts Panel ──────────────────────────────────────────── */
.charts-panel {
  width: 100%;
  background: var(--card-bg, #141e2b);
  border-top: 1px solid var(--border-color, #2a3a4a);
}

.charts-panel-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background: var(--card-bg, #1a2633);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-color, #2a3a4a);
}
.charts-panel-handle span {
  color: var(--accent, #4ecdc4);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
}
.charts-panel-handle:hover {
  background: var(--hover-bg, #1f2f3f);
}

.charts-panel-body {
  display: flex;
  gap: 2px;
  padding: 2px;
  height: 150px;
}

.chart-cell {
  flex: 1;
  background: var(--card-bg, #141e2b);
  border-radius: 4px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chart-cell-title {
  font-size: 10px;
  color: var(--accent, #4ecdc4);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.chart-cell-plot {
  flex: 1;
  min-height: 0;
}

/* --- Map legend overlay --- */
.map-legend {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--water-glass);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--font-body);
    color: var(--text-primary);
    z-index: 10;
    pointer-events: none;
    border: 1px solid var(--card-border);
}
.map-legend-title {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.map-legend-bar {
    width: 120px;
    height: 10px;
    border-radius: 3px;
}
.map-legend-range {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
}
.map-legend-behaviors {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.map-legend-beh-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: var(--text-muted);
}
.map-legend-beh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* --- Viewer metadata panel --- */
.viewer-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.viewer-meta-title {
    color: var(--sediment-light);
}

.viewer-meta-label {
    color: var(--text-muted);
}

.viewer-meta-hr {
    border-color: var(--card-border);
}

/* --- Viewer progress overlay --- */
.viewer-progress-box {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 80%;
    padding: 10px 14px;
    background: rgba(11, 31, 44, 0.92);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 10;
    animation: viewer-progress-fade-in 160ms ease-out;
}

.viewer-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.viewer-progress-stage {
    color: var(--text-primary);
}

.viewer-progress-pct {
    color: var(--sediment-light);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.viewer-progress-bar {
    height: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.viewer-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--sediment-light, #e8d5b7) 0%,
        #3d9b8f 100%);
    border-radius: 3px;
    transition: width 220ms ease-out;
}

.viewer-progress-error {
    border-color: #d4826a;
    background: rgba(60, 18, 10, 0.92);
}

.viewer-progress-error .viewer-progress-stage {
    color: #ffd6c8;
}

@keyframes viewer-progress-fade-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Live stats bar */
.live-stats-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--card-bg);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-primary);
    margin-top: 8px;
    min-height: 28px;
}

/* Before the simulation runs, the live_stats() callback returns an
 * empty <div class="live-stats-bar"></div>.  Without this rule the
 * empty bar still occupies min-height + padding + margin (~50 px) and
 * pushes the accordion down. */
.live-stats-bar:empty,
.shiny-html-output:has(> .live-stats-bar:empty) {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.trail-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
}
.field-selector {
    display: flex;
    align-items: center;
}
.field-selector select {
    font-size: 0.78rem;
    padding: 2px 6px;
    height: 28px;
}

.stat-sep { opacity: 0.3; }
.stat-alive { color: var(--lagoon-shallow); font-weight: 600; }
.stat-behaviors { letter-spacing: 0.5px; }

/* Legend sections */
.map-legend-section {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Sidebar run controls (vertical layout) ── */
.sidebar-run-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.sidebar-btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.sidebar-btn-group .btn {
    flex: 1;
    min-width: 55px;
    padding: 4px 8px;
    font-size: 0.78rem;
}
.sidebar-speed {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-speed label {
    font-size: 0.78rem;
    white-space: nowrap;
    margin: 0;
}

/* ── Suppress Shiny spinners on status/progress outputs ── */
#progress_text.recalculating,
#status_text.recalculating,
#live_stats.recalculating {
    opacity: 1 !important;
}
#progress_text > .shiny-spinner-placeholder,
#status_text > .shiny-spinner-placeholder,
#live_stats > .shiny-spinner-placeholder {
    display: none !important;
}

/* ── Map loading overlay ── */
.map-loader-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(240, 240, 240, 0.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.map-loader-content {
    text-align: center;
    font-family: var(--font-mono, monospace);
    color: #1a3d50;
}
.map-loader-spinner {
    width: 40px; height: 40px;
    margin: 0 auto 12px;
    border: 3px solid #d0d8dc;
    border-top-color: #3a9090;
    border-radius: 50%;
    animation: map-spin 0.8s linear infinite;
}
@keyframes map-spin {
    to { transform: rotate(360deg); }
}
#map-loader-text {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}