.dashboard-medical-services-card {
  width: 100%;
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
  border: var(--ui-border-card);
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-card);
  color: var(--ui-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--ui-shadow-card);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms ease, background-color 140ms ease;
}

.dashboard-metric-group.is-sales .dashboard-medical-services-card {
  grid-column: 1 / -1;
}

@media (hover: hover) and (pointer: fine) {
  .dashboard-medical-services-card:hover {
    border-color: var(--ui-accent-primary);
    background: var(--ui-accent-subtle);
  }
}

.dashboard-medical-services-card:active { transform: scale(0.98); }
.dashboard-medical-services-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ui-focus-ring); }

.dashboard-medical-services-card-head,
.dashboard-medical-services-card-values,
.dashboard-medical-services-card-action {
  display: flex;
  align-items: center;
}

.dashboard-medical-services-card-head {
  justify-content: space-between;
  gap: var(--ui-space-2);
}

.dashboard-medical-services-card-head > span:first-child,
.dashboard-medical-services-card.is-error > span:first-child {
  display: grid;
  gap: var(--ui-space-1);
}

.dashboard-medical-services-card-head strong,
.dashboard-medical-services-card.is-error strong { font-size: var(--ui-font-size-body); }

.dashboard-medical-services-card-head small,
.dashboard-medical-services-card.is-error small,
.dashboard-medical-services-card-values small,
.dashboard-medical-services-card-action {
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-caption);
}

.dashboard-medical-services-card-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-space-2);
}

.dashboard-medical-services-card-values > span {
  min-width: 0;
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-control);
  background: var(--ui-bg-subtle);
}

.dashboard-medical-services-card-values strong {
  overflow: hidden;
  font-size: var(--ui-font-size-card-title);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-medical-services-card-values strong.is-compact {
  font-size: var(--ui-font-size-body);
}

.dashboard-medical-services-card-values strong.is-extra-compact {
  font-size: calc(var(--ui-font-size-secondary) * var(--dashboard-medical-services-value-scale, 1));
}

.dashboard-medical-services-card-values > span.is-conversion,
.dashboard-medical-services-modal-kpis .ui-metric-card.is-conversion {
  border-color: var(--ui-status-success);
  background: var(--ui-status-success-subtle);
}

.dashboard-medical-services-card-values > span.is-conversion strong,
.dashboard-medical-services-modal-kpis .ui-metric-card.is-conversion strong { color: var(--ui-status-success); }

.dashboard-medical-services-card-action {
  justify-content: flex-end;
  gap: var(--ui-space-1);
  color: var(--ui-accent-hover);
  font-weight: var(--ui-font-weight-bold);
}

.dashboard-medical-services-card-action .ui-icon { width: var(--ui-icon-size-sm); height: var(--ui-icon-size-sm); }
.dashboard-medical-services-card.is-loading { cursor: progress; }
.dashboard-medical-services-card.is-loading .ui-skeleton-row { min-height: var(--ui-space-6); }
.dashboard-medical-services-card.is-error { align-items: center; grid-template-columns: minmax(0, 1fr) auto; }

.dashboard-medical-services-modal-card {
  width: min(var(--ui-dialog-analytics-width), calc(100vw - (var(--ui-space-8) * 2)));
  max-height: calc(100vh - (var(--ui-space-8) * 2));
}

.dashboard-medical-services-modal-content {
  display: grid;
  gap: var(--ui-space-4);
  overflow: auto;
}

.dashboard-medical-services-modal-loading { display: grid; gap: var(--ui-space-4); }
.dashboard-medical-services-modal-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-3); }
.dashboard-medical-services-modal-kpis .ui-metric-card { min-width: 0; }
.dashboard-medical-services-modal-kpis .ui-metric-card strong { font-size: clamp(var(--ui-font-size-section-title), 2.2vw, var(--ui-font-size-kpi)); }

