/* Profile Planner map pills + connectors */
.planner-page {
  --join-overlap: 1px;
  --connector-color: rgba(255,255,255,0.55);
  --node-color: rgba(255,255,255,0.95);
  --node-glow: rgba(255,255,255,0.40);
  --node-size: 6px;
}

.planner-page .pill {
  transition: transform 120ms ease, box-shadow 180ms ease, background-color 160ms ease;
  background: var(--profile-bg);
  color: var(--font-main);
  border: 1px solid var(--profile-border);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,.15) inset, 0 1px 3px rgba(0,0,0,.25);
  position: relative;
  overflow: visible;
  will-change: transform, box-shadow;
}

.planner-page .pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce) {
  .planner-page .pill {
    transition: box-shadow 180ms ease;
  }

  .planner-page .pill:hover {
    transform: none;
  }
}

.planner-page .pill-label {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-page .pill-group {
  font-weight: 200;
}

.planner-page .pill-profile.active {
  background-color: rgba(255,255,255,0.16);
  font-weight: 600;
  border-color: var(--accent);
}

.planner-page .group-block {
  position: relative;
}

.planner-page .group-block::before {
  content: "";
  position: absolute;
  top: var(--spine-top, 0px);
  height: var(--spine-height, 0px);
  left: calc(
    var(--group-width, 220px)
    + var(--col-gap, 10px)
    + (var(--gap, 16px) / 2)
    - (var(--spine, 2px) / 2)
  );
  width: var(--spine, 2px);
  background: var(--connector-color) !important;
  opacity: .65;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

.planner-page .group-col {
  position: relative;
  display: flex;
  align-items: center;
}

.planner-page .group-col::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * (
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + var(--join-overlap, 1px)
  ));
  width: calc(
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + var(--join-overlap, 1px)
  );
  height: 2px;
  background: var(--connector-color) !important;
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.planner-page .profiles-wrap {
  position: relative;
  padding-left: 0;
}

.planner-page .pill.pill-profile::before,
.planner-page .pill.pill-profile.row-first::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--connector-color) !important;
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.planner-page .pill.pill-profile::before {
  left: calc(-1.1 * (var(--col-gap, 10px)));
  width: calc(var(--col-gap, 10px) * 1.07);
}

.planner-page .pill.pill-profile.row-first::before {
  left: calc(-1 * (
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + var(--join-overlap, 1px)
  ));
  width: calc(
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + var(--join-overlap, 1px)
  );
}

.planner-page .group-col::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * (
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + (var(--node-size) / 2)
  ));
  width: var(--node-size);
  height: var(--node-size);
  background: var(--node-color);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 6px var(--node-glow);
  display: none;
}

.planner-page .pill.pill-profile.row-first {
  position: relative;
}

.planner-page .pill.pill-profile.row-first::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * (
    var(--col-gap, 10px) + (var(--gap, 16px) / 2) + (var(--spine, 2px) / 2)
    + (var(--node-size) / 2)
  ));
  width: var(--node-size);
  height: var(--node-size);
  background: var(--node-color);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 6px var(--node-glow);
  display: block;
}

.planner-page .group-block.multi-rows .group-col::before {
  display: block !important;
}

.planner-page .group-block.multi-rows .pill.pill-profile.row-first::after {
  display: none !important;
}

.planner-page .group-block.single-row .group-col::before {
  display: none !important;
}

.planner-page .group-block.single-row .pill.pill-profile.row-first::after {
  display: block !important;
}

