/* ============================================================================================ */
/* DARK THEME: COMPONENTS                                                                        */
/* Bootstrap 5 / Pixel Admin components whose colors are hard-coded in vendor CSS: dropdowns,   */
/* modals, popovers, alerts, list groups, tabs, pagination, accordions, light buttons/badges.   */
/* The navbar keeps its brand-colored dropdowns in both themes.                                  */
/* ============================================================================================ */

/* DROPDOWN MENUS (outside the navbar) -------------------------------------------------------- */
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: 0 0.5rem 1rem var(--app-shadow-color);
}
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item,
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) > li > a {
    color: var(--app-text);
}
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) > li > a:hover {
    background-color: var(--app-surface-3);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item.active,
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item:active {
    background-color: var(--app-color-primary);
    color: var(--app-text-on-color);
}
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-item.disabled,
html[data-theme="dark"] .dropdown-menu:not(#main-navbar .dropdown-menu) .dropdown-header {
    color: var(--app-text-muted);
}
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .dropdown-menu .divider {
    border-color: var(--app-border);
    background-color: var(--app-border);
}

/* MODALS ------------------------------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--app-surface-1); /* Pixel Admin paints .modal-header #f8f8f8 */
    border-color: var(--app-border);
}

/* POPOVERS & TOOLTIPS ------------------------------------------------------------------------ */
html[data-theme="dark"] .popover {
    background-color: var(--app-surface-1);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .popover-title {
    background-color: var(--app-surface-3);
    border-color: var(--app-border);
    color: var(--app-text-heading);
}
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .popover-content {
    color: var(--app-text);
}
html[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--app-surface-1);
}
html[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--app-surface-1);
}
html[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--app-surface-3);
}
html[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--app-surface-1);
}
html[data-theme="dark"] .bs-popover-top > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-end > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-bottom > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-start > .popover-arrow::before {
    border-color: transparent;
}
html[data-theme="dark"] .tooltip-inner {
    background-color: #e9ecef;
    color: #15181c;
}
html[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #e9ecef;
}
html[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #e9ecef;
}
html[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #e9ecef;
}
html[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #e9ecef;
}

/* ALERTS ------------------------------------------------------------------------------------- */
html[data-theme="dark"] .alert {
    border-color: var(--app-border);
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary {
    background-color: var(--app-tint-info-bg);
    border-color: #1b4a78;
    color: var(--app-tint-info-text);
}
html[data-theme="dark"] .alert-success {
    background-color: var(--app-tint-success-bg);
    border-color: #1f5a40;
    color: var(--app-tint-success-text);
}
html[data-theme="dark"] .alert-warning {
    background-color: var(--app-tint-warning-bg);
    border-color: #6b5517;
    color: var(--app-tint-warning-text);
}
html[data-theme="dark"] .alert-danger {
    background-color: var(--app-tint-danger-bg);
    border-color: #72262f;
    color: var(--app-tint-danger-text);
}
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .alert-light > * {
    color: var(--app-text);
}
html[data-theme="dark"] .alert .alert-link,
html[data-theme="dark"] .alert a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

/* LIST GROUPS -------------------------------------------------------------------------------- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus,
html[data-theme="dark"] .list-group > .list-group-item:hover {
    background-color: var(--app-surface-2);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .list-group > .list-group-item.active {
    background-color: var(--app-color-primary-opaque-4);
    border-color: var(--app-color-primary);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .list-group-item.disabled,
html[data-theme="dark"] .list-group-item:disabled {
    color: var(--app-text-faint);
}

/* NAV TABS & PILLS --------------------------------------------------------------------------- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--app-border);
}
html[data-theme="dark"] .nav-tabs > li > a,
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--app-text);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--app-surface);
    border-color: var(--app-border) var(--app-border) transparent;
    color: var(--app-text-strong);
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
}
html[data-theme="dark"] .nav-pills .nav-link:not(.active),
html[data-theme="dark"] .nav-pills > li:not(.active) > a {
    color: var(--app-text);
}
html[data-theme="dark"] .tab-content {
    color: var(--app-text);
}

/* PAGINATION --------------------------------------------------------------------------------- */
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .pagination > li > a:hover {
    background-color: var(--app-surface-3);
    border-color: var(--app-border);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .pagination > li.active > a,
html[data-theme="dark"] .pagination > li.active > span {
    background-color: var(--app-color-primary);
    border-color: var(--app-color-primary);
    color: var(--app-text-on-color);
}
html[data-theme="dark"] .page-item.disabled .page-link,
html[data-theme="dark"] .pagination > li.disabled > a,
html[data-theme="dark"] .pagination > li.disabled > span {
    background-color: var(--app-surface-1);
    border-color: var(--app-border);
    color: var(--app-text-faint);
}

/* ACCORDIONS: body fill comes from --acc-body-bg (agency-platform.css); the default variant's  */
/* secondary-gray heading text is too dim on dark, so lift it                                    */
html[data-theme="dark"] .accordion-item {
    background-color: transparent;
    color: var(--app-text);
}
html[data-theme="dark"] .accordion:not([class*="accordion-"]) {
    --acc-head-color: var(--app-text-secondary);
    --acc-head-color-hover: var(--app-text);
}

/* BUTTONS: only the "light" family needs flipping; filled brand/status buttons keep white text */
html[data-theme="dark"] .btn-light {
    --btn-bg-color: var(--app-surface-3);
    --btn-bg-color-active: var(--app-surface-4);
    --btn-border-color: var(--app-border);
    --btn-color: var(--app-text);
    background-color: var(--app-surface-3);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--app-surface-4);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
    border-color: var(--app-border-color-dark);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--app-surface-3);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .btn-link {
    color: var(--app-link);
}

/* BADGES & LABELS ---------------------------------------------------------------------------- */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.badge-light,
html[data-theme="dark"] .label-default,
html[data-theme="dark"] .label-light {
    background-color: var(--app-surface-3) !important;
    border-color: var(--app-border);
    color: var(--app-text) !important;
}

/* PIXEL ADMIN NOTES (.note callouts) & CHAT BUBBLES ----------------------------------------- */
html[data-theme="dark"] .note {
    background: var(--app-surface-1);
    border-color: var(--app-border-color-dark);
    color: var(--app-text);
}
html[data-theme="dark"] .note.note-info {
    background: var(--app-tint-info-bg);
}
html[data-theme="dark"] .note.note-success {
    background: var(--app-tint-success-bg);
}
html[data-theme="dark"] .note.note-warning {
    background: var(--app-tint-warning-bg);
}
html[data-theme="dark"] .note.note-danger {
    background: var(--app-tint-danger-bg);
}
html[data-theme="dark"] .note .note-title {
    color: var(--app-text-heading);
}
html[data-theme="dark"] .widget-chat .message-text,
html[data-theme="dark"] .message-text {
    background: var(--app-surface-3);
    color: var(--app-text);
}
html[data-theme="dark"] .widget-chat .message-text:before {
    border-color: transparent var(--app-surface-3) transparent transparent;
}
html[data-theme="dark"] .widget-chat .message.right .message-text:before {
    border-color: transparent transparent transparent var(--app-surface-3);
}

/* PROGRESS, BREADCRUMB, CARD BITS ------------------------------------------------------------ */
html[data-theme="dark"] .progress {
    background-color: var(--app-surface-3);
}
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
    color: var(--app-text-muted);
}
html[data-theme="dark"] .card-footer {
    background-color: var(--app-surface-1);
    border-color: var(--app-border);
}
html[data-theme="dark"] .card-header {
    border-color: var(--app-border);
}
html[data-theme="dark"] .page-header {
    border-color: var(--app-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}