:root {
    --bs-body-color: #e6edf3;
    --bs-body-bg: #0d1117;
    --bs-secondary-color: #8b949e;
    --bs-border-color: #30363d;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: #0d1117;
    color: #e6edf3;
}

/* Tightens Markdig-rendered note content (default <p>/<ul> margins otherwise add visible gaps between list rows) */
.note-body p {
    margin-bottom: 0.2rem;
    line-height: 1.45;
}
.note-body p:last-child {
    margin-bottom: 0;
}
.note-body ul,
.note-body ol {
    margin-bottom: 0.2rem;
    padding-left: 1.25rem;
}
.note-body ul:last-child,
.note-body ol:last-child {
    margin-bottom: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

a, .btn-link {
    color: #388bfd;
}

a:hover {
    color: #58a6ff;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    color: #fff;
    background-color: #1f6feb;
    border-color: #1f6feb;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #388bfd;
    border-color: #388bfd;
    color: #fff;
}

.btn-secondary {
    background-color: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

.btn-secondary:hover {
    background-color: #30363d;
    border-color: #484f58;
    color: #e6edf3;
}

.btn-outline-secondary {
    border-color: #30363d;
    color: #8b949e;
}

.btn-outline-secondary:hover {
    background-color: #21262d;
    border-color: #484f58;
    color: #e6edf3;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(56, 139, 253, 0.3);
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

.form-control:focus, .form-select:focus {
    background-color: #0d1117;
    border-color: #388bfd;
    color: #e6edf3;
    box-shadow: 0 0 0 0.2rem rgba(56, 139, 253, 0.2);
}

.form-control::placeholder {
    color: #484f58;
}

.form-control::file-selector-button {
    background-color: #21262d;
    border-color: #30363d;
    color: #e6edf3;
    border-inline-end: 1px solid #30363d;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button,
.form-control::file-selector-button:hover {
    background-color: #30363d;
    color: #e6edf3;
}

.form-control:disabled, .form-select:disabled {
    background-color: #161b22;
    border-color: #21262d;
    color: #484f58;
}

.form-label {
    color: #8b949e;
    font-size: 0.875rem;
}

.input-group-text {
    background-color: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

.form-check-input {
    background-color: #0d1117;
    border-color: #30363d;
}

.form-check-input:checked {
    background-color: #1f6feb;
    border-color: #1f6feb;
}

/* ── Tables ──────────────────────────────────────────────── */
.table {
    color: #e6edf3;
    --bs-table-bg: transparent;
    --bs-table-color: #e6edf3;
    --bs-table-striped-color: #e6edf3;
    --bs-table-hover-color: #e6edf3;
    --bs-table-active-color: #e6edf3;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-table-border-color: #30363d;
    border-color: #30363d;
}

.table tbody {
    color: #e6edf3;
}

/* Force all body cells white — overrides Bootstrap striped/active/state variable chain */
.table > tbody > tr > td,
.table > tbody > tr > th {
    color: #e6edf3 !important;
}

/* Blue text on row hover; highlighted rows keep their inline !important color */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    color: #388bfd !important;
}

.table thead th {
    background-color: #161b22;
    color: #8b949e;
    border-bottom-color: #484f58;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table thead img {
    filter: invert(0.8);
    opacity: 0.9;
}

.table > :not(caption) > * > * {
    border-bottom-color: #30363d;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background-color: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

.card-header {
    background-color: #1c2128;
    border-bottom-color: #30363d;
    color: #e6edf3;
}

.card-footer {
    background-color: #1c2128;
    border-top-color: #30363d;
}

/* ── Modals ──────────────────────────────────────────────── */
.modal-content {
    background-color: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

.modal-header {
    border-bottom-color: #30363d;
    background-color: #1c2128;
}

.modal-footer {
    border-top-color: #30363d;
    background-color: #1c2128;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Scrollbars (WebKit/Chromium + Firefox) ──────────────── */
* {
    scrollbar-color: #30363d #161b22;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #161b22;
}

::-webkit-scrollbar-thumb {
    background-color: #30363d;
    border-radius: 5px;
    border: 2px solid #161b22;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444c56;
}

.modal-backdrop {
    background-color: #000;
}

/* ── Dropdowns ───────────────────────────────────────────── */
.dropdown-menu {
    background-color: #1c2128;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dropdown-item {
    color: #e6edf3;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #21262d;
    color: #e6edf3;
}

.dropdown-divider {
    border-color: #30363d;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge.bg-secondary {
    background-color: #21262d !important;
    color: #8b949e;
}

/* ── Toasts / Alerts ─────────────────────────────────────── */
.alert {
    border-color: #30363d;
}

.alert-info {
    background-color: rgba(56, 139, 253, 0.1);
    border-color: rgba(56, 139, 253, 0.3);
    color: #58a6ff;
}

.alert-success {
    background-color: rgba(63, 185, 80, 0.1);
    border-color: rgba(63, 185, 80, 0.3);
    color: #3fb950;
}

.alert-danger {
    background-color: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.3);
    color: #f85149;
}

.alert-warning {
    background-color: rgba(210, 153, 34, 0.1);
    border-color: rgba(210, 153, 34, 0.3);
    color: #d29922;
}

/* ── Login display ───────────────────────────────────────── */
.link {
    background: none;
    border: none;
    color: #8b949e;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

.link:hover {
    color: #e6edf3;
}

/* ── Content area ────────────────────────────────────────── */
.content {
    padding-top: 1.1rem;
}

h1, h2, h3, h4, h5, h6 {
    color: #e6edf3;
}

h1:focus {
    outline: none;
}

/* ── Validation ──────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #3fb950;
}

.invalid {
    outline: 1px solid #f85149;
}

.validation-message {
    color: #f85149;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #3d1a1a;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #f85149;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #484f58;
}

/* ── Due date urgency badges (chips) ─────────────────────── */
.badge-status-soon    { background:#3d2e05; color:#d29922; border:1px solid #d29922; font-size:0.62rem; }
.badge-status-overdue { background:#3a1215; color:#f85149; border:1px solid #f85149; font-size:0.62rem; }

/* ── Computed renewal placement badges (Active Strategies / Long-Term Strategies) ── */
.badge-status-placement-active   { background:#0d1b2e; color:#79c0ff; border:1px solid #1f6feb; font-size:0.62rem; }
.badge-status-placement-longterm { background:#21262d; color:#8b949e; border:1px solid #30363d; font-size:0.62rem; }

/* Long Strategy names can overflow the narrow Status column -- truncate with an ellipsis and
   rely on the title attribute (set alongside this class) for the full text on hover. */
.badge-status-placement {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Editable column corner indicator ────────────────────── */
th.bt-editable-column {
    position: relative;
}

th.bt-editable-column .bt-editable-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 12px solid #388bfd;
    border-left: 12px solid transparent;
}

/* ── Column drag-resize handle ───────────────────────────── */
/* Once any column has been drag-resized, switch the whole table to fixed layout so column
   widths come only from the header row (not recomputed from every body/footer cell's
   content). This keeps a resized width from being overridden by wide row content and makes
   the drag itself track the mouse smoothly instead of forcing a full table relayout on
   every mousemove. Tables that have never been resized are unaffected. */
.bt-col-layout-fixed {
    table-layout: fixed;
    /* Bootstrap's .table sets width:100% -- under table-layout:fixed, if the visible columns'
       declared widths sum to less than that (routine, since which columns show varies by saved
       view), browsers stretch EVERY column proportionally to fill the gap, so changing one
       column's width silently reshuffles all the others. Force the table to size to exactly the
       sum of its own declared column widths instead; .table-responsive's overflow-x already
       handles the case where that sum exceeds the visible area. */
    width: auto !important;
}

/* Opt-in override for the specific tables that have one or more flexible (no fixed Width) columns --
   e.g. Initiative/Solution/Issue/Impact on the Strategies & Initiatives grid. Without this, those columns
   have nothing to grow INTO: .bt-col-layout-fixed above sizes the table to the sum of its explicit
   columns only, leaving unused space beside the table rather than handing it to the flexible ones. Two
   classes gives this higher specificity than .bt-col-layout-fixed alone, so it reliably wins even though
   both declarations are !important -- specificity is still the tiebreaker between two !important rules.
   Applied via TableClass="... bt-fill-container" only on <Table> instances that actually have a flexible
   column (see ActiveStrategies.razor/LongTermStrategies.razor) -- Renewals/Agreements grids don't get it,
   so they keep sizing to content exactly as before. */
.bt-col-layout-fixed.bt-fill-container {
    width: 100% !important;
}

/* Resize disabled -- hand-tuned widths were getting broken by drags; full removal is a separate pending task. */
.bt-col-resize-handle {
    display: none;
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    user-select: none;
}

.bt-col-resize-handle:hover,
th.bt-col-resizing .bt-col-resize-handle {
    background-color: rgba(56, 139, 253, 0.4);
}

/* ── Advanced edit button ────────────────────────────────── */
.advanced-edit-with-checkbox .form-check-input {
    margin-top: 0;
}

.advanced-edit-icon-btn {
    background-color: #1c2128;
    border-color: #30363d;
    color: #388bfd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.advanced-edit-icon-btn:hover,
.advanced-edit-icon-btn:focus {
    background-color: #21262d;
    border-color: #484f58;
    color: #58a6ff;
}

/* ── Tabs ────────────────────────────────────────────────── */
.nav-tabs {
    --bs-nav-tabs-border-color: #30363d;
    --bs-nav-tabs-link-hover-border-color: #30363d #30363d #30363d;
    --bs-nav-tabs-link-active-color: #388bfd;
    --bs-nav-tabs-link-active-bg: #161b22;
    --bs-nav-tabs-link-active-border-color: #30363d #30363d #161b22;
    border-bottom-color: #30363d;
}

.nav-tabs .nav-link {
    color: #adbac7;
    background-color: #0d1117;
    border-color: #30363d #30363d #30363d;
    font-weight: normal;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: #388bfd;
    background-color: #161b22;
    border-color: #388bfd #388bfd #30363d;
    font-weight: normal;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #388bfd;
    background-color: #161b22;
    border-color: #388bfd #388bfd #161b22;
    border-top-width: 2px;
    font-weight: 600;
}

/* ── Nav section labels ──────────────────────────────────── */
.nav-section-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #388bfd !important;
}

/* ── Minimized sidebar nav ───────────────────────────────── */
.nav-minimized .nav-section-label {
    display: none !important;
}

.nav-minimized .nav-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.nav-minimized .nav-link {
    font-size: 0 !important;
    justify-content: center !important;
    padding: 0 !important;
    height: 2.5rem !important;
    overflow: hidden !important;
}

.nav-minimized .nav-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
    opacity: 1 !important;
    flex-shrink: 0;
    font-size: 16px !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
    --bs-pagination-bg: #161b22;
    --bs-pagination-border-color: #30363d;
    --bs-pagination-color: #388bfd;
    --bs-pagination-hover-bg: #21262d;
    --bs-pagination-hover-border-color: #484f58;
    --bs-pagination-hover-color: #58a6ff;
    --bs-pagination-active-bg: #1f6feb;
    --bs-pagination-active-border-color: #1f6feb;
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: #0d1117;
    --bs-pagination-disabled-border-color: #21262d;
    --bs-pagination-disabled-color: #484f58;
}

/* ── AI Suggestions Panel ────────────────────────────────── */
.ai-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.ai-suggestions-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 460px;
    max-width: 100vw;
    height: 100vh;
    background-color: #161b22;
    border-left: 1px solid #30363d;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.ai-panel-header {
    background-color: #1c2128;
    border-bottom: 1px solid #30363d;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ai-panel-body {
    padding: 1.25rem;
    flex: 1;
    overflow-y: auto;
}

.ai-panel-footer {
    background-color: #1c2128;
    border-top: 1px solid #30363d;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.ai-field-block {
    margin-bottom: 1rem;
}

.ai-current-value {
    font-size: 0.78rem;
    color: #6e7681;
    font-style: italic;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── ApexCharts tooltip ──────────────────────────────────── */
.apexcharts-tooltip {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;
}

.apexcharts-tooltip-title {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
    color: #8b949e !important;
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
}

.apexcharts-tooltip-series-group {
    background: transparent !important;
    padding: 3px 8px !important;
}

.apexcharts-tooltip-text-y-label {
    color: #8b949e !important;
}

.apexcharts-tooltip-text-y-value {
    color: #e6edf3 !important;
    font-weight: 600 !important;
}

.apexcharts-tooltip-marker {
    border-radius: 3px !important;
}

/* Popover was losing to another table's sticky search row and looked untheme'd */
.popover {
    --bs-popover-zindex: 1075;
    --bs-popover-bg: #161b22;
    --bs-popover-border-color: #30363d;
    --bs-popover-header-bg: #21262d;
    --bs-popover-header-color: #e6edf3;
    --bs-popover-body-color: #e6edf3;
    --bs-popover-arrow-bg: #161b22;
}