/* ---- Find reservation look A, office and staff panels (2026-10-08, user's notes). Loaded after the panel styles
   (agency style A, staff style D), so it wins over their Find rules: every heading is a coloured band (deep blue, white text),
   tabs and headings a bit bigger, column names on a light blue strip, everything under them smaller;
   soft coloured buttons that fill with their colour on hover. Status tags keep their colours. ---- */
:is(.fi-panel-agency, .fi-panel-admin) :is(.fv, .fi-page:has(.fz-report-tabs)) { --mx-ink: #0B1A30; --mx-text: #1F2A3D; --mx-lab: #6B7A90; --mx-line: #E6ECF3;
    --mx-band: linear-gradient(90deg, #0C2A52 0%, #17457D 100%); --mx-band-tx: #FFFFFF; --mx-band-ic: #9FD0FF; --mx-band-meta: rgba(255,255,255,.72);
    --mx-cols: #EDF3FA; --mx-cols-tx: #35506F; --mx-on: linear-gradient(90deg, #0C2A52 0%, #17457D 100%); --mx-on-tx: #FFFFFF; }
/* office Find: less empty room above the search box (the page itself is centred, see Agency\Pages\FindReservation) */
.fi-panel-agency .fi-page:has(.fv) .fi-page-header-main-ctn { padding-top: 18px; row-gap: 16px; }
/* tabs: one white bar; the open tab filled with the band colour */
:is(.fi-panel-agency, .fi-panel-admin) .fv-tabs { display: inline-flex; width: fit-content; justify-self: start; gap: 4px; padding: 5px; background: #fff; border: 0; border-radius: 14px; max-width: 100%; overflow-x: auto;
    box-shadow: 0 1px 2px rgba(11,26,48,.06), 0 4px 14px rgba(11,26,48,.06); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tab { padding: 9px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: #3E4C63; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tab svg.fv-i { width: 16px; height: 16px; color: #7D8BA1; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tab:hover { color: var(--mx-ink); background: #F1F5FA; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tab.on { background: var(--mx-on); color: var(--mx-on-tx); font-weight: 600; box-shadow: 0 2px 8px rgba(12,42,82,.25); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tab.on svg.fv-i { color: var(--mx-band-ic); }
/* cards and headings */
:is(.fi-panel-agency, .fi-panel-admin) .fv-card { border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(11,26,48,.05), 0 6px 20px rgba(11,26,48,.06); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-head { --c: var(--mx-band-tx) !important; height: 54px; padding: 0 20px; background: var(--mx-band); border-bottom: 0; color: var(--mx-band-tx); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-hi { background: rgba(255,255,255,.12); color: var(--mx-band-ic); width: 32px; height: 32px; border-radius: 9px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-hi svg.fv-i { width: 17px; height: 17px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-ht { font-size: 17px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; color: var(--mx-band-tx); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-meta { color: var(--mx-band-meta); font-size: 12.5px; font-weight: 500; }
/* under the headings: column names on a light strip, smaller text, thin lines */
:is(.fi-panel-agency, .fi-panel-admin) .fv-tbl th { background: var(--mx-cols) !important; color: var(--mx-cols-tx) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 14px; border-bottom: 0; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tbl td { font-size: 13px; padding: 9px 14px; border-top-color: var(--mx-line); color: var(--mx-text); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-tbl td b, :is(.fi-panel-agency, .fi-panel-admin) .fv .etk { font-size: 13px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-price td, :is(.fi-panel-agency, .fi-panel-admin) .fv-price th { padding-left: 20px; padding-right: 20px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-price .comm td { font-weight: 500; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-price tr.tot td { background: var(--mx-cols); border-top: 0; font-size: 14px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-price tr.tot .big { font-size: 20px; color: var(--mx-ink); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-kv > div { padding: 8px 0; border-bottom-color: var(--mx-line); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-kv dt { font-size: 12.5px; color: var(--mx-lab); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-kv dd { font-size: 13px; color: var(--mx-text); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-sg-h { background: var(--mx-cols); color: var(--mx-cols-tx); font-weight: 600; border-bottom: 0; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-sg + .fv-sg { border-top-color: var(--mx-line); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-sg .fl { color: var(--mx-ink); }
/* action buttons: soft coloured pills, each in its own colour; they fill with that colour on hover */
:is(.fi-panel-agency, .fi-panel-admin) .fv-acts.fv-groups { padding: 12px 16px; gap: 12px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-look1 .fv-grp { background: transparent; border: 0; padding: 0; gap: 6px; }
:is(.fi-panel-agency, .fi-panel-admin) .fv-look1 .fv-grp + .fv-grp { padding-left: 14px; border-left: 1px solid var(--mx-line); }
:is(.fi-panel-agency, .fi-panel-admin) .fv-gl { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mx-lab); font-weight: 500 !important; }
:is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn { height: 34px; min-height: 34px; padding: 0 14px !important; font-size: 12.5px !important; font-weight: 600 !important; border-radius: 10px !important; gap: 7px !important;
    background: color-mix(in srgb, var(--c) 10%, white) !important; color: var(--c) !important; border: 1px solid color-mix(in srgb, var(--c) 16%, white) !important; box-shadow: none !important;
    transition: background-color .15s, color .15s, box-shadow .15s; }
:is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn > span, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn .fi-btn-label, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn .fi-icon, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn svg { color: var(--c) !important; opacity: 1; }
:is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn .fi-icon, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn svg { width: 15px !important; height: 15px !important; }
:is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn:hover { background: var(--c) !important; border-color: var(--c) !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 30%, transparent) !important; filter: none; }
:is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn:hover > span, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn:hover .fi-btn-label, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn:hover .fi-icon, :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn:hover svg { color: #fff !important; }
@media (max-width: 640px) {
    :is(.fi-panel-agency, .fi-panel-admin) .fv-tabs { display: grid; width: auto; justify-self: stretch; border-radius: 12px; }
    :is(.fi-panel-agency, .fi-panel-admin) .fv-tab { border-radius: 9px; padding: 8px 2px; font-size: 11.5px; }
    :is(.fi-panel-agency, .fi-panel-admin) .fv-head { height: 48px; padding: 0 14px; }
    :is(.fi-panel-agency, .fi-panel-admin) .fv-ht { font-size: 15.5px !important; }
    :is(.fi-panel-agency, .fi-panel-admin) .fv-look1 .fv-grp + .fv-grp { padding-left: 0; border-left: 0; }
    /* two buttons a row: a long label (Change Date / Segment) wraps instead of running out of its button */
    :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn { height: auto; padding: 7px 10px !important; font-size: 12px !important; line-height: 1.25; white-space: normal; text-align: left; }
    :is(.fi-panel-agency, .fi-panel-admin) .fv .fv-a .fi-btn > span { white-space: normal; }
}

/* ---- Reports, office panel (2026-10-08, user's note "like the Find page"): the same look A.
   Report tabs as one white bar with the open tab filled blue; every section heading a deep blue band with white text;
   column names on a light blue strip; content smaller; soft round period buttons, Show filled blue. ---- */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs { display: inline-flex; width: fit-content; max-width: 100%; gap: 4px; padding: 5px !important; margin: 0; background: #fff !important; border: 0 !important; border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(11,26,48,.06), 0 4px 14px rgba(11,26,48,.06) !important; overflow-x: auto; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs-item { padding: 8px 16px !important; border-radius: 10px !important; box-shadow: none !important; background: transparent; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs-item-label { font-size: 13.5px !important; font-weight: 500 !important; color: #3E4C63 !important; letter-spacing: 0 !important; text-transform: none !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs-item:hover { background: #F1F5FA; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs-item.fi-active { background: var(--mx-on) !important; box-shadow: 0 2px 8px rgba(12,42,82,.25) !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-report-tabs .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--mx-on-tx) !important; font-weight: 600 !important; }
/* period buttons: Show filled blue, the quick periods and Excel / PDF soft round chips that fill blue on hover */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-row .fi-btn { height: 32px; min-height: 32px; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; padding: 0 14px !important; box-shadow: none !important; transition: background-color .15s, color .15s; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-row .fi-btn:not(.fi-color-primary) { background: #EAF1FA !important; color: #17457D !important; border: 1px solid #D6E3F3 !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-row .fi-btn:not(.fi-color-primary) :is(span, svg, .fi-icon) { color: #17457D !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-row .fi-btn:not(.fi-color-primary):hover { background: #17457D !important; border-color: #17457D !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-row .fi-btn:not(.fi-color-primary):hover :is(span, svg, .fi-icon) { color: #fff !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) :is(.fz-row, .fi-section) .fi-btn.fi-color-primary { background: var(--mx-band) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(12,42,82,.22) !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) :is(.fz-row, .fi-section) .fi-btn.fi-color-primary :is(span, svg, .fi-icon) { color: #fff !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-input-wrp { border-radius: 10px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-input { font-size: 13px !important; }
/* sections: white card, soft shadow; a heading is a deep blue band */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section { border: 0 !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(11,26,48,.05), 0 6px 20px rgba(11,26,48,.06) !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section > .fi-section-header { background: var(--mx-band) !important; padding: 13px 20px !important; border: 0 !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section-header-heading { color: var(--mx-band-tx) !important; font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section-header-description { color: var(--mx-band-meta) !important; font-size: 12px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section-header :is(.fi-icon-btn, .fi-icon-btn svg, .fi-icon) { color: #fff !important; }
/* tables: column names on a light blue strip, no capitals, smaller rows */
.fi-panel-agency .fi-page:has(.fz-report-tabs) :is(.fz-table, .tx-table) thead th { background: var(--mx-cols) !important; color: var(--mx-cols-tx) !important; font-size: 11.5px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; border-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) :is(.fz-table, .tx-table) td { font-size: 12.5px; border-color: var(--mx-line) !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-table tfoot td { background: var(--mx-cols) !important; border-top: 0 !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fz-table tbody tr:hover { background: #F5F9FD; }
/* the statement's own title line (its section has no heading) becomes the same blue band */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-section-content:has(> .st-head) { padding: 0 20px 20px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-head { margin: 0 -20px 14px; padding: 14px 20px; background: var(--mx-band); color: rgba(255,255,255,.9); }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-head .t { color: #fff; font-size: 15.5px; font-weight: 600; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-head b { color: #fff; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-head .s { color: var(--mx-band-meta); font-size: 12px; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-strip { border-color: var(--mx-line); }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-strip span { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--mx-cols-tx); }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .st-strip .close { background: var(--mx-cols); }
/* tabs inside a report (All events / Issued / Cancelled...): soft round pills, the open one light blue */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-tabs-item:not(.fz-report-tabs *) { border-radius: 999px !important; box-shadow: none !important; padding: 6px 13px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-tabs-item:not(.fz-report-tabs *) .fi-tabs-item-label { font-size: 12.5px !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-tabs-item.fi-active:not(.fz-report-tabs *) { background: #EAF1FA !important; box-shadow: inset 0 0 0 1px #D6E3F3 !important; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-tabs-item.fi-active:not(.fz-report-tabs *) .fi-tabs-item-label { color: #17457D !important; font-weight: 600 !important; }
/* Transactions has its own filter bar: Apply filled blue, Reset and Download as soft round chips; the office line a blue band */
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,26,48,.05), 0 6px 20px rgba(11,26,48,.06); }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-bar input, .fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-bar select { border-radius: 10px; font-size: 13px; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-btn { height: 32px; border-radius: 999px; font-size: 12px; font-weight: 500; padding: 0 14px; transition: background-color .15s, color .15s; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-go { background: var(--mx-band); border: 0; color: #fff; font-weight: 600; border-radius: 10px; box-shadow: 0 2px 8px rgba(12,42,82,.22); }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-reset { background: #FDEEEE; border-color: #F6D5D5; color: #B42318; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-reset:hover { background: #B42318; border-color: #B42318; color: #fff; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-dl { background: #EAF1FA; border-color: #D6E3F3; color: #17457D; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-dl:hover { background: #17457D; border-color: #17457D; color: #fff; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-sub { background: var(--mx-band); border-top: 0; color: var(--mx-band-meta); padding: 12px 16px; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .tx-sub b { color: #fff; }
.fi-panel-agency .fi-page:has(.fz-report-tabs) .fi-page-header-main-ctn { padding-top: 18px; row-gap: 16px; }