/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS.CSS — Tooltip, Badge variants extras, ErrorMessage,
                    progress bars extras, misc utilities.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tooltip ─────────────────────────────────────────────────────── */
.tooltip-wrap {
  position: relative;
  display:  inline-flex;
}
.tooltip-wrap:hover .tooltip-bubble { visibility:visible; opacity:1; transform:translateX(-50%) translateY(0); }

.tooltip-bubble {
  position:     absolute;
  bottom:       calc(100% + 6px);
  left:         50%;
  transform:    translateX(-50%) translateY(4px);
  background:   #1E293B;
  color:        #fff;
  font-size:    var(--text-xs);
  padding:      5px 10px;
  border-radius:var(--r-md);
  white-space:  nowrap;
  visibility:   hidden;
  opacity:      0;
  transition:   all var(--t-fast);
  pointer-events:none;
  z-index:      1000;
  max-width:    220px;
  white-space:  normal;
  text-align:   center;
  line-height:  1.4;
}
.tooltip-bubble::after {
  content:      '';
  position:     absolute;
  top:          100%;
  left:         50%;
  transform:    translateX(-50%);
  border:       5px solid transparent;
  border-top-color: #1E293B;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.divider {
  border:     none;
  border-top: 1px solid var(--c-divider);
  margin:     var(--sp-4) 0;
}

/* ── Loading overlay ─────────────────────────────────────────────── */
.loading-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(255,255,255,.8);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   inherit;
  z-index:         10;
}

/* ── Flex utilities ──────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--sp-2); }
.gap-3       { gap: var(--sp-3); }
.gap-4       { gap: var(--sp-4); }
.flex-1      { flex: 1; }

/* ── Text utilities ──────────────────────────────────────────────── */
.font-mono   { font-family: var(--font-mono); }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-primary   { color: var(--c-text-primary); }
.text-secondary { color: var(--c-text-secondary); }
.text-tertiary  { color: var(--c-text-tertiary); }
.text-success   { color: var(--c-success); }
.text-danger    { color: var(--c-danger); }
.text-warning   { color: var(--c-warning); }
.text-info      { color: var(--c-info); }

/* ── Card generic ────────────────────────────────────────────────── */
.card {
  background:    var(--c-surface);
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-xs);
  overflow:      hidden;
}
.card-body { padding: var(--sp-5); }

/* ── Separator dot ───────────────────────────────────────────────── */
.sep { margin: 0 4px; color: var(--c-text-tertiary); }

/* ── Responsive display ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .content { padding: var(--sp-3); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
}