/*
 * Final dark-mode component bridge for every Palacios web surface.
 *
 * This file is intentionally loaded after page-specific styles. Light mode is
 * untouched; dark mode keeps Bootstrap's semantic button colors, derives the
 * primary treatment from the selected accent, and supplies consistent
 * hover/active/focus feedback for tabs, links, and custom button-like controls.
 */

html[data-theme="dark"] {
  --pe-dark-fg: var(--fg, var(--text, #e5e7eb));
  --pe-dark-muted: var(--muted, #9aa4b2);
  --pe-dark-surface: var(--surface, #12161c);
  --pe-dark-surface-raised: color-mix(in srgb, var(--pe-dark-surface) 86%, white 14%);
  --pe-dark-border: var(--border, #2a2e33);
  --pe-dark-accent: var(--accent, #3b82f6);
  --pe-dark-on-accent: var(--on-accent, var(--accent-contrast, #ffffff));
  --pe-dark-accent-soft: color-mix(in srgb, var(--pe-dark-accent) 16%, var(--pe-dark-surface));
  --pe-dark-accent-hover: color-mix(in srgb, var(--pe-dark-accent) 24%, var(--pe-dark-surface));

  --pe-dark-secondary: #475569;
  --pe-dark-secondary-hover: #64748b;
  --pe-dark-success: #22c55e;
  --pe-dark-success-hover: #4ade80;
  --pe-dark-danger: #dc2626;
  --pe-dark-danger-hover: #ef4444;
  --pe-dark-warning: #f59e0b;
  --pe-dark-warning-hover: #fbbf24;
  --pe-dark-info: #0ea5e9;
  --pe-dark-info-hover: #38bdf8;
  --pe-dark-on-bright: #071016;
}

html[data-theme="dark"] :where(button, .btn, .nav-link, .page-link, .dropdown-item, .list-group-item-action) {
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

html[data-theme="dark"] :where(button, .btn):focus-visible,
html[data-theme="dark"] :where(.nav-link, .page-link, .dropdown-item, .list-group-item-action):focus-visible {
  outline: 2px solid var(--pe-dark-accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pe-dark-accent) 24%, transparent) !important;
}

/* Solid semantic buttons. */
html[data-theme="dark"] .btn-primary {
  background: var(--pe-dark-accent) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 78%, black) !important;
  color: var(--pe-dark-on-accent) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active,
html[data-theme="dark"] .show > .btn-primary.dropdown-toggle {
  background: color-mix(in srgb, var(--pe-dark-accent) 86%, white 14%) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 88%, white 12%) !important;
  color: var(--pe-dark-on-accent) !important;
  filter: none !important;
}

html[data-theme="dark"] .btn-secondary {
  background: var(--pe-dark-secondary) !important;
  border-color: var(--pe-dark-secondary-hover) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus,
html[data-theme="dark"] .btn-secondary:active,
html[data-theme="dark"] .btn-secondary.active {
  background: var(--pe-dark-secondary-hover) !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-success {
  background: var(--pe-dark-success) !important;
  border-color: #16a34a !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn-success:active,
html[data-theme="dark"] .btn-success.active {
  background: var(--pe-dark-success-hover) !important;
  border-color: var(--pe-dark-success) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-danger {
  background: var(--pe-dark-danger) !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus,
html[data-theme="dark"] .btn-danger:active,
html[data-theme="dark"] .btn-danger.active {
  background: var(--pe-dark-danger-hover) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-warning {
  background: var(--pe-dark-warning) !important;
  border-color: #d97706 !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .btn-warning:active,
html[data-theme="dark"] .btn-warning.active {
  background: var(--pe-dark-warning-hover) !important;
  border-color: var(--pe-dark-warning) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-info {
  background: var(--pe-dark-info) !important;
  border-color: #0284c7 !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:focus,
html[data-theme="dark"] .btn-info:active,
html[data-theme="dark"] .btn-info.active {
  background: var(--pe-dark-info-hover) !important;
  border-color: var(--pe-dark-info) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-light {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-light:active,
html[data-theme="dark"] .btn-light.active {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #020617 !important;
}

html[data-theme="dark"] .btn-dark {
  background: #020617 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .btn-dark:focus,
html[data-theme="dark"] .btn-dark:active,
html[data-theme="dark"] .btn-dark.active {
  background: #0f172a !important;
  border-color: #64748b !important;
  color: #ffffff !important;
}

/* Outline variants retain their identity before filling on interaction. */
html[data-theme="dark"] .btn-outline-primary {
  background: transparent !important;
  border-color: var(--pe-dark-accent) !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 88%, white 12%) !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:active,
html[data-theme="dark"] .btn-outline-primary.active {
  background: var(--pe-dark-accent) !important;
  border-color: var(--pe-dark-accent) !important;
  color: var(--pe-dark-on-accent) !important;
}

html[data-theme="dark"] .btn-outline-secondary {
  background: transparent !important;
  border-color: #64748b !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:active,
html[data-theme="dark"] .btn-outline-secondary.active {
  background: var(--pe-dark-secondary) !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-success {
  background: transparent !important;
  border-color: var(--pe-dark-success) !important;
  color: #4ade80 !important;
}

html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success:focus,
html[data-theme="dark"] .btn-outline-success:active,
html[data-theme="dark"] .btn-outline-success.active {
  background: var(--pe-dark-success) !important;
  border-color: var(--pe-dark-success-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-outline-danger {
  background: transparent !important;
  border-color: var(--pe-dark-danger-hover) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus,
html[data-theme="dark"] .btn-outline-danger:active,
html[data-theme="dark"] .btn-outline-danger.active {
  background: var(--pe-dark-danger) !important;
  border-color: var(--pe-dark-danger-hover) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-warning {
  background: transparent !important;
  border-color: var(--pe-dark-warning) !important;
  color: var(--pe-dark-warning-hover) !important;
}

html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-warning:focus,
html[data-theme="dark"] .btn-outline-warning:active,
html[data-theme="dark"] .btn-outline-warning.active {
  background: var(--pe-dark-warning) !important;
  border-color: var(--pe-dark-warning-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-outline-info {
  background: transparent !important;
  border-color: var(--pe-dark-info) !important;
  color: var(--pe-dark-info-hover) !important;
}

html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-info:focus,
html[data-theme="dark"] .btn-outline-info:active,
html[data-theme="dark"] .btn-outline-info.active {
  background: var(--pe-dark-info) !important;
  border-color: var(--pe-dark-info-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

html[data-theme="dark"] .btn-outline-light {
  background: transparent !important;
  border-color: #cbd5e1 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:focus,
html[data-theme="dark"] .btn-outline-light:active,
html[data-theme="dark"] .btn-outline-light.active {
  background: #e2e8f0 !important;
  border-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .btn-outline-dark {
  background: transparent !important;
  border-color: #64748b !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus,
html[data-theme="dark"] .btn-outline-dark:active,
html[data-theme="dark"] .btn-outline-dark.active {
  background: #020617 !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

/* Links, neutral buttons, and custom soft controls. */
html[data-theme="dark"] .btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 88%, white 12%) !important;
}

html[data-theme="dark"] .btn-link:hover,
html[data-theme="dark"] .btn-link:focus,
html[data-theme="dark"] .btn-link:active {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 45%, transparent) !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 76%, white 24%) !important;
}

html[data-theme="dark"] :where(.btn-soft, .nav-row) {
  background: var(--pe-dark-surface-raised) !important;
  border-color: var(--pe-dark-border) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] :where(.btn-soft, .nav-row):hover,
html[data-theme="dark"] :where(.btn-soft, .nav-row):focus {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 60%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] .nav-row.active {
  background: var(--pe-dark-accent-hover) !important;
  border-color: var(--pe-dark-accent) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] .btn-soft-primary {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 55%, var(--pe-dark-border)) !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 82%, white 18%) !important;
}

html[data-theme="dark"] .btn-soft-primary:hover,
html[data-theme="dark"] .btn-soft-primary:focus {
  background: var(--pe-dark-accent-hover) !important;
  border-color: var(--pe-dark-accent) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] .btn-soft-danger {
  background: color-mix(in srgb, var(--pe-dark-danger) 15%, var(--pe-dark-surface)) !important;
  border-color: color-mix(in srgb, var(--pe-dark-danger) 55%, var(--pe-dark-border)) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .btn-soft-danger:hover,
html[data-theme="dark"] .btn-soft-danger:focus {
  background: color-mix(in srgb, var(--pe-dark-danger) 28%, var(--pe-dark-surface)) !important;
  border-color: var(--pe-dark-danger-hover) !important;
  color: #fee2e2 !important;
}

/* Tabs, pills, menus, pagination, and button-like content rows. */
html[data-theme="dark"] .nav-tabs .nav-link:not(.active),
html[data-theme="dark"] .nav-pills .nav-link:not(.active) {
  background: var(--pe-dark-surface) !important;
  border-color: var(--pe-dark-border) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link:not(.active):hover,
html[data-theme="dark"] .nav-tabs .nav-link:not(.active):focus,
html[data-theme="dark"] .nav-pills .nav-link:not(.active):hover,
html[data-theme="dark"] .nav-pills .nav-link:not(.active):focus {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 58%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  text-decoration: none;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills .nav-link.active {
  background: var(--pe-dark-accent-hover) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 72%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  box-shadow: inset 0 -2px 0 var(--pe-dark-accent) !important;
}

html[data-theme="dark"] :where(.dropdown-item, .list-group-item-action, .page-link) {
  background: var(--pe-dark-surface) !important;
  border-color: var(--pe-dark-border) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] :where(.dropdown-item, .list-group-item-action, .page-link):hover,
html[data-theme="dark"] :where(.dropdown-item, .list-group-item-action, .page-link):focus {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 55%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  text-decoration: none;
}

html[data-theme="dark"] :where(.dropdown-item, .list-group-item-action, .page-item.active .page-link).active,
html[data-theme="dark"] .page-item.active .page-link {
  background: var(--pe-dark-accent) !important;
  border-color: var(--pe-dark-accent) !important;
  color: var(--pe-dark-on-accent) !important;
}

html[data-theme="dark"] .dashboard-container .dashboard-btn:is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, #36ff36 22%, var(--pe-dark-surface)) !important;
  border-color: color-mix(in srgb, #36ff36 68%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, #36ff36 18%, transparent) !important;
}

html[data-theme="dark"] .dashboard-container .nsn-btn:is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, #fff71e 22%, var(--pe-dark-surface)) !important;
  border-color: color-mix(in srgb, #fff71e 70%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, #fff71e 16%, transparent) !important;
}

html[data-theme="dark"] .dashboard-container .dashboard-btn,
html[data-theme="dark"] .dashboard-container .nsn-btn {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

html[data-theme="dark"] :where(.clickable, .device-item):hover,
html[data-theme="dark"] :where(.clickable, .device-item):focus {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 58%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] :where(button, .btn, .nav-link, .page-link, .dropdown-item, .list-group-item-action):disabled,
html[data-theme="dark"] :where(button, .btn, .nav-link, .page-link, .dropdown-item, .list-group-item-action).disabled {
  opacity: .52;
  cursor: not-allowed;
  filter: saturate(.65);
  box-shadow: none !important;
}

html[data-theme="dark"] .btn-close {
  background-color: transparent !important;
  border-color: transparent !important;
  filter: invert(1) grayscale(1) brightness(1.75);
}

html[data-theme="dark"] .btn-close:hover,
html[data-theme="dark"] .btn-close:focus {
  background-color: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 45%, transparent) !important;
  opacity: 1;
}

/* Standalone Email and File Manager surfaces use these shared shells. */
html[data-theme="dark"] :where(.email-app, .email-header, .email-nav, .email-panel, .panel-toolbar, .message-view) {
  background: var(--pe-dark-surface) !important;
  color: var(--pe-dark-fg) !important;
  border-color: var(--pe-dark-border) !important;
}

html[data-theme="dark"] :where(.navbar, .footer, footer) {
  background: var(--pe-dark-surface) !important;
  color: var(--pe-dark-fg) !important;
  border-color: var(--pe-dark-border) !important;
}

html[data-theme="dark"] :where(.footer, footer) {
  border-top: 1px solid var(--pe-dark-border) !important;
}

html[data-theme="dark"] :where(.accordion-item, .accordion-button, .input-group-text) {
  background: var(--pe-dark-surface) !important;
  color: var(--pe-dark-fg) !important;
  border-color: var(--pe-dark-border) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--pe-dark-accent-soft) !important;
  color: var(--pe-dark-fg) !important;
  box-shadow: inset 0 -1px 0 var(--pe-dark-border) !important;
}

html[data-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.6);
}

html[data-theme="dark"] :where(.message-row, .folder-item, .modal-folder-item, .list-group-item) {
  background: var(--pe-dark-surface) !important;
  color: var(--pe-dark-fg) !important;
  border-color: var(--pe-dark-border) !important;
}

html[data-theme="dark"] :where(.message-row, .folder-item, .modal-folder-item, .list-group-item):hover {
  background: var(--pe-dark-accent-soft) !important;
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] .folder-caret {
  color: var(--pe-dark-fg) !important;
}

html[data-theme="dark"] :where(.create-folder-btn, .edit-folder-btn) {
  background: transparent !important;
  border-color: transparent !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 88%, white 12%) !important;
}

html[data-theme="dark"] :where(.create-folder-btn, .edit-folder-btn):hover,
html[data-theme="dark"] :where(.create-folder-btn, .edit-folder-btn):focus {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 55%, transparent) !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 76%, white 24%) !important;
}

html[data-theme="dark"] .delete-folder-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .delete-folder-btn:hover,
html[data-theme="dark"] .delete-folder-btn:focus {
  background: color-mix(in srgb, var(--pe-dark-danger) 18%, var(--pe-dark-surface)) !important;
  border-color: color-mix(in srgb, var(--pe-dark-danger) 55%, transparent) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .active-folder {
  color: color-mix(in srgb, var(--pe-dark-accent) 82%, white 18%) !important;
}

/* Connected Viewer cards use dark role-tinted surfaces, so their names need
   dark-theme foreground text; badge pills retain their own contrast color. */
:root[data-theme="dark"][data-theme] #hierarchy-canvas .user-item,
:root[data-theme="dark"][data-theme] #hierarchy-canvas .user-item-name {
  color: var(--pe-dark-fg) !important;
}

/*
 * The legacy theme contains a few high-specificity icon-accent selectors.
 * Keep this final normalization last so semantic variants and their icons win.
 */
:root[data-theme="dark"][data-theme] .btn-outline-primary {
  background: transparent !important;
  border-color: var(--pe-dark-accent) !important;
  color: color-mix(in srgb, var(--pe-dark-accent) 88%, white 12%) !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-secondary {
  background: transparent !important;
  border-color: #64748b !important;
  color: #cbd5e1 !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-success {
  background: transparent !important;
  border-color: var(--pe-dark-success) !important;
  color: #4ade80 !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-danger {
  background: transparent !important;
  border-color: var(--pe-dark-danger-hover) !important;
  color: #f87171 !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-warning {
  background: transparent !important;
  border-color: var(--pe-dark-warning) !important;
  color: var(--pe-dark-warning-hover) !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-info {
  background: transparent !important;
  border-color: var(--pe-dark-info) !important;
  color: var(--pe-dark-info-hover) !important;
}

:root[data-theme="dark"][data-theme] :is(
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-success,
  .btn-outline-danger,
  .btn-outline-warning,
  .btn-outline-info,
  .btn-outline-light,
  .btn-outline-dark
):is(:hover, :focus, :active, .active) {
  filter: none !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-primary:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-accent) !important;
  border-color: var(--pe-dark-accent) !important;
  color: var(--pe-dark-on-accent) !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-secondary:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-secondary) !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-success:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-success) !important;
  border-color: var(--pe-dark-success-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-danger:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-danger) !important;
  border-color: var(--pe-dark-danger-hover) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-warning:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-warning) !important;
  border-color: var(--pe-dark-warning-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

:root[data-theme="dark"][data-theme] .btn-outline-info:is(:hover, :focus, :active, .active) {
  background: var(--pe-dark-info) !important;
  border-color: var(--pe-dark-info-hover) !important;
  color: var(--pe-dark-on-bright) !important;
}

:root[data-theme="dark"][data-theme] .btn-link.text-danger {
  color: #f87171 !important;
}

:root[data-theme="dark"][data-theme] .btn-link.text-danger:is(:hover, :focus, :active) {
  background: color-mix(in srgb, var(--pe-dark-danger) 18%, var(--pe-dark-surface)) !important;
  border-color: color-mix(in srgb, var(--pe-dark-danger) 55%, transparent) !important;
  color: #fca5a5 !important;
}

:root[data-theme="dark"][data-theme] .btn-link.text-success { color: #4ade80 !important; }
:root[data-theme="dark"][data-theme] .btn-link.text-warning { color: #fbbf24 !important; }
:root[data-theme="dark"][data-theme] .btn-link.text-info { color: #38bdf8 !important; }

:root[data-theme="dark"][data-theme] :is(
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-danger,
  .btn-warning,
  .btn-info,
  .btn-light,
  .btn-dark,
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-success,
  .btn-outline-danger,
  .btn-outline-warning,
  .btn-outline-info,
  .btn-outline-light,
  .btn-outline-dark
) :is(i, svg) {
  color: currentColor !important;
}

:root[data-theme="dark"][data-theme] .nav-tabs .nav-link:not(.active):is(:hover, :focus),
:root[data-theme="dark"][data-theme] .nav-pills .nav-link:not(.active):is(:hover, :focus) {
  background: var(--pe-dark-accent-soft) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 58%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
}

:root[data-theme="dark"][data-theme] .nav-tabs .nav-link.active,
:root[data-theme="dark"][data-theme] .nav-pills .nav-link.active {
  background: var(--pe-dark-accent-hover) !important;
  border-color: color-mix(in srgb, var(--pe-dark-accent) 72%, var(--pe-dark-border)) !important;
  color: var(--pe-dark-fg) !important;
  box-shadow: inset 0 -2px 0 var(--pe-dark-accent) !important;
}