/* =============================================================================
   APP SHELL - the frame every page shares: layout (sidebars, panels, status
   bar), navbar, user menu, app-wide controls, signed-out message pages.
   Merged from ilayout.css, plotly.css (app-wide part) and styles.css, in
   their original load order, so the cascade is unchanged. See docs/THEMING.md
   "File naming".
   ============================================================================= */

/* =============================================================================
   Layout (was ilayout.css)
   ============================================================================= */

/* ============================================================================
   VSCode-Inspired Interactive Layout System
   ============================================================================
   
   This CSS file defines the styling for a resizable panel layout system with:
   - Left sidebar (flow mode - pushes content)
   - Right sidebar (overlay mode - floats above content)
   - Bottom panel (configurable mode - flow or overlay)
   - Main editor area (flexible, responds to panel sizing)
   
   The layout uses a combination of:
   - Flexbox for main layout structure
   - CSS positioning (relative, absolute, fixed) for different panel modes
   - CSS transitions for smooth expand/collapse animations
   - CSS custom properties for easy theming
   
   Companion JavaScript: assets/splitter.js (handles resizing and collapsing)
   ============================================================================ */

/* ============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */
:root {
    /* Resize handle appearance */
    --color-dragbar: var(--color-accent-strong);
    /* Normal state */
    --color-dragbar-hover: var(--color-accent-hover);
    /* Hover state */
    --scale-dragbar: 3;
    /* Hover expansion multiplier */


    /* Sidebar dimensions */
    --sidebar-width: 500px;
    /* Default width */
    --sidebar-max-width: 600px;
    /* Maximum width */
    --sidebar-min-width: 50px;
    /* Minimum width */
    /* The two icon columns (left: filters, layers, ...; right: info, charts,
       ...). Both are this wide, and each icon button is a square of this size,
       so the left and right columns always match. Change it here only. */
    --sidebar-tabs-width: 40px;
    /* Icon size inside those buttons. */
    --sidebar-tabs-icon-size: 16px;
    /* Space inside a side panel, around its contents. A sticky header in a
       panel cancels it to sit flush with the panel's top edge (the Study
       header, 40_module-benchmarking.css). */
    --sidebar-content-padding: 5px;
    /* Animation timing */
    --transition-fast: 120ms;
    /* Quick transitions */
    --transition-medium: 200ms;
    /* Standard transitions */

    /* Status bar */
    --statusbar-height: 22px;

    /* Shell heights. Every panel height comes from these, so nothing else
       assumes the navbar or status bar size (plans/app-header.md AH7).
       On touch screens and phones some of them change: see "Phones and touch
       screens" at the end of this file (44px navbar, no status bar). */
    --navbar-height: 30px;
    /* 100dvh where supported: on phones it leaves out the address bar. */
    --app-vh: 100vh;
    /* Between the navbar and the status bar. */
    --app-frame-height: calc(var(--app-vh) - var(--navbar-height) - var(--statusbar-height));
    /* The height a module's content gets: all of it (the module links live in
       the navbar). Its own name, so a module bar can come back without
       touching the modules. */
    --app-main-height: var(--app-frame-height);

}

@supports (height: 100dvh) {
    :root {
        --app-vh: 100dvh;
    }
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */
/* Reset default browser styles and set full-screen layout */
html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    /* Prevent scrollbars on body */
}

/* Main app container
   - display: flex = horizontal layout (row)
   - height: from the module tab row down to the status bar
   - Structure: left-sidebar | content-wrapper | right-sidebar
*/
.app-container {
    display: flex;
    flex-direction: row;
    height: var(--app-main-height);
    width: 100vw;
}

/* ============================================================================
   ACTIVITY BAR (Optional - for future use)
   ============================================================================
   
   Note: This is not currently used in the layout but provided for future expansion.
   In VSCode, the activity bar is the narrow leftmost bar with large icons.
   
   To use: Add an .activity-bar div as the first child of .app-container
   Example: File Explorer, Search, Source Control, Run & Debug, Extensions
   ============================================================================ */
.activity-bar {
    width: 48px;
    background: var(--color-bg-app);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 6px;
    box-shadow: inset -1px 0 0 var(--color-border-subtle);
}

.activity-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-fast) ease,
        color var(--transition-fast) ease;
}

.activity-icon:hover {
    background: var(--color-state-hover);
    color: var(--color-text-strong);
}

.activity-icon.active {
    background: var(--color-state-hover);
    color: var(--color-text-strong);
}

/* ============================================================================
   SIDEBAR & TAB CONTENT
   ============================================================================ */
/* Base sidebar styling
   - display: flex = enables tab bar + content panel layout
   - flex-direction: row = tabs on left, content on right (left sidebar)
                          tabs on right, content on left (right sidebar)
*/
.sidebar {
    display: flex;
    flex-direction: row;
}

/* -------- LEFT SIDEBAR -------- */
/* Base: the app container's height */
.sidebar--left {
    height: var(--app-main-height);
}

/* Flow mode: Normal document flow, pushes content-wrapper to the right */
.sidebar--left.sidebar--flow {
    position: relative;
}

/* Overlay mode: Fixed position, floats above content
   - z-index: 1001 = above right sidebar (1000) and bottom panel (999)
*/
.sidebar--left.sidebar--overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    box-shadow: 2px 0 8px var(--shadow-color);
}

/* -------- RIGHT SIDEBAR -------- */
/* Base: the app container's height */
.sidebar--right {
    height: var(--app-main-height);
}

