/* Money screens: front desk, reports, appointments, dashboard (lane sr-screen-money).
   Tokens and rem only. Layout follows the Angular front-desk and dashboard screens. */

/* Shared page shell for a form or a dialog twin shown as a page. */
.form-page { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40rem; min-width: 0; }
.form-page .page-head { margin-bottom: 0; }

/* Dashboard (calendar landing page). */
.dashboard { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Front desk: billings. */
.billings-heading { margin: var(--space-4) 0 var(--space-3); font-size: var(--fs-5); }
.billings-total { margin-bottom: var(--space-3); }
.billings-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
.inline-form { display: inline-flex; margin: 0; }
.row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1); }

/* Front desk: log book form. */
.logbook-fields { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

/* Front desk: profit and loss. */
.pl-filter { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.pl-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.pl-period .filter-select { display: flex; flex-direction: column; gap: var(--space-1); min-width: 8rem; }
.pl-note { margin: var(--space-3) 0; }
.pl-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.pl-tools form { margin: 0; }

/* Reports: daily report. */
.daily-date { margin-bottom: var(--space-4); align-items: flex-end; }
.daily-date .filter-date { display: flex; flex-direction: column; gap: var(--space-1); }

/* Appointments: create, edit and view. */
.appt-fields { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.appt-mobile { min-width: 0; }
.appt-view { display: flex; flex-direction: column; gap: var(--space-3); }
.appt-recall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.appt-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Dashboard: recalls drawer. */
.recall-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.recall-filter .field { min-width: 7rem; }
.recall-add { margin: 0 0 var(--space-3); }
.recall-empty { margin: var(--space-4) 0; color: var(--ink-muted); text-align: center; }

@media (min-width: 768px) {
  .logbook-fields, .appt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appt-fields > :first-child, .appt-fields > :last-child,
  .logbook-fields > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .pl-tools .btn, .appt-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Front desk: expenses (monthly grid, annual view). Layout after the Angular expenses and
   operational-expenses screens: category bar in the accent wash, borderless-looking cells, grey total row. */
.expgrid-page { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.expgrid-page > .page-head { margin-bottom: 0; }
.expgrid-filter { align-items: flex-end; gap: var(--space-3); }
.expgrid-filter .filter-select { min-width: 8rem; }
.expgrid-reportbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.expgrid-reportbar .alert { flex: 1 1 100%; }
.expgrid-reportbar form { margin: 0; }
.expgrid-report { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin: 0; }
.expgrid { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.expgrid-cat { overflow: hidden; box-shadow: var(--shadow-1); }
.expgrid-cat .card-body { padding: 0; }
.expgrid-cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); background: var(--accent-wash); color: var(--accent); }
.expgrid-cat-head h2 { margin: 0; font-size: var(--fs-4); font-weight: 700; color: inherit; }
.expgrid-cat .grid-table { min-width: 54rem; }
.expgrid-cat .grid-table th, .expgrid-cat .grid-table td { padding: var(--space-2); }
.expgrid-cat .grid-table th:last-child.right { width: 4.5rem; }
.expgrid-cat .grid-table td { vertical-align: middle; }
.expgrid-cat .grid-table input, .expgrid-cat .grid-table select { border-color: transparent; background: transparent; }
.expgrid-cat .grid-table input:hover, .expgrid-cat .grid-table input:focus,
.expgrid-cat .grid-table select:hover, .expgrid-cat .grid-table select:focus { border-color: var(--border-strong); background: var(--surface); }
.expgrid-cat .grid-table input { min-width: 4.5rem; }
.expgrid-cat .grid-table input[type="date"] { min-width: 8.5rem; }
.expgrid-cat .grid-table select { width: 100%; min-width: 6.5rem; min-height: 2.25rem; padding: 0.3rem 0.5rem; color: var(--ink); border: 1px solid transparent; border-radius: var(--radius-sm); }
.expgrid-cat .grid-table input[readonly] { background: transparent; }
.expgrid-total td { background: var(--surface-2); font-weight: 600; color: var(--ink); border-top: 1px solid var(--border-strong); }
.expgrid-cat .repeater-add { margin: 0; padding: var(--space-3); }
.expgrid .row-invalid input, .expgrid .row-invalid select { border-color: var(--danger); }
.expgrid-grand { margin: 0; text-align: right; font-size: var(--fs-5); }
.expgrid .form-actions { margin-top: 0; }
/* P6BR-04: the paid fields show only when the row status is Paid (old app). No script: the status select decides. */
.expgrid .grid-table tr:has(select[name$="-status"] option[value="unpaid"]:checked) .expgrid-paid { visibility: hidden; }

/* Balance recompute result (SRR-05: found in a Go-string fragment). */
.recompute-result { display: grid; gap: var(--space-3); }

/* Log book list (SRR-10): the date stays on one line. SRS-05: Edit and Delete wrap under each other when the column is narrow
   (sidebar open at 1280 px), they are never cut off. */
#logbook-table td:first-child { white-space: nowrap; }

/* UXT-01: the Log Book list sits inside #logbook-wrap (it reloads itself on dp:changed), so the kit rules
   `#main:has(> .list-page)` and `#main > .list-page` (tables.css) do not match. Without them #main kept its auto
   margins, shrank to the width of the table and the page scrolled sideways. Same rules, one level down. */
#main:has(> #logbook-wrap) { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0; max-width: none; margin: 0; }
#logbook-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#logbook-wrap > .list-page { flex: 1 1 auto; }