/* Small hand-written layer on top of Tailwind (loaded from CDN in base.html).
   Colors follow the product spec deck: navy #0B1F3A, blue #2563EB, sky #38BDF8. */

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #F8FAFC;
  color: #0B1F3A;
}

/* Django forms rendered with {{ form.as_div }} inside .form-fields */
.form-fields > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.form-fields label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0B1F3A;
}
.form-fields input:not([type="checkbox"]):not([type="file"]),
.form-fields select,
.form-fields textarea {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  background: #FFFFFF;
}
.form-fields input:focus,
.form-fields select:focus,
.form-fields textarea:focus {
  outline: 2px solid #2563EB;
  outline-offset: 0;
  border-color: #2563EB;
}
.form-fields input[type="file"] { font-size: 0.85rem; }
.form-fields .helptext { font-size: 0.75rem; color: #64748B; }
.errorlist { color: #B91C1C; font-size: 0.8rem; list-style: none; padding: 0; margin: 0; }

/* Multi-column form layout that collapses on phones */
.grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap: 16px;
}
.grid-fields > div:has(textarea) { grid-column: 1 / -1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: #2563EB; color: #FFFFFF; }
.btn-primary:hover { background: #1D4ED8; }
.btn-ghost { background: #FFFFFF; color: #0B1F3A; border-color: #CBD5E1; }
.btn-ghost:hover { background: #EAF4FF; }
.btn-danger-link { color: #B91C1C; font-size: 0.8rem; background: none; border: 0; cursor: pointer; }

.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
}

/* Login art: airflow lines drift, room nodes pulse. Off for reduced motion. */
.login-art .flow { stroke-dasharray: 14 10; animation: login-flow 6s linear infinite; }
.login-art .flow-2 { animation-duration: 8s; }
.login-art .flow-3 { animation-duration: 7s; }
.login-art .node { transform-box: fill-box; transform-origin: center; animation: login-pulse 3s ease-in-out infinite; }
.login-art .node-2 { animation-delay: 1s; }
.login-art .node-3 { animation-delay: 2s; }
@keyframes login-flow { to { stroke-dashoffset: -240; } }
@keyframes login-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .login-art .flow, .login-art .node { animation: none; }
}

/* Sidebar navigation */
.nav-group {
  margin: 18px 12px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}
.nav-group:first-child { margin-top: 6px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #CBD5E1;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav-link.is-active { background: #2563EB; color: #FFFFFF; font-weight: 600; }
.nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Button row inside a .form-fields form: side by side, not a stacked field */
.form-fields > div.form-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }