/*
==============================================
EASYTENANCY — RICH BRANDED TOOLTIPS
Version 3.0 | 2026 | Blue Kenya Theme
==============================================
Features:
- 4 positions: top (default), bottom, left, right
- 4 themes: default (blue/dark), cyan, success, warning, danger, dark
- Smooth fade-in / slide-in animation
- Touch-friendly (tap to show, auto-dismiss after 2.5 s)
- Arrow pointer on all positions
- Works on both landing page & dashboards
==============================================
*/

/* ── BASE SETUP ──────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: default;
}

/* The actual tooltip bubble */
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity   0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
  will-change: opacity, transform;
}

/* Text bubble */
[data-tooltip]::before {
  content: attr(data-tooltip);
  /* Default position: top-centre */
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  /* Sizing */
  white-space: normal;
  max-width: 260px;
  width: max-content;
  min-width: 80px;
  word-break: break-word;

  /* Appearance — default theme (blue/dark) */
  background: rgba(7, 58, 132, 0.96);
  backdrop-filter: blur(10px) saturate(160%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(39, 178, 246, 0.30);
  box-shadow:
    0 8px 24px rgba(4, 14, 26, 0.50),
    0 0 0 1px rgba(39, 178, 246, 0.08);
  text-align: left;
}

/* Arrow */
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: rgba(7, 58, 132, 0.96);
}

/* ── SHOW ON HOVER ───────────────────────── */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── POSITIONS ───────────────────────────── */

/* BOTTOM */
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-6px);
}

[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 4px);
  transform: translateX(-50%) translateY(-4px);
  border-top-color: transparent;
  border-bottom-color: rgba(7, 58, 132, 0.96);
}

[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* LEFT */
[data-tooltip-pos="left"]::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(6px);
}

[data-tooltip-pos="left"]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 4px);
  transform: translateY(-50%) translateX(4px);
  border-top-color: transparent;
  border-left-color: rgba(7, 58, 132, 0.96);
  border-right-color: transparent;
  border-bottom-color: transparent;
}

[data-tooltip-pos="left"]:hover::before {
  transform: translateY(-50%) translateX(0);
}

[data-tooltip-pos="left"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* RIGHT */
[data-tooltip-pos="right"]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-6px);
}

[data-tooltip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%) translateX(-4px);
  border-top-color: transparent;
  border-right-color: rgba(7, 58, 132, 0.96);
  border-left-color: transparent;
  border-bottom-color: transparent;
}

