/* =============================================================================
   MOS Sentinel — Bootstrap Shim (v2 — "Sentinel Field")
   =============================================================================
   Remaps Bootstrap 5 CSS custom properties + key utility classes onto the
   Sentinel Field design tokens. Loaded AFTER Bootstrap, BEFORE site.css.
   Without this shim, raw Bootstrap utilities (.bg-white / .text-muted /
   .alert-info / .btn-primary etc.) would not theme correctly in dark mode
   and would clash with the emerald brand.
   ============================================================================= */

:root {
    /* Brand */
    --bs-primary:        var(--s-brand-primary);
    --bs-primary-rgb:    5, 150, 105;
    --bs-secondary:      var(--s-ink-soft);
    --bs-secondary-rgb:  71, 85, 105;

    /* Semantic */
    --bs-success:        var(--s-green);
    --bs-success-rgb:    16, 185, 129;
    --bs-info:           var(--s-cyan);
    --bs-info-rgb:       8, 145, 178;
    --bs-warning:        var(--s-amber);
    --bs-warning-rgb:    217, 119, 6;
    --bs-danger:         var(--s-red);
    --bs-danger-rgb:     220, 38, 38;

    /* Surface */
    --bs-body-bg:        var(--s-bg);
    --bs-body-color:     var(--s-ink);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-border-color:   var(--s-border);
    --bs-secondary-bg:   var(--s-bg-elevated);
    --bs-tertiary-bg:    var(--s-surface-sunken);

    /* Font */
    --bs-body-font-family:   var(--s-font);
    --bs-body-font-size:     var(--s-text-base);
    --bs-body-font-weight:   var(--s-weight-regular);
    --bs-body-line-height:   var(--s-leading-normal);

    /* Border radius */
    --bs-border-radius:     var(--s-radius-md);
    --bs-border-radius-sm:  var(--s-radius-sm);
    --bs-border-radius-lg:  var(--s-radius-lg);
    --bs-border-radius-xl:  var(--s-radius-xl);
}

:root[data-theme="dark"] {
    --bs-body-bg:        var(--s-bg);
    --bs-body-color:     var(--s-ink);
    --bs-body-color-rgb: 241, 245, 249;
    --bs-border-color:   var(--s-border);
    --bs-secondary-bg:   var(--s-bg-elevated);
    --bs-tertiary-bg:    var(--s-surface-sunken);
}

/* =============================================================================
   Background utilities (.bg-*)
   ============================================================================= */

.bg-white      { background-color: var(--s-surface) !important; color: var(--s-ink); }
.bg-light      { background-color: var(--s-bg-elevated) !important; color: var(--s-ink); }
.bg-body       { background-color: var(--s-bg) !important; }
.bg-dark       { background-color: var(--s-ink-strong) !important; color: var(--s-bg); }
.bg-secondary  { background-color: var(--s-bg-elevated) !important; color: var(--s-ink-soft); }

/* =============================================================================
   Text utilities (.text-*)
   ============================================================================= */

