/* ==========================================================================
   Case Record — detail layout for a single case / firm / complaint record
   Class names are shared across cases, complaints and firms views; keep stable.
   ========================================================================== */
.case-record {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-record--scrollable {
  max-height: 100%;
  overflow-y: auto;
}

.case-record__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
}

.case-record__grid {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  gap: var(--space-4);
}

.case-record__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-4);
}

.case-record__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-record__column--wide {
  flex: 2;
}

.case-record__column--narrow {
  flex: 1;
}

.case-record__column--info,
.case-record__column--dates,
.case-record__column--invoice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-record__column--invoice {
  flex: 1;
}

/* --- Section / block headers --- */
.case-record__button-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-record__button-header {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
}

.case-record__button-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
}

.case-record__button-row-spacer {
  flex: 1;
}

/* --- Detail grids --- */
.case-record__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.case-record__grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.case-record__details-grid-item {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  align-items: center;
  gap: var(--space-3);
}

.case-record__details-grid-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* A detail that sits under the two columns rather than in one of them, because
   its value is a list that wants the width — the case's products.

   Stacked rather than laid out as a key/value pair. Every other detail is a
   narrow label beside a short value, and borrowing that grid for a row of pills
   indented them by the width of the label column and left them floating in the
   middle of the card. The label goes above, the pills start at the card's own
   left edge, and they have the full width to wrap into. */
.case-record__details-grid-item--standalone {
  display: block;
  margin-top: var(--space-5);
}

.case-record__details-grid-item--standalone .case-record__attribute-title {
  display: block;
  margin-bottom: var(--space-2);
}

/* Explicit rather than inherited: the pill row is a flex container of its own
   (see components/case_type_pills) and this is the line that says it begins at
   the left. */
.case-record__details-grid-item--standalone .case-type-pills {
  justify-content: flex-start;
}

/* --- Key/value pairs --- */
.case-record__label,
.case-record__attribute-title {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
}

.case-record__label--narrow {
  white-space: nowrap;
}

.case-record__value,
.case-record__details-grid-item-content {
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

.case-record__value--danger,
.case-record__details-grid-item-content--danger {
  color: var(--color-danger);
  font-family: var(--font-family-bold);
}

/* --- Lists --- */
.case-record__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-record__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

/* --- Notes / free-text areas --- */
.case-record__text-area-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-record__text-area-title {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
}

.case-record__text-area {
  width: 100%;
  min-height: 100px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  padding: var(--space-3);
  font-size: var(--font-size-medium);
  color: var(--color-text);
  line-height: 1.6;
}

.case-record__text-area_full-border {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.case-record__textarea-wrapper {
  position: relative;
}

.case-record__textarea,
.case-record__textarea_full-border {
  width: 100%;
  min-height: 100px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  padding-bottom: var(--space-10);
  font-size: var(--font-size-medium);
  color: var(--color-text);
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.case-record__textarea:focus,
.case-record__textarea_full-border:focus {
  outline: none;
  border-color: var(--color-primary-green);
  background-color: var(--color-surface);
  box-shadow: var(--focus-ring);
}

.case-record__update-button {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background-color: var(--color-primary-green);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.case-record__update-button:hover {
  filter: brightness(0.95);
}

/* --- Recommendations panel (case show, under Quick Actions) --- */
.case-record__recommendations-hint {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.case-record__recommendations-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Recommendation removal warning modal list --- */
.case-record__recommendations-loss-list {
  margin: var(--space-2) 0 var(--space-4) var(--space-4);
  padding: 0;
  list-style: disc;
  color: var(--color-danger);
  font-family: var(--font-family-bold);
}

/* The running total above a record's Quick Actions — what a project has cost so
   far (see projects/show/_details). Reads as a figure rather than as a label:
   the number is the point, the word under it only says what of. */
.case-record__time-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.case-record__time-total-value {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-large);
  color: var(--color-text);
}

.case-record__time-total-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
}