/* Loyalora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css).
   Accent tokens + the few pieces the kit does not cover. Everything generic — tables, tabs, pills,
   KPIs, empty states, the rail — comes from the kit and is not restated here. */
:root{--accent:#7c3aed;--accent-dark:#6d28d9;--accent-soft:#ede9fe;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#c4b5fd;--accent-dark:#ddd6fe;--accent-soft:#2e2154;--on-accent:#0b0d10;--accent-ink:var(--on-accent)}

/* ── entry kinds. Semantic colour on the fact, never on the chrome. */
.pill.good{background:var(--okbg);color:var(--ok)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.bad{background:var(--badbg);color:var(--bad)}

/* ── a signed number reads as a direction before it reads as a value */
.pos{color:var(--ok)}
.neg{color:var(--warn)}
.tbl td.right,.tbl th.right{text-align:right;font-variant-numeric:tabular-nums}
.tbl .sub{display:block;font-size:.76rem;color:var(--sub);margin-top:1px}

/* ── ⭐ THE BALANCE. The number a customer asks for, at the size they ask for it. */
.balbig{padding:22px 20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;
        background:linear-gradient(180deg,var(--accent-soft),transparent)}
.balbig .n{font-family:var(--display);font-size:3.2rem;line-height:1;font-weight:800;
           font-variant-numeric:tabular-nums;color:var(--accent-dark)}
html[data-theme="dark"] .balbig .n{color:var(--accent)}
.balbig .l{text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-weight:700;color:var(--sub);margin-top:4px}
.balbig .s{margin-top:10px;font-size:.92rem;color:var(--sub)}
.balbig .s strong{color:var(--ink)}

.bigfig{font-family:var(--display);font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0 0}

/* ── rewards as cards: the affordable ones read as offers, the rest as targets */
.rewardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.rewardcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card);
            display:flex;flex-direction:column;gap:4px}
.rewardcard.can{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--okbg)}
.rewardcard .rn{font-weight:700;line-height:1.25}
.rewardcard .rc{font-size:.86rem;color:var(--sub);font-variant-numeric:tabular-nums}
.rewardcard .rs{font-size:.8rem;color:var(--warn);font-weight:600}
.rewardcard form{margin-top:6px}
h3.mini{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin:0 0 8px}

/* ── the record layout: the card on the left, the counter's actions on the right.
      minmax(0,1fr) rather than 1fr so a wide table scrolls in its own box instead of
      stretching the page. */
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
@media(max-width:980px){.grid-side{grid-template-columns:minmax(0,1fr)}}

/* ── two-column form grid, collapsing whole at phone width */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media(max-width:720px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* ── the programme editor, which has more fields than a row has room for */
.progform{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px;align-items:end}
.progform .field{margin:0;min-width:0}
.progform > .btn{justify-self:start;white-space:nowrap}
.progform .formfoot{grid-column:1/-1}

/* ── an inline "add" strip at the foot of a table should read as part of it */
.card > form.pad-sm{background:var(--chip);border-radius:0 0 var(--radius) var(--radius);
                    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                    gap:10px 12px;align-items:end}
.card > form.pad-sm .field{margin:0;min-width:0}
.card > form.pad-sm .field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:700}
.card > form.pad-sm > .btn{align-self:end;justify-self:start;white-space:nowrap}
.editrow > td{padding:0 !important;background:var(--chip)}
.editrow summary{padding:8px 14px;cursor:pointer;color:var(--sub)}

/* ── checkbox rows: the label carries the sentence, so it must not be a narrow column */
.field label.check{display:flex;gap:8px;align-items:flex-start;font-weight:500;text-transform:none;
                   letter-spacing:0;font-size:.92rem;color:var(--ink)}
.field label.check input{width:auto;margin-top:3px;flex:none}

/* ── the standing note. The kit turns a neutral `.alert` under `.main` into a transient toast,
      which is right for a flash and wrong for a permanent statement of scope. */
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--chip);
      border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;font-size:.9rem;color:var(--sub);line-height:1.55}
.note strong{color:var(--ink)}

/* ── the kit draws a 96px sparkline pinned bottom-right inside a KPI tile; a full-width caption
      slides underneath it, so a tile that HAS a spark reserves the space. */
.kpi[data-spark] .d{padding-right:104px}

/* ── the kit's .search padding loses to the base input rule's specificity */
.search input{padding-left:34px!important}