/*
 * FFD bulletin document chrome — replicates the production Word bulletin look
 * (Times New Roman on white A4 paper, government letterhead, black bordered
 * tables, contact/rights footer). Everything is scoped under .bulletin-doc so
 * the stylesheet can be linked from the Bootstrap public page and the
 * standalone templated-bulletin render without side effects.
 */

.bulletin-doc {
    background: #fff;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
}

/* ── Letterhead ─────────────────────────────────────────────────────── */

.bulletin-letterhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bulletin-letterhead-logo {
    width: 74px;
    height: auto;
    flex: 0 0 auto;
}

.bulletin-letterhead-org {
    flex: 1 1 auto;
    text-align: center;
    line-height: 1.25;
}

.bulletin-letterhead-org .org-line          { font-weight: 700; font-size: 15px; }
.bulletin-letterhead-org .org-line.org-govt { font-size: 15px; }
.bulletin-letterhead-org .org-line + .org-line { margin-top: 1px; }
.bulletin-letterhead-org .org-line:nth-child(2) { font-size: 12px; }
.bulletin-letterhead-org .org-line.org-address  { font-size: 11px; text-decoration: underline; }

.bulletin-letterhead-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2px 16px;
    font-weight: 700;
    font-size: 12px;
    margin-top: 6px;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
}

.bulletin-letterhead-meta .meta-issued { margin-left: auto; text-align: right; }
.bulletin-letterhead-meta .meta-dated,
.bulletin-letterhead-meta .meta-time   { display: block; }

/* ── Document footer ────────────────────────────────────────────────── */

.bulletin-doc-footer {
    margin-top: 18px;
    border-top: 2px solid #000;
    padding-top: 5px;
    text-align: center;
    line-height: 1.35;
}

.bulletin-doc-footer .footer-contact { font-size: 12px; font-weight: 700; }
.bulletin-doc-footer .footer-rights  { font-size: 10px; }

/* ── Body: make pasted Word content read as the document ────────────── */

.bulletin-doc .bulletin-body {
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
    line-height: 1.45;
}

.bulletin-doc .bulletin-body p { text-align: justify; }

/* Every seeded heading is bold in the editor and in the PDF, so it must be bold
   here too. Two different resets were taking it away: Bootstrap's `h1-h6
   { font-weight: 500 }` on the public page (which only ever hit the h4 "plain"
   headings — RIVERS AT A GLANCE, RAINFALL OUTLOOK:, Distribution:), and
   Tailwind's preflight `font-weight: inherit` in the CMS preview, which flattened
   all six. Size is deliberately left alone — the seed sets it inline, per
   heading, to match the print scale. */
.bulletin-doc .bulletin-body h1,
.bulletin-doc .bulletin-body h2,
.bulletin-doc .bulletin-body h3,
.bulletin-doc .bulletin-body h4,
.bulletin-doc .bulletin-body h5,
.bulletin-doc .bulletin-body h6 { font-weight: 700; }

.bulletin-doc .bulletin-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bulletin-doc .bulletin-body table th,
.bulletin-doc .bulletin-body table td {
    border: 1px solid #000;
    padding: 2px 5px;
    vertical-align: top;
}

