/* ========================================================= */
/* LumoLynx Solar Station                                     */
/* solar.css                                                  */
/* ========================================================= */

/* Solar-local aliases to the Lumo shell tokens — same pattern
   weather.css uses under #weather-station. Only the subset Solar's
   own rules actually reference. */
#solar-station{
    --soft:var(--soft-text);
    --glass-primary:var(--glass);
    --border-soft:var(--glass-border);
    --r-lg:var(--radius-large);
    --transition:var(--transition-fast);
    --ultra-t2:var(--text);
    --ultra-t3:var(--soft-text);
    --ultra-border:var(--glass-border);
    /* Card width — matches #weather-station exactly. Deliberately kept
       local to Solar rather than lifted into the shared .station rule
       for now; revisit once more stations exist and this proves out
       as the standard everywhere, not just here. */
    width:100%;
    max-width:580px;
    margin-left:auto;
    margin-right:auto;
}

/* ── Solar Utility Bar — 5-column layout ── */
/* Horizontal padding matches .ws-shape's 16px exactly. Vertical
   padding (4px) is untouched — the collapsed bar's height does not
   change. */
.solar-utility-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid rgba(212,175,55,0.60);border-radius:var(--r-lg);padding:4px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--transition)}
.solar-utility-bar:hover{background:var(--glass-primary)}
.solar-utility-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}
.solar-col{display:flex;flex-direction:column;align-items:center;gap:1px}
.solar-col:nth-child(3){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:0;}
.solar-col:nth-child(3)::before{content:'';position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,.14);filter:blur(10px);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.solar-col:nth-child(3) .solar-icon{display:block;width:50px;height:auto;margin:-8px 0 0 0;position:relative;z-index:1;}

/* Per-event colors — shared by the collapsed bar's labels AND the
   expanded row list's event names (same classes, reused directly). */
.solar-sunrise{color:#E6D9A8}
.solar-golden{color:#D4AF37}
.solar-sunset{color:#C98B2E}
.solar-blue{color:#4DA3FF}

.solar-icon{width:50px;height:auto;opacity:.95;display:block;margin:0 auto}

/* Center caret — animates on expand/collapse */
#solar-sky-caret{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:5;}
#solar-sky-caret.open .ll-expand-icon{transform:rotate(180deg);}

/* Label / time base styles (collapsed bar's 4 outer columns) */
.solar-label{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;display:block;white-space:nowrap;line-height:1.2;text-align:left}
.solar-time{font-size:14px;font-weight:500;color:var(--text);letter-spacing:0;text-align:center;line-height:1.2}

/* ── Solar Expand Panel ── */
/* Horizontal padding matches .ws-shape's 16px exactly. */
.solar-expand-panel{display:none;border:1px solid var(--border-soft);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--glass-primary);background-image:linear-gradient(rgba(17,24,43,.55),rgba(17,24,43,.55)),url("assets/solar-dark-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
.solar-expand-panel.open{display:block}
.expand-inner{padding:12px 16px 10px}

/* ── Event list — one row per event ── */
.solar-event-list{display:flex;flex-direction:column}
.solar-event-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
.solar-event-icon{width:28px;height:28px;flex-shrink:0;display:block;object-fit:contain}
.solar-event-main{display:flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:0}
.solar-event-name{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap}
.solar-event-time{font-size:13px;font-weight:500;color:var(--text);letter-spacing:0;white-space:nowrap}

.expand-solar-sep{width:100%;height:1px;background:rgba(191,199,209,0.12);margin:2px 0}

/* Alarm control — border-top separator, space-between spread across
   the full width. Sits as its own full-width element below each
   event's row, not nested inside it. */
.expand-alarm{border-top:1px solid var(--border-soft);padding-top:10px;margin-top:2px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.expand-alarm-lbl{font-size:11px;font-weight:700;color:var(--soft);white-space:nowrap;min-width:170px;flex:0 0 auto}
.expand-timing-opts{display:flex;gap:6px}

.sky-timing-btn{background:var(--glass-primary);border:1px solid var(--border-soft);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;color:var(--soft);cursor:pointer;font-family:inherit;transition:all 0.15s}
.sky-timing-btn.sel{background:rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.55);color:rgba(212,175,55,0.95)}

/* Custom toggle switch. Only the gold and blue variants are
   included, since those are the only two Solar's markup uses (red
   belonged to the Settings panel's weather-alert toggle, never part
   of Solar). */
.tog{position:relative;width:44px;height:25px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;border-radius:999px;background:#4A4F59;border:1.5px solid rgba(255,255,255,.18);cursor:pointer;transition:all 0.22s}
.tog-track::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#B7BCC8;top:2px;left:2px;transition:all 0.22s}
.tog.gold input:checked+.tog-track{background:rgba(212,175,55,0.22);border-color:rgba(212,175,55,0.55)}
.tog.gold input:checked+.tog-track::after{transform:translateX(19px);background:#D4AF37}
.tog.blue input:checked+.tog-track{background:rgba(77,163,255,0.22);border-color:rgba(77,163,255,0.55)}
.tog.blue input:checked+.tog-track::after{transform:translateX(19px);background:#4DA3FF}

/* Field Tip — dedicated toggle, collapsed by default */
.field-tip-toggle{appearance:none;background:transparent;border:1px solid var(--border-soft);border-radius:999px;padding:4px 11px;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--soft);cursor:pointer;font-family:inherit;transition:all 0.15s;flex-shrink:0}
.field-tip-toggle:hover{background:var(--glass-hover)}
.field-tip-body{display:none;padding:0 0 10px}
.field-tip-body.open{display:block}
.field-tip-text{font-size:11px;color:var(--soft);line-height:1.6;margin:0}

.expand-disclaimer{font-size:10px;color:var(--soft);opacity:0.65;margin:8px 0 0;text-align:center}
.expand-disclaimer a{text-decoration:none}

/* ── Light mode ── */
body.light-mode .solar-expand-panel{background:rgba(232,225,245,.72);background-image:linear-gradient(rgba(232,225,245,.55),rgba(232,225,245,.55)),url("assets/solar-light-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
body.light-mode .solar-time{color:#2E3138}
body.light-mode .solar-event-time{color:#2E3138}
body.light-mode .sky-timing-btn{border-color:var(--border-soft);color:#5B6470}
body.light-mode .sky-timing-btn.sel{background:rgba(45,125,246,0.12);border-color:rgba(45,125,246,0.35);color:#2E3138}
body.light-mode .field-tip-toggle{border-color:var(--border-soft);color:#5B6470}

/* ── Ultra mode ── */
body.ultra-mode .solar-expand-panel{background:rgba(0,0,0,0.92)}
body.ultra-mode .solar-label{color:var(--ultra-t3);opacity:1}
body.ultra-mode .solar-time{color:var(--ultra-t2)}
body.ultra-mode .solar-event-time{color:var(--ultra-t2)}
body.ultra-mode .sky-timing-btn{border-color:var(--ultra-border);color:var(--ultra-t3)}
body.ultra-mode .field-tip-toggle{border-color:var(--ultra-border);color:var(--ultra-t3)}

/* ── Mobile refinement ── */
@media (max-width:520px){

    .solar-label{
        font-size:12px;
    }

    .solar-time{
        font-size:12px;
    }

}

@media (max-width:390px){

    .solar-label{
        font-size:11px;
    }

    .solar-time{
        font-size:11px;
    }

}