/* ══════════════════════════════════════════════════════════════════
   BUTTONS — one vocabulary. Same shape, same states, everywhere.
   Every variant has: default · hover · focus · active · disabled.
   ══════════════════════════════════════════════════════════════════ */

.primary-btn,
.google-btn,
.signout-btn,
.small-btn,
.danger-btn,
.addbtn,
.modal-actions button {
  font: inherit;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.primary-btn:disabled,
.google-btn:disabled,
.small-btn:disabled,
.addbtn:disabled,
.modal-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — the app's own action. Ink, not a language colour. */
.primary-btn,
.modal-actions .save {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md);
}
.primary-btn:hover,
.modal-actions .save:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.primary-btn:active,
.modal-actions .save:active {
  background: var(--ink);
}

/* Secondary — bordered surface. */
.google-btn,
.signout-btn,
.modal-actions .cancel {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}
.google-btn:hover,
.signout-btn:hover,
.modal-actions .cancel:hover {
  background: var(--surface-2);
  border-color: var(--muted);
}
.google-btn:active,
.signout-btn:active,
.modal-actions .cancel:active {
  background: var(--surface-3);
}

/* Quiet — inline actions inside panels and cards. */
.small-btn,
.addbtn {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
}
.small-btn:hover,
.addbtn:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* + Add Reservation / + Add room view — solid green (the --ok token) so the
   main action of each page stands out from the neutral chips beside it. */
#btn-add-reservation,
#btn-add-roomview {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
#btn-add-reservation:hover,
#btn-add-roomview:hover {
  background: #14532d; /* one step darker than --ok */
  border-color: #14532d;
  color: #fff;
}

/* Destructive. */
.danger-btn,
.modal-actions .delete {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--chi-ring);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
}
.danger-btn:hover,
.modal-actions .delete:hover {
  background: var(--danger-bg);
}

/* Row remove ✕ — always present so it is discoverable, but grey until
   you reach for it. A column of red crosses is noise, not information. */
.rmbtn {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-1);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}
.mcard li:hover .rmbtn,
.rmbtn:focus-visible {
  opacity: 1;
}
.rmbtn:hover {
  opacity: 1;
  color: var(--danger);
  background: var(--danger-bg);
}

/* ══════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ══════════════════════════════════════════════════════════════════ */

input,
select,
textarea {
  font: inherit;
  color: var(--ink-2);
}

::placeholder {
  color: var(--muted); /* 7:1 — not the washed-out default */
  opacity: 1;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

input[type="text"].name-input {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
input[type="text"].name-input:hover {
  border-color: var(--line);
  background: var(--surface-2);
}
input[type="text"].name-input:focus {
  border-color: var(--line-strong);
  background: var(--surface);
}

select.classpick {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md);
  background: var(--surface);
  min-width: 420px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
select.classpick:hover {
  border-color: var(--muted);
}