[data-tooltip-pos="right"]:hover::before,
[data-tooltip-pos="right"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* ── THEMES ──────────────────────────────── */

/* CYAN theme */
[data-tooltip-theme="cyan"]::before {
  background: rgba(11, 38, 68, 0.97);
  border-color: rgba(39, 178, 246, 0.50);
  box-shadow:
    0 8px 24px rgba(4,14,26,0.5),
    0 0 12px rgba(39, 178, 246, 0.20);
}

[data-tooltip-theme="cyan"][data-tooltip-pos="top"]::after,
[data-tooltip-theme="cyan"]:not([data-tooltip-pos])::after {
  border-top-color: rgba(11, 38, 68, 0.97);
}

[data-tooltip-theme="cyan"][data-tooltip-pos="bottom"]::after {
  border-bottom-color: rgba(11, 38, 68, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="cyan"][data-tooltip-pos="right"]::after {
  border-right-color: rgba(11, 38, 68, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="cyan"][data-tooltip-pos="left"]::after {
  border-left-color: rgba(11, 38, 68, 0.97);
  border-top-color: transparent;
}

/* SUCCESS (green) theme */
[data-tooltip-theme="success"]::before {
  background: rgba(8, 50, 34, 0.97);
  border-color: rgba(60, 207, 145, 0.45);
  box-shadow:
    0 8px 24px rgba(4,14,26,0.5),
    0 0 12px rgba(60, 207, 145, 0.15);
}

[data-tooltip-theme="success"][data-tooltip-pos="top"]::after,
[data-tooltip-theme="success"]:not([data-tooltip-pos])::after {
  border-top-color: rgba(8, 50, 34, 0.97);
}

[data-tooltip-theme="success"][data-tooltip-pos="bottom"]::after {
  border-bottom-color: rgba(8, 50, 34, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="success"][data-tooltip-pos="right"]::after {
  border-right-color: rgba(8, 50, 34, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="success"][data-tooltip-pos="left"]::after {
  border-left-color: rgba(8, 50, 34, 0.97);
  border-top-color: transparent;
}

/* WARNING (gold) theme */
[data-tooltip-theme="warning"]::before {
  background: rgba(50, 36, 8, 0.97);
  border-color: rgba(246, 184, 39, 0.45);
  box-shadow:
    0 8px 24px rgba(4,14,26,0.5),
    0 0 12px rgba(246, 184, 39, 0.15);
}

[data-tooltip-theme="warning"][data-tooltip-pos="top"]::after,
[data-tooltip-theme="warning"]:not([data-tooltip-pos])::after {
  border-top-color: rgba(50, 36, 8, 0.97);
}

[data-tooltip-theme="warning"][data-tooltip-pos="bottom"]::after {
  border-bottom-color: rgba(50, 36, 8, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="warning"][data-tooltip-pos="right"]::after {
  border-right-color: rgba(50, 36, 8, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="warning"][data-tooltip-pos="left"]::after {
  border-left-color: rgba(50, 36, 8, 0.97);
  border-top-color: transparent;
}

/* DANGER (red) theme */
[data-tooltip-theme="danger"]::before {
  background: rgba(50, 10, 10, 0.97);
  border-color: rgba(240, 82, 82, 0.45);
  box-shadow:
    0 8px 24px rgba(4,14,26,0.5),
    0 0 12px rgba(240, 82, 82, 0.15);
}

[data-tooltip-theme="danger"][data-tooltip-pos="top"]::after,
[data-tooltip-theme="danger"]:not([data-tooltip-pos])::after {
  border-top-color: rgba(50, 10, 10, 0.97);
}

[data-tooltip-theme="danger"][data-tooltip-pos="bottom"]::after {
  border-bottom-color: rgba(50, 10, 10, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="danger"][data-tooltip-pos="right"]::after {
  border-right-color: rgba(50, 10, 10, 0.97);
  border-top-color: transparent;
}

[data-tooltip-theme="danger"][data-tooltip-pos="left"]::after {
  border-left-color: rgba(50, 10, 10, 0.97);
  border-top-color: transparent;
}

/* DARK theme */
[data-tooltip-theme="dark"]::before {
  background: rgba(4, 14, 26, 0.98);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 24px rgba(4,14,26,0.6);
}

[data-tooltip-theme="dark"][data-tooltip-pos="top"]::after,
[data-tooltip-theme="dark"]:not([data-tooltip-pos])::after {
  border-top-color: rgba(4, 14, 26, 0.98);
}

[data-tooltip-theme="dark"][data-tooltip-pos="bottom"]::after {
  border-bottom-color: rgba(4, 14, 26, 0.98);
  border-top-color: transparent;
}

[data-tooltip-theme="dark"][data-tooltip-pos="right"]::after {
  border-right-color: rgba(4, 14, 26, 0.98);
  border-top-color: transparent;
}

[data-tooltip-theme="dark"][data-tooltip-pos="left"]::after {
  border-left-color: rgba(4, 14, 26, 0.98);
  border-top-color: transparent;
}

/* ── TOUCH TOOLTIP ELEMENT ───────────────── */
/* Used by JS for mobile tap-to-show tooltips */
.tt-touch {
  position: fixed;
  z-index: 99999;
  max-width: 260px;
  background: rgba(7, 58, 132, 0.96);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(39, 178, 246, 0.30);
  box-shadow: 0 8px 24px rgba(4,14,26,0.5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  word-break: break-word;
}

.tt-touch.visible {
  opacity: 1;
  visibility: visible;
}

/* ── DASHBOARD SPECIFIC ──────────────────── */

/* KPI cards — wider tooltip allowed */
.kpi-card[data-tooltip]::before {
  max-width: 300px;
}

/* Sidebar — tooltips appear to the right */
.sb-item[data-tooltip]::before {
  white-space: nowrap;
  max-width: 220px;
}

/* Property rows — bigger target area */
.property-row[data-tooltip]::before {
  max-width: 280px;
}

/* Compliance items */
.compliance-item[data-tooltip]::before {
  max-width: 300px;
}

/* ── OVERRIDE: disable CSS tooltip when
   sidebar is collapsed (icon-only mode) ─── */
.db-sidebar.collapsed .sb-item[data-tooltip]::before,
.db-sidebar.collapsed .sb-item[data-tooltip]::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ══════════════════════════════════════════
   RICH JS TOOLTIP (.et-tooltip)
   Created dynamically by js/tooltips.js
   Supports: title, body (typewriter), badge,
   icon, 4 themes, smart positioning + arrow
══════════════════════════════════════════ */

.et-tooltip {
  position: absolute;
  z-index: 99998;
  max-width: 280px;
  min-width: 140px;
  background: rgba(7, 58, 132, 0.97);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(39, 178, 246, 0.28);
  border-radius: 12px;
  box-shadow:
    0 12px 40px rgba(4, 14, 26, 0.55),
    0 0 0 1px rgba(39, 178, 246, 0.08);
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.97);
  transition:
    opacity   0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.2s ease;
  will-change: opacity, transform;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  overflow: visible;
}

.et-tooltip.et-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Inner wrapper */
.et-tooltip-inner {
  padding: 11px 14px 12px;
  position: relative;
  z-index: 1;
}

/* Shine sweep on show */
.et-tooltip.et-visible::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.07) 0%,
    transparent 60%);
  pointer-events: none;
}

/* Header (icon + title) */
.et-tooltip-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.et-tooltip-header i {
  font-size: 13px;
  color: #27B2F6;
  flex-shrink: 0;
}

/* Body text */
.et-tooltip-body {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  word-break: break-word;
}

/* Badge chip */
.et-tooltip-badge-wrap {
  margin-top: 8px;
}

.et-tooltip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(60, 207, 145, 0.15);
  border: 1px solid rgba(60, 207, 145, 0.35);
  color: #3CCF91;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.et-tooltip-badge i {
  font-size: 10px;
}

/* ── ARROW ─────────────────────────────── */
.et-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(7, 58, 132, 0.97);
  border: 1px solid rgba(39, 178, 246, 0.28);
  pointer-events: none;
}

.et-arrow.arrow-bottom {
  bottom: -6px;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
}

.et-arrow.arrow-top {
  top: -6px;
  transform: rotate(45deg);
  border-bottom: none;
  border-right: none;
}

.et-arrow.arrow-right {
  right: -6px;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
}

.et-arrow.arrow-left {
  left: -6px;
  transform: rotate(45deg);
  border-bottom: none;
  border-right: none;
}

/* ── ET-TOOLTIP THEMES ───────────────────── */

/* Cyan */
.et-tooltip.cyan {
  background: rgba(9, 28, 56, 0.97);
  border-color: rgba(39, 178, 246, 0.45);
  box-shadow:
    0 12px 40px rgba(4,14,26,0.55),
    0 0 20px rgba(39, 178, 246, 0.12);
}
.et-tooltip.cyan .et-arrow {
  background: rgba(9, 28, 56, 0.97);
  border-color: rgba(39, 178, 246, 0.45);
}
.et-tooltip.cyan .et-tooltip-header {
  color: #27B2F6;
}

/* Success / green */
.et-tooltip.success {
  background: rgba(6, 38, 26, 0.97);
  border-color: rgba(60, 207, 145, 0.45);
  box-shadow:
    0 12px 40px rgba(4,14,26,0.55),
    0 0 20px rgba(60, 207, 145, 0.10);
}
.et-tooltip.success .et-arrow {
  background: rgba(6, 38, 26, 0.97);
  border-color: rgba(60, 207, 145, 0.45);
}
.et-tooltip.success .et-tooltip-header {
  color: #3CCF91;
}
.et-tooltip.success .et-tooltip-header i { color: #3CCF91; }

/* Warning / gold */
.et-tooltip.warning {
  background: rgba(38, 28, 6, 0.97);
  border-color: rgba(246, 184, 39, 0.45);
  box-shadow:
    0 12px 40px rgba(4,14,26,0.55),
    0 0 20px rgba(246, 184, 39, 0.10);
}
.et-tooltip.warning .et-arrow {
  background: rgba(38, 28, 6, 0.97);
  border-color: rgba(246, 184, 39, 0.45);
}
.et-tooltip.warning .et-tooltip-header { color: #F6B827; }
.et-tooltip.warning .et-tooltip-header i { color: #F6B827; }

/* Danger / red */
.et-tooltip.danger {
  background: rgba(40, 8, 8, 0.97);
  border-color: rgba(240, 82, 82, 0.45);
  box-shadow:
    0 12px 40px rgba(4,14,26,0.55),
    0 0 20px rgba(240, 82, 82, 0.10);
}
.et-tooltip.danger .et-arrow {
  background: rgba(40, 8, 8, 0.97);
  border-color: rgba(240, 82, 82, 0.45);
}
.et-tooltip.danger .et-tooltip-header { color: #F05252; }
.et-tooltip.danger .et-tooltip-header i { color: #F05252; }

/* Dark */
.et-tooltip.dark {
  background: rgba(4, 14, 26, 0.98);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(4,14,26,0.7);
}
.et-tooltip.dark .et-arrow {
  background: rgba(4, 14, 26, 0.98);
  border-color: rgba(255,255,255,0.10);
}

/* ── REDUCED MOTION ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .et-tooltip {
    transition: opacity 0.01ms ease, visibility 0.01ms ease;
  }
}

/* ── ACCESSIBILITY ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    transition: opacity 0.01ms ease, visibility 0.01ms ease;
  }
}

/* ── VIEWPORT OVERFLOW GUARD ─────────────── */
/* Prevent tooltips at left edge from going off-screen */
[data-tooltip]:first-child::before,
[data-tooltip].edge-guard::before {
  left: 0;
  transform: translateX(0) translateY(6px);
}

[data-tooltip]:first-child:hover::before,
[data-tooltip].edge-guard:hover::before {
  transform: translateX(0) translateY(0);
}

[data-tooltip]:first-child::after,
[data-tooltip].edge-guard::after {
  left: 16px;
  transform: translateX(0) translateY(4px);
}

[data-tooltip]:first-child:hover::after,
[data-tooltip].edge-guard:hover::after {
  transform: translateX(0) translateY(0);
}