.dashboard-medical-services-modal-summary { display: grid; gap: var(--ui-space-3); }
.dashboard-medical-services-quality { display: flex; gap: var(--ui-space-2); align-items: center; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-control); font-size: var(--ui-font-size-secondary); }
.dashboard-medical-services-quality span { color: var(--ui-text-muted); }
.dashboard-medical-services-quality.is-success { background: var(--ui-status-success-subtle); color: var(--ui-status-success); }
.dashboard-medical-services-quality.is-warning { background: var(--ui-status-warning-subtle); color: var(--ui-status-warning); }
.dashboard-medical-services-rule { padding: var(--ui-space-2) var(--ui-space-3); border-left: 3px solid var(--ui-accent-primary); color: var(--ui-text-muted); font-size: var(--ui-font-size-secondary); line-height: var(--ui-line-height-body); }

.dashboard-medical-services-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ui-space-2); }
.dashboard-medical-services-breakdown-card { display: grid; gap: var(--ui-space-1); padding: var(--ui-space-3); border: var(--ui-border-card); border-radius: var(--ui-radius-card); background: var(--ui-bg-subtle); }
.dashboard-medical-services-breakdown-card span,
.dashboard-medical-services-breakdown-card small { color: var(--ui-text-muted); font-size: var(--ui-font-size-caption); }
.dashboard-medical-services-breakdown-card strong { font-size: var(--ui-font-size-card-title); }
.dashboard-medical-services-breakdown-conversion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-1) var(--ui-space-2); align-items: end; margin-top: var(--ui-space-2); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-border); }
.dashboard-medical-services-breakdown-conversion strong { color: var(--ui-status-success); }
.dashboard-medical-services-breakdown-conversion small { grid-column: 1 / -1; }

.dashboard-medical-services-search { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: var(--ui-space-2); }
.dashboard-medical-services-search .ui-search-field { min-width: 0; }
.dashboard-medical-services-table-wrap { max-height: min(480px, 52dvh); }
.dashboard-medical-services-table { min-width: 1320px; }
.dashboard-medical-services-table .ui-icon-button { width: var(--ui-control-height-sm); min-width: var(--ui-control-height-sm); height: var(--ui-control-height-sm); padding: 0; }
.dashboard-medical-services-order,
.dashboard-medical-services-name,
.dashboard-medical-services-client,
.dashboard-medical-services-purchase { display: grid; gap: var(--ui-space-1); }
.dashboard-medical-services-order span,
.dashboard-medical-services-name small,
.dashboard-medical-services-client small,
.dashboard-medical-services-purchase span,
.dashboard-medical-services-purchase small,
.dashboard-medical-services-days,
.dashboard-medical-services-discount { color: var(--ui-text-muted); font-size: var(--ui-font-size-caption); }
.dashboard-medical-services-purchase { position: relative; padding-right: calc(var(--ui-control-height-sm) + var(--ui-space-2)); }
.dashboard-medical-services-purchase .ui-icon-button { position: absolute; top: 0; right: 0; width: var(--ui-control-height-sm); min-width: var(--ui-control-height-sm); height: var(--ui-control-height-sm); padding: 0; }
.dashboard-medical-services-days { display: block; margin-top: var(--ui-space-1); white-space: nowrap; }
.dashboard-medical-services-table .ui-status-badge { white-space: nowrap; }
.dashboard-medical-services-money { display: block; white-space: nowrap; }
.dashboard-medical-services-discount { display: block; white-space: nowrap; }
.dashboard-medical-services-pagination { margin-top: 0; }
body.has-dashboard-medical-services-modal { overflow: hidden; }

@media (max-width: 1500px) {
  .dashboard-medical-services-card-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .dashboard-medical-services-modal-card { width: calc(100vw - (var(--ui-space-4) * 2)); max-height: calc(100vh - (var(--ui-space-4) * 2)); }
}

@media (max-width: 720px) {
  .dashboard-medical-services-modal-kpis { grid-template-columns: 1fr; }
  .dashboard-medical-services-quality { align-items: flex-start; flex-direction: column; }
  .dashboard-medical-services-search { grid-template-columns: 1fr 1fr; }
  .dashboard-medical-services-search .ui-search-field { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-medical-services-card { transition: border-color 140ms ease, background-color 140ms ease; }
  .dashboard-medical-services-card:active { transform: none; }
}