/* Concept Platform — page styles layered on the ecosystem standard
   (concept-type.css / concept-ui.css / shell.css provide fonts, tokens,
   buttons, .cc-page, .cc-card). Only table/metric/modal bits live here. */

#view { font-family: var(--font-body); color: var(--cc-ink, #172033); }

/* metric tiles */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.metric { background:#fff; border:1px solid var(--cc-line,#e4e8f0); border-radius:12px; padding:14px 16px; }
.metric .lbl { color:var(--cc-mut,#64748b); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.metric b { display:block; font:700 24px/1.1 var(--font-heading); color:var(--cc-navy,#0d2233); margin-top:6px; }
.metric.alert b { color:var(--cc-red,#b42318); }

/* toolbar */
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 14px; }
.toolbar .grow { flex:1 1 240px; }
.toolbar input, .toolbar select { height:var(--btn-h-md,36px); padding:0 10px; border:1px solid var(--cc-line,#cfd7e5); border-radius:6px; font:var(--btn-fs-md) var(--font-body); background:#fff; }

/* tables */
.tablewrap { overflow:auto; border:1px solid var(--cc-line,#e4e8f0); border-radius:12px; background:#fff; }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th, table.data td { padding:10px 10px; border-bottom:1px solid #edf0f5; text-align:left; white-space:nowrap; }
table.data th { color:var(--cc-mut,#64748b); background:#f8fafc; font-weight:600; position:sticky; top:0; }
table.data tr:last-child td { border-bottom:0; }
.money { font-variant-numeric:tabular-nums; text-align:right; }
.pastdue { color:var(--cc-red,#b42318); font-weight:700; }

/* status pills */
.pill { display:inline-block; padding:3px 9px; border-radius:20px; font:700 11px/1.4 var(--font-body); background:#edf2f7; color:#334155; }
.pill.PAID { background:#dcfce7; color:#166534; }
.pill.UNPAID { background:#fee2e2; color:#991b1b; }
.pill.PENDING { background:#fef3c7; color:#92400e; }
.pill.SYNCED { background:#dcfce7; color:#166534; }
.pill.ERROR  { background:#fee2e2; color:#991b1b; }
.pill.FAILED { background:#fee2e2; color:#991b1b; }
.pill.QUEUED { background:#fef3c7; color:#92400e; }
.pill.NONE   { background:#eef2f7; color:#64748b; }

/* forms */
.formgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.formgrid label { display:block; font-size:12px; font-weight:700; color:#536174; margin-bottom:4px; }
.formgrid input, .formgrid select, .formgrid textarea { width:100%; padding:8px 10px; border:1px solid var(--cc-line,#cfd7e5); border-radius:6px; font:var(--btn-fs-md) var(--font-body); background:#fff; }
.span2{grid-column:span 2} .span3{grid-column:span 3}
.lineitem { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; margin-bottom:6px; }

/* modal */
.modalback { position:fixed; inset:0; background:#0f172acc; display:grid; place-items:center; padding:20px; z-index:2000; }
.modal { background:#fff; border-radius:12px; padding:20px; width:min(960px,96vw); max-height:92vh; overflow:auto; }
.modal h2 { font-family:var(--font-heading); color:var(--cc-navy,#0d2233); margin:0 0 12px; }

.link { color:var(--cc-red,#b42318); cursor:pointer; font-weight:600; }
.muted { color:var(--cc-mut,#64748b); font-size:13px; }
.alertbox { background:#fff7ed; color:#9a3412; padding:12px 14px; border-radius:8px; border:1px solid #fed7aa; }
.signin { text-align:center; padding:48px 16px; }
.right { justify-content:flex-end; }
@media(max-width:760px){ .formgrid,.lineitem{grid-template-columns:1fr} .span2,.span3{grid-column:auto} }