/* ==========================================================================
   Scheme Management. Reads as its own module: quieter, more spacious, with a
   distinct header band and sub-navigation.
   ========================================================================== */

.scheme-header { padding-bottom: 12px; }

.scheme-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold); font-weight: 600; margin-bottom: 3px;
}

/* The scheme header is a wrapping flex row. Explicit order so the search sits
   between the title and the tools on desktop, and drops to its own full-width
   row on a phone. */
.scheme-header .header-title { order: 1; }
.scheme-header .scheme-search { order: 2; flex: 0 1 260px; min-width: 180px; }
.scheme-header .header-meta   { order: 3; }

.scheme-search .inp { height: 34px; font-size: 12px; }

/* --------------------------------------------------------------- sub-nav -- */

/* The strip holds 12 sections, so it scrolls on most screens. The wrapper
   carries edge fades so it reads as scrollable rather than chopped off. */
.scheme-subnav-wrap {
  position: sticky; top: 0; z-index: 25;
  background: var(--bg-card);
  border-bottom: 1px solid var(--gold-border);
}
.scheme-subnav-wrap::before,
.scheme-subnav-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 2;
}
.scheme-subnav-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-card), transparent);
}
.scheme-subnav-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-card), transparent);
}
.scheme-subnav-wrap.can-left::before  { opacity: 1; }
.scheme-subnav-wrap.can-right::after  { opacity: 1; }

.scheme-subnav {
  display: flex; gap: 2px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding: 0 16px;
  /* A hairline scrollbar: enough to signal scrollability without bulk. */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.scheme-subnav::-webkit-scrollbar { height: 3px; }
.scheme-subnav::-webkit-scrollbar-track { background: transparent; }
.scheme-subnav::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.scheme-tab {
  flex: 0 0 auto;
  padding: 11px 13px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-mut);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color .15s, border-color .15s, background .15s;
}
.scheme-tab:hover { color: var(--gold-bright); background: var(--gold-faint); }
.scheme-tab.on {
  color: var(--gold); border-bottom-color: var(--gold); font-weight: 600;
  background: var(--gold-faint);
}

@media (max-width: 900px) {
  .scheme-subnav { padding: 0 12px; }
  .scheme-tab { padding: 10px 11px; font-size: 12px; }
  /* Search gets its own full-width row so the clock and theme toggle can stay
     pinned top-right next to the title. */
  .scheme-search { min-width: 0; flex: 1 0 100%; order: 10; margin-top: 8px; }
}

/* ------------------------------------------------------------- KPI strips -- */

/* Denser than the ERP dashboard: the spec asks for twelve summary cards. */
.scheme-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}

.scheme-kpi {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .16s, box-shadow .16s;
}
.scheme-kpi:hover { border-color: var(--gold-border-hi); box-shadow: var(--gold-glow); }

.scheme-kpi .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-mut); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.scheme-kpi .k i { font-style: normal; color: var(--gold); font-size: 12px; }
.scheme-kpi .v {
  font-family: var(--font-mono); font-size: 21px; font-weight: 700;
  color: var(--text-hi); margin-top: 5px; line-height: 1.1;
}
.scheme-kpi .m { font-size: 10.5px; color: var(--text-mut); margin-top: 3px; }

.scheme-kpi.accent { border-color: var(--gold-border-hi); background: var(--gold-faint); }
.scheme-kpi.accent .v { color: var(--gold-bright); }
.scheme-kpi.warn  .v { color: var(--amber); }
.scheme-kpi.bad   .v { color: var(--red); }
.scheme-kpi.good  .v { color: var(--green); }

/* --------------------------------------------------------- member header -- */

.member-hero {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg); padding: 18px;
}

.member-id { min-width: 0; flex: 1 1 260px; }
.member-id .mno {
  font-family: var(--font-mono); font-size: 12px; color: var(--gold);
  letter-spacing: .06em; font-weight: 600;
}
.member-id h2 { font-family: var(--font-display); font-size: 22px; margin: 3px 0 4px; }
.member-id .meta { font-size: 12px; color: var(--text-mut); }