/* Flow mode: Normal document flow, pushes content-wrapper to the left */
.sidebar--right.sidebar--flow {
    position: relative;
}

/* Overlay mode: Fixed position, floats above content
   - z-index: 1000 = above bottom panel (999) but below left sidebar (1001)
   - Tab bar (60px) is always visible on the right edge
*/
.sidebar--right.sidebar--overlay {
    position: fixed;
    top: var(--navbar-height); /* Below the navbar, over the module tab row */
    height: var(--app-frame-height);
    right: 0;
    z-index: 1000;
    box-shadow: -2px 0 8px var(--shadow-color);
}

/* -------- SIDEBAR VISUAL STYLING -------- */
/* Left sidebar: Semi-transparent backgrounds */
.sidebar--left > .vertical-tabs {
    background-color: color-mix(in srgb, var(--color-surface-raised) 95%, transparent);
    width: var(--sidebar-tabs-width);
}

.sidebar--left > .tab-content {
    background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
    padding: 0 !important;
}

/* Right sidebar: Semi-transparent backgrounds with glass effect
   - backdrop-filter: Creates blur effect for content behind (when supported)
*/
.sidebar--right > .vertical-tabs {
    background-color: color-mix(in srgb, var(--color-surface-raised) 95%, transparent);
}

.sidebar--right > .tab-content {
    background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
}

/* -------- RIGHT SIDEBAR LAYOUT -------- */
/* Special positioning: Tab bar on right, content panel on left */
.sidebar--right > .vertical-tabs {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: var(--sidebar-tabs-width);
}

.sidebar--right > .tab-content {
    position: absolute;
    right: var(--sidebar-tabs-width);
    /* Positioned just left of the right icon column */
    top: 0;
    height: 100%;
    width: 240px;
    box-sizing: border-box;
}

/* -------- OVERLAY MODE POINTER EVENTS -------- */
/* Allow clicks to pass through collapsed overlay sidebars
   This prevents blocking content when sidebar is collapsed
*/
.sidebar--overlay {
    pointer-events: none;
}

.sidebar--overlay>* {
    pointer-events: auto;
}

/* ============================================================================
   RESIZABLE PANEL SYSTEM (Unified for all panels)
   ============================================================================
   
   This system handles three types of panels:
   1. Left sidebar (collapsible, resizable from right edge)
   2. Right sidebar (collapsible, resizable from left edge)
   3. Bottom panel (always visible, resizable from top edge)
   
   JavaScript (splitter.js) handles the resize logic and state management.
   ============================================================================ */

/* -------- SIDEBAR TAB CONTENT -------- */
/* CRITICAL: Use direct child selector (>) to ONLY target the primary sidebar's main tab-content
   DO NOT match nested tab-content elements (e.g., accordion tabs or dbc.Tabs inside the sidebar)
   
   - display: none initially (becomes block when .ready is added)
   - overflow: hidden (prevents content overflow during collapse animation)
   - transition: smooth width animation on collapse/expand
*/
.sidebar--left > .tab-content,
.sidebar--right > .tab-content {
    box-sizing: border-box;
    /* overflow: hidden; */
    overflow: auto !important;
    /* No rubber-band at the ends of the scroll (macOS trackpads: pulling
       past the top dragged the whole panel down, its sticky header too, and
       showed an empty strip until released). The panel just stops. */
    overscroll-behavior: none;
    transition: width var(--transition-fast) ease,
        visibility 0s var(--transition-fast);
    padding: var(--sidebar-content-padding);
    display: none;
    width: var(--sidebar-width);
    min-width: 0;
    max-width: none;
}

/* -------- BOTTOM PANEL TAB CONTENT -------- */
/* Bottom panel is always visible (not collapsible like sidebars) */
.bottom-panel > .tab-content {
    box-sizing: border-box;
    overflow: auto;
    /* No padding: the table starts right under the tab row (its top border is
       the only line there) and runs edge to edge, so its sides meet the left
       panel's and the icon column's lines, and its bottom meets the status
       bar's line. */
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* -------- PANEL STATE CLASSES -------- */
/* Ready: Panel is initialized and can be shown
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.ready,
.sidebar--right > .tab-content.ready {
    display: block;
}

/* Collapsed: Panel is hidden but still in DOM (JS can measure it)
   IMPORTANT: Do NOT use display:none here - JS needs to read dimensions
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.collapsed,
.sidebar--right > .tab-content.collapsed {
    width: 0 !important;
    padding: 0 !important;
    visibility: hidden;
    opacity: 0;
    border: none;
}

/* Expanded: Panel is visible and interactive
   - Width/height is set dynamically by JavaScript
   - Preserves user's last resize preference
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.expanded,
.sidebar--right > .tab-content.expanded {
    visibility: visible;
    opacity: 1;
    /* padding: 20px; */
}

/* -------- RESIZE HANDLES -------- */
/* Visual indicators for resize edges (borders that highlight on hover)
   CRITICAL: Use direct child selector (>) to only affect the primary sidebar tab-content
*/
.sidebar--left > .tab-content.expanded {
    border-right: 2px solid transparent;
}

.sidebar--right > .tab-content.expanded {
    border-left: 2px solid transparent;
}

/* Hover effect: Show resize handle 
   CRITICAL: Use direct child selector (>) to only affect the primary sidebar tab-content
*/
.sidebar--left > .tab-content.expanded:hover {
    /* border-right-color: rgba(237, 27, 27, 0.5); */
    border-right-color: var(--color-border-strong);
}

