/* =====================================================================
   Reusable UI components. Pages should compose these, not restyle them.
   ===================================================================== */

/* ---------- Card ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.card-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-3); }
a.card { color: inherit; display: block; }
a.card:hover { border-color: var(--c-primary); text-decoration: none; }
a.card .card-title { color: var(--c-primary); }

.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat .label { font-size: var(--fs-sm); color: var(--c-text-muted); }
.stat .value { font-size: var(--fs-xl); font-weight: 700; }

.form-card { max-width: 880px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--c-surface-2); text-decoration: none; }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 700; color: var(--c-text-muted);
}
.field .hint { font-size: var(--fs-xs); color: var(--c-text-muted); }
.field .error { font-size: var(--fs-xs); color: var(--c-danger); min-height: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-size: var(--fs-sm);
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--c-danger); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }

.alert {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); border: 1px solid transparent;
}
.alert-danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
.alert-success { background: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success); }
.alert-info { background: var(--c-info-soft); color: var(--c-info); border-color: var(--c-info); }

/* ---------- Toolbar (filters above a table) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.toolbar .spacer { flex: 1; }
.toolbar .input, .toolbar .select { width: auto; min-width: 180px; flex: 1 1 180px; max-width: 320px; }

/* ---------- Table ---------- */
.table-wrap {
  overflow-x: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table th { background: var(--c-surface-2); font-weight: 600; color: var(--c-text-muted); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--c-surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }

.state-box {
  padding: var(--sp-6) var(--sp-4); text-align: center;
  color: var(--c-text-muted); font-size: var(--fs-sm);
}

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.pagination .pages { display: flex; gap: var(--sp-1); }

/* ---------- Badge ---------- */
.badge {
  display: inline-block; padding: 2px var(--sp-2);
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text-muted);
}
.badge-success { background: var(--c-success-soft); color: var(--c-success); }
.badge-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge-info { background: var(--c-info-soft); color: var(--c-info); }
.badge-primary { background: var(--c-primary-soft); color: var(--c-primary); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tabs a, .tabs button {
  padding: var(--sp-2) var(--sp-4); border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--c-text-muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs [aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }

/* ---------- Modal (native <dialog>) ---------- */
dialog.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-md);
}
dialog.modal::backdrop { background: var(--c-overlay); }
.modal-header, .modal-body, .modal-footer { padding: var(--sp-4) var(--sp-5); }
.modal-header { border-bottom: 1px solid var(--c-border); font-weight: 600; }
.modal-footer { border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ---------- Toast ---------- */
.toast-region {
  position: fixed; z-index: 100; right: var(--sp-4); bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--c-surface); border: 1px solid var(--c-border); border-left-width: 4px;
  box-shadow: var(--shadow-md); font-size: var(--fs-sm);
}
.toast-success { border-left-color: var(--c-success); }
.toast-error { border-left-color: var(--c-danger); }
.toast-info { border-left-color: var(--c-info); }

/* ---------- Spinner ---------- */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--c-border); border-top-color: var(--c-primary);
  animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.temp-password { font-size: var(--fs-md); padding: var(--sp-1) var(--sp-2); background: var(--c-surface-2); border-radius: var(--radius-sm); user-select: all; }