/* Calm Surface migration 11 -- all modal/dialog panels in one pass. Every modal
   panel shares the signature `rounded-2xl shadow-2xl` (the toast is rounded-xl,
   excluded; content panels are shadow-sm, excluded), so `.rounded-2xl.shadow-2xl`
   selects exactly the ~26 modal panels. Calms the panel, its fields and buttons;
   preserves any semantic colour inside (status chips out-specify these rules). */

.rounded-2xl.shadow-2xl {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-default);
  font-family: var(--font-family-sans);
  box-shadow: var(--elevation-3);
}
.rounded-2xl.shadow-2xl h1,
.rounded-2xl.shadow-2xl h2,
.rounded-2xl.shadow-2xl h3 {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
}
.rounded-2xl.shadow-2xl label { color: var(--color-text-muted); }

/* Fields */
.rounded-2xl.shadow-2xl input,
.rounded-2xl.shadow-2xl textarea,
.rounded-2xl.shadow-2xl select {
  background: var(--color-surface-1);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.rounded-2xl.shadow-2xl input:focus-visible,
.rounded-2xl.shadow-2xl textarea:focus-visible,
.rounded-2xl.shadow-2xl select:focus-visible { border-color: var(--color-border-focus); }
.rounded-2xl.shadow-2xl input::placeholder,
.rounded-2xl.shadow-2xl textarea::placeholder { color: var(--color-text-subtle); }

/* Buttons: calm secondary base; common primary fills -> calm accent; destructive -> error */
.rounded-2xl.shadow-2xl button {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-default);
  min-height: var(--size-touch-min);
}
.rounded-2xl.shadow-2xl button:hover { background: var(--color-surface-2); }
.rounded-2xl.shadow-2xl button[class*="bg-teal"],
.rounded-2xl.shadow-2xl button[class*="bg-emerald"],
.rounded-2xl.shadow-2xl button[class*="bg-blue"],
.rounded-2xl.shadow-2xl button[class*="bg-indigo"],
.rounded-2xl.shadow-2xl button[class*="bg-sky"] {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border-color: transparent;
}
.rounded-2xl.shadow-2xl button[class*="bg-teal"]:hover,
.rounded-2xl.shadow-2xl button[class*="bg-emerald"]:hover,
.rounded-2xl.shadow-2xl button[class*="bg-blue"]:hover,
.rounded-2xl.shadow-2xl button[class*="bg-indigo"]:hover,
.rounded-2xl.shadow-2xl button[class*="bg-sky"]:hover { background: var(--color-accent-primary-hover); }
.rounded-2xl.shadow-2xl button[class*="bg-rose"],
.rounded-2xl.shadow-2xl button[class*="bg-red"],
.rounded-2xl.shadow-2xl button[data-onclick*="elete"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

.rounded-2xl.shadow-2xl :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}