.sidebar--right > .tab-content.expanded:hover {
    /* border-left-color: rgba(235, 19, 19, 0.5); */
    border-left-color: var(--color-border-strong);
}

/* VSCode-inspired layout styling
   Applied to sidebar elements for consistent theming
*/
.vscode-layout {
    display: flex;
    height: var(--app-main-height);
    background-color: var(--color-surface);
    color: var(--color-text-strong);
    font-family: var(--font-sans);
}

/* ============================================================================
   VERTICAL TABS (Sidebar Navigation)
   ============================================================================
   
   Tab bars for left and right sidebars:
   - --sidebar-tabs-width wide (both sides the same), always visible
   - Vertical stack of icon-only buttons
   - Clicking a tab toggles the content panel
   - Icons are added via CSS ::before pseudo-elements (see Tab Icons section)
   ============================================================================ */
.vertical-tabs {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-tabs-width);
    background-color: var(--color-bg-app);
    border-right: 1px solid var(--color-border);
    align-items: center;
    padding-top: 8px;
}

/* Each icon button: a square as wide as the column (--sidebar-tabs-width),
   icon centred. The <li> around each button (Bootstrap's .nav-item) is made
   full width too: left to itself it was only as wide as its contents (icon +
   Bootstrap's 16px side padding = 52px), so buttons were 2px wider than the
   50px column and the right column's icons sat off-centre.
   Icons are added via ::before pseudo-elements (see Tab Icons section below). */
.sidebar__tabs .nav-item {
    width: 100%;
}

.sidebar__tabs .nav-link {
    color: var(--color-text);
    font-size: var(--sidebar-tabs-icon-size); /* icon size, not text - theme-allow */
    height: var(--sidebar-tabs-width);
    width: 100%;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
    transition: background-color var(--transition-medium) ease,
        color var(--transition-medium) ease;
}

/* Hover state */
.sidebar__tabs .nav-link:hover {
    background-color: var(--color-state-pressed) !important;
    color: var(--color-text-strong) !important;
}

/* Active state (panel is expanded) */
.sidebar__tabs .nav-link.active {
    background-color: var(--color-state-pressed) !important;
    color: var(--color-accent-text) !important;
}

/* AI tab — warm amber active color instead of default cyan */
.sidebar__tabs .nav-link[data-rr-ui-event-key="tab-ai-assistant"].active,
.sidebar__tabs .nav-link[data-rb-event-key="tab-ai-assistant"].active {
    color: var(--color-accent-text) !important;
}
.sidebar__tabs .nav-link[data-rr-ui-event-key="tab-ai-assistant"]:hover,
.sidebar__tabs .nav-link[data-rb-event-key="tab-ai-assistant"]:hover {
    color: var(--color-accent-text) !important;
}

/* AI tab disabled state — when panel is floating, tab is fully inert */
.sidebar__tabs .nav-link.ai-tab-disabled {
    pointer-events: none !important;
    opacity: 0.25 !important;
}

/* Right sidebar: Mirror the border (left instead of right) */
.sidebar__tabs--right {
    border-right: none;
    border-left: 1px solid var(--color-border);
}

/* ============================================================================
   HORIZONTAL TABS (Bottom Panel - VSCode style)
   ============================================================================
   
   Tab bar for bottom panel:
   - Horizontal row of text labels (Output, Logs, Errors, etc.)
   - Similar to VSCode's panel tabs
   - Always visible (bottom panel doesn't collapse)
   - Active tab indicated by bottom border
   ============================================================================ */
.horizontal-tabs {
    display: flex;
    flex-direction: row;
    background-color: transparent;  /* inherits the panel it sits in */
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    gap: 0;
}

/* Individual tab styling
   - Smaller font (13px) compared to vertical tabs
   - Text labels (not icon-only)
*/
.horizontal-tabs .nav-link {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    padding: 3px 12px;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent;
    transition: color var(--transition-fast) ease;
    font-weight: 400;

}

/* Hover state */
.horizontal-tabs .nav-link:hover {
    color: var(--color-text-strong);
    background-color: transparent !important;
}

/* Active state: Blue underline */
.horizontal-tabs .nav-link.active {
    color: var(--color-text-strong) !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--color-accent-strong) !important;
}

/* ============================================================================
   SIDEBAR PANELS (Legacy/Unused)
   ============================================================================
   
   Note: These classes are not currently used in the layout.
   The current implementation uses Bootstrap's tab-content system instead.
   Kept for potential future use or backward compatibility.
   ============================================================================ */
.sidebar-panel {
    display: none;
    padding: 8px;
}

.sidebar-panel.active {
    display: block;
}

/* ============================================================================
   CONTENT WRAPPER & PANELS
   ============================================================================ */
/* Main content wrapper - contains editor and bottom panel
   - flex: 1 = fills remaining space between sidebars
   - position: relative = creates positioning context for bottom panel overlay mode
   - margin-right: room for the right icon column (always visible)
*/
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 0;
    margin-right: var(--sidebar-tabs-width); /* room for the right icon column */
    position: relative;
}

/* Main editor/view panel
   - flex: 1 = fills available space above bottom panel
   - overflow: auto = enables scrolling if content is larger than container
*/
.editor-panel {
    flex: 1;
    min-height: 50px;
    overflow: auto;
    padding: 0px;
    margin: 0;
    /* background-color: var(--color-surface); */
    width: 100%;
    margin-bottom: 0;
}