.text-dark     { color: var(--s-ink-strong) !important; }
.text-muted    { color: var(--s-ink-muted) !important; }
.text-secondary { color: var(--s-ink-soft) !important; }
.text-body     { color: var(--s-ink) !important; }
.text-success  { color: var(--s-green) !important; }
.text-danger   { color: var(--s-red) !important; }
.text-warning  { color: var(--s-amber) !important; }
.text-info     { color: var(--s-cyan) !important; }
.text-primary  { color: var(--s-brand-primary) !important; }
.text-white    { color: #FFFFFF !important; }

:root[data-theme="dark"] .text-dark { color: var(--s-ink-strong) !important; }

/* =============================================================================
   Borders
   ============================================================================= */

.border         { border-color: var(--s-border) !important; }
.border-top     { border-top-color: var(--s-border) !important; }
.border-bottom  { border-bottom-color: var(--s-border) !important; }
.border-start   { border-left-color: var(--s-border) !important; }
.border-end     { border-right-color: var(--s-border) !important; }
.border-light   { border-color: var(--s-border-soft) !important; }
.border-dark    { border-color: var(--s-border-strong) !important; }

/* =============================================================================
   Bootstrap badges → emerald-aware
   ============================================================================= */

.badge {
    font-family: var(--s-font);
    font-weight: var(--s-weight-semibold);
    font-size: var(--s-text-xs);
    padding: 3px 8px;
    border-radius: var(--s-radius-sm);
    letter-spacing: 0;
}
.badge.bg-primary, .badge.text-bg-primary    { background: var(--s-brand-primary-subtle) !important; color: var(--s-brand-primary-ink) !important; }
.badge.bg-success, .badge.text-bg-success    { background: var(--s-green-bg) !important; color: var(--s-green-ink) !important; }
.badge.bg-danger, .badge.text-bg-danger      { background: var(--s-red-bg) !important; color: var(--s-red-ink) !important; }
.badge.bg-warning, .badge.text-bg-warning    { background: var(--s-amber-bg) !important; color: var(--s-amber-ink) !important; }
.badge.bg-info, .badge.text-bg-info          { background: var(--s-cyan-bg) !important; color: var(--s-cyan-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--s-bg-elevated) !important; color: var(--s-ink-soft) !important; border: 1px solid var(--s-border); }
.badge.bg-light, .badge.text-bg-light        { background: var(--s-bg-elevated) !important; color: var(--s-ink) !important; }
.badge.bg-dark, .badge.text-bg-dark          { background: var(--s-ink-strong) !important; color: var(--s-bg) !important; }

/* =============================================================================
   Bootstrap alerts → token-driven
   ============================================================================= */

.alert {
    border-radius: var(--s-radius-md);
    border-width: 1px;
    padding: var(--s-space-3) var(--s-space-4);
    font-size: var(--s-text-sm);
    line-height: var(--s-leading-snug);
    font-family: var(--s-font);
}
.alert-primary, .alert-info {
    background: var(--s-cyan-bg);
    color: var(--s-cyan-ink);
    border-color: color-mix(in oklab, var(--s-cyan) 32%, transparent);
}
.alert-success {
    background: var(--s-green-bg);
    color: var(--s-green-ink);
    border-color: color-mix(in oklab, var(--s-green) 32%, transparent);
}
.alert-warning {
    background: var(--s-amber-bg);
    color: var(--s-amber-ink);
    border-color: color-mix(in oklab, var(--s-amber) 32%, transparent);
}
.alert-danger {
    background: var(--s-red-bg);
    color: var(--s-red-ink);
    border-color: color-mix(in oklab, var(--s-red) 32%, transparent);
}
.alert-secondary {
    background: var(--s-bg-elevated);
    color: var(--s-ink);
    border-color: var(--s-border);
}

/* =============================================================================
   Bootstrap tables baseline
   ============================================================================= */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--s-ink);
    --bs-table-border-color: var(--s-border-soft);
    --bs-table-striped-bg: var(--s-bg-elevated);
    --bs-table-hover-bg: var(--s-bg-elevated);
    color: var(--s-ink);
    border-color: var(--s-border-soft);
}
.table > thead { color: var(--s-ink-soft); }
.table > thead.table-light { background: var(--s-bg-elevated); }
.table-light, .table > .table-light { background: var(--s-bg-elevated); color: var(--s-ink); }
.table-danger, .table > tbody > tr.table-danger > * { background: var(--s-red-bg); color: var(--s-red-ink); }
.table-warning, .table > tbody > tr.table-warning > * { background: var(--s-amber-bg); color: var(--s-amber-ink); }
.table-success, .table > tbody > tr.table-success > * { background: var(--s-green-bg); color: var(--s-green-ink); }
.table-info, .table > tbody > tr.table-info > * { background: var(--s-cyan-bg); color: var(--s-cyan-ink); }

/* =============================================================================
   Cards (Bootstrap baseline — most pages use .s-form-section, but a few use .card)
   ============================================================================= */

.card {
    background: var(--s-surface);
    color: var(--s-ink);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-lg);
}
.card-header {
    background: var(--s-bg-elevated);
    border-bottom: 1px solid var(--s-border);
    font-weight: var(--s-weight-semibold);
    color: var(--s-ink-strong);
    font-size: var(--s-text-sm);
    padding: var(--s-space-3) var(--s-space-4);
}
.card-body { padding: var(--s-space-4); }
.card-footer {
    background: var(--s-bg-elevated);
    border-top: 1px solid var(--s-border);
    color: var(--s-ink-soft);
    font-size: var(--s-text-sm);
}

/* =============================================================================
   Modals
   ============================================================================= */

