/* ──────────────────────────────────────────────────────────────────────────
   components.css — shared design primitives.

   Loaded by base.html so every page picks these up. Sub-layouts
   (manage/base.html, staff/base.html) used to redefine many of these
   inline; those duplicates have been removed in favor of this file.

   Token palette:
     #f5b800 / #e0a800   primary yellow / hover
     #5a3f00 / #ffd47a   warm-brown text (light / dark)
     #e8d9b5             warm-border
     #fffaf0 / #fff      page bg / panel bg
   ────────────────────────────────────────────────────────────────────────── */


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

/* Shared box for every variant. .button-link is the canonical class used
   across the portal; .button-primary / .button-secondary / .button-danger
   are semantic siblings.

   The `button.button-*` selectors below the variants reset the global
   `button { ... }` rule in base.html (which sets a big yellow filled
   default). Without this reset, <button class="button-primary"> would
   pick up margin-top: 1.25rem and padding: 0.7rem 1.4rem from that rule. */
.button-link,
.button-primary,
.button-secondary,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}

.button-link,
.button-secondary {
  background: #fff;
  color: #5a3f00;
  border-color: #e8d9b5;
}
.button-link:hover,
.button-secondary:hover {
  background: #fff7df;
  border-color: #f5d678;
}

.button-primary {
  background: #f5b800;
  color: #1a1a1a;
  border-color: #e0a800;
}
.button-primary:hover { background: #e0a800; }

.button-danger {
  background: #fff;
  color: #9f2a1d;
  border-color: #e9c4c0;
}
.button-danger:hover { background: #fbe9e7; border-color: #d99b94; }

/* Reset baseline so the global `button { ... }` rule in base.html doesn't
   override variant padding, font, margin, or background. */
button.button-link,
button.button-primary,
button.button-secondary,
button.button-danger {
  margin-top: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Legacy modifier kept for staff_edit_profile.html (`button-link.danger`). */
.button-link.danger { color: #9f2a1d; border-color: #e9c4c0; }
.button-link.danger:hover { background: #fbe9e7; border-color: #d99b94; }

@media (prefers-color-scheme: dark) {
  .button-link,
  .button-secondary {
    background: #2a2a2a;
    color: #ffd47a;
    border-color: #444;
  }
  .button-link:hover,
  .button-secondary:hover {
    background: #3a2a00;
    border-color: #5a3f00;
  }
  .button-danger {
    background: #2a2a2a;
    color: #ff9a8e;
    border-color: #5a3a35;
  }
  .button-danger:hover { background: #3a1f1c; }
}


/* ── Panel ──────────────────────────────────────────────────────────────── */

.panel {
  background: #fff;
  border: 1px solid #e8d9b5;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.panel h3 { margin: 0 0 0.65rem; color: #5a3f00; font-size: 1rem; }
@media (prefers-color-scheme: dark) {
  .panel { background: #2a2a2a; border-color: #444; }
  .panel h3 { color: #ffd47a; }
}


/* ── Badge ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  margin: 0 0.25rem 0.25rem 0;
  border-radius: 999px;
  background: #fff3cd;
  color: #5a3f00;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.ok    { background: #d9f4d6; color: #1a5a1a; }
.badge.warn  { background: #fff3cd; color: #8a5a00; }
.badge.alert,
.badge.block { background: #fbe9e7; color: #9f2a1d; }


/* ── Lists ──────────────────────────────────────────────────────────────── */

.compact-list { list-style: none; margin: 0; padding: 0; }
.compact-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #f0e0c0;
}
.compact-list li:last-child { border-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .compact-list li { border-color: #444; }
}


/* ── Field list (definition-list / key-value layout) ────────────────────── */

.field-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.field-list dt { color: #666; font-weight: 600; }
.field-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  .field-list dt { color: #bbb; }
}


/* ── Empty state ────────────────────────────────────────────────────────── */

.empty { color: #777; font-style: italic; margin: 0; }
@media (prefers-color-scheme: dark) {
  .empty { color: #aaa; }
}


/* ── Data table ─────────────────────────────────────────────────────────── */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.data-table th,
.data-table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  color: #5a3f00;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-table tr:last-child td { border-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .data-table th, .data-table td { border-color: #444; }
  .data-table th { color: #ffd47a; }
}


/* ── Form layout helpers ────────────────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
}
.form-grid label,
.stacked-form label { margin-top: 0; }

.stacked-form { display: grid; gap: 0.75rem; }

.inline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}


/* ── Form validation errors ─────────────────────────────────────────────────
   Used wherever a Django form renders {{ form.non_field_errors }} or
   {{ field.errors }}. Django emits .errorlist <ul> for field errors —
   we restyle it from the browser default bullet list into a compact
   inline message.

   .form-errors is the top-of-form summary container (rule explainer);
   .errorlist is the per-field inline message.
   .field-hint is a non-error helper note next to section headings. */
.form-errors {
  background: #fff3f3;
  border: 1px solid #f0b4b4;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 0.85rem;
  color: #7a1d1d;
  font-size: 0.92rem;
}
.form-errors p { margin: 0; }
.form-errors p + p { margin-top: 0.35rem; }

.errorlist {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: #b00020;
  font-size: 0.82rem;
  line-height: 1.3;
}
.errorlist li { margin: 0; }

/* When a field has an .errorlist sibling, redshift the input border so the
   user can see at-a-glance which inputs are flagged. Targets the common
   widget shapes Django renders (input, select, textarea). */
label:has(.errorlist) > input,
label:has(.errorlist) > select,
label:has(.errorlist) > textarea {
  border-color: #d04040;
  box-shadow: 0 0 0 1px #f0b4b4;
}

.field-hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: #7a5b1e;
  letter-spacing: 0;
  text-transform: none;
}

@media (prefers-color-scheme: dark) {
  .form-errors {
    background: #3a1717;
    border-color: #7a2828;
    color: #ffd0d0;
  }
  .errorlist { color: #ff9b9b; }
  label:has(.errorlist) > input,
  label:has(.errorlist) > select,
  label:has(.errorlist) > textarea {
    border-color: #e07070;
    box-shadow: 0 0 0 1px #5a2020;
  }
  .field-hint { color: #f5d678; }
}


/* ── Form success banner ────────────────────────────────────────────────────
   Counterpart to .form-errors. Used inside htmx-swapped form partials where
   Django's `messages` framework can't deliver feedback (no full reload).
   Render the element only when there's something to confirm; the CSS
   animation fades it out after a few seconds so it doesn't linger. */
.form-success {
  background: #eaf7e3;
  border: 1px solid #b9dfa3;
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  margin: 0 0 0.85rem;
  color: #1f5a1a;
  font-size: 0.92rem;
  animation: form-success-fade 4s ease-out forwards;
}
.form-success p { margin: 0; }
@keyframes form-success-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-color-scheme: dark) {
  .form-success {
    background: #1f3a1a;
    border-color: #3f6a35;
    color: #c8e8bd;
  }
}


/* ── htmx loading indicator ─────────────────────────────────────────────────
   Shared spinner used with `hx-indicator` on htmx-wired forms. Place an
   element with class="htmx-indicator" inside the submit-button area and
   point hx-indicator at it (or rely on the htmx default: htmx flips the
   `htmx-request` class on the requesting element and its hx-indicator
   target).

   htmx toggles class="htmx-request" on the element while a request is
   in flight; we use that to reveal the spinner. */
.htmx-indicator {
  display: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.5rem;
  border: 2px solid #e8d9b5;
  border-top-color: #5a3f00;
  border-radius: 50%;
  animation: htmx-indicator-spin 700ms linear infinite;
  vertical-align: middle;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }
@keyframes htmx-indicator-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
  .htmx-indicator {
    border-color: #5a4a28;
    border-top-color: #ffd47a;
  }
}

/* "Last used" marker on a sign-in option.

   A recognition cue for a returning user, not a recommendation and not a
   security signal: every route stays equally available whether or not it is
   tagged. Deliberately quiet, so it reads as a note about the option rather
   than as part of the option's label. */
.last-used {
  display: block;
  margin: 0 0 0.35rem;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #7a6a45;
}
.last-used::before {
  content: "✓ ";
  font-weight: 400;
}
@media (prefers-color-scheme: dark) {
  .last-used { color: #b9a26a; }
}

/* Secondary sign-in route, offered without competing with the primary one.
   Used where an option should stay reachable but is unlikely to work: leading
   with it sends people into a ceremony that fails. */
.auth-alt-action {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}


/* Multi-step form wizard */

.wizard-panel { margin-top: 1rem; }
.wizard-draft-banner {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  border: 2px solid #c47900;
  border-radius: 8px;
  background: #fff8e1;
  color: #5a3f00;
}
.wizard-draft-banner strong { text-transform: uppercase; letter-spacing: 0.03em; }
.wizard-progress-nav { margin: 0 0 1.5rem; }
.wizard-step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
}
.wizard-step-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #777;
}
.wizard-step-list li.current { color: #5a3f00; font-weight: 700; }
.wizard-step-list li.complete { color: #28621f; }
.wizard-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #c8b98f;
  border-radius: 999px;
  background: #fff;
}
.wizard-step-list li.current .wizard-step-number {
  border-color: #c47900;
  background: #f5b800;
  color: #1a1a1a;
}
.wizard-step-list li.complete .wizard-step-number {
  border-color: #6da360;
  background: #d9f4d6;
}
.wizard-progress-label {
  margin: 0 0 0.2rem;
  color: #5a3f00;
  font-size: 0.82rem;
  font-weight: 700;
}
.wizard-progress-nav progress {
  display: block;
  width: 100%;
  height: 0.65rem;
  accent-color: #c47900;
}
.wizard-save-status {
  min-height: 1.4rem;
  margin: 0 0 0.75rem;
  color: #28621f;
  font-size: 0.82rem;
}
.wizard-save-error { color: #9f2a1d; font-weight: 600; }
.wizard-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.wizard-discard-form {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e8d9b5;
}
.wizard-review-section {
  padding: 0.9rem 0;
  border-bottom: 1px solid #eee;
}
.wizard-review-section h4 { margin: 0 0 0.65rem; color: #5a3f00; }
.wizard-file-saved { color: #28621f; font-size: 0.85rem; font-weight: 600; }

@media (max-width: 640px) {
  .wizard-step-list { display: block; }
  .wizard-step-list li { display: none; }
  .wizard-step-list li.current { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .wizard-draft-banner {
    background: #3a2c00;
    border-color: #f5b800;
    color: #ffd47a;
  }
  .wizard-step-list li { color: #aaa; }
  .wizard-step-list li.current { color: #ffd47a; }
  .wizard-step-list li.complete { color: #a6d99a; }
  .wizard-step-number { background: #2a2a2a; border-color: #555; }
  .wizard-progress-label { color: #ffd47a; }
  .wizard-save-status, .wizard-file-saved { color: #a6d99a; }
  .wizard-save-error { color: #ff9a8e; }
  .wizard-discard-form, .wizard-review-section { border-color: #444; }
  .wizard-review-section h4 { color: #ffd47a; }
}