/* Per-project budget-line builder. Reuses shared primitives from base.css,
   projects.css (project-show, data-table, form-grid); only the genuinely new
   bits live here. */

/* Builder form: separate field groups (terms vs evidence/notes) need air
   between them — the shared .form-grid has no inter-grid margin. Scoped to
   this form so other forms are untouched. */
[data-controller~="budget-line-form"] .form-grid + .form-grid {
  margin-top: 1.25rem;
}

/* Evidence multi-select on the builder form */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 1rem;
  margin-top: 0.35rem;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-dark);
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Budget-lines index table */
.data-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-table .muted {
  color: var(--gray-mid);
}

/* Shown at the top of the budget-line form when the line is in use (has cost
   records or ToR line items): the billing method + budget shape selects are
   disabled, and this explains why. Amber = caution, not an error. */
.form-lock-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: 4px;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--warning-dark);
}

.form-lock-warning strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* The LERF-section guidance warning sits between the Notes grid and the
   checkbox grid, so it breaks the .form-grid + .form-grid gap rule above.
   Give the warning air from the Notes field when shown, and keep the checkbox
   grid's top gap in BOTH states (the sibling rule matches even when the
   warning is hidden, so the gap survives on non-travel lines). */
.form-lock-warning.section-warning {
  margin-top: 1.25rem;
}

[data-controller~="budget-line-form"] .section-warning + .form-grid {
  margin-top: 1.25rem;
}

/* A field greyed out because it doesn't apply to the chosen billing method —
   non-accountable lines disable everything but the label + billing method
   (INT-72). The disabled controls block input on their own; this just dims the
   labels/hints so the whole field reads as inactive. */
.form-field.field-disabled,
.form-checkbox.field-disabled {
  opacity: 0.5;
}

.evidence-list {
  font-size: 0.8125rem;
  color: var(--gray-dark);
}

/* Price-sheet import review: one card per parsed line, reusing the builder's
   .form-section / .form-grid / .form-field vocabulary so each line looks like
   the real new-budget-line form. */
.import-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.import-toolbar .checkbox-option {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-dark);
}

/* The intro sits clearly above the toolbar. */
.import-intro {
  margin-bottom: 0;
}

/* The cards are <fieldset>s; let their grid children shrink instead of forcing
   the default min-content width, and drop the native fieldset chrome. */
.import-card {
  min-width: 0;
  margin: 0 0 1.25rem;
}

.import-card .form-section-header h3 {
  display: flex;
  align-items: center;
}

/* Air between the terms grid and the required-evidence grid. The builder's
   equivalent rule is scoped to budget-line-form, so the import cards need
   their own. */
.import-card .form-grid + .form-grid {
  margin-top: 1.25rem;
}

/* The evidence label sits flush above its hint + checkbox grid. */
.import-card .checkbox-grid {
  margin-top: 0.5rem;
}

/* Teal info box — a callout for guidance that must stand out (e.g. the
   UTF-8 export requirement on the price-sheet import). Teal text on a
   teal-light fill with a teal accent bar, matching the app's brand. */
.info-box {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  color: var(--teal-dark);
  font-size: 0.85rem;
}

/* Sub-budget lines (the "Mixed" parent builder) */
.sub-lines .form-section-header {
  margin-bottom: 0.75rem;
}

.sub-line {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--surface-muted);
}

.sub-line-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.btn-text {
  background: none;
  border: none;
  padding: 0.25rem 0;
  font: inherit;
  color: var(--teal-dark);
  cursor: pointer;
}

.btn-text.danger {
  color: var(--danger);
}

/* Sub-budget-line rows read as nested under their parent in the index table. */
.data-table .sub-line-row {
  background: var(--surface-muted);
}

.data-table .sub-line-row td:first-child {
  padding-left: 1.5rem;
  color: var(--gray-mid);
}

/* "new" marker on a line introduced in an amendment */
.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--teal-light);
  color: var(--teal-dark);
}

/* Display-in-Cashbook is disabled for Margin Share lines (INT-128: no cost is
   ever booked to them, so the toggle would have no effect). Dim it to match the
   disabled checkbox so the whole field reads as inactive. */
.form-checkbox.is-disabled {
  opacity: 0.55;
}

/* The ToR column makes rows multi-line; top-align every cell so each row's
   content sits at the top of a tall row instead of floating in the middle.
   Selector deliberately matches `.data-table tbody td` (tables.css) specificity
   with an extra class, so it overrides the shared `vertical-align: middle`. */
.data-table.budget-lines-table tbody td {
  vertical-align: top;
}

/* Index ToR column (Option D): each ToR drawing on the line is a group — the
   ToR identifier as a heading, its drawing-down line items listed beneath. */
.bl-tor-group {
  margin-bottom: 0.4rem;
}

.bl-tor-group:last-child {
  margin-bottom: 0;
}

.bl-tor-id {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-dark);
}

.bl-tor-li {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray-mid);
  padding-left: 0.75rem;
}