/* ========================================
   SOCIETY ARTS - SHARED TOOLTIPS
   Location: /css/shared/shared-tooltips.css
   Version: 1.1
   
   Works with fixed-position tooltips from
   /js/shared/shared-tooltips.js
   
   Brand Colors:
   - Dark Brown (background): #2C1810
   - Cream (text): #FAF8F5
   - Teal (enabled status): #4ECDC4
   ======================================== */

/* ============================================
   TOOLTIP WRAPPER
   ============================================ */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
}

/* Cursor hints */
.tooltip-wrapper > * {
  cursor: help;
}

.tooltip-wrapper > button,
.tooltip-wrapper > a {
  cursor: pointer;
}

/* ============================================
   FIXED TOOLTIP (positioned via JS)
   ============================================ */
.tooltip-fixed {
  pointer-events: auto;
  animation: tooltipFadeIn 0.2s ease forwards;
}

/* ============================================
   TOOLTIP CONTENT BOX
   ============================================ */
.tooltip-content {
  background: #2C1810;
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15);
}

.tooltip-title {
  font-family: 'Familjen Grotesk', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #FAF8F5;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.tooltip-description {
  font-family: 'Familjen Grotesk', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(250, 248, 245, 0.8);
  line-height: 1.5;
  margin: 0 0 12px 0;
}

/* Remove bottom margin if no status/details follow */
.tooltip-description:last-child {
  margin-bottom: 0;
}

/* ============================================
   ARROW POSITIONING
   ============================================ */
.tooltip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #2C1810;
}

/* Arrow for TOP position (points down) */
.tooltip-top .tooltip-arrow {
  bottom: -6px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tooltip-top .tooltip-arrow-start {
  left: 20px;
}

.tooltip-top .tooltip-arrow-center {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-top .tooltip-arrow-end {
  right: 20px;
}

/* Arrow for BOTTOM position (points up) */
.tooltip-bottom .tooltip-arrow {
  top: -6px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.tooltip-bottom .tooltip-arrow-start {
  left: 20px;
}

.tooltip-bottom .tooltip-arrow-center {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-bottom .tooltip-arrow-end {
  right: 20px;
}

/* Arrow for LEFT position (points right) */
.tooltip-left .tooltip-arrow {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* Arrow for RIGHT position (points left) */
.tooltip-right .tooltip-arrow {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

/* ============================================
   ANIMATION
   ============================================ */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   STATUS BADGE
   ============================================ */
.tooltip-status-row {
  padding-top: 12px;
  border-top: 1px solid rgba(250, 248, 245, 0.1);
  margin-bottom: 8px;
}

.tooltip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tooltip-status-label {
  font-family: 'Familjen Grotesk', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tooltip-status.enabled .tooltip-status-label {
  color: #4ECDC4;
}

.tooltip-status.disabled .tooltip-status-label {
  color: rgba(250, 248, 245, 0.5);
}

.tooltip-status-check {
  color: #4ECDC4;
}

/* ============================================
   DETAILS TEXT
   ============================================ */
.tooltip-details {
  font-family: 'Familjen Grotesk', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(250, 248, 245, 0.5);
  line-height: 1.4;
  margin: 0;
}