/* ==========================================================================
   VECTOR Hexagon Widget Component
   Displays position health score as a hexagonal chart
   ========================================================================== */

.vector-widget {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 400px;
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px; /* Prevent overflow on mobile */
}

/* --- De Gekleurde Hexagon Achtergrond --- */
.vector-widget .vector-hexagon-bg {
  position: absolute;
  width: 320px;
  height: 320px;
  clip-path: polygon(
    50% 0%,
    93.3% 25%,
    93.3% 75%,
    50% 100%,
    6.7% 75%,
    6.7% 25%
  );
  background: conic-gradient(
    from 0deg at 50% 50%,
    #2D4E86 0deg 60deg, /* E */ #00B4D8 60deg 120deg, /* C */ #D49E23 120deg 180deg, /* T */ #008F68 180deg 240deg, /* O */ #8B3A3A 240deg 300deg, /* R */ #A06CD5 300deg 360deg /* V */
  );
  opacity: 0.9;
  z-index: 1;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* --- Hexagon lijnen --- */
.vector-widget .vector-hexagon-lines {
  position: absolute;
  width: 320px;
  height: 320px;
  z-index: 2;
  pointer-events: none;
}

.vector-widget .vector-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform-origin: center;
}

.vector-widget .vector-line-1 {
  transform: translate(-50%, -50%) rotate(90deg);
}

.vector-widget .vector-line-2 {
  transform: translate(-50%, -50%) rotate(30deg);
}

.vector-widget .vector-line-3 {
  transform: translate(-50%, -50%) rotate(150deg);
}

