/* ==========================================================================
   TIPPY.JS TOOLTIP THEME - Component Module
   File: tippy.css
   Path: /assets/css/tippy.css
   Version: v1.3.0
   Issued: 2026-03-28
   Author: Buktika Webdesk (Binka)
   Purpose: Isolated Tippy.js styling per BKT-DOC-03 Amendment v2.1.0 §12.4
   Spec ref: BKT-DOC-03-Amendment-v2_1_0.docx §12.4.3
   ========================================================================== */

.tippy-box[data-theme~="sentraledex"],
.tippy-box[data-theme~="channel-match-eco"],
.tippy-box[data-theme~="channel-match-mdx"],
.tippy-box[data-theme~="channel-match-both"] {
  --tooltip-surface: #123543;
  color: #ffffff !important;       /* White text for contrast */
  border: 1px solid rgba(245, 176, 20, 0.28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  border-radius: 0.5rem !important;
  max-width: 320px !important;
  font-family: var(--text-font) !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.tippy-box[data-theme~="sentraledex"] {
  --tooltip-surface: #123543;
  background: var(--tooltip-surface) !important;  /* Dark green from header tooltips --sdx-color-ui-popup-surface */
}

.tippy-box[data-theme~="channel-match-eco"] {
  --tooltip-surface: var(--sdx-color-stem-olive);
  background: var(--tooltip-surface) !important;
}

.tippy-box[data-theme~="channel-match-mdx"] {
  --tooltip-surface: var(--sdx-color-mama-violet);
  background: var(--tooltip-surface) !important;
}

.tippy-box[data-theme~="channel-match-both"] {
  --tooltip-surface: linear-gradient(
    135deg,
    var(--sdx-color-stem-olive) 0%,
    var(--sdx-color-stem-olive) 50%,
    var(--sdx-color-mama-violet) 50%,
    var(--sdx-color-mama-violet) 100%
  );
  background: var(--tooltip-surface) !important;
}

.tippy-box[data-theme~="sentraledex"] .tippy-arrow,
.tippy-box[data-theme~="channel-match-eco"] .tippy-arrow,
.tippy-box[data-theme~="channel-match-mdx"] .tippy-arrow,
.tippy-box[data-theme~="channel-match-both"] .tippy-arrow {
  width: 0.875rem;
  height: 0.875rem;
  color: transparent !important;
}

.tippy-box[data-theme~="sentraledex"] .tippy-arrow::before,
.tippy-box[data-theme~="channel-match-eco"] .tippy-arrow::before,
.tippy-box[data-theme~="channel-match-mdx"] .tippy-arrow::before,
.tippy-box[data-theme~="channel-match-both"] .tippy-arrow::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: var(--tooltip-surface) !important;
  border: 0 !important;
  border-radius: 0.125rem;
  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.18);
  transform: rotate(45deg);
}

.tippy-box[data-theme~="sentraledex"] .tippy-content,
.tippy-box[data-theme~="channel-match-eco"] .tippy-content,
.tippy-box[data-theme~="channel-match-mdx"] .tippy-content,
.tippy-box[data-theme~="channel-match-both"] .tippy-content {
  color: #ffffff !important;  /* White text on green background */
  padding: 0.5rem 0.75rem !important;
  font-weight: 600 !important;
}