/* Fee Catalog. Ported from the approved collapsible fee-catalog screen: one card per pricing
   section, each card a header the reader can click shut, a county rate matrix pivoted into one row
   per county, the attorney roster, and a floating service picker.

   The approved mockup ships its own blue dashboard palette. That palette is not adopted here: the
   page sits inside the application shell next to Catalog Manager and the directories, so it is drawn
   in the application's --hcf-* tokens and only the measures, the layout and the interaction come
   from the mockup. Everything is scoped to .fee-catalog-page so no other screen can be repainted by
   loading this file. */

.fee-catalog-page {
  --fc-line: var(--hcf-line);
  --fc-pill: #eef3fa;
  --fc-pill-ink: var(--hcf-navy);
}

/* ------------------------------------------------------------------ page controls */
.fee-catalog-page .fc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fee-catalog-page .fc-actions .hcf-button-secondary { margin-right: 0; }
/* Sits where the Edit action does for a reader who may not edit, so the heading row keeps its
   shape and says why the action is missing rather than leaving a gap. */
.fee-catalog-page .fc-view-only {
  padding: 3px 10px; border-radius: 999px; background: var(--fc-pill); color: var(--hcf-text-meta);
  font-size: var(--hcf-text-label); font-weight: var(--hcf-weight-label);
}

/* ------------------------------------------------------------------ collapsible sections */
.fee-catalog-page .fc-section { margin: 0 0 14px; overflow: hidden; }
.fee-catalog-page .fc-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 0 14px 0 0; border-bottom: 1px solid var(--fc-line); background: #fff;
}
.fee-catalog-page .fc-section.is-closed .fc-section-head { border-bottom: 0; }
.fee-catalog-page .fc-section-toggle {
  flex: 1; min-width: 0; min-height: 54px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 0; background: transparent; color: var(--hcf-text);
  font-size: var(--hcf-text-body); font-weight: var(--hcf-weight-bold); text-align: left;
}
.fee-catalog-page .fc-section-toggle:hover { background: #f9fbfe; }
.fee-catalog-page .fc-caret {
  width: 18px; height: 18px; flex: none; fill: none; stroke: var(--hcf-navy); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease;
}
.fee-catalog-page .fc-section.is-closed .fc-caret { transform: rotate(-90deg); }
.fee-catalog-page .fc-count {
  padding: 3px 10px; border-radius: 999px; background: var(--fc-pill); color: var(--hcf-text-meta);
  font-size: var(--hcf-text-label); font-weight: var(--hcf-weight-label); white-space: nowrap;
}
.fee-catalog-page .fc-section-body { padding: 14px; }
.fee-catalog-page .fc-section-body .hcf-table-wrap { margin: 0; }
.fee-catalog-page .fc-section-body .hcf-table caption { display: none; }
.fee-catalog-page .fc-section-footer { display: flex; gap: 8px; padding-top: 12px; }
/* ------------------------------------------------------------------ table cells */
/* In-table controls keep the shared field's height, corners and border (app.css); only their inner
   spacing and text size are set here so a rate row stays compact. */
.fee-catalog-page .fc-cell,
.fee-catalog-page .fc-cell.form-control,
.fee-catalog-page .fc-cell.form-select {
  padding: 7px 10px !important; font-size: var(--hcf-text-table);
}
.fee-catalog-page .fc-cell-amount { max-width: 130px; text-align: right; }
.fee-catalog-page .fc-cell-unit { max-width: 130px; }
.fee-catalog-page .fc-amount { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.fee-catalog-page th.fc-numeric, .fee-catalog-page td.fc-numeric { text-align: right; }
.fee-catalog-page .fc-row-actions { white-space: nowrap; text-align: right; }
.fee-catalog-page .fc-row-actions .hcf-button-secondary { margin: 0; }
.fee-catalog-page code {
  display: inline-block; padding: 2px 7px; border: 1px solid var(--fc-line); border-radius: 6px;
  background: #f7f9fc; color: var(--hcf-text); font-size: var(--hcf-text-small); font-weight: var(--hcf-weight-bold);
}

/* ------------------------------------------------------------------ service picker */
.fee-catalog-page .fc-picker { position: fixed; right: 18px; bottom: 18px; z-index: 900; }
.fee-catalog-page .fc-picker-fab { box-shadow: var(--hcf-shadow); }
.fee-catalog-page .fc-picker-panel {
  width: min(440px, calc(100vw - 36px)); max-height: min(70vh, 620px); overflow: auto;
  margin-bottom: 10px; padding: 14px; border: 1px solid var(--fc-line); border-radius: 16px;
  background: #fff; box-shadow: var(--hcf-shadow);
}
.fee-catalog-page .fc-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fee-catalog-page .fc-picker-head strong { font-size: var(--hcf-text-body); }
.fee-catalog-page .fc-picker-filters { display: grid; gap: 8px; margin-bottom: 10px; }
.fee-catalog-page .fc-picker-list { border: 1px solid var(--fc-line); border-radius: 10px; overflow: hidden; }
.fee-catalog-page .fc-picker-row {
  width: 100%; display: grid; grid-template-columns: 34% minmax(0, 1fr) 24%; gap: 8px; align-items: center;
  padding: 9px 11px; border: 0; border-bottom: 1px solid var(--fc-line); background: #fff;
  color: var(--hcf-text); font-size: var(--hcf-text-small); text-align: left;
}
.fee-catalog-page .fc-picker-row:last-child { border-bottom: 0; }
.fee-catalog-page .fc-picker-row:hover { background: #f4f8fd; }
.fee-catalog-page .fc-picker-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fee-catalog-page .fc-picker-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--hcf-weight-bold); }
.fee-catalog-page .fc-picker-empty { padding: 14px 11px; color: var(--hcf-text-meta); font-size: var(--hcf-text-table); }
.fee-catalog-page .fc-picker-notice { margin: 8px 0 0; color: var(--hcf-text-meta); font-size: var(--hcf-text-column); }

@media (max-width: 900px) {
  .fee-catalog-page .fc-picker { right: 12px; bottom: 12px; }
  .fee-catalog-page .fc-cell-amount, .fee-catalog-page .fc-cell-unit { max-width: none; }
}