.bulletin-doc .bulletin-body table th {
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.bulletin-doc .bulletin-body figure.table { overflow-x: auto; }
.bulletin-doc .bulletin-body img { max-width: 100%; height: auto; }

/* ── A cell never prints outside its own borders ──────────────────────────
   The same two guards the PDF carries, for the same reasons — see
   cms/bulletin-builder/pdf.blade.php, which explains both at length. The web
   page renders the SAME stored body, so it inherits the same Word paste
   (`text-indent:-5.4pt` and a negative right margin, which draw a line outside
   its cell and stop it wrapping) and the same unbreakable tokens. Fixing only
   the PDF left the published page still showing "Widespread thunderstorm/" cut
   off mid-word against its neighbour's rule. */
.bulletin-doc .bulletin-body table td > p,
.bulletin-doc .bulletin-body table th > p {
    text-indent: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bulletin-doc .bulletin-body table th,
.bulletin-doc .bulletin-body table td { overflow-wrap: break-word; }

/* ── Wide data tables scroll; they do not shrink ──────────────────────────
   The quantitative flood forecast is nine columns of numbers. On a phone
   `width: 100%` resolved its percentages against ~314px and every column became
   a column of wrapped fragments — "260 - 280" over three lines, station names
   broken mid-word. A number that has to be reassembled by eye is worse than one
   you scroll to. So below the width the table needs, it keeps that width and
   scrolls instead.

   THE FLOOR IS MEASURED. Each column's min-content width was read out of the
   browser at this 14px scale (RIVERS 66px, Stations 70px, Forecast 88px,
   Qualitative 79px, Season 55px …), and the table width each one implies is
   min-content ÷ its share of QUANT_COL_WIDTHS. The largest of those is what the
   table needs: 682px. 740 is that with room to spare.

   The old floor was 700px and it was not the number that was wrong — the SHARES
   were. RIVERS used to be 8%, so it needed 66 ÷ 0.08 = 825px before it stopped
   drawing "INDUS" over the station beside it, and at 700 the header read
   "RIVERSStions". Correcting the widths for print (QUANT_COL_WIDTHS) is what
   made a 700-ish floor viable here; the two are the same fix.

   Scoped to the phone. Above 768px the sheet is wider than the floor anyway, so
   stating it there would only risk a scrollbar on a tablet for no gain. */
.bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"],
.bulletin-doc .bulletin-body [data-ffd-block="weather-rainfall-forecast"] { overflow-x: auto; }

/* A scroller with no edge reads as a clipped page — people do not try to swipe
   something that looks like it has simply been cut off. A soft shadow at
   whichever edge still has content beyond it says "there is more this way"
   without needing a scrollbar the phone will not draw. `background-attachment:
   local` on the two white panels is what makes it conditional: they travel with
   the content and uncover the shadow only where there is more to reach.

   It goes on figure.table, which is the element that actually scrolls — it
   carries overflow-x above and is nested inside the block, so it is the inner
   and therefore the winning scroller of the two. */
.bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] figure.table,
.bulletin-doc .bulletin-body [data-ffd-block="weather-rainfall-forecast"] figure.table {
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left center / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* ── Phone ───────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* `fixed` deliberately, and it is what makes the sticky columns below
       possible. Bulletin::webBody() strips the stored `table-layout:fixed` so
       dompdf and the desktop page can size columns from content; here we want the
       opposite, because a column whose width is decided by its content is a
       column whose left offset cannot be written down. Under fixed layout at a
       known table width, every column is exactly its declared share — so the
       offset the sticky rule needs is arithmetic rather than a guess. */
    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] table {
        min-width: 740px;
        table-layout: fixed;
    }

    /* Four columns, one of which holds the whole reservoir widget; below its
       natural width the catchment phrases collide with the rules. Left on auto —
       nothing sticks here, so nothing needs a predictable offset. */
    .bulletin-doc .bulletin-body [data-ffd-block="weather-rainfall-forecast"] table { min-width: 620px; }

    /* Scrolling right to reach the forecast columns took the station name off
       screen with it, which leaves 22 rows of numbers belonging to nobody. The
       two identifying columns stay put so a row can always be read.

       Their widths are stated in px rather than left to the percentages: under
       fixed layout a px width on a first-row cell is honoured exactly, so the
       offset below is guaranteed to line up even for a bulletin whose colgroup a
       forecaster has resized. 72 + 80 = 152px, leaving 588 for the other seven —
       comfortably above every one of their min-contents.

       They also need an opaque background — a sticky cell is painted over by
       whatever scrolls beneath it otherwise — and the right-hand rule has to be
       drawn with a shadow: under `border-collapse: collapse` a border belongs to
       the table's border grid rather than to the cell, so it does not travel with
       a sticky cell and the column would slide about with no edge. The shadow
       must be INSET; an outer box-shadow is not painted on a collapsed-border
       cell at all (measured — a deliberately red one drew nothing).

       That same rule leaves a sub-pixel seam down the far left, where a hairline
       of the coloured flood-level cell scrolling past shows through the border
       grid. It is half a device pixel at 2× and there is no honest way to cover
       it without taking the table off collapsed borders, which would cost more
       than it buys. */
    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] thead tr:first-child > :nth-child(-n+2),
    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] tbody tr > :nth-child(-n+2) {
        position: sticky;
        background: #fff;
        z-index: 1;
    }

    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] thead tr:first-child > :nth-child(1),
    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] tbody tr > :nth-child(1) {
        width: 72px;
        left: 0;
    }

    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] thead tr:first-child > :nth-child(2),
    .bulletin-doc .bulletin-body [data-ffd-block="quantitative-forecast"] tbody tr > :nth-child(2) {
        width: 80px;
        left: 72px;
        box-shadow: inset -1px 0 0 #000;
    }

    /* Justified prose needs enough words per line to distribute the slack. At
       ~40 characters it cannot, and "Isolated=20  to  30%  of  area" opens rivers
       of whitespace instead. The bulletin sets justify inline, on the paragraph,
       so this has to shout to be heard. */
    .bulletin-doc .bulletin-body p,
    .bulletin-doc .bulletin-body li { text-align: left !important; }

    /* Except inside a table, where a centred heading cell is deliberate. */
    .bulletin-doc .bulletin-body table p { text-align: inherit !important; }
}

