/*
====================================================
DoseClock Buttons
Clinical, accessible action buttons
Package 2

Purpose:
- Centralise shared button styles.
- Keep buttons large, obvious, and hard to misclick.
- Avoid targeting .tile so homepage tile styling is not accidentally broken.
====================================================
*/

button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
input[type="button"] {
  min-height: var(--touch-target-min, 44px);
  border-radius: var(--radius-md, 12px);
  font-family:
    "Atkinson Hyperlegible",
    "Inter",
    "Segoe UI",
    sans-serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.005em;
  cursor: pointer;
}

button:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  filter: brightness(0.98);
}

button:disabled,
.btn:disabled,
.button:disabled,
button[aria-disabled="true"],
.btn[aria-disabled="true"],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.btn,
.button,
a.btn,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
}

a.btn:hover,
a.button:hover {
  text-decoration: none;
}

.btn-primary,
.button-primary,
button.primary,
.administer-btn,
.taken-btn,
.save-btn {
  background: var(--color-primary, var(--primary, #0a2d6f));
  border-color: var(--color-primary, var(--primary, #0a2d6f));
  color: var(--text-on-primary, #ffffff);
}

.btn-primary:hover,
.button-primary:hover,
button.primary:hover,
.administer-btn:hover,
.taken-btn:hover,
.save-btn:hover {
  background: var(--primary-hover, #061f4b);
  border-color: var(--primary-hover, #061f4b);
  color: var(--text-on-primary, #ffffff);
}

.btn-secondary,
.button-secondary,
.back-btn,
.home-btn,
.cancel-btn {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-strong, #bdcadb);
  color: var(--color-primary, var(--primary, #0a2d6f));
}

.btn-secondary:hover,
.button-secondary:hover,
.back-btn:hover,
.home-btn:hover,
.cancel-btn:hover {
  background: var(--surface-hover, #eef4fb);
  color: var(--primary-hover, #061f4b);
}

.btn-success,
.button-success,
.confirm-btn {
  background: var(--success, #177245);
  border-color: var(--success, #177245);
  color: #ffffff;
}

.btn-warning,
.button-warning,
.warning-btn {
  background: var(--warning, #9a6700);
  border-color: var(--warning, #9a6700);
  color: #ffffff;
}

.btn-danger,
.button-danger,
.refused-btn,
.delete-btn,
.remove-btn {
  background: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
  color: #ffffff;
}

.btn-danger:hover,
.button-danger:hover,
.refused-btn:hover,
.delete-btn:hover,
.remove-btn:hover {
  background: var(--danger-strong, #8f231b);
  border-color: var(--danger-strong, #8f231b);
  color: #ffffff;
}

.btn-row,
.button-row,
.action-row,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.btn-wide,
.button-wide,
.full-width-btn {
  width: 100%;
}

@media (max-width: 640px) {
  .btn,
  .button,
  a.btn,
  a.button,
  button[type="submit"] {
    width: 100%;
  }

  .btn-row,
  .button-row,
  .action-row,
  .form-actions {
    align-items: stretch;
  }
}