/* Tools Theme — Light/Dark mode support */
/* Reads from localStorage('communityTheme') to match community pages */

/* Theme toggle button */
.theme-toggle-tool {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,0.2);
    background: rgba(128,128,128,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.theme-toggle-tool:hover {
    background: rgba(128,128,128,0.2);
}
.theme-toggle-tool .icon-sun,
.theme-toggle-tool .icon-moon {
    width: 18px;
    height: 18px;
}
/* Dark mode: show sun icon (to switch to light), hide moon */
[data-theme="dark"] .theme-toggle-tool .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-tool .icon-moon { display: none; }
/* Light mode: show moon icon (to switch to dark), hide sun */
[data-theme="light"] .theme-toggle-tool .icon-sun { display: none; }
[data-theme="light"] .theme-toggle-tool .icon-moon { display: block; }

/* ===== LIGHT MODE OVERRIDES ===== */
[data-theme="light"] body {
    background: #f5f6f8 !important;
    color: #1a1a2e !important;
}

[data-theme="light"] .tool-nav {
    background: rgba(255,255,255,0.85) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .tool-nav .back-link {
    color: rgba(0,0,0,0.6) !important;
}
[data-theme="light"] .tool-nav .back-link:hover {
    color: var(--primary-orange) !important;
}
[data-theme="light"] .tool-nav h1 {
    color: #1a1a2e !important;
}

[data-theme="light"] .tool-content {
    color: #1a1a2e !important;
}

[data-theme="light"] .info-card,
[data-theme="light"] .map-container,
[data-theme="light"] .forecast-card,
[data-theme="light"] .shower-card,
[data-theme="light"] .planet-card,
[data-theme="light"] .result-card,
[data-theme="light"] .calc-card {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

[data-theme="light"] .info-card h3,
[data-theme="light"] .forecast-card h3 {
    color: #1a1a2e !important;
}

[data-theme="light"] .stat-row {
    border-bottom-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .stat-label {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .stat-value {
    color: #1a1a2e !important;
}

/* Crew members */
[data-theme="light"] .crew-info .name {
    color: #1a1a2e !important;
}
[data-theme="light"] .crew-info .agency {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .crew-member {
    border-bottom-color: rgba(0,0,0,0.06) !important;
}

/* Pass items */
[data-theme="light"] .pass-item {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .pass-date {
    color: #1a1a2e !important;
}
[data-theme="light"] .pass-details {
    color: rgba(0,0,0,0.55) !important;
}

/* Form inputs */
[data-theme="light"] .location-form input,
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="date"],
[data-theme="light"] select {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .location-form input::placeholder,
[data-theme="light"] input::placeholder {
    color: rgba(0,0,0,0.35) !important;
}

/* Live badge stays green regardless */
[data-theme="light"] .live-badge {
    background: rgba(34,197,94,0.1) !important;
    border-color: rgba(34,197,94,0.2) !important;
}

/* General text overrides */
[data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 {
    color: #1a1a2e !important;
}
[data-theme="light"] p {
    color: rgba(0,0,0,0.65);
}

/* Shower/planet/satellite cards text */
[data-theme="light"] .shower-name,
[data-theme="light"] .planet-name,
[data-theme="light"] .sat-name {
    color: #1a1a2e !important;
}
[data-theme="light"] .shower-details,
[data-theme="light"] .planet-details,
[data-theme="light"] .sat-details {
    color: rgba(0,0,0,0.55) !important;
}

/* Moon phase specific */
[data-theme="light"] .phase-name {
    color: #1a1a2e !important;
}
[data-theme="light"] .phase-detail {
    color: rgba(0,0,0,0.55) !important;
}

/* Calendar cells */
[data-theme="light"] .cal-day {
    color: rgba(0,0,0,0.7) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .cal-day.today {
    border-color: var(--primary-orange) !important;
}

/* Section headers in tools */
[data-theme="light"] .section-title,
[data-theme="light"] .section-header {
    color: #1a1a2e !important;
}

/* Table styles */
[data-theme="light"] table th {
    color: rgba(0,0,0,0.5) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] table td {
    color: #1a1a2e !important;
    border-bottom-color: rgba(0,0,0,0.05) !important;
}

/* Scrollbar for light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f0f0f0;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* Tabs and buttons */
[data-theme="light"] .tab-btn {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .tab-btn.active {
    color: var(--primary-orange) !important;
}
[data-theme="light"] .btn-location {
    background: rgba(0,0,0,0.06) !important;
}

/* Aurora/telescope specific overrides */
[data-theme="light"] .aurora-map,
[data-theme="light"] .kp-meter {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Tooltip overrides for light mode */
[data-theme="light"] .sky-tooltip {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a1a2e !important;
}

/* Sky-map ctrl-btn theme toggle icons */
#btnTheme .icon-sun,
#btnTheme .icon-moon { width: 18px; height: 18px; }
[data-theme="dark"] #btnTheme .icon-sun { display: block; }
[data-theme="dark"] #btnTheme .icon-moon { display: none; }
[data-theme="light"] #btnTheme .icon-sun { display: none; }
[data-theme="light"] #btnTheme .icon-moon { display: block; }
[data-theme="light"] #btnTheme {
    background: rgba(255,255,255,0.5) !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #1a1a2e !important;
}

/* Sky-map search bar light mode */
[data-theme="light"] #searchBox {
    background: rgba(255,255,255,0.8) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] #searchBox::placeholder {
    color: rgba(0,0,0,0.4) !important;
}
[data-theme="light"] #searchResults {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] #searchResults div {
    color: #1a1a2e !important;
}
[data-theme="light"] #searchResults div:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* Sky-map ctrl buttons light mode */
[data-theme="light"] .ctrl-btn {
    background: rgba(255,255,255,0.5) !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #1a1a2e !important;
}

/* Sky-map compass light mode */
[data-theme="light"] #compass {
    color: rgba(0,0,0,0.6) !important;
}

/* Sky-map info overlay */
[data-theme="light"] #infoOverlay {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a1a2e !important;
}

/* Leaflet map tiles in light mode (ISS tracker, light pollution) */
[data-theme="light"] .leaflet-container {
    background: #e8e8e8 !important;
}
[data-theme="light"] .leaflet-control-zoom a {
    background: white !important;
    color: #333 !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ===== PLANET VISIBILITY PAGE — LIGHT MODE ===== */
[data-theme="light"] .sky-header .location-line {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .sky-header .location-line:hover {
    color: rgba(0,0,0,0.8) !important;
}
[data-theme="light"] .sun-bar {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .sun-bar .sun-item {
    color: rgba(0,0,0,0.65) !important;
}
[data-theme="light"] .sun-bar .sun-item strong {
    color: #1a1a2e !important;
}
[data-theme="light"] .stat-box {
    background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .stat-box .lbl {
    color: rgba(0,0,0,0.45) !important;
}
[data-theme="light"] .stat-box .val {
    color: #1a1a2e !important;
}
[data-theme="light"] .planet-note {
    color: rgba(0,0,0,0.6) !important;
    border-top-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .alt-bar-bg {
    background: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .alt-label {
    color: rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .loading-state {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .loading-state .spinner {
    border-color: rgba(0,0,0,0.1) !important;
    border-top-color: #ff914d !important;
}
[data-theme="light"] .tips-section {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .tips-section p {
    color: rgba(0,0,0,0.6) !important;
}
[data-theme="light"] .refresh-btn {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.65) !important;
}
[data-theme="light"] .refresh-btn:hover {
    background: rgba(0,0,0,0.09) !important;
    color: #1a1a2e !important;
}

[data-theme="light"] .pos-val { color: rgba(0,0,0,0.65) \!important; }

/* ===== METEOR SHOWERS PAGE — LIGHT MODE ===== */
[data-theme=light] .next-shower .date {
    color: rgba(0,0,0,0.6) !important;
}
[data-theme=light] .countdown-item .unit {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme=light] .shower-date .day {
    color: #1a1a2e !important;
}
[data-theme=light] .shower-date .year {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme=light] .shower-info p {
    color: rgba(0,0,0,0.6) !important;
}
[data-theme=light] .shower-stat .label {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme=light] .shower-stat .value {
    color: #1a1a2e !important;
}
[data-theme=light] .tip-item {
    color: rgba(0,0,0,0.7) !important;
}
[data-theme=light] .tips-card {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme=light] .tips-card h3 {
    color: #1a1a2e !important;
}

/* ===== MOON PHASES PAGE — LIGHT MODE ===== */
[data-theme="light"] .moon-age {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .moon-phase-name {
    color: #1a1a2e !important;
}
[data-theme="light"] .calendar-header {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .calendar-day {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .calendar-day .date {
    color: #1a1a2e !important;
}
[data-theme="light"] .calendar-day:hover {
    background: rgba(0,0,0,0.08) !important;
    border-color: var(--primary-orange) !important;
}
[data-theme="light"] .calendar-day.today {
    background: rgba(255,145,77,0.15) !important;
    border-color: var(--primary-orange) !important;
}
[data-theme="light"] .month-nav button {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .month-nav button:hover {
    background: var(--primary-orange) !important;
    color: white !important;
}
[data-theme="light"] .phase-legend {
    border-top-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .legend-item {
    color: rgba(0,0,0,0.65) !important;
}

/* ===== SUN TIMES PAGE — LIGHT MODE ===== */
[data-theme="light"] .location-input input {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .location-input input::placeholder {
    color: rgba(0,0,0,0.35) !important;
}

/* ===== MOON PHASES LOCATION PICKER — LIGHT MODE ===== */
[data-theme="light"] .location-line {
    color: rgba(0,0,0,0.5) !important;
    border-color: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .location-line:hover {
    color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
}
[data-theme="light"] .loc-picker-box {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .loc-picker-box h3 {
    color: #1a1a2e !important;
}
[data-theme="light"] .loc-search-row input {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .loc-search-row input::placeholder {
    color: rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .loc-gps-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.6) !important;
}
[data-theme="light"] .loc-status {
    color: rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .loc-result-item {
    color: rgba(0,0,0,0.8) !important;
}
[data-theme="light"] .loc-result-item:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* ===== ISS TRACKER — LIGHT MODE ===== */
[data-theme="light"] .pass-date {
    color: #1a1a2e !important;
}
[data-theme="light"] .pass-details {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] #crewList p,
[data-theme="light"] #passList p {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .location-form input {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .location-form input::placeholder {
    color: rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .btn-location {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ===== SUN TIMES — LIGHT MODE ===== */
[data-theme="light"] .sun-display {
    background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 40%, #fff7ed 100%) !important;
    border: 1px solid rgba(249,115,22,0.15) !important;
}
[data-theme="light"] .sun-time-block .label {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .daylight-bar .label {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .daylight-bar {
    border-top-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .daylight-progress {
    background: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .location-input button {
    color: #1a1a2e !important;
}
[data-theme="light"] .location-input button[style] {
    background: rgba(0,0,0,0.07) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: #1a1a2e !important;
}

/* ===== ISS TRACKER LIGHT MODE — PASS LIST & LOCATION FORM ===== */
.pass-placeholder,
.crew-loading,
.pass-location-hint {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 0.5rem 0;
    margin: 0 0 0.75rem;
}
.pass-location-hint {
    text-align: left;
    padding: 0;
    margin-bottom: 0.75rem;
}
[data-theme="light"] .pass-placeholder,
[data-theme="light"] .crew-loading,
[data-theme="light"] .pass-location-hint {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .iss-fallback-msg {
    color: #1a1a2e !important;
    background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .iss-fallback-msg ul,
[data-theme="light"] .iss-fallback-msg li,
[data-theme="light"] .iss-fallback-msg p {
    color: rgba(0,0,0,0.65) !important;
}
[data-theme="light"] .location-form {
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .location-form input {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .location-form input::placeholder {
    color: rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .btn-location {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .pass-item {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pass-date {
    color: #1a1a2e !important;
}
[data-theme="light"] .pass-details {
    color: rgba(0,0,0,0.55) !important;
}

/* ===== ISS — CREW AVATAR & PASS ITEMS (definitive) ===== */
[data-theme="light"] .crew-avatar {
    color: white !important;
}
[data-theme="light"] .crew-info .name {
    color: #1a1a2e !important;
}
[data-theme="light"] .crew-info .agency {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .pass-item {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .pass-date {
    color: #1a1a2e !important;
}
[data-theme="light"] .pass-details {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .location-form button:not(.btn-location) {
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-red)) !important;
    color: white !important;
}

/* ===== AURORA — LIGHT MODE ===== */
[data-theme="light"] .kp-display {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(16,185,129,0.08)) !important;
    border-color: rgba(34,197,94,0.2) !important;
}
[data-theme="light"] .kp-label {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .kp-bar {
    background: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .kp-bar.g1 { background: #22c55e !important; }
[data-theme="light"] .kp-bar.g2 { background: #84cc16 !important; }
[data-theme="light"] .kp-bar.g3 { background: #fbbf24 !important; }
[data-theme="light"] .kp-bar.g4 { background: #f97316 !important; }
[data-theme="light"] .kp-bar.g5 { background: #ef4444 !important; }
[data-theme="light"] .location-item {
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .location-item .name {
    color: #1a1a2e !important;
}
[data-theme="light"] .visibility-map {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .visibility-map h3 {
    color: #1a1a2e !important;
}
[data-theme="light"] .aurora-credit {
    color: rgba(0,0,0,0.45) !important;
}

/* ===== SATELLITE TRACKER — LIGHT MODE ===== */
[data-theme="light"] .satellite-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .satellite-name .type {
    background: rgba(0,0,0,0.07) !important;
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .category-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.6) !important;
}
[data-theme="light"] .category-btn:hover,
[data-theme="light"] .category-btn.active {
    background: rgba(255,145,77,0.12) !important;
    border-color: var(--primary-orange) !important;
    color: var(--primary-orange) !important;
}
[data-theme="light"] .satellite-details .detail-item {
    background: rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .detail-item .label {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .pass-timeline {
    border-top-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pass-direction {
    color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .info-section {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .location-input button:last-child {
    background: rgba(0,0,0,0.06) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* ===== TELESCOPE CALCULATOR — LIGHT MODE ===== */
[data-theme="light"] .input-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .form-group label {
    color: rgba(0,0,0,0.65) !important;
}
[data-theme="light"] .form-group .hint {
    color: rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .result-item {
    background: rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .result-item .label {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .result-item .unit {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .result-item .note {
    color: rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .info-section p,
[data-theme="light"] .info-section p * {
    color: rgba(0,0,0,0.65) !important;
}