/* ════════════════════════════════════════════════════════════════
   INTRA TOOLTIPS — design-system tooltip styling
   Override Bootstrap 5 .tooltip dgn look modern (rounded, gradient,
   soft shadow, arrow halus). Loaded global di head.php.
   Auto-init JS: intra-tooltips.js (otomatis pasang BS Tooltip ke
   [title] di .btn, table action, .dd-handle, dst.)
   ════════════════════════════════════════════════════════════════ */

/* Default Bootstrap .tooltip dasar — kita reset agar tidak ada
   konflik, lalu styling kustom. */
.tooltip {
    --bs-tooltip-zindex: 1090;
    --bs-tooltip-max-width: 280px;
    --bs-tooltip-padding-x: 0.7rem;
    --bs-tooltip-padding-y: 0.42rem;
    --bs-tooltip-margin: 0;
    --bs-tooltip-font-size: 0.78rem;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-bg: #1f2937;
    --bs-tooltip-border-radius: 8px;
    --bs-tooltip-opacity: 0.98;
    --bs-tooltip-arrow-width: 0.7rem;
    --bs-tooltip-arrow-height: 0.4rem;

    pointer-events: none;
    font-family: var(--bs-body-font-family, system-ui, sans-serif);
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.45;
    word-wrap: break-word;
}

.tooltip.show {
    opacity: var(--bs-tooltip-opacity);
}

.tooltip .tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    background-color: var(--bs-tooltip-bg);
    background-image: linear-gradient(
        135deg,
        var(--bs-tooltip-bg) 0%,
        color-mix(in srgb, var(--bs-tooltip-bg) 80%, var(--bs-primary)) 100%);
    border-radius: var(--bs-tooltip-border-radius);
    text-align: left;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Arrow — bikin lebih halus dgn warna match background */
.tooltip .tooltip-arrow::before {
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-top-color: var(--bs-tooltip-bg);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-right-color: var(--bs-tooltip-bg);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg);
}

/* Spacing offset utk arrow */
.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^="top"]     { padding: var(--bs-tooltip-arrow-height) 0; }
.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^="right"]   { padding: 0 var(--bs-tooltip-arrow-height); }
.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^="bottom"] { padding: var(--bs-tooltip-arrow-height) 0; }
.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^="left"]  { padding: 0 var(--bs-tooltip-arrow-height); }

/* ═══════════════ VARIANT BERWARNA ═══════════════
   Tambah `data-bs-variant="primary|success|danger|info|warning"`
   pada elemen untuk tooltip warna sesuai semantik. */

[data-bs-variant="primary"] + .tooltip,
.tooltip[data-variant="primary"] {
    --bs-tooltip-bg: var(--bs-primary);
}

[data-bs-variant="success"] + .tooltip,
.tooltip[data-variant="success"] {
    --bs-tooltip-bg: var(--bs-success);
}

[data-bs-variant="info"] + .tooltip,
.tooltip[data-variant="info"] {
    --bs-tooltip-bg: var(--bs-info);
}

[data-bs-variant="warning"] + .tooltip,
.tooltip[data-variant="warning"] {
    --bs-tooltip-bg: var(--bs-warning);
    --bs-tooltip-color: #1f2937;
}

[data-bs-variant="danger"] + .tooltip,
.tooltip[data-variant="danger"] {
    --bs-tooltip-bg: var(--bs-danger);
}

/* Tooltip subtle — utk hint tidak penting (lebih lembut) */
.tooltip[data-variant="subtle"] .tooltip-inner {
    background-image: none;
    background-color: rgba(31, 41, 55, 0.92);
    font-weight: 500;
}

/* Tooltip dgn HTML content (mis. icon + text) — padding sedikit
   lebih lega, dan biarkan whitespace normal */
.tooltip[data-html="true"] .tooltip-inner,
.tooltip-inner:has(i.ti) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ═══════════════ DARK MODE ═══════════════
   Override Bootstrap base agar lebih pop di dark mode. */

html.dark-style .tooltip {
    --bs-tooltip-bg: #2d3748;
    --bs-tooltip-color: #f5f7ff;
}

html.dark-style .tooltip .tooltip-inner {
    background-image: linear-gradient(
        135deg,
        #2d3748 0%,
        color-mix(in srgb, #2d3748 75%, var(--bs-primary)) 100%);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 3px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ═══════════════ FADE & SCALE ANIMATION ═══════════════
   Bootstrap default pakai .fade, kita tambah subtle scale supaya
   tooltip muncul lebih hidup tanpa terasa berlebihan. */

.tooltip.fade {
    transform: scale(0.96);
    transform-origin: center bottom;
    transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

.tooltip.fade.show {
    transform: scale(1);
}

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow,
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"],
.bs-tooltip-bottom {
    /* Origin saat tooltip di bawah element — scale dari atas */
}

/* Reduced motion — skip scale animation */
@media (prefers-reduced-motion: reduce) {
    .tooltip.fade {
        transition: opacity 0.12s linear;
        transform: none;
    }
    .tooltip.fade.show {
        transform: none;
    }
}

/* ═══════════════ A11Y HINT ═══════════════
   Saat user fokus keyboard pd element ber-tooltip, BS otomatis
   memunculkan tooltip — pastikan tidak menutupi outline focus.
   Trick: outline-offset di trigger element supaya focus tetap visible. */

[data-bs-toggle="tooltip"]:focus-visible {
    outline-offset: 3px;
}