/*
    Buttons, form controls, tables and dialogs, dressed the way the prototype dresses them.

    This is what makes the *generated* screens — the list pages and the edit dialogs Breezer builds
    per entity — look like the rest of the app without a bespoke page being written for each.

    Breezer styles these globally as `button:not(.inline)` and `input:not([type="color"])`, which is
    one element plus one pseudo-class. Everything here is prefixed with `body` so it outranks that
    whatever order the stylesheets happen to load in, rather than relying on load order.
*/
/* ── Buttons ── */
body button:not(.inline),
body .button:not(.inline) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 18px;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
body button:not(.inline, .secondary, .danger),
body .button:not(.inline, .secondary, .danger) {
  border: 1.5px solid var(--mint);
  background: var(--mint);
  color: var(--on-mint);
}
body button:not(.inline, .secondary, .danger):hover,
body .button:not(.inline, .secondary, .danger):hover {
  border-color: var(--mint-dark);
  background: var(--mint-dark);
  opacity: 1;
}
/* Secondary is the prototype's grey ghost: an outline, never a filled block. */
body button.secondary,
body .button.secondary {
  border: 1.5px solid var(--gray-300);
  background: none;
  color: var(--gray-700);
}
body button.secondary:hover,
body .button.secondary:hover {
  border-color: var(--mint);
  color: var(--mint-dark);
}
body button.danger,
body .button.danger {
  border: 1.5px solid var(--red);
  background: none;
  color: var(--red);
}
body button.danger:hover,
body .button.danger:hover {
  background: var(--red-light);
  opacity: 1;
}
body button:disabled,
body .button:disabled {
  border-color: var(--gray-200);
  background: var(--gray-200);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}
body button.secondary:disabled,
body button.danger:disabled {
  background: none;
  border-color: var(--gray-200);
}
body button:focus-visible,
body .button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mint-light);
}
/* ── Form controls ── */
body input:not([type="color"], [type="checkbox"], [type="radio"]),
body select,
body textarea {
  padding: 8px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--btn-radius);
  background: var(--white);
  color: var(--text-colour);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body input:not([type="color"], [type="checkbox"], [type="radio"]):focus,
body select:focus,
body textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-light);
}
body input:disabled,
body select:disabled,
body textarea:disabled {
  background: var(--gray-50);
  color: var(--mid);
  cursor: not-allowed;
}
body textarea {
  min-height: 80px;
  resize: vertical;
}
body input[type="checkbox"],
body input[type="radio"] {
  accent-color: var(--mint);
}
/* Breezer's own dropdown is a div, not a select, so it is named separately. */
body dropdown,
body dropdown-selected {
  border-radius: var(--btn-radius);
}
body .invalid input,
body .invalid textarea,
body .invalid dropdown-selected {
  border-color: var(--red);
}
/* A field's caption, the prototype's small-caps label. */
body form-field > label,
body editor-for > label,
body .form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
/* ── The generated list ──
   Not a table: Breezer lays it out as a CSS grid of custom elements, where the header and each row
   are `display: contents` and the cells are their children. So the cells are what gets styled, and
   the header's are picked out by which parent they came from. */
body list-items[item-type="grid"] {
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  box-shadow: none;
  background: var(--white);
  overflow: hidden;
}
body list-items[item-type="grid"] > list-items-grid-header > * {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--gray-50);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  white-space: nowrap;
}
body list-items[item-type="grid"] > list-item > * {
  padding: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
}
/* The row is display:contents, so there is no box to tint — the cells take the hover instead. */
body list-items[item-type="grid"] > list-item:hover > * {
  background: var(--background-highlight-colour);
}
body list-items[item-type="card"] > list-item {
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  box-shadow: none;
  background: var(--white);
}
/*
    The action row on a generated page. Breezer marks every one of them `secondary`, and each sits
    in its own wrapper, so there is no reliable way from CSS alone to say which one saves and which
    one deletes. They are left uniform rather than guessed at — a green Delete would be worse than
    three grey buttons. Telling them apart wants a generator-side change, not a stylesheet.
*/
body form-field {
  margin-bottom: var(--space-4);
}
/* Row actions are icons, so they keep the inline treatment rather than becoming green blocks. */
body list-item auto-actions button {
  padding: 5px;
  border: 0;
  background: none;
  color: var(--mint-dark);
}
body list-item auto-actions button:hover {
  background: none;
  color: var(--text-colour);
}
body list-filter {
  gap: var(--space-2);
  align-items: flex-end;
}
/* ── Dialogs ──
   Breezer uses Blazored.Modal; the prototype's dialog is softer-cornered with a lifted shadow and a
   ruled header and footer. */
body .blazored-modal {
  padding: 0;
  border-radius: var(--modal-radius, 16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  background: var(--white);
}
body .blazored-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}
body .blazored-modal-content {
  padding: 20px 24px;
}
body .blazored-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
}
body .blazored-modal-header > button.blazored-modal-close {
  top: 18px;
  right: 20px;
  padding: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--micro-radius);
  background: var(--gray-100);
  color: var(--gray-500);
  justify-content: center;
}
body .blazored-modal-header > button.blazored-modal-close:hover {
  background: var(--gray-200);
  color: var(--text-colour);
}