/* ==========================================================================
   Slide-over record panel
   --------------------------------------------------------------------------
   Every create and edit in the application opens in this panel rather than on
   its own page, so the list you were working from stays on screen and in
   context behind it.

   Written by hand because app.css is a prebuilt Tailwind bundle with no build
   step in this repo — new utility classes would not exist. Colours reference
   the theme tokens app.css declares on :root rather than literal hex values,
   because the theme remaps the Tailwind scale (--color-orange-300 is the lime
   signal, --color-slate-300 is a warm grey). Hard-coding hexes here would
   quietly drift the moment the palette moves. Corners are square throughout,
   matching every component the application defines for itself.
   ========================================================================== */

:root {
  --so-width: 560px;
  --so-line: var(--color-slate-300);
  --so-line-soft: var(--color-slate-200);
  --so-ink: var(--color-slate-950);
  --so-ink-soft: var(--color-slate-700);
  --so-muted: var(--color-slate-500);
  --so-paper: var(--color-white);
  --so-sunken: var(--color-slate-100);
  --so-accent: var(--color-orange-300);
}

/* Overlay ---------------------------------------------------------------- */

.so-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17, 20, 17, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Panel ------------------------------------------------------------------ */

.so-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: var(--so-width);
  max-width: 100%;
  background: var(--so-paper);
  border-left: 1px solid var(--so-line);
  /* Elevation matched to the app's own overlays (0 18px 40px). */
  box-shadow: -18px 0 40px rgba(17, 20, 17, 0.14);
}

@media (max-width: 640px) {
  .so-panel { width: 100%; border-left: 0; }
}

/* Header ----------------------------------------------------------------- */

.so-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--so-line);
  background: var(--so-paper);
}

.so-head__text { min-width: 0; flex: 1; }

.so-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--so-muted);
}

.so-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--so-ink);
  line-height: 1.2;
}

.so-sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--so-muted);
}

.so-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: var(--so-sunken);
  color: var(--so-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.so-close:hover {
  color: var(--so-ink);
  background: var(--so-paper);
  border-color: var(--so-line);
}

/* Body ------------------------------------------------------------------- */

.so-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.4rem 1.5rem;
}

.so-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Numbered section, matching the reference implementation ---------------- */

.so-section + .so-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--so-line-soft);
}

.so-section__head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.so-section__number {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--so-line);
  background: var(--so-sunken);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--so-ink-soft);
}

.so-section__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--so-ink);
  letter-spacing: -0.01em;
}

.so-section__desc {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--so-muted);
}

/* Fields ----------------------------------------------------------------- */

.so-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 560px) {
  .so-grid { grid-template-columns: minmax(0, 1fr); }
}

.so-field--wide { grid-column: 1 / -1; }

.so-field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--so-ink-soft);
}

.so-required { color: var(--color-red-600); }

.so-field__help {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--so-muted);
}

.so-field__error {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-red-700, #b91c1c);
}

/* Inputs are styled by the application's StyledFormMixin, but selects and
   file inputs rendered by Django need the same treatment inside the panel. */
.so-body select,
.so-body input[type="file"],
.so-body input[type="date"],
.so-body input[type="datetime-local"] {
  width: 100%;
}

.so-empty {
  padding: 1.5rem;
  border: 1px dashed var(--so-line);
  background: var(--so-sunken);
  font-size: 0.8125rem;
  color: var(--so-muted);
  text-align: center;
}

/* Error banner ----------------------------------------------------------- */

.so-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-red-300);
  background: var(--color-red-50);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-red-800);
}
.so-alert svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }

/* Footer ----------------------------------------------------------------- */

.so-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem 1.05rem;
  border-top: 1px solid var(--so-line);
  background: var(--so-paper);
}

@media (max-width: 560px) {
  .so-foot > * { flex: 1; }
}

/* Loading ---------------------------------------------------------------- */

.so-loading {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  padding: 4rem 1.5rem;
  color: var(--so-muted);
  font-size: 0.8125rem;
}

.so-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--so-line);
  border-top-color: var(--so-ink-soft);
  border-radius: 50%;
  animation: so-spin 620ms linear infinite;
}

@keyframes so-spin { to { transform: rotate(360deg); } }

/* htmx marks the panel while a request is in flight. */
.so-panel.htmx-request .so-body { opacity: 0.55; transition: opacity 120ms ease; }

@media (prefers-reduced-motion: reduce) {
  .so-spinner { animation-duration: 2s; }
}