/* Reusable utility to ensure the label in a form-switch comes first */
.form-switch-label-first {
    display: flex;
    align-items: center;
}
.form-switch-label-first .form-check-label {
    order: 1; /* Label comes first */
    white-space: nowrap; /* Prevent the label from wrapping */
}
.form-switch-label-first .form-check-input {
    order: 2; /* Input (the switch) comes second */
    margin-left: .5rem; /* Add some space between label and switch */
}

/*
 * Adjust the main content area to account for the fixed header and navbar.
 * The header is 36px high and the navbar is approx 56px high.
 * A total padding of around 96px is needed.
 */
body > main {
    padding-top: 96px;
}

/*
 * For pages with header-placeholder + sticky navbar (like trade-log),
 * position the navbar below the fixed header (36px).
 */
#header-placeholder + .navbar.sticky-top {
    top: 36px;
}

/*
 * Adjust container content when both header and navbar are present
 */
#header-placeholder + .navbar.sticky-top + .container {
    padding-top: 20px;
}

/*
 * Z-index layering to ensure proper stacking order during page scrolling:
 * - Header should be on top (z-index: 1040)
 * - Navbar should be below header but above content (z-index: 1035)
 * - Page content should be below both (default z-index)
 */
.header-bar {
    z-index: 1040 !important;
}

.navbar {
    z-index: 1035 !important;
}
/* Config page collapsible card headers */
.card-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.card-header-chevron {
    transition: transform 300ms ease;
    font-size: 24px;
}

.card-header[aria-expanded="true"] .card-header-chevron {
    transform: rotate(90deg);
}

/* Sidebar nav-group-toggle chevron - match app-wide pattern (right-pointing, 90deg clockwise rotation) */
/* CoreUI default: 0deg (down) when collapsed, 180deg (up) when expanded */
/* We need: -90deg (right) when collapsed, 0deg (down) when expanded */
.sidebar .nav-group-toggle::after {
    transition: transform 300ms ease;
    transform: rotate(-90deg) !important; /* Override CoreUI: start pointing right */
}

.sidebar .nav-group.show .nav-group-toggle::after {
    transform: rotate(0deg) !important; /* Override CoreUI: end pointing down (90deg clockwise from right) */
}

/* ===== Blockquote Left Border Style ===== */
/* Adds a solid 2px light grey left border to blockquote elements */
/* Used for prominent display of key statements like TLDR sections */
.blockquote-left-border {
    border-left: 2px solid #dee2e6;
    padding-left: 1rem;
}

/* Dark mode support for blockquote left border */
[data-bs-theme="dark"] .blockquote-left-border,
[data-coreui-theme="dark"] .blockquote-left-border {
    border-left-color: #495057;
}

/* ===== CoreUI Compatibility Styles ===== */
/* These styles ensure CoreUI components work correctly */

/* CoreUI body background and text color */
body { 
    background-color: var(--cui-body-bg, #212529); 
    color: var(--cui-body-color, #fff); 
}

/* Sidebar brand alignment */
.sidebar-brand-full { 
    display: flex; 
    align-items: center; 
}

/* Navigation icon spacing */
.nav-icon { 
    margin-right: 0.5rem; 
}

/* Fix for CoreUI v5 Sidebar Overlap */
/* This ensures the wrapper adjusts its padding when the sidebar is visible */
html:not([dir="rtl"]) .wrapper {
    padding-left: var(--cui-sidebar-occupy-start, 0);
    transition: padding-left 0.3s;
}

/* Collapse chevron animation */
.collapse-chevron {
    transition: transform 0.3s ease-in-out;
}

[data-coreui-toggle="collapse"][aria-expanded="true"] .collapse-chevron {
    transform: rotate(90deg);
}

/* Collapsible card headers - cursor pointer for clickability */
.card-header[data-coreui-toggle="collapse"],
.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
}

.card-header-chevron {
    transition: transform 0.3s ease;
}

.card-header[aria-expanded="true"] .card-header-chevron {
    transform: rotate(90deg);
}

/* Tooltip customization: Dark Theme & Bubble appearance matching CoreUI specs */
[data-coreui-theme="dark"] .tooltip,
.tooltip {
    --cui-tooltip-bg: #2b3035;
    --cui-tooltip-color: #f8f9fa;
    --cui-tooltip-arrow-color: #2b3035;
    --bs-tooltip-bg: #2b3035;
    --bs-tooltip-color: #f8f9fa;
    --bs-tooltip-arrow-color: #2b3035;
    --cui-tooltip-border-radius: 0.375rem;
    --bs-tooltip-border-radius: 0.375rem;
    --cui-tooltip-padding-x: 0.65rem;
    --cui-tooltip-padding-y: 0.35rem;
    --cui-tooltip-font-size: 0.8125rem;
    --bs-tooltip-font-size: 0.8125rem;
}

.tooltip .tooltip-arrow {
    display: block !important;
    visibility: visible !important;
}

.tooltip .tooltip-inner {
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Wider Tooltips for Error Logs (scoped) */
.tooltip-wide .tooltip-inner,
.error-tooltip .tooltip-inner {
    max-width: 450px !important;
    text-align: left !important;
}

/* Abbreviation styling for Markdown transcripts and general content */
abbr,
abbr[data-coreui-title] {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: default;
}

/* Mobile Header Scrolling: Make header scroll off-screen on mobile viewports */
@media (max-width: 991.98px) {
    .header.header-sticky {
        position: static !important;
    }
}