/*
 * Hand-written component styles that go beyond Tailwind utilities.
 * Tailwind is loaded via the Play CDN (runtime, no build step), so @apply
 * is not available here -- these are plain CSS rules using the same
 * palette as the tailwind.config in partials/header.php (Wild-West/Sheriff-Theme).
 */

:root {
  --bg: #140f0a;
  --bg-soft: #1d160f;
  --card: #241b12;
  --border: rgba(255, 225, 170, 0.08);
  --gold: #c9962c;
  --rust: #9a4a2e;
}

* { scrollbar-color: #4a3a24 var(--bg); }

body { background-color: var(--bg); }

/* ---------- Icons (Google Material Symbols, see partials/header.php) ---------- */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  display: inline-flex;
  line-height: 1;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: -5px;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-sm { font-size: 16px; vertical-align: -3px; }
.icon-lg { font-size: 28px; vertical-align: -7px; }
.icon-xl { font-size: 48px; vertical-align: -12px; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- Layout building blocks ---------- */

.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
  border-color: rgba(201, 150, 44, .3);
  box-shadow: 0 10px 30px -12px rgba(201, 150, 44, .2);
}

a.card:hover { transform: translateY(-2px); }

.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  border-radius: .75rem;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, rgba(201,150,44,.18), rgba(154,74,46,.18));
}

/* ---------- Nav ---------- */

.nav-link {
  padding: .5rem .75rem;
  border-radius: .5rem;
  color: #cbb89a;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: #fff; background-color: rgba(255,255,255,.05); }
.nav-link-active { color: #fff; background: linear-gradient(90deg, rgba(201,150,44,.18), rgba(154,74,46,.18)); }

/* ---------- Buttons ---------- */

.btn-primary, .btn-secondary, .btn-ghost, .btn-action, .btn-action-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-weight: 600;
  border-radius: .65rem;
  padding: .55rem 1rem;
  font-size: .875rem;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:active, .btn-secondary:active, .btn-action:active { transform: scale(.97); }

.btn-primary {
  color: #1a1006;
  background-image: linear-gradient(135deg, var(--gold), var(--rust));
  box-shadow: 0 8px 20px -8px rgba(201,150,44,.55);
  border: none;
}
.btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(201,150,44,.65); }

.btn-secondary {
  color: #ead9bd;
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: rgba(201,150,44,.4); background-color: #241a10; }

.btn-ghost {
  color: #b8a688;
  background: transparent;
  border: 1px solid transparent;
  padding: .5rem .9rem;
}
.btn-ghost:hover { color: #fff; border-color: var(--border); }

.btn-action {
  color: #ead9bd;
  background-color: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: .4rem .7rem;
  font-size: .8rem;
}
.btn-action:hover { background-color: rgba(201,150,44,.15); color: #fff; border-color: rgba(201,150,44,.4); }

.btn-action-danger {
  color: #fca5a5;
  background-color: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.25);
  padding: .4rem .7rem;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: .65rem;
  cursor: pointer;
}
.btn-action-danger:hover { background-color: rgba(220,38,38,.18); color: #fecaca; }

/* ---------- Forms ---------- */

.label { display: block; font-size: .8rem; font-weight: 600; color: #b8a688; margin-bottom: .375rem; }

.input {
  width: 100%;
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .6rem .75rem;
  font-size: .9rem;
  color: #ead9bd;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,150,44,.2);
}

.checkbox {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: .3rem;
  accent-color: var(--gold);
}

/* ---------- Alerts ---------- */

.alert-error {
  background-color: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.3);
  color: #fca5a5;
  padding: .85rem 1rem;
  border-radius: .65rem;
  font-size: .875rem;
}

.alert-info {
  background-color: rgba(201,150,44,.08);
  border: 1px solid rgba(201,150,44,.3);
  color: #f3d9a4;
  padding: .85rem 1rem;
  border-radius: .65rem;
  font-size: .875rem;
}

/* ---------- Badges ---------- */

.badge-gold {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  background-color: rgba(201,150,44,.15);
  color: #f3d9a4;
  border: 1px solid rgba(201,150,44,.3);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-open { background-color: rgba(34,197,94,.12); color: #6ee7b7; border-color: rgba(34,197,94,.3); }
.badge-closed { background-color: rgba(220,38,38,.12); color: #fca5a5; border-color: rgba(220,38,38,.3); }

/* ---------- Sterne (Fahndungsstufen) ---------- */

.stars {
  font-size: 1.1rem;
  letter-spacing: .1rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(201,150,44,.35);
}

/* ---------- Animations ---------- */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fade-in .6s ease both; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up .7s ease both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast {
  animation: toast-in .25s ease both;
  border-radius: .75rem;
  padding: .8rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: #ead9bd;
  background-color: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.toast-success { border-color: rgba(34,197,94,.35); }
.toast-error { border-color: rgba(220,38,38,.35); }
.toast-warning { border-color: rgba(234,179,8,.35); }
.toast-info { border-color: rgba(201,150,44,.35); }
.toast-success .material-symbols-outlined { color: #34d399; }
.toast-error .material-symbols-outlined { color: #f87171; }
.toast-warning .material-symbols-outlined { color: #fbbf24; }
.toast-info .material-symbols-outlined { color: #dcae55; }