/**
 * Human Design Calculator & Result Styles
 * Form styling is now in /style/forms.css
 */

.eidae-result {
    margin-top: 30px;
    padding: 20px;
    background-color: #f0f2f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.eidae-result h4 {
    margin-top: 0;
    color: #333;
}

.eidae-result-chart {
    margin-top: 15px;
}

/* ==========================================
   Chart SVG Container
   ========================================== */
.eidae-chart {
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.eidae-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   Centers (9 Energy Centers)
   ========================================== */

/* Default (undefined) state - transparant met outline */
#eidae-figure #centers > g {
    transition: opacity 0.3s ease;
}

#eidae-figure #centers > g #shape {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2;
}

/* Defined state - gekleurd en opaque */
#eidae-figure #centers > g.defined {
    opacity: 1;
}

#eidae-figure #centers > g.defined #highlight {
    fill: currentColor;
}

/* Traditionele Human Design center kleuren */
#eidae-figure #head.defined {
    color: #FBF7AD; /* Yellow - Inspiratie */
}

#eidae-figure #ajna.defined {
    color: #669A8D; /* Green - Conceptualisering */
}

#eidae-figure #throat.defined {
    color: #57423E; /* Brown - Manifestatie */
}

#eidae-figure #g.defined {
    color: #FBF7AD; /* Yellow - Identiteit */
}

#eidae-figure #heart.defined {
    color: #D04A49; /* Red - Wilskracht */
}

#eidae-figure #spleen.defined {
    color: #57423E; /* Brown - Intuïtie */
}

#eidae-figure #solar_plexus.defined {
    color: #57423E; /* Brown - Emoties */
}

#eidae-figure #sacral.defined {
    color: #D04A49; /* Red - Levenskracht */
}

#eidae-figure #root.defined {
    color: #57423E; /* Brown - Druk */
}

/* ==========================================
   Gates (64 Poorten)
   ========================================== */

/* Default gate state */

#eidae-figure g[id^="g"].defined {
    opacity: 1;
}

#eidae-figure g[id^="g"].defined circle {
    fill: currentColor;
}

/* Design activatie (rood) - vanaf geboorte 88 dagen eerder */
#eidae-figure g[id^="g"].design {
    color: #C25354;
    cursor: pointer;
}

/* Personality activatie (zwart) - op geboortetijdstip */
#eidae-figure g[id^="g"].personality {
    color: #121212;
    cursor: pointer;
}

/* Beide activaties (composite) */
#eidae-figure g[id^="g"].both {
    color: #6182A0; /* Mix van design en personality */
}

/* ==========================================
   Channels (36 Kanalen)
   ========================================== */

#eidae-figure #channelHighlights path {
    opacity: 0;
    fill: transparent;
    stroke: transparent;
    transition: opacity 0.3s ease, stroke 0.3s ease;
}

#eidae-figure #channelHighlights path.defined {
    opacity: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
}

/* Channel kleuren gebaseerd op welke gates ze verbinden */
#eidae-figure #channelHighlights path.design {
    stroke: #C25354;
}

#eidae-figure #channelHighlights path.personality {
    stroke: #121212;
}

#eidae-figure #channelHighlights path.both {
    stroke: #6182A0;
}

/* ==========================================
   Planet Tables (Design links, Personality rechts)
   ========================================== */

#regular-planet-table .planet-wrapper {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#regular-planet-table .planet-wrapper:hover {
    opacity: 0.8;
}

.planet-table-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Design side (links) */
.bg-hover-design:hover {
    background: rgba(194, 83, 84, 0.1);
}

.color-design {
    color: #C25354;
}

/* Personality side (rechts) */
.bg-hover-personality:hover {
    background: rgba(18, 18, 18, 0.1);
}

.color-personality {
    color: #121212;
}

/* Variable arrows (boven chart) - geen proprietary font gebruiken */
.variable-arrow-renderer {
    font-family: sans-serif;
    font-size: 14px;
}

/* ==========================================
   Interactive Hover States
   ========================================== */

#eidae-figure #centers > g:hover {
    opacity: 1;
}

#eidae-figure g[id^="g"]:hover {
    opacity: 1;
}

#eidae-figure g[id^="g"]:hover circle {
    stroke: var(--c-blue, #4682b4);
    stroke-width: 2;
}

