/* V5: customer screen styles (see docs/V5-CONTRACT.md §5.3) — customers list, customer file, entry view sheet.
   Calm: one big number per card, generous spacing (--sp-*, --section-gap, --row-min), colour only for money. */

/* ===== Customers list ===== */
.customers .search-wrap { margin-top: var(--sp-2); }
.customers .chip-row { margin: var(--sp-3) 0 var(--sp-4); }
.customers .list-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 38px; padding: 0 4px; margin-bottom: var(--sp-2); }
.list-meta-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.customers .sort-btn { min-width: 0; max-width: 52%; }
.customers .sort-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.customers .list { margin-top: 0; }
.cust-rows .list-row { min-height: var(--row-min); padding: 10px var(--sp-4); gap: var(--sp-3); }
.cust-rows .list-title { font-size: var(--fs-md); }
.cust-rows .list-subtitle { margin-top: 5px; overflow: visible; }
.cust-rows .list-trailing .money { font-size: var(--fs-md); }
.settled-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); }
.settled-mark .icon { color: var(--ok); }
@media (max-width: 340px) { .cust-rows .list-row { padding-inline: var(--sp-3); } .cust-rows .list-trailing .money { font-size: var(--fs-sm); } }

/* ===== Customer file ===== */
.cust-v5 { padding-top: var(--sp-2); }
.cust-v5 > .notice { margin-bottom: var(--sp-3); }
.cust-balance {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
.cb-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.cb-word { font-size: var(--fs-lg); font-weight: 700; color: var(--text-2); }
.cb-amount { font-size: clamp(32px, 9vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; white-space: normal; }
.cb-settled { display: flex; align-items: center; gap: 10px; font-size: clamp(26px, 7vw, 32px); font-weight: 800; color: var(--ok); line-height: 1.2; }
.cb-line { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); }
.cb-line.cb-overdue { color: var(--danger); }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-note { margin-top: 2px; padding-top: var(--sp-2); border-top: 1px dashed var(--border); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-3); }
.cust-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.cust-actions .btn { min-height: 56px; border-radius: 16px; font-size: var(--fs-lg); padding-inline: 12px; }
.cust-pay .icon { color: var(--payment); }
.cust-quiet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); }
.quiet-act { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 var(--sp-3); border-radius: 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); transition: background var(--dur), color var(--dur); }
.quiet-act:hover { background: var(--surface-2); color: var(--text); }
.quiet-act:disabled { opacity: .45; cursor: not-allowed; }
.quiet-act .icon { color: var(--brand); }
.quiet-act.wa .icon, .wa-btn .icon { color: #1FA855; }
:root[data-theme='dark'] .quiet-act.wa .icon, :root[data-theme='dark'] .wa-btn .icon { color: #25D366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .quiet-act.wa .icon, :root:not([data-theme='light']) .wa-btn .icon { color: #25D366; } }
.quiet-lock { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }
.quiet-sep { display: none; }
.cust-tabs { margin-top: var(--section-gap); }
.cust-tabs .seg { min-height: 44px; font-size: var(--fs-md); padding: 0 8px; min-width: 0; }
.cust-tabs .seg > span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seg-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 800; }
.seg.active .seg-count { background: var(--debt-soft); color: var(--danger-ink); }
.cust-list, .cust-plans, .cust-log, .cust-none, .cust-empty { margin-top: var(--sp-4); }
.open-row, .log-row { min-height: var(--row-min); padding: 12px var(--sp-4); }
.open-row .list-trailing { gap: 6px; }
.open-row .list-subtitle { margin-top: 4px; }
.cust-none { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-3); font-weight: 700; }
.cust-none .icon { color: var(--ok); }
.log-head { padding: 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.cust-log .timeline-group { margin-top: var(--sp-4); }
.cust-log .timeline-month { margin: 0 6px var(--sp-2); }
.cust-since { margin-top: var(--section-gap); }
.pane-detail .cust-v5 { max-width: 760px; }

/* ===== Entry view sheet ===== */
.entry-view-sheet .entry-detail { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: 2px; }
.entry-view-sheet .entry-amount { font-size: clamp(30px, 8vw, 38px); line-height: 1.15; }
.entry-chips-view { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.entry-note { font-size: var(--fs-md); line-height: 1.6; color: var(--text); }
.entry-view-sheet .photo-thumb { align-self: flex-start; }
.entry-quiet-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quiet-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--text); transition: background var(--dur), transform 90ms var(--ease); }
.quiet-pill:hover { background: var(--surface-2); }
.quiet-pill:active { transform: scale(.97); }
.quiet-pill .icon { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .quiet-pill:active { transform: none; } }

/* Filter chips: counts as small badges; the overdue count is the only red bit (it counts money owed late). */
.chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 800; }
.chip-count.is-alert { background: var(--debt-soft); color: var(--danger-ink); }
.chip.active .chip-count { background: color-mix(in srgb, var(--brand-ink) 22%, transparent); color: inherit; }

/* ===== Documents: quiet tools under the print / WhatsApp buttons, the «فاتورة بالمستحق» table ===== */
.doc-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); max-width: 720px; margin: 0 auto; padding: 4px 16px 10px; }
.doc-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.doc-mark { margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.doc-mark.late { color: var(--danger); }
.doc-table td.nowrap { white-space: nowrap; }
.doc-due .doc-title { line-height: 1.25; }

/* Three quiet actions (تذكير واتساب · كشف الحساب · فاتورة): equal columns, icon above a short label — never wraps. */
.cust-quiet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cust-quiet .quiet-act { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 6px 4px; text-align: center; line-height: 1.25; font-size: var(--fs-xs); }
.cust-quiet .quiet-act > span { max-width: 100%; overflow-wrap: anywhere; }
.cust-quiet .quiet-lock { position: absolute; top: 4px; inset-inline-end: calc(50% - 26px); }