/* ── Base ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0f172a;
  color: #f1f5f9;
}

/* ── Navigation ────────────────────────────────────────────────────────── */
.nav-link {
  padding: 0.4rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #94a3b8;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover { background-color: #1e293b; color: #f1f5f9; }
.nav-link.active { background-color: #312e81; color: #a5b4fc; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.card-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #6366f1;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  text-decoration: none;
}
.btn-primary:hover { background-color: #4f46e5; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-secondary:hover { border-color: #6366f1; color: #a5b4fc; }

.btn-test {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: transparent;
  border: 1px solid #4f46e5;
  color: #818cf8;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.btn-test:hover { background-color: #1e1b4b; }
.btn-test:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: transparent;
  border: 1px solid #dc2626;
  color: #f87171;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.btn-danger:hover { background-color: #450a0a; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 0.375rem;
}
.form-input {
  width: 100%;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  color: #f1f5f9;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.15s;
  outline: none;
}
.form-input:focus { border-color: #6366f1; }
.form-input::placeholder { color: #475569; }
select.form-input { cursor: pointer; }

/* Eye button for password fields */
.eye-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #475569;
  font-size: 1rem;
  padding: 0.25rem;
}
.eye-btn:hover { color: #94a3b8; }

/* ── Toggle Switch ──────────────────────────────────────────────────────── */
.toggle-label { display: flex; align-items: center; cursor: pointer; }
.toggle-checkbox { display: none; }
.toggle-switch {
  width: 2.5rem;
  height: 1.375rem;
  background-color: #334155;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  top: 0.1875rem;
  left: 0.1875rem;
  transition: transform 0.2s;
}
.toggle-checkbox:checked + .toggle-switch { background-color: #6366f1; }
.toggle-checkbox:checked + .toggle-switch::after { transform: translateX(1.125rem); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-btn:hover { color: #94a3b8; }
.tab-btn.active { color: #a5b4fc; border-bottom-color: #6366f1; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.urgency-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}
.urgency-low    { background-color: #14532d; color: #86efac; }
.urgency-normal { background-color: #1e3a5f; color: #93c5fd; }
.urgency-high   { background-color: #713f12; color: #fde68a; }
.urgency-critical { background-color: #7f1d1d; color: #fca5a5; }

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
}
.badge-success { background-color: #14532d; color: #86efac; }
.badge-error   { background-color: #7f1d1d; color: #fca5a5; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: auto;
  animation: toast-in 0.2s ease;
  min-width: 240px;
}
.toast-success { background-color: #14532d; color: #86efac; border: 1px solid #166534; }
.toast-error   { background-color: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b; }
.toast-info    { background-color: #1e3a5f; color: #93c5fd; border: 1px solid #1d4ed8; }

.flash-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.flash-success { background-color: #14532d; color: #86efac; }
.flash-error   { background-color: #7f1d1d; color: #fca5a5; }

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

/* ── Quick links ─────────────────────────────────────────────────────────── */
.quick-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #94a3b8;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  border: 1px solid #334155;
}
.quick-link:hover { background-color: #0f172a; color: #a5b4fc; border-color: #6366f1; }

/* ── Report content ─────────────────────────────────────────────────────── */
.report-content { line-height: 1.7; color: #cbd5e1; font-size: 0.9rem; }
.report-content strong { color: #f1f5f9; }