.member-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 14px; flex: 2 1 420px;
}
.member-stats .s .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mut); font-weight: 600;
}
.member-stats .s .v {
  font-family: var(--font-mono); font-size: 16px; color: var(--text-hi);
  font-weight: 600; margin-top: 2px;
}

/* Progress ring for scheme completion. */
.progress-ring { display: flex; align-items: center; gap: 12px; }
.ring {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--bg-card-2) 0);
}
.ring::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--bg-card);
}
.ring span {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-hi);
}

/* -------------------------------------------------------------- passbook -- */

table.passbook { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.passbook thead th {
  background: var(--bg-card-2); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-mut); font-weight: 600;
  padding: 9px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--gold-border);
}
table.passbook tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--row-line);
}
table.passbook td.num { text-align: right; font-family: var(--font-mono); }
table.passbook tbody tr:hover { background: var(--bg-hover); }
table.passbook tfoot td {
  background: var(--bg-card-2); font-weight: 700; padding: 10px;
  border-top: 1px solid var(--gold-border); color: var(--text-hi);
}

/* --------------------------------------------------- installment ladder -- */

.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }

.rung {
  border: 1px solid var(--gold-border); border-radius: 8px;
  padding: 7px 6px; text-align: center; background: var(--bg-card-2);
}
.rung .n {
  font-size: 10px; color: var(--text-mut); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.rung .d { font-size: 10px; color: var(--text-mut); margin-top: 2px; }
.rung .a { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-hi); margin-top: 3px; }

.rung.paid   { border-color: rgba(52,199,123,.4); background: var(--green-bg); }
.rung.paid .n { color: var(--green); }
.rung.free   { border-color: var(--gold-border-hi); background: var(--gold-wash); }
.rung.free .n { color: var(--gold); }
.rung.overdue { border-color: rgba(229,72,77,.45); background: var(--red-bg); }
.rung.overdue .n { color: var(--red); }
.rung.due-soon { border-color: rgba(245,166,35,.45); background: var(--amber-bg); }
.rung.due-soon .n { color: var(--amber); }

/* ------------------------------------------------------- overdue buckets -- */

.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bucket {
  border: 1px solid var(--gold-border); border-radius: var(--radius);
  padding: 12px; text-align: center; background: var(--bg-card-2);
}
.bucket .n { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--text-hi); }
.bucket .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); margin-top: 2px; }
.bucket.b2 .n { color: var(--amber); }
.bucket.b3 .n { color: #E5844D; }
.bucket.b6 .n { color: var(--red); }

/* ----------------------------------------------------------- scheme card -- */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.plan-card {
  background: var(--bg-card); border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .16s, box-shadow .16s;
}
.plan-card:hover { border-color: var(--gold-border-hi); box-shadow: var(--gold-glow); }
.plan-card.off { opacity: .6; }

.plan-card h3 { font-family: var(--font-display); font-size: 17px; }
.plan-card .code {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--gold);
  letter-spacing: .06em;
}
.plan-rules { display: grid; gap: 5px; font-size: 12px; }
.plan-rules .r { display: flex; justify-content: space-between; gap: 10px; }
.plan-rules .r .k { color: var(--text-mut); }
.plan-rules .r .v { color: var(--text-hi); font-weight: 500; text-align: right; }

.plan-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--row-line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ------------------------------------------------------------- collect -- */

.collect-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }

@media (max-width: 1100px) {
  .collect-grid { grid-template-columns: minmax(0, 1fr); }
}

.tender-row {
  display: grid; grid-template-columns: 130px 1fr 1fr auto; gap: 8px; align-items: center;
}
@media (max-width: 700px) {
  .tender-row { grid-template-columns: 1fr 1fr; }
}

.due-summary {
  background: var(--gold-faint); border: 1px solid var(--gold-border-hi);
  border-radius: var(--radius); padding: 14px;
}
.due-summary .big {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: var(--gold-bright); line-height: 1.1;
}

/* ------------------------------------------------------ membership card -- */