/* Info panels */
.eidae-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.eidae-summary-item {
    padding: 15px;
    background-color: var(--c-grey-100, #ffffff);
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.eidae-summary-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--c-grey-33, #555555);
    font-size: 12px;
    text-transform: uppercase;
}

.eidae-summary-item span {
    color: #333;
    font-size: 16px;
}

/* Location autocomplete */
.eidae-location-list {
    position: absolute;
    top: calc(100% + 2px);
    z-index: var(--z-zwevend, 200);
    background: var(--c-grey-100, #ffffff);
    border: 1px solid var(--c-grey-89, #dee2e6);
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    box-shadow: var(--sh-elev-4, 0 8px 24px rgba(86, 79, 69, 0.2));
}

.location-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--c-grey-89, #dee2e6);
}

.location-item:hover {
    background-color: #f0f2f5;
}

.location-item:last-child {
    border-bottom: none;
}

.location-selected {
    border-color: var(--c-blue, #4682b4) !important;
    background-color: #f0f2f5 !important;
}

/* Result grid */
.eidae-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.eidae-info-panel,
.eidae-gates-panel,
.eidae-channels-panel,
.eidae-centers-panel {
    padding: 15px;
    background: var(--c-grey-100, #ffffff);
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.eidae-info-panel h4,
.eidae-gates-panel h5,
.eidae-channels-panel h5,
.eidae-centers-panel h5 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid var(--c-blue, #4682b4);
    padding-bottom: 8px;
}

.eidae-info-item {
    margin-bottom: 10px;
    padding: 8px;
    background: #f0f2f5;
    border-radius: 3px;
}

.eidae-gate-item,
.eidae-channel-item,
.eidae-center-item {
    padding: 8px;
    margin-bottom: 5px;
    background: #f0f2f5;
    border-radius: 3px;
    font-size: 14px;
}

.gate-type {
    display: inline-block;
    padding: 2px 6px;
    background: var(--c-blue, #4682b4);
    color: var(--c-white, #ffffff);
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* ── Hover cross-highlighting ─────────────────────────────────────────── */

.bg-gt.eidae-highlight ellipse {
    stroke-width: 2.5px;
  animation: eidae-pulse 1.5s ease-in-out infinite alternate;
}

.bg-gt.eidae-highlight text {
    font-weight: bold;
  animation: eidae-pulse 1.5s ease-in-out infinite alternate;
}

.bg-ch.eidae-highlight path,
.bg-ch.eidae-highlight line {
  animation: eidae-pulse 1.5s ease-in-out infinite alternate;
}

.pt tr.eidae-highlight td, #maxChart.eidae-highlight {
  animation: eidae-pulse 1.5s ease-in-out infinite alternate;
}

/* ── Highlight-animatie (via JS .eidae-highlight class) ────────────────────── */
@keyframes eidae-pulse {
    from { filter: drop-shadow(0 0 1px var(--c-white, #ffffff)) drop-shadow(0 0 3px cyan); }
    to   { filter: drop-shadow(0 0 3px var(--c-white, #ffffff)) drop-shadow(0 0 8px cyan); }
}


/* ─────────────────────────────────────────────────────────────────────── */

.gate-center {
    color: var(--c-grey-33, #555555);
    font-size: 12px;
}

.eidae-wheel-layout {
  width: 757px;
  height:757px;
  border-radius: 20px;
  padding: 5px;
  background-color: #021b33;
}

/* ==========================================================================
   Wheel chart — identieke rules voor geneste chart in .eidae-wheel
   ========================================================================== */

.eidae-wheel [id$="-centers"] > g {
    transition: opacity 0.3s ease;
}

.eidae-wheel [id$="-centers"] > g.defined {
    opacity: 1;
}

.eidae-wheel [id$="-head"].defined    { color: #FBF7AD; }
.eidae-wheel [id$="-ajna"].defined    { color: #669A8D; }
.eidae-wheel [id$="-throat"].defined  { color: #57423E; }
.eidae-wheel [id$="-heart"].defined   { color: #D04A49; }
.eidae-wheel [id$="-spleen"].defined  { color: #57423E; }
.eidae-wheel [id$="-sacral"].defined  { color: #D04A49; }
.eidae-wheel [id$="-root"].defined    { color: #57423E; }

.eidae-wheel [id$="-centers"] > g:hover {
    opacity: 1;
}

/* Ring-segment highlight (data-gate elementen in wheel) */
.eidae-wheel [data-gate].eidae-highlight {
    animation: eidae-pulse 1.5s ease-in-out infinite alternate;
}
#eidae-view-toggle-wrapper {
  position: relative;
}

#maxChart {
  position: absolute;
  color: lightblue;
  font-size: 24px;
  font-weight: bold;
  right: 15px;
  top: 78px;
  cursor: pointer;
  z-index: 2;
}
#eidae-chart-view {
    position: relative;
    width: 100%;
    transition: all 0.25s ease;
}

/* fullscreen mode */
#eidae-chart-view.fullScreen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: var(--z-overlay, 400);

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(var(--c-slate-rgb, 47, 79, 79), var(--a-90, 0.9));

    padding: 2rem;
    box-sizing: border-box;
}

/* SVG behouden van verhouding */
#eidae-chart-view.fullScreen #SaveChart {
    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}
#maxChart.highlight {
    position: fixed;

    top: 1rem;
    right: 1rem;

    z-index: calc(var(--z-overlay, 400) + 1);
    font-size:32px;
}

/* ── CSP fase 7 (ronde 42): wat eerder als style-attribuut in de markup stond ── */
/* Verborgen planeet-symbolen (<symbol>'s voor <use href="#eidae-planet-…">), was display:none. */
.eidae-planet-defs { display: none; }
/* Planeet-icoon in de planetentabel (eidae.js), was vertical-align in de string. */
.eidae-planet-col .planet-icon { vertical-align: middle; }
/* Kop boven de gate-badges in het infopaneel; wint van .eidae-info-panel h3 (chart.css). */
.eidae-info-panel .eidae-gates-heading { margin-top: 10px; }
/* De wheel-SVG (EidaeWheelRenderer), was display:block op het element zelf. */
.eidae-wheel { display: block; }