/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Screenshot Mode Styles */
.screenshot-mode .screenshot-mode-hide {
  display: none !important;
}

/* Hide fixed development toolbar elements in screenshot mode as a fallback */
.screenshot-mode .fixed.bottom-4.right-4.z-50 {
  display: none !important;
}

/* Checkbox dropdown filtering */
.search-hidden,
.country-filtered {
  display: none !important;
}

/* ==========================================================================
   KPI Flip Card - 3D Card Flip Animation
   ========================================================================== */

/* Container needs perspective for 3D effect */
.kpi-flip-card-container {
  perspective: 1200px;
}

/* The card that flips - preserves 3D space */
.kpi-flip-card {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Flipped state */
.kpi-flip-card.flipped {
  transform: rotateY(180deg);
}

/* Both faces need backface-visibility */
.kpi-flip-card-front,
.kpi-flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face - normal position */
.kpi-flip-card-front {
  position: relative;
  z-index: 2;
}

/* Back face - rotated and positioned absolutely to overlap front */
.kpi-flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: rotateY(180deg);
  z-index: 1;
}

/* When flipped, swap z-index so back is on top */
.kpi-flip-card.flipped .kpi-flip-card-front {
  z-index: 1;
}

.kpi-flip-card.flipped .kpi-flip-card-back {
  z-index: 2;
}

/* ==========================================================================
   KPI Timeline Charts
   ========================================================================== */

/* Chart container styling */
.kpi-timeline-chart {
  min-height: 260px;
}