/* Bottom panel - Base styles
   - border-top: visual indicator for resize handle
   - min-height: prevents collapsing completely
*/
.bottom-panel {
    min-height: 75px !important;
    background-color: var(--color-surface);
    /* background-color: rgb(31, 41, 54, 0.9); */
    border-top: 4px solid transparent;
}

/* Hover effect on resize handle */
.bottom-panel:hover {
    border-top-color: var(--color-border);
}

/* Bottom panel - Flow mode
   - position: relative = normal document flow
   - Pushes editor panel up when expanded
   - Part of content-wrapper's flex layout
*/
.bottom-panel--flow {
    position: relative;
    height: 200px;
    width: 100%;
}

/* Bottom panel - Overlay mode
   - position: absolute = positioned relative to content-wrapper (not viewport!)
   - Floats above editor panel (editor keeps its size)
   - left: 0, right: 0 = spans full width of content-wrapper
   - CRITICAL: content-wrapper must have position: relative for this to work
   - z-index: 999 = appears above editor but below right sidebar
*/
.bottom-panel--overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 999;
    box-shadow: 0 -2px 8px var(--shadow-color);
}

/* Generic panel component styles */
.panel__title {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: var(--text-lg);
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
/* Prevent text selection while dragging
   - Applied to body element by JavaScript during active drag operations
   - Prevents annoying text selection when dragging panels
   - Automatically removed when drag ends
*/
.dragging {
    user-select: none;
}

/* ============================================================================
   VSCODE-STYLE ACCORDION (Explorer Panel)
   ============================================================================
   
   Custom styling for .sidebar-accordion to match VSCode's explorer panel:
   - Dark background with subtle borders
   - Collapsible sections with chevron indicators
   - Hover states for interactive elements
   - Tight spacing and clean typography
   ============================================================================ */

/* Accordion container - Remove Bootstrap defaults */
.sidebar-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--color-border-subtle);
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    background-color: transparent;
    /* border: 2px solid red; */
}

/* Accordion items - Clean spacing */
.sidebar-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
}

.sidebar-accordion .accordion-item:first-of-type,
.sidebar-accordion .accordion-item:last-of-type {
    border-radius: 0;
}

.sidebar-accordion .accordion-item:first-of-type {
    padding-top: 0.5rem;
}

.sidebar-accordion .accordion-header {
    padding-bottom: 0.5rem;
}

.sidebar-accordion .accordion-body {
    padding-bottom: 1rem !important;
}

/* Accordion header/button - VSCode style */
.sidebar-accordion .accordion-button {
    background-color: transparent !important;
    color: var(--color-text) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    /* text-transform: uppercase !important; */
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.1s ease;
}

/* Hover state */
.sidebar-accordion .accordion-button:hover {
    background-color: var(--color-state-hover) !important;
}

/* Remove focus outline */
.sidebar-accordion .accordion-button:focus {
    box-shadow: none !important;
    border: none !important;
}

/* Chevron icon - Position and style */
.sidebar-accordion .accordion-button::after {
    background-image: none !important;
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.6rem !important;
    color: var(--color-text-muted) !important;
    width: auto !important;
    height: auto !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    order: -1 !important;
    transition: transform 0.15s ease !important;
}

/* Rotate chevron when expanded */
.sidebar-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg) !important;
}

/* Accordion body - Clean content area */
.sidebar-accordion .accordion-body {
    background-color: transparent;
    /* color: rgba(204, 204, 204, 0.9); */
    padding: 4px 12px 8px 12px;
}

/* Content items in accordion - VSCode explorer item style */
.sidebar-accordion .accordion-body p {
    margin: 0;
    padding: 4px 8px;
    color: var(--color-text);
    font-size: var(--text-base);
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.1s ease;
}

.sidebar-accordion .accordion-body p:hover {
    background-color: var(--color-state-pressed);
}



/* Remove collapse animation jank */
.sidebar-accordion .accordion-collapse {
    transition: height 0.15s ease;
}

/* ============================================================================
   PANEL HEADER (VSCode Explorer Style)
   ============================================================================
   
   Header title for sidebar panels matching VSCode's explorer panel header:
   - "EXPLORER" style with uppercase text
   - Small font size with subtle color
   - Proper spacing and alignment
   ============================================================================ */

.panel-header {
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
    padding: 12px 20px 8px 20px;
    margin: 0;
    background-color: transparent;
    border-bottom: none;
}

/* ============================================================================
   STATUS BAR (VS Code-style bottom bar)
   ============================================================================ */

.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--statusbar-height);
    background-color: var(--color-bg-app);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    z-index: 1010;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    user-select: none;
    -webkit-user-select: none;
}

.status-bar__left,
.status-bar__right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.status-bar__item {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    height: var(--statusbar-height);
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.status-bar__item--clickable {
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.12s ease;
}
.status-bar__item--clickable:hover {
    background-color: var(--color-state-pressed);
    color: var(--color-accent-text);
}

/* ── About Popover ── */
.about-popover .popover {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-raised);
    min-width: 280px;
    max-width: 340px;
}
.about-popover .popover-body {
    padding: 0;
}
.about-popover .arrow::after,
.about-popover .popover-arrow::after {
    border-top-color: var(--color-surface-raised) !important;
}

/* ── About Content (inside popover) ── */
.about-content {
    padding: 14px 16px;
}

.about-app-name {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text);
    padding: 0 0 10px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 8px;
}

