/* Centre BC - small additions on top of w3.css */

/* W3.CSS Analytics template */
html, body, h1, h2, h3, h4, h5 { font-family: "Raleway", sans-serif; }

.cbc-logo { color: inherit; text-decoration: none; }

/* Top bar: the Support drop-down sits on the right, a little before "Centre BC" (which follows it) */
.cbc-logo-right { margin-left: auto; }
.cbc-support { margin-left: auto; margin-right: 24px; }
.cbc-support + .cbc-logo-right { margin-left: 0; }
.cbc-support-menu { right: 0; min-width: 230px; font-size: 16px; }

/* Side menu on small screens: the template's w3_open() / w3_close() script, done with a
   checkbox instead. The Menu button, Close Menu and the overlay are <label>s for it. */
.cbc-menu-toggle { display: none; }
.cbc-menu-toggle:checked ~ #mySidebar,
.cbc-menu-toggle:checked ~ #myOverlay { display: block; }

/* Finance / Settings sub-pages in the side menu */
.cbc-subitem { padding: 6px 16px 6px 52px !important; font-size: 15px; }
.cbc-subitem.cbc-active { background: #e3f2fd; font-weight: bold; }

/* Side-menu groups (<details>): the header only opens / closes; the chevron turns down when open */
.cbc-nav > summary { cursor: pointer; list-style: none; }
.cbc-nav > summary::-webkit-details-marker { display: none; }
.cbc-nav > summary::after { content: "\25B8"; float: right; transition: transform .15s; }
.cbc-nav[open] > summary::after { transform: rotate(90deg); }

/* Collapsed lists (<details>): the arrow turns down when opened, no script */
.cbc-details > summary { cursor: pointer; list-style: none; padding: 8px 0; }
.cbc-details > summary::-webkit-details-marker { display: none; }
.cbc-details > summary::before { content: "\25B8"; display: inline-block; width: 1.2em; transition: transform .15s; }
.cbc-details[open] > summary::before { transform: rotate(90deg); }

/* A grid six rows high that scrolls, header fixed (Distributions: bank transactions) */
.cbc-scroll6 { max-height: 240px; overflow: auto; background: #fff; }
.cbc-scroll6 thead th { position: sticky; top: 0; z-index: 1; background: #f1f1f1; }
.cbc-scroll6 tbody tr { scroll-margin-top: 36px; }

/* A grid ten rows high that scrolls, header and total row fixed (home dashboard: Ridings).
   Every row is the same height (--cbc-row) and on one line (no wrapping; scrolls sideways when narrow),
   so the box shows the header, ten full rows and the total. The extra 17px is room for a sideways
   scrollbar; without one, the top of the next row shows, hinting there's more to scroll. */
.cbc-scroll10, .cbc-scroll20 { --cbc-row: 46px; max-height: calc(var(--cbc-row) * 12 + 17px); overflow: auto; background: #fff; }
.cbc-scroll20 { max-height: calc(var(--cbc-row) * 22 + 17px); }   /* 20 rows + header + total */
.cbc-scroll10 th, .cbc-scroll10 td, .cbc-scroll20 th, .cbc-scroll20 td { height: var(--cbc-row); box-sizing: border-box; padding-top: 0; padding-bottom: 0; vertical-align: middle; white-space: nowrap; }
.cbc-scroll10 thead th, .cbc-scroll20 thead th { position: sticky; top: 0; z-index: 1; background: #f1f1f1; }
.cbc-scroll10 tfoot td, .cbc-scroll20 tfoot td { position: sticky; bottom: 0; z-index: 1; background: #fff; box-shadow: inset 0 2px 0 #999; }

/* Sign in / Register: a w3-modal shown open from the server */
.cbc-modal { display: block; }
.cbc-modal-box { max-width: 460px; }
.cbc-tab { width: 50%; text-align: center; }

/* content of every page except the home dashboard */
.cbc-page { padding-top: 22px; padding-bottom: 16px; max-width: 1400px; }

h1.cbc-title { font-size: 26px; margin: 8px 0 4px; }
.cbc-sub { color: #666; margin: 0 0 12px; }

/* numbers */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg { color: #b71c1c; }

/* Grid column alignment - the heading lines up with its data: text left (w3.css default),
   money / numbers / dates right (class "num" on the th and every td), buttons / checkboxes /
   icons / images centred ("w3-center" on the th and every td). th.num / td.num outrank
   w3.css's ".w3-table td, .w3-table th { text-align: left }". */
th.num, td.num { text-align: right; }
/* a column only as wide as its content (e.g. a tick box under a one-word heading) */
th.cbc-narrow, td.cbc-narrow { width: 1%; white-space: nowrap; }
/* Email (~/Email): a page shown as a modal over the site - w3-modal, always open, above the top bar */
.cbc-modal { display: block; z-index: 5; padding-top: 56px; }
.cbc-modal-content { max-width: 920px; margin-bottom: 40px; }
.cbc-modal-head h2 { margin: 12px 48px 12px 0; }
.cbc-recipients { padding: 6px 8px; background: #f1f1f1; border: 1px solid #ccc; font-size: 15px; }
.cbc-prefix-row { display: flex; align-items: stretch; }
.cbc-prefix { display: flex; align-items: center; padding: 0 8px; background: #e8eaf6; border: 1px solid #ccc; border-right: 0; white-space: nowrap; font-size: 15px; }
.cbc-scroll-box { max-height: 280px; overflow: auto; }
.cbc-quick-picks { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cbc-tree { max-height: 380px; overflow: auto; padding: 6px 8px; background: #fff; }
.cbc-tree-view input[type=checkbox] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: middle; cursor: pointer; }
.cbc-tree-node { padding: 2px 0; font-size: 15px; color: inherit; text-decoration: none; }
.cbc-run-banner p { margin: 8px 0; }
/* Ridings > Bank accounts: the authentication document line and its View popup (a .cbc-modal) */
.cbc-doc-line { margin: 4px 0 8px; }
.cbc-doc-frame { display: block; width: 100%; height: 70vh; border: 0; background: #f1f1f1; }
.cbc-save-template { margin: 8px 0 16px; padding-top: 8px; border-top: 1px solid #ddd; }
.cbc-inline-row { display: flex; gap: 8px; align-items: stretch; }
.cbc-inline-row .w3-input { flex: 1; }
.cbc-inline-row .w3-button { white-space: nowrap; }
.cbc-log-body > div { white-space: pre-wrap; font-size: 13px; margin: 4px 0; padding: 6px; background: #fafafa; border-left: 3px solid #ccc; }
/* a row a page jumps back to (#r-ABBR after a Show/Hide save): clear of the fixed top bar, with a row above */
.cbc-anchor { scroll-margin-top: 120px; }

/* report tables */
.cbc-report { font-size: 14px; }
.cbc-report th, .cbc-report td { padding: 6px 8px !important; }
.cbc-report .cbc-section td { background: #e8edf3; font-weight: bold; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.cbc-report .cbc-total td { font-weight: bold; border-top: 2px solid #999; }
.cbc-report .cbc-grand td { font-weight: bold; background: #fff8e1; border-top: 2px solid #999; border-bottom: 3px double #999; }
.cbc-report td.cbc-cat { min-width: 220px; }
.cbc-report .cbc-sticky { position: sticky; left: 0; background: inherit; }

/* ledger */
.cbc-rec { background: #eef8ee; }
.cbc-month-bar a.w3-button { padding: 6px 12px; }
.cbc-tag-ok { background: #2e7d32; color: #fff; }
.cbc-tag-pending { background: #f9a825; color: #000; }
.cbc-tag-lock { background: #455a64; color: #fff; }

/* forms */
.cbc-form label { font-weight: 600; font-size: 13px; display: block; margin-top: 8px; }
.cbc-form .w3-input, .cbc-form .w3-select { padding: 6px; }
.cbc-error { color: #b71c1c; font-size: 13px; }
.cbc-inline { display: inline-block; width: auto; }
/* A checkbox and its label on one line. asp:CheckBox puts CssClass="w3-check" on a <span> round the
   <input>, so w3.css's 24px box and top:6px nudge land on the span, not the box; and ".cbc-form label"
   (display: block) outranks ".cbc-inline", which dropped the label onto the next line. */
span.w3-check { position: static; width: auto; height: auto; }
span.w3-check input, input.w3-check { position: static; width: 18px; height: 18px; margin: 0; vertical-align: middle; cursor: pointer; }
label.cbc-inline, .cbc-form label.cbc-inline { display: inline; margin: 0 20px 0 6px; vertical-align: middle;
                                               font-weight: normal; font-size: 15px; cursor: pointer; }

/* Check Writer: Vendor / Riding radio buttons on one line, and the form drawn as a blank cheque */
.cbc-form .cbc-radio label { display: inline; margin: 0 24px 0 6px; font-weight: normal; font-size: 16px; cursor: pointer; }
.cbc-radio input { width: 18px; height: 18px; vertical-align: middle; cursor: pointer; }
/* Check Writer: the riding cheque's Check List, top right of the form (full width on small screens) */
.cbc-checklist { float: right; width: 380px; margin: 0 0 8px 16px; padding: 8px 12px; background: #ffebee;
                 border: 1px solid #ef9a9a; border-left: 6px solid #e53935; font-size: 14px; }
.cbc-checklist ul { margin: 6px 0 0 0; padding-left: 20px; }
.cbc-checklist li { margin-bottom: 4px; }
@media (max-width: 760px) { .cbc-checklist { float: none; width: auto; margin: 0 0 8px 0; } }
.cbc-cheque { background: #f4f8fb; border: 1px solid #b0bec5; border-left: 6px solid #3f51b5; padding: 8px 16px 16px; margin: 8px 0; }
.cbc-cheque-bank { padding-top: 12px; line-height: 1.4; }
.cbc-cheque-words { font-style: italic; color: #333; border-bottom: 1px solid #b0bec5; padding: 2px 0 4px; }

.cbc-card { background: #fff; padding: 12px 16px; margin-bottom: 16px; }
.cbc-stat { font-size: 20px; font-weight: bold; }
.cbc-stat-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .5px; }

/* Two cards side by side, 50/50 and the same height (Ledger: statement balance | search); stacked on narrow screens */
.cbc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cbc-split > .cbc-card { margin-bottom: 0; }
@media (max-width: 900px) { .cbc-split { grid-template-columns: 1fr; } }

/* Riding map (Controls/RidingMap.ascx). z-index 0 keeps Leaflet's layers (z-index 400+)
   under the fixed top bar and side menu. */
.cbc-riding-map { width: 100%; position: relative; z-index: 0; }
.cbc-riding-map-note { margin: 4px 0 0; }

/* Register: "I am a Riding Finance Agent" shows its panel without a postback */
.cbc-agent { margin-top: 16px; }
.cbc-agent-panel { display: none; margin: 8px 0 0; padding: 4px 0 8px 12px; }
.cbc-agent-toggle:checked ~ .cbc-agent-panel { display: block; }
.cbc-form .cbc-agent > label { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }

/* Riding Reports (~/RidingReports): plain, large and forgiving for riding Financial Agents */
.cbc-hint { display: block; color: #666; font-size: 13px; margin: 2px 0 4px; }
.cbc-form .cbc-must { background: #fffde7; }
.cbc-form .cbc-check-line label { display: inline; font-weight: normal; font-size: 15px; margin-left: 6px; }
.cbc-form .cbc-check-line { margin: 12px 0 4px; }
.cbc-current { border-left: 6px solid #2196F3; }
.cbc-current-title { font-size: 22px; font-weight: bold; margin: 4px 0 8px; }
.cbc-current-row td { background: #e3f2fd; }
.cbc-step-bar { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.cbc-step-bar .w3-bar-item { padding: 10px 14px; }
.cbc-step-no { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background: #eee; color: #333; text-align: center; font-weight: bold; }
.cbc-step-bar .w3-indigo .cbc-step-no { background: #fff; color: #3f51b5; }
.cbc-step-title { font-size: 22px; margin: 4px 0 6px; }
.cbc-step-nav { margin-top: 20px; overflow: hidden; }
.cbc-help { background: #fff; padding: 0 16px 4px; margin-bottom: 12px; border-left: 4px solid #2196F3; }
.cbc-lines td { vertical-align: top; }
.cbc-lines .cbc-example td { color: #888; background: #f5f5f5; font-style: italic; }
.cbc-ok { color: #2e7d32; font-weight: bold; white-space: nowrap; }
.cbc-fix { color: #b71c1c; font-size: 13px; min-width: 200px; }
.cbc-fix ul { margin: 0; padding-left: 16px; }
.cbc-calc td { padding: 4px 0 !important; border: none; }
.cbc-calc .cbc-total td { border-top: 2px solid #999; }
.cbc-result p { font-size: 17px; }
.cbc-done h2 { margin-top: 8px; }
.cbc-signoff { border-left: 6px solid #4CAF50; }
.cbc-ticks { list-style: none; padding-left: 0; }
.cbc-ticks li { padding: 6px 0; border-bottom: 1px solid #eee; }
.cbc-ticks label { display: inline !important; font-weight: normal !important; font-size: 15px !important; margin-left: 8px; }
.cbc-guide section { scroll-margin-top: 60px; }
.cbc-guide h2 { font-size: 22px; margin-top: 4px; }
.cbc-guide h3 { font-size: 17px; margin: 16px 0 4px; }
.cbc-guide li { margin: 4px 0; }
.cbc-toc ol { columns: 2; }
.cbc-election { border-left: 6px solid #ff9800; }
@media (max-width: 600px) { .cbc-toc ol { columns: 1; } }
/* "Riding in a box" layout (RidingReports/Riding.Master) */
.cbc-box-riding { font-size: 16px; }
.cbc-box-who { margin-top: 12px; }
.cbc-box-name { font-size: 20px; font-weight: bold; }
.cbc-box-help { margin-top: 12px; border-top: 1px solid #eee; }
/* Admin > Users: roles as a grid */
.cbc-role-grid td { vertical-align: middle; }
.cbc-form .cbc-role-grid label { display: inline; margin: 0; cursor: pointer; }
.cbc-role-check input { width: 18px; height: 18px; }
/* Welcome guide: "Read - go immediately to report going forward" beside "On this page" */
.cbc-toc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cbc-guide-read { background: #e3f2fd; padding: 4px 8px; border-radius: 4px; }
.cbc-guide-read label { font-weight: 600; margin-left: 6px; cursor: pointer; }
.cbc-guide-read input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; }
/* Riding Reports > Donations - Simple Form: a sheet of inputs */
.cbc-sheet-note { font-size: 13px; color: #555; margin: 4px 0; }
.cbc-sheet { font-size: 12px; }
.cbc-sheet th, .cbc-sheet td { padding: 3px 4px !important; vertical-align: middle; }
.cbc-sheet .w3-input, .cbc-sheet .w3-select { padding: 3px 5px; min-width: 100px; font-size: 12px; }
.cbc-sheet .cbc-sheet-wide { min-width: 180px; }
.cbc-sheet .cbc-sheet-city { min-width: 110px; }
.cbc-sheet .cbc-sheet-paid { min-width: 105px; }
/* Simple Form: the bank deposit bar, one line on a wide screen, same size as the sheet */
.cbc-deposit { font-size: 12px; margin: 6px 0 8px; padding: 2px 0; }
.cbc-deposit-cell { padding: 4px 8px; display: flex; align-items: center; gap: 6px; min-height: 34px; }
.cbc-deposit label { font-weight: 600; font-size: 12px; white-space: nowrap; margin: 0; }
.cbc-deposit .w3-input { font-size: 12px; padding: 3px 5px; width: 140px; }
.cbc-sheet .cbc-sheet-name { min-width: 100px; }
.cbc-sheet .cbc-sheet-postal { min-width: 70px; width: 80px; text-transform: uppercase; }
.cbc-sheet .cbc-sheet-amount { min-width: 80px; width: 90px; }
.cbc-sheet-mode { font-size: 13px; margin: 6px 0; }
.cbc-sheet .cbc-sheet-n { width: 32px; color: #888; text-align: right; }
.cbc-sheet .cbc-sheet-tick { text-align: center; width: 70px; }
.cbc-sheet .cbc-sheet-tick input { width: 18px; height: 18px; }
.cbc-sheet .cbc-sheet-check { min-width: 170px; font-size: 12px; }
.cbc-sheet .cbc-sheet-check ul { margin: 0; padding-left: 16px; }
.cbc-sheet tr.cbc-sheet-new td { background: #fffde7; }
.cbc-sheet-totals { margin: 10px 0; }
/* Event Form: the event's totals in a row of cards (wrap on a phone) */
.cbc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.cbc-stat-grid .cbc-card { margin-bottom: 0; padding: 8px 12px; text-align: center; }
.cbc-deposit .cbc-event-name { width: 100%; }

/* Riding Reports step 5: the Party's share under Total money in */
.cbc-calc .cbc-party-share td { font-weight: bold; color: #1a237e; }

/* Check column: yellow notes are for reference only (e.g. a date outside the report's dates) */
.cbc-note { margin: 2px 0 0; padding: 2px 6px 2px 20px; background: #fff8e1; color: #6d4c00; border-left: 3px solid #ffb300; font-size: 12px; }
.cbc-check .cbc-fix { margin: 0; padding-left: 16px; }
.cbc-check { min-width: 170px; }