/* Complete the existing Onda pages after their original domain styles. */
.dash-body .card, .dash-body .panel,
.dash-body .calendar-section, .dash-body .reservations-section,
.dash-body .helpdesk-detail-card, .dash-body .dispatch-detail-card,
.dash-body .carrier-card, .dash-body .stat-card {
  background: var(--surface); color: var(--text); border-color: var(--line);
  border-radius: var(--r-lg); min-width: 0;
}
.dash-body .panel-header, .dash-body .calendar-header, .dash-body .room-card-header,
.dash-body .glpi-header, .dash-body .glpi-ticket-header, .dash-body .notice-panel {
  background: var(--bg-soft); color: var(--text); border-color: var(--line);
}
.dash-body .panel-title, .dash-body .section-title, .dash-body .hotel-title,
.dash-body .detail-value, .dash-body .room-name { color: var(--text); }
/* Category badges keep readable text on their colour (contrast at least 4.5:1, 07/10): dark on
   the bright colours of the dark theme, white on the deep ones of the light theme. */
.dash-body .detail-value.category-badge { color: var(--on-info); }
.dash-body .detail-label, .dash-body .detail-subvalue, .dash-body .room-details,
.dash-body .small, .dash-body .glpi-waiting-hint { color: var(--text-soft); }
.dash-body .dashboard, .dash-body .dashboard .container { width: 100%; min-width: 0; max-width: 100%; }
.dash-body .dashboard .container { margin: 0; padding-inline: 0; }
.dash-body .calendar-header, .dash-body .calendar-controls { flex-wrap: wrap; gap: var(--s-3); }
.dash-body .calendar-content, .dash-body .calendar-main-wrapper { min-width: 0; max-width: 100%; }
.dash-body .calendar-current-period { min-width: 0; }
/* Same width for every room name, so long names no longer push their row out of line. */
.dash-body .calendar-cell.room-label { flex: 0 0 172px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The days share the remaining width instead of leaving an empty strip on wide screens. */
.dash-body .calendar-cell:not(.room-label) { flex: 1 0 100px; }
.dash-body .dash-chip { max-width: 100%; flex-wrap: wrap; }
.dash-body .card { padding: var(--s-5); margin-bottom: var(--s-4); }
.dash-body .table-wrap { overflow-x: auto; max-width: 100%; }
.dash-body table { width: 100%; border-collapse: collapse; }
.dash-body th, .dash-body td { padding: var(--s-3); border-bottom: 1px solid var(--line); text-align: left; }
.dash-body th { color: var(--text-soft); font-size: var(--fs-12); }
.dash-body .table-wrap table { min-width: 560px; }
.dash-body .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-4); }
.dash-body .form-grid label { display: grid; align-content: start; gap: var(--s-2); }
.dash-body input, .dash-body select, .dash-body textarea {
  max-width: 100%; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: var(--s-3); font: inherit;
}
.dash-body .action-row, .dash-body .filter-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.dash-body .page-hero { margin-bottom: var(--s-5); }
.dash-body .page-title-block { max-width: 75ch; }
.dash-body .empty-panel, .dash-body .empty-state { padding: var(--s-5); color: var(--text-soft); }
.dash-body .payload-box, .dash-body pre, .dash-body code { overflow-wrap: anywhere; white-space: pre-wrap; }
.dash-body .audit-scroll { max-height: 520px; overflow-y: auto; }
.dash-body .hotel-live-metrics .metrics-row.details { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dash-body .hotel-header-bar, .dash-body .hotel-actions { flex-wrap: wrap; gap: var(--s-3); }
.dash-body .hotel-actions { min-width: 0; max-width: 100%; }
.dash-body .hotel-actions .btn { max-width: 100%; white-space: normal; }
.dash-body .detail-content { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .dash-body .card { padding: var(--s-4); }
  .dash-body .hotel-extras, .dash-body .helpdesk-extras-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-body .hotel-header-bar { align-items: flex-start; }
  .dash-body .hotel-live-metrics { min-width: 0; width: 100%; }
  .dash-body .calendar-main-wrapper { flex-direction: column; }
  .dash-body .calendar-sidebar { width: 100%; min-width: 0; }
  .dash-body .calendar-content, .dash-body .calendar-container { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .dash-body .helpdesk-details-row, .dash-body .dispatch-details-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .dash-body .helpdesk-details-row, .dash-body .dispatch-details-row { grid-template-columns: minmax(0, 1fr); }
}

.dash-body [data-review-audio] { display: block; width: 100%; margin-block: var(--s-4); }
.dash-body .conversation-item { padding: var(--s-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dash-body .item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

.dash-body .glpi-panel { --glpi-bg: var(--surface); --glpi-header: var(--bg-soft); color: var(--text); }
.dash-body .glpi-header { color: var(--text) !important; }
.dash-body .glpi-header .panel-title, .dash-body .glpi-waiting-text,
.dash-body .glpi-field span, .dash-body .glpi-ticket-number { color: var(--text); }
.dash-body .glpi-waiting-icon, .dash-body .glpi-field label { color: var(--text-soft); }