.about-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.about-row-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 600;
}
.about-row-value {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.about-section-header {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 6px;
}

.about-ds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background-color 0.12s ease;
}
.about-ds-row:hover {
    background-color: var(--color-state-hover);
}
.about-ds-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.about-ds-date {
    font-size: var(--text-sm);
    color: var(--color-accent-text);
    font-family: var(--font-mono);
}

.about-support-section {
    margin-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: 10px;
}
.about-support-header {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.about-email-link {
    font-size: var(--text-sm);
    color: var(--color-accent-text);
    text-decoration: none;
    transition: color 0.12s ease;
}
.about-email-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.about-notes {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    font-style: italic;
    padding: 10px 0 0;
    line-height: 1.4;
}

/* ============================================================================
   END OF STYLES
   ============================================================================ */

/* =============================================================================
   App-wide controls (was plotly.css)
   ============================================================================= */

/*color of the selected item in dropdown searchable*/
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: var(--color-field-text); }

/* restyle radio items */
.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}


/* =============================================================================
   Frame, navbar, user menu, forms (was styles.css)
   ============================================================================= */

/* @import url("https://fonts.googleapis.com/css?family=Roboto|Varela+Round"); */

/*
BEM: Blocks, Elements, Modifiers
-- for modifiers
__ for elements
- for naming blocks with multiple words

*/
/* ============================================================= */
/* Variables */
:root {

    /* --img-bg-main: url('/assets/images/herohome-bg-pattern.webp'); */
    /* --img-bg-main: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),url('/assets/images/topographical map contour lines - top.jpg'); */
}
/* ============================================================= */
body {
    /* font: see 10_base.css (--font-sans) */
    /* background-image: var(--img-bg-main); */
    /* background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url('/assets/bg.jpg'); */
}

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */
/* ============================================================= */
/* ============================================================= */


.navbar {
    /* border: 1px solid red; */
    height: var(--navbar-height);
    /* No vertical padding, so the module links can fill the bar's height; the
       logo and user menu are centered either way. */
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--text-base);
    background-color: var(--color-surface-raised);   /* a step above the panels, as before */
    border-bottom: 1px solid var(--color-border);
}

/* Room for the fixed navbar (a <br> in frontend/layout.py did this before). */
#page-content {
    padding-top: var(--navbar-height);
}

.navbar-logo {
    /* background-image: url("https://images.plot.ly/logo/new-branding/plotly-logomark.png"); */
    height: var(--navbar-height);

}
.navbar .nav-link, .navbar .navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 0px;
    padding: 0px;
}

/* ============================================================= */
/* Module links in the navbar (plans/app-header.md AH1). The current module is
   underlined, like the bottom panel's tabs. */

.navbar-modules {
    display: flex;
    align-self: stretch;   /* the bar's full height, so the underline sits on its bottom edge */
}

.navbar .module-link {
    padding: 0 12px;
    border-bottom: 2px solid transparent;
    font-size: var(--text-base);
    color: var(--color-text);
    white-space: nowrap;
    transition: color var(--transition-fast) ease;
}

.navbar .module-link:hover {
    color: var(--color-text-strong);
}

.navbar .module-link.active {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent-strong);
}

/* A module outside the user's subscription: a lock and a tooltip, no link. */
.navbar .module-link--locked {
    display: flex;
    align-items: center;
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

.module-link--locked::before {
    font-family: "Font Awesome 6 Free";
    content: "\f023";  /* lock icon */
    font-weight: 600;
    margin-right: 6px;
    font-size: 0.9em;  /* icon size, not text - theme-allow */
}

/* Below 992px the labels shorten ("Benchmarking", "Diagnostics"). */
.module-link__label--short {
    display: none;
}

@media (max-width: 991.98px) {
    .module-link__label {
        display: none;
    }
    .module-link__label--short {
        display: inline;
    }
}

/* Modules stay mounted once opened; the one not in the URL is only hidden. */
.module-pane--hidden {
    display: none;
}

/* What a module's pane shows to a user without its permission. */
.module-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--app-main-height);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

/* ============================================================= */
/* User Menu (navbar profile dropdown) */

.nav-link-compact {
    font-size: var(--text-base) !important;
    padding: 0 8px !important;
}

.user-menu-wrapper {
    display: flex;
    align-items: center;
    height: var(--navbar-height);
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background-color 0.15s;
    user-select: none;
}

.user-menu-trigger:hover {
    background-color: var(--color-state-pressed);   /* on the navbar a stronger overlay reads like the original */
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background-color: var(--color-accent-subtle);
    color: var(--color-accent-text);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.8px;
    flex-shrink: 0;
    line-height: 1;
}

.user-avatar-lg {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    font-size: var(--text-base);
}

.user-name {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text-strong);
    white-space: nowrap;
}

/* Background, border and arrow colors come from the popover bridge
   (20_bridge-bootstrap.css). */
.user-dropdown-popover {
    border-radius: 8px !important;
    box-shadow: var(--shadow-raised) !important;
    min-width: 240px !important;
    padding: 0 !important;
}

.user-dropdown-popover .popover-body {
    padding: 0 !important;
}

.user-dropdown-content {
    padding: 4px 0;
    /* Never taller than the screen below the navbar (8px clear at the top and
       bottom); scrolls inside if it would be. On a desktop the menu is far
       shorter than this, so it changes nothing there; on a phone with About
       open it keeps Sign out reachable (plans/app-header.md Phase 4). */
    max-height: calc(var(--app-vh) - var(--navbar-height) - 16px);
    overflow-y: auto;
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.user-dropdown-name {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-strong);
    line-height: 1.3;
}

