/*
 wlkns-dev-standards
 Component Theme: Watchtower
 Adapts standard components to the Sci-Fi/Dark aesthetic.
*/

/* =========================
   Inputs & Forms
   ========================= */
input, select, textarea {
  background: rgba(10, 14, 20, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-text) !important;
  transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 15px var(--wt-glow);
}

/* =========================
   Buttons
   ========================= */
.button {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-radius: 999px !important; /* Pill shape */
}

.button.primary {
  box-shadow: 0 0 15px var(--wt-glow);
  color: #081015; /* Dark text on bright accent */
}

.button.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.button.secondary:hover {
  border-color: var(--color-text);
  background: rgba(255,255,255,0.05);
}

.button.danger {
  box-shadow: 0 0 10px rgba(255, 94, 94, 0.4);
  color: #1b0d0d;
}

/* =========================
   Tables
   ========================= */
table {
  border-collapse: separate;
  border-spacing: 0 4px; /* Space between rows */
}

thead th {
  border-bottom: 1px solid var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--color-accent);
  background: transparent;
}

tbody tr {
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: scale(1.01);
}

tbody td {
  border: none;
}

tbody td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

tbody td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* =========================
   Alerts & Toasts
   ========================= */
.alert, .toast {
  background: rgba(10, 14, 20, 0.95);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.alert.success, .toast.success {
  border-color: var(--color-success);
  box-shadow: 0 0 10px rgba(0, 224, 143, 0.2);
  color: var(--color-text);
}

.alert.warning, .toast.warning {
  border-color: var(--color-warning);
  color: var(--color-text);
}

.alert.error, .toast.error {
  border-color: var(--color-error);
  box-shadow: 0 0 10px rgba(255, 94, 94, 0.2);
  color: var(--color-text);
}

/* =========================
   Pagination
   ========================= */
.pagination .page {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-text-muted);
}

.pagination .page.active {
  background: var(--color-accent);
  color: #081015;
  border-color: var(--color-accent);
  box-shadow: 0 0 10px var(--wt-glow);
}