:root {
    --c-main: #0078c8; --c-dark: #00518C; --c-light: #80bce4;
    /* Neutrals */
    --c-text: #111827; --c-text-soft: #6b7280;
    --c-header: #d1d5db; --c-section: #e5e7eb;
    --c-row-alt: #f3f4f6; --c-border: #e5e7eb; --c-rowline: #d8dbe0;
    /* Status pastels */
    --c-paid: #d1fae5; --c-overdue: #fee2e2; --c-warn: #fef3c7;
    /* Links */
    --c-link: #2563eb;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; padding-bottom: 60px; color: var(--c-text); }
body, input, select, textarea, button { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif; }
.material-symbols-outlined { font-size: inherit; vertical-align: middle; }
x-h, x-c, x-t, x-ctrls { display: block; }
h2 { margin: 25px 0 15px; }

#top-bar { background: var(--c-main); color: white; height: 40px; display: flex; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
    #top-bar > .left { display: flex; align-items: center; margin-left: 10px; position: relative; }
        #top-bar > .left > .brand { display: flex; align-items: center; height: 30px; background: white; border-radius: 5px; padding: 3px 8px; margin-right: 16px; }
            #top-bar > .left > .brand > img { height: 100%; display: block; }
        #top-bar > .left > .school { font-weight: bold; font-size: 16px; background: var(--c-dark); border-radius: 5px; padding: 5px 16px; cursor: pointer; margin-right: 16px; }
        #top-bar > .left > .other-schools { left: 0; }
        #top-bar > .left .link { text-decoration: none; height: 100%; display: flex; align-items: center; font-weight: bold; padding: 0 12px; color: white; border-top: solid 2px transparent; border-bottom: solid 2px transparent; cursor: pointer; position: relative; }
            #top-bar > .left .link.active { cursor: default; border-bottom-color: var(--c-light); }
            #top-bar > .left .link:not(.active):hover { background: var(--c-dark); color: white; }
            #top-bar > .left .link > x-num { top: 5px; right: 0; }
        #top-bar > .left > .link-w { height: 100%; }
        #top-bar > .left x-num { position: absolute; background: #abab00; min-width: 14px; height: 14px; padding: 0 3px; display: flex; justify-content: center; align-items: center; border-radius: 99px; font-size: 10px; color: white; }

    #top-bar > .right { display: flex; align-items: center; margin-right: 10px; position: relative; }
        #top-bar > .right > .initials { background: var(--c-dark); border-radius: 100%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; font-size: 14px; }
        #top-bar > .right > .user-menu { right: 0; }

    #top-bar .menu { display: none; position: absolute; background: white; top: 45px; border: solid 1px #aaa; box-shadow: 0 0 4px #aaa; z-index: 10; width: max-content; }
        #top-bar .menu > .i { padding: 8px 15px; background: white; text-decoration: none; color: black; display: block; position: relative; }
            #top-bar .menu > .i:not(.no-select):hover { background: #eee; cursor: pointer; }
            #top-bar .menu > .i:not(:first-child) { border-top: solid 1px #ccc; }
            #top-bar .menu > .i.active { font-weight: bold; }
        #top-bar .menu.show { display: block; }

.c-width { width: 900px; max-width: 95%; margin: 0 auto; }
.c-wide { width: 1200px; max-width: 97%; margin: 0 auto; }
/* Wider still — for the reconcile table, whose action cell holds a row of buttons plus the donor search. */
.c-xwide { width: 1560px; max-width: 97%; margin: 0 auto; }
.m-t-40 { margin-top: 40px; }
.err-msg { color: red; font-size: 14px; margin-bottom: 20px; }
.hint { color: var(--c-text-soft); font-size: 13px; }
label > input[type="checkbox"] { vertical-align: -2px; }

.btn-primary, .btn-default, .btn-dark, .btn-danger { border: none; border-radius: 6px; color: white; font-weight: 600; font-size: 16px; padding: 6px 15px; cursor: pointer; text-decoration: none; display: inline-block; }
    .btn-primary:hover, .btn-default:hover, .btn-dark:hover, .btn-danger:hover { opacity: .8; }
    .btn-primary[disabled], .btn-default[disabled], .btn-dark[disabled] { cursor: not-allowed; opacity: .5; }
.btn-primary { background: var(--c-main); }
.btn-default { background: #777; }
.btn-dark { background: var(--c-dark); }
.btn-danger { background: #c0392b; }
.btn-sm { font-size: 14px; padding: 5px 12px; }
.btn-icon { font-size: 20px; padding: 3px 10px 1px; }
.btn-primary:active, .btn-default:active, .btn-dark:active { box-shadow: 0 0 4px inset; }

.std-form { max-width: 520px; }
.std-form .field { margin-bottom: 18px }
    .std-form .field > label { font-size: 12px; display: block; color: #777; margin-bottom: 2px; }
    .std-form .field > input, .std-form .field > select, .std-form .field > textarea { font-size: 16px; border: solid 1px #aaa; padding: 6px 10px; width: 100%; border-radius: 4px; }
    .std-form .row2 { display: flex; gap: 14px; }
    .std-form .row2 > .field { flex: 1; }

.grid { display: grid; align-items: stretch; }
    .grid > .row { display: contents; }
        .grid > .row > div { padding: 9px 14px; border-bottom: 1px solid var(--c-rowline); }
        .grid > .row > .num { text-align: right; }
        .grid > .row.h, .grid > .row > .h { font-weight: 600 }
    .grid > .row.h > div { background: var(--c-header); color: #374151; font-weight: 600; }
    .grid > .row:nth-of-type(even):not(.h) > div { background: var(--c-row-alt); }
    .grid a:not(.btn-icon) { color: var(--c-link); text-decoration: none; }
        .grid a:not(.btn-icon):hover { text-decoration: underline; }
    .grid > .row > .green, .grid > .row > div.green { background: var(--c-paid) !important; }
    .grid > .row > .pink, .grid > .row > div.pink { background: var(--c-overdue) !important; }
    .grid > .row > .orange, .grid > .row > div.orange { background: var(--c-warn) !important; }
    /* Colouring a whole row. The row itself is display:contents and paints nothing, so the colour has
       to reach its cells — the rules above only match a cell that carries the class directly. */
    .grid > .row.green > div { background: var(--c-paid) !important; }
    .grid > .row.pink > div { background: var(--c-overdue) !important; }
    .grid > .row.orange > div { background: var(--c-warn) !important; }

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--c-section); color: #374151; }
    .badge.green { background: var(--c-paid); color: #065f46; }
    .badge.pink { background: var(--c-overdue); color: #991b1b; }
    .badge.orange { background: var(--c-warn); color: #92400e; }
    .badge.blue { background: #dbeafe; color: #1e40af; }

.dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 200; }
    .dialog > .c { background: white; padding: 20px 30px; border-radius: 6px; max-width: 95%; max-height: 90vh; overflow: auto; }
    .dialog h3 { margin-top: 0; }
    .dialog .ctrls { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

/* Front screen module tiles */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.module-tile { display: block; text-decoration: none; color: var(--c-text); background: white; border: solid 1px var(--c-border); border-radius: 10px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .15s, transform .15s; }
    .module-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
    .module-tile > .icon { font-size: 34px; color: var(--c-main); }
    .module-tile > .title { font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
    .module-tile > .desc { color: var(--c-text-soft); font-size: 13px; line-height: 1.4; }
    .module-tile > .title > x-num { display: inline-flex; background: #abab00; color: white; border-radius: 99px; font-size: 11px; padding: 1px 7px; vertical-align: middle; margin-left: 6px; }

/* Charity picker (home, no charity selected) */
.charity-list { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.charity-card { display: flex; justify-content: space-between; align-items: center; border: solid 1px var(--c-border); border-radius: 8px; padding: 14px 18px; text-decoration: none; color: var(--c-text); }
    .charity-card:hover { background: var(--c-row-alt); }
    .charity-card .name { font-weight: 600; font-size: 16px; }

/* Claim wizard stepper */
.steps { display: flex; gap: 8px; margin: 18px 0 24px; flex-wrap: wrap; }
.steps > .step { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--c-section); color: var(--c-text-soft); font-weight: 600; font-size: 13px; }
    .steps > .step.done { background: var(--c-paid); color: #065f46; }
    /* after .done, so a step carrying both still reads as the one you're on */
    .steps > .step.active { background: var(--c-main); color: white; }
    .steps > .step.clickable { cursor: pointer; user-select: none; }
        .steps > .step.clickable:hover { filter: brightness(.95); }
    .steps > .step > .n { width: 20px; height: 20px; border-radius: 99px; background: rgba(0,0,0,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* A wizard panel swapped in/out by the stepper (bank data vs. reconcile). */
.panel-hidden { display: none; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
input.search { font-size: 15px; padding: 7px 12px; border: solid 1px #aaa; border-radius: 6px; width: 280px; }

/* Reconciliation table */
.grid.recon > .row > div { padding: 7px 10px; }
.recon .action-cell { display: flex; align-items: center; gap: 3px 6px; flex-wrap: wrap; position: relative; }
.recon .action-cell .btn-sm { padding: 3px 9px; font-size: 12px; }
/* Zero-height full-width item: forces everything after it onto the next line of the wrapping cell. */
.recon .action-cell .flex-break { flex-basis: 100%; height: 0; }
.recon .donor-search { width: 200px; padding: 4px 8px; font-size: 14px; }
.recon .suggestions { position: absolute; top: 0; left: 0; background: white; border: solid 1px #aaa; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 30; min-width: 220px; max-height: 260px; overflow: auto; }
    .recon .suggestions:empty { display: none; }
    .recon .sug-item { padding: 6px 10px; cursor: pointer; }
    .recon .sug-item:hover { background: var(--c-row-alt); }
.recon .matched-name { font-weight: 600; }

/* Reference cell: the reference with its notes button, and the note itself on a second line —
   one line only, ellipsised, with the whole thing (line breaks included) as the hover tooltip. */
.recon .ref-line { display: flex; align-items: baseline; gap: 6px; }
    /* The text takes the free space, so the notes button sits against the right of the cell. */
    .recon .ref-line > .ref-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.recon .note-btn { flex: none; border: 0; background: none; padding: 0; margin: 0; border-radius: 4px; cursor: pointer; color: var(--c-text-soft); font-size: 15px; line-height: 1; opacity: .45; }
    .recon .row:hover .note-btn, .recon .note-btn:focus { opacity: 1; }
    .recon .note-btn.on { color: var(--c-main); opacity: 1; }
.recon .note-line { margin-top: 2px; color: var(--c-text-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
    .recon .note-line:empty { display: none; }
.grid.recon > .row.stage-h > div { background: var(--c-row-alt); color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; }
/* Column headers follow you down a long reconcile list. .row is display:contents, so the cells
   themselves stick — below the 40px #top-bar, and under the donor-suggestion dropdown (z-index 30). */
.recon-wizard .grid.recon-main > .row.h:not(.stage-h) > div { position: sticky; top: 40px; z-index: 5; }
/* Sortable column headers (first four columns) */
.grid.recon > .row.h > div.sortable { cursor: pointer; user-select: none; }
/* Underline the column name only. On the cell it would propagate to every flex item — decoration
   passes down to in-flow descendants, so the filter icon and the sort arrow would be underlined too. */
.grid.recon > .row.h > div.sortable:hover > span:first-child { text-decoration: underline; }
/* The arrow is its own flex item, ordered between the label and the filter icon (which is pushed last
   by .fh-btn { order: 1 }). Keeping it out of the label span is what leaves it un-underlined. */
.grid.recon > .row.h > div.sort-asc::after { content: "\25B2"; font-size: 9px; }
.grid.recon > .row.h > div.sort-desc::after { content: "\25BC"; font-size: 9px; }

/* Per-column filters. The popup is absolutely positioned inside its header cell — which is already
   position:sticky, so it is the containing block; never give .fh position:relative or the header
   stops sticking. The open cell is lifted above its neighbours (all sticky at z-index 5). */
.grid.recon > .row.h > div.fh { display: flex; align-items: center; gap: 6px; }
.grid.recon > .row.h > div.fh.num { justify-content: flex-end; }
.grid.recon > .row.h > div.fh.fh-open { z-index: 40; }
.fh-btn { order: 1; border: 0; background: none; padding: 0 1px; margin: 0; border-radius: 4px; cursor: pointer; color: var(--c-text-soft); font-size: 17px; line-height: 1; }
    .fh-btn:hover { background: rgba(0,0,0,.1); }
    .fh-btn.on { color: var(--c-main); }
.filter-pop { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 1; width: 270px; padding: 10px; background: white; border: solid 1px #aaa; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: default; user-select: text; text-align: left; font-size: 13px; font-weight: 400; color: var(--c-text); }
    .filter-pop.open { display: block; }
    .fh.num .filter-pop { left: auto; right: 0; }
/* Close corner rather than a Done button: filtering applies as you type/tick, so a Done button would
   suggest nothing happens until you press it. */
.fp-x { position: absolute; top: 5px; right: 5px; border: 0; background: none; padding: 1px; margin: 0; border-radius: 4px; cursor: pointer; color: var(--c-text-soft); font-size: 17px; line-height: 1; }
    .fp-x:hover { background: rgba(0,0,0,.1); color: var(--c-text); }
.fp-title { font-weight: 600; margin-bottom: 8px; padding-right: 22px; }
.fp-field { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 400; }
    .fp-field > span { width: 34px; color: var(--c-text-soft); }
    .fp-field > input { flex: 1; min-width: 0; padding: 4px 8px; border: solid 1px #aaa; border-radius: 4px; font-size: 13px; }
.fp-text { width: 100%; padding: 5px 8px; border: solid 1px #aaa; border-radius: 4px; font-size: 13px; margin-bottom: 8px; }
.fp-all { display: block; padding-bottom: 6px; margin-bottom: 4px; border-bottom: solid 1px var(--c-rowline); font-weight: 500; }
.fp-list { max-height: 220px; overflow-y: auto; }
    .fp-list > label { display: block; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .fp-list > label:hover { background: var(--c-row-alt); }
    .fp-list > .fp-empty { padding: 4px 2px; color: var(--c-text-soft); }
.fp-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
    .fp-foot .spacer { flex: 1; }
.submitted-txns > summary { cursor: pointer; font-weight: 600; color: var(--c-link); width: fit-content; }

/* Reconcile tabs */
.grid > .row.rs-hidden { display: none; }
.grid > .row.filter-hidden { display: none; }
.grid > .row.count-hidden { display: none; }   /* "nothing here" placeholder, once the tab has rows */
/* The per-tab section header is an anchor for moves and sorting only — the tab chip above already
   names the section and shows its count, so showing it here would just repeat that. */
.recon-wizard .grid.recon > .row.stage-h { display: none; }
/* A just-classified row waiting out its few seconds before it leaves for its new tab. */
.grid.recon > .row.recon-leaving > div { opacity: .55; transition: opacity 4.5s ease-in; }
.recon .move-note { margin-left: 4px; font-style: italic; white-space: nowrap; }
.recon-substeps { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
/* No gap: the label, the count span and the brackets around it are separate flex items, so any gap
   would open up inside the parentheses — "Expenses ( 24 )". */
.recon-substeps > .recon-dot { display: flex; align-items: center; padding: 5px 12px; border-radius: 99px; background: var(--c-section); color: var(--c-text-soft); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none; }
    .recon-substeps > .recon-dot.active { background: var(--c-main); color: white; }
.grid.recon > .row > .sel-cell { display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; }
    .grid.recon > .row > .sel-cell input { cursor: pointer; margin: 0; }
.recon-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: var(--c-section); font-size: 13px; }
    .recon-bulk .spacer { flex: 1; }
.recon-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
    .recon-nav .spacer { flex: 1; }
/* Transactions another claim deferred, offered to this one: their own table under the main one, on
   screen only while To Reconcile is. Same columns as the table above, so the two line up. */
.pool-panel { margin-top: 26px; padding-top: 4px; border-top: solid 2px var(--c-border); }
    .pool-panel > h4 { margin: 12px 0 3px; }
    .pool-panel > .hint { margin: 0 0 10px; }
.finalise-panel { margin-top: 28px; border-top: solid 2px var(--c-border); padding-top: 14px; }
.finalise-panel .badge { margin-right: 8px; }