/* ============================================================
   Paperless Receipt Book — Core Stylesheet
   Mobile-first. Feels like a native app on phones.
   ============================================================ */

:root{
  --brand:#0BA88F;
  --brand-dark:#087A68;
  --brand-light:#E6F7F4;
  --accent:#F2A93B;
  --ink:#122031;
  --muted:#5C6B7A;
  --bg:#F6F8FA;
  --card:#FFFFFF;
  --danger:#D9483B;
  --success:#1E9E5A;
  --radius:2px;
  --radius-sm:2px;
  --shadow:0 4px 18px rgba(16,24,40,.08);
  --header-h:64px;
  --footer-h:64px;
  --wrap-w:1380px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-tap-highlight-color:transparent;}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  padding-bottom:0;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button, input, select, textarea{font-family:inherit;font-size:1rem;}

.container{max-width:var(--wrap-w);margin:0 auto;padding:0 20px;}
.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 20px;}

/* ---------------- Header ---------------- */
.app-header{
  position:sticky; top:0; z-index:50;
  min-height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding-left:16px; padding-right:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.app-header .container, .app-header .wrap{width:100%; display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px;}
.app-header .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem;}
.app-header .brand svg{width:30px;height:30px;}

/* Logo area: business logo (or brand mark) shown in the header on every screen */
.header-logo{width:34px;height:34px;border-radius:9px;object-fit:cover;background:#fff; flex:0 0 auto;}

.wallet-pill{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  padding:6px 12px; border-radius:999px;
  font-size:.85rem; font-weight:600;
}
.wallet-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.header-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:#fff; border:none; cursor:pointer;
}

