/* Shared hero palette and interaction rules, loaded after page stylesheets. */
:root {
  --bs-link-color: var(--bohio-forest);
  --bs-link-hover-color: var(--bohio-forest-dark);
  --bs-success-rgb: 54, 91, 115;
}
body { color: var(--bohio-ink); }
h1, h2, h3, h4, h5, h6 { color: var(--bohio-forest-dark); }
.text-muted, .text-secondary { color: var(--bohio-muted) !important; }
.text-primary, .text-success { color: var(--bohio-forest) !important; }
.btn { font-family: var(--bohio-font-family); font-weight: var(--bohio-weight-semibold); }
.btn-primary, .btn-success, .btn-secondary, .btn-warning, .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bohio-forest);
  --bs-btn-border-color: var(--bohio-forest);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bohio-forest-dark);
  --bs-btn-hover-border-color: var(--bohio-forest-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bohio-forest-dark);
  --bs-btn-active-border-color: var(--bohio-forest-dark);
  background-color: var(--bohio-forest);
  border-color: var(--bohio-forest);
  color: #fff;
}
.btn-outline-info, .btn-outline-warning {
  --bs-btn-color: var(--bohio-forest);
  --bs-btn-border-color: var(--bohio-forest);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bohio-forest);
  --bs-btn-hover-border-color: var(--bohio-forest);
}
.form-control, .form-select { color: var(--bohio-ink); border-color: var(--bohio-border); }
.form-control:focus, .form-select:focus { border-color: var(--bohio-forest); box-shadow: 0 0 0 .2rem rgba(54,91,115,.15); }
.form-check-input:checked { background-color: var(--bohio-forest); border-color: var(--bohio-forest); }
.rentals-shell, .rentals-admin-shell, .rental-confirm-dialog {
  --r-dark-green: var(--bohio-forest-dark);
  --r-mid-green: var(--bohio-forest);
  --r-light-green: var(--bohio-green);
  --r-muted-green: var(--bohio-chrome-dark);
  --r-text: var(--bohio-ink);
  --r-muted: var(--bohio-muted);
  --r-border-strong: var(--bohio-border);
}
.rentals-guide-button, .rentals-detail-button, .rental-apply-callout, .rental-promo-button {
  font-family: var(--bohio-font-family); font-weight: var(--bohio-weight-semibold);
}
.rental-apply-callout, .rental-promo-button, .rentals-guide-button.primary {
  background: var(--bohio-forest); border-color: var(--bohio-forest); color: #fff;
}
.rental-apply-callout:hover, .rental-apply-callout:focus-visible,
.rental-promo-button:hover, .rental-promo-button:focus-visible {
  background: var(--bohio-forest-dark); border-color: var(--bohio-forest-dark); color: #fff;
}
.rental-detail-terms-block.has-application-callout .rental-detail-block-head h2::after { background: var(--bohio-forest); }
body.operations-workspace .operations-sidebar { background: var(--bohio-forest-dark); }
body.operations-workspace .operations-sidebar nav a[aria-current="page"],
body.operations-workspace .landlord-section-tabs .nav-link.active {
  color: var(--bohio-forest-dark);
  background: var(--bohio-chrome);
  border-color: var(--bohio-border);
}
body.operations-workspace .operations-sidebar nav a:hover { background: var(--bohio-forest); color: #fff; }
body.operations-workspace .operations-summary a:hover,
body.operations-workspace .operations-summary a[aria-current="true"] {
  background: var(--bohio-green-soft); border-color: var(--bohio-forest); box-shadow: none;
}
body.operations-workspace .operations-summary span { font-weight: var(--bohio-weight-semibold); }
body.operations-workspace .operations-summary strong { color: var(--bohio-forest-dark); }
body.operations-workspace .operations-brand span { color: var(--bohio-chrome); }
body.operations-workspace .operations-company { border-color: var(--bohio-green); }
body.operations-workspace .operations-sidebar nav a { color: #fff; }
body.operations-workspace .operations-sidebar-footer,
body.operations-workspace .operations-company span { color: var(--bohio-chrome); }
body.operations-workspace > .navbar { background: var(--bohio-chrome) !important; }
body.operations-workspace > .navbar .navbar-brand,
body.operations-workspace > .navbar .text-white { color: var(--bohio-forest-dark) !important; }
body.operations-workspace .landlord-main-table thead th { color: var(--bohio-muted); background: var(--bohio-green-soft); }
body.operations-workspace .landlord-ticket-row:hover > td { background: var(--bohio-green-soft); --bs-table-bg: var(--bohio-green-soft); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--bohio-forest); outline-offset: 3px; }
body.operations-workspace a:focus-visible,
body.operations-workspace button:focus-visible { outline-color: var(--bohio-forest); }
body.operations-workspace .operations-sidebar a:focus-visible { outline-color: var(--bohio-chrome); }
/* The resident and contractor portals use the same readable inbox controls. */
body.tenant-dashboard-page .tenant-quick-message-toggle,
body.contractor-dashboard-page .contractor-quick-message-toggle,
body.contractor-dashboard-page .contractor-notification-summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; height: auto; min-height: 44px; padding: 9px 12px;
  color: var(--bohio-forest-dark); background: var(--bohio-green-soft);
  border: 1px solid var(--bohio-border); border-radius: 7px;
  font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
body.contractor-dashboard-page .contractor-notification-details { width: auto; flex: 0 0 auto; }
body.contractor-dashboard-page .contractor-notification-summary span:nth-child(2) { display: inline; }
body.contractor-dashboard-page .contractor-icon-actions { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
body.tenant-dashboard-page .tenant-quick-message-count,
body.contractor-dashboard-page .contractor-quick-message-count,
body.contractor-dashboard-page .contractor-notification-count {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; font-size: 12px;
  color: #fff; background: var(--bohio-forest); border-radius: 999px;
}
body [data-quick-message-count][hidden] { display: none; }
body.tenant-dashboard-page .tenant-dashboard-tab,
body.contractor-dashboard-page .contractor-dashboard-tab,
body.contractor-dashboard-page .contractor-appointments-tab {
  font-size: 16px; font-weight: 600; min-height: 44px;
}
body.operations-workspace .operations-sidebar nav a { font-size: 16px; line-height: 1.4; min-height: 48px; }
body.operations-workspace .landlord-inbox-actions { gap: 10px; flex-wrap: wrap; }
body.operations-workspace .landlord-inbox-actions .landlord-notification-details { width: auto; flex: 0 0 auto; }
body.operations-workspace .landlord-inbox-actions .landlord-icon-button,
body.operations-workspace .landlord-inbox-actions .landlord-notification-summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; height: auto; min-height: 44px; padding: 9px 12px;
  font-size: 14px; line-height: 1.4; font-weight: 600; white-space: nowrap;
}
body.operations-workspace .landlord-inbox-actions .landlord-message-count,
body.operations-workspace .landlord-inbox-actions .landlord-notification-count {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; font-size: 12px;
}
body.operations-workspace .landlord-inbox-actions .landlord-message-count[hidden] { display: none; }
@media (min-width: 992px) {
  body.operations-workspace { padding-left: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
  body.operations-workspace .operations-sidebar { position: static; width: auto; grid-column: 1; grid-row: 1 / 4; }
  body.operations-workspace > .navbar,
  body.operations-workspace > main,
  body.operations-workspace > .app-footer { grid-column: 2; min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body.operations-workspace .landlord-request-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.contractor-dashboard-page .contractor-dashboard-header { display: block; }
  body.contractor-dashboard-page .contractor-dashboard-header h2 { width: 100%; font-size: 24px; line-height: 1.25; }
  body.contractor-dashboard-page .contractor-icon-actions { margin: 12px 0 0; }
  body.tenant-dashboard-page .tenant-dashboard-tabs,
  body.contractor-dashboard-page .contractor-dashboard-tabs,
  body.contractor-dashboard-page .contractor-appointments-tabs { flex-wrap: wrap; gap: 8px; }
  body.tenant-dashboard-page .tenant-dashboard-tab,
  body.contractor-dashboard-page .contractor-dashboard-tab,
  body.contractor-dashboard-page .contractor-appointments-tab { font-size: 15px; white-space: normal; }
  body.tenant-dashboard-page .quick-message-panel,
  body.contractor-dashboard-page .quick-message-panel { position: relative; inset: auto; width: 100%; height: auto; max-height: none; margin: 12px 0; z-index: auto; box-shadow: none; flex-basis: 100%; }
  body.tenant-dashboard-page .quick-message-body,
  body.contractor-dashboard-page .quick-message-body { min-height: 0; flex: 0 1 auto; max-height: 65dvh; overflow-y: auto; }
  body.tenant-dashboard-page .quick-message-feed,
  body.contractor-dashboard-page .quick-message-feed { min-height: 0; max-height: 35dvh; }
  body.tenant-dashboard-page .quick-message-close,
  body.contractor-dashboard-page .quick-message-close { min-width: 44px; min-height: 44px; }
  /* No clipped navigation or horizontal-only access to destinations. */
  body.operations-workspace .operations-sidebar { display: block; padding: 8px 12px; }
  body.operations-workspace .operations-brand { display: none; }
  body.operations-workspace .operations-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; overflow: visible; }
  body.operations-workspace .operations-sidebar nav a { min-height: 44px; white-space: normal; font-size: 15px; padding: 8px 10px; }
  body.operations-workspace > .navbar { padding: 8px 0; margin-bottom: 12px !important; }
  body.operations-workspace .operations-summary { gap: 6px; margin-bottom: 12px; }
  body.operations-workspace .operations-summary a { padding: 9px 12px; gap: 2px; min-height: 68px; }
  body.operations-workspace .operations-summary small { display: none; }
  body.operations-workspace .operations-summary strong { font-size: 22px; }
  /* 16px form text prevents unwanted input zoom on iOS. */
  body input.form-control, body select.form-select, body textarea.form-control { font-size: 16px; }
  .btn, button.landlord-icon-button, .landlord-notification-summary,
  .landlord-section-tabs .nav-link, .rental-admin-tab,
  button.conversation-send-button, .people-subtabs .nav-link,
  .rentals-guide-button, .rental-apply-callout, .rental-promo-button, #calendar .fc-button {
    min-height: 44px;
  }
  button.landlord-icon-button, a.landlord-icon-button,
  .landlord-notification-summary, button.landlord-mobile-description-edit { min-width: 44px; min-height: 44px; }
  body.operations-workspace .landlord-icon-actions { flex-wrap: wrap; gap: 8px; }
  body.operations-workspace .landlord-toolbar { width: 100%; justify-content: flex-start; }
  body.operations-workspace .landlord-section-tabs { display: flex; flex-wrap: wrap; }
  body.operations-workspace .quick-message-panel { inset: 8px; width: auto; max-height: calc(100dvh - 16px); }
  body.operations-workspace .quick-message-body { min-height: 0; flex: 1; overflow-y: auto; }
  body.operations-workspace .quick-message-feed { min-height: 0; max-height: 35dvh; }
  body.operations-workspace .quick-message-close { min-width: 44px; min-height: 44px; }
  body.operations-workspace .quick-message-composer textarea { min-height: 80px; }
  .rentals-admin-shell, .rentals-admin-panel, .rentals-admin-head { min-width: 0; max-width: 100%; }
  .rentals-admin-head { flex-wrap: wrap; }
  .rental-admin-tabs { flex-wrap: wrap; }
  .rentals-admin-panel input, .rentals-admin-panel select, .rentals-admin-panel textarea { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* One control system across portals. Size variants preserve compact desktop rows. */
:root {
  --bohio-control-radius: 8px;
  --bohio-control-font: 14px;
  --bohio-control-weight: 600;
}
body :is(.btn, .rentals-guide-button, .rentals-detail-button, .rental-apply-callout, .rental-promo-button) {
  border-radius: var(--bohio-control-radius);
  font-family: var(--bohio-font-family);
  font-size: var(--bohio-control-font);
  font-weight: var(--bohio-control-weight);
  line-height: 1.4;
  box-shadow: none;
}
body :is(.btn.btn-primary, .btn.btn-success, .btn.btn-secondary, .btn.btn-warning, .btn.btn-info, .btn.btn-splash-primary, .rentals-guide-button.primary, .rentals-guide-button.secondary, .rental-apply-callout, .rental-promo-button) {
  color: #fff; background: var(--bohio-forest); border-color: var(--bohio-forest);
}
body :is(.btn.btn-primary, .btn.btn-success, .btn.btn-secondary, .btn.btn-warning, .btn.btn-info, .btn.btn-splash-primary, .rentals-guide-button.primary, .rentals-guide-button.secondary, .rental-apply-callout, .rental-promo-button):is(:hover, :active) {
  color: #fff; background: var(--bohio-forest-dark); border-color: var(--bohio-forest-dark);
}
body :is(.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-success, .btn.btn-outline-warning, .btn.btn-outline-info, .btn.btn-splash-outline, .rentals-guide-button:not(.primary):not(.secondary), .rentals-detail-button) {
  color: var(--bohio-forest); background: var(--bohio-panel); border: 1px solid var(--bohio-border);
}
body :is(.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-success, .btn.btn-outline-warning, .btn.btn-outline-info, .btn.btn-splash-outline, .rentals-guide-button:not(.primary):not(.secondary), .rentals-detail-button):is(:hover, :active) {
  color: var(--bohio-forest-dark); background: var(--bohio-green-soft); border-color: var(--bohio-forest);
}
body :is(.btn:disabled, .btn.disabled) { opacity: .55; box-shadow: none; }
/* All section selectors use the same filled tab, including nested sections. */
body:is(.operations-workspace, .tenant-dashboard-page, .contractor-dashboard-page) :is(.landlord-section-tabs .nav-link, .people-subtabs .nav-link, .tenant-dashboard-tab, .contractor-dashboard-tab, .contractor-appointments-tab, .rental-admin-tab) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 14px; font: 600 15px/1.4 var(--bohio-font-family);
  border: 1px solid var(--bohio-border); border-radius: var(--bohio-control-radius);
  background: var(--bohio-panel); color: var(--bohio-forest); box-shadow: none;
}
body:is(.operations-workspace, .tenant-dashboard-page, .contractor-dashboard-page) :is(.landlord-section-tabs .nav-link, .people-subtabs .nav-link, .tenant-dashboard-tab, .contractor-dashboard-tab, .contractor-appointments-tab, .rental-admin-tab):is(.active, [aria-selected="true"]) {
  color: var(--bohio-forest-dark); background: var(--bohio-chrome); border-color: var(--bohio-forest);
}
body:is(.operations-workspace, .tenant-dashboard-page, .contractor-dashboard-page) :is(.landlord-section-tabs .nav-link, .people-subtabs .nav-link, .tenant-dashboard-tab, .contractor-dashboard-tab, .contractor-appointments-tab, .rental-admin-tab):hover {
  color: var(--bohio-forest-dark); background: var(--bohio-green-soft); border-color: var(--bohio-forest);
}
body :is(.landlord-section-tabs, .people-subtabs, .tenant-dashboard-tabs, .contractor-dashboard-tabs, .contractor-appointments-tabs, .rental-admin-tabs) { gap: 8px; flex-wrap: wrap; border-bottom: 0; }
body :is(.landlord-icon-button, .landlord-notification-summary, .tenant-quick-message-toggle, .contractor-quick-message-toggle, .contractor-notification-summary) { border-radius: var(--bohio-control-radius); }
body :is(.btn, .rentals-guide-button, .rentals-detail-button, .rental-apply-callout, .rental-promo-button):focus-visible { outline: 3px solid var(--bohio-forest); outline-offset: 3px; box-shadow: none; }

/* Slate-blue brand: white chrome, cool neutral surfaces. Legacy color token
   names remain aliases so older templates inherit the selected brand. */
body > .navbar.bg-primary, body.splash-page .navbar.bg-primary,
body.operations-workspace > .navbar, body.rentals-page-body .navbar.bg-primary,
body .app-footer, body.splash-page .app-footer, body.rentals-page-body .app-footer { background: #fff !important; }
.rentals-shell, .rentals-admin-shell, .rental-confirm-dialog {
  --r-card: var(--bohio-green-soft); --r-border: var(--bohio-border);
  --r-watermark: var(--bohio-chrome);
}
.splash-left-panel {
  background: var(--bohio-forest-dark);
  color: var(--bohio-panel);
}
.splash-left-panel h1,
.splash-left-panel .splash-feature-item strong { color: var(--bohio-panel); }
.splash-left-panel .splash-kicker,
.splash-left-panel .splash-lead,
.splash-left-panel .splash-feature-item div span { color: var(--bohio-chrome); }
.splash-left-panel .splash-divider { background: var(--bohio-chrome-dark); }
.splash-left-panel .splash-feature-icon {
  background: var(--bohio-forest);
  color: var(--bohio-panel);
}
.splash-access-card {
  background: var(--bohio-panel);
  border-color: var(--bohio-border);
  box-shadow: 0 8px 24px var(--bohio-shadow);
}
.splash-right-panel .splash-partner-entry { border-color: var(--bohio-border); }
.splash-feature-icon, .splash-access-icon, .splash-access-card-icon { color: var(--bohio-forest); }
body .rental-detail-icon-card .rental-detail-icon { background: var(--bohio-forest); }

/* Portal actions share the primary palette in every interaction state. */
body.contractor-dashboard-page .contractor-filter-apply,
body.contractor-dashboard-page .contractor-detail-primary-action {
  color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--bohio-forest);
  --bs-btn-border-color: var(--bohio-forest);
  --bs-btn-hover-bg: var(--bohio-forest-dark);
  --bs-btn-hover-border-color: var(--bohio-forest-dark);
}
body:is(.tenant-dashboard-page, .contractor-dashboard-page) .btn:is(.btn-primary, .btn-success, .btn-secondary, .btn-warning, .btn-info):is(:hover, :focus-visible, :active) {
  background-color: var(--bohio-forest-dark);
  border-color: var(--bohio-forest-dark);
  color: #fff;
}

.tenant-completed-filter label { min-height: 44px; width: fit-content; cursor: pointer; padding-left: 0; }
.repair-timeline {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--bohio-border);
  border-radius: 12px;
  background: var(--bohio-panel);
}
.repair-timeline-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 20px; }
.repair-timeline-heading h3 { margin: 0; font-size: 18px; }
.repair-timeline-heading > span, .repair-timeline-note { color: var(--bohio-muted); font-size: 13px; }
.repair-timeline-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; gap: 12px; }
.repair-timeline-step { min-width: 0; position: relative; }
.repair-timeline-step:not(:last-child)::after { content: ''; position: absolute; left: 36px; right: 0; top: 15px; height: 2px; background: var(--bohio-border); }
.repair-timeline-step.is-done::after { background: var(--bohio-forest); }
.repair-timeline-marker { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--bohio-border); border-radius: 50%; background: var(--bohio-page); color: var(--bohio-muted); font-weight: 700; margin-bottom: 10px; }
.is-done > .repair-timeline-marker { background: var(--bohio-forest); border-color: var(--bohio-forest); color: #fff; }
.is-current > .repair-timeline-marker { background: var(--bohio-green-soft); border: 2px solid var(--bohio-forest); color: var(--bohio-forest); }
.repair-timeline-copy { display: grid; gap: 4px; overflow-wrap: anywhere; font-size: 14px; }
.repair-timeline-copy strong { color: var(--bohio-ink); }
.repair-timeline-state, .repair-timeline-copy time, .repair-timeline-date { color: var(--bohio-muted); font-size: 13px; }
.is-current .repair-timeline-state { color: var(--bohio-forest); font-weight: 700; }
.repair-timeline-note { margin: 16px 0 0; }
/* Tenant requests read as a summary, progress, next step, then optional details. */
.tenant-repair-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.tenant-repair-heading { min-width: 0; }
.tenant-repair-eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.tenant-repair-header h3 { font-size: 19px; line-height: 1.4; margin: 0 0 6px; overflow-wrap: anywhere; }
.tenant-repair-property { margin: 0; color: var(--bohio-muted); font-size: 14px; }
.tenant-repair-meta { display: flex; gap: 24px; font-size: 14px; flex-shrink: 0; }
.tenant-repair-meta > span { display: grid; gap: 4px; }
.tenant-repair-meta-label { color: var(--bohio-muted); font-size: 12px; }
.tenant-requests-table .tenant-ticket-id-cell { padding: 22px; }
.tenant-row-timeline > td { padding: 0 22px 18px; background: var(--bohio-panel); }
.tenant-row-timeline .repair-timeline { margin: 0; background: var(--bohio-panel); }
.tenant-repair-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bohio-border); font-size: 14px; }
.tenant-repair-next p { margin: 4px 0 0; color: var(--bohio-muted); }
.tenant-repair-next .btn { flex-shrink: 0; white-space: normal; }
.tenant-row-details .tenant-repair-details-hint { display: block; font-size: 12px; font-weight: 400; color: var(--bohio-muted); margin-top: 3px; }
.tenant-row-details > td { background: var(--bohio-panel); }
.tenant-row-details > td > details { margin: 0 22px 18px; border: 1px solid var(--bohio-border); border-radius: 10px; overflow: hidden; }
.tenant-row-details > td > details > summary { padding: 14px 16px; }
.tenant-row-details > td > details > summary:focus-visible { outline: 2px solid var(--bohio-forest); outline-offset: -3px; }
@media (max-width: 991px) {
  .tenant-repair-header { flex-direction: column; gap: 14px; }
  .tenant-repair-meta { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 767px) {
  .tenant-requests-table .tenant-ticket-id-cell { padding: 16px; min-width: 0; }
  .tenant-row-timeline, .tenant-row-timeline > td { display: block; width: 100%; }
  .tenant-row-timeline > td { padding: 0 12px 12px; }
  .tenant-row-details > td > details { margin: 0 12px 16px; }
  .tenant-repair-next { flex-direction: column; align-items: stretch; }
  .repair-timeline { padding: 16px; }
  .repair-timeline-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .repair-timeline-step { display: flex; gap: 12px; padding-bottom: 20px; }
  .repair-timeline-step:last-child { padding-bottom: 0; }
  .repair-timeline-marker { flex: 0 0 32px; margin: 0; }
  .repair-timeline-copy { padding-top: 4px; }
  .repair-timeline-step:not(:last-child)::after { left: 15px; right: auto; top: 36px; bottom: 4px; height: auto; width: 2px; }
}

/* Keep the mobile brand and logout controls readable. */
.operations-menu-toggle, .operations-menu-heading { display: none; }
.operations-menu-backdrop[hidden] { display: none; }
@media (max-width: 991px) {
  .navbar-brand { margin-right: 0; }
  .navbar-brand .brand-logo { flex-shrink: 0; }
  body.operations-workspace > .navbar .container:has(.app-nav-auth-actions) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  body.operations-workspace .navbar-brand { gap: 4px !important; }
  body.operations-workspace .navbar-brand span { font-size: 16px; white-space: nowrap; }
  body.operations-workspace .navbar-brand .brand-logo { width: 32px; height: 40px; }
  .operations-menu-toggle, .operations-menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    border: 1px solid var(--bohio-border); border-radius: 8px;
    background: var(--bohio-panel); color: var(--bohio-forest-dark);
  }
  body.operations-workspace .operations-sidebar { display: none; }
  body.operations-workspace.operations-menu-open { overflow: hidden; }
  body.operations-workspace.operations-menu-open .operations-sidebar {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    position: fixed; inset: 0 auto 0 0; z-index: 1080;
    width: min(320px, calc(100% - 32px)); height: 100dvh;
    padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  }
  .operations-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .operations-menu-close { font-size: 28px; }
  body.operations-workspace .operations-sidebar .operations-brand { display: none; }
  body.operations-workspace .operations-sidebar nav { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; gap: 8px; overflow: visible; }
  body.operations-workspace .operations-sidebar nav a { min-height: 48px; font-size: 16px; white-space: normal; }
  .operations-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1070; border: 0; background: rgba(36,55,70,.5); }
}

@media (max-width: 767px), (max-width: 991px) and (max-height: 500px) {
  /* Content must remain reachable on short screens and with larger text. */
  body.splash-page {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow-y: auto;
  }
  body.splash-page main.container {
    flex: 1 0 auto;
    overflow: visible;
    padding-block: 16px !important;
  }
  body.splash-page .navbar,
  body.splash-page .app-footer { flex-shrink: 0; position: static; }
  body.splash-page .splash-hero { height: auto; min-height: min-content; overflow: visible; }
  body.splash-page .splash-access-button { min-height: 44px; }
}

@media (max-width: 767px) {
  .agent-ticket-list { overflow: visible; }
  .agent-ticket-list table, .agent-ticket-list tbody { display: block; width: 100%; }
  .agent-ticket-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .agent-ticket-list tbody tr { display: block; margin-bottom: 16px; border: 1px solid var(--bohio-border); border-radius: 8px; overflow: hidden; }
  .agent-ticket-list td { display: block; overflow-wrap: anywhere; }
  .agent-ticket-list td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; color: var(--bohio-muted); font-size: 13px; }
  .ticket-detail-tab { min-height: 44px; }
  .bohio-date-picker-modal, .bohio-time-picker-modal { overflow-y: auto; }
}