/* Appointment diary report — Settings card + on-screen report view.
   The print document carries its own stylesheet (diary-report.js printCss). */
.dr-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-block-start: 14px; }
.dr-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.dr-field[hidden] { display: none; }
.dr-field label { font-size: 0.78125rem; color: var(--text-secondary); font-weight: 500; }
.dr-status { margin-block-start: 10px; font-size: 0.8125rem; color: var(--text-secondary); min-height: 1.2em; }
.dr-status-ok { color: var(--success-color); }
.dr-status-warn { color: var(--warning-color); }
.dr-status-err { color: var(--danger-color); }

.dr-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: color-mix(in srgb, var(--ink, #000) 45%, transparent);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
}
.dr-panel {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-lg);
  width: min(1280px, 100%); display: flex; flex-direction: column; overflow: hidden;
}
.dr-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-block-end: 1px solid var(--hairline); background: var(--bg-secondary);
}
.dr-toolbar h2 { margin: 0; font-size: 1rem; }
.dr-toolbar h2:focus { outline: none; }
.dr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dr-doc { overflow: auto; padding: 18px; font-size: 0.8125rem; }
.dr-doc .dr-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-block-end: 2px solid var(--text-primary); padding-block-end: 8px; margin-block-end: 10px; }
.dr-doc .dr-title { font-size: 1.0625rem; margin: 0 0 2px; }
.dr-doc .dr-clinic { color: var(--text-secondary); }
.dr-doc .dr-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 0.78125rem; }
.dr-doc .dr-meta div { display: contents; }
.dr-doc .dr-meta dt { color: var(--text-secondary); }
.dr-doc .dr-meta dd { margin: 0; font-weight: 600; }
.dr-doc .dr-totals { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; }
.dr-doc .dr-totals li { background: var(--bg-tertiary); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 12px; }
.dr-doc .dr-sandbox { color: var(--warning-color); font-weight: 600; }
.dr-doc .dr-section { margin-block-start: 18px; }
.dr-doc .dr-section h2 { font-size: 0.9375rem; margin: 0 0 6px; }
.dr-doc .dr-table { width: 100%; border-collapse: collapse; font-size: 0.78125rem; }
.dr-doc .dr-table caption { text-align: start; color: var(--text-soft); padding-block-end: 4px; }
.dr-doc .dr-table th, .dr-doc .dr-table td { border: 1px solid var(--hairline); padding: 5px 7px; text-align: start; vertical-align: top; }
.dr-doc .dr-table th { background: var(--bg-secondary); font-weight: 600; position: sticky; top: -18px; }
.dr-doc .dr-st-deleted td, .dr-doc .dr-op-delete td { background: var(--danger-light); }
.dr-doc .dr-st-cancelled td { color: var(--text-secondary); }
.dr-doc .dr-table bdi { white-space: nowrap; }
.dr-doc .dr-empty { text-align: center; color: var(--text-soft); }
.dr-doc .dr-foot { margin-block-start: 14px; color: var(--text-soft); font-size: 0.75rem; }
@media (max-width: 700px) {
  .dr-overlay { padding: 0; }
  .dr-panel { border-radius: 0; }
  .dr-field { min-width: 0; flex: 1 1 140px; }
}