/* com_riverflows — hybrid desktop table / mobile card layout */

.table-wrapper {
    overflow-x: auto;
    max-width: 90%;
    margin: 0 auto;
}

.responsive-table {
    width: auto;
    min-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: auto;
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #ccc;
    padding: 6px;
}

.responsive-table th {
    background-color: #eee;
    text-align: left;
}

/* Fixed-width, non-wrapping CFS column — used instead of nth-child so it
   works regardless of how many columns a given table has (riverflows is
   5 columns, surfwaves is 6). */
.responsive-table .col-cfs {
    white-space: nowrap;
    width: 140px;
}

.cfs-low {
    background: linear-gradient(to right, yellow 20%, transparent 70%);
    border-right: none !important;
}

.cfs-mid {
    color: antiquewhite;
    background: linear-gradient(to right, green 50%, transparent 80%);
}

.cfs-high {
    background: linear-gradient(to right, red 70%, transparent 90%);
}

/* ===== MOBILE CARD VIEW ===== */
.cards-container {
    display: none;
    font-family: Arial, sans-serif;
}

.card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
}

.card h4 {
    font-size: 16px;
    margin: 0 0 0.5rem 0;
}

.card p {
    margin: 0.3rem 0;
}

.card .cfs-low,
.card .cfs-mid,
.card .cfs-high {
    padding: 4px 16px;
    border-radius: 4px;
    display: inline-block;
    min-width: 3.5em;
    text-align: center;
}

.card .cfs-low {
    background-color: #ffff99;
}

.card .cfs-mid {
    background-color: #99ff99;
    color: #000;
}

.card .cfs-high {
    background-color: #ff9999;
}

/* ===== RESPONSIVE TOGGLE ===== */
@media (max-width: 768px) {
    .responsive-table {
        display: none;
    }

    .cards-container {
        display: block;
    }
}

/* ===== DASHBOARD (river flows + surf waves + map on one page) ===== */
.riverflows-dashboard .dashboard-section {
    margin-bottom: 2.5rem;
}

.riverflows-dashboard .dashboard-section h3 {
    margin-bottom: 0.75rem;
}

.riverflows-map {
    margin: 1rem 0;
}

/* ===== OVERVIEW (all basins, one accordion panel per basin) ===== */
.riverflows-overview .dashboard-section {
    margin-bottom: 2.5rem;
}

.riverflows-overview .dashboard-section h3 {
    margin-bottom: 0.75rem;
}

/* Tabs & Accordions already gives each panel its own padding
   ([data-rlta-element=panel-content] { padding: 1.25em }). Our normal
   .table-wrapper adds a further 90% max-width + auto margins on top of
   that, shrinking the usable width twice over and forcing the table
   into its own horizontal scrollbar sooner than it needs to. Let the
   table use the accordion panel's full width instead. */
.riverflows-overview .table-wrapper {
    max-width: 100%;
    margin: 0;
}

/* .responsive-table itself also centers a fixed 800px-min table with
   `margin: 0 auto` — fine on the standalone per-basin pages where the
   surrounding column is narrow, but inside a wide accordion panel it
   leaves large equal gaps on both sides instead of filling the panel.
   Stretch it to the panel's width; min-width stays as a floor so it
   still degrades to horizontal scroll (not squished text) on narrow
   screens rather than the empty side gaps. */
.riverflows-overview .responsive-table {
    width: 100%;
    margin: 0;
}

/* On mobile, Tabs & Accordions' own panel-content padding (1.25em, i.e.
   ~20px each side) eats a much bigger share of a narrow phone screen
   than it does on desktop, leaving the cards looking hemmed in with
   excess whitespace on both sides. Scoped to our own page only (not a
   global override of the plugin's CSS, which is shared site-wide) —
   shrink it just here, just on small screens. */
@media (max-width: 768px) {
    .riverflows-overview [data-rlta-element="panel-content"] {
        padding: 0.5em;
    }
}

/* ===== SECTION DETAIL PAGE (single river section, reached via
   view=section&gid=X links from the table views above) ===== */
.riverflows-section h2 {
    margin-bottom: 1rem;
}

.riverflows-section .section-stats-wrapper {
    max-width: 100%;
    margin: 1.5rem 0;
}

.riverflows-section .section-stats-table {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.riverflows-section .section-stats-table th {
    width: 35%;
    background-color: #eee;
    text-align: left;
}

.riverflows-section .section-stats-table td.cfs-low {
    background: linear-gradient(to right, yellow 20%, transparent 70%);
}

.riverflows-section .section-stats-table td.cfs-mid {
    background: linear-gradient(to right, green 50%, transparent 80%);
}

.riverflows-section .section-stats-table td.cfs-high {
    background: linear-gradient(to right, red 70%, transparent 90%);
}

/* Ungauged section (no matching gages row) — neutral, not colored as
   if it were a real low/mid/high reading. */
.riverflows-section .section-stats-table td.cfs-unknown {
    color: #666;
    font-style: italic;
}

/* This is a small 2-column label/value table, not the wide multi-row
   flow tables the mobile card view exists to replace — it doesn't need
   the card fallback and shouldn't be caught by the generic
   ".responsive-table { display: none }" mobile rule above, which was
   hiding it with nothing to take its place. */
@media (max-width: 768px) {
    .riverflows-section .section-stats-table {
        display: table;
    }
}

.riverflows-section .section-block {
    margin: 1.5rem 0;
}

.riverflows-section .section-block h3 {
    margin-bottom: 0.5rem;
}