/* ═══════════════════════════════════════════════════════
   CHART WHEEL, Aspect Lines, Controls & Legend
   ═══════════════════════════════════════════════════════ */

/* Default Light Mode Chart Variables */
:root {
    --wheel-bg: #ffffff;
    --wheel-zodiac-ring: #fce7f1; /* Light pink band */
    --wheel-lines: #26211e;
    --wheel-text: #26211e;
    --wheel-center-bg: #ffffff;

    --aspect-conjunction: #80766e;
    --aspect-opposition: #d32f2f; /* Red */
    --aspect-trine: #2e7d32;       /* Green */
    --aspect-square: #e65100;      /* Orange */
    --aspect-sextile: #1976d2;     /* Blue */
    --aspect-minor: #8e24aa;       /* Purple */
}

/* Dark Mode Chart Variables */
[data-theme="dark"] {
    --wheel-bg: #110f14;
    --wheel-zodiac-ring: #26161f;
    --wheel-lines: #40384a;
    --wheel-text: #e6e3eb;
    --wheel-center-bg: #17151c;

    --aspect-conjunction: #9b96a3;
    --aspect-opposition: #ff4f4f;
    --aspect-trine: #4ef2a1;
    --aspect-square: #ff9d3b;
    --aspect-sextile: #3bc6ff;
    --aspect-minor: #d843ef;
}

/* --- SVG Interactive Styling --- */
.planet-marker {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.planet-marker circle {
    transition: fill 0.2s, stroke 0.2s, r 0.2s;
}

.planet-marker:hover circle,
.planet-focused circle {
    fill: var(--accent-soft) !important;
    stroke: var(--accent) !important;
    r: 12px !important;
}

.planet-marker:hover text,
.planet-focused text {
    fill: var(--accent) !important;
    font-weight: bold !important;
}

.planet-dimmed {
    opacity: 0.15 !important;
}

/* Aspect lines base transition */
.aspect-line {
    transition: stroke-width 0.2s, opacity 0.2s, stroke 0.2s;
    cursor: pointer;
}

.aspect-line:hover,
.aspect-focused-heavy {
    stroke-width: 3px !important;
    opacity: 1 !important;
}

.aspect-focused {
    opacity: 1 !important;
    stroke-width: 2px !important;
}

.aspect-dimmed {
    opacity: 0.03 !important;
    stroke-width: 0.3px !important;
}

/* Generic elements dimmed (when highlighting angles/cusps) */
.element-dimmed {
    opacity: 0.15 !important;
}

/* Cusps and Angles focusing */
.house-cusp-line {
    transition: stroke-width 0.2s, stroke 0.2s, opacity 0.2s;
}
.house-focused {
    stroke: var(--accent) !important;
    stroke-width: 2.5px !important;
    opacity: 1 !important;
}
.house-dimmed {
    opacity: 0.1 !important;
}

.angle-line {
    transition: stroke-width 0.2s, stroke 0.2s, opacity 0.2s;
}
.angle-focused {
    stroke: var(--accent) !important;
    stroke-width: 3.5px !important;
    opacity: 1 !important;
}
.angle-dimmed {
    opacity: 0.1 !important;
}

/* Degree tick coordinates */
.degree-tick-text {
    font-size: 8px;
    fill: var(--text-secondary);
    font-family: var(--font-mono);
    opacity: 0.85;
}

.planet-label-text {
    font-size: 8px;
    fill: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* --- Row Highlight Active (Bi-directional linking) --- */
.planet-row {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.row-highlight-active {
    background: var(--hover-sand) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 12px rgba(216, 92, 137, 0.15) !important;
    border-radius: 8px;
}

[data-theme="dark"] .row-highlight-active {
    background: var(--accent-soft) !important;
    box-shadow: 0 0 12px rgba(240, 149, 185, 0.25) !important;
}

/* --- Chart Settings Grid Layout --- */
.chart-settings-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

[data-theme="dark"] .chart-settings-grid {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-light);
}

@media (max-width: 768px) {
    .chart-settings-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* Controls Panel */
.chart-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
}

.btn-group {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.btn-group .btn {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .btn-group .btn {
    background: var(--card-bg);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.btn-group .btn.active {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

[data-theme="dark"] .btn-group .btn.active {
    color: #000000;
    font-weight: bold;
}

.btn-group .btn:hover:not(.active) {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Legend Panel */
.chart-legend-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 1px solid var(--border-light);
    padding-left: 2rem;
}

[data-theme="dark"] .chart-legend-panel {
    border-left-color: var(--border-light);
}

@media (max-width: 768px) {
    .chart-legend-panel {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-light);
        padding-top: 1.5rem;
    }
    [data-theme="dark"] .chart-legend-panel {
        border-top-color: var(--border-light);
    }
}

.legend-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.lg-conjunction { background-color: var(--aspect-conjunction); }
.lg-opposition { background-color: var(--aspect-opposition); }
.lg-trine { background-color: var(--aspect-trine); }
.lg-square { background-color: var(--aspect-square); }
.lg-sextile { background-color: var(--aspect-sextile); }