/* App-specific styles on top of the Pomar design system (static/pomar/pomar.css).
   Use Pomar tokens (var(--label), var(--space-3), ...) instead of literal values. */

.brand { color: var(--label); }
.brand:hover { text-decoration: none; }
.pm-sidebar-footer .user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Theme button: a moon in the light theme, a sun in the dark one. */
.theme-toggle .theme-light, [data-theme="dark"] .theme-toggle .theme-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-light { display: inline-block; }
.pm-toolbar-end { gap: var(--space-2); }
.pm-toolbar-end form { display: flex; align-items: center; gap: var(--space-2); }

/* Page sections */
.section-title { margin: 0 0 calc(var(--space-3) * -1); }
.notes { color: var(--label-secondary); }
.empty { text-align: center; color: var(--label-secondary); }
.helptext { display: block; margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--label-secondary); }
.model-label { color: var(--label-secondary); font-size: 0.75rem; }
.field-list { margin: 0; padding: 0; list-style: none; }
.date, .nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, tfoot th.num { white-space: nowrap; }
.pm-content > .pm-callout { align-items: center; }

/* Figures (dl.stats): one Pomar card per figure, value in the stat style. */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0; }
.stats > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--bg-content); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.stats dt { font-size: 0.75rem; color: var(--label-secondary); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--label); }
.stats small { font-size: 0.6875rem; color: var(--label-secondary); }
.stats .wide { grid-column: span 2; }
.stats .highlight dt { color: var(--label); font-weight: 600; }
.stats .highlight { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--accent-soft); }
.stats-group { display: flex; flex-direction: column; gap: var(--space-2); }
.stats-group > h2 { margin: 0 0 0 var(--space-1); font-size: 0.8125rem; font-weight: 700; color: var(--label); }
.ranking { margin: var(--space-1) 0 0; padding-left: 1.4em; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.ranking li::marker { color: var(--label-secondary); }
.ranking li strong { float: right; margin-left: var(--space-2); font-weight: 600; }
.ranking li span { display: block; }
.ranking-empty { color: var(--label-tertiary); }

/* Collapsed explanations of how figures are computed. */
.explain { color: var(--label-secondary); font-size: 0.75rem; }
.explain summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.explain p { margin: var(--space-1-5) 0 0; max-width: 72ch; line-height: 1.45; }

/* Filter bar above list tables. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filters .pm-search { flex: 0 1 16rem; }
.filters > .pm-input { width: auto; }
.filters .pm-check { align-items: center; margin-left: var(--space-2); }
.filters .clear { margin-left: auto; }

/* List tables (table.list.pm-table): wrapped in .list-wrap, which clips instead of scrolling
   so the header stays visible under the toolbar while the page scrolls. */
.list-wrap { background: var(--bg-content); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: clip; }
@media (max-width: 47.5rem) { .list-wrap { overflow-x: auto; } }
table.list thead th { top: var(--toolbar-h); }
.pm-table.list td, .pm-content .pm-table td { white-space: normal; height: auto; padding-block: var(--space-2); vertical-align: top; }
.pm-table td.num, .pm-table td.date, .pm-table td.nowrap { white-space: nowrap; }
.pm-table th.num, .pm-table td.num { text-align: right; }
.pm-table tfoot th { height: 2rem; padding: 0 var(--space-3); font-weight: 600; text-align: left; border-top: 1px solid var(--separator); }
.pm-table tfoot th.num { text-align: right; }
table.list tr:has(.row-link) { cursor: pointer; }
table.list .row-link { color: var(--label); font-weight: 500; }
table.list .row-link:hover { color: var(--accent-text); }
table.list .row-link:focus-visible { outline: none; }
table.list tr:has(.row-link:focus-visible) > td { background: var(--accent-soft); }
/* Month title rows in the order and movement lists: small and muted, so the rows stay in front. */
table.list tr.month-row th { height: 1.5rem; padding: var(--space-1) var(--space-3); background: var(--bg-window); font-size: 0.6875rem; font-weight: 600; color: var(--label-secondary); border-bottom: 1px solid var(--separator); vertical-align: middle; position: static; }
table.list tr.month-row th.num { font-weight: 400; white-space: nowrap; }
table.list tr.month-row th.in-out span { display: block; }  /* income above outflow */
/* The row just saved (the form returns to the list with #<kind>-<pk>): below the sticky header, briefly highlighted. */
table.list tbody tr { scroll-margin-top: calc(var(--toolbar-h) + 2rem); }
table.list tbody tr:target > td { animation: saved-row 2.5s ease-out; }
@keyframes saved-row { from { background-color: var(--accent-soft); } }
/* Rows missing information: a warning tag reading "Falta: ...". */
.missing { display: flex; width: fit-content; margin-top: var(--space-1); }
tr.inactive td, tr.inactive a, tr.inactive .row-link { color: var(--label-tertiary); }
tr.out-of-stock td.num { color: var(--label-tertiary); }
tr.negative-stock td { background: var(--danger-soft); }
tr.negative-stock td.stock { color: var(--danger-text); font-weight: 600; }
tr.auto td { background: var(--fill-quaternary); }
.pm-table .pm-tag { vertical-align: 1px; }
.pm-tag + .pm-tag { margin-left: var(--space-1); }
th a.sort { color: inherit; text-decoration: none; }
th a.sort.active, th a.sort:hover { color: var(--label); }
.pagination { display: flex; gap: var(--space-4); justify-content: center; align-items: center; color: var(--label-secondary); }

/* Order status tags: waiting (orange), in progress (blue), done (green), undone (red). */
.status-pending, .status-awaiting_pickup { color: var(--warning-text); background: var(--warning-soft); }
.status-paid, .status-shipped { color: var(--accent-text); background: var(--accent-soft); }
.status-delivered { color: var(--success-text); background: var(--success-soft); }
.status-canceled, .status-returned { color: var(--danger-text); background: var(--danger-soft); }
.kind-donation { color: var(--success-text); background: var(--success-soft); }
.kind-gift { color: var(--accent-text); background: var(--accent-soft); }
/* Net value under an order's total, when shipping or fees reduce it. */
td.num .net { display: block; font-size: 0.6875rem; color: var(--label-secondary); }
/* Shipping line under the order status; the tracking code copies on click (static/copy_button.js). */
.shipping { display: block; margin-top: var(--space-1); font-size: 0.75rem; color: var(--label-secondary); white-space: nowrap; }
button.copy { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline dotted; cursor: copy; }
button.copy:hover { color: var(--accent-text); }
button.copy.copied::after { content: ' ✓ copiado'; color: var(--success-text); }

/* Cash movements */
.cash-in { color: var(--success-text); }
.cash-out { color: var(--danger-text); }
.stats dd.cash-in { color: var(--success-text); }
.stats dd.cash-out { color: var(--danger-text); }
td.balance { color: var(--label-secondary); }
td.balance.cash-out { color: var(--danger-text); }

/* Form pages: Pomar settings form (pm-form), optional sticky side column (.form-aside). */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--space-6); align-items: start; }
.form-layout .pm-form { max-width: none; }
.pm-form.wide { max-width: 52rem; }
.pm-form-group > legend.pm-form-group-title { margin-bottom: var(--space-1-5); padding: 0; }
.pm-form-group > .helptext { margin: 0 var(--space-3); }
.pm-form-row > label, .pm-form-row > .pm-form-label { flex: 0 1 12rem; }
.pm-form-control { flex: 1 1 18rem; flex-wrap: wrap; }
.pm-form-row--stacked > label, .pm-form-row--stacked > .pm-form-label, .pm-form-row--stacked > .pm-form-control { flex: none; }
.pm-form-control > .pm-error { flex-basis: 100%; justify-content: flex-end; }
.pm-form-row--stacked .pm-form-control > .pm-error { justify-content: flex-start; }
/* Narrow forms: Pomar stacks every row (label above control), so the side-by-side sizes above must go. */
@container (max-width: 30rem) {
  .pm-form-row:not(.pm-form-row--inline) > label, .pm-form-row:not(.pm-form-row--inline) > .pm-form-label { flex: none; }
  .pm-form-row:not(.pm-form-row--inline) .pm-form-control > .pm-error { justify-content: flex-start; }
}
.pm-form-control > .person-search { flex: 1; }
.pm-form-group > .pm-table-wrap { margin-bottom: var(--space-1); }
.form-aside { position: sticky; top: calc(var(--toolbar-h) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); }
.form-aside .pm-form-actions { flex-wrap: wrap; }
.pm-form-actions .delete { margin-right: auto; }
/* Fields switched off by static/conditional_fields.js; the hint says why. */
.disabled-hint { display: none; }
.is-disabled .disabled-hint { display: block; font-style: italic; }
fieldset.is-disabled .field .disabled-hint { display: none; }  /* the group already says why */
.is-disabled > label, .is-disabled > .pm-form-label, .is-disabled > legend { color: var(--label-tertiary); }
.pm-select:disabled { cursor: not-allowed; }
/* Money inputs: "R$" inside the field, value aligned right. */
.money-input { position: relative; display: flex; align-items: center; flex: 0 1 10rem; }
.money-input > span { position: absolute; left: var(--space-2); font-size: 0.75rem; color: var(--label-secondary); pointer-events: none; }
.money-input > .pm-input { width: 100%; padding-left: 1.75rem; text-align: right; }
.pm-form-control > .pm-input[type="number"], .pm-form-control > .pm-input[type="date"] { flex: 0 1 10rem; }
/* Item rows (formset tables) */
table.items td { padding-block: var(--space-1-5); vertical-align: middle; }
table.items .pm-select { width: 100%; min-width: 11rem; }
table.items .pm-input[type="number"] { width: 6.5rem; text-align: right; }
table.items .money-input { width: 7.5rem; }
table.items td.num { vertical-align: middle; }
th.remove, td.remove { width: 4rem; text-align: center; }
/* Order and book summaries in the side column */
.summary { margin: 0; }
.summary div { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--separator); }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--label-secondary); }
.summary dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary .cost dd { color: var(--danger-text); }
.summary .total { font-weight: 700; }
.summary .total dt { color: var(--label); }
/* Person search results */
.person-search { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.person-search-results { position: absolute; z-index: var(--z-menu); top: var(--control-md); left: 0; right: 0; margin: var(--space-1) 0 0; padding: var(--space-1); list-style: none; background: var(--bg-material); -webkit-backdrop-filter: var(--pm-blur); backdrop-filter: var(--pm-blur); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); max-height: 20rem; overflow-y: auto; }
.person-search-results li { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-xs); }
.person-search-results li small { display: block; color: var(--label-secondary); }
.person-search-results li.active { background: var(--accent); color: var(--label-on-accent); }
.person-search-results li.active small { color: inherit; }
.person-search-results li.empty { color: var(--label-secondary); }
/* Login: one card holding the title, messages, fields and button. */
.login { width: 100%; max-width: 22rem; margin: 12vh auto 0; gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-xl); }
.login .pm-title { text-align: center; }
.login .pm-form-box { box-shadow: inset 0 0 0 1px var(--separator); }
@media (max-width: 50rem) {
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; }
}

