/* DEMO prototype — Billing / RCM (Stage: P3 money). Reuses mockup.css palette +
   Crimson Text. 390px safe. */

.bill-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 18px; border-bottom: 1px solid var(--line, #ddd); }
.bill-tab {
  border: 1px solid transparent; border-bottom: none; background: none;
  font-family: inherit; font-size: 0.95rem; padding: 8px 16px; cursor: pointer;
  color: var(--ink-dim, #6a6a6a); border-radius: 8px 8px 0 0;
}
.bill-tab.is-active { background: #e7e0d2; color: var(--ink, #2f2f2f); font-weight: 700; }

.bill-summary { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.bill-summary__stat {
  border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 12px 18px;
  background: #fff; min-width: 140px;
}
.bill-summary__num { display: block; font-size: 1.5rem; font-weight: 700; }
.bill-summary__lbl { display: block; font-size: 0.8rem; color: var(--ink-dim, #6a6a6a); }

.bill-table-wrap { overflow-x: auto; margin: 14px 0; }
.bill-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 640px; }
.bill-table th, .bill-table td { border: 1px solid var(--line, #ddd); padding: 8px 10px; text-align: left; vertical-align: top; }
.bill-table th { background: var(--inner-bg, #fafafa); color: var(--heading, #4e4e4e); font-weight: 700; }
.bill-mini { padding: 4px 10px; font-size: 0.8rem; margin: 0 0 4px; display: block; width: 100%; }

.bill-status { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.bill-status--paid { background: #eef6f0; color: #4a7c59; border-color: #cfe3d4; }
.bill-status--partial { background: #fbf4e6; color: #a67c1e; border-color: #eddcb0; }
.bill-status--sent { background: #eef2f8; color: #4a5f7c; border-color: #cdd8e6; }
.bill-status--draft { background: #f2f2f2; color: #777; border-color: #ddd; }

.bill-subhead { font-size: 1rem; color: var(--heading, #4e4e4e); margin: 20px 0 10px; }
.bill-member { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.bill-member__sub { font-size: 0.82rem; color: var(--ink-dim, #6a6a6a); }
.bill-member__bar { height: 8px; border-radius: 999px; background: var(--inner-bg, #f0f0f0); overflow: hidden; margin-top: 8px; }
.bill-member__fill { height: 100%; background: var(--button, #b8a295); }

.bill-builder { border: 1px solid #d8d2c6; background: #fafafa; border-radius: 12px; padding: 16px; margin: 14px 0; }
.bill-builder__head { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.bill-builder__head select, .bill-builder__head input,
.bill-builder__add select {
  font-family: inherit; font-size: 0.95rem; padding: 6px 8px;
  border: 1px solid var(--line, #ddd); border-radius: 6px; background: #fff;
}
.bill-builder__add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bill-builder__line { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #eee; }
.bill-builder__line span:first-child { flex: 1; }
.bill-builder__rm { border: none; background: none; color: #b06a6a; font-family: inherit; font-size: 0.8rem; cursor: pointer; }
.bill-builder__rm:hover { text-decoration: underline; }
.bill-builder__total { text-align: right; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--ink, #333); margin-top: 4px; }
.bill-builder__actions { margin-top: 12px; display: flex; gap: 8px; }

.bill-svc-name { width: 100%; font-family: inherit; font-size: 0.95rem; padding: 5px 8px; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.bill-svc-price { width: 100px; font-family: inherit; font-size: 0.95rem; padding: 5px 8px; border: 1px solid var(--line, #ddd); border-radius: 6px; }

/* ---- lien case ledger ---- */
.lien-age { margin: 8px 0 16px; }
.lien-age__row { display: flex; flex-wrap: wrap; gap: 10px; }
.lien-age__cell { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 14px; background: #fff; min-width: 120px; }
.lien-age__amt { display: block; font-size: 1.1rem; font-weight: 700; }
.lien-age__lbl { display: block; font-size: 0.75rem; color: var(--ink-dim, #6a6a6a); }

.lien-case { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #fff; }
.lien-case--settled { opacity: 0.82; background: #fafafa; }
.lien-case__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lien-case__firm { font-size: 0.82rem; color: var(--ink-dim, #6a6a6a); }
.lien-case__status { text-align: right; font-size: 0.82rem; }
.lien-case__rr { font-size: 0.78rem; color: var(--ink-dim, #6a6a6a); }
.lien-case__basis { font-size: 0.82rem; color: var(--ink-dim, #6a6a6a); margin: 6px 0 4px; font-style: italic; }
.lien-case__totalrow td { border-top: 2px solid var(--ink, #333); background: #fbfaf6; }
.lien-case__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.lien-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line, #ccc); color: var(--ink-dim, #555); }
.lien-tag--pi { background: #eef2f8; color: #4a5f7c; border-color: #cdd8e6; }
.lien-tag--wc { background: #f3eef8; color: #6a4a7c; border-color: #ddd0e6; }
.lien-batch { border-top: 1px solid var(--line, #ddd); margin-top: 18px; padding-top: 8px; }

.bill-scaffold { border: 1px dashed #c9c1b2; border-radius: 12px; padding: 20px 22px; background: #fbfaf6; max-width: 640px; }
.bill-scaffold h2 { margin: 0 0 10px; font-size: 1.2rem; }
.bill-scaffold ul { margin: 8px 0; padding-left: 20px; }
.bill-scaffold li { margin: 4px 0; }
.bill-scaffold__note { font-size: 0.88rem; color: var(--ink-dim, #6a6a6a); font-style: italic; }

@media (max-width: 390px) {
  .bill-mini { display: inline-block; width: auto; }
}