/*
 * Admin Dark Theme — Bootstrap 5.3 variable overrides
 * Applies MC brand palette on top of data-bs-theme="dark"
 */

/* ============================================================
   Bootstrap 5.3 CSS variable overrides — MC brand colors
   ============================================================ */
[data-bs-theme="dark"] {
    /* Tells the browser/OS to render native widgets (select dropdown list,
       date/time pickers, scrollbars) in dark chrome — without this, the
       <option> popup for a <select> falls back to native light rendering
       and its text (forced white by .form-select below) becomes invisible
       white-on-white until an option is hovered. */
    color-scheme: dark;

    --bs-body-bg:             var(--mc-bg-page);
    --bs-body-bg-rgb:         11, 13, 15;
    --bs-body-color:          var(--mc-text-primary);
    --bs-body-color-rgb:      244, 244, 241;

    --bs-primary:             var(--mc-primary);
    --bs-primary-rgb:         var(--mc-primary-rgb);
    --bs-primary-text-emphasis: var(--mc-link);
    --bs-primary-bg-subtle:   var(--mc-primary-bg-subtle);
    --bs-primary-border-subtle: var(--mc-primary-border-subtle);

    --bs-secondary-color:     var(--mc-text-secondary);
    --bs-tertiary-color:      var(--mc-text-muted);
    --bs-tertiary-bg:         var(--mc-bg-card);
    --bs-emphasis-color:      var(--mc-text-primary);

    --bs-link-color:          var(--mc-link);
    --bs-link-color-rgb:      255, 122, 71;
    --bs-link-hover-color:    var(--mc-link-hover);
    --bs-link-hover-color-rgb: 255, 160, 122;

    --bs-card-bg:             var(--mc-bg-card);
    --bs-card-border-color:   var(--mc-border-color);
    --bs-card-cap-bg:         var(--mc-bg-page);

    --bs-modal-bg:            var(--mc-bg-card);
    --bs-modal-header-bg:     var(--mc-bg-page);
    --bs-modal-border-color:  var(--mc-border-color);

    --bs-dropdown-bg:         var(--mc-bg-card);
    --bs-dropdown-border-color: var(--mc-border-color);
    --bs-dropdown-link-color: var(--mc-text-primary);
    --bs-dropdown-link-hover-bg: var(--mc-bg-hover);
    --bs-dropdown-link-active-bg: var(--mc-primary);
    --bs-dropdown-link-active-color: var(--mc-on-primary);

    --bs-nav-tabs-border-color:        var(--mc-border-color);
    --bs-nav-tabs-link-hover-border-color: var(--mc-border-color);
    --bs-nav-tabs-link-active-color:   var(--mc-text-primary);
    --bs-nav-tabs-link-active-bg:      var(--mc-bg-card);
    --bs-nav-tabs-link-active-border-color: var(--mc-border-color) var(--mc-border-color) var(--mc-bg-card);

    --bs-nav-pills-link-active-bg:     var(--mc-primary);
    --bs-nav-pills-link-active-color:  var(--mc-on-primary);

    --bs-list-group-bg:         var(--mc-bg-card);
    --bs-list-group-border-color: var(--mc-border-color);
    --bs-list-group-color:      var(--mc-text-primary);
    --bs-list-group-action-color: var(--mc-text-secondary);
    --bs-list-group-action-hover-color: var(--mc-text-primary);
    --bs-list-group-action-hover-bg:  var(--mc-bg-hover);
    --bs-list-group-action-active-bg: var(--mc-border-color);
    --bs-list-group-active-bg:  var(--mc-primary);
    --bs-list-group-active-color: var(--mc-on-primary);
    --bs-list-group-active-border-color: var(--mc-primary);

    --bs-input-bg:              var(--mc-bg-page);
    --bs-input-border-color:    var(--mc-border-color);
    --bs-input-color:           var(--mc-text-primary);
    --bs-input-placeholder-color: var(--mc-text-muted);
    --bs-input-focus-border-color: var(--mc-primary);
    --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(var(--mc-primary-rgb), .35);

    --bs-table-bg:              transparent;
    --bs-table-striped-bg:      rgba(255,255,255,0.03);
    --bs-table-hover-bg:        rgba(var(--mc-primary-rgb), 0.12);
    --bs-table-border-color:    var(--mc-border-color);

    --bs-border-color:          var(--mc-border-color);
    --bs-border-color-translucent: rgba(44, 50, 56, 0.8);

    --bs-success:               #28A745;
    --bs-info:                  #17A2B8;
    --bs-warning:               #FFC107;
    --bs-danger:                #DC3545;
    --bs-light:                 var(--mc-bg-raised);
    --bs-dark:                  var(--mc-bg-page);

    --bs-body-font-family:      var(--mc-font-family);
    --bs-font-monospace:        var(--mc-font-mono);
}

