/* B-Pay brand palette: charcoal, burnt amber and a restrained rose accent.
   Presentation only. Equipment state colours, bank marks and QR pixels retain
   their own meaning. Keep this stylesheet after the component stylesheets. */
:root {
  --brand: #a7441e;
  --brand-hover: #873415;
  --brand-soft: #fff1e9;
  --brand-line: #e4bdab;
  --brand-highlight: #f1a368;
  --brand-rose: #994661;
  --brand-rose-soft: #f8edf1;
  --brand-charcoal: #292727;
  --ink: #292727;
  --muted: #665d58;
  --green: #a7441e; /* Legacy component token used for brand actions. */
  --lime: #efb17d;
  --line: #e5ddd7;
  --bg: #f7f4f1;
}
body.owner-portal { --muted: #665d58; }

/* Shared controls and navigation. */
.button { border-color: var(--line); }
.button:hover { background: var(--brand-soft); }
.button.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.text-button, .bank-picker-status { color: var(--brand); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible,
.owner-portal button:focus-visible, .owner-portal a:focus-visible,
.owner-portal input:focus-visible, .owner-portal select:focus-visible,
.owner-portal summary:focus-visible { outline-color: var(--brand); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
input:not([type=checkbox]), select, textarea { border-color: var(--line); }
input:not([type=checkbox]):focus, select:focus, textarea:focus { border-color: var(--brand); }
.nav { color: var(--muted); }
.nav.active, #mobile-ops-nav > a.active { background: var(--brand-soft); color: var(--brand); }
.sidebar #mobile-menu, .avatar { background: var(--brand-soft); color: var(--brand); }
.bpay-nav-heading, .eyebrow, .title-dot { color: var(--brand); }
.ops-menu-links a { color: var(--ink); }
.ops-menu-links a:hover, .owner-portal .ops-menu-links a:hover { background: var(--brand-soft); }
#mobile-ops-nav { box-shadow: 0 -5px 20px #29272708; }
#mobile-ops-nav > a, #mobile-ops-nav > button { color: var(--muted); }
.customer-shell { border-color: var(--line); box-shadow: 0 16px 50px #29272708; }
th { background: #faf8f6; }

/* Sign-in, phone, OTP and PIN retain their existing targets and flow. */
.auth-story { background: var(--brand-charcoal); color: #fff8f3; }
.auth-story p, .auth-steps { color: #e1d5cc; }
.auth-story .brand-sub, .auth-story > small { color: #d5c5b9; }
.auth-story .eyebrow { color: var(--brand-highlight); }
.otp-inputs input:not([type=checkbox]), .phone-inputs input:not([type=checkbox]) { caret-color: var(--brand); }
.otp-inputs input:focus, .phone-inputs input:focus {
  border-color: var(--brand); background: #fff8f3; box-shadow: 0 0 0 3px #a7441e14;
}
.otp-inputs input:disabled { background: #f3eeea; }
.phone-separator, .customer-secure { color: var(--muted); }
.station-symbol, .otp-symbol, .large-step-icon { background: var(--brand-soft); color: var(--brand); }
.pin-dialog #pin-dots > span { border-color: #cfc2b9; }
.pin-dialog #pin-dots > span.filled { background: var(--brand); border-color: var(--brand); }
.pin-pad > button { background: #f5eee8; color: var(--ink); }
.pin-pad > button:hover, .pin-pad > button:focus-visible { background: #f7dfd1; }
.pin-dialog .pin-close { color: var(--muted); }
.pin-dialog .pin-close:hover { background: var(--brand-soft); color: var(--brand); }

/* Customer primary journey and monetary hierarchy. */
#customer-help { color: var(--brand); background: #fff8f3; border-color: var(--line); }
#customer-help:focus-visible { outline-color: var(--brand); }
#customer-view > header .customer-top-back { color: var(--brand); }
#customer-rate, .prepaid-amount { color: var(--ink); }
.member-option { color: var(--ink); background: #fcf8f5; border-color: var(--line); }
.member-option:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.credit-card { background: var(--brand-charcoal); color: #fff8f3; border-color: var(--brand-charcoal); }
.credit-card > span, .credit-card > small { color: #e1d5cc; }
.credit-card > strong { color: var(--brand-highlight); }
.budget-choice { color: var(--ink); border-color: var(--line); }
.budget-choice.selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.customer-journey > div, .customer-journey > div:first-child { color: #776e68; }
.customer-journey > div.current { color: var(--brand); }
.customer-journey > div.current:after { background: var(--brand); }
.customer-journey > div.done { color: var(--brand-rose); }
.customer-journey > div.done:before { color: var(--brand-rose); background: var(--brand-rose-soft); }
.journey-link { color: #ddd0c7; }
.done .journey-link { color: #c58b9f; }
.current .journey-link { color: #d6aa91; }
.bank-transfer { background: #faf5f0; border-color: var(--line); }
/* This targeted override replaces the previous component's !important brand. */
.upload-slip { background: var(--brand) !important; box-shadow: 0 8px 22px #a7441e24; }
.upload-slip:hover { background: var(--brand-hover) !important; }
.prepaid-power { color: var(--ink); border-color: #e6bda5; background: radial-gradient(circle,#fffaf5 40%,#fae4d3); }
.prepaid-power:before { border-color: #d6a480; }
.prepaid-power > span { color: var(--muted); }
.prepaid-power.flowing { box-shadow: 0 0 32px #e7a56835; }
.budget-progress { background: #f0e4db; }
.budget-progress > span { background: var(--brand); }

/* Station detail cards use brand decoration, not equipment-state colours. */
#customer-details.station-details { color: var(--muted); }
#customer-details .station-details-summary > .station-details-chevron { color: var(--muted); }
#customer-details .station-equipment-card { background: #faf5f0; border-color: var(--line); }
#customer-details #customer-equipment { color: var(--ink); }
#customer-details .station-equipment-label, #customer-details #customer-model-name,
#customer-details #customer-equipment-image .charger-visual figcaption,
#customer-details .station-detail-row dt, #customer-details .station-location-note,
#customer-details .station-battery-note, #customer-details .station-battery-note p { color: var(--muted); }
#customer-details .station-head-label { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
#customer-details .station-detail-icon { color: var(--brand); background: #fff8f3; border-color: var(--line); }
#customer-details .station-detail-row { border-color: var(--line); }
#customer-details .station-detail-row dd, #customer-details .station-travel h4 { color: var(--ink); }
#customer-details .station-direction-buttons .button { color: var(--brand); background: #fff8f3; border-color: var(--brand-line); }
#customer-details .station-direction-buttons .button::after { color: var(--brand); }
#customer-details .station-battery-note { border-color: var(--line); }

/* Owner financial views and reports. The darkest card anchors the money total. */
.financial-tile > strong, .credit-summary strong, .member-money > b { color: var(--ink); }
.finance-metrics .financial-tile:first-child { background: var(--brand-charcoal); border-color: var(--brand-charcoal); }
.finance-metrics .financial-tile:first-child > span,
.finance-metrics .financial-tile:first-child .finance-hint,
.owner-portal .finance-metrics .financial-tile:first-child .finance-hint { color: #e1d5cc; }
.finance-metrics .financial-tile:first-child > strong { color: var(--brand-highlight); }
.metrics .accent { background: var(--brand-charcoal); color: #fff8f3; border-color: var(--brand-charcoal); }
.metrics .accent > span, .metrics .accent small { color: #e1d5cc; }
.finance-hint, .fleet-device-details, .owner-site-summary > p,
body:not(.owner-portal) .owner-site-summary p { color: var(--muted); }
#owner-shortcuts .ui-icon { color: var(--brand); }
#owner-shortcuts a { border-color: var(--line); }
#owner-shortcuts a:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.owner-site-status > span { background: #f5eee8; }
body:not(.owner-portal) .owner-site-status b { color: var(--ink); }
.revenue-point { color: var(--ink); background: #fcf8f5; border-color: var(--line); }
.revenue-point:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.revenue-point small, .revenue-point-stats { color: var(--muted); }
.revenue-point-money strong, #fleet-filter-badge { color: var(--brand); }
#fleet-counts .fleet-key.selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.credit-member, .member-avatar, .customer-member-avatar { background: var(--brand-soft); color: var(--brand); }
.customer-report-range, .customer-member-link { color: var(--brand); }
.customer-metric > span, .customer-metric > strong { color: var(--ink); }
.customer-metric > small, .customer-report-note, .customer-report-status,
.customer-member-name small, .customer-member-numbers small,
.customer-statement .customer-statement-header p, .customer-statement .customer-balance-details p,
.customer-org-balance small, .customer-ledger-notes dt, .customer-event-heading small,
.customer-event-amount small, .customer-event-meta, .customer-statement .customer-event-place,
.customer-event-details > summary, .customer-event-details dt, .customer-statement-pages > span,
.customer-statement .customer-statement-limit, .customer-statement .customer-statement-footnote { color: var(--muted); }
.customer-metric-energy { background: var(--brand-charcoal); border-color: var(--brand-charcoal); }
.customer-metric-energy > span, .customer-metric-energy > strong { color: #fff8f3; }
.customer-metric-energy > small { color: #e1d5cc; }
.customer-metric-credit, .customer-report-empty, .customer-energy-value { background: #faf5f0; }
.customer-energy-value { color: var(--brand); }
.customer-member-card:hover { border-color: var(--brand-line); box-shadow: 0 6px 20px #2927270a; }
.customer-balance-details > summary, .customer-event-details > summary { color: var(--ink); }
.customer-statement-tabs { background: #f3e9e2; }
.customer-statement-tabs button { color: var(--muted); }
.customer-statement-tabs button[aria-selected=true] { background: var(--brand); color: #fff; box-shadow: 0 2px 6px #a7441e15; }
.customer-event-icon { background: var(--brand-soft); color: var(--brand); }

/* Receiving accounts, tariff choices and provider configuration. Bank SVGs stay original. */
.payment-setup-summary article, .provider-test-box, .branch-account-current,
.payment-settings-journey li, .tariff-selected-device { background: #faf5f0; }
.payment-setup-summary .ui-icon, .payment-settings-link, .receiving-account-number,
.tariff-price-label input, .tariff-impact, .tariff-device-card strong, .tariff-review-price { color: var(--brand); }
.payment-section-symbol { background: var(--brand-soft); color: var(--brand); }
.payment-settings-journey b { background: var(--brand); color: #fff; }
.payment-setup-summary span, .shared-provider-panel > summary small,
.branch-account-current small, .branch-proof-panel > summary span,
.branch-account-overview > summary span, .branch-account-row small,
.payment-provider-short-status, .payment-provider-heading p, .payment-provider-footer > p,
.tariff-scopes small, .tariff-device-card small, .charger-visual figcaption { color: var(--muted); }
.bank-choice:hover { border-color: var(--brand-line); background: #fff8f3; }
.bank-choice.selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.bank-choice.selected .bank-choice-check { background: var(--brand); border-color: var(--brand); color: #fff; }
.tariff-scopes label:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tariff-scopes input { accent-color: var(--brand); }

/* Admin & Services forms, installation journeys and guides. */
.setup-check .step, .aw-heading-icon, .aw-account-avatar, .aw-guide-topic-icon,
.aw-guide-content-icon, .scanner-symbol, .sj-type-icon { background: var(--brand-soft); color: var(--brand); }
.secret-result, .onboarding-note, .modal-template#recovery-dialog pre,
.aw-overview-card, .aw-empty, .aw-account-dialog .aw-active-toggle,
.aw-install-helper, .aw-selected-device, .aw-handover, .aw-guide-endpoint,
.sj-detail-summary { background: #faf5f0; border-color: var(--line); }
.aw-tabs { background: #f3e9e2; }
.aw-tabs > button { color: var(--muted); }
.aw-tabs > button[aria-pressed=true] { color: var(--brand); background: #fff; box-shadow: 0 2px 8px #29272710; }
.aw-form-divider, .aw-overview-card > h2, .aw-connection-facts dd,
.aw-guide-content > h2, .aw-guide-content > ol > li, .aw-guide-endpoint dd,
.sj-card, .sj-card-footer b, .sj-detail-summary b, .sj-event-heading b { color: var(--ink); }
.aw-overview-card > .eyebrow, .aw-coordinate-details > summary,
.aw-guide-environment > summary, .aw-guide-topic-count,
.sj-counts b, .sj-card-open, .sj-create-case > summary { color: var(--brand); }
.aw-explain-row > [data-aw-icon] { background: var(--brand-soft); color: var(--brand); }
.admin-workflow .aw-card-heading p, .admin-workflow .aw-form-note,
.aw-explain-row p, .aw-section-heading p, .aw-business-heading p,
.aw-account-name > small, .aw-inline-empty, .aw-pagination > span,
.aw-empty > p, .aw-active-toggle small, .aw-install-scope > p,
.aw-install-helper > p, .aw-context-site > p, .aw-selected-device p,
.aw-selected-device small, .aw-connection-facts dt, .aw-handover p,
.aw-install-device-location > span, #field-guide-context-summary,
.aw-guide-topics small, .aw-guide-lead, .aw-guide-endpoint dt,
.aw-guide-environment dt, .aw-guide-environment p, #geo-message,
.sj-counts span, .sj-card-heading small, .sj-location, .sj-card-footer,
.sj-create-case label small, .sj-detail-tags, .sj-detail-summary span,
.sj-event-heading time, .sj-timeline small, .sj-timeline p,
.sj-timeline summary, .sj-timeline dt, .sj-timeline dd { color: var(--muted); }
.aw-journey::before { background: #e8d6cb; }
.aw-journey > button { color: var(--muted); }
.aw-step-mark { background: #f6efea; color: var(--muted); border-color: var(--line); }
.aw-journey > button.aw-step-done .aw-step-mark { background: var(--brand-rose-soft); border-color: #dcbdc9; color: var(--brand-rose); }
.aw-journey > button[aria-current=step] { color: var(--brand); }
.aw-journey > button[aria-current=step] .aw-step-mark { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 5px #fff,0 0 0 7px #ead4c7; }
.aw-install-helper > .aw-heading-icon { background: #f5e2d5; }
.aw-endpoint { background: var(--brand-charcoal); color: #fff8f3; }
.aw-guide-topics > button { color: var(--ink); border-color: var(--line); }
.aw-guide-topics > button[aria-current=step] { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 6px 18px #a7441e15; }
.aw-guide-topics > button[aria-current=step] small { color: #ffe0cd; }
.aw-guide-topics > button[aria-current=step] .aw-guide-topic-icon { background: #ffffff15; }
.aw-guide-content > ol > li::before { background: var(--brand-soft); color: var(--brand); }
.aw-guide-content > ol > li:not(:last-child)::after { background: #eadbd0; }
.sj-card:hover { border-color: var(--brand-line); box-shadow: 0 5px 18px #2927270c; }
.sj-timeline-dot { background: var(--brand-rose); }
.sj-public-message { background: #faf0ed; }
.sj-public-message > b, .sj-public-message > p { color: var(--ink); }
#commission-dialog > form > p, #commission-dialog .consent-line small { color: var(--muted); }
#commission-dialog .consent-line { background: #fcf8f5; }
#commission-dialog .consent-line:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
#commission-dialog .consent-line input { accent-color: var(--brand); }
#commission-dialog .commission-enabled-line, #commission-dialog .commission-target { background: #faf0e8; border-color: var(--brand-line); }
.evidence-json { background: #f8f2ed; color: var(--ink); }

/* Model/scanner controls. Actual camera frames and manufacturer images are untouched. */
.charger-model-open, .charger-model-dialog, .charger-model-option { color: var(--ink); border-color: var(--line); }
.charger-model-open:hover, .charger-model-option:hover { background: #fff8f3; border-color: var(--brand-line); }
.charger-model-option[aria-selected=true] { background: var(--brand-soft); border-color: var(--brand); }
.charger-model-option[aria-selected=true] .charger-model-option-check { background: #f5decf; color: var(--brand); }
.charger-model-back, .charger-model-open > .ui-icon { color: var(--brand); }
.charger-model-selected-name > small, .charger-model-dialog .charger-model-dialog-heading p,
.charger-model-dialog .charger-model-results, .charger-model-option-copy > small,
.charger-model-dialog .charger-model-custom-mode p, .installation-scanner header p,
.scanner-review > span, .scanner-review > p, .scanner-privacy { color: var(--muted); }
.scanner-review { background: #faf0e8; }
.scanner-review > strong { color: var(--ink); }
.scanner-identity-check input { accent-color: var(--brand); }

/* Customer support uses rose for navigation and retains success/error status semantics. */
.customer-help-heading h2, .customer-help-categories legend,
.customer-help-list-heading h3, .customer-help-detail-heading h3,
.customer-help-login h3, .customer-help-note { color: var(--ink); }
.customer-help-symbol, .customer-help-case-icon { background: var(--brand-soft); color: var(--brand); }
.customer-help-tabs { background: #f3e9e2; }
.customer-help-tabs button { color: var(--muted); }
.customer-help-tabs [aria-pressed=true] { background: var(--brand); color: #fff; }
.customer-help-categories .selected { background: var(--brand-rose-soft); color: var(--brand-rose); border-color: var(--brand-rose); box-shadow: inset 0 0 0 1px var(--brand-rose); }
.customer-help-heading p, .customer-help-categories label, .customer-help-context,
.customer-help-auto, .customer-help-case small, .customer-help-empty,
.customer-help-detail-heading small, .customer-help-original p,
.customer-help-original small, .customer-help-timeline time, .customer-help-login p { color: var(--muted); }
.customer-help-case { color: var(--ink); border-color: var(--line); }
.customer-help-current { background: var(--brand-charcoal); color: #fff8f3; }
.customer-help-current span, .customer-help-current small { color: #e1d5cc; }
.customer-help-original > summary { color: var(--brand); }
.customer-help-timeline li:before { background: var(--brand-rose); }
.customer-help-timeline b { color: var(--ink); }
.customer-help-timeline p { color: var(--ink); background: #faf0ed; }

/* Readability and safety meanings: online/charging/success remain green;
   red stops/errors and amber warnings retain their component definitions. */
#customer-device.device-state:not(.online) { color: #665f5a; }
#customer-device:not(.online):before { background: #8b837e; }
.status-dot.offline, .owner-portal .status-dot.offline { color: #625b56; background: #efedeb; }
.fleet-key .offline { background: #8b837e; }
.status-dot.charging { background: #194e3c; color: #f6f9ef; }
.customer-positive, .customer-event-cash { color: #246848; }
.customer-event-cash { background: #edf7ee; }

/* Logo recolours extend to the printable poster without touching its code. */
#qr-poster, #qr-poster .qr-tagline { color: var(--ink); }
#qr-poster .qr-instruction, #qr-poster #qr-url { color: var(--muted); }
@media print {
  #qr-poster { background: #fff; }
}