/* AYAN AIR office panel, look v4 (AYAN_AGENCY_V4): Reports → Statement (html.ay4-page-statement; filament/shared/statements).
   The same page as today (report tabs, From / To, Show and the quick periods, Excel, PDF, the account statement with its four
   balances and kinds, the invoice of the period with Invoice PDF, the movements with their details, payments received); only
   the look: the period and buttons in one row, the statement and the invoice side by side, the four balances as in the
   picture (closing balance in the serif), tinted type pills, one-line rows; the movements scroll inside their box.
   Picture: ayan-compact/statement.html + statement.css. Linked after ayan-agency-v4.css when the switch is on. */

/* the period and the buttons in one row */
html.ay4.ay4-page-statement .fz-noprint > form { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; }
html.ay4.ay4-page-statement .fz-noprint > form > .fi-sc { flex: 0 1 380px; }
html.ay4.ay4-page-statement .fz-noprint > form > .fz-row { flex: 1 1 520px; margin-top: 0 !important; }
html.ay4.ay4-page-statement .fz-noprint > form .fi-fo-field { gap: 2px; }
html.ay4.ay4-page-statement .fz-noprint > form .fi-fo-field-label-content { font-size: 11px; color: var(--v4-fog); font-weight: 400; }
html.ay4.ay4-page-statement .fz-noprint > form .fi-input-wrp { height: 32px; }

/* simpler for offices (2026-10-09): the four balances and the invoice of the period in ONE slim line
   (filament/agency/v4/statement-top); the rest of the two cards folds under "Details of this period"; then the movements */
html.ay4.ay4-page-statement .ay4-st { background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: var(--v4-r); }
html.ay4.ay4-page-statement .ay4-st-line { display: flex; flex-wrap: wrap; align-items: center; }
html.ay4.ay4-page-statement .ay4-st-line > div { flex: 1 1 150px; padding: 8px 16px; border-inline-start: 1px solid var(--v4-line2); min-width: 0; }
html.ay4.ay4-page-statement .ay4-st-line > div:first-child { border-inline-start: 0; }
html.ay4.ay4-page-statement .ay4-st-line span { display: block; font-size: 10.5px; font-weight: 500; color: var(--v4-fog); letter-spacing: .02em; }
html.ay4.ay4-page-statement .ay4-st-line b { font-size: 15px; font-weight: 600; color: var(--v4-plum); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ay4.ay4-page-statement .ay4-st-line .close b { font: 400 22px/1.05 var(--v4-serif); }
html.ay4.ay4-page-statement .ay4-st-line .inv { flex-grow: 1.3; }
html.ay4.ay4-page-statement .ay4-st-line .inv .fz-pill { display: inline-block; margin-inline-start: 6px; font-size: 10.5px; padding: 1px 8px; vertical-align: 2px; }
html.ay4.ay4-page-statement .ay4-st-line .acts { flex: 0 0 auto; display: flex; gap: 6px; border-inline-start: 0; }
html.ay4.ay4-page-statement .ay4-st-more { border-top: 1px solid var(--v4-line2); }
html.ay4.ay4-page-statement .ay4-st-more > summary { cursor: pointer; list-style: none; padding: 6px 16px; font-size: 12px; font-weight: 500; color: var(--v4-violet); }
html.ay4.ay4-page-statement .ay4-st-more > summary::-webkit-details-marker { display: none; }
html.ay4.ay4-page-statement .ay4-st-more > summary::after { content: " ▾"; }
html.ay4.ay4-page-statement .ay4-st-more[open] > summary::after { content: " ▴"; }
html.ay4.ay4-page-statement .ay4-st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; padding: 2px 16px 12px; }
html.ay4.ay4-page-statement .ay4-st-cols .st-head { display: block; }
html.ay4.ay4-page-statement .ay4-st-cols .st-head > span { display: block; }
/* the movements say what they are in the heading; the long how-to line under it is left out of this look */
html.ay4.ay4-page-statement .fi-section-header-description { display: none; }
html.ay4.ay4-page-statement .fi-section-content { padding: 10px 14px !important; }
html.ay4.ay4-page-statement .fi-section-header { padding: 8px 14px !important; }
html.ay4.ay4-page-statement .fi-section-header-heading { font: 400 19px/1.1 var(--v4-serif); color: var(--v4-plum); }
html.ay4.ay4-page-statement .fi-section-header-description { font-size: 12px; }