/* ── Numbered section hierarchy ──────────────────────────────────────────
   The block structure composed in the bulletin-template editor, for bulletins
   published out of it. The label sits in a hanging gutter with the body
   indented to align under the heading text (not under the number); `sub`
   blocks indent under their `main`; `plain` blocks (footers, the severity
   legend) carry no number. Lives here, in the sheet both targets link, so the
   published bulletin reads the way the editor's preview did — the prototype's
   own render/PDF views restate it inline because their markup has to travel
   without a stylesheet (Copy HTML, dompdf). */

.bulletin-doc .bt-section { margin: 12px 0; }
.bulletin-doc .bt-section.level-sub { margin-left: 2rem; }
.bulletin-doc .bt-head { display: flex; align-items: baseline; gap: .45rem; }
.bulletin-doc .bt-label { flex: 0 0 auto; min-width: 1.55rem; text-align: right; font-weight: 700; }
.bulletin-doc .bt-head h2 { margin: 0; font-weight: 700; text-decoration: underline; }
.bulletin-doc .level-main .bt-label,
.bulletin-doc .level-main .bt-head h2 { font-size: 17px; }
.bulletin-doc .level-sub .bt-label,
.bulletin-doc .level-sub .bt-head h2 { font-size: 15px; }
.bulletin-doc .level-plain .bt-head h2 { font-size: 15px; }
.bulletin-doc .bt-body { margin-top: .3rem; padding-left: 2rem; }
.bulletin-doc .level-sub .bt-body { padding-left: 1.75rem; }
.bulletin-doc .level-plain .bt-body { padding-left: 0; }

/* ── Print: A4 sheet with the Word bulletin margins ─────────────────── */

@media print {
    @page {
        size: A4;
        margin: 0.5cm 1.5cm 0.5cm 1.25cm;

        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-family: 'Times New Roman', Times, serif;
            font-size: 9pt;
        }
    }

    .bulletin-doc {
        box-shadow: none;
        margin: 0;
        max-width: none;
    }

    .bulletin-doc .bulletin-body table thead { display: table-header-group; }
    .bulletin-doc .bulletin-body table tr    { page-break-inside: avoid; }
}