/* Loudon Energy Analytics styling for the multi-day peak explorer. */

body {
    font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    background: #f4f7fa;
    color: #353535;
    margin: 0;
}

.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.header-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-bottom: 3px solid #0086DC;
    padding: 14px 24px;
    margin: 0 -20px 22px;
    box-shadow: 0 1px 4px rgba(0, 95, 135, 0.10);
}

.header-logo {
    display: flex;          /* no inline baseline gap under the image */
}

.header-bar img {
    height: 52px;
}

.header-title {
    color: #005F87;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.header-sub {
    color: #52565b;
    font-size: 13.5px;
    margin: 2px 0 0;
}

.card {
    background: #ffffff;
    border: 1px solid #dfe7ee;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: 0 1px 3px rgba(0, 95, 135, 0.06);
}

.controls-row {
    display: flex;
    gap: 34px;
    align-items: flex-start;   /* keeps every control label on one line */
    flex-wrap: wrap;
}

.control-stack {
    display: flex;
    gap: 12px;
    align-items: center;
}

.control-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #005F87;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.section-title {
    color: #005F87;
    font-size: 19px;
    font-weight: 600;
    margin: 4px 0 12px;
    padding-left: 10px;
    border-left: 4px solid #0086DC;
}

.summary-line {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    line-height: 2.1;
    margin: 4px 0;
}

.day-card {
    padding: 5px 12px;
    border-radius: 7px;
    white-space: nowrap;
}

.refresh-btn {
    background: #0086DC;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.refresh-btn:hover:enabled {
    background: #005F87;
}

.refresh-btn:disabled {
    background: #b7c4ce;
    cursor: default;
}

.refresh-status {
    font-size: 12.5px;
    color: #6a7076;
    white-space: nowrap;
    line-height: 1.35;
}

/* Day cards sit under the charts, one per column, aligned to the plot area:
   the left inset matches plotly's left margin and the right its right margin,
   so each card lands beneath its own day. */
.day-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;                 /* a gap would space the column centres wider
                               than the plot's day columns; separation comes
                               from card margins, which do not move centres */
    margin: 0 20px 4px 60px;
}

.day-grid .day-card {
    text-align: center;
    white-space: normal;
    font-size: 13px;
    margin: 0 4px;
}

.day-grid-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #005F87;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 6px 0 7px 60px;
}

/* zone selector pills */
.zone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.zone-pills label {
    border: 1px solid #c4d3dd;
    padding: 6px 16px;
    border-radius: 18px;
    cursor: pointer;
    background: #ffffff;
    color: #005F87;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.zone-pills label:hover {
    background: #e8f4fc;
}

.zone-pills input {
    display: none;
}

.zone-pills label:has(input:checked) {
    background: #0086DC;
    border-color: #0086DC;
    color: #ffffff;
}

/* control label with a click-to-open (i) explainer */
.control-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.control-label-row .control-label {
    margin-bottom: 0;
}

.info {
    position: relative;
    display: inline-flex;
}

.info-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1.5px solid #0086DC;
    border-radius: 50%;
    background: #ffffff;
    color: #0086DC;
    font: 700 11px/1 Georgia, 'Times New Roman', serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.info-btn:hover,
.info-btn:focus-visible,
.info.open .info-btn {
    background: #0086DC;
    color: #ffffff;
    outline: none;
}

.info-pop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    z-index: 30;
    width: 250px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid #c4d3dd;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 95, 135, 0.14);
    color: #353535;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
}

.info-pop::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 13px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid #c4d3dd;
    border-top: 1px solid #c4d3dd;
    transform: rotate(45deg);
}

.info.open .info-pop {
    display: block;
}

/* threshold entry */
.thr-input {
    width: 170px;
    padding: 7px 10px;
    border: 1px solid #c4d3dd;
    border-radius: 6px;
    font-size: 14px;
}

.thr-input:disabled {
    background: #eef1f4;
    color: #9aa1a8;
    border-color: #dde4ea;
}

input[type="checkbox"] {
    accent-color: #0086DC;
}

/* date picker: match input styling */
#pick-day input {
    border: 1px solid #c4d3dd !important;
    border-radius: 6px;
    font-size: 14px;
    padding: 7px 10px;
    color: #353535;
}

/* --- trial: tabs ----------------------------------------------------------
   Styled to sit inside the existing card language: white tab strip, brand
   blue for the selected tab, no shadowed Dash defaults. */
.trial-tabs {
    margin-bottom: 18px;
}

.trial-tabs .trial-tab {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #005F87;
    background: #ffffff;
    border: 1px solid #dfe7ee !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0;
    padding: 10px 22px !important;
    margin-right: 6px;
}

.trial-tabs .trial-tab--on {
    background: #0086DC !important;
    color: #ffffff !important;
    border-color: #0086DC !important;
}

.trial-tabs .tab-content,
.trial-tabs .tab-parent {
    border: none !important;
}

.tab-intro {
    color: #52565b;
    font-size: 14px;
    line-height: 1.5;
    margin: 14px 0 12px 2px;
}

/* --- trial: "Why PeakSense" tab -------------------------------------------
   The pitch page (built from sales/ into assets/pitch.html) is framed whole;
   pitch.js sizes the frame to the page's own height, so no inner scrollbar.
   The page paints the same ground colour as the app, so the frame edge is
   invisible. */
.pitch-frame {
    display: block;
    width: 100%;
    border: 0;
    min-height: 1400px;
    background: #f4f7fa;
}

/* --- trial: locked zone section on the live tab -------------------------- */
.zone-pills--locked label {
    cursor: default;
    opacity: 0.55;
}

.zone-pills--locked label:hover {
    background: #ffffff;              /* no hover feedback on a locked row */
}

.zone-pills--locked label:has(input:checked) {
    opacity: 1;                       /* the pre-selected zone stays vivid */
}

.locked-panel {
    text-align: center;
    padding: 46px 20px 50px;
    border: 1px dashed #c4d3dd;
    border-radius: 8px;
    background: #f8fafc;
    margin-top: 6px;
}

.locked-title {
    color: #005F87;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.locked-link {
    color: #0086DC;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.locked-link:hover {
    text-decoration: underline;
}

/* --- redrawing a section ---------------------------------------------------
   While the server draws a new date, zone, threshold or overlay, dcc.Loading
   hides the stale plot (it keeps its height, so nothing jumps) and this
   wheel stands in its place.  The wheel is sticky within the hidden block,
   so it stays in view however tall the block is and wherever the page is
   scrolled -- a section picked from the controls at the top of the page
   can have its middle well below the fold. */
.tab-parent.trial-tabs-parent {
    overflow: visible;      /* Dash's default `hidden` would make the tabs,
                               not the window, the wheel's scroll container */
}

.chart-loading {
    position: sticky;
    top: 35vh;
    bottom: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.chart-wheel {
    width: 46px;
    height: 46px;
    border: 4px solid #dfe7ee;
    border-top-color: #0086DC;
    border-radius: 50%;
    animation: chart-wheel-spin 0.9s linear infinite;
}

.chart-wheel-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #005F87;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

@keyframes chart-wheel-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .chart-wheel { animation-duration: 2.4s; }
}

/* --- site footer --------------------------------------------------------- */

.site-footer {
    margin-top: 26px;
    padding: 14px 4px 0;
    border-top: 1px solid #dfe7ee;
    color: #7b858e;
    font-size: 12.5px;
    line-height: 1.7;
}

.site-footer a {
    color: #005F87;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #0086DC;
    text-decoration: underline;
}