html.ay4.ay4-page-statement .st-head .t { font: 400 19px/1.1 var(--v4-serif); color: var(--v4-plum); }
html.ay4.ay4-page-statement .st-head .s { font-size: 11px; color: var(--v4-fog); }
html.ay4.ay4-page-statement .st-strip { margin-top: 6px; border-color: var(--v4-line2); border-radius: 12px; }
html.ay4.ay4-page-statement .st-strip > div { flex-basis: 110px; padding: 5px 10px; border-color: var(--v4-line2); }
html.ay4.ay4-page-statement .st-strip span { font-size: 10px; font-weight: 500; color: var(--v4-fog); }
html.ay4.ay4-page-statement .st-strip b { font-size: 14px; font-weight: 600; color: var(--v4-plum); }
html.ay4.ay4-page-statement .st-strip em { display: block; margin: 0; font-size: 10.5px; color: var(--v4-fog); }
html.ay4.ay4-page-statement .st-strip .close { background: var(--v4-fill); }
html.ay4.ay4-page-statement .st-strip .close b { font: 400 22px/1.05 var(--v4-serif); }
html.ay4.ay4-page-statement .st-kinds { gap: 2px 14px; margin-top: 6px; font-size: 11.5px; }
html.ay4.ay4-page-statement .st-kinds span { color: var(--v4-fog); }

html.ay4.ay4-page-statement .st-inv { gap: 8px 16px; }
html.ay4.ay4-page-statement .st-inv .fz-big { font-size: 14px; font-weight: 600; color: var(--v4-plum); }
html.ay4.ay4-page-statement .st-inv-sums { gap: 4px 16px; }
html.ay4.ay4-page-statement .st-inv-sums span { font-size: 10px; font-weight: 500; color: var(--v4-fog); }
html.ay4.ay4-page-statement .st-inv-sums b { font-size: 14px; color: var(--v4-plum); }
html.ay4.ay4-page-statement .st-inv-sums .total b { font: 400 22px/1.05 var(--v4-serif); }
html.ay4.ay4-page-statement .st-info { margin-top: 4px; font-size: 11.5px; color: var(--v4-fog); }

/* movements: tinted type pills, one-line rows, the list scrolls inside its box */
html.ay4.ay4-page-statement .st-rows { max-height: max(220px, calc(100vh - 360px)); }
html.ay4.ay4-page-statement .st-rows .fz-table td, html.ay4.ay4-page-statement .st-rows .fz-table th { padding: 4px 10px; }
html.ay4.ay4-page-statement .st-rows .fz-table td { font-size: 12.5px; }
html.ay4.ay4-page-statement .st-rows .fz-table tbody tr:nth-child(even) { background: transparent; }
html.ay4.ay4-page-statement .st-rows .fz-table tbody tr:hover { background: var(--v4-fill); }
html.ay4.ay4-page-statement .st-date { color: var(--v4-muted); }
html.ay4.ay4-page-statement a.st-doc { color: var(--v4-violet); }
html.ay4.ay4-page-statement .st-doc { font-weight: 600; letter-spacing: .02em; }
html.ay4.ay4-page-statement .st-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 1px 8px; background: var(--v4-rf-bg); color: var(--v4-rf); }
html.ay4.ay4-page-statement .st-k::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
html.ay4.ay4-page-statement .st-k-ticket { background: var(--v4-chg-bg); color: var(--v4-chg); }
html.ay4.ay4-page-statement .st-k-refund { background: var(--v4-rf-bg); color: var(--v4-rf); }
html.ay4.ay4-page-statement .st-k-topup { background: var(--v4-ok-bg); color: var(--v4-ok); }
html.ay4.ay4-page-statement .st-k-change { background: var(--v4-hold-bg); color: var(--v4-hold); }
html.ay4.ay4-page-statement .st-k-refused { background: var(--v4-cnx-bg); color: var(--v4-cnx); }
html.ay4.ay4-page-statement .st-open td { font-weight: 400; }
html.ay4.ay4-page-statement .st-open td:nth-child(3) { font: 400 16px/1.1 var(--v4-serif); color: var(--v4-plum); }
html.ay4.ay4-page-statement .fz-table tfoot td { font-weight: 600; color: var(--v4-plum); background: var(--v4-fill); padding: 5px 10px; }

@media (max-width: 1023px) {
    html.ay4.ay4-page-statement .ay4-st-cols { grid-template-columns: minmax(0, 1fr); }
    html.ay4.ay4-page-statement .ay4-st-line > div { flex-basis: 45%; border-inline-start: 0; }
    html.ay4.ay4-page-statement .ay4-st-line .acts { flex-basis: 100%; }
}