.mcard {
  width: 86mm; height: 54mm; padding: 5mm;
  border-radius: 3mm; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #14110A 0%, #241D0E 55%, #0D0B06 100%);
  color: #F5EFE2;
  border: 1px solid rgba(212,175,55,.5);
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Inter', Arial, sans-serif;
}
.mcard::before {
  content: ''; position: absolute; inset: -40% -20% auto auto;
  width: 70%; height: 150%;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 65%);
}
.mcard .m-top { display: flex; justify-content: space-between; gap: 4mm; position: relative; }
.mcard .m-shop {
  font-family: 'Playfair Display', Georgia, serif; font-size: 12pt; font-weight: 700;
  color: #F0C75E; line-height: 1.1;
}
.mcard .m-tag { font-size: 5.5pt; letter-spacing: .18em; text-transform: uppercase; color: #B3A279; margin-top: 1mm; }
.mcard .m-name { font-size: 10pt; font-weight: 600; }
.mcard .m-no { font-family: 'JetBrains Mono', monospace; font-size: 9pt; color: #F0C75E; letter-spacing: .08em; }
.mcard .m-grid { display: flex; gap: 5mm; font-size: 6pt; position: relative; }
.mcard .m-grid .k { color: #B3A279; text-transform: uppercase; letter-spacing: .08em; }
.mcard .m-grid .v { font-family: 'JetBrains Mono', monospace; font-size: 7.5pt; color: #F5EFE2; }

/* ---------------------------------------------------------- receipt doc -- */

/* Tender breakdown — how the money actually arrived. */
.doc.receipt .rcpt-tender {
  margin-top: 4mm; padding: 2.5mm 3mm;
  border: 1px solid #ccc; border-radius: 1mm;
}
.doc.receipt .rcpt-tender h4 {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em;
  color: #555; margin-bottom: 1.5mm; font-weight: 700;
}
.doc.receipt .rcpt-tender .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5pt; padding: .8mm 0;
}
.doc.receipt .rcpt-tender .row + .row { border-top: 1px dotted #ddd; }
.doc.receipt .rcpt-tender .ref {
  font-size: 7.5pt; color: #666; font-family: 'JetBrains Mono', monospace;
  margin-left: 2mm;
}
.doc.receipt .rcpt-tender .amt { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* Where the customer now stands — the reason they keep the receipt. */
.doc.receipt .rcpt-standing {
  margin-top: 4mm; padding: 3mm;
  background: #faf7ef; border: 1px solid #e2d9c0; border-radius: 1mm;
}
.doc.receipt .rcpt-standing .head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4mm;
}
.doc.receipt .rcpt-standing h4 {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em;
  color: #555; font-weight: 700;
}
.doc.receipt .rcpt-standing .head b {
  font-family: 'JetBrains Mono', monospace; font-size: 10pt; color: #111;
}
.doc.receipt .rcpt-standing .bar {
  height: 2.2mm; margin: 2mm 0 2.5mm;
  background: #e8e0cb; border-radius: 1.1mm; overflow: hidden;
}
.doc.receipt .rcpt-standing .bar > span {
  display: block; height: 100%; background: #A8842C;
}
.doc.receipt .rcpt-standing .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8mm 4mm; font-size: 8.5pt;
}
.doc.receipt .rcpt-standing .grid > div {
  display: flex; justify-content: space-between; gap: 2mm;
}
.doc.receipt .rcpt-standing .grid .k { color: #555; }
.doc.receipt .rcpt-standing .grid .v {
  font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #111;
  text-align: right;
}

/* --------------------------------------------------------------- misc -- */

.channel-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--gold-border); color: var(--text-mut);
}
.channel-pill.ready { color: var(--green); border-color: rgba(52,199,123,.4); background: var(--green-bg); }
.channel-pill.notready { color: var(--amber); border-color: rgba(245,166,35,.35); background: var(--amber-bg); }

.type-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 4px; font-weight: 600;
}
.type-badge.amount { color: var(--blue); background: var(--blue-bg); }
.type-badge.gram   { color: var(--gold); background: var(--gold-wash); }

@media print {
  .scheme-subnav, .scheme-search { display: none !important; }
  .mcard { break-inside: avoid; }
}