/* ============================================================
   Body & page background
   ============================================================ */
[data-bs-theme="dark"] body {
    background-color: var(--mc-bg-page);
}

/* ============================================================
   Navbar — MC card background + purple border
   ============================================================ */
[data-bs-theme="dark"] .navbar {
    background-color: var(--mc-bg-card) !important;
    border-bottom: 1px solid var(--mc-border-color) !important;
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
    color: var(--mc-text-primary) !important;
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link:focus {
    color: var(--mc-link) !important;
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* ============================================================
   Card overrides
   ============================================================ */
[data-bs-theme="dark"] .card {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--mc-bg-page);
    border-bottom-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--mc-bg-page);
    border-top-color: var(--mc-border-color);
}

/* ============================================================
   bg-white / bg-light — Bootstrap dark mode doesn't auto-fix these
   ============================================================ */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--mc-bg-card) !important;
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--mc-bg-raised) !important;
    color: var(--mc-text-primary) !important;
}

/* ============================================================
   Forms — inputs, selects, textareas
   ============================================================ */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--mc-bg-page);
    border-color: var(--mc-border-color);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--mc-primary-rgb), .35);
    background-color: var(--mc-bg-page);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--mc-text-muted);
}

[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] select option {
    background-color: var(--mc-bg-page);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .form-control:read-only {
    background-color: var(--mc-bg-card);
    color: var(--mc-text-secondary);
}

[data-bs-theme="dark"] .form-text {
    color: var(--mc-text-muted);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color);
    color: var(--mc-text-secondary);
}

/* ============================================================
   Buttons — primary uses MC purple
   ============================================================ */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: var(--mc-on-primary);
    --bs-btn-bg: var(--mc-primary);
    --bs-btn-border-color: var(--mc-primary);
    --bs-btn-hover-color: var(--mc-on-primary);
    --bs-btn-hover-bg: var(--mc-primary-hover);
    --bs-btn-hover-border-color: var(--mc-primary-hover);
    --bs-btn-active-color: var(--mc-on-primary);
    --bs-btn-active-bg: var(--mc-primary-hover);
    --bs-btn-active-border-color: var(--mc-primary-hover);
    --bs-btn-disabled-color: var(--mc-on-primary);
    --bs-btn-disabled-bg: var(--mc-primary);
    --bs-btn-disabled-border-color: var(--mc-primary);
    --bs-btn-focus-shadow-rgb: var(--mc-primary-rgb);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--mc-link);
    --bs-btn-border-color: var(--mc-primary);
    --bs-btn-hover-color: var(--mc-on-primary);
    --bs-btn-hover-bg: var(--mc-primary);
    --bs-btn-hover-border-color: var(--mc-primary);
    --bs-btn-active-color: var(--mc-on-primary);
    --bs-btn-active-bg: var(--mc-primary);
    --bs-btn-active-border-color: var(--mc-primary);
    --bs-btn-focus-shadow-rgb: var(--mc-primary-rgb);
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: var(--mc-border-color);
    border-color: var(--mc-border-color);
    color: var(--mc-text-secondary);
}

[data-bs-theme="dark"] .btn-secondary:hover {
    background-color: var(--mc-bg-hover);
    border-color: var(--mc-bg-hover);
}

[data-bs-theme="dark"] .btn-warning {
    background-color: #FFC107;
    border-color: #FFC107;
    color: #000000;
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   Tables
   ============================================================ */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(var(--mc-primary-rgb), 0.12);
    --bs-table-border-color: var(--mc-border-color);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .table thead th {
    border-bottom-color: var(--mc-primary);
    color: var(--mc-text-secondary);
}

/* Bootstrap gives contextual rows dark text (--bs-table-color); on a dark page that is dark-on-dark. */
[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: rgba(255,193,7,0.12);
    --bs-table-border-color: rgba(255,193,7,0.3);
    --bs-table-color: var(--mc-text-primary);
    --bs-table-striped-color: var(--mc-text-primary);
    --bs-table-hover-color: var(--mc-text-primary);
    --bs-table-active-color: var(--mc-text-primary);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .sticky-top {
    background-color: var(--mc-bg-card) !important;
}

/* ============================================================
   List groups
   ============================================================ */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
    color: var(--mc-on-primary);
}

[data-bs-theme="dark"] .list-group-item-danger {
    background-color: rgba(220,53,69,0.15);
    color: #ff8896;
    border-color: rgba(220,53,69,0.3);
}

[data-bs-theme="dark"] .list-group-item-warning {
    background-color: rgba(255,193,7,0.12);
    color: #ffd966;
    border-color: rgba(255,193,7,0.3);
}

[data-bs-theme="dark"] .list-group-flush .list-group-item {
    border-color: var(--mc-border-color);
}

/* ============================================================
   Alerts
   ============================================================ */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(23,162,184,0.12);
    border-color: rgba(23,162,184,0.4);
    color: #5dd7ea;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(40,167,69,0.12);
    border-color: rgba(40,167,69,0.4);
    color: #72d58a;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220,53,69,0.12);
    border-color: rgba(220,53,69,0.4);
    color: #ff8896;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255,193,7,0.12);
    border-color: rgba(255,193,7,0.4);
    color: #ffd966;
}

