/*
 * On-screen Property Record Card styling (details.php).
 *
 * Shared by every county's /<county>/map/details.php. This file holds ONLY the
 * screen-specific rules: the page shell, the dark theme, larger on-screen font
 * sizes, and the phone/responsive overrides. The print base still comes from
 * prc_styles() (inc/record-card-template.inc.php), which each details.php emits
 * inline BEFORE it links this file — so these rules win in the cascade and the
 * PDF renderer (pdf.php) is unaffected.
 */

body { margin: 0; padding: 16px; background: #1d201e; }
.toolbar { max-width: 8.5in; margin: 0 auto 12px auto; display: flex; justify-content: flex-end; }
.toolbar a {
    display: inline-block; padding: 8px 16px; background: #2e3b39; color: #f1fffa;
    text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-size: 13px;
    border: 1px solid rgba(110,219,188,0.35);
}
.toolbar a:hover { background: #3d4f4c; }
.sheet { max-width: 8.5in; margin: 0 auto; background: #242824; padding: 0.5in; box-shadow: 0 0 20px rgba(0,0,0,0.6); }

/* Dark theme overrides — applied only for the on-screen view, not the PDF */
.prc { color: #dde8e4; }
.prc .county-name, .prc .title { color: #f1fffa; }
.prc .subtitle { color: #8aab9f; }
.prc .letterhead-right { color: #aac5bc; }
.prc .hr { border-bottom-color: #3d4f4c; }
table.box td, table.box th { border-color: #3d4f4c; color: #dde8e4; }
table.box th.box-title { background: #2e3b39; color: #f1fffa; }
table.box th.box-title-right { color: #aac5bc; }
.prc .structure-label { color: #ffb07a; border-left-color: #ffb07a; }
table.box tr.subhead td, table.box tr.subhead th { background: rgba(255,255,255,0.06); color: #c0d4cc; }
table.box tr.totals td { color: #f1fffa; font-weight: bold; }
table.box td.lbl, table.box th.lbl { color: #6edbbc; }
table.box td.lbl.total-value-lbl, table.box th.lbl.total-value-lbl { color: #7cc0ff; }
table.valuation td.lbl, table.valuation th.lbl { color: #6edbbc; }
.img-placeholder { color: #5a7a70; }
tr.outbldg-val-hdr td { background: rgba(255,255,255,0.06); color: #c0d4cc; }
td.outbldg-spacer { border-color: transparent; }
.outbldg-lbl { color: #6edbbc; }

/* ── 2× font sizes (screen only — PDF keeps print sizes from prc_styles) */
.prc { font-size: 18pt; }
.prc .county-name { font-size: 32pt; }
.prc .title { font-size: 22pt; }
.prc .subtitle { font-size: 15pt; }
.prc .letterhead-right { font-size: 16pt; }
table.box { font-size: 15pt; }
table.valuation td, table.valuation th { font-size: 14pt; }
.img-placeholder { font-size: 16pt; }

/* A little breathing room between top-level sections on screen (nested
   boxes inside two-column pairs keep their tighter print spacing).
   The .outbldg-group arm keeps that spacing after the screen-only wrapper
   stopped the outbuilding tables being direct children of .prc — the header
   and block tables still take their tighter margins from prc_styles, which
   is more specific. */
.prc > table,
.prc > .outbldg-group > table { margin-bottom: 16px; }

/* Outbuildings and misc improvements stay compact to keep image cells square */
table.outbldg-table, table.misc-impr { font-size: 11.25pt; }

/* ── Responsive overrides (screen only — never affects PDF) ─────────── */
@media screen and (max-width: 640px) {
    body  { padding: 0; }
    .toolbar { max-width: 100%; padding: 8px 10px; margin-bottom: 6px; }
    /* Guard against phantom page-level horizontal scroll: wide tables scroll
       inside their OWN overflow-x containers, so nothing should extend the page
       sideways. This clips any sub-pixel/overflow-container spill at the card
       edge without affecting those tables' internal scrolling. */
    .sheet { padding: 10px 8px; box-shadow: none; overflow-x: hidden; }

    /* Clear the Android on-screen navigation bar (and the iOS home indicator),
       which otherwise sits over the last row of the card once you scroll to the
       bottom. The fixed 56px is the real guarantee - env(safe-area-inset-bottom)
       resolves to 0 unless a page opts in with viewport-fit=cover, which these
       pages deliberately do not do (it would let content run under the system
       bars everywhere, a much larger change than this needs). Where a device
       does report an inset, it is added on top. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* Stack the letterhead date/time below the county heading */
    .prc table.letterhead,
    .prc table.letterhead tr,
    .prc table.letterhead td { display: block; width: 100% !important; }
    .prc .county-name  { font-size: 12pt; }
    .prc .title        { font-size: 8.5pt; }
    .prc .letterhead-right { text-align: left; font-size: 7pt; }

    /* Collapse side-by-side two-column layout into stacked single column.
       Child combinators (>) keep this scoped to the twocol wrapper's OWN row
       and cells — a bare `table.twocol td` also matches the <td> value cells of
       the nested label/value box tables, forcing them to full-width blocks so
       the value stacks under its label. Scoping to direct children leaves those
       inner tables as normal 2-column tables (label | value side by side). */
    table.twocol                   { display: block; }
    table.twocol > tbody > tr      { display: block; }
    table.twocol > tbody > tr > td { display: block; width: 100% !important; padding: 0; }

    /* Key/value tables (Assessment Data, Parcel Location, Lot Data, ...)
       fill the width and WRAP long values instead of clipping. Long
       unbroken tokens (parcel IDs, lat/long) may break mid-string so
       they can't force a row wider than the screen. */
    table.box { width: 100%; }
    table.box td, table.box th {
        padding: 2px 4px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Only the wide numeric grids (Valuation = 9 cols, Sale/Assessment
       History, Permits, Exemptions, Ag/Outbuilding worksheets) keep
       horizontal scroll - wrapping 8-9 columns into a phone width is
       unreadable. They are exactly the tables with a column-header row.
       The residential Cost Approach is a wide label/value grid (4 cols) with
       no column-header row, so it opts in explicitly via .scroll-x rather than
       squishing under the wrap rule above. */
    table.box:has(tr.subhead),
    table.box.scroll-x {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.box:has(tr.subhead) td,
    table.box:has(tr.subhead) th,
    table.box.scroll-x td,
    table.box.scroll-x th { white-space: nowrap; }

    /* ── Outbuildings/Site Improvements ────────────────────────────────
       This box is not one table but a GROUP of sibling tables (a header, one
       per outbuilding, an optional total) sharing a colgroup — they only read
       as a grid while their columns line up. Under the rules above only the
       header matched :has(tr.subhead), so it scrolled alone at its natural
       width while the blocks squashed to the screen: columns out of alignment,
       words broken mid-token, and the building image down to ~55px.
       Fix: scroll the whole group as ONE unit at a comfortable width. */
    .outbldg-group {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .outbldg-group table.outbldg-table { width: 680px; }

    /* Header back to a plain table — it lives inside the group's scroller now,
       so its own scroll would double up and drift from the blocks below. */
    .outbldg-group table.box:has(tr.subhead) {
        display: table;
        overflow-x: visible;
    }
    .outbldg-group table.box:has(tr.subhead) td,
    .outbldg-group table.box:has(tr.subhead) th { white-space: normal; }

    /* Real column widths are back, so break at word boundaries again. (The
       page-wide rule uses `anywhere` to stop long parcel IDs forcing a row
       wider than a phone screen; inside a scroller that trade-off is moot.) */
    .outbldg-group table.box td,
    .outbldg-group table.box th {
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Enlarge the building image by giving its column a bigger share of the
       now-scrollable grid. !important is required to beat the inline width on
       the shared <col>, which the print/PDF layout depends on keeping. */
    .outbldg-group col:first-child { width: 26% !important; }
    .outbldg-group table.outbldg-table td.outbldg-img-col img { max-height: 220px; }
}