.user-dropdown-company {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.user-dropdown-email {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.user-dropdown-divider {
    margin: 0;
    opacity: 0.1;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: var(--text-base);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.1s;
}

.user-dropdown-item:hover {
    background-color: var(--color-state-hover);
    color: var(--color-text);
}

.user-dropdown-logout,
.user-dropdown-logout:hover {
    color: var(--color-danger);
}

.user-dropdown-logout:hover {
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

/* Appearance switch (Dark / Light / System). The selected button is
   highlighted from html[data-theme-pref], which assets/theme.js sets. */
.user-dropdown-block {
    padding: 10px 14px 12px;
}

.user-dropdown-label {
    margin-bottom: 6px;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* "About · v0.3.1" in the user menu (login_status, utilities/callbacks.py).
   Hidden here; shown only on phones, where the status bar that normally holds
   it is hidden: see "Phones and touch screens" at the end of this file.
   It's a native <details>: tapping the summary row opens the About content. */
.user-dropdown-about {
    display: none;
}

.user-dropdown-about > summary {
    list-style: none;   /* no disclosure triangle (Chrome, Firefox) */
    cursor: pointer;
}

.user-dropdown-about > summary::-webkit-details-marker {
    display: none;      /* no disclosure triangle (Safari) */
}

.user-dropdown-about .fa-circle-info {
    width: 16px;        /* the same icon column as the other menu items */
    opacity: 0.5;
}

.user-dropdown-about .about-content {
    padding: 0 14px 10px 38px;   /* lines up under the item's text, after the icon */
}

.theme-choice-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-field);
}

.theme-choice {
    padding: 4px 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-muted);
    font: 500 var(--text-sm) var(--font-sans);
    cursor: pointer;
}

.theme-choice:hover {
    background: var(--color-state-hover);
    color: var(--color-text);
}

html[data-theme-pref="dark"] .theme-choice[data-theme-choice="dark"],
html[data-theme-pref="light"] .theme-choice[data-theme-choice="light"],
html[data-theme-pref="system"] .theme-choice[data-theme-choice="system"] {
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
}

/* ============================================================= */

.page-layout {
    /* border: 2px solid green; */
    margin-top: 10px;
    /* height: 95vh; */
    /* background-image: url('/assets/bg.jpg'); */
    background-size: cover;
    background-repeat: no-repeat;
}

.home-row {
    margin-top: 30px;
    /* border: 1px solid red; */
    height: 100%;
    /* height: 100vh; */
}

/* ============================================================= */
/* Carousel */
.carousel {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 10px 20px color-mix(in srgb, var(--brand-black) 19%, transparent), 0px 6px 6px color-mix(in srgb, var(--brand-black) 23%, transparent);
    /* height: 100%; */
}

.carousel-card {
    margin-top: 100px;
    background-color:inherit;
    border: 0px;
}

.carousel__img{
    width: 100%;
    /* height: 300px; */
    object-fit:cover;
    /* opacity: 0.5; */
}


.carousel h5{
    /* background-color: gray; */
    font-size: 1.5rem; /* unused carousel - theme-allow */
    color: var(--color-danger);
    background-color: var(--brand-orange-1);
    

}

/* ============================================================= */
/* Login, register and the signed-out message pages. Brand island (D4): colors
   come from the --brand-* roles in 31_login.css, not from the app theme. */

.form-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 450px;
    margin: 0 auto;
    /* margin-top: 100px; */

    padding: 20px;
    color: var(--brand-white);

    /* border: 1px solid gray; */
    border:          1px solid color-mix(in srgb, var(--brand-orange-1) 14%, transparent);
    /* backdrop-filter: blur(16px); */
    border-radius: 10px;
    box-shadow: 0px 10px 20px color-mix(in srgb, var(--brand-black) 19%, transparent), 0px 6px 6px color-mix(in srgb, var(--brand-black) 23%, transparent);
    background-color: color-mix(in srgb, var(--brand-black) 30%, transparent);
}


/* ============================================================= */

.form-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 500px; */
    max-width: 450px;
    margin: 0 auto;
    border:          1px solid color-mix(in srgb, var(--brand-orange-1) 14%, transparent);
    border-radius: 10px;
    /* margin-top: 100px; */
    /* padding: 20px; */
    color: var(--brand-white);
    box-shadow: 0px 10px 20px color-mix(in srgb, var(--brand-black) 19%, transparent), 0px 6px 6px color-mix(in srgb, var(--brand-black) 23%, transparent);
    background-color: color-mix(in srgb, var(--brand-black) 30%, transparent);
    
}
.form-view-wide {
    /* margin-top: 40px; */
    width: 600px;
}
.form-view-xwide {
    /* margin-top: 100px; */
    width: 800px;
    /* color: white; */
    /* centralize text */
    text-align: center;
    font-size: 0.9rem;
}

.form-float-container{
    height: 70px;
    display: block;
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */

}

.form-float {
    /* width:300px !important; */
    /* width: 100% !important; */
    min-width: 300px;
    height: 30px;
    /* border: 1px solid red; */
    font-size: 1rem; /* brand form field - theme-allow */
    margin-bottom: 0px;
    margin-top: 15px;
    background-color: var(--brand-field);
    border: 1px solid var(--brand-field-border);
}
.form-float:focus {
    background-color: var(--brand-field);   /* keep the fill; the bridge's soft gold outline shows focus */
    color: var(--brand-gray) !important;
    outline: none !important;
}