/* --- De Centrale Score Cirkel --- */
.vector-widget .vector-center-score {
  position: absolute;
  z-index: 10;
  background-color: var(--bs-body-bg, #151a35);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 6px solid var(--bs-border-color, #1e2545);
  transition: transform 0.15s ease, z-index 0.15s ease;
}

.vector-widget .vector-center-score:hover {
  transform: scale(1.05);
  z-index: 1100;
}

.vector-widget .vector-center-score.has-popup {
  cursor: pointer;
}

.vector-widget .vector-center-score .widget-popup--top {
  margin-bottom: 15px; /* Extra spacing for center score, vs 10px default */
}

.vector-widget .vector-score-value {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 1;
  color: var(--bs-body-color, #fff);
}

.vector-widget .vector-score-label {
  font-size: 0.65em;
  color: var(--bs-secondary-color, #888DAD);
  letter-spacing: 1px;
  margin-top: 4px;
  font-weight: bold;
  text-transform: uppercase;
}

/* --- Styling van de Labels --- */
.vector-widget .vector-label-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  width: 100px;
}

.vector-widget .vector-letter {
  font-size: 1.9em;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: none;
}

.vector-widget .vector-word-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vector-widget .vector-word {
  font-size: 0.7em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #D0D5DD);
  font-weight: 600;
}

/* --- Kleuren per letter --- */
.vector-widget .vector-color-v {
  color: #A06CD5;
}

.vector-widget .vector-color-e {
  color: #2D4E86;
}

.vector-widget .vector-color-c {
  color: #00B4D8;
}

.vector-widget .vector-color-t {
  color: #D49E23;
}

.vector-widget .vector-color-o {
  color: #008F68;
}

.vector-widget .vector-color-r {
  color: #8B3A3A;
}

/* --- Posities van de labels --- */
.vector-widget .vector-pos-v {
  top: -10px;
  left: 70px;
}

.vector-widget .vector-pos-e {
  top: -10px;
  right: 70px;
}

.vector-widget .vector-pos-c {
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
}

.vector-widget .vector-pos-t {
  bottom: -10px;
  right: 70px;
}

.vector-widget .vector-pos-o {
  bottom: -10px;
  left: 70px;
}

.vector-widget .vector-pos-r {
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
}

/* --- Status Bolletjes --- */
.vector-widget .vector-status-dot {
  height: 8px;
  width: 8px;
  background-color: #444;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 2px currentColor;
}

.vector-widget .vector-status-green {
  background-color: #00C853;
  color: #00C853;
}

.vector-widget .vector-status-orange {
  background-color: #FFAB00;
  color: #FFAB00;
}

.vector-widget .vector-status-red {
  background-color: #D50000;
  color: #D50000;
}

.vector-widget .vector-status-grey {
  background-color: #9E9E9E;
  color: #9E9E9E;
  opacity: 0.6;
}

/* Grey/unavailable dimension styling */
.vector-widget .vector-label-group:has(.vector-status-grey) .vector-letter {
  opacity: 0.4;
}

.vector-widget .vector-label-group:has(.vector-status-grey) .vector-word {
  opacity: 0.5;
}

/* Market-only note at bottom of widget */
.vector-widget .vector-market-note {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.vector-widget .vector-market-note small {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* --- Score kleuren in center --- */
.vector-widget.vector-score-green .vector-score-value {
  color: #00C853;
}

.vector-widget.vector-score-orange .vector-score-value {
  color: #FFAB00;
}

.vector-widget.vector-score-red .vector-score-value {
  color: #D50000;
}

/* --- Hover interactie op labels --- */
.vector-widget .vector-label-group {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.vector-widget .vector-label-group:hover,
.vector-widget .vector-label-group.active {
  transform: scale(1.05);
  z-index: 1100; /* Zorg dat de actieve hover en popup boven alles staan */
}

.vector-widget .vector-label-group:hover .vector-letter,
.vector-widget .vector-label-group.active .vector-letter {
  text-shadow: 0 0 4px currentColor;
}

/* Fix voor midden labels (R en C) */
.vector-widget .vector-pos-r:hover,
.vector-widget .vector-pos-c:hover,
.vector-widget .vector-pos-r.active,
.vector-widget .vector-pos-c.active {
  transform: translateY(-50%) scale(1.05);
}

/* --- Status text colors (vector-specific) --- */
.vector-widget .vector-status-text-green {
  color: #00C853;
}

.vector-widget .vector-status-text-orange {
  color: #FFAB00;
}

.vector-widget .vector-status-text-red {
  color: #D50000;
}

.vector-widget .vector-status-text-grey {
  color: #9E9E9E;
}

/* Attention items with logo circles (vector-specific popup content) */
.vector-widget .widget-popup-list li.vector-attention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 6px;
}

.vector-widget .widget-popup-list li.vector-attention-item::before {
  content: none;
}

.vector-widget .vector-attention-logo {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  line-height: 1;
}

.vector-widget .vector-attention-text {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
}

.vector-widget .vector-attention-text strong {
  color: #fff;
}

.vector-widget .vector-attention-red {
  border-left: 2px solid #ff4d4f;
  padding-left: 6px;
}

.vector-widget .vector-attention-orange {
  border-left: 2px solid #FFAB00;
  padding-left: 6px;
}

/* Small version for dashboard — scaled to fill balance card column */
.vector-widget-sm {
  transform: scale(0.90);
  margin: -20px -22px; /* Collapse layout box to match visual size: (400−360)/2=20, (440−396)/2=22 */
  width: 440px; /* Keep original for correct transform-origin scaling */
  height: 400px;
  flex-shrink: 0;
}

.vector-widget-sm .vector-label-group {
  pointer-events: auto;
}

/* Locked/upgrade CTA placeholder — same dimensions as .vector-widget-sm so it
   occupies the same space as the real widget and the loading shimmer. */
.vector-widget-locked {
  width: 440px;
  height: 400px;
  transform: scale(0.90);
  margin: -20px -22px; /* Same margin compensation as .vector-widget-sm */
  flex-shrink: 0;
  min-height: unset;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile Optimizations
   ========================================================================== */

/* Tablets and below (< 768px) */
@media (max-width: 767px) {
  .vector-widget {
    max-width: 360px;
    height: 340px;
    margin: 1.5rem auto;
    padding: 0 30px; /* More padding on mobile */
  }

  /* Scale down hexagon */
  .vector-widget .vector-hexagon-bg,
  .vector-widget .vector-hexagon-lines {
    width: 260px;
    height: 260px;
  }

  /* Smaller center score */
  .vector-widget .vector-center-score {
    width: 85px;
    height: 85px;
    border-width: 5px;
  }

  .vector-widget .vector-score-value {
    font-size: 1.8em;
  }

  .vector-widget .vector-score-label {
    font-size: 0.6em;
  }

  /* Smaller labels */
  .vector-widget .vector-label-group {
    width: 80px;
  }

  .vector-widget .vector-letter {
    font-size: 1.5em;
    margin-bottom: 4px;
  }

  .vector-widget .vector-word {
    font-size: 0.6em;
  }

  .vector-widget .vector-status-dot {
    height: 6px;
    width: 6px;
  }

  /* Adjust positions for smaller hexagon - keep C and R INSIDE bounds */
  .vector-widget .vector-pos-v {
    top: -5px;
    left: 50px;
  }

  .vector-widget .vector-pos-e {
    top: -5px;
    right: 50px;
  }

  .vector-widget .vector-pos-c {
    top: 50%;
    transform: translateY(-50%);
    right: -5px; /* Slightly outside for breathing room */
  }

  .vector-widget .vector-pos-t {
    bottom: -5px;
    right: 50px;
  }

  .vector-widget .vector-pos-o {
    bottom: -5px;
    left: 50px;
  }

  .vector-widget .vector-pos-r {
    top: 50%;
    transform: translateY(-50%);
    left: -5px; /* Slightly outside for breathing room */
  }

  /* C and R: override --left/--right popup to show above on mobile
     to prevent off-screen overflow */
  .vector-widget .vector-pos-c .widget-popup--left {
    top: auto;
    bottom: 100%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-right: 0;
    margin-bottom: 10px;
  }

  .vector-widget .vector-pos-c.has-popup:hover .widget-popup--left,
  .vector-widget .vector-pos-c.has-popup.active .widget-popup--left {
    transform: translateX(-50%) translateY(0);
  }

  .vector-widget .vector-pos-r .widget-popup--right {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-left: 0;
    margin-bottom: 10px;
  }

  .vector-widget .vector-pos-r.has-popup:hover .widget-popup--right,
  .vector-widget .vector-pos-r.has-popup.active .widget-popup--right {
    transform: translateX(-50%) translateY(0);
  }
}

/* Small phones (< 375px) */
@media (max-width: 374px) {
  .vector-widget {
    max-width: 300px;
    height: 300px;
    padding: 0 20px;
  }

  /* Even smaller hexagon */
  .vector-widget .vector-hexagon-bg,
  .vector-widget .vector-hexagon-lines {
    width: 220px;
    height: 220px;
  }

  /* Smaller center score */
  .vector-widget .vector-center-score {
    width: 70px;
    height: 70px;
    border-width: 4px;
  }

  .vector-widget .vector-score-value {
    font-size: 1.5em;
  }

  .vector-widget .vector-score-label {
    font-size: 0.55em;
  }

  /* Even smaller labels */
  .vector-widget .vector-label-group {
    width: 70px;
  }

  .vector-widget .vector-letter {
    font-size: 1.3em;
    margin-bottom: 3px;
  }

  .vector-widget .vector-word {
    font-size: 0.55em;
  }

  .vector-widget .vector-status-dot {
    height: 5px;
    width: 5px;
  }

  /* Adjust positions for smallest screens */
  .vector-widget .vector-pos-v {
    top: 0px;
    left: 40px;
  }

  .vector-widget .vector-pos-e {
    top: 0px;
    right: 40px;
  }

  .vector-widget .vector-pos-c {
    right: 5px; /* Adjusted for small screens */
  }

  .vector-widget .vector-pos-t {
    bottom: 0px;
    right: 40px;
  }

  .vector-widget .vector-pos-o {
    bottom: 0px;
    left: 40px;
  }

  .vector-widget .vector-pos-r {
    left: 5px; /* Adjusted for small screens */
  }
}

/* Mobile landscape optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .vector-widget {
    height: 280px;
    margin: 1rem auto;
  }

  .vector-widget .vector-hexagon-bg,
  .vector-widget .vector-hexagon-lines {
    width: 240px;
    height: 240px;
  }
}

/* Sidebar-specific mobile optimizations */
@media (max-width: 767px) {
  /* When in sidebar on mobile, make widget even more compact */
  .sidebar .vector-widget,
  [data-sidebar] .vector-widget {
    max-width: 320px;
    height: 300px;
    margin: 1rem auto;
    padding: 0 15px; /* Extra padding to accommodate R and C labels */
  }

  .sidebar .vector-widget .vector-hexagon-bg,
  [data-sidebar] .vector-widget .vector-hexagon-bg,
  .sidebar .vector-widget .vector-hexagon-lines,
  [data-sidebar] .vector-widget .vector-hexagon-lines {
    width: 240px;
    height: 240px;
  }

  .sidebar .vector-widget .vector-center-score,
  [data-sidebar] .vector-widget .vector-center-score {
    width: 75px;
    height: 75px;
  }

  .sidebar .vector-widget .vector-score-value,
  [data-sidebar] .vector-widget .vector-score-value {
    font-size: 1.6em;
  }

  /* Adjust R and C in sidebar to prevent overlap */
  .sidebar .vector-widget .vector-pos-c,
  [data-sidebar] .vector-widget .vector-pos-c {
    right: 0px;
  }

  .sidebar .vector-widget .vector-pos-r,
  [data-sidebar] .vector-widget .vector-pos-r {
    left: 0px;
  }
}

/* Dashboard column mobile optimization */
@media (max-width: 991px) {
  .dashboard-vector-column {
    padding: 1.5rem 1rem;
  }

  .dashboard-vector-column .vector-widget {
    margin: 0 auto;
    max-width: 340px;
    height: 320px;
  }

  /* Smaller hexagon on mobile dashboard */
  .dashboard-vector-column .vector-widget .vector-hexagon-bg,
  .dashboard-vector-column .vector-widget .vector-hexagon-lines {
    width: 250px;
    height: 250px;
  }

  /* Adjust center score */
  .dashboard-vector-column .vector-widget .vector-center-score {
    width: 80px;
    height: 80px;
  }

  .dashboard-vector-column .vector-widget .vector-score-value {
    font-size: 1.7em;
  }
}

/* Very small mobile dashboard */
@media (max-width: 576px) {
  .dashboard-vector-column {
    padding: 1rem 0.5rem;
  }

  .dashboard-vector-column .vector-widget {
    max-width: 300px;
    height: 280px;
  }

  .dashboard-vector-column .vector-widget .vector-hexagon-bg,
  .dashboard-vector-column .vector-widget .vector-hexagon-lines {
    width: 220px;
    height: 220px;
  }

  .dashboard-vector-column .vector-widget .vector-center-score {
    width: 70px;
    height: 70px;
  }

  .dashboard-vector-column .vector-widget .vector-score-value {
    font-size: 1.5em;
  }

  /* Balance column spacing */
  .dashboard-balance-column {
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   MARKET-ONLY VECTOR WIDGET (V-E-C Triangle)
   ========================================================================== */

.vector-widget-market {
  position: relative;
  width: 280px;
  height: 260px;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Triangle background */
.vector-widget-market .vector-triangle-bg {
  position: absolute;
  width: 180px;
  height: 156px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(
    180deg,
    rgba(76, 175, 80, 0.15) 0%,
    rgba(255, 152, 0, 0.15) 50%,
    rgba(244, 67, 54, 0.15) 100%
  );
  border-radius: 4px;
}

.vector-widget-market.vector-score-green .vector-triangle-bg {
  background: linear-gradient(180deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.1) 100%);
}

.vector-widget-market.vector-score-orange .vector-triangle-bg {
  background: linear-gradient(180deg, rgba(255, 152, 0, 0.25) 0%, rgba(255, 152, 0, 0.1) 100%);
}

.vector-widget-market.vector-score-red .vector-triangle-bg {
  background: linear-gradient(180deg, rgba(244, 67, 54, 0.25) 0%, rgba(244, 67, 54, 0.1) 100%);
}

/* Center score for market widget */
.vector-widget-market .vector-center-score {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  border: 4px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vector-widget-market.vector-score-green .vector-center-score {
  border-color: #4CAF50;
}

.vector-widget-market.vector-score-orange .vector-center-score {
  border-color: #FF9800;
}

.vector-widget-market.vector-score-red .vector-center-score {
  border-color: #F44336;
}

.vector-widget-market .vector-score-value {
  font-size: 1.4em;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.vector-widget-market .vector-score-label {
  font-size: 0.6em;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Market widget dimension positions (triangle layout) */
.vector-widget-market .vector-label-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  cursor: pointer;
}

/* V - Top of triangle */
.vector-widget-market .vector-pos-v-market {
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

/* E - Bottom left */
.vector-widget-market .vector-pos-e-market {
  bottom: 45px;
  left: 15px;
}

/* C - Bottom right */
.vector-widget-market .vector-pos-c-market {
  bottom: 45px;
  right: 15px;
}

/* Market note */
.vector-widget-market .vector-market-note {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.vector-widget-market .vector-market-note small {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Inherit letter and word styles from main widget */
.vector-widget-market .vector-letter {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 4px;
}

.vector-widget-market .vector-word-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vector-widget-market .vector-word {
  font-size: 0.65em;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vector-widget-market .vector-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Popup positioning for market widget */
.vector-widget-market .vector-label-group:hover .widget-popup,
.vector-widget-market .vector-label-group.active .widget-popup {
  opacity: 1;
  pointer-events: auto;
}

.vector-widget-market .vector-pos-v-market .widget-popup {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.vector-widget-market .vector-pos-e-market .widget-popup {
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
}

.vector-widget-market .vector-pos-c-market .widget-popup {
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
}

/* Responsive for sidebar */
@media (max-width: 400px) {
  .vector-widget-market {
    width: 240px;
    height: 220px;
  }

  .vector-widget-market .vector-triangle-bg {
    width: 150px;
    height: 130px;
  }

  .vector-widget-market .vector-center-score {
    width: 60px;
    height: 60px;
  }

  .vector-widget-market .vector-score-value {
    font-size: 1.2em;
  }
}