/* The right-hand Faraid case form: tabs, structured form (the heirs list and
   dialog are in heirs.css) */

.case-form__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  color: var(--color-text-muted);
  max-width: 32rem;
  margin-inline: auto;
}

/* No max-width/centering here on purpose: .main already has its own edge
   padding (see layout.css), and centering this on top of that left a
   visible extra gutter on both sides once the tree column started
   growing to fill available width -- the workspace should just fill
   .main's content box directly.

   height: 100% + align-items: stretch: .main has a definite height (it's
   a stretched flex item of .app-body, itself a fixed-height 1fr grid row
   -- see .app-shell in layout.css), so this fills exactly the space
   between the topbar and the footer, no more/less, and both columns
   below stretch to that same height automatically instead of each
   needing its own viewport calc(). */
.case-form-workspace {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
  height: 100%;
}

/* 40:60 split by default -- both columns share a flex-basis of 0 and grow
   in a 2:3 ratio, so they divide the workspace's width proportionally
   rather than the input column claiming a fixed rem width and the graph
   only getting whatever's left over. min-width still stops the input
   column collapsing too far on a narrower window, before the 960px
   breakpoint below takes over and stacks them.

   Stretched to the workspace's full height (see .case-form-workspace
   above) with its own overflow-y: once the waris list gets long, this
   column scrolls internally instead of growing taller than the viewport
   and pushing the footer down. */
.case-form-workspace__input {
  flex: 2 1 0;
  min-width: 22rem;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Transparent by default -- the thumb only appears on hover/focus
     (below), so the column reads as non-scrolling until the user
     actually reaches for it. */
  scrollbar-color: transparent transparent;
}

.case-form-workspace__input:hover,
.case-form-workspace__input:focus-within {
  scrollbar-color: var(--color-border) transparent;
}

/* Chromium/Safari have no scrollbar-color support (or ignore it); style
   the thumb directly and keep it transparent until hover/focus, same as
   the Firefox rule above. */
.case-form-workspace__input::-webkit-scrollbar {
  width: 8px;
}

.case-form-workspace__input::-webkit-scrollbar-track {
  background: transparent;
}

.case-form-workspace__input::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.case-form-workspace__input:hover::-webkit-scrollbar-thumb,
.case-form-workspace__input:focus-within::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

/* The other 60% -- the graph is the thing that actually benefits from
   more room to lay nodes out. Fills the workspace's full height via the
   stretch above (see family-tree.css for how that height turns into the
   stage's actual size) -- so it stays put regardless of how wide the
   input column next to it is. */
.case-form-workspace__tree {
  flex: 3 1 0;
  min-width: 0;
}

@media (max-width: 960px) {
  .case-form-workspace {
    flex-direction: column;
    height: auto;
  }

  .case-form-workspace__input {
    flex-basis: auto;
    width: 100%;
    max-height: none;
    overflow-y: visible;
  }

  .case-form-workspace__tree {
    width: 100%;
  }
}

/* No max-width here: the input column's own flex-basis (above) is what
   caps it at a compact width; this just fills whatever that column is. */
.case-form {
  width: 100%;
}

/* ---------- Steps ---------- */

/* One collapsible <details> per step; "Input" and "Calculation" exist
   today, more (review, results, ...) can join as sibling .case-form__step
   elements later. They form a single accordion -- opening one collapses
   the rest (see wireStepAccordion() in case-form.js) -- rather than each
   collapsing independently. */
.case-form__step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-block-end: 1rem;
}

.case-form__step-summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text);
  user-select: none;
  /* Pinned to the top of .case-form-workspace__input's own scrollport
     (see case-form.css's comment on that class -- it's the scroll
     container, not .main) so a long step body scrolls underneath the
     title instead of carrying it off-screen. Needs its own background --
     once stuck, this is floating over scrolled-past body content, not
     sharing the card's shared background by flow position anymore -- and
     a z-index so it paints above that content rather than tucking behind
     it. The border-block-end below (open state only) doubles as the
     visual separator between the pinned title and the content sliding
     past beneath it. */
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--color-surface);
  /* Without this, some engines repaint this element on the main thread
     on every scroll tick instead of compositing it as its own GPU layer
     -- visible as a slight jitter/wobble in the pinned title as the body
     scrolls underneath it, worse the longer that body is. Promoting it
     to its own layer up front is the standard fix for sticky-header
     jitter; translateZ(0) is the (harmless, no-op) push some engines
     still need alongside the will-change hint to actually promote it. */
  will-change: transform;
  transform: translateZ(0);
}

.case-form__step-summary::-webkit-details-marker {
  display: none;
}

.case-form__step-summary::marker {
  content: "";
}

