/* HandyFan approved brand pack, October 2026. Colour layer only. */
:root {
  --navy: #082448;
  --blue: #0866FF;
  --white: #FFFFFF;
  --paper: #F5F8FC;
  --border: #D8E5EF;
  --teal: #5DABA5;
  --ink: #082448;
  --muted: #526680;
  --blue-hover: #1455B8;
  --blue-soft: #E8F1FF;
  --pending-bg: #FFF2D6;
  --pending-ink: #8A5900;
  --confirmed-bg: #E5F4EA;
  --green: #236B43;
  --error-bg: #FBE8E8;
  --red: #A3333A;
  --orange: #8A5900;
  --shadow: 0 8px 26px #08244808;
}

/* White surfaces, navy structure, blue actions. Original logo artwork is retained. */
body { background: var(--paper); color: var(--ink); }
h1, h2, h3, .eyebrow, .brand>span, label, label.checkbox, dd,
.assessment-check legend, .card-next p { color: var(--navy); }
.app-header, .public-header, .sidebar, .panel, .metric, .request-card,
.filters, .property-hero, .table-wrap, .insight-metrics>div {
  background: var(--white); border-color: var(--border);
}
.public-header nav { color: var(--navy); }
.public-header nav>a:not(.btn):hover { color: var(--blue); text-decoration: underline; text-underline-offset: 7px; }
.primary, .room-tabs .active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: 0 4px 12px #0866FF22; }
.outline { color: var(--navy); background: var(--white); border-color: var(--navy); }
.outline:hover { background: var(--paper); color: var(--blue); border-color: var(--blue); }
.text-btn, .inline-link, .demo-bar button, .assessment-preview summary { color: var(--blue); }
.icon-btn { background: var(--white); color: var(--navy); border-color: var(--border); }
.icon-btn:hover { background: var(--blue-soft); }
.btn.danger { background: var(--red); color: var(--white); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--blue);
}
.hero-preview { border-color: var(--border); box-shadow: 0 20px 60px #08244812; }
.preview-top, .purpose-strip { background: var(--navy); color: var(--white); }
.purpose-strip h3 { color: var(--white); }
.purpose-strip p, .purpose-strip span, .small-tag { color: var(--border); }
.purpose-strip span { color: var(--teal); }
.footer { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* A lighter action-blue tint keeps small footer links readable on navy. */
.footer a, .footer button { color: #83B4FF; }
.footer p { color: var(--white); }

/* Navigation remains in the same position and retains all existing buttons. */
.sidebar { color: var(--navy); border-right: 1px solid var(--border); }
.profile { border-color: var(--border); }
.profile strong, .sidebar nav a, .sidebar nav a svg { color: var(--navy); }
.profile small, .sidebar-bottom p { color: var(--muted); }
.initials, .avatar-small { background: var(--paper); color: var(--navy); border-color: var(--border); }
.sidebar nav a:hover { background: var(--paper); color: var(--blue); }
.sidebar nav a.active {
  background: var(--paper); color: var(--blue);
  box-shadow: inset 0 -2px var(--blue);
}
.sidebar nav a.active svg { color: var(--blue); }
.sidebar nav b { background: var(--border); color: var(--navy); }
.sidebar nav a.active b { background: var(--blue); color: var(--white); }
.sidebar-bottom a, .sidebar-bottom button { color: var(--blue); }
.view-switch>div { background: var(--white); border-color: var(--border); }
.view-switch a { color: var(--navy); }
.view-switch a.selected { background: var(--paper); color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.view-switch a:hover:not(.selected) { background: var(--paper); }
.demo-bar { background: var(--paper); color: var(--muted); border-color: var(--border); }

/* Supportive panels use neutrals. Teal is decorative, never a booking status. */
.note, .continue-demo, .service-intro, .availability-top, .estimate-grid,
.certificate-card, .document-image, .document-full, .room-chips span,
.material-option.btn, .day-checks label, .share-options>div,
.insight-card .insight-source, .radius-visual, .message,
.evidence img, .preview-route svg, .service-icon, .insight-icon,
.property-icon, .step-number, .count, .room-tabs button {
  background: var(--paper); color: var(--navy); border-color: var(--border);
}
.service-intro>svg, .radius-orbit svg, .support-note>svg { color: var(--teal); }
.care-shortcuts .btn { background: var(--white); border-color: var(--border); }
.care-shortcuts .btn:hover, .metric:hover, .request-card:hover { border-color: var(--blue); }
.care-shortcuts svg, .pack-contents svg, .preview-route svg,
.service-icon, .insight-icon, .property-icon, .step-number { color: var(--blue); }
.tenant-intro { border-left-color: var(--blue); }
.assessment-preview { border-top-color: var(--blue); }
.estimate-grid strong, .insight-metrics strong, .metric>strong { color: var(--navy); }
.information-meter progress { accent-color: var(--blue); background: var(--border); }
.information-meter progress::-webkit-progress-bar { background: var(--border); }
.information-meter progress::-webkit-progress-value { background: var(--blue); }
.information-meter progress::-moz-progress-bar { background: var(--blue); }
.message.own, .conversation.active { background: var(--blue-soft); color: var(--navy); border-color: var(--blue); }
.conversation { color: var(--navy); }
.room-tabs .active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.outcomes label { background: var(--paper); color: var(--navy); border-color: var(--border); }
.outcomes label:has(input:checked) { background: var(--blue-soft); color: var(--blue-hover); border-color: var(--blue); }
.outcomes label:has(input[value="Pass"]:checked) { background: var(--confirmed-bg); color: var(--green); border-color: var(--green); }
.outcomes label:has(input[value="Action needed"]:checked) { background: var(--error-bg); color: var(--red); border-color: var(--red); }
input:not([type=checkbox]), select, textarea { color: var(--navy); border-color: #8196AD; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=file]::file-selector-button { background: var(--paper); border-color: var(--border); color: var(--navy); }
.checkbox input, .day-checks input, .outcomes input[type=radio] { accent-color: var(--blue); }
dialog { border-color: var(--border); color: var(--navy); }
dialog::backdrop { background: #08244885; }

/* Secondary text stays readable on both white and soft-white surfaces. */
.reference, .card-next>span, .card-foot, .priority, .metric>div, .metric>small,
.attention-row small, .activity-feed time, td small, .empty, .progress li>small,
.next-meta, .description, dt, dd small, .material-item small, .timeline small,
.message time, .evidence small, .simple-list, .property-stats small,
.report-summary span, .print-heading, .measure-tags span, dialog .check-list,
.property-facts span, .agenda-item small, .calendar-key, .day-number, .job-price,
.estimate-grid small, .information-meter, .assessment-preview details,
.certificate-card small, .document-summary small, .material-option small,
.conversation small, .message-layout .messages time, .care-shortcuts small,
.service-next span, .insight-metrics span, .insight-card .insight-source,
.hour-controls label, .range-labels, .radius-orbit small, .radius-visual>p,
.pack-contents, .preview-route>div { color: var(--muted); }
.activity-dot, .timeline li>span { background: var(--blue); }
.check-list li::marker { color: var(--navy); }

/* Table headers and calendars use navy structure, with restrained row shading. */
thead th, .calendar-weekday { background: var(--navy); color: var(--white); border-color: var(--border); }
tbody th { background: var(--paper); color: var(--navy); }
tbody tr:nth-child(even) { background: var(--paper); }
td, th, .calendar-day, .working-slider { border-color: var(--border); }
.calendar-day.outside { background: var(--paper); }
.calendar-day.outside .day-number { color: var(--muted); }
.calendar-day.today .day-number { background: var(--blue); color: var(--white); }

/* Explicit status labels are retained. Pending is never presented as success. */
.status, .ops-badge { background: var(--paper); color: var(--navy); }
.status.reported, .status.accepted, .status.matching, .status.offered,
.status.awaiting, .ops-badge.warning {
  background: var(--pending-bg); color: var(--pending-ink);
}
.status.planned, .status.cancelled { background: var(--paper); color: var(--muted); }
.status.scheduled { background: var(--confirmed-bg); color: var(--green); }
.status.resolved { background: var(--green); color: var(--white); }
.status.disputed, .ops-badge.danger { background: var(--error-bg); color: var(--red); }
.priority.high { color: var(--pending-ink); }
.dot.reported, .dot.accepted, .dot.matching, .dot.offered, .dot.awaiting { color: var(--pending-ink); }
.dot.scheduled, .dot.resolved { color: var(--green); }
.dot.disputed { color: var(--red); }
.dot.planned, .dot.cancelled { color: var(--muted); }
.alert-metric { border-top-color: var(--pending-ink); }
.alert-metric>strong, .overdue { color: var(--pending-ink)!important; }
.attention-icon { background: var(--pending-bg); color: var(--pending-ink); }
.attention-icon.late, .dispute-alert { background: var(--error-bg); color: var(--red); border-color: var(--red); }
.dispute-alert p, .form-error { color: var(--red); }
.confirmation-prompt { background: var(--pending-bg); border-color: #E6C782; }
.confirmation-prompt>svg, .confirmation-prompt h3, .confirmation-prompt p { color: var(--pending-ink); }
.confirmation-prompt .btn { background: var(--white); color: var(--navy); border-color: var(--navy); }
.calendar-event, .agenda-date { background: var(--paper); color: var(--navy); border-color: var(--navy); }
.calendar-event.visit, .agenda-item.visit .agenda-date { background: var(--confirmed-bg); color: var(--green); border-color: var(--green); }
.calendar-event.proposed, .agenda-item.proposed .agenda-date { background: var(--pending-bg); color: var(--pending-ink); border-color: var(--pending-ink); }
.calendar-event.review, .calendar-event.document, .calendar-event.check,
.calendar-event.recurring, .agenda-item.review .agenda-date,
.agenda-item.document .agenda-date, .agenda-item.check .agenda-date,
.agenda-item.recurring .agenda-date { background: var(--paper); color: var(--navy); border-color: var(--muted); }
.calendar-event.review { border-left-style: dashed; }
.calendar-event.recurring { border-left-style: dotted; }
.calendar-key span:before { background: var(--green); }
.calendar-key .proposed:before { background: var(--pending-ink); }
.calendar-key .review:before, .calendar-key .document:before, .calendar-key .recurring:before { background: var(--muted); }
.progress li>span { background: var(--paper); color: var(--muted); border-color: var(--border); }
.progress li.complete>span { background: var(--blue-soft); color: var(--blue-hover); border-color: var(--border); }
.progress li.complete:after { background: var(--border); }
.progress li.current>span { background: var(--pending-bg); color: var(--pending-ink); border-color: #E6C782; box-shadow: 0 0 0 4px var(--paper); }
.progress li:nth-child(4).complete>span, .progress li:nth-child(4).current>span { background: var(--confirmed-bg); color: var(--green); border-color: var(--green); }
.progress li:last-child.current>span { background: var(--green); color: var(--white); border-color: var(--green); }
.progress[data-state="disputed"] li.current>span { background: var(--error-bg); color: var(--red); border-color: var(--red); }

/* Interactive availability controls use action blue, not success green. */
.availability-toggle>span { background: var(--muted); }
.availability-toggle input:checked+span { background: var(--blue); }
.availability-toggle b, .availability-summary dd, .hour-controls output,
.range-field output, .radius-orbit strong { color: var(--navy); }
.working-slider input[type=range], .range-field input[type=range] {
  background: linear-gradient(to right,var(--blue) 0 var(--fill,50%),var(--border) var(--fill,50%) 100%);
  accent-color: var(--blue);
}
.working-slider input[type=range]::-webkit-slider-thumb, .range-field input[type=range]::-webkit-slider-thumb { border-color: var(--blue); background: var(--white); }
.working-slider input[type=range]::-moz-range-thumb, .range-field input[type=range]::-moz-range-thumb { border: 3px solid var(--blue); background: var(--white); border-radius: 50%; }
.working-slider input[type=range]:focus-visible, .range-field input[type=range]:focus-visible,
.availability-toggle input:focus-visible+span { outline-color: var(--blue); }
.radius-orbit { border-color: var(--teal); background: radial-gradient(circle,var(--white) 45%,var(--paper) 45%); }
.radius-orbit>div { border-color: var(--border); }

@media(max-width:950px) { .sidebar { border-right: 0; border-bottom: 1px solid var(--border); } }
@media print {
  body { background: white; color: black; }
  th, .calendar-weekday { background: white; color: black; }
  .status { background: white!important; color: black!important; }
}