.planner-page .pill.pill-profile {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.planner-page .pill.pill-profile:hover {
  background-color: var(--accent, #3B82F6);
  border-color: var(--accent-end, #2563EB);
  color: var(--font-contrast, #fff);
  z-index: 3;
}

.planner-page .pill.pill-group {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.planner-page .pill.pill-group:hover {
  background: linear-gradient(
    to right,
    var(--accent, #3B82F6),
    var(--accent-end, #2563EB)
  );
  color: var(--font-contrast, #fff);
  border: none;
  z-index: 3;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.planner-page .pill-profile.has-accent {
  position: relative;
  border: 2px solid var(--pill-accent);
  background-color: transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.planner-page .pill-profile.has-accent:hover {
  background-color: var(--pill-accent);
  border-color: var(--pill-accent);
  color: #ffffff;
  animation: pulse-glow 1.6s ease-in-out infinite;
}

.planner-page .pill-profile.has-accent:focus,
.planner-page .pill-profile.has-accent:focus-visible {
  outline: 2px solid var(--pill-accent);
  outline-offset: 2px;
  box-shadow: 0 0 6px 2px var(--pill-accent);
}

.planner-page .pill-profile.has-accent:active {
  filter: brightness(0.95);
}

/* Planner metric dropdown: match toggle background */
.planner-page .planner-metric-dropdown .Select-control,
.planner-page .planner-metric-dropdown .Select-menu-outer,
.planner-page .planner-metric-dropdown .Select-option,
.planner-page .planner-metric-dropdown .Select-placeholder,
.planner-page .planner-metric-dropdown .Select-value-label,
.planner-page .planner-metric-dropdown .Select-input > input {
  background-color: #1B1D3C !important;
  color: #ffffff !important;
}

.planner-page .planner-metric-dropdown .Select-control {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.planner-page .planner-metric-dropdown .Select-menu-outer {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.planner-page .planner-top-row {
  position: relative;
  z-index: 20;
}

.planner-page #planner-controls-card {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.planner-page .planner-metric-dropdown {
  position: relative;
  z-index: 40;
}

.planner-page .planner-metric-dropdown .Select-menu-outer {
  z-index: 6000 !important;
}

.planner-page #planner-map-wrap {
  position: relative;
  z-index: 1;
}

.planner-page .planner-metric-dropdown .Select-option.is-focused,
.planner-page .planner-metric-dropdown .Select-option:hover {
  background-color: rgba(255, 217, 61, 0.2) !important;
  color: #ffffff !important;
}

.planner-page .planner-metric-row,
.planner-page #planner-index-row,
.planner-page #planner-locked-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
}

.planner-page .planner-row-main {
  min-width: 0;
}

.planner-page .planner-row-controls {
  justify-self: end;
}

.planner-page .planner-row-info-icon {
  justify-self: end;
  line-height: 1;
}

.planner-page .planner-metric-row .planner-row-info-icon {
  grid-column: 3 / 4;
}

/* Index row: smooth opacity transition when enabled/disabled */
#planner-index-row {
  transition: opacity 0.2s ease;
}

/* Planner toggle variant: keep thumb white in all states */
.planner-page .planner-white-thumb-switch .mantine-Switch-thumb,
.planner-page .planner-white-thumb-switch .mantine-Switch-input:checked + .mantine-Switch-track .mantine-Switch-thumb,
.planner-page .planner-white-thumb-switch .mantine-Switch-thumb::before,
.planner-page .planner-white-thumb-switch .mantine-Switch-thumb::after,
.planner-page .planner-white-thumb-switch .mantine-Switch-thumb * {
  background-color: #ffffff !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 4px 1px var(--pill-accent);
  }
  50% {
    box-shadow: 0 0 6px 1.5px var(--pill-accent);
  }
}

/* Profile Planner page-specific responsive layout */
@media (max-width: 980px) {
  .planner-top-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .planner-top-row .planner-intro-block {
    width: 100%;
    padding-bottom: 8px;
    align-self: flex-start;
  }

  .planner-top-row #planner-controls-card {
    width: 100%;
    min-width: 0 !important;
  }
}

@media (max-width: 700px) {
  .planner-page #planner-map-wrap {
    width: 100%;
    overflow-x: hidden;
  }

  .planner-page {
    --planner-group-col-width: clamp(88px, 24vw, 118px);
    --planner-profile-pill-width: clamp(84px, 26vw, 120px);
  }

  .planner-page .group-block {
    grid-template-columns: var(--planner-group-col-width) 16px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    --group-width: var(--planner-group-col-width) !important;
    --gap: 16px !important;
    --col-gap: 20px !important;
  }

  .planner-page .planner-map-header {
    gap: 20px !important;
  }

  .planner-page .planner-map-header > div:first-child {
    width: var(--planner-group-col-width) !important;
    flex: 0 0 var(--planner-group-col-width) !important;
    font-size: 0.78rem;
  }

  .planner-page .planner-map-header > div:nth-child(2) {
    width: 16px !important;
    flex: 0 0 16px !important;
  }

  .planner-page .planner-map-header > div:nth-child(3) {
    font-size: 0.78rem;
  }

  .planner-page .planner-map-header > div:last-child {
    font-size: 1rem !important;
    right: 0 !important;
  }

  .planner-page .profiles-wrap {
    width: 100%;
    gap: 10px !important;
    min-width: 0;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .planner-page .group-col .pill {
    width: var(--planner-group-col-width) !important;
    min-width: var(--planner-group-col-width) !important;
    max-width: var(--planner-group-col-width) !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.76rem !important;
  }

  .planner-page .profiles-wrap .pill {
    width: var(--planner-profile-pill-width) !important;
    min-width: var(--planner-profile-pill-width) !important;
    max-width: var(--planner-profile-pill-width) !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.76rem !important;
  }

  .planner-page .pill {
    max-width: 100% !important;
  }

  .planner-page .pill-label {
    max-width: 100%;
    font-size: inherit;
  }
}

@media (max-width: 520px) {
  .planner-page .planner-map-header > div:last-child {
    display: none !important;
  }

  .planner-page .planner-metric-row {
    grid-template-columns: 1fr auto !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .planner-page .planner-row-main {
    flex-wrap: wrap;
  }

  .planner-page .planner-metric-row .planner-row-main > label {
    width: 100%;
    margin-right: 0 !important;
  }

  .planner-page .planner-metric-dropdown,
  .planner-page #planner-metric {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100%;
  }

  .planner-page #planner-index-row,
  .planner-page #planner-locked-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 8px;
  }

  .planner-page #planner-index-row .planner-row-controls,
  .planner-page #planner-locked-row .planner-row-controls {
    grid-column: 1 / 2;
    justify-self: start;
  }

  .planner-page #planner-index-row .planner-row-info-icon,
  .planner-page #planner-locked-row .planner-row-info-icon {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
  }
}