/* ---------------- Top app header brand (logo + wordmark), replaces the old greeting ---------------- */
.app-topbar-left{display:flex; align-items:center; gap:10px; min-width:0;}
.app-topbar-brand{display:flex; align-items:center; gap:8px; color:#1a1a1a; font-weight:800; font-size:1rem; text-decoration:none;}
.app-topbar-brand img{width:24px; height:24px; object-fit:contain; display:block;}

/* ---------------- App shell: left sidebar + main content (logged-in users) ---------------- */
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:230px; flex:0 0 230px; background:#333131; color:#C9D1DB; min-height:100vh;
  position:sticky; top:0; display:flex; flex-direction:column; z-index:80;
}
.app-sidebar-brand{padding:20px 18px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08);}
.app-sidebar-brand svg{width:28px;height:28px;}
.app-sidebar nav{flex:1; padding:12px 10px; overflow-y:auto;}
.app-sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.85rem; font-weight:600;
  color:#C9D1DB; margin-bottom:2px;
}
.app-sidebar nav a svg{width:17px;height:17px; flex:0 0 auto;}
.app-sidebar nav a.active, .app-sidebar nav a:hover{background:rgba(0,0,0,.15); color:#fff;}
.app-sidebar nav .nav-group-toggle{width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.85rem; font-weight:600; color:#C9D1DB; margin-bottom:2px;}
.app-sidebar nav .nav-group-toggle svg:not(.chevron){width:17px;height:17px; flex:0 0 auto;}
.app-sidebar nav .nav-group-toggle svg.chevron{width:14px;height:14px; margin-left:auto; transition:transform .15s ease; flex:0 0 auto;}
.app-sidebar nav .nav-group.open .nav-group-toggle svg.chevron{transform:rotate(180deg);}
.app-sidebar nav .nav-group-toggle.active{background:rgba(255,255,255,.08); color:#fff;}
.app-sidebar nav .nav-group-toggle:hover{background:rgba(255,255,255,.08); color:#fff;}
.app-sidebar nav .nav-group-children{display:none; padding-left:14px;}
.app-sidebar nav .nav-group.open .nav-group-children{display:block;}
.app-sidebar nav .nav-group-children a{padding:9px 12px 9px 30px; font-size:.82rem; font-weight:600; position:relative;}
.app-sidebar nav .nav-group-children a::before{content:''; position:absolute; left:16px; top:50%; width:6px; height:1px; background:currentColor; opacity:.5;}
.app-sidebar nav .nav-logout{margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); color:#FDA79B; font-weight:700;}
.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{
  position:sticky; top:0; z-index:60;
  background:#fff; color:#1a1a1a;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08); border-bottom:1px solid #EEF0F2;
}
.app-topbar .icon-btn{background:#F4F6F8; color:#1a1a1a;}
.app-menu-toggle{display:none; background:#F4F6F8; color:#1a1a1a; border:none; border-radius:9px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer;}
.app-content{flex:1;}
/* ---------------- Footer / bottom app nav ---------------- */
.app-footer{
  display:none; /* shown only on small/mobile screens — see @media(max-width:900px) below,
                    matching the same breakpoint the sidebar collapses at */
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  height:calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:#fff;
  border-top:1px solid #E7EAEE;
  justify-content:space-around; align-items:center;
  box-shadow:0 -4px 14px rgba(16,24,40,.06);
  transform:translateY(0);
  transition:transform .25s ease;
}
/* Slid fully out of view once the page is scrolled to the bottom — see
   assets/js/main.js (handleAppFooterScroll). Kept as a transform (not display:none) so the
   hide/show is animated instead of an abrupt jump. */
.app-footer.app-footer-hidden{
  transform:translateY(100%);
}
.app-footer a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.68rem; color:var(--muted); font-weight:600;
  padding:6px 10px;
}
.app-footer a.active{color:var(--brand);}
.app-footer svg{width:22px;height:22px;}
@media(max-width:900px){
  .app-sidebar{
    position:fixed; left:-260px; top:12px; height:auto; min-height:0; max-height:calc(100vh - 24px); bottom:auto;
    border-radius:14px;
    transition:left .2s ease; box-shadow:0 8px 30px rgba(0,0,0,.35); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .app-sidebar.open{left:12px;}
  .app-menu-toggle{display:flex;}
  .app-shell{display:block;}
  .app-footer{display:flex;}
  .app-content{padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom, 0px) + 14px);}
}
@media(max-width:520px){
  .wallet-pill{padding:6px 9px; font-size:.75rem;}
}

.site-footer-full{
  background:var(--ink); color:#C9D1DB; padding:36px 16px 90px; margin-top:40px;
}
.site-footer-full .container{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between;}
.site-footer-full h4{color:#fff;margin:0 0 10px;}
.site-footer-full a{color:#C9D1DB;}
.site-footer-full .col{min-width:160px;}
.footer-bottom{text-align:center; font-size:.8rem; color:#8A93A3; margin-top:24px;}

/* ---------------- Hero ---------------- */
.hero{
  background:linear-gradient(160deg,var(--brand) 0%, var(--brand-dark) 100%);
  color:#fff; padding:38px 16px 60px; border-radius:0 0 28px 28px; text-align:center;
  position:relative; overflow:hidden;
}
.hero h1{font-size:1.5rem; margin:14px 0 5px; line-height:1.25;}
.hero p{opacity:.92; max-width:520px; margin:0 auto 20px; font-size:.95rem;}
.hero .hero-art{width:180px; margin:0 auto;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-accent{background:var(--accent); color:#3A2600;}
.btn-white{background:#fff; color:var(--brand-dark);}
.btn-primary{background:#FF7000; color:#fff;border-radius:var(--radius);}
.btn-outline{background:transparent; border:2px solid #FF7000; color:#FF7000;border-radius:var(--radius);}
.btn-block{width:100%;border-radius:var(--radius);}
.btn:active{transform:scale(.97);}
.btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------------- Cards / sections ---------------- */
.section{padding:28px 16px; max-width:var(--wrap-w); margin:0 auto;}
.section h2{font-size:1.3rem; margin-bottom:4px;}
.section .sub{color:var(--muted); margin-bottom:18px; font-size:.9rem;}

.card{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:14px;
}
.card-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.card-grid.cols-3{grid-template-columns:1fr 1fr 1fr;} .card-grid.cols-4{grid-template-columns:repeat(4,1fr);}}

.feature-card{text-align:center; padding:22px 16px;}
.feature-card .ic{
  width:56px;height:56px;border-radius:2px;background:var(--brand-light);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--brand);
}
.feature-card h3{font-size:1rem;margin:0 0 6px;}
.feature-card p{font-size:.85rem;color:var(--muted);margin:0;}

.stat-pill{
  background:var(--brand-light); color:var(--brand-dark); border-radius:var(--radius-sm);
  padding:14px; text-align:center;
}
.stat-pill .num{font-size:1.4rem; font-weight:800;}
.stat-pill .label{font-size:.75rem; color:var(--muted);}

/* ---------------- Forms ---------------- */
.form-group{margin-bottom:16px;}
label{display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--ink);}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],select,textarea{
  width:100%; padding:12px 14px; border:1.5px solid #E1E5EA; border-radius:var(--radius-sm);
  background:#fff; outline:none; transition:border-color .15s ease;
}
input:focus, select:focus, textarea:focus{border-color:var(--brand);}
.password-wrap{position:relative;}
.password-wrap .toggle-pass{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted); font-size:.8rem; font-weight:700;
}
.help-text{font-size:.75rem; color:var(--muted); margin-top:4px;}
/* serial-number: the red, bigger "Serial No." shown on every receipt design (see
   receipt_serial_number()) — deliberately a fixed red, not the employer's accent color, so it
   always stands out the same way regardless of the receipt's chosen theme. */
.serial-number{color:#D8000C; font-weight:800; font-size:1.35em;}
/* receipt-powered-by: the platform-wide "Powered by Paperless Kenya" statement (admin-controlled
   — see admin/receipt_footer_settings.php), shown at the bottom of every receipt design.
   Deliberately plain/neutral grey, not the employer's --theme-color, since it's platform
   branding rather than part of the business's own receipt design. */
.receipt-powered-by{text-align:center; margin-top:10px; font-size:8px; color:#888; line-height:1.5;}
.layout-thermal .thm-returns{text-align:left; margin-top:4px; font-size:9px;}
.layout-thermal .thm-powered-by{text-align:center; margin-top:8px; font-size:7.5px; color:#777; font-family:'Courier New', Courier, monospace;}
.error-box{background:#FDEDEB; color:var(--danger); padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.88rem;}
.success-box{background:#E9F9EF; color:var(--success); padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.88rem;}
.warning-box{background:#FFF6E5; color:#B8860B; padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.88rem;}
.auth-wrap{max-width:420px; margin:24px auto; padding:0 16px;}
.auth-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 22px;}
.auth-card h2{margin-top:0;}
.auth-links{text-align:center; margin-top:14px; font-size:.88rem; color:var(--muted);border-radius:var(--radius);}
.auth-links a{color:var(--brand); font-weight:700;border-radius:var(--radius);}
.oauth-buttons{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.btn-oauth{display:flex; align-items:center; justify-content:center; gap:10px; border-color:#ddd !important; color:#333 !important;}
.btn-oauth:hover{background:#f7f7f7;}
.auth-divider{display:flex; align-items:center; text-align:center; color:var(--muted); font-size:.8rem; margin:4px 0 18px;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; border-bottom:1px solid #e5e5e5;}
.auth-divider span{padding:0 12px;}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:.87rem;}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid #EEF1F4; white-space:nowrap;}
th{background:#FAFBFC; color:var(--muted); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em;}
tr:last-child td{border-bottom:none;}
.badge{padding:3px 10px; border-radius:2px; font-size:.72rem; font-weight:700;}
.badge-green{background:#E9F9EF; color:var(--success);}
.badge-orange{background:#FFF3E0; color:#B9760A;}
.badge-red{background:#FDEDEB; color:var(--danger);}
.badge-blue{background:#E6F0FD; color:#1D63D8;}

/* ---------------- Dashboard ---------------- */
.page-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.page-title h1{font-size:1.3rem; margin:0;}
.tab-row{display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; padding-bottom:4px;border-radius:var(--radius);}
.tab-row a{
  padding:9px 16px; border-radius:999px; background:#fff; border:1.5px solid #E1E5EA;
  font-size:.82rem; font-weight:700; color:var(--muted); white-space:nowrap;border-radius:var(--radius);
}
.tab-row a.active{background:var(--brand); color:#fff; border-color:var(--brand);border-radius:var(--radius);}

/* ---------------- Receipt visual ---------------- */
.receipt-paper{
  position:relative;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; max-width:420px; margin:0 auto; border-top:8px solid var(--theme-color, var(--brand));
}
/* head row: logo LEFT, business name centered, QR code small TOP-RIGHT */
.receipt-head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px;}
.receipt-head .biz-logo{width:44px;height:44px;border-radius:2px;object-fit:contain;flex:0 0 auto;}
.receipt-head .biz-id{flex:1; text-align:center; min-width:0;}
.receipt-head .biz-id h3{margin:0 0 2px; font-size:1.02rem;}
.receipt-qr-mini{flex:0 0 auto; text-align:center; width:52px;}
.receipt-qr-mini img{width:48px;height:48px; border-radius:2px; border:1px solid #E7EAEE;}
.receipt-qr-mini .qr-cap{font-size:.55rem; color:var(--muted); margin-top:2px; line-height:1.1;}
.receipt-paper .biz-logo{width:56px;height:56px;border-radius:2px;object-fit:contain;margin:0 auto 8px;}
.receipt-paper h3{text-align:center; margin:0 0 2px;}
.receipt-paper .biz-meta{text-align:center; font-size:.78rem; color:var(--muted); margin-bottom:14px;}
.receipt-paper .line{display:flex; justify-content:space-between; font-size:.85rem; padding:6px 0; border-bottom:1px dashed #E7EAEE;}
.receipt-paper .total-line{font-weight:800; font-size:1rem; border-top:2px solid var(--ink); margin-top:8px; padding-top:10px;}
.receipt-paper .qr-box{text-align:center; margin-top:16px;}
.qr-box img{width:60px;height:60px;}
.receipt-paper .stamp-mark{
  position:relative; text-align:center; margin-top:10px; color:var(--danger); font-weight:800;
  border:3px solid var(--danger); display:inline-block; padding:6px 16px; border-radius:2px;
  transform:rotate(-8deg); font-size:.8rem; opacity:.85;
}

/* Business stamp overlay (settings_stamp.php: "Receipt stamp") — a rubber-stamp-style box with
   the business name, the receipt date in red, and the business address, matching the supplied
   design. Drawn once, absolutely positioned over whichever receipt design is showing, rather
   than duplicated inside all 7 design templates — .stamp-overlay-wrap is the plain
   position:relative container user/receipt_view.php wraps the whole classic/emblem/.../official
   if/elseif chain in, so .receipt-stamp's top/left below is relative to that same box regardless
   of which design is active. Never rendered for the Thermal design (a continuous roll has no
   fixed page to stamp) — receipt_view.php simply skips outputting it when $template_key ===
   'thermal', and pv_draw_stamp_overlay() in receipt_pdf_render.php does the same for the PDF. */
/* Shrink-wrapped to match whichever design is actually showing, rather than a hardcoded
   max-width — the base .receipt-paper caps at 420px, but the Classic design
   (.layout-basic-receipt-template) overrides that to 480px, so a fixed value here would either
   leave empty space (positioning the stamp off to the side of the card, in that empty space) or,
   worse, shrink Classic's own card down to a narrower width than it's supposed to render at.
   width:fit-content + margin:0 auto keeps this a centered block that always hugs its child
   (.receipt-paper) at that child's own actual rendered width, so .receipt-stamp's percentage-
   based right/top values below are always measured against the real visible card, landing the
   stamp over the receipt itself instead of beside it in blank page space. */
.stamp-overlay-wrap{position:relative; width:fit-content; margin:0 auto;}
.receipt-stamp{
  position:absolute; left:50%; transform:translateX(-50%); width:150px; max-width:40%; box-sizing:border-box; padding:6px 10px;
  border:4px solid #0000ff; text-align:center; font-family:"Times New Roman", Times, serif;
}
.receipt-stamp .stamp-title{color:#0000ff; font-size:10px; font-weight:800; line-height:1.25; text-transform:uppercase; word-break:break-word; overflow-wrap:anywhere;}
.receipt-stamp .stamp-date{color:#ff0000; font-size:10px; font-weight:800; line-height:1.2; margin:5px 0 4px; text-transform:uppercase; word-break:break-word; overflow-wrap:anywhere;}
.receipt-stamp .stamp-address{color:#0000ff; font-size:9px; font-weight:800; line-height:1.25; text-transform:uppercase; word-break:break-word; overflow-wrap:anywhere;}
/* "top" and "middle" anchor from the wrapper's top edge (safe since the box can only grow
   downward from there); "bottom" anchors from the wrapper's BOTTOM edge instead of a percentage
   from the top, so however tall the box ends up (a long business name/address wraps onto extra
   lines, same as the PDF version's pv_stamp_layout()), it can never be pushed past the receipt's
   own bottom edge — the on-screen equivalent of the PDF's y1 clamp in pv_draw_stamp_overlay(). */
.receipt-stamp.stamp-pos-top{top:6%;}
.receipt-stamp.stamp-pos-middle{top:44%;}
.receipt-stamp.stamp-pos-bottom{bottom:5%; top:auto;}
@media(max-width:480px){
  .receipt-stamp{width:120px; padding:5px 8px; border-width:4px;}
  .receipt-stamp .stamp-title, .receipt-stamp .stamp-date{font-size:9px;}
  .receipt-stamp .stamp-address{font-size:8px;}
}

/* -------- Layout variants (structural, applied via .layout-*) — each modeled on a real sample receipt -------- */

/* 1. simple-boxed-bw: plain black-bordered box, centered title, dashed item rows */
.layout-simple-boxed-bw{border:2px solid var(--ink);}
.layout-simple-boxed-bw .receipt-head .biz-id{text-align:center;}

/* 2. gold-bordered: warm double border, centered serif-ish title */
.layout-gold-bordered{border:3px double var(--theme-color, #8A6A1E); background:#FBFAF7;}
.layout-gold-bordered .receipt-head .biz-id h3{letter-spacing:.03em;}
.layout-gold-bordered .line{border-bottom:1px solid color-mix(in srgb, var(--theme-color, #8A6A1E) 35%, #fff);}

/* 3. bold-black-header: oversized bold title, grey section bar */
.layout-bold-black-header{border-top:none; padding-top:26px;}
.layout-bold-black-header .receipt-head .biz-id h3{font-size:1.5rem; font-weight:800; text-align:left; letter-spacing:-.01em;}
.layout-bold-black-header .receipt-head .biz-meta{text-align:left;}
.layout-bold-black-header .line{border-bottom:1px solid #EEF1F4;}

/* 4. paid-watermark-blue: blue text accents + diagonal PAID watermark behind items */
.layout-paid-watermark-blue{position:relative; border-top:2px solid var(--theme-color, #3C6E9F);}
.layout-paid-watermark-blue .receipt-head .biz-id h3{color:var(--theme-color, #3C6E9F);}
.layout-paid-watermark-blue .line{border-bottom:1px dotted #ccc;}
.layout-paid-watermark-blue .paid-watermark{
  position:absolute; top:45%; left:50%; transform:translate(-50%,-50%) rotate(-28deg);
  font-size:3rem; font-weight:800; color:rgba(140,140,140,.25); letter-spacing:.1em; pointer-events:none; z-index:0;
}

/* 5. grey-composite: grey header bars, boxed summary like a "basic receipt template" */
.layout-grey-composite .receipt-head .biz-id h3{color:#8C8C8C; text-transform:uppercase; font-size:1.1rem;}
.layout-grey-composite .line{background:#FAFAFA;}
.layout-grey-composite .total-line{background:#EDEDED; padding:10px; border-top:none;}

/* 6. corporate-clean: crisp left-aligned invoice style, thin rules */
.layout-corporate-clean .receipt-head{text-align:left;}
.layout-corporate-clean .receipt-head .biz-id{text-align:left;}
.layout-corporate-clean .line{border-bottom:1px solid #F0F0F0;}
.layout-corporate-clean .total-line{background:#F5F5F5; border-top:none; padding:10px;}

/* 7. cafe-grey-barcode: bold grey centered thermal-cafe style with barcode footer */
.layout-cafe-grey-barcode{color:#6b6b6b; text-align:center;}
.layout-cafe-grey-barcode .receipt-head{flex-direction:column; align-items:center;}
.layout-cafe-grey-barcode .receipt-head .biz-id h3{font-size:1.2rem; font-weight:800;}
.layout-cafe-grey-barcode .line{border-bottom:none; font-weight:700;}
.layout-cafe-grey-barcode .barcode{height:34px; margin:14px auto 0; max-width:220px;
  background:repeating-linear-gradient(90deg,#888 0 2px,transparent 2px 5px);}

/* 8. thermal-cut: monospace POS till slip */
.layout-thermal-cut{font-family:'Courier New',monospace; max-width:300px; border-top:2px dashed var(--ink); background:#fff;}
.layout-thermal-cut .receipt-head .biz-id h3{font-size:.92rem; text-transform:uppercase;}
.layout-thermal-cut .line{border-bottom:1px dashed #ccc; font-size:.78rem;}

/* 9. packing-slip-grey: itemized document style with light navy accents */
.layout-packing-slip-grey .receipt-head .biz-id{text-align:left;}
.layout-packing-slip-grey .biz-meta{color:#3C6E9F;}
.layout-packing-slip-grey .line{border-bottom:1px solid #E3E9F0;}

/* 10. purple-curve: bold gradient curved header banner (boutique/retail style) */
.layout-purple-curve{padding-top:0; overflow:hidden;}
.layout-purple-curve .receipt-head{
  background:linear-gradient(120deg, var(--theme-color, #7B2D8B), color-mix(in srgb, var(--theme-color, #7B2D8B) 65%, #000));
  margin:-22px -22px 16px; padding:20px 22px 26px; border-radius:0 0 22px 22px; color:#fff;
}
.layout-purple-curve .receipt-head .biz-id h3{color:#fff;}
.layout-purple-curve .receipt-head .biz-meta,
.layout-purple-curve .receipt-head .qr-cap{color:rgba(255,255,255,.85);}

/* 11. cash-sale-invoice: solid colour banner header + M/s line + E.&O.E footer, modeled on a genuine
   Kenyan carbon-book "Cash Sale" invoice */
.layout-cash-sale-invoice{padding-top:0;}
.layout-cash-sale-invoice .receipt-head{
  background:var(--theme-color, var(--brand)); color:#fff; margin:-22px -22px 16px; padding:20px 22px;
}
.layout-cash-sale-invoice .receipt-head .biz-id h3{color:#fff;}
.layout-cash-sale-invoice .receipt-head .biz-meta,
.layout-cash-sale-invoice .receipt-head .qr-cap{color:rgba(255,255,255,.85);}
.layout-cash-sale-invoice .ms-line{margin:0 0 14px; font-size:.85rem; border-bottom:1px solid #E1E5EA; padding-bottom:8px; color:var(--ink);}
.layout-cash-sale-invoice .eoe-footer{display:flex; justify-content:space-between; margin-top:6px; font-size:.72rem; color:var(--muted);}
.layout-cash-sale-invoice .returns-line{text-align:center; font-size:.75rem; color:var(--muted); margin-top:10px;}

/* 12. basic-receipt-template: two-column company/receipt-info header, sales-person + receipt-info
   grey label/value tables, numbered items table, remarks+totals grid, payment-method checkboxes,
   and a dashed-separator "customer copy" duplicate underneath — modeled directly on the classic
   two-part paper receipt pad layout. Kept monochrome/grey to match the source design exactly
   rather than tinted by the theme color picker. */
.layout-basic-receipt-template{padding:20px; max-width:480px; font-size:10px; color:#222; border-top:6px solid var(--theme-color, #555);}
.layout-basic-receipt-template .lbr-title{font-size:16px; font-weight:700; color:var(--theme-color, #555); letter-spacing:.5px; margin-bottom:10px; text-align:left;}
.layout-basic-receipt-template .lbr-top{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px;}
.layout-basic-receipt-template .lbr-company{line-height:1.7; padding-left:2px; font-size:9.5px;}
.layout-basic-receipt-template .lbr-dealers{font-size:8.5px; font-style:italic; color:#555; margin-top:2px; max-width:175px;}
.layout-basic-receipt-template .lbr-company .lbr-company-name{font-size:11px; font-weight:600; margin-bottom:2px; color:#222;}
.layout-basic-receipt-template table.lbr-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:9px;}
.layout-basic-receipt-template table.lbr-table td{border:1px solid #aaa; padding:3px 6px; height:19px;}
.layout-basic-receipt-template table.lbr-table td.lbr-label{background:var(--theme-color, #888); color:#fff; font-size:8.5px; text-transform:uppercase; width:38%;}
.layout-basic-receipt-template table.lbr-table td.lbr-value{background:#f5f5f5; text-align:center;}
.layout-basic-receipt-template .lbr-customer{line-height:1.7; margin:8px 0 0; font-size:9.5px;}
.layout-basic-receipt-template .lbr-customer .lbr-attn{font-weight:600;}
.layout-basic-receipt-template table.lbr-items{width:100%; border-collapse:collapse; margin-top:10px; table-layout:fixed;}
.layout-basic-receipt-template table.lbr-items th{background:var(--theme-color, #858585); color:#fff; font-weight:400; text-transform:uppercase; font-size:8.5px; padding:4px 5px; border:1px solid color-mix(in srgb, var(--theme-color, #858585) 70%, #000);}
.layout-basic-receipt-template table.lbr-items td{border:1px solid #aaa; padding:3px 6px; font-size:9px;}
.layout-basic-receipt-template table.lbr-items th:nth-child(1), .layout-basic-receipt-template table.lbr-items td:nth-child(1){width:13%;}
.layout-basic-receipt-template table.lbr-items th:nth-child(2), .layout-basic-receipt-template table.lbr-items td:nth-child(2){width:39%; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}
.layout-basic-receipt-template table.lbr-items th:nth-child(3), .layout-basic-receipt-template table.lbr-items td:nth-child(3){width:10%; text-align:center;}
.layout-basic-receipt-template table.lbr-items th:nth-child(4), .layout-basic-receipt-template table.lbr-items td:nth-child(4){width:19%; text-align:right;}
.layout-basic-receipt-template table.lbr-items th:nth-child(5), .layout-basic-receipt-template table.lbr-items td:nth-child(5){width:19%; text-align:right;}
.layout-basic-receipt-template .lbr-bottom{display:grid; grid-template-columns:1fr 48%; gap:10px; margin-top:8px; align-items:start;}
.layout-basic-receipt-template .lbr-remarks{font-size:9px;}
.layout-basic-receipt-template .lbr-remarks-title{margin-bottom:10px;}
.layout-basic-receipt-template .lbr-remarks-message{text-align:left; color:#777; font-style:italic; margin-bottom:16px; font-size:9px;}
.layout-basic-receipt-template .lbr-thank-you{text-align:center; color:var(--theme-color, #777); font-size:12px; letter-spacing:1px; font-weight:700;}
.layout-basic-receipt-template .lbr-thank-buyer{text-align:center; color:#444; font-size:9px; margin-top:2px;}
.layout-basic-receipt-template table.lbr-totals{width:100%; border-collapse:collapse;}
.layout-basic-receipt-template table.lbr-totals td{border:1px solid #aaa; padding:3px 7px; font-size:9px; height:19px;}
.layout-basic-receipt-template table.lbr-totals td:first-child{background:color-mix(in srgb, var(--theme-color, #888) 12%, #fff); text-transform:uppercase; width:60%;}
.layout-basic-receipt-template table.lbr-totals td:last-child{text-align:right; font-weight:500;}
.layout-basic-receipt-template table.lbr-totals tr.lbr-grand-total td{font-weight:700; color:var(--theme-color, #222);}
.layout-basic-receipt-template .lbr-payment-methods{display:flex; justify-content:center; gap:22px; margin:10px 0; font-size:9px; flex-wrap:wrap;}
.layout-basic-receipt-template .lbr-payment-method{display:flex; align-items:center; gap:5px;}
.layout-basic-receipt-template .lbr-payment-box{width:12px; height:12px; border:1px solid #888; display:inline-block; text-align:center; line-height:11px; font-size:9px;}
.layout-basic-receipt-template .lbr-payment-box.checked{background:var(--theme-color, #555); border-color:var(--theme-color, #555); color:#fff; font-weight:700;}
.layout-basic-receipt-template .lbr-contact-note{text-align:center; font-style:italic; font-size:8.5px; margin-top:8px; color:#444;}
.layout-basic-receipt-template .lbr-website{text-align:center; font-size:10px; margin-top:6px; color:var(--theme-color, #333);}
.layout-basic-receipt-template .lbr-separator{border-top:1px dashed var(--theme-color, #777); margin:12px 0;}
.layout-basic-receipt-template .lbr-copy-header{display:grid; grid-template-columns:1fr 1fr; align-items:center; margin-bottom:6px;}
.layout-basic-receipt-template .lbr-copy-label{background:var(--theme-color, #aaa); color:#fff; padding:4px; text-align:center; font-weight:700; font-size:9px;}
.layout-basic-receipt-template .lbr-copy-title{text-align:right; color:var(--theme-color, #777); font-size:15px; font-weight:300;}
.layout-basic-receipt-template .lbr-copy-section{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.layout-basic-receipt-template .lbr-copy-company{line-height:1.7; font-size:9.5px;}
.layout-basic-receipt-template table.lbr-copy-info{width:100%; border-collapse:collapse;}
.layout-basic-receipt-template table.lbr-copy-info td{border:1px solid #aaa; padding:3px 7px; height:19px; font-size:9px;}
.layout-basic-receipt-template table.lbr-copy-info td.lbr-label{width:42%; background:var(--theme-color, #888); color:#fff; text-transform:uppercase; font-size:8px;}
.layout-basic-receipt-template table.lbr-copy-info td.lbr-value{text-align:right; background:#f8f8f8;}
.layout-basic-receipt-template .lbr-copy-footer{display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; margin-top:10px; line-height:1.6; font-size:8.5px; color:#333;}
.layout-basic-receipt-template .receipt-qr-mini{position:absolute; top:20px; right:20px;}
.layout-basic-receipt-template .stamp-mark{margin:10px auto;}
@media(max-width:480px){
  .layout-basic-receipt-template .lbr-top,
  .layout-basic-receipt-template .lbr-copy-section{grid-template-columns:1fr; gap:8px;}
  .layout-basic-receipt-template .lbr-bottom{grid-template-columns:1fr;}
  .layout-basic-receipt-template .lbr-copy-footer{grid-template-columns:1fr;}
  .layout-basic-receipt-template .lbr-copy-title{text-align:left;}
}

/* 13. emblem: circular rotated logo monogram, underlined italic company name, boxed "RECEIPT"
   title, thick top rule, M/S + Date/Receipt No. details grid, QTY/PARTICULARS/@/KSHS/CTS table —
   modeled on a classic Kenyan petroleum/hardware trader's carbon-book receipt. */
.layout-emblem{padding:20px; font-family:Georgia,'Times New Roman',serif; color:var(--theme-color, #353584); border-top:none;}
.layout-emblem .emb-header{text-align:center;}
.layout-emblem .emb-logo-img{width:44px;height:44px;object-fit:contain;margin:0 auto 8px;display:block;}
.layout-emblem .emb-company{font-family:Arial,sans-serif; font-style:italic; font-weight:800; font-size:15px; text-decoration:underline; text-underline-offset:3px;}
.layout-emblem .emb-tagline{margin-top:5px; font-style:italic; font-weight:700; font-size:9.5px; line-height:1.35; text-align:center;}
.layout-emblem .emb-contact{display:grid; grid-template-columns:1fr 1fr; margin-top:8px; font-style:italic; font-size:8.5px; line-height:1.5;}
.layout-emblem .emb-contact .right{text-align:right; padding-top:56px;}
.layout-emblem .emb-title{display:inline-block; margin:10px auto 8px; padding:2px 14px; border:3px solid var(--theme-color, #353584); border-radius:6px; font-size:14px; font-weight:700; letter-spacing:1px; text-align:center; width:fit-content;}
.layout-emblem .emb-rule{border-top:4px solid var(--theme-color, #353584); margin-bottom:10px;}
.layout-emblem .emb-details{display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:9px; margin-bottom:8px;}
.layout-emblem .emb-details-left div{margin-bottom:5px;}
.layout-emblem .emb-details-right label{font-weight:700;}
.layout-emblem .emb-details-right div{margin-bottom:5px;}
.layout-emblem table.emb-items{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8.5px;}
.layout-emblem table.emb-items th, .layout-emblem table.emb-items td{border:1.5px solid var(--theme-color, #353584); padding:4px 3px; text-align:center;}
.layout-emblem table.emb-items th.particulars, .layout-emblem table.emb-items td.particulars{text-align:left; padding-left:5px; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}
.layout-emblem table.emb-items th{font-weight:700;}
.layout-emblem table.emb-items td.qty{width:10%;} .layout-emblem table.emb-items td.particulars{width:48%;}
.layout-emblem table.emb-items td.at{width:16%;} .layout-emblem table.emb-items td.ksh{width:16%;} .layout-emblem table.emb-items td.cts{width:10%;}
.layout-emblem tr.emb-total td{font-weight:700; font-size:9px;}
.layout-emblem .emb-total-label{text-align:right !important; padding-right:8px !important;}
.layout-emblem .emb-subtotals{text-align:right; font-size:8.5px; margin-top:6px; line-height:1.6;}
.layout-emblem .emb-footer{text-align:center; margin-top:10px; font-style:italic; font-weight:700; font-size:10px;}
.layout-emblem .emb-returns{text-align:left; margin-top:6px; font-size:8px; color:var(--theme-color, #353584);}
.layout-emblem .emb-served-by{text-align:center; margin-top:4px; font-size:8px; color:var(--theme-color, #353584);}
.layout-emblem .emb-thank-buyer{text-align:center; margin-top:2px; font-size:8px; color:#555;}

/* 14. banner: colored pill "RECEIPT" title, bold serif company name, rounded info box,
   colored header row table, colored total banner — modeled on a printer/graphics-shop style
   Kenyan carbon-book receipt. */
.layout-banner{padding:20px; font-family:Arial,Helvetica,sans-serif; color:var(--theme-color, #353584); border-top:none;}
.layout-banner .ban-header{text-align:center;}
.layout-banner .ban-title{display:inline-block; background:var(--theme-color, #353584); color:#fff; padding:3px 16px 4px; border-radius:8px; font-family:Georgia,serif; font-size:15px; font-weight:700; letter-spacing:1px; margin-bottom:8px;}
.layout-banner .ban-company{font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:14px; letter-spacing:.5px; margin-bottom:3px;}
.layout-banner .ban-contact{font-size:8.5px; line-height:1.4;}
.layout-banner .ban-info-box{border:2px solid color-mix(in srgb, var(--theme-color, #353584) 60%, #4a4a91); border-radius:12px; padding:8px 10px; margin:10px 0 8px;}
.layout-banner .ban-info-row{display:grid; grid-template-columns:44px 1fr 44px 1fr; gap:5px; align-items:end; font-size:8.5px; margin-bottom:6px;}
.layout-banner .ban-info-row:last-child{margin-bottom:0;}
.layout-banner .ban-info-row .label{font-weight:700;}
.layout-banner .ban-info-row .line{border-bottom:1px solid #999; padding-bottom:1px;}
.layout-banner table.ban-items{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8.5px;}
.layout-banner table.ban-items th, .layout-banner table.ban-items td{border:1.5px solid color-mix(in srgb, var(--theme-color, #353584) 60%, #4a4a91); padding:4px 3px; text-align:center;}
.layout-banner table.ban-items th{background:var(--theme-color, #353584); color:#fff; font-weight:700;}
.layout-banner table.ban-items th.description, .layout-banner table.ban-items td.description{text-align:left; padding-left:5px; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}
.layout-banner table.ban-items td.qty{width:9%;} .layout-banner table.ban-items td.description{width:45%;}
.layout-banner table.ban-items td.at{width:16%;} .layout-banner table.ban-items td.ksh{width:16%;} .layout-banner table.ban-items td.cts{width:10%;}
.layout-banner .ban-receipt-no{color:#d83f4d; font-weight:700; text-align:left !important; padding-left:6px !important;}
.layout-banner .ban-total-word{background:var(--theme-color, #353584); color:#fff; font-weight:700;}
.layout-banner .ban-subtotals{text-align:right; font-size:8.5px; margin-top:6px; line-height:1.6;}
.layout-banner .ban-footer{text-align:center; margin-top:10px; font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:10px;}
.layout-banner .ban-returns{text-align:left; margin-top:6px; font-size:8px; color:var(--theme-color, #353584);}
.layout-banner .ban-thank-buyer{text-align:center; margin-top:4px; font-size:8px; color:#555;}

/* 15. ledger: bordered navy carbon-ledger receipt — centered business name/dealers-in block,
   location/"CASH SALE"/tel strip, Date + M/s lines, boxed QTY/PARTICULARS/@/SHS/CTS table (9
   blank-padded rows), E&O.E/No./TOTAL row — modeled on a hardware/building-materials trader's
   ledger-pad receipt (Times New Roman body, Arial bold headings). */
.layout-ledger{padding:16px; font-family:'Times New Roman',Georgia,serif; color:var(--theme-color, #20208e); border:2px solid var(--theme-color, #20208e); border-top:2px solid var(--theme-color, #20208e);}
.layout-ledger .ldg-head{text-align:center; margin-bottom:2px;}
.layout-ledger .ldg-company{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:15px; line-height:1.2;}
.layout-ledger .ldg-dealers{font-size:8.5px; line-height:1.35; margin-top:3px;}
.layout-ledger .ldg-strip{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin:8px 0 4px;}
.layout-ledger .ldg-address{font-size:8.5px; line-height:1.3; flex:1;}
.layout-ledger .ldg-cash-sale{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:12px; text-decoration:underline; text-align:center; white-space:nowrap;}
.layout-ledger .ldg-tel{font-size:8.5px; line-height:1.3; text-align:right; flex:1;}
.layout-ledger .ldg-date{text-align:right; font-size:8.5px; margin-bottom:4px;}
.layout-ledger .ldg-ms{font-size:8.5px; margin-bottom:8px;}
.layout-ledger .ldg-ms span{border-bottom:1px dotted var(--theme-color, #20208e); padding-bottom:1px; margin-left:4px;}
.layout-ledger table.ldg-items{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8.5px; border:2px solid var(--theme-color, #20208e);}
.layout-ledger table.ldg-items th, .layout-ledger table.ldg-items td{border:1px solid var(--theme-color, #20208e); padding:3px 3px; text-align:center; height:16px;}
.layout-ledger table.ldg-items th{font-weight:400;}
.layout-ledger table.ldg-items th.particulars, .layout-ledger table.ldg-items td.particulars{text-align:left; padding-left:4px; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}
.layout-ledger table.ldg-items td.qty{width:12%;} .layout-ledger table.ldg-items td.particulars{width:52%;}
.layout-ledger table.ldg-items td.at{width:10%;} .layout-ledger table.ldg-items td.shs{width:14%;} .layout-ledger table.ldg-items td.cts{width:12%;}
.layout-ledger tr.ldg-total td{font-weight:700; font-size:8.5px;}
.layout-ledger .ldg-total-word{text-align:center !important;}
.layout-ledger .ldg-subtotals{text-align:right; font-size:8.5px; margin-top:6px; line-height:1.6;}
.layout-ledger .ldg-served-by{text-align:left; margin-top:6px; font-size:8px; color:#555;}
.layout-ledger .ldg-footer{text-align:left; margin-top:8px; font-style:italic; font-size:9px;}
.layout-ledger .ldg-thank-buyer{text-align:center; margin-top:4px; font-size:8px; color:#555;}

/* 16. compact: A6-style navy cash receipt — motto pill under the business name, phone/office
   two-column contact block, colored "Cash Receipt" pill title, QTY/DESCRIPTION/RATE/AMOUNT table
   (9 blank-padded rows), bold total row, "Amount in words" line — modeled on a compact
   chemical/FMCG distributor's cash receipt (Arial throughout). */
.layout-compact{padding:16px; font-family:Arial,Helvetica,sans-serif; color:var(--theme-color, #003399); border-top:none; position:relative;}
.layout-compact .cpt-company{text-align:center; font-size:14px; font-weight:800; line-height:1.15;}
.layout-compact .cpt-motto{display:table; margin:4px auto; padding:2px 14px; border:1px solid var(--theme-color, #003399); border-radius:15px; font-size:8.5px; font-style:italic; font-weight:600; white-space:nowrap;}
.layout-compact .cpt-dealers{text-align:center; font-size:8px; font-weight:500; line-height:1.3; margin-bottom:4px;}
.layout-compact .cpt-header-info{display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:end; margin-bottom:6px; font-size:8px; line-height:1.3;}
.layout-compact .cpt-office{text-align:right;}
.layout-compact .cpt-title{text-align:center; margin:2px 0 6px;}
.layout-compact .cpt-title span{display:inline-block; background:var(--theme-color, #003399); color:#fff; padding:3px 15px; font-size:10px; font-weight:800;}
.layout-compact .cpt-qr{position:absolute; top:14px; right:14px;}
.layout-compact .cpt-meta{font-size:8.5px; margin-bottom:4px; line-height:1.5;}
.layout-compact table.cpt-table{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8px; border:1px solid var(--theme-color, #003399);}
.layout-compact table.cpt-table th, .layout-compact table.cpt-table td{border:1px solid var(--theme-color, #003399); padding:2px 3px; text-align:center;}
.layout-compact table.cpt-table th{background:var(--theme-color, #003399); color:#fff; font-weight:800;}
.layout-compact table.cpt-table th.description, .layout-compact table.cpt-table td.description{text-align:left; padding-left:4px; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}
.layout-compact table.cpt-table td.qty{width:12%;} .layout-compact table.cpt-table td.description{width:50%;}
.layout-compact table.cpt-table td.rate{width:18%;} .layout-compact table.cpt-table td.amount{width:20%;}
.layout-compact .cpt-currency{display:block; font-size:8px; margin-top:1px;}
.layout-compact .cpt-total-label{text-align:right !important; font-size:8px !important; padding-right:4px !important; font-weight:800;}
.layout-compact .cpt-total-value{font-weight:800;}
.layout-compact .cpt-subtotals{text-align:right; font-size:8px; margin-top:6px; line-height:1.6;}
.layout-compact .cpt-words{margin-top:8px; font-size:8.5px; font-weight:700;}
.layout-compact .cpt-words-value{font-weight:400; border-bottom:1px solid var(--theme-color, #003399);}
.layout-compact .cpt-served-by{margin-top:6px; font-size:8px; color:var(--theme-color, #003399);}
.layout-compact .cpt-returns{text-align:left; margin-top:6px; font-size:8px; color:var(--theme-color, #003399);}
.layout-compact .cpt-thank-buyer{margin-top:4px; font-size:8px; font-weight:700; color:#333;}

/* 17. thermal: 80mm continuous-roll style — monospace throughout (like a real POS printer font),
   dotted-line rules between sections instead of boxes/tables, one line per item with an indented
   qty x price line and the extended total right-aligned, a plain totals block, and a closing
   "Thank you" line. Narrower than the other 5 designs (they're ~420px "paper", this is ~300px —
   80mm at screen resolution) since it's meant to visually read as a thermal receipt strip, not a
   full-size page. */
/* Thermal receipts are always monochrome, like a normal thermal printer. They must not inherit
   the employer Receipt color, Product/service & customer details color, or stamp color. */
.layout-thermal{max-width:300px; padding:14px 12px; font-family:'Courier New', Courier, monospace; color:#111; --theme-color:#111; --fill-color:#111;}
/* 57mm/2 1/4" roll (settings_design.php: "Thermal printer width") — narrower than the default
   80mm roll above, proportioned the same way (300px * 57/80 ≈ 214px) so the on-screen preview
   matches the roll width actually picked for this receipt (see user/receipt_view.php, which adds
   this class based on receipts.thermal_width). The item/total row rules below already guard
   against overlap at this narrower width regardless. */
.layout-thermal.thm-narrow{max-width:214px;}
/* Thermal keeps "Serial No." in the employer's receipt color rather than using the separate
   filled-in details color, because it is part of the printed receipt template. */
.layout-thermal .serial-number{color:#111; font-weight:400; font-size:1em;}
.layout-thermal .thm-company{text-align:center; font-weight:700; font-size:13px; letter-spacing:0.5px; word-break:break-word;}
.layout-thermal .thm-line{font-size:10px; line-height:1.5; text-align:center; word-break:break-word;}
.layout-thermal .thm-dots{border-top:1px dotted #111; margin:8px 0;}
.layout-thermal .thm-item-name{font-size:10px; font-weight:700; margin-top:4px; word-break:break-word;}
/* flex-wrap + min-width:0 on the two spans below mean a long "qty x price" value that can't fit
   next to its total on the narrower 57mm roll wraps onto its own line instead of the two
   overlapping or forcing the row to overflow past the receipt's edge — the on-screen equivalent
   of the PDF's pv_lr_fits()-driven line-break. */
.layout-thermal .thm-item-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 6px; font-size:10px; padding-left:10px;}
.layout-thermal .thm-item-row span{min-width:0; word-break:break-word;}
.layout-thermal .thm-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 6px; font-size:10px; line-height:1.6;}
.layout-thermal .thm-row span{min-width:0; word-break:break-word;}
.layout-thermal .thm-total{font-weight:700; font-size:12px; color:#111;}
.layout-thermal .thm-qr{display:flex; justify-content:center; margin-top:6px;}
.layout-thermal .thm-qr img{width:64px; height:64px;}
.layout-thermal .thm-scan-label{text-align:center; font-size:8px; color:#777; margin-top:2px;}
.layout-thermal .thm-thank-buyer{text-align:center; font-weight:700; font-size:10px; margin-top:8px; word-break:break-word;}

/* 18. voucher: old-style cash-receipt-book counterfoil — underlined business name, "OFFICIAL
   RECEIPT" subtitle, a bold red serial number, then a series of ruled fill-in-the-blank lines
   ("Received from:", "the sum of shillings:", "Being payment of:") instead of an itemized
   table, closing with a right-aligned "For {business}" signature line. Renders in the
   employer's chosen accent color throughout (unlike Thermal's fixed monochrome), echoing the
   colored-ink look of the original paper counterfoil. */
.layout-voucher{padding:18px 16px; font-family:Arial,Helvetica,sans-serif; color:var(--theme-color, #1c7a4d); border-top:none;}
.layout-voucher .voc-logo{width:36px;height:36px;object-fit:contain;margin:0 auto 6px;display:block;}
.layout-voucher .voc-company{text-align:center; font-weight:800; font-size:15px; text-decoration:underline; letter-spacing:.3px; word-break:break-word;}
.layout-voucher .voc-title{text-align:center; font-weight:700; font-size:10.5px; text-decoration:underline; margin-top:4px;}
.layout-voucher .voc-contact{text-align:center; font-size:8.5px; line-height:1.5; margin-top:8px; word-break:break-word;}
.layout-voucher .voc-meta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px; margin-top:12px;}
.layout-voucher .voc-serial{font-weight:800; font-size:17px; color:#C93636;}
.layout-voucher .voc-date{font-size:9.5px;}
/* flex-wrap + min-width:0 on the value span mean a long buyer name/amount-in-words/item list
   wraps onto its own extra line beneath the label instead of overflowing the ruled line or
   overlapping the label — same "never overlap" guarantee as the Thermal design's item rows. */
.layout-voucher .voc-line{display:flex; flex-wrap:wrap; gap:2px 6px; align-items:baseline; margin-top:10px; font-size:9.5px; border-bottom:1px solid var(--theme-color, #1c7a4d); padding-bottom:3px;}
.layout-voucher .voc-label{white-space:nowrap;}
.layout-voucher .voc-value{flex:1; min-width:120px; word-break:break-word; font-weight:600;}
.layout-voucher .voc-rule{border-top:1px solid var(--theme-color, #1c7a4d); margin:12px 0;}
.layout-voucher .voc-amount{margin-top:12px; font-size:13px; font-weight:800;}
.layout-voucher .voc-amount span{border-bottom:1px solid var(--theme-color, #1c7a4d); padding-bottom:2px;}
.layout-voucher .voc-signature{text-align:center; margin-top:24px; padding-top:6px; border-top:1px solid var(--theme-color, #1c7a4d); width:150px; margin-left:auto; margin-right:0; font-weight:700; font-size:9px; word-break:break-word;}
.layout-voucher .voc-served-by{text-align:left; margin-top:8px; font-size:8px; color:var(--theme-color, #1c7a4d);}
.layout-voucher .voc-returns{text-align:left; margin-top:8px; font-size:8px; color:#555;}
.layout-voucher .voc-thank-buyer{text-align:center; margin-top:4px; font-size:8.5px; color:#555;}

/* 19. official: formal boxed A6-style accounting receipt — underlined "OFFICIAL RECEIPT" title,
   a bordered Receipt No/Date/Payment Method info table, a "Received From:" section, a bordered
   Description/Qty/Amount items table and a bold "TOTAL PAID" line. Times New Roman throughout,
   matching a plain paperwork form rather than the other designs' branded/colored look. */
.layout-official{padding:16px; font-family:'Times New Roman',Georgia,serif; color:var(--theme-color, #1B2A55); border:1px solid var(--theme-color, #1B2A55); border-top:1px solid var(--theme-color, #1B2A55);}
.layout-official .off-title{text-align:center; font-weight:700; font-size:14px; text-decoration:underline; text-transform:uppercase;}
.layout-official .off-logo{width:30px;height:30px;object-fit:contain;margin:6px auto 0;display:block;}
.layout-official .off-company{text-align:center; font-weight:700; font-size:11px; margin-top:6px; color:#111;}
.layout-official .off-contact{text-align:center; font-size:8px; line-height:1.4; color:#333; margin-top:2px; word-break:break-word;}
.layout-official .off-rule{border-top:1px dashed #666; margin:8px 30px;}
.layout-official table.off-info{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8px; margin-top:6px;}
.layout-official table.off-info td{border:1px solid var(--theme-color, #1B2A55); padding:2px 5px; word-break:break-word;}
.layout-official table.off-info td:first-child{width:48%; font-weight:700;}
.layout-official .off-received{margin-top:8px; font-size:8.5px; color:#222;}
.layout-official .off-section-title{font-weight:700; margin-bottom:3px; color:var(--theme-color, #1B2A55);}
.layout-official table.off-items{width:100%; border-collapse:collapse; table-layout:fixed; font-size:8px; margin-top:6px;}
.layout-official table.off-items th, .layout-official table.off-items td{border:1px solid var(--theme-color, #1B2A55); padding:2px 4px; vertical-align:top;}
.layout-official table.off-items th{font-weight:700; text-align:left;}
.layout-official table.off-items td:nth-child(1), .layout-official table.off-items th:nth-child(1){width:56%; text-align:left; word-break:break-word; overflow-wrap:anywhere;}
.layout-official table.off-items td:nth-child(2), .layout-official table.off-items th:nth-child(2){width:14%; text-align:right;}
.layout-official table.off-items td:nth-child(3), .layout-official table.off-items th:nth-child(3){width:30%; text-align:right;}
.layout-official .off-total{text-align:right; font-weight:700; font-size:9.5px; margin-top:6px;}
.layout-official .off-subtotals{text-align:right; font-size:7.5px; color:#333; margin-top:4px; line-height:1.6;}
.layout-official .off-served-by{margin-top:6px; font-size:7.5px; color:var(--theme-color, #1c7a4d);}
.layout-official .off-footer{text-align:center; margin-top:8px; font-weight:700; font-style:italic; font-size:9px;}

@media(max-width:480px){
  .layout-emblem .emb-details, .layout-emblem .emb-contact{grid-template-columns:1fr; gap:4px;}
  .layout-emblem .emb-contact .right{text-align:left; padding-top:0;}
  .layout-banner .ban-info-row{grid-template-columns:52px 1fr;}
  .layout-ledger .ldg-strip{flex-wrap:wrap;}
  .layout-ledger .ldg-tel{text-align:left;}
  .layout-compact .cpt-header-info{grid-template-columns:1fr; gap:2px;}
  .layout-compact .cpt-office{text-align:left;}
}


/* -------- Stamp shapes (applied via .stamp-<shape>) -------- */
.stamp-mark{display:inline-flex; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:.72rem; opacity:.88; letter-spacing:.03em;}
.receipt-paper .conditions-block{margin-top:14px; font-size:.68rem; color:var(--muted); line-height:1.4;}
.receipt-paper .thank-you-message{margin-top:14px; text-align:center; font-weight:800; font-size:.82rem; color:var(--ink); letter-spacing:.02em;}
.receipt-paper .conditions-block .tc-title{font-weight:700; margin-top:6px; display:block;}
.stamp-circle-blue{width:96px;height:96px;border-radius:2px;border:3px double #1D63D8;color:#1D63D8;transform:rotate(-10deg);}
.stamp-circle-red{width:96px;height:96px;border-radius:2px;border:3px solid #D9483B;color:#D9483B;transform:rotate(8deg);}
.stamp-rect-navy{width:130px;height:60px;border-radius:2px;border:3px solid #1B2A55;color:#1B2A55;transform:rotate(-4deg);}
.stamp-oval-green{width:120px;height:70px;border-radius:50%;border:3px solid #1E9E5A;color:#1E9E5A;transform:rotate(6deg);}
.stamp-circle-black{width:96px;height:96px;border-radius:50%;border:4px double #111;color:#111;transform:rotate(-6deg);}
.stamp-badge-teal{width:100px;height:100px;border-radius:2px;border:3px solid #0E8C8C;color:#0E8C8C;transform:rotate(4deg);}
.stamp-star-gold{width:100px;height:100px;border-radius:50%;border:3px dashed #A9781E;color:#A9781E;transform:rotate(-8deg);}
.stamp-ring-navy{width:100px;height:100px;border-radius:50%;border:6px double #1B2A55;color:#1B2A55;transform:rotate(10deg);}
.stamp-bold-paid{width:140px;height:56px;border-radius:2px;border:4px solid #D9483B;color:#D9483B;font-size:1rem;transform:rotate(-6deg);}
.stamp-signature-style{width:140px;height:60px;border-radius:2px;border:2px solid #6B7688;color:#333;font-style:italic;transform:rotate(-3deg);}

/* fill-text: the "filled in" parts of a receipt (item name/qty/price/total, customer name/phone/
   email, amount in words) — as opposed to the printed template around them. Color comes from the
   employer's "Product/service & customer details color" setting (settings.php), applied as the
   --fill-color custom property on the receipt-paper container. */
.fill-text{color:var(--fill-color, inherit);}

/* theme variants swap the accent for receipts/dashboard per employer selection */
.theme-classic{--theme-color:#0B6E4F;} .theme-modern-blue{--theme-color:#1D63D8;}
.theme-minimal{--theme-color:#333;} .theme-retail-orange{--theme-color:#E1701A;}
.theme-corporate-navy{--theme-color:#1B2A55;} .theme-elegant-gold{--theme-color:#A9781E;}
.theme-sunset{--theme-color:#E4572E;} .theme-duka-red{--theme-color:#C22A2A;}
.theme-mint{--theme-color:#12A98B;} .theme-rose{--theme-color:#C74B7A;}
.theme-tech-purple{--theme-color:#6A3DE0;} .theme-farm-green{--theme-color:#3E8E3F;}
.theme-teal{--theme-color:#0E8C8C;} .theme-hardware-grey{--theme-color:#556070;}
.theme-cafe-brown{--theme-color:#7A4A2B;} .theme-salon-pink{--theme-color:#E0578F;}
.theme-cyan{--theme-color:#0E9BB5;} .theme-yellow{--theme-color:#C89B0B;}
.theme-studio-black{--theme-color:#111;} .theme-ocean-blue{--theme-color:#0A6E9E;}

/* design gallery — live HTML/CSS receipt/stamp previews, rendered with the exact same
   .receipt-paper / .stamp-mark markup used on the real receipt, scaled down via container queries
   so what you pick here is pixel-for-pixel what you get on the real receipt (and PDF). */
.design-grid{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:480px){.design-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.design-grid{grid-template-columns:repeat(4,1fr);}}
.design-option{
  border:2px solid #E1E5EA; border-radius:var(--radius-sm); padding:10px; text-align:center; cursor:pointer; background:#fff;
}
.design-option.selected{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);}
.design-swatch{height:60px; border-radius:2px; margin-bottom:8px;}
.design-option span{font-size:.75rem; font-weight:700;}
.design-option .thumb{
  width:100%; aspect-ratio:400/520; object-fit:cover; border-radius:2px; margin-bottom:8px; border:1px solid #EEF1F4; background:#fafafa;
}
.design-option .thumb-stamp{
  width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:2px; margin-bottom:8px; border:1px solid #EEF1F4; background:#fafafa; padding:6px;
}
.design-preview-frame{
  container-type: inline-size;
  width:100%; overflow:visible; border-radius:2px; margin-bottom:8px;
  border:1px solid #EEF1F4; background:#fff; position:relative;
}
.design-preview-frame .receipt-paper{
  width:400px; zoom: calc(100cqw / 400);
  box-shadow:none; margin:0; border-radius:0; pointer-events:none;
}
.stamp-preview-frame{
  container-type: inline-size;
  width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:8px; margin-bottom:8px;
  border:1px solid #EEF1F4; background:#fafbfc; position:relative; display:flex; align-items:center; justify-content:center;
}
.stamp-preview-frame .stamp-mark{ font-size: calc(0.72rem + 2cqw); width:70cqw; height:70cqw; }

/* -------- POS catalog browse (product cards with photo) -------- */
.pos-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media(min-width:640px){.pos-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.pos-grid{grid-template-columns:repeat(4,1fr);}}
.pos-card{
  background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; cursor:pointer;
  border:2px solid transparent; transition:transform .12s ease, border-color .12s ease; text-align:left;
}
.pos-card:active{transform:scale(.97);}
.pos-card:hover{border-color:var(--brand);}
.pos-card .pos-photo{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--brand-light);}
.pos-card .pos-photo-fallback{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--brand-light); color:var(--brand); font-weight:800; font-size:1.4rem;
}
.pos-card .pos-body{padding:10px;}
.pos-card .pos-name{font-size:.85rem; font-weight:700; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pos-card .pos-price{font-size:.8rem; color:var(--brand); font-weight:800;}
.pos-card .pos-type{font-size:.68rem; color:var(--muted); text-transform:uppercase;}

/* -------- Modal (POS-prompt etc.) -------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card{background:#fff; border-radius:var(--radius); padding:24px 20px; max-width:400px; width:100%; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3);}
.modal-card h3{margin-top:0;}
.modal-card p{color:var(--muted); font-size:.88rem;}
.modal-card .btn-row{flex-direction:column; margin-top:16px;}
.modal-card .btn-row .btn{width:100%;}

/* -------- Admin: comprehensive left sidebar + header shell -------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:230px; flex:0 0 230px; background:#333131; color:#C9D1DB; min-height:100vh;
  position:sticky; top:0; align-self:flex-start; display:flex; flex-direction:column;
}
.admin-sidebar .admin-brand{padding:20px 18px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08);}
.admin-sidebar nav{flex:1; padding:12px 10px; overflow-y:auto;}
.admin-sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.85rem; font-weight:600;
  color:#C9D1DB; margin-bottom:2px;
}
.admin-sidebar nav a svg{width:17px;height:17px; flex:0 0 auto;}
.admin-sidebar nav a.active, .admin-sidebar nav a:hover{background:rgba(255,255,255,.1); color:#fff;}
.admin-sidebar nav .nav-group-toggle{width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.85rem; font-weight:600; color:#C9D1DB; margin-bottom:2px;}
.admin-sidebar nav .nav-group-toggle svg:not(.chevron){width:17px;height:17px; flex:0 0 auto;}
.admin-sidebar nav .nav-group-toggle svg.chevron{width:14px;height:14px; margin-left:auto; transition:transform .15s ease; flex:0 0 auto;}
.admin-sidebar nav .nav-group.open .nav-group-toggle svg.chevron{transform:rotate(180deg);}
.admin-sidebar nav .nav-group-toggle.active{background:rgba(255,255,255,.08); color:#fff;}
.admin-sidebar nav .nav-group-toggle:hover{background:rgba(255,255,255,.08); color:#fff;}
.admin-sidebar nav .nav-group-children{display:none; padding-left:14px;}
.admin-sidebar nav .nav-group.open .nav-group-children{display:block;}
.admin-sidebar nav .nav-group-children a{padding:9px 12px 9px 30px; font-size:.82rem; font-weight:600; position:relative;}
.admin-sidebar nav .nav-group-children a::before{content:''; position:absolute; left:16px; top:50%; width:6px; height:1px; background:currentColor; opacity:.5;}
.admin-sidebar .admin-sidebar-foot{padding:14px 12px; border-top:1px solid rgba(255,255,255,.08);}
.admin-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.admin-topbar{
  height:60px; background:#fff; border-bottom:1px solid #E7EAEE; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; position:sticky; top:0; z-index:20;
}
.admin-topbar .admin-who{font-size:.85rem; color:var(--muted);}
.admin-topbar .admin-who strong{color:var(--ink);}
.admin-logout-btn{
  display:inline-flex; align-items:center; gap:6px; background:#FDEDEB; color:var(--danger);
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:.8rem; border:none; cursor:pointer;
}
.admin-menu-toggle{display:none; background:none; border:none; cursor:pointer;}
@media(max-width:820px){
  .admin-sidebar{position:fixed; left:-240px; top:0; bottom:0; z-index:100; transition:left .2s ease; box-shadow:0 0 30px rgba(0,0,0,.3); overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .admin-sidebar.open{left:0;}
  .admin-menu-toggle{display:block;}
  .admin-shell{display:block;}
}

/* -------- Simple CSS bar charts for sales performance -------- */
.bar-chart{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:grid; grid-template-columns:110px 1fr 70px; align-items:center; gap:10px; font-size:.82rem;}
.bar-row .bar-label{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-track{background:#EEF1F4; border-radius:999px; height:10px; overflow:hidden;}
.bar-fill{height:100%; border-radius:999px; background:var(--brand);}
.bar-row .bar-value{font-weight:700; text-align:right;}

.empty-state{text-align:center; padding:40px 16px; color:var(--muted);}
.empty-state svg{width:70px;height:70px; margin-bottom:12px; opacity:.5;}

.fab{
  position:fixed; right:16px; bottom:16px; z-index:49;
  width:56px;height:56px;border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(11,110,79,.4);
  border:none; font-size:1.6rem; cursor:pointer;
}

@media print{
  .app-header,.app-footer,.fab,.no-print,.app-sidebar,.app-topbar,.app-menu-toggle{display:none !important;}
  .app-shell,.app-main,.app-content{display:block !important; min-height:0 !important;}
  body{padding:0; background:#fff;}
}