/* Statistics */
.page-filter { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--label-secondary); }
.chart-card .pm-chart { min-height: 16rem; }
.table-view { font-size: 0.75rem; }
.table-view summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.table-view .pm-table-wrap { margin-top: var(--space-2); box-shadow: inset 0 0 0 1px var(--separator); }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); gap: var(--space-4); align-items: start; }
.panels .pm-table-wrap, .pm-card > .pm-table-wrap { box-shadow: inset 0 0 0 1px var(--separator); }
.facts { margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--separator); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--label-secondary); }
.facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Monthly goals */
.goals-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-8); }
.goals-header p { margin: var(--space-1) 0; }
.goals-motto { font-style: italic; color: var(--label-secondary); }
.goals-days { min-width: 15rem; }
.goals-days strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--label); }
.goals-days small { display: block; color: var(--label-secondary); margin-top: var(--space-1); }
.progress { position: relative; height: 0.5rem; background: var(--fill-tertiary); border-radius: var(--radius-full); margin: var(--space-2) 0; }
.progress span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.progress i { position: absolute; top: -0.1875rem; bottom: -0.1875rem; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--label); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr)); gap: var(--space-3); }
.goal { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--fill-quaternary); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.goal h3 { font-size: 0.8125rem; margin: 0; }
.goal p { margin: 0; line-height: 1.4; }
.goal-status { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem var(--space-2); border-radius: var(--radius-full); white-space: nowrap; color: var(--goal-color, var(--label-secondary)); background: var(--goal-tint, var(--fill-secondary)); }
.goal-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-value span { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400; color: var(--label-secondary); }
.goal-note, .goal-baseline, .goal-pace { font-size: 0.75rem; color: var(--label-secondary); }
.goal-pace strong { color: var(--label); }
/* Bar colors: green on or ahead of the even pace, yellow down to half of it, red below. */
.goal-done, .goal-on_track { --goal-color: var(--success-text); --goal-fill: var(--green); --goal-tint: var(--success-soft); }
.goal-behind { --goal-color: var(--warning-text); --goal-fill: var(--orange); --goal-tint: var(--warning-soft); }
.goal-late, .goal-over { --goal-color: var(--danger-text); --goal-fill: var(--red); --goal-tint: var(--danger-soft); }
.goal .progress { height: 0.75rem; background: var(--goal-tint, var(--fill-tertiary)); }
.goal .progress span { background: var(--goal-fill, var(--gray)); }
.goal .progress i { width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1px var(--bg-content); }
.goal-expected { font-size: 0.75rem; color: var(--label-secondary); display: flex; align-items: center; gap: var(--space-1-5); }
.goal-expected i { display: inline-block; width: 3px; height: 0.75rem; border-radius: 2px; background: var(--label); }