/* Custom chevron instead of the native marker (hidden above) so it looks
   the same across browsers and can rotate on open/close. */
.case-form__step-summary::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.625rem;
  border-inline-end: 2px solid var(--color-text-muted);
  border-block-end: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.case-form__step:not([open]) .case-form__step-summary::before {
  transform: rotate(-45deg);
}

.case-form__step-summary:hover {
  background: var(--color-surface-alt);
}

.case-form__step-title {
  /* The chevron (::before, above) already carries its own spacing, so the
     title needs none of its own before the status badge that follows. */
  margin-inline-end: auto;
}

/* Step completion badge, rightmost in the summary row (see
   updateStepStatusBadge() in case-form.js). Says whether the step is
   done (its required input -- heirs, their details, dates of death -- is
   checked by the step's own gates and notes, not by this badge), so both
   states stay in the app's existing neutral/accent palette rather than
   reaching for a red/green traffic-light pair. */
.case-form__step-status {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.case-form__step-status--complete {
  color: var(--color-accent-2);
  border-color: var(--color-accent-2);
  background: var(--color-surface-alt);
}

.case-form__step-status--incomplete {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}

/* Step 2's badge while it's locked (see refreshStep2LockState() in
   case-form.js) -- visually identical to --incomplete above, kept as its
   own class rather than reused directly since "locked" (can't be opened
   yet) and "incomplete" (opened, but nothing entered) are different
   concepts that only happen to share a look today. */
.case-form__step-status--locked {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}

.case-form__step[open] .case-form__step-summary {
  border-block-end: 1px solid var(--color-border);
}

.case-form__step-body {
  padding: 1rem;
}

/* Step 2 (see buildStep2() in case-form.js) stays a normal, independently
   collapsible <details> once unlocked -- this only blocks *opening* it
   (the click listener on its own summary, see buildStep2()) and dims the
   summary so the lock reads visually, not just functionally. */
.case-form__step--locked > .case-form__step-summary {
  cursor: not-allowed;
  opacity: 0.6;
}

.case-form__step--locked > .case-form__step-summary:hover {
  background: var(--color-surface);
}

/* Row for a step's action buttons -- Next pushed to the far right via its
   own margin-inline-start: auto below, rather than e.g.
   justify-content: space-between here, so another button dropped in later
   still reads left-to-right in a single flex line. */
.case-form__step-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-start: 0.5rem;
}

.case-form__next-step {
  margin-inline-start: auto;
}

.case-form__next-step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Top right of Step 1's form: "Describe the case" (opens the free-text
   dialog, js/intake/dialog.js) -- a compact icon + label button, so the
   form itself starts right below it. */
.case-form__tools {
  display: flex;
  justify-content: flex-end;
  margin-block-end: 0.625rem;
}

.case-form__describe {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.case-form__describe svg {
  flex: 0 0 auto;
}

.case-form__section {
  /* min-width: 0 overrides a <fieldset> browser default of effectively
     min-width: min-content -- without it, a long <select> option (e.g.
     "Grandson (through a son)") sets this fieldset's minimum content
     width regardless of its flex parent's own width, pushing the whole
     input column wider than the space it was actually given. */
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem 1rem;
  margin: 0 0 1rem;
  background: var(--color-surface);
}

.case-form__section legend {
  padding-inline: 0.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block-end: 0.625rem;
}

.field__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.field input,
.field select {
  font: inherit;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* A date of death is mandatory (see death-dates.js): while one is empty,
   unreadable or in the future (the inputs carry `required` and `max`), it
   is outlined amber -- the same "needs your attention" colour as the note
   below that names who is missing a date. */
.field input[type="date"]:invalid {
  border-color: var(--color-node-incomplete-border);
}

/* Step 1's "still needed: ..." note (heir details, dates of death), above the Generate / Next row. */
.case-form__dates-missing {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-node-incomplete-border);
}

/* Step 1's line about the calculated results: editing clears them, or they
   were just cleared (see renderInputColumn()'s refreshResultsNote()). */
.case-form__results-note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn:hover {
  background: var(--color-border);
}

.btn--secondary {
  color: var(--color-accent);
}

/* The main action in its area, filled in the primary colour (e.g. the
   heirs list's "+ Add heir" / "Edit heirs", see heirs.css) -- --secondary's
   inverse: the colour --secondary uses for its text is the background here. */
.btn--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary);
  filter: brightness(0.92);
}

/* For a destructive confirmation's primary action (see sessions.js's
   confirm modal) -- filled, not just tinted text like --secondary, so the
   "this deletes something" weight is visible even before reading the
   label. */
.btn--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-node-label-on-fill);
}

.btn--danger:hover {
  background: var(--color-danger);
  filter: brightness(0.92);
}