/* ===== REUSABLE COMPONENTS =====
   Buttons, forms, tables, messages, radio buttons,
   and other shared UI elements. */


/* ── Buttons ─────────────────────────────────────── */

button,
a[role="button"],
input[type="submit"],
input[type="button"] {
  background-color: var(--brand-green);
  border: none;
  color: #fff;
  font-size: .875rem;
  padding: .35rem .8rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  font-weight: 500;
  transition: background-color .2s;
  width: auto;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
button:hover,
a[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover { background-color: var(--brand-green-hover); }

/* Secondary button variant */
button.secondary,
a[role="button"].secondary {
  background-color: var(--brand-green-light);
  color: #111;
  border: 1px solid var(--brand-green);
}
button.secondary:hover,
a[role="button"].secondary:hover { background-color: var(--brand-green-light-hover); }

/* Extra sizing normalization */
button, a[role="button"] { margin: 0; font-size: .9rem; padding: .4rem .8rem; border-radius: 6px; }

/* Link-styled button (looks like an <a> tag) */
button.link-button,
button.link-button[type="submit"] {
  all: unset;
  cursor: pointer;
  color: var(--brand-green);
  text-decoration: none;
  transition: color .2s, text-decoration .2s;
  font: inherit;
}
button.link-button:hover,
button.link-button:focus {
  color: var(--brand-green-hover);
  text-decoration: underline;
}


/* ── Forms ────────────────────────────────────────── */

form { margin-top: .5rem; }
form label { font-weight: 500; font-size: .9rem; }
form input, form select, form textarea { font-size: .9rem; padding: .35rem .5rem; }
form input[type="checkbox"] { transform: scale(.9); }
form input[type="search"] { width: 400px; }
/* Normalise height for browser-styled input types so they match plain text inputs */
form select {
  flex-grow: 1;
  box-sizing: border-box;
  height: 2.15rem;
}

form input[type="date"],
form input[type="datetime-local"] {
  box-sizing: border-box;
  height: 2.1rem;      /* clamp UA-inflated height to match text inputs  */
  padding-block: .46rem; /* center text within the fixed height: (2.1rem - 2px - ~17px) / 2 */
}

.month-year-picker {
  display: inline-flex;
  gap: .4rem;
}
.month-year-picker select {
  flex-grow: 0;
  width: auto;
}


/* ── Tables ───────────────────────────────────────── */

table { font-size: .9rem; border-collapse: collapse; width: 100%; }
table th, table td { padding: .4rem .5rem; vertical-align: middle; }
table th { text-align: left; border-bottom: 2px solid #ddd; background-color: #fafafa; }
table tr:nth-child(even) { background-color: #f9f9f9; }
table tr:hover { background-color: #f1f1f1; }


/* ── Radio Buttons (brand green) ──────────────────── */

.radio-group {
  display: flex;
  gap: 1.25rem;
  margin-top: .35rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  font-weight: 500;
}

/* Base circle */
.radio-group input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--brand-green);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: 0.2s ease;
}

/* Centered inner dot when checked */
.radio-group input[type="radio"]:checked::after {
  content: "";
  width: 60%;
  height: 60%;
  background: var(--brand-green);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hover glow */
.radio-group input[type="radio"]:hover,
.radio-group input[type="radio"]:focus {
  box-shadow: 0 0 0 4px rgba(0,150,0,0.15);
}

/* ── Dog photo upload ─────────────────────────────── */
.dog-photo-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-green-light);
  color: #111;
  border: 1px solid var(--brand-green);
  font-size: .9rem;
  padding: .4rem .8rem;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color .2s;
  margin: 0;
}
.dog-photo-label:hover { background-color: var(--brand-green-light-hover); }

.dog-photo-check {
  color: var(--brand-green);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* ── Sortable table column headers ──────────────────── */
th a.sort-header {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

th a.sort-header:hover {
  text-decoration: underline;
}

th a.sort-header--active {
  font-weight: 700;
}

th .sort-arrow {
  font-size: .65em;
  margin-left: .15em;
}