/* The redesign's pattern (Pedro, 27/10/2026; docs/design-sistema.md), validated first on Equipa › Pessoas.
   Loaded last; new names only (vf-…), so no page changes until its template uses them. The colours and sizes are
   shell.css's tokens (the Finance look of 25/10/2026). */

/* Separators: words with a line under the current one — never buttons, so they do not look like filters or actions */
.shell .vf-tabs { display: flex; gap: 4px; margin: 0 0 12px; box-shadow: inset 0 -1px var(--border); overflow-x: auto; overflow-y: hidden; }
.shell .vf-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.shell .vf-tabs a:hover { color: var(--text); }
.shell .vf-tabs a[aria-current="page"] { border-bottom-color: var(--blue); color: var(--text); font-weight: 650; }
.shell .vf-count { padding: 1px 7px; border-radius: 20px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 600; }
.shell .vf-tabs a[aria-current="page"] .vf-count { background: var(--brand-soft); color: var(--blue); }

/* «+ Nova …» that opens its form in the page (details): the main button, the form in a card under it */
.shell .vf-add { margin: 0 0 12px; }
.shell .vf-add > summary { display: inline-flex; align-items: center; list-style: none; border-radius: var(--radius); cursor: pointer; }
.shell .vf-add > summary::-webkit-details-marker { display: none; }
.shell .vf-add > form.filters { align-items: flex-start; }  /* a help under one field never pushes the others down */
.shell .vf-add > form { margin-top: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }

/* A list: one card with its filters on top, the table and the count under it */
.shell .vf-list { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
.shell .vf-list > .table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.shell .vf-list-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

/* A list with its own title (two lists on one page): the title at the left, a short note at the right */
.shell .vf-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.shell .vf-list-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.shell .vf-list-head p { margin: 0; color: var(--muted); font-size: 13px; }
.shell .vf-list > .vf-note { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }

/* The filter bar: the search first and widest, the choices after it, then «Procurar» */
.shell .vf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.shell .vf-search { flex: 1 1 260px; min-width: 0; }
.shell .vf-search input { width: 100%; min-height: 38px; padding: 0 12px; }
.shell .vf-filter { display: flex; align-items: center; gap: 8px; }
.shell .vf-filter label { color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.shell .vf-filter select { min-height: 38px; }
.shell .vf-toolbar .button { min-height: 38px; }
.shell .vf-clear { color: var(--link); font-size: 13px; }

/* The table of a list: no coloured stripe on the lines (it said nothing here), the actions at the right */
.shell .vf-table tbody tr { border-left: 0; }
.shell .vf-table tbody th[scope="row"] small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 450; }
.shell .vf-table .vf-actions-col { width: 1%; white-space: nowrap; text-align: right; }
.shell .vf-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.shell .vf-row-actions .button { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* «⋯»: the line's other actions, by their names. Opened over the page by row-menu.js (never cut by the table);
   without JavaScript the list opens in its place */
.shell .vf-menu { position: relative; }
.shell .vf-menu > summary { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: 18px; line-height: 1; list-style: none; cursor: pointer; }
.shell .vf-menu > summary::-webkit-details-marker { display: none; }
.shell .vf-menu > summary:hover, .shell .vf-menu[open] > summary { background: var(--hover); }
.shell .vf-menu-panel { display: grid; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--float-shadow); text-align: left; }
.js .shell .vf-menu-panel { position: fixed; z-index: 60; }
.shell .vf-menu-panel a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--radius); color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.shell .vf-menu-panel form { margin: 0; }
.shell .vf-menu-panel button { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; }
.shell .vf-menu-panel a:hover, .shell .vf-menu-panel a:focus-visible, .shell .vf-menu-panel button:hover, .shell .vf-menu-panel button:focus-visible { background: var(--hover); }
.shell .vf-menu-panel button.is-danger { color: var(--bad); }
.shell .vf-menu-panel a.is-danger { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); color: var(--bad); }

/* A state in a line: a word, with the colour only as a help (never the colour alone) */
.shell .vf-state { display: inline-block; padding: 2px 8px; border-radius: 20px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.shell .vf-state.is-info { background: var(--brand-soft); color: var(--blue); }
.shell .vf-state.is-ok { background: var(--ok-bg, #e3f2e9); color: var(--good); }
.shell .vf-state.is-warn { background: var(--soft-warn, #fff4e0); color: var(--warn-text); }

/* Forms (after GOV.UK Frontend): the required mark, its note at the top, and what to correct when nothing was saved */
.shell .vf-required { color: var(--bad); font-weight: 700; }
.shell .vf-required-note { flex: 1 1 100%; grid-column: 1 / -1; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.shell .form-error .vf-error-list { margin: 6px 0 0; padding-left: 18px; }
.shell .form-error .vf-error-list a { color: var(--bad); font-weight: 600; }

/* Nothing to show: a sentence that says why and the way out, never an empty table */
.shell .vf-empty { padding: 32px 16px; color: var(--muted); text-align: center; }
.shell .vf-empty p { margin: 0 0 8px; }
.shell .vf-empty-title { color: var(--text); font-size: 16px; font-weight: 650; }

/* A table shown as blocks (fit.js): the actions need no label over them */
.shell .table-wrap.is-stacked .vf-table td.vf-actions-col::before { content: none; display: none; }
.shell .table-wrap.is-stacked .vf-state { flex: none; min-width: max-content; white-space: nowrap; }

/* Phone: the filters one under the other, at a finger's size; each person a block (fit.js), the actions across */
@media (max-width: 800px) {
  .shell .vf-toolbar { padding: 12px; }
  .shell .vf-search, .shell .vf-filter, .shell .vf-toolbar .button { flex: 1 1 100%; }
  .shell .vf-filter select { flex: 1; }
  .shell .vf-search input, .shell .vf-filter select, .shell .vf-toolbar .button { min-height: 44px; }
  .shell .vf-tabs a { min-height: 44px; }
  .shell .page-body .segmented a { min-height: 40px; }  /* the choices in a page (campaign, club…): a finger's size */
  /* The overviews' and the records' own controls (open a line, open all, a year, «+1», the chart's choice) */
  .shell .page-body :is(.fp-toggle, .fp-button, .ar-toggle, .sales-tap, .chip-link, select) { min-height: 40px; }
  .shell .page-body .sales-tap { min-width: 44px; }
  .shell .vf-table .vf-actions-col { width: auto; text-align: left; }
  .shell .vf-row-actions { display: flex; justify-content: flex-start; }
  .shell .vf-row-actions .button { flex: 1; min-height: 44px; }
  .shell .vf-menu > summary { width: 44px; height: 44px; }
  .shell .vf-menu-panel :is(a, button) { min-height: 44px; }
}