/* =======================================================================
   Solar Dashboard – App-specific styles
   Global element spacing (headings, paragraphs, labels, inputs) comes from
   /css/40-typography.css.  Component spacing (cards, CTAs, notices) comes
   from /css/30-components.css.  This file covers only patterns unique to
   this app.
   ======================================================================= */


/* ===================================================================== */
/*  SECTION NAV (anchor links bar)                                        */
/* ===================================================================== */

.solar-section-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.solar-section-nav a {
    color: var(--kw-blue);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--ease-default);
}

.solar-section-nav a:hover {
    color: var(--kw-blue-darkened);
}


/* ===================================================================== */
/*  STAT CARDS  (live generation, production today, systems)              */
/* ===================================================================== */



/* ===================================================================== */
/*  HIGHLIGHT NUMBER  (large primary-coloured figure inside stat cards)   */
/* ===================================================================== */

.solar-highlight-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kw-blue);
}

.solar-stat {
    padding: var(--card-padding);
    text-align: center;
}


/* ===================================================================== */
/*  CHART CONTAINER                                                       */
/* ===================================================================== */

.solar-chart-container {
    width: 100%;
    max-width: 800px;
    margin: var(--space-md) auto;
}


/* ===================================================================== */
/*  FORECAST CONTROLS                                                     */
/* ===================================================================== */

.solar-forecast-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

/* Labels inside flex controls should not force a line break */
.solar-forecast-controls label {
    display: inline;
    margin-bottom: 0;
}

.solar-forecast-controls .kw-select {
    width: auto;
    min-width: 140px;
    margin-bottom: 0;
}




/* ===================================================================== */
/*  SOCIAL SHARING BUTTONS                                                */
/* ===================================================================== */

.solar-share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.solar-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--grey-border);
    transition: transform var(--ease-default), box-shadow var(--ease-default);
}

.solar-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.solar-share-btn img {
    width: 24px;
    height: 24px;
}


/* ===================================================================== */
/*  RESPONSIVE                                                            */
/* ===================================================================== */

@media (max-width: 768px) {
    .solar-highlight-number { font-size: 1.7rem; }
    .solar-section-nav      { gap: var(--space-sm); }
}

.solar-table-scroll {
    overflow-x: auto;
}

@media (max-width: 480px) {
    #todays-generation-section .kw-grid--3 {
        grid-template-columns: 1fr;
    }
}