/* Override browser autofill styling for email inputs */
.form-float:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-black) 90%, transparent) inset !important;
    -webkit-text-fill-color: var(--brand-gray-light) !important;
}


/* .form-floating prefix: Bootstrap 5.3 colors floating labels with its
   (dark) body color via .form-floating>label, which outranks a single class. */
.form-floating > .form-float-label{
    color: var(--brand-gray);
}

.form-float-label::after {
    background-color: inherit !important;
}

.form-text{
    color: var(--brand-orange-1);
    font-size: var(--text-md);
    margin-bottom: 0px;
    margin-left: 5px;
}

.form-button {
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    color: var(--brand-white);
    border:          1px solid color-mix(in srgb, var(--brand-orange-1) 28%, transparent);
    /* Bootstrap 5.3 gives disabled buttons their own border color; keep the same outline */
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand-orange-1) 28%, transparent);
}
.form-link {
    margin-left:5px;
    margin-right:5px;
    /* remove underline */
    text-decoration: none;
    color: var(--brand-orange-1);
}
.form-link-div{ 
    display: flex;
    justify-content: center;
}




.endata-logo {
    width: 200px;
    /* height: 100px; */
    margin-bottom: 40px;
    margin-top: 20px;
}


#output-state-login {
    color: var(--brand-orange-1);
    margin-top: 10px;
    /* font-size: small; */
}

.terms-and-conditions{
    font-size: 0.6rem;
    /* color:red !important */
}
.terms-and-conditions h1{
    font-size: 0.8rem;
    /* color:cyan; */
    font-weight: bold;
}

.terms-and-conditions h2{
    font-size: 0.7rem;
    /* color:cyan; */
    font-weight: bold;
}


#checkbox-tc:checked {
    background-color: var(--brand-orange-1) !important;
}


.carousel-col {
    padding-left: 50px;
    padding-right: 50px;
}

.form-col {
    /* background-color: blue; */
}

/* Permission-locked sidebar tab. The label is a Font Awesome icon class, so
   the lock cannot go in ::before (see .module-link--locked) -- dim it instead.
   pointer-events is re-enabled over Bootstrap's .nav-link.disabled so the
   "upgrade" tooltip can still be triggered; react-bootstrap keeps swallowing
   the click, so the pane never activates. */
.sidebar-tab--locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto !important;
}

.sidebar-tab--locked:hover {
    opacity: 0.55;
}


.footer {
    position:fixed;
    bottom: 0;
    width: 100%;
    background-color:inherit;
    padding: 5px;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--brand-gray);
}


/* ============================================================================
   CHART SLOTS (utilities/chart_slots.py)
   Chart areas (Study, Cross-section, Diagnostics) hold their cards in slots:
   a Div per card, so adding a card changes one slot instead of the whole
   area. An empty slot (its card deleted, or not used yet) takes no space.
   The slot is the chart area's row item, so each module's CSS sizes the
   slot, and the card fills it.
   ============================================================================ */
.chart-slot:empty {
    display: none;
}

/* render_when_open (utilities/lazy_render.py): a dcc.Tabs used only to choose
   whether its content is rendered. Its tab bar is never shown, and its two
   wrapper boxes take no room (display: contents), so the content lays out as
   if it were placed directly. "div." + both classes outrank the Tabs' own
   styles (.tab-parent / .tab-content, injected by dcc). */
div.render-when-open.tab-parent,
div.render-when-open .render-when-open__content.tab-content {
    display: contents;
}
div.render-when-open .render-when-open__tabs.tab-container {
    display: none;
}


/* ============================================================================
   PHONES AND TOUCH SCREENS (plans/app-header.md Phase 4)
   Everything that changes on small or touch screens, in one place. It sits
   at the END of the file on purpose: these rules have the same specificity
   as the regular ones above, and in CSS the later rule wins.
   Desktop with a mouse, 768px and wider, is not affected by anything here.
   ============================================================================ */

/* Touch screens (a finger, not a mouse: phones and tablets). The header is
   44px tall, the usual minimum for a finger target (O1). Every panel height
   follows automatically through --navbar-height (AH7, docs/THEMING.md). */
@media (pointer: coarse) {
    :root {
        --navbar-height: 44px;
    }
    /* The logo keeps its usual size; the bar around it is what grows. */
    .navbar-logo {
        height: 30px;
    }
    /* The user menu answers to a tap anywhere in the bar's height
       (the avatar itself stays 22px). */
    .user-menu-trigger {
        height: 100%;
    }
}

/* Phones (narrower than 768px), and phones turned sideways (touch and less
   than 500px tall): no status bar (O4). Its 22px go back to every panel
   through --statusbar-height, and its version and About move into the user
   menu (.user-dropdown-about). */
@media (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
    :root {
        --statusbar-height: 0px;
    }
    .status-bar {
        display: none;
    }
    .user-dropdown-about {
        display: block;
    }
}

/* Phones: the avatar without the name, so the header fits down to 320px wide
   (measured: logo, links, avatar and name need 396px). The name is still at
   the top of the user menu. */
@media (max-width: 767.98px) {
    .user-name {
        display: none;
    }
}

/* ---- Settings sync ----------------------------------------------------------
   The settings-sync engine's pieces (assets/00_user_sync.js;
   plans/settings-sync.md §13). Theme roles only, so dark and light follow. */

