/* Theme Misc — Dark mode overrides for Bootstrap nav-tabs, legacy panel-*
   markup, text-dark utility, and a couple of hardcoded element colors. */

[data-theme="dark"] {
  /* ---------- Bootstrap nav-tabs (billing/ledger and others) ---------- */
  .nav-tabs {
    border-bottom-color: var(--border-subtle);
  }
  .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
  }
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    color: var(--text-primary);
    border-color: var(--border-subtle) var(--border-subtle) transparent;
    background-color: var(--row-hover);
  }
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    color: var(--text-primary);
    background-color: var(--bg-card);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-card);
  }
  .nav-tabs .nav-link.disabled {
    color: var(--text-muted);
    background-color: transparent;
  }

  /* Dark mode override for .tab-content-themed (light rule below file) */
  .tab-content-themed {
    background-color: var(--bg-card);
  }

  /* ---------- Bootstrap 3 panel-* (master-account-edit) ---------- */
  .panel {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .panel-heading {
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  .panel-body {
    color: var(--text-primary);
  }
  .panel-info {
    border-color: var(--border-subtle);
  }
  .panel-info > .panel-heading {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  /* .bg-info pinned on panel-heading in master-account-edit — Bootstrap's
     default is pale cyan. Map to elevated bg so it sits on the panel. */
  .panel-heading.bg-info {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
  }

  /* ---------- .text-dark utility — Bootstrap forces #343a40 here ---------- */
  .text-dark {
    color: var(--text-primary) !important;
  }
  /* .text-muted inside dark cards — keep readable */
  .card-block .text-muted,
  .card .text-muted {
    color: var(--text-secondary);
  }

  /* ---------- One-offs picked up in the audit ---------- */
  /* my-proxies.html declares .proxy-ip-cell { color:#1a73e8 } in a <style> */
  .proxy-ip-cell {
    color: var(--accent-primary) !important;
  }

  /* Bootstrap .bg-light pinned on the Plan-tab tables (billing/ledger Plan
     fragment). Default #f8f9fa makes dark-mode light text unreadable. Only
     plan.html uses .bg-light, so neutralize it here. */
  .bg-light {
    background-color: transparent !important;
    color: var(--text-primary);
  }

  /* ---------- Bootstrap tooltips ----------
     Used app-wide via data-toggle="tooltip". Inverted in dark mode
     (light bg + dark text) so the tooltip stands out against the dark
     form/card surface — mirrors the light-mode pattern where the
     tooltip is dark on a light page. The colReorder popover has its
     own higher-specificity rules in theme-tables.css so it isn't
     touched here. */
  .tooltip-inner {
    background-color: var(--text-primary);
    color: var(--bg-base);
  }
  .bs-tooltip-top .arrow::before,
  .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--text-primary);
  }
  .bs-tooltip-bottom .arrow::before,
  .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--text-primary);
  }
  .bs-tooltip-left .arrow::before,
  .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--text-primary);
  }
  .bs-tooltip-right .arrow::before,
  .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--text-primary);
  }

  /* ---------- Bootstrap popovers (generic) ----------
     The .arrow has ::before (border) and ::after (fill) — both need the
     correct direction color. */
  .popover {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
  }
  .popover .popover-header {
    background-color: var(--bg-elevated);
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .popover .popover-body {
    color: var(--text-primary);
  }
  .bs-popover-top .arrow::before,
  .bs-popover-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--border-subtle);
  }
  .bs-popover-top .arrow::after,
  .bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: var(--bg-card);
  }
  .bs-popover-bottom .arrow::before,
  .bs-popover-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--border-subtle);
  }
  .bs-popover-bottom .arrow::after,
  .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--bg-elevated);
  }
  .bs-popover-left .arrow::before,
  .bs-popover-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--border-subtle);
  }
  .bs-popover-left .arrow::after,
  .bs-popover-auto[x-placement^="left"] .arrow::after {
    border-left-color: var(--bg-card);
  }
  .bs-popover-right .arrow::before,
  .bs-popover-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--border-subtle);
  }
  .bs-popover-right .arrow::after,
  .bs-popover-auto[x-placement^="right"] .arrow::after {
    border-right-color: var(--bg-card);
  }
}

/* Light-mode preservation for .tab-content-themed (replaces inline
   style="background-color:#f3f3f3" that used to live in ledger.html). */
.tab-content-themed {
  background-color: #f3f3f3;
}

/* ---------- Light-mode tooltip transparency ----------
   Bootstrap's default #343a40 tooltip at 0.9 wrapper opacity looks essentially
   solid on a light surface. A semi-transparent rgba lets the surface beneath
   show through, matching how the dark-mode inverted tooltip (near-white on
   dark bg) feels transparent. The [data-theme="dark"] block above has higher
   specificity and overrides these rules in dark mode. */
.tooltip-inner {
  background-color: rgba(52, 58, 64, 0.99);
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: rgba(52, 58, 64, 0.99);
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: rgba(52, 58, 64, 0.99);
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: rgba(52, 58, 64, 0.99);
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: rgba(52, 58, 64, 0.99);
}