:root {
    /* Backgrounds / surfaces */
    --oc-bg: #0e1116;
    --oc-surface: #16191f;
    --oc-surface-alt: #1c2028;
    --oc-surface-hover: #22262f;

    /* Borders */
    --oc-border: #2a2f3a;
    --oc-border-strong: #383e4a;

    /* Text */
    --oc-text: #e8eaed;
    --oc-text-muted: #9aa0ac;
    --oc-text-faint: #6b7280;

    /* Brand / accent (teal) */
    --oc-accent: #24907e;
    --oc-accent-hover: #2aa88f;
    --oc-accent-soft: rgba(36, 144, 126, 0.16);

    /* Warning / danger - reserved for semantic alerts only */
    --oc-warning: #f5a524;
    --oc-danger: #e5484d;

    /* Bootstrap variable remaps so stock components re-theme for free */
    --bs-body-bg: var(--oc-bg);
    --bs-body-color: var(--oc-text);
    --bs-border-color: var(--oc-border);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;

    --bs-card-bg: var(--oc-surface-alt);
    --bs-card-border-color: var(--oc-border);

    --bs-link-color: var(--oc-accent);
    --bs-link-color-rgb: 36, 144, 126;
    --bs-link-hover-color: var(--oc-accent-hover);
    --bs-link-hover-color-rgb: 42, 168, 143;

    --bs-primary: var(--oc-accent);
    --bs-primary-rgb: 36, 144, 126;
}

/* Sidebar */
.sidebar {
    width: 260px;
    min-height: 100vh;
    background-color: var(--oc-surface);
    border-right: 1px solid var(--oc-border);
    top: 0;
    left: 0;
    z-index: 100;
}

/* Main content area, offset by the fixed-width sidebar and capped so tables/
   forms don't stretch edge-to-edge on wide monitors. Centered within the
   remaining track (viewport minus the 260px sidebar) instead of hugging the
   sidebar, so leftover space splits evenly instead of piling up on the right;
   math: track spans [260px, 100vw], so centering a max-width box in it gives
   margin-left = 260 + (track-width - max-width)/2 = 50vw - 670px, floored at
   260px for viewports too narrow for that to clear the sidebar. */
.oc-content {
    max-width: 1600px;
    margin-left: max(260px, calc(50vw - 670px));
}

/* Every page nests a Bootstrap .container (inside the #content wrapper) in
   .oc-content; .container has its own responsive max-width (e.g. 1320px at
   the xxl breakpoint) which double-caps and re-centers content independently
   of .oc-content above, leaving extra unused space. Let .oc-content alone
   own the width budget. */
.oc-content .container,
.oc-content .container-fluid {
    max-width: none;
    width: 100%;
}

/* Uppercase group labels above sidebar nav sections (GENERAL / SETTINGS / ACCOUNT) */
.oc-nav-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--oc-text-faint);
    padding: 0.75rem 1rem 0.25rem;
}

.oc-text-faint {
    color: var(--oc-text-faint);
    font-size: 0.8rem;
}

/* User identity chip / account menu toggle above the sidebar Logout button */
.oc-user-chip {
    border-radius: 0.5rem;
    color: var(--oc-text);
    cursor: pointer;
}

.oc-user-chip:hover,
.oc-user-chip[aria-expanded="true"] {
    background-color: var(--oc-surface-hover) !important;
}

/* Destructive action (Logout) inside a dropdown menu, kept red through hover */
.dropdown-item.text-danger,
.dropdown-item.text-danger:focus {
    color: var(--oc-danger) !important;
}

.dropdown-item.text-danger:hover {
    color: var(--oc-danger) !important;
    background-color: rgba(229, 72, 77, 0.12) !important;
}

/* Dark-themed code block, replacing Bootstrap's light-only .bg-light on <pre> */
.oc-code-block {
    background-color: var(--oc-surface-alt);
    color: var(--oc-text);
    border: 1px solid var(--oc-border);
}

.oc-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--oc-accent-soft);
    color: var(--oc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Consistent page header: title (+ optional description) with a right-aligned
   primary action, used across content pages instead of ad hoc h2+button pairs */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--oc-border);
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.page-header-desc {
    color: var(--oc-text-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sidebar .nav-link {
    color: var(--oc-text);
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem;
    border-radius: 999px;
    cursor: pointer;
}

.sidebar .nav-link:hover:not(.active) {
    background-color: var(--oc-surface-hover);
}

.sidebar .nav-link.active {
    background-color: var(--oc-accent-soft);
    color: var(--oc-text);
}

.sidebar .nav-link.active i.bi {
    color: var(--oc-accent);
}

/* Rotate chevron based on expanded state */
[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

[aria-expanded="false"] .bi-chevron-down {
    transform: rotate(0deg);
}

.collapse, .collapsing {
    transition-duration: 0s !important;
}

/* Component-level overrides, using direct properties rather than Bootstrap's
   internal component variables (bs-btn-bg, bs-dropdown-bg, bs-modal-bg, etc.):
   those are redeclared by multiple Bootstrap rules matching the same element
   (e.g. both .btn and .btn-primary set the button background variable), and
   an equal-specificity override of just the custom property does not reliably
   win the cascade there. !important is used throughout this block because an
   equal-specificity override loaded after bootstrap.min.css still does not
   reliably win against it for these particular selectors without it. */
.btn-primary {
    background-color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--oc-accent-hover) !important;
    border-color: var(--oc-accent-hover) !important;
    color: #fff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
}

.btn-outline-primary {
    color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
    color: #fff !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--oc-accent) !important;
    box-shadow: 0 0 0 .25rem var(--oc-accent-soft) !important;
}

.form-check-input:checked {
    background-color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
}

.list-group-item.active {
    background-color: var(--oc-accent) !important;
    border-color: var(--oc-accent) !important;
    color: #fff !important;
}

.modal-content {
    background-color: var(--oc-surface-alt) !important;
    color: var(--oc-text) !important;
    border-color: var(--oc-border) !important;
}

.dropdown-menu {
    background-color: var(--oc-surface-alt) !important;
    color: var(--oc-text) !important;
    border-color: var(--oc-border) !important;
}

.dropdown-item {
    color: var(--oc-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--oc-surface-hover) !important;
    color: var(--oc-text) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--oc-accent) !important;
    color: #fff !important;
}

/* Project selector custom styling */
.project-dropdown-toggle {
    background-color: transparent;
    border: none;
    padding: 0.5rem 0;
    font-weight: 500;
    color: var(--oc-text);
}

.project-dropdown-toggle:focus {
    box-shadow: none;
}

.project-selector .dropdown-menu {
    border-radius: 0.5rem;
}

/* Position the menu below the toggle without relying on Bootstrap's Popper */
.project-selector .dropdown-menu.show {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.125rem;
}

.project-selector .dropdown-item {
    cursor: pointer;
}

/* Fix for active dropdown item text color */
.project-selector .dropdown-item.active {
    color: var(--oc-text);
}