/* The account card holds the settings too (settings_panel in
   utilities/callbacks.py): a little wider than the account details alone,
   for the switches' help lines. */
.settings-popover {
    min-width: 300px !important;
}

/* "Your project": only when sync runs in the page (the engine sets
   html.user-sync-on). Without it, the settings are the theme only. */
.settings-panel__sync {
    display: none;
}

html.user-sync-on .settings-panel__sync {
    display: block;
}

.settings-panel__switch {
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.settings-panel__switch .form-check-label {
    color: var(--color-text-strong);
    font-size: var(--text-sm);
}

/* The help line under a switch, in line with its label. */
.settings-panel__help {
    flex-basis: 100%;
    padding-left: calc(2rem + 0.5rem);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
}


/* The status in the status bar (bottom left): a colored dot and a word.
   Green saved, amber unsaved or saving, red not saved or waiting for a
   choice, grey off. Its full sentence is in the tooltip (title). */
.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.sync-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-text-subtle);
}

.sync-status--saved::before {
    background-color: var(--color-success);
}

.sync-status--unsaved::before,
.sync-status--saving::before {
    background-color: var(--color-warning);
}

.sync-status--error::before,
.sync-status--conflict::before {
    background-color: var(--color-danger);
}

/* The status box (D19): the status and the actions that fit it (Save now,
   Load the newer save...), built by the engine (fillBox). Floating above the
   status bar when the status is clicked (#sync-box); on phones, where the
   status bar is hidden, the same content sits in the account card
   (.settings-panel__phone, shown only there). */
.sync-box {
    font-size: var(--text-sm);
    color: var(--color-text-strong);
}

#sync-box {
    position: fixed;
    left: 12px;
    bottom: calc(var(--statusbar-height) + 8px);
    z-index: 20000;
    min-width: 260px;
    max-width: min(380px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
}

.sync-box__project {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.sync-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.sync-box__actions .btn {
    font-size: var(--text-sm);
}

.settings-panel__phone {
    display: none;
}

@media (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
    .settings-panel__phone {
        display: block;
        margin-top: 10px;
    }
}

/* The project switcher (D20): the project's name, left of the account name
   (project_switcher in utilities/callbacks.py), shown while project sync runs
   (html.user-project-on, set by the engine). Its menu (#project-menu) is
   built by the engine when it's clicked. */
.project-switcher {
    display: none;
    align-items: center;
    gap: 5px;
    height: 26px;
    max-width: 220px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color 0.15s;
}

html.user-project-on .project-switcher {
    display: inline-flex;
}

.project-switcher:hover {
    background-color: var(--color-state-pressed);
    color: var(--color-text-strong);
}

.project-switcher__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-switcher__caret {
    font-size: 10px; /* icon size, not text - theme-allow */
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .project-switcher {
        max-width: 120px;
    }
}

.project-menu {
    position: fixed;
    z-index: 20000;
    width: 320px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - var(--navbar-height) - 24px);
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface-raised);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-raised);
    font-size: var(--text-sm);
}

/* The line between the list and its buttons: room on both sides (the
   account card's lines touch full-width rows; these touch buttons). */
.project-menu .user-dropdown-divider {
    margin: 8px 0;
}

/* The forms' fields at the menu's text size, like its rows and buttons
   (Bootstrap's small fields are larger: 0.875rem). The open list of the
   select follows the select's size. */
.project-menu .form-control,
.project-menu .form-select {
    font-size: inherit;
}

.project-menu__note {
    color: var(--color-text-muted);
}

.project-menu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-menu__row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 5px;
}

.project-menu__row:hover {
    background-color: var(--color-state-hover);
}

.project-menu__open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.project-menu__row.is-current .project-menu__open {
    cursor: default;
    color: var(--color-accent-text);
}

/* The project icon: quiet on the other projects; the current project's
   (always first) takes the accent with its name. */
.project-menu__open > i {
    color: var(--color-text-muted);
}

.project-menu__row.is-current .project-menu__open > i {
    color: inherit;
}

.project-menu__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-menu__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.project-menu__when {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.project-menu__icon {
    padding: 4px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.project-menu__icon:hover {
    background-color: var(--color-state-pressed);
    color: var(--color-text-strong);
}

/* The bin: red when pointed at, like the app's other remove buttons. */
.project-menu__icon--danger:hover {
    color: var(--color-danger);
}

/* Keyboard focus: the theme's ring, not the browser's blue one. */
.project-menu__icon:focus-visible,
.project-menu__open:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.project-menu__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-menu__actions .btn {
    font-size: var(--text-sm);
}

.project-menu__form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.project-menu__form-title {
    font-weight: 500;
}

.project-menu__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.project-menu__msg {
    color: var(--color-danger);
    font-size: var(--text-xs);
}

.project-menu__msg:empty {
    display: none;
}

/* A question from the engine ("Load it / Keep this one", "Save before
   signing out?"): a small box at the top center, just under the navbar
   where it's seen, above everything, on the raised surface. */
.user-sync-question {
    position: fixed;
    left: 50%;
    top: calc(var(--navbar-height) + 10px);
    transform: translateX(-50%);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-surface-raised);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-raised);
    font-size: var(--text-sm);
}

/* the buttons in a row under the message, on the right, in the message's size */
.user-sync-question__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.user-sync-question__actions .btn {
    font-size: var(--text-sm);
}