/* Climate Records Summary — styles
   Korri Anderson - BOI - v20260522 */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap');

/* Everything is scoped under #records-page so this stylesheet can be linked into
   the NWS CMS portal without its bare selectors (body, h1, table, footer, *)
   leaking onto the surrounding CMS page. The standalone harness wraps its body
   content in <div id="records-page">. */
#records-page, #records-page *, #records-page *::before, #records-page *::after { box-sizing: border-box; }

#records-page {
    font-family: 'Roboto Condensed', sans-serif;
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 16px 64px;
    color: #000;
}

#records-page h1 { font-size: 22px; margin: 0 0 4px; }
#records-page h2 { font-size: 18px; font-weight: 700; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #ddd; }
#records-page h3 { font-size: 13px; margin: 20px 0 6px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }

#records-page .subtitle { font-size: 12px; color: #666; margin-bottom: 16px; }

#records-page input[type='date'] {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: 'Roboto Condensed', sans-serif;
}

#records-page table.records { width: 100%; border-collapse: collapse; font-size: 12px; }
#records-page table.records th, #records-page table.records td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #e0e0e0; }
#records-page table.records th { background: #eee; font-weight: 600; text-align: center; }
#records-page table.records td.station-name { text-align: left; font-weight: 500; }

#records-page .muted { color: #888; }
#records-page .loading { color: #888; font-style: italic; }
#records-page .notice { padding: 12px; background: #fff8e1; border-left: 4px solid #ffa000; margin: 12px 0; font-size: 13px; }

#records-page footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid #ccc;
    font-size: 11px;
    color: #666;
    line-height: 1.5;
}
#records-page footer p { margin: 4px 0; }

/* Section 1 — daily records */
#daily-records-container table.records th.group { background: #ddd; border-bottom: 1px solid #999; }
#daily-records-container table.records col.maxt   { background: rgba(255, 200, 200, 0.15); }
#daily-records-container table.records col.mint   { background: rgba(200, 220, 255, 0.15); }
#daily-records-container table.records col.pcpn   { background: rgba(200, 255, 220, 0.15); }
#daily-records-container table.records col.snow   { background: rgba(220, 230, 255, 0.20); }
#daily-records-container table.records col.snwd   { background: rgba(230, 210, 255, 0.20); }
#records-page table.records td.short-por::after { content: ' ‡'; color: #888; }
#records-page .mark-snow { color: #888; font-weight: 400; }

/* Section 2 — monthly + all-time records */
#monthly-records-container h3 { margin-top: 24px; }
#monthly-records-container .table-wrap { overflow-x: auto; }
#monthly-records-container table.records { min-width: 900px; }
#monthly-records-container table.records td.station-name,
#monthly-records-container table.records th.station-col {
    position: sticky; left: 0; background: #fff; z-index: 1;
}
#monthly-records-container table.records th.station-col { background: #eee; z-index: 2; }
#monthly-records-container table.records th.all-time,
#monthly-records-container table.records td.all-time {
    border-left: 2px solid #999; font-weight: 600;
}

/* Section 3 — forecast vs records */
#forecast-records-container h3 { margin-top: 24px; }
#forecast-records-container .table-wrap { overflow-x: auto; }
#forecast-records-container table.records { min-width: 720px; }
#forecast-records-container table.records td.station-name,
#forecast-records-container table.records th.station-col {
    position: sticky; left: 0; background: #fff; z-index: 1;
}
#forecast-records-container table.records th.station-col { background: #eee; z-index: 2; }

#forecast-records-container td.cell { text-align: center; padding: 6px 8px; }
#forecast-records-container td.cell .fcst { font-size: 13px; font-weight: 600; display: block; }
#forecast-records-container td.cell .rec  { font-size: 10px; color: #666; display: block; }

#forecast-records-container td.cell.warn-hot        { background: rgba(255, 80, 80, 0.85); color: #fff; }
#forecast-records-container td.cell.warn-cold       { background: rgba(80, 120, 255, 0.85); color: #fff; }
#forecast-records-container td.cell.warn-warm-night { background: rgba(255, 160, 80, 0.85); color: #fff; }
#forecast-records-container td.cell.striking        { background: rgba(255, 230, 80, 0.6); }
#forecast-records-container td.cell.striking-cold   { background: rgba(200, 230, 255, 0.7); }
#forecast-records-container td.cell.muted-cell      { color: #888; }

#forecast-records-container td.cell .warn-icon { font-size: 14px; margin-left: 4px; }

/* Tab bar (in-page section navigation) */
#records-page .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #ccc; margin: 16px 0; }
#records-page .tab-bar .tab {
    appearance: none; font: inherit; font-weight: 600; cursor: pointer; color: #333;
    background: #f3f3f3; border: 1px solid #ccc; border-bottom: none;
    padding: 8px 16px; border-radius: 6px 6px 0 0; margin-bottom: -2px;
}
#records-page .tab-bar .tab:hover { background: #e8e8e8; }
#records-page .tab-bar .tab[aria-selected="true"] { background: #fff; color: #000; border-bottom: 2px solid #fff; }
#records-page .tab-bar .tab:focus-visible { outline: 2px solid #0044cc; outline-offset: 2px; }
#records-page section[role="tabpanel"][hidden] { display: none; }

/* Record cells: prominent value, small muted year (matches the forecast cells) */
#records-page table.records .rec-yr { font-size: 10px; color: #888; }

/* Zebra striping + row hover help scan the wide daily and monthly tables */
#daily-records-container table.records tbody tr:nth-child(even) td,
#monthly-records-container table.records tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.04); }
#daily-records-container table.records tbody tr:hover td,
#monthly-records-container table.records tbody tr:hover td { background: rgba(255, 214, 0, 0.15); }

/* Next 7 days: per-table descriptions, color/icon legend, row hover */
#forecast-records-container .section-desc { font-size: 11px; color: #888; margin: 0 0 8px; }
#forecast-records-container .fcst-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11px; color: #555; margin: 4px 0 16px; }
#forecast-records-container .fcst-legend .leg-item { display: inline-flex; align-items: center; gap: 5px; }
#forecast-records-container .fcst-legend .leg-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.15); }
#forecast-records-container .fcst-legend .leg-swatch.warn-hot { background: rgba(255, 80, 80, 0.85); }
#forecast-records-container .fcst-legend .leg-swatch.striking { background: rgba(255, 230, 80, 0.6); }
#forecast-records-container .fcst-legend .leg-swatch.warn-cold { background: rgba(80, 120, 255, 0.85); }
#forecast-records-container .fcst-legend .leg-swatch.muted-swatch { background: #eee; }
#forecast-records-container tbody tr:hover td { background: rgba(255, 214, 0, 0.12); }