/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* UER-171 Contract 4 -- Developer Mode banner. Displayed only when DEVELOPER_MODE
   is compiled in. No inline style permitted (LL-020 / CSP). */
.dev-mode-banner {
    background-color: #cc0000;
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 6px 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    letter-spacing: 0.05em;
}

/* Sidebar profile + version block: pinned to the bottom-left of the browser
   viewport at all times, independent of scroll position or how much/little
   nav content is above it. Width matches the sidebar's own fixed 280px. */
.sidebar-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 1030;
}

/* Reserve space at the bottom of the nav list so the fixed footer above never
   overlaps the last menu item on short viewports. */
.sidebar-nav {
    padding-bottom: 10rem;
}

/* Sidebar column: fixed 280px at every viewport width, matching the inner nav box
   and the fixed footer (both 280px). Replaces the old Bootstrap .col-3 percentage,
   which stretched the dark background wider than 280px on wide screens and left dead
   space. flex-shrink:0 stops it collapsing; the content area beside it uses .flex-grow-1. */
.sidebar-col {
    width: 280px;
    flex-shrink: 0;
    /* Guarantee the dark background always reaches the fixed bottom-left footer,
       even on short-content pages where the sidebar would otherwise only stretch
       to match a short content column, leaving a white gap above the footer. */
    min-height: 100vh;
}

/* Sidebar light mode. The page wrapper (#caadminThemeRoot) now carries
   data-bs-theme="dark" by default; the toggle button flips it to "light" and persists
   the choice in localStorage. Because data-bs-theme lives on that wider ancestor (so
   Bootstrap's native dark mode can theme the whole page), these overrides are explicitly
   re-scoped under #sidebarThemeRoot so they re-theme ONLY the hardcoded dark utility
   classes used inside the sidebar and never leak into main content (e.g. the intentional
   bg-danger text-white banner on StripeKeys). Values come from ca-tokens.css semantic
   roles. !important is required because the Bootstrap .text-bg-* / .text-white utilities
   are themselves !important. */
[data-bs-theme="light"] #sidebarThemeRoot.text-bg-dark,
[data-bs-theme="light"] #sidebarThemeRoot .text-bg-dark {
    background-color: var(--ca-surface) !important;
    color: var(--ca-ink) !important;
}

[data-bs-theme="light"] #sidebarThemeRoot .text-white {
    color: var(--ca-ink) !important;
}

[data-bs-theme="light"] #sidebarThemeRoot .text-white-50 {
    color: var(--ca-muted) !important;
}