/* ============================================================
   Modals
   ============================================================ */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .modal-header {
    background-color: var(--mc-bg-page);
    border-bottom-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .modal-footer {
    background-color: var(--mc-bg-page);
    border-top-color: var(--mc-border-color);
}

/* ============================================================
   Dropdowns
   ============================================================ */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--mc-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--mc-bg-hover);
    color: var(--mc-link);
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item.active:hover,
[data-bs-theme="dark"] .dropdown-item.active:focus,
[data-bs-theme="dark"] .dropdown-item:active {
    background-color: var(--mc-primary);
    color: var(--mc-on-primary);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .dropdown-toggle::after {
    border-top-color: var(--mc-text-secondary);
}

/* ============================================================
   Badges — warning needs dark text, rest stay as-is
   ============================================================ */
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary {
    background-color: var(--mc-primary) !important;
}

/* bg-primary surfaces (badges, chat bubbles) often carry text-white; light text on orange is too faint */
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .bg-primary.text-white,
[data-bs-theme="dark"] .bg-primary .text-white,
[data-bs-theme="dark"] .bg-primary .text-muted,
[data-bs-theme="dark"] .bg-primary a {
    color: var(--mc-on-primary) !important;
}

[data-bs-theme="dark"] .bg-primary .text-white-50 {
    color: rgba(11, 13, 15, 0.65) !important;
}

/* ============================================================
   Nav tabs
   ============================================================ */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--mc-text-secondary);
    border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--mc-border-color);
    color: var(--mc-text-primary);
}

/* !important: the global .nav-link rule above forces light text with !important */
[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills .show > .nav-link {
    background-color: var(--mc-primary);
    color: var(--mc-on-primary) !important;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--mc-primary-rgb), 0.25);
}

[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ff5a1f'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--mc-bg-card);
    border-color: var(--mc-border-color) var(--mc-border-color) var(--mc-bg-card);
    color: var(--mc-text-primary);
}

/* ============================================================
   Pre / code (log viewer)
   ============================================================ */
[data-bs-theme="dark"] pre {
    background-color: var(--mc-bg-page);
    color: var(--mc-text-secondary);
    border: 1px solid var(--mc-border-color);
    border-radius: 6px;
    padding: 12px;
}

/* ============================================================
   Footer
   ============================================================ */
[data-bs-theme="dark"] footer.footer {
    background-color: var(--mc-bg-card);
    border-top-color: var(--mc-border-color) !important;
    color: var(--mc-text-muted);
}

[data-bs-theme="dark"] footer.footer a {
    color: var(--mc-link);
}

/* ============================================================
   Chat page — message bubbles
   ============================================================ */
[data-bs-theme="dark"] .p-2.rounded.bg-light {
    background-color: var(--mc-bg-raised) !important;
    color: var(--mc-text-primary) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--mc-text-muted) !important;
}

/* ============================================================
   Tracking page sidebar override (inline style override)
   ============================================================ */
[data-bs-theme="dark"] .tracking-sidebar {
    background: rgba(19, 23, 27, 0.98) !important;
    color: var(--mc-text-primary);
}

/* ============================================================
   Misc
   ============================================================ */
[data-bs-theme="dark"] hr {
    border-color: var(--mc-border-color);
}

[data-bs-theme="dark"] .border {
    border-color: var(--mc-border-color) !important;
}

[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom {
    border-color: var(--mc-border-color) !important;
}

/* :where() keeps these at element specificity so component classes (mc-button, mc-menu-tile,
   bg-primary surfaces...) still set their own text colour instead of turning into link colour. */
:where([data-bs-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

:where([data-bs-theme="dark"]) a {
    color: var(--mc-link);
}

:where([data-bs-theme="dark"]) a:hover {
    color: var(--mc-link-hover);
}

/* Keep danger links red */
[data-bs-theme="dark"] .text-danger {
    color: #ff8896 !important;
}

[data-bs-theme="dark"] .text-success {
    color: #72d58a !important;
}

[data-bs-theme="dark"] .text-warning {
    color: #ffd966 !important;
}

[data-bs-theme="dark"] .text-info {
    color: #5dd7ea !important;
}