.modal-content {
    background: var(--s-surface);
    color: var(--s-ink);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-xl);
    box-shadow: var(--s-shadow-xl);
}
.modal-header {
    border-bottom: 1px solid var(--s-border);
    padding: var(--s-space-4) var(--s-space-5);
}
.modal-title {
    font-family: var(--s-font-display);
    font-size: var(--s-text-lg);
    font-weight: var(--s-weight-semibold);
    color: var(--s-ink-strong);
    letter-spacing: var(--s-tracking-tight);
}
.modal-body { padding: var(--s-space-5); }
.modal-footer {
    border-top: 1px solid var(--s-border);
    padding: var(--s-space-3) var(--s-space-5);
    background: var(--s-bg-elevated);
}
.btn-close {
    filter: invert(var(--s-btn-close-invert, 0));
}
:root[data-theme="dark"] { --s-btn-close-invert: 1; }

/* =============================================================================
   Dropdowns
   ============================================================================= */

.dropdown-menu {
    background: var(--s-surface-raised);
    color: var(--s-ink);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-md);
    box-shadow: var(--s-shadow-lg);
    padding: var(--s-space-2);
}
.dropdown-item {
    color: var(--s-ink);
    border-radius: var(--s-radius-sm);
    padding: 6px var(--s-space-3);
    font-size: var(--s-text-sm);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--s-bg-elevated);
    color: var(--s-ink-strong);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--s-brand-primary);
    color: var(--s-ink-on-brand);
}
.dropdown-divider {
    border-color: var(--s-border-soft);
    margin: var(--s-space-1) 0;
}
.dropdown-header {
    color: var(--s-ink-muted);
    font-size: var(--s-text-xs);
    letter-spacing: var(--s-tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--s-weight-semibold);
    padding: var(--s-space-2) var(--s-space-3);
}

/* =============================================================================
   Links inside content cards
   ============================================================================= */

.link-primary { color: var(--s-brand-primary) !important; }
.link-secondary { color: var(--s-ink-soft) !important; }
.link-muted { color: var(--s-ink-muted) !important; }

/* =============================================================================
   Pagination
   ============================================================================= */

.pagination .page-link {
    color: var(--s-ink);
    background: var(--s-surface);
    border-color: var(--s-border);
    font-size: var(--s-text-sm);
    padding: 6px 12px;
}
.pagination .page-link:hover {
    background: var(--s-bg-elevated);
    border-color: var(--s-border-strong);
    color: var(--s-ink-strong);
}
.pagination .page-item.active .page-link {
    background: var(--s-brand-primary);
    border-color: var(--s-brand-primary);
    color: var(--s-ink-on-brand);
}
.pagination .page-item.disabled .page-link {
    color: var(--s-ink-faint);
    background: var(--s-surface);
}

/* =============================================================================
   Progress bars
   ============================================================================= */

.progress {
    background: var(--s-bg-elevated);
    border-radius: var(--s-radius-full);
    height: 6px;
    overflow: hidden;
}
.progress-bar {
    background: var(--s-brand-primary);
}

/* =============================================================================
   Tooltips
   ============================================================================= */

.tooltip-inner {
    background: var(--s-ink-strong);
    color: var(--s-bg);
    font-size: var(--s-text-xs);
    padding: 4px 8px;
    border-radius: var(--s-radius-sm);
}

/* =============================================================================
   Combobox (custom widget — dark-mode friendly)
   ============================================================================= */

.combobox-panel, .combobox-list {
    background: var(--s-surface-raised);
    border: 1px solid var(--s-border);
    color: var(--s-ink);
    box-shadow: var(--s-shadow-lg);
    border-radius: var(--s-radius-md);
}
.combobox-option, .combobox-list li {
    color: var(--s-ink);
    padding: 6px var(--s-space-3);
}
.combobox-option:hover, .combobox-option.is-active, .combobox-list li:hover, .combobox-list li.is-active {
    background: var(--s-bg-elevated);
    color: var(--s-ink-strong);
}

/* =============================================================================
   Container helpers
   ============================================================================= */

.container, .container-fluid { color: var(--s-ink); }

/* =============================================================================
   Disable Bootstrap's default focus blue — we use emerald
   ============================================================================= */

*:focus-visible {
    outline: none;
}
.form-control:focus, .form-select:focus, .form-check-input:focus,
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus,
.page-link:focus {
    box-shadow: var(--s-shadow-focus);
}