/* ============================================================================
   LIVE PRODUCT SHOWCASE — faithful HTML recreations of the real QuickPOS app
   Data & layout mirror the actual screens (pos.allshop.ng). Not screenshots.
   ============================================================================ */

/* --- shared app-frame chrome --- */
.showcase{background:var(--paper-2);border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.showcase__head{text-align:center;max-width:60ch;margin:0 auto 12px}
.showcase__tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:26px 0 34px}
.sc-tab{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;padding:9px 18px;border-radius:999px;
  border:1px solid var(--ink-12);background:#fff;color:var(--ink-70);cursor:pointer;transition:all .16s ease}
.sc-tab:hover{border-color:var(--amber)}
.sc-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sc-panel{display:none}
.sc-panel[data-active="true"]{display:block;animation:scfade .4s ease}
@keyframes scfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the browser/app window frame */
.appwin{max-width:1040px;margin:0 auto;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-float);border:1px solid var(--ink-12)}
.appwin__bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#0d1b2e;border-bottom:1px solid #10233b}
.appwin__dot{width:11px;height:11px;border-radius:50%}
.appwin__url{margin-left:14px;font-family:var(--font-mono);font-size:11.5px;color:#7d94b0;
  background:#0a1626;padding:5px 12px;border-radius:6px;flex:1;max-width:520px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.appwin__off{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:#f6a821;display:flex;align-items:center;gap:6px}
.appwin__off::before{content:"";width:7px;height:7px;border-radius:50%;background:#f6a821;box-shadow:0 0 0 3px rgba(246,168,33,.22)}

/* app body: sidebar + content, mirroring the real two-pane layout */
.appbody{display:grid;grid-template-columns:210px 1fr;min-height:520px}
.appside{background:#0b1a2c;padding:18px 12px;color:#c9d3e0}
.appside__brand{display:flex;align-items:center;gap:9px;padding:0 8px 16px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:17px}
.appside__shop{font-size:12.5px;background:#0f2338;border:1px solid #1a3552;border-radius:8px;padding:9px 11px;
  display:flex;align-items:center;justify-content:space-between;color:#9fb0c4;margin-bottom:14px}
.appnav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.appnav li{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;font-size:13.5px;color:#9fb0c4}
.appnav li .ic{width:18px;height:18px;opacity:.85;flex:none}
.appnav li.on{background:#12283f;color:#fff}
.appnav li.on .ic{opacity:1}
.appcontent{padding:26px 28px;background:#f7f8fa;overflow:hidden}

/* pill capsule brand mark (matches the real red/white logo) */
.pillmark{width:26px;height:26px;flex:none;transform:rotate(-45deg)}

/* --- DASHBOARD screen --- */
.dash__hello{font-size:13px;color:var(--ink-55);margin:0}
.dash__title{font-family:var(--font-display);font-size:24px;font-weight:700;margin:2px 0 18px}
.revcard{background:linear-gradient(135deg,#0f2137,#0a1626);border-radius:16px;padding:22px 24px;color:#fff;position:relative;overflow:hidden}
.revcard__off{position:absolute;top:16px;right:18px;font-size:11px;color:#9fb0c4;display:flex;align-items:center;gap:6px}
.revcard__off::before{content:"";width:7px;height:7px;border-radius:50%;background:#6b7f96}
.revcard__lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#8ea3bd;text-transform:uppercase}
.revcard__big{font-family:var(--font-mono);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:6px 0 2px}
.revcard__sub{font-size:12px;color:#7d94b0;margin-bottom:18px}
.revcard__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#1a3050;border-radius:12px;overflow:hidden}
.revcard__cell{background:#0d2036;padding:14px;text-align:center}
.revcard__cellv{font-family:var(--font-mono);font-size:19px;font-weight:700}
.revcard__cellv.g{color:#3ddc97}
.revcard__celll{font-size:10.5px;letter-spacing:.08em;color:#7d94b0;text-transform:uppercase;margin-top:3px}
.quickrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.quicktile{border-radius:14px;padding:20px;text-align:center;font-weight:600;font-size:14px;border:1px solid var(--ink-08)}
.quicktile .ic{display:block;width:26px;height:26px;margin:0 auto 8px}
.quicktile.g{background:#e7f5ef;color:#0a7a52}
.quicktile.b{background:#e8eefb;color:#2f5fd0}
.quicktile.n{background:#eef0f3;color:#3a4a5e}
.dashgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.panel{background:#fff;border:1px solid var(--ink-08);border-radius:14px;padding:16px 18px}
.panel__t{font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel__t .tag{font-size:11px;color:var(--ink-40);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar__v{width:100%;border-radius:6px 6px 0 0;background:#c7d2e0;min-height:2px}
.bar.hi .bar__v{background:#3355d1}
.bar.mid .bar__v{background:#9fb4e8}
.bar__n{font-size:10px;color:var(--ink-40)}
.bar__c{font-size:10px;color:var(--ink-55);font-weight:600}
.toprow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--paper-line)}
.toprow:last-child{border-bottom:0}
.toprank{width:20px;height:20px;border-radius:6px;background:#fdf0d8;color:#b8790a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.toprank.o{background:#eef0f3;color:#5a6b80}
.topname{font-size:13px;flex:1}
.topsold{font-size:12px;font-weight:600;color:var(--emerald)}

/* --- REPORTS screen --- */
.rephead{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.repav{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#12b886,#0a7a52);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none}
.rephealth{background:#fff;border:1px solid var(--ink-08);border-radius:16px;padding:22px 24px;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;margin-bottom:14px}
.gauge{width:150px;height:150px;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge__num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge__score{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--emerald)}
.gauge__of{font-size:12px;color:var(--ink-40)}
.gauge__lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--emerald);margin-top:2px}
.rephealth__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-40);text-transform:uppercase}
.rephealth__h{font-family:var(--font-display);font-size:22px;font-weight:700;margin:3px 0 8px}
.rephealth__p{font-size:14px;color:var(--ink-70);line-height:1.55;margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.chip.r{background:#fdecec;color:#c0393e}
.chip.g{background:#e7f5ef;color:#0a7a52}
.repgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.netcard{background:linear-gradient(150deg,#0f9d6b,#0a6e4c);border-radius:16px;padding:22px;color:#fff}
.netcard__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.netcard__v{font-family:var(--font-mono);font-size:34px;font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}
.netcard__f{font-size:12px;opacity:.8}
.netcard__foot{display:flex;gap:20px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.netcard__fi .l{font-size:10px;letter-spacing:.08em;opacity:.7;text-transform:uppercase}
.netcard__fi .n{font-family:var(--font-mono);font-size:14px;font-weight:700;margin-top:2px}
.statcard{background:#fff;border:1px solid var(--ink-08);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.statcard__v{font-family:var(--font-mono);font-size:22px;font-weight:700}
.statcard__l{font-size:12px;color:var(--ink-55);margin-top:3px}
.statcard__spark{height:26px;margin-top:10px}

/* --- INVENTORY screen --- */
.invhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.invhead__t{font-family:var(--font-display);font-size:21px;font-weight:700}
.invhead__badges{display:flex;gap:7px;margin-left:auto}
.invbadge{font-size:11.5px;padding:5px 11px;border-radius:999px;background:#e7f5ef;color:#0a7a52;font-weight:600}
.invsub{font-size:12.5px;color:var(--ink-55);margin:0 0 16px}
.healthstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.hcell{border-radius:12px;padding:12px;font-size:12px;line-height:1.3;border:1px solid transparent}
.hcell b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.hcell.warn{background:#fdf6e3;border-color:#f2e2b8;color:#8a6d1a}
.hcell.bad{background:#fdecec;border-color:#f5cccc;color:#b83a3f}
.hcell.exp{background:#fdecec;border-color:#f5cccc;color:#b83a3f}
.hcell.ok{background:#fdf6e3;border-color:#f2e2b8;color:#8a6d1a}
.hcell .lk{font-size:11px;text-decoration:underline;opacity:.85}
.invsearch{display:flex;gap:10px;margin-bottom:18px}
.invsearch__in{flex:1;background:#fff;border:1px solid var(--ink-12);border-radius:12px;padding:11px 15px;font-size:13px;color:var(--ink-40);display:flex;align-items:center;gap:9px}
.invsearch__btn{background:var(--ink);color:#fff;border-radius:12px;padding:11px 20px;font-size:13px;font-weight:600}
.invcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prodcard{background:#fff;border:1px solid var(--ink-08);border-radius:14px;padding:15px}
.prodcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prodcard__ic{width:38px;height:38px;border-radius:9px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;flex:none}
.prodcard__nm{font-weight:700;font-size:14px;line-height:1.2}
.prodcard__pr{font-family:var(--font-mono);font-weight:700;font-size:15px;text-align:right}
.prodcard__pc{font-size:11px;color:var(--ink-40);text-align:right;margin-top:1px}
.prodcard__cost{font-size:11.5px;color:var(--ink-40);margin:10px 0 6px}
.prodbar{height:5px;border-radius:3px;background:#e6e9ee;overflow:hidden}
.prodbar>i{display:block;height:100%;border-radius:3px}
.prodbar>i.g{background:var(--emerald)}
.prodbar>i.a{background:var(--amber)}
.prodtag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-55);background:#f0f2f5;border-radius:6px;padding:3px 9px;margin-top:10px}
.prodexp{font-size:11.5px;margin-top:8px;display:flex;align-items:center;gap:6px}
.prodexp.bad{color:var(--red)}
.prodexp.ok{color:var(--ink-55)}
.prodwhole{font-size:11px;color:#0a7a52;background:#e7f5ef;border-radius:6px;padding:3px 9px;display:inline-block;margin-top:8px;font-weight:600}

@media(max-width:920px){
  .appbody{grid-template-columns:1fr}
  .appside{display:none}
  .dashgrid,.repgrid,.invcards,.rephealth{grid-template-columns:1fr}
  .healthstrip{grid-template-columns:repeat(3,1fr)}
  .revcard__big{font-size:32px}
  .appcontent{padding:18px}
}

/* caption under each recreated screen */
.showcase__cap{max-width:70ch;margin:22px auto 0;text-align:center;font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.showcase__cap b{color:var(--ink)}
.showcase .section__head{margin-bottom:0}