/* Pricing tables */
.pricing { display: flex; flex-direction: column; gap: var(--space-6); max-width: 56rem; }
.pricing .eyebrow { margin: 0; font-size: 0.6875rem; font-weight: 600; color: var(--accent-text); }
.pricing .lead { margin: 0; max-width: 68ch; }
.pricing section.pm-card > h2 { margin: 0; }
.pricing section.pm-card > p { margin: 0; line-height: 1.45; max-width: 72ch; }
.pricing .stats { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pricing .price-levels > div { box-shadow: inset 0 0 0 1px var(--separator); }
.pricing .price-levels > .highlight { box-shadow: inset 0 0 0 1px var(--accent); }
.pricing .price-levels small { display: block; margin-top: var(--space-1); line-height: 1.4; }
.pricing .price-levels small.card-total { font-size: 0.8125rem; color: var(--label); margin-top: 0; }
.pricing .pm-table-wrap { box-shadow: inset 0 0 0 1px var(--separator); }
.pricing .price-table tbody th { font-weight: 600; color: var(--label); }
.pricing th.group { text-align: center; }
.pricing td.recommended { font-weight: 700; color: var(--accent-text); }
.pricing .card-price { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--label-secondary); }
.pricing .quote-form { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: flex-start; }
.pricing .quote-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pricing .quote-fields .pm-input { width: 9rem; }
.pricing .quote-finishes { gap: var(--space-1-5); }

/* Delete confirmation pages: the Pomar alert, as a card centered on the page. */
.confirm-delete { width: 100%; max-width: 20rem; margin: 8vh auto 0; gap: 0; padding: var(--space-5) var(--space-4) var(--space-4); text-align: center; border-radius: var(--radius-xl); }
.confirm-delete .pm-alert-message { font-size: 0.75rem; }
.row-link + .pm-tag, .pm-tag + .missing { margin-left: var(--space-1-5); }
td .pm-tag.missing { margin-left: 0; }