/* A party's own page: customers and suppliers.
 *
 * One page, four tabs. The money the shop wants first - what is owed - is
 * the one big figure top-left; the actions that change it sit beside it;
 * the statement, the payments, the bills and the card each get a tab, so a
 * customer with four hundred bills is still one screen and not one scroll.
 * Every number is tabular, every table exports. */

.party-top {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 14px;
  align-items: stretch;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1100px) { .party-top { grid-template-columns: 1fr; } }

.party-balance {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 10px;
}
.party-balance span { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.party-balance b { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.party-balance small { font-size: 12px; color: var(--muted); }
.party-balance.owed { border-left-color: var(--danger); }
.party-balance.owed b { color: var(--danger); }
.party-balance.clear { border-left-color: #15803d; }
.party-balance.clear b { color: #15803d; }

.party-kpis { padding: 0; background: transparent; border: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.party-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 180px; }
.party-actions button { width: 100%; }

.tabs {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 11px 14px 9px;
  font: inherit; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent-dk); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.tab-n {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.tab-body { padding-bottom: 28px; }
.party-bar { border-bottom: 1px solid var(--line); }

.party-table { padding: 0 16px; }
.ledger th, .ledger td { white-space: nowrap; }
.ledger td.part { white-space: normal; min-width: 260px; }
.ledger tr.st-bill td.part { font-weight: 600; }
.ledger tr.st-pay td.part { color: var(--accent-dk); }
.ledger tr.st-open td { color: var(--muted); font-style: italic; }
.ledger tfoot td {
  font-weight: 700; background: var(--bg);
  border-top: 2px solid var(--line); border-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.ledger td.bal { font-variant-numeric: tabular-nums; }

.party-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 28px; padding: 16px;
}
.party-details div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.party-details span { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.party-details b { font-weight: 600; }
.pg-sl { font-weight: 400; font-size: 14px; opacity: .7; margin-left: 6px; }

/* A customer the bills name but the directory does not have yet. */
.pick.unsaved .name { font-style: italic; }
.pick.unsaved .small { font-size: 11px; color: var(--muted); font-style: normal; }

/* ── Regular medicines tab on a customer's page ───────────────────────── */
.rg-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.rg-bar .spacer { flex: 1 1 auto; }
.rg-table td, .rg-table th { padding: 6px 10px; font-size: 12.5px; vertical-align: middle; }
.rg-table tr.rg-pinned td { background: #f6fbf7; }
.rg-table .tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 4px; vertical-align: middle; }
.rg-in { width: 100%; min-width: 60px; padding: 4px 6px; font: inherit; font-size: 12.5px; border: 1px solid #c9d1de; border-radius: 5px; }
.rg-in.num { width: 64px; text-align: right; }
.rg-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.rg-form .fld { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #334155; }
.rg-form .fld input { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 9px; border: 1px solid #b8c2d3; border-radius: 6px; }
.rg-sug { display: flex; flex-direction: column; }
.rg-hit { padding: 6px 9px; font: inherit; font-size: 12.5px; text-align: left; color: var(--ink); background: #fff; border: 1px solid #eef1f6; border-top: 0; cursor: pointer; }
.rg-hit:hover { background: #fff6d8; }
.rg-hit small { color: var(--muted); }

/* ── Duplicate cards (js/merge.js) ────────────────────────────────────
 * The same name on more than one card, each group with the cards side by
 * side, and the one to keep chosen by a radio. */
.mg-has { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.modal:has(.mg-body) { width: min(920px, 96vw); max-width: 96vw; }
.mg-body { display: grid; gap: 14px; max-height: 62vh; overflow: auto; margin-top: 8px; }
.mg-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); }
.mg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mg-tag { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--row-alt); border: 1px solid var(--line); color: var(--accent); }
.mg-doubt { color: var(--warn); border-color: var(--warn); }
.mg-why { font-size: 12px; color: var(--warn); }
.mg-wrap { overflow-x: auto; }
.mg-cards { width: 100%; }
.mg-cards td, .mg-cards th { white-space: nowrap; }
.mg-acts { display: flex; justify-content: flex-end; }
.mg-recent { display: grid; gap: 6px; }
.mg-sub { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mg-none { margin: 6px 0; color: var(--muted); }