* {
box-sizing:border-box
}
html,body {
margin:0;
min-height:100%;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#15192a;
background:#eef1f8
}
body {
font-size:14px
}
.app-shell {
width:min(100%,460px);
min-height:100vh;
margin:0 auto;
background:linear-gradient(180deg,#f5f6ff 0,#f7f8fc 38%,#f4f6fb 100%);
position:relative;
box-shadow:0 0 60px rgba(20,28,60,.08)
}
.topbar {
position:sticky;
top:0;
z-index:20;
padding:18px 18px 12px;
background:rgba(247,248,252,.92);
backdrop-filter:blur(18px);
display:flex;
justify-content:space-between;
align-items:center
}
.topbar h1 {
font-size:24px;
line-height:1.1;
margin:4px 0 0;
letter-spacing:-.6px
}
.eyebrow,.soft-label {
font-size:10px;
letter-spacing:1.7px;
font-weight:800;
color:#6657f7
}
.avatar {
width:42px;
height:42px;
border-radius:14px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#6457ff,#8b5cff);
color:#fff;
text-decoration:none;
font-weight:800;
box-shadow:0 8px 24px rgba(101,87,255,.25)
}
.main-content {
padding:0 14px 102px
}
.bottom-nav {
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
width:min(100%,460px);
height:76px;
background:rgba(255,255,255,.96);
border-top:1px solid #e7e9f2;
display:flex;
align-items:center;
justify-content:space-around;
padding:5px 10px max(5px,env(safe-area-inset-bottom));
z-index:35;
box-shadow:0 -12px 30px rgba(28,35,75,.08);
backdrop-filter:blur(20px)
}
.bottom-nav a {
min-width:55px;
color:#8c93a8;
text-decoration:none;
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
font-size:19px;
font-weight:700
}
.bottom-nav small {
font-size:10px;
font-weight:700
}
.bottom-nav a.active {
color:#5d50f4
}
.bottom-nav .nav-bill span {
width:48px;
height:48px;
border-radius:17px;
background:linear-gradient(135deg,#5f50f7,#7c5cff);
color:white;
display:grid;
place-items:center;
margin-top:-23px;
box-shadow:0 10px 24px rgba(95,80,247,.35)
}
.bottom-nav .nav-bill small {
margin-top:1px
}
.panel {
background:#fff;
border:1px solid #eaecf4;
border-radius:24px;
padding:16px;
box-shadow:0 8px 24px rgba(20,29,70,.035);
margin-bottom:14px
}
.panel-head,.section-row,.sheet-title {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px
}
.panel-head h3,.section-row h3,.sheet-title h3 {
margin:4px 0 0;
font-size:17px
}
.panel-head>a,.section-row>a {
color:#6558ef;
text-decoration:none;
font-size:12px;
font-weight:700
}
.muted {
color:#8b91a5;
font-size:12px
}
.hidden {
display:none!important
}
.grow {
flex:1
}
.align-right {
text-align:right
}
.status {
font-size:10px;
font-weight:800;
border-radius:999px;
padding:5px 8px;
display:inline-flex
}
.status.paid {
background:#e8fbf0;
color:#159256
}
.status.due {
background:#fff0e1;
color:#d87918
}
.count-chip {
display:inline-grid;
min-width:21px;
height:21px;
place-items:center;
padding:0 6px;
border-radius:999px;
background:#efedff;
color:#6155ef;
font-size:10px
}
.app-toast {
position:fixed;
z-index:100;
left:50%;
bottom:95px;
transform:translate(-50%,20px);
background:#171b2e;
color:#fff;
padding:12px 16px;
border-radius:14px;
max-width:86%;
opacity:0;
pointer-events:none;
transition:.22s;
font-size:12px;
font-weight:700;
box-shadow:0 10px 35px rgba(0,0,0,.18)
}
.app-toast.show {
opacity:1;
transform:translate(-50%,0)
}
.app-toast.success {
background:#148b55
}
.app-toast.warn {
background:#a86213
}
.app-toast.error {
background:#c33b48
}
/* dashboard */
.welcome-strip {
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:8px 2px 14px
}
.welcome-strip h2 {
font-size:20px;
margin:5px 0 4px;
letter-spacing:-.4px
}
.welcome-strip p {
margin:0;
color:#8b91a5;
font-size:12px
}
.live-pill {
background:#eafbf1;
color:#1b9b60;
font-size:10px;
font-weight:800;
padding:7px 9px;
border-radius:999px
}
.live-pill i {
display:inline-block;
width:6px;
height:6px;
background:#2bbf78;
border-radius:50%;
margin-right:4px
}
.action-ribbon {
display:grid;
grid-template-columns:1.75fr repeat(3,1fr);
gap:8px;
margin-bottom:14px
}
.action-ribbon>a {
background:#fff;
border:1px solid #eceef5;
border-radius:18px;
min-height:74px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-decoration:none;
color:#252a3c;
gap:6px;
font-size:18px;
box-shadow:0 7px 20px rgba(24,31,62,.035)
}
.action-ribbon>a small {
font-size:10px;
font-weight:700
}
.action-ribbon .action-primary {
background:linear-gradient(135deg,#5a4cf4,#7660ff);
color:#fff;
flex-direction:row;
justify-content:flex-start;
padding:12px;
gap:10px;
box-shadow:0 10px 24px rgba(89,76,244,.26)
}
.action-primary .action-icon {
width:38px;
height:38px;
border-radius:13px;
background:rgba(255,255,255,.18);
display:grid;
place-items:center;
font-size:24px
}
.action-primary div {
display:flex;
flex-direction:column
}
.action-primary b {
font-size:13px
}
.action-primary small {
color:#e8e4ff
}
.action-primary em {
font-style:normal;
margin-left:auto;
font-size:22px
}
.hero-card {
background:radial-gradient(circle at 95% 10%,rgba(255,255,255,.16) 0 70px,transparent 71px),linear-gradient(135deg,#312f89,#5d50f5 60%,#745cff);
border-radius:26px;
color:white;
padding:19px;
margin-bottom:12px;
box-shadow:0 12px 30px rgba(72,63,187,.23)
}
.hero-top {
display:flex;
justify-content:space-between;
align-items:flex-end
}
.hero-top>div:first-child span,.hero-mini span {
font-size:11px;
color:#d9d8ff
}
.hero-top strong {
font-size:34px;
display:block;
margin-top:7px;
letter-spacing:-1.3px
}
.hero-mini {
text-align:right
}
.hero-mini b {
display:block;
margin-top:5px
}
.hero-foot {
border-top:1px solid rgba(255,255,255,.14);
margin-top:14px;
padding-top:12px;
display:flex;
justify-content:space-between;
color:#dfddff;
font-size:10px
}
.metric-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:14px
}
.metric-grid article {
background:#fff;
border:1px solid #eaecf3;
border-radius:19px;
padding:13px;
display:flex;
align-items:center;
gap:10px
}
.metric-grid small {
display:block;
color:#9297aa;
font-size:10px;
margin-bottom:5px
}
.metric-grid b {
font-size:15px
}
.metric-icon,.menu-icon {
width:38px;
height:38px;
border-radius:13px;
display:grid;
place-items:center;
font-weight:800;
flex:none
}
.violet {
background:#efecff;
color:#6557ef
}
.amber {
background:#fff3df;
color:#d38318
}
.green {
background:#e8fbf0;
color:#209a5d
}
.blue {
background:#e9f2ff;
color:#3678d1
}
.red {
background:#ffebed;
color:#cf4250
}
.chart-wrap {
height:190px
}
.pending-banner {
display:flex;
align-items:center;
gap:11px;
padding:14px;
background:linear-gradient(135deg,#fff8e9,#fff);
border:1px solid #f4dfb8;
border-radius:20px;
margin-bottom:14px;
text-decoration:none;
color:#25293b
}
.pending-banner .pending-bell {
width:38px;
height:38px;
border-radius:13px;
background:#ffedc9;
color:#cb7415;
display:grid;
place-items:center
}
.pending-banner div {
flex:1
}
.pending-banner b,.pending-banner small {
display:block
}
.pending-banner small {
color:#8c91a1;
font-size:10px;
margin-top:3px
}
.pending-banner em {
font-style:normal;
color:#b56310;
font-size:11px;
font-weight:800
}
.smart-list {
display:flex;
flex-direction:column
}
.smart-list>a,.smart-list>div {
display:flex;
align-items:center;
gap:10px;
padding:12px 2px;
border-bottom:1px solid #f0f1f5;
text-decoration:none;
color:#24283a
}
.smart-list>a:last-child,.smart-list>div:last-child {
border-bottom:0
}
.invoice-dot {
width:36px;
height:36px;
border-radius:12px;
background:#f0eeff;
color:#6557ef;
display:grid;
place-items:center;
flex:none
}
.smart-list b {
font-size:12px
}
.smart-list small {
display:block;
color:#979caf;
font-size:9px;
margin-top:4px
}
.align-right strong {
font-size:12px;
display:block;
margin-bottom:5px
}
.empty-state {
text-align:center!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
padding:30px!important;
color:#8e94a7
}
.empty-state>span {
font-size:28px;
margin-bottom:8px
}
/* Wizard */
.wizard-head {
padding:7px 4px 16px
}
.wizard-progress {
display:flex;
align-items:center;
justify-content:space-between
}
.wizard-progress>span {
display:flex;
align-items:center;
gap:6px;
color:#a0a5b5
}
.wizard-progress i {
width:25px;
height:25px;
border-radius:9px;
background:#e7e9f0;
display:grid;
place-items:center;
font-style:normal;
font-size:10px;
font-weight:800
}
.wizard-progress b {
font-size:10px
}
.wizard-progress em {
height:2px;
background:#e6e8ef;
flex:1;
margin:0 7px
}
.wizard-progress span.active {
color:#6155ef
}
.wizard-progress span.active i {
background:#6155ef;
color:#fff
}
.wizard-step {
display:none
}
.wizard-step.active {
display:block;
animation:stepIn .25s ease
}
@keyframes stepIn {
from {
opacity:0;
transform:translateX(8px)
}
to {
opacity:1;
transform:none
}
}
.step-intro {
display:flex;
gap:12px;
align-items:center;
margin:10px 2px 14px
}
.step-emoji {
width:48px;
height:48px;
border-radius:17px;
background:#edeaff;
display:grid;
place-items:center;
font-size:22px
}
.step-intro h2 {
margin:0 0 4px;
font-size:20px
}
.step-intro p {
margin:0;
color:#8d93a7;
font-size:11px;
line-height:1.5
}
.form-panel {
padding:18px
}
.smart-field {
display:block;
margin-bottom:13px
}
.smart-field>span,.field-caption {
display:block;
color:#7f869e;
font-size:9px;
font-weight:800;
letter-spacing:.8px;
margin:0 0 7px
}
.smart-field input,.smart-field select,.date-range input {
width:100%;
height:49px;
border:1px solid #e2e5ee;
background:#fafbfe;
border-radius:15px;
padding:0 13px;
outline:0;
color:#191d30;
font:inherit;
font-weight:600;
transition:.18s
}
.smart-field input:focus,.smart-field select:focus,.date-range input:focus {
border-color:#796df5;
box-shadow:0 0 0 3px rgba(103,89,244,.09);
background:#fff
}
.input-with-icon {
display:flex;
align-items:center;
border:1px solid #e2e5ee;
background:#fafbfe;
border-radius:15px;
padding-left:12px
}
.input-with-icon i {
font-style:normal;
color:#6e7488;
font-weight:700;
border-right:1px solid #dddfea;
padding-right:10px
}
.input-with-icon input {
border:0;
background:transparent;
box-shadow:none!important
}
.customer-found {
display:flex;
align-items:center;
gap:9px;
background:#eafaf1;
color:#1b8f57;
padding:10px 12px;
border-radius:13px;
margin:-3px 0 13px
}
.found-icon {
width:27px;
height:27px;
border-radius:9px;
background:#d4f4e1;
display:grid;
place-items:center
}
.customer-found small,.customer-found b {
display:block
}
.customer-found small {
font-size:9px
}
.customer-found b {
font-size:12px
}
.gst-details {
border-top:1px solid #eceef3;
padding-top:12px
}
.gst-details summary {
cursor:pointer;
font-weight:700;
font-size:11px;
color:#62687b
}
.gst-details summary small {
color:#a0a5b7;
font-weight:500;
margin-left:6px
}
.two-col {
display:grid;
grid-template-columns:1fr 1fr;
gap:9px
}
.wizard-next {
width:100%;
height:54px;
border:0;
border-radius:18px;
background:linear-gradient(135deg,#5a4cf4,#7660ff);
color:white;
font:inherit;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
box-shadow:0 10px 25px rgba(90,76,244,.22);
text-decoration:none
}
.wizard-next span {
font-size:18px
}
.wizard-next.compact {
width:auto;
flex:1
}
.back-btn {
height:54px;
border:1px solid #e2e5ed;
border-radius:18px;
background:#fff;
color:#666d83;
font-weight:700;
padding:0 18px
}
.wizard-actions {
display:flex;
gap:10px;
margin-top:14px
}
.scan-main {
width:100%;
border:0;
border-radius:22px;
padding:15px;
background:linear-gradient(135deg,#22265f,#3b3b93);
color:#fff;
display:flex;
align-items:center;
text-align:left;
margin:6px 0 5px;
box-shadow:0 12px 25px rgba(37,38,95,.18)
}
.scan-icon {
width:48px;
height:48px;
border-radius:15px;
background:rgba(255,255,255,.12);
display:grid;
place-items:center;
font-size:22px;
margin-right:12px
}
.scan-main b,.scan-main small {
display:block
}
.scan-main b {
font-size:14px
}
.scan-main small {
color:#d5d6f2;
font-size:9px;
margin-top:3px
}
.scan-arrow {
margin-left:auto;
font-size:24px
}
.scan-status-strip {
font-size:9px;
color:#8f95aa;
padding:3px 8px 15px
}
.live-dot {
display:inline-block;
width:7px;
height:7px;
background:#2fc676;
border-radius:50%;
box-shadow:0 0 0 4px rgba(47,198,118,.12);
margin-right:7px
}
.section-row {
margin:4px 2px 10px
}
.soft-btn {
border:0;
background:#eceaff;
color:#6356ed;
border-radius:12px;
padding:9px 11px;
font-size:10px;
font-weight:800
}
.wizard-cart {
display:flex;
flex-direction:column;
gap:9px
}
.cart-item {
background:#fff;
border:1px solid #eaecf3;
border-radius:19px;
padding:12px;
display:grid;
grid-template-columns:1fr auto;
gap:9px;
box-shadow:0 5px 16px rgba(25,31,65,.025)
}
.item-edit {
display:flex;
align-items:center;
gap:9px;
border:0;
background:none;
text-align:left;
padding:0;
min-width:0
}
.item-edit>div {
min-width:0
}
.item-edit b {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:210px
}
.item-edit small {
display:block;
color:#989daf;
font-size:9px;
margin-top:4px
}
.product-glyph {
width:34px;
height:34px;
border-radius:11px;
background:#f0eeff;
color:#6356ec;
display:grid;
place-items:center;
font-size:10px;
font-weight:800;
flex:none
}
.qty-inline {
display:flex;
align-items:center;
background:#f6f7fb;
border-radius:11px;
padding:2px
}
.qty-inline button {
width:28px;
height:28px;
border:0;
background:transparent;
color:#6356ed;
font-size:16px
}
.qty-inline b {
min-width:26px;
text-align:center;
font-size:11px
}
.item-total {
grid-column:2;
grid-row:1/3;
display:flex;
align-items:flex-end;
flex-direction:column;
justify-content:space-between
}
.item-total b {
font-size:13px
}
.item-total button {
border:0;
background:#fff0f1;
color:#d64b58;
width:27px;
height:27px;
border-radius:9px
}
.cart-empty {
background:#fff;
border:1px dashed #dfe2ec;
border-radius:20px;
padding:26px;
text-align:center;
color:#999fb0;
display:flex;
flex-direction:column
}
.cart-empty span {
font-size:26px
}
.cart-empty b {
color:#5a6073;
margin:6px 0 3px;
font-size:12px
}
.cart-empty small {
font-size:9px
}
.bill-totals {
background:#fff;
border:1px solid #eaecf3;
border-radius:20px;
padding:13px 15px;
margin-top:11px
}
.bill-totals>div {
display:flex;
justify-content:space-between;
padding:6px 0;
color:#757c91;
font-size:11px
}
.bill-totals b {
color:#353a4e
}
.bill-totals .grand {
border-top:1px dashed #e0e2eb;
margin-top:5px;
padding-top:11px;
color:#222739
}
.bill-totals .grand strong {
font-size:19px;
color:#1d2236
}
.payment-hero {
text-align:center;
padding:20px 0 18px
}
.payment-hero small,.payment-hero span {
display:block;
color:#9197aa
}
.payment-hero small {
font-size:9px;
letter-spacing:1.4px;
font-weight:800
}
.payment-hero strong {
font-size:42px;
display:block;
letter-spacing:-1.8px;
margin:5px 0
}
.payment-hero span {
font-size:10px
}
.big-money {
display:flex;
align-items:center;
background:#f7f8fb;
border:1px solid #e4e6ef;
border-radius:17px;
padding:0 14px
}
.big-money i {
font-style:normal;
font-size:23px;
font-weight:800
}
.big-money input {
border:0!important;
background:transparent!important;
box-shadow:none!important;
font-size:27px!important;
font-weight:800!important
}
.payment-modes {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:7px;
margin:8px 0 15px
}
.payment-modes button {
height:58px;
border:1px solid #e4e6ef;
background:#fff;
border-radius:15px;
color:#7f8599;
font-size:10px;
font-weight:700;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px
}
.payment-modes button i {
font-style:normal;
font-size:17px
}
.payment-modes button.active {
border-color:#6658ef;
background:#efedff;
color:#5f52eb
}
.upi-panel {
display:flex;
align-items:center;
gap:12px;
background:#f8f8ff;
border:1px solid #ebe9ff;
border-radius:18px;
padding:12px;
margin-bottom:12px
}
.qr-card {
width:108px;
height:108px;
background:#fff;
border-radius:13px;
display:grid;
place-items:center;
overflow:hidden;
flex:none
}
.qr-card canvas {
width:100px!important;
height:100px!important
}
.upi-panel b,.upi-panel small {
display:block
}
.upi-panel small {
color:#8d93a6;
font-size:9px;
margin:4px 0 7px
}
.text-btn {
border:0;
background:none;
color:#5c50e9;
font-weight:800;
font-size:10px;
padding:0
}
.due-preview {
display:flex;
justify-content:space-between;
background:#fff5e8;
color:#a86616;
border-radius:14px;
padding:11px 12px;
font-size:11px
}
.modal {
position:fixed;
z-index:70;
inset:0;
background:rgba(17,22,42,.48);
display:none;
align-items:flex-end;
justify-content:center;
backdrop-filter:blur(4px)
}
.modal.open {
display:flex
}
.sheet {
width:min(100%,460px);
max-height:90vh;
overflow:auto;
background:#fff;
border-radius:28px 28px 0 0;
padding:10px 17px 24px;
animation:sheetUp .23s ease
}
@keyframes sheetUp {
from {
transform:translateY(25px);
opacity:.6
}
to {
transform:none;
opacity:1
}
}
.sheet-handle {
width:42px;
height:5px;
border-radius:9px;
background:#d9dce6;
margin:2px auto 14px
}
.close-round {
width:34px;
height:34px;
border-radius:12px;
border:0;
background:#f2f3f7;
color:#70768a;
font-size:20px
}
.sheet-save,.sheet-secondary {
width:100%;
height:50px;
border-radius:16px;
border:0;
font:inherit;
font-weight:800
}
.sheet-save {
background:#6154ef;
color:#fff
}
.sheet-secondary {
display:block;
text-align:center;
text-decoration:none;
background:#f4f5f8;
color:#646a7e;
margin-top:8px;
line-height:50px
}
.existing-hint {
background:#eafaf1;
color:#1c925a;
border-radius:12px;
padding:9px 11px;
font-size:10px;
font-weight:700;
margin:-4px 0 12px
}
.inline-field {
display:flex;
gap:7px
}
.inline-field input {
flex:1
}
.inline-field button {
border:0;
border-radius:13px;
background:#eeecff;
color:#6255ef;
font-weight:800;
padding:0 12px
}
.scanner-sheet {
background:#13182d;
color:#fff
}
.scanner-view {
height:330px;
border-radius:20px;
overflow:hidden;
background:#050711;
position:relative
}
.scanner-view video {
width:100%;
height:100%;
object-fit:cover
}
.scanner-frame {
position:absolute;
inset:72px 38px;
border:2px solid rgba(255,255,255,.75);
border-radius:18px;
box-shadow:0 0 0 1000px rgba(3,5,14,.34)
}
.scanner-frame i {
position:absolute;
left:7%;
right:7%;
top:50%;
height:2px;
background:#7262ff;
box-shadow:0 0 12px #7262ff;
animation:scanLine 1.8s infinite alternate
}
@keyframes scanLine {
from {
transform:translateY(-70px)
}
to {
transform:translateY(70px)
}
}
.manual-scan {
display:flex;
gap:8px;
margin-top:12px
}
.manual-scan input {
flex:1;
height:48px;
border:1px solid #353b55;
background:#1d2239;
color:#fff;
border-radius:14px;
padding:0 12px
}
.manual-scan button {
border:0;
background:#6758f3;
color:#fff;
border-radius:14px;
padding:0 16px;
font-weight:800
}
/* Inventory/Purchase */
.stock-scan {
margin-top:6px
}
.product-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}
.product-card {
border:1px solid #eaecf3;
background:#fff;
border-radius:19px;
padding:12px;
text-align:left;
color:#24283a
}
.product-card-top {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:9px
}
.product-avatar {
width:35px;
height:35px;
border-radius:12px;
background:#eeecff;
color:#6356ef;
display:grid;
place-items:center;
font-weight:800
}
.product-avatar.big {
width:55px;
height:55px;
border-radius:18px;
font-size:20px
}
.stock-badge {
font-size:8px;
background:#eafaf1;
color:#1c955b;
border-radius:999px;
padding:5px 7px;
font-weight:800
}
.stock-badge.low {
background:#fff0e0;
color:#c87818
}
.product-card>b {
font-size:12px;
display:block;
margin-bottom:4px
}
.product-card>small {
font-size:8px;
color:#969caf
}
.product-card-foot {
display:flex;
justify-content:space-between;
border-top:1px solid #f0f1f5;
margin-top:9px;
padding-top:8px;
font-size:8px;
color:#858ba0
}
.product-card-foot em {
font-style:normal;
color:#6356ef;
font-weight:800
}
.product-report-hero {
display:flex;
align-items:center;
gap:12px;
padding:8px 3px 16px
}
.product-report-hero h2 {
margin:0 0 4px
}
.product-report-hero p {
margin:0;
color:#9096aa;
font-size:10px
}
/* reports */
.report-filter {
background:#fff;
border:1px solid #eaecf3;
border-radius:22px;
padding:13px;
margin-bottom:12px
}
.report-preset {
display:flex;
gap:6px;
margin-bottom:10px
}
.report-preset a {
padding:7px 9px;
border-radius:10px;
background:#f0eeff;
color:#6053ec;
text-decoration:none;
font-size:9px;
font-weight:800
}
.date-range {
display:grid;
grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);
gap:6px;
align-items:end
}
.date-range label {
min-width:0
}
.date-range label span {
display:block;
color:#858ba0;
font-size:8px;
font-weight:800;
margin:0 0 5px
}
.date-range input {
height:43px;
padding:0 8px;
font-size:10px;
min-width:0
}
.date-arrow {
align-self:center;
text-align:center;
color:#aaa
}
.date-range button {
grid-column:1/-1;
height:42px;
border:0;
border-radius:13px;
background:#6255ef;
color:#fff;
font-weight:800
}
.report-metrics {
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
margin-bottom:13px
}
.report-metrics article {
background:#fff;
border:1px solid #eaecf3;
border-radius:19px;
padding:13px
}
.report-metrics small,.report-metrics span {
display:block
}
.report-metrics small {
color:#8d93a7;
font-size:9px
}
.report-metrics b {
display:block;
font-size:18px;
margin:7px 0 4px
}
.report-metrics span {
color:#9fa4b5;
font-size:8px
}
.gst-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:12px
}
.gst-grid>div {
background:#f7f8fb;
border-radius:15px;
padding:11px
}
.gst-grid small {
color:#888fa3;
font-size:8px
}
.gst-grid b {
display:block;
margin-top:5px
}
.gst-grid .gst-net {
grid-column:1/-1;
background:#eeecff
}
.report-disclaimer {
font-size:9px;
line-height:1.55;
color:#8c92a5;
background:#f7f8fb;
border-radius:12px;
padding:10px;
margin:11px 0 0
}
.bottom-note {
margin:12px 0
}
/* invoice */
.invoice-paper {
background:#fff;
border:1px solid #e8eaf1;
border-radius:24px;
padding:18px;
box-shadow:0 8px 25px rgba(30,38,75,.04)
}
.invoice-paper header {
display:flex;
justify-content:space-between;
border-bottom:1px dashed #dfe2ea;
padding-bottom:14px
}
.invoice-paper header small {
display:block;
color:#8e94a6;
font-size:8px;
margin-top:4px
}
.invoice-brand {
font-weight:800;
font-size:16px
}
.invoice-no {
text-align:right
}
.invoice-no b {
font-size:11px
}
.invoice-customer {
padding:14px 0;
display:flex;
flex-direction:column
}
.invoice-customer small {
font-size:8px;
color:#979caf
}
.invoice-customer b {
font-size:12px;
margin:4px 0
}
.invoice-customer span {
font-size:9px;
color:#8e94a6
}
.invoice-lines {
border-top:1px solid #f0f1f5;
border-bottom:1px solid #f0f1f5
}
.invoice-lines>div {
display:flex;
justify-content:space-between;
gap:10px;
padding:10px 0
}
.invoice-lines b,.invoice-lines strong {
font-size:10px
}
.invoice-lines small {
display:block;
color:#9298aa;
font-size:8px;
margin-top:3px
}
.invoice-summary {
padding:12px 0 0;
margin-left:auto;
width:70%
}
.invoice-summary>div {
display:flex;
justify-content:space-between;
padding:4px 0;
font-size:9px
}
.invoice-summary .invoice-grand {
border-top:1px dashed #dfe1e9;
margin-top:4px;
padding-top:9px
}
.invoice-summary .invoice-grand strong {
font-size:17px
}
.invoice-paper footer {
text-align:center;
color:#989daf;
font-size:8px;
margin-top:16px
}
.invoice-actions {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:7px;
margin:11px 0
}
.invoice-actions button {
border:1px solid #e7e9f0;
background:#fff;
border-radius:14px;
padding:10px 5px;
font-size:9px;
font-weight:700;
color:#656b80
}
.invoice-actions span {
display:block;
font-size:17px;
margin-bottom:4px;
color:#6255ef
}
.invoice-secondary {
display:flex;
gap:8px;
margin-bottom:10px
}
.invoice-secondary a {
flex:1;
text-align:center;
padding:11px;
border-radius:13px;
background:#f1efff;
color:#5f52e8;
text-decoration:none;
font-size:9px;
font-weight:800
}
.invoice-secondary .danger-link {
background:#ffedef;
color:#ca4551
}
.danger-button {
width:100%;
height:52px;
border:0;
border-radius:17px;
background:#d94b58;
color:#fff;
font-weight:800
}
.notice {
padding:11px;
border-radius:13px;
margin-bottom:12px;
font-size:10px
}
.notice-ok {
background:#eafaf1;
color:#1b8e57
}
/* Dues/menu/team */
.due-list {
gap:9px
}
.due-card {
background:#fff;
border:1px solid #eaecf3;
border-radius:19px;
padding:13px!important;
display:grid!important;
grid-template-columns:1fr auto
}
.due-person {
display:flex;
gap:9px;
align-items:center
}
.due-person>span {
width:34px;
height:34px;
border-radius:11px;
background:#efedff;
color:#6154eb;
display:grid;
place-items:center;
font-weight:800
}
.due-person b,.due-person small {
display:block
}
.due-person small {
font-size:8px;
color:#999faf;
margin-top:3px
}
.due-card>strong {
font-size:15px
}
.due-actions {
grid-column:1/-1;
display:flex;
gap:7px;
border-top:1px solid #f0f1f5;
margin-top:10px;
padding-top:9px
}
.due-actions a {
flex:1;
text-align:center;
text-decoration:none;
border-radius:11px;
background:#f4f5f8;
color:#60677a;
padding:9px;
font-size:9px;
font-weight:800
}
.due-actions .wa-btn {
background:#e9faef;
color:#158e52
}
.menu-cards {
display:flex;
flex-direction:column;
gap:9px
}
.menu-cards>a {
display:flex;
align-items:center;
gap:11px;
background:#fff;
border:1px solid #eaecf3;
border-radius:18px;
padding:12px;
text-decoration:none;
color:#25293b
}
.menu-cards div {
flex:1
}
.menu-cards b,.menu-cards small {
display:block
}
.menu-cards small {
font-size:8px;
color:#999eb0;
margin-top:3px
}
.menu-cards em {
font-style:normal;
color:#a3a7b5
}
.request-card {
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
background:#fff;
border:1px solid #eaecf3;
border-radius:18px!important;
padding:13px!important;
margin-bottom:9px
}
.request-card h3 {
margin:6px 0 3px;
font-size:13px
}
.request-actions {
display:flex;
flex-direction:column;
gap:5px
}
.request-actions button {
border:0;
border-radius:10px;
padding:8px 9px;
font-size:8px;
font-weight:800
}
.request-actions .approve {
background:#e8faf0;
color:#168e54
}
.request-actions .reject {
background:#ffedef;
color:#ca4552
}
.switch input {
display:none
}
.switch i {
display:block;
width:42px;
height:24px;
background:#dfe2eb;
border-radius:999px;
position:relative
}
.switch i:after {
content:"";
position:absolute;
width:18px;
height:18px;
top:3px;
left:3px;
border-radius:50%;
background:#fff;
transition:.2s
}
.switch input:checked+i {
background:#6255ef
}
.switch input:checked+i:after {
left:21px
}
.settings-stack .panel {
margin-bottom:10px
}
/* public payment */
.customer-pay {
background:#f2f4f9
}
.pay-page {
max-width:440px;
margin:0 auto;
padding:18px 14px 35px
}
.pay-brand {
display:flex;
align-items:center;
gap:10px;
margin-bottom:16px
}
.pay-brand>span {
width:42px;
height:42px;
border-radius:14px;
background:#6255ef;
color:#fff;
display:grid;
place-items:center;
font-weight:800
}
.pay-brand b,.pay-brand small {
display:block
}
.pay-brand small {
color:#949aad;
font-size:9px
}
.pay-public-card {
background:linear-gradient(135deg,#30317e,#6655f0);
border-radius:25px;
padding:20px;
color:#fff;
text-align:center;
box-shadow:0 12px 28px rgba(64,57,168,.2)
}
.pay-public-card small,.pay-public-card span {
display:block;
color:#d9d8ff
}
.pay-public-card h1 {
font-size:40px;
margin:7px 0
}
.pay-public-card span {
font-size:9px
}
.public-invoice,.qr-pay {
background:#fff;
border:1px solid #e8eaf1;
border-radius:22px;
padding:14px;
margin-top:11px
}
.public-head,.public-line {
display:flex;
justify-content:space-between;
align-items:center
}
.public-head {
border-bottom:1px solid #eef0f4;
padding-bottom:9px;
font-size:10px
}
.public-line {
padding:10px 0;
border-bottom:1px solid #f1f2f5
}
.public-line:last-child {
border-bottom:0
}
.public-line b,.public-line strong {
font-size:10px
}
.public-line small {
display:block;
color:#969caf;
font-size:8px;
margin-top:3px
}
.qr-pay {
text-align:center
}
.qr-wrap {
width:230px;
height:230px;
margin:0 auto 10px;
background:#fff;
display:grid;
place-items:center
}
.qr-pay>b,.qr-pay>small {
display:block
}
.qr-pay>small {
font-size:9px;
color:#979caf;
margin:5px 0 12px
}
.pay-buttons {
display:grid;
grid-template-columns:1fr 1fr;
gap:7px
}
.pay-buttons a,.pay-buttons button {
border:0;
border-radius:13px;
padding:11px;
text-decoration:none;
font-size:9px;
font-weight:800
}
.pay-buttons a {
background:#6255ef;
color:#fff
}
.pay-buttons button {
background:#f0eeff;
color:#6255ef
}
.fake-warning {
background:#fff5e7;
color:#a7681c;
border:1px solid #f4dfbd;
border-radius:15px;
padding:11px;
font-size:9px;
line-height:1.5;
margin-top:11px
}
.paid-confirm {
width:100%;
height:50px;
border:0;
border-radius:16px;
background:#1c9b5d;
color:#fff;
font-weight:800;
margin-top:11px
}
.paid-confirm:disabled {
background:#cfd4dc
}
.public-note {
text-align:center;
color:#9298aa;
font-size:9px
}
/* Auth/general legacy */
.auth {
min-height:100vh;
display:grid;
place-items:center;
padding:20px
}
.auth-box {
width:min(100%,420px)
}
.brand {
font-size:26px;
font-weight:800;
margin-bottom:15px
}
.field {
margin-bottom:12px
}
.field label {
display:block;
font-size:9px;
font-weight:800;
color:#7f869e;
margin-bottom:6px
}
.input,select {
width:100%;
height:48px;
border:1px solid #e2e5ee;
border-radius:14px;
background:#fafbfe;
padding:0 12px
}
.btn {
border:0;
border-radius:13px;
padding:11px 13px;
font-weight:800
}
.btn-primary {
background:#6255ef;
color:#fff
}
.btn-block {
width:100%
}
.row {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px
}
@media(max-width:360px) {
.main-content {
padding-left:10px;
padding-right:10px
}
.action-ribbon {
grid-template-columns:1.6fr repeat(3,1fr)
}
.action-ribbon>a {
min-width:0
}
.action-ribbon>a small {
font-size:8px
}
.topbar {
padding-left:12px;
padding-right:12px
}
.item-edit b {
max-width:160px
}
.payment-modes button {
font-size:9px
}
.product-grid {
grid-template-columns:1fr
}
.two-col {
grid-template-columns:1fr
}
.date-range {
grid-template-columns:1fr
}
.date-arrow {
display:none
}
.date-range button {
grid-column:auto
}
}
@media print {
body {
background:#fff
}
.app-shell {
width:100%;
box-shadow:none
}
.topbar,.bottom-nav,.no-print {
display:none!important
}
.main-content {
padding:0
}
.invoice-paper {
border:0;
box-shadow:none;
border-radius:0
}
.invoice-paper {
max-width:100%
}
}
/* ==========================================================================
Authentication and registration
========================================================================== */
.auth-page {
min-height: 100vh;
background:
radial-gradient(
circle at 10% 10%,
rgba(106, 86, 255, 0.18),
transparent 34%
),
radial-gradient(
circle at 90% 90%,
rgba(76, 199, 255, 0.12),
transparent 32%
),
#f3f5fb;
color: #15192a;
}
.auth-shell {
width: min(1180px, calc(100% - 40px));
min-height: 100vh;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(360px, 0.95fr)
minmax(420px, 1.05fr);
}
.register-shell {
grid-template-columns:
minmax(350px, 0.86fr)
minmax(480px, 1.14fr);
}
.auth-visual {
padding: 72px 64px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.auth-visual::before {
content: '';
width: 430px;
height: 430px;
position: absolute;
top: 2%;
right: -26%;
border-radius: 50%;
background:
linear-gradient(
145deg,
rgba(102, 87, 247, 0.22),
rgba(102, 87, 247, 0)
);
}
.auth-logo-mark {
width: 54px;
height: 54px;
border-radius: 18px;
display: grid;
place-items: center;
background:
linear-gradient(
135deg,
#5548ef,
#8064ff
);
color: #ffffff;
font-size: 25px;
font-weight: 900;
box-shadow:
0 18px 35px
rgba(91, 76, 242, 0.28);
}
.auth-kicker {
margin-top: 28px;
color: #6456ee;
font-size: 11px;
line-height: 1;
letter-spacing: 2px;
font-weight: 900;
}
.auth-visual h1 {
max-width: 560px;
margin: 16px 0 14px;
font-size: clamp(38px, 4vw, 58px);
line-height: 1.04;
letter-spacing: -2.2px;
}
.auth-visual > p {
max-width: 520px;
margin: 0;
color: #727a92;
font-size: 16px;
line-height: 1.75;
}
.auth-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 40px;
}
.auth-feature-grid article {
min-height: 128px;
padding: 18px;
border:
1px solid
rgba(225, 228, 240, 0.95);
border-radius: 22px;
background:
rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px);
box-shadow:
0 14px 40px
rgba(36, 42, 78, 0.06);
}
.auth-feature-grid article > span {
width: 38px;
height: 38px;
margin-bottom: 16px;
border-radius: 13px;
display: grid;
place-items: center;
background: #eeecff;
color: #5d50f4;
font-size: 18px;
font-weight: 900;
}
.auth-feature-grid b,
.auth-feature-grid small {
display: block;
}
.auth-feature-grid b {
margin-bottom: 5px;
font-size: 13px;
}
.auth-feature-grid small {
color: #8b91a5;
font-size: 11px;
line-height: 1.45;
}
.auth-card-wrap {
padding: 42px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.auth-card {
width: min(100%, 500px);
padding: 34px;
border:
1px solid
rgba(226, 229, 239, 0.95);
border-radius: 32px;
background:
rgba(255, 255, 255, 0.96);
box-shadow:
0 30px 80px
rgba(30, 37, 76, 0.12);
}
.registration-card {
width: min(100%, 560px);
}
.auth-brand-mobile {
display: none;
align-items: center;
gap: 12px;
width: min(100%, 560px);
margin-bottom: 16px;
}
.auth-brand-mobile .auth-logo-mark {
width: 44px;
height: 44px;
border-radius: 14px;
font-size: 20px;
}
.auth-brand-mobile b,
.auth-brand-mobile small {
display: block;
}
.auth-brand-mobile b {
font-size: 18px;
}
.auth-brand-mobile small {
color: #8b91a5;
font-size: 11px;
}
.auth-heading {
margin-bottom: 24px;
}
.auth-heading h2 {
margin: 8px 0 7px;
font-size: 26px;
line-height: 1.14;
letter-spacing: -0.8px;
}
.auth-heading p {
margin: 0;
color: #858ca2;
font-size: 13px;
line-height: 1.55;
}
.auth-form {
display: grid;
gap: 16px;
}
.auth-field {
display: grid;
gap: 7px;
}
.auth-field > span {
color: #697188;
font-size: 10px;
letter-spacing: 1.1px;
font-weight: 900;
}
.auth-field > span small {
color: #a0a6b8;
font-size: 9px;
letter-spacing: 0;
}
.auth-field > input,
.auth-field > select,
.auth-input-group,
.password-input {
width: 100%;
min-height: 56px;
border: 1px solid #e5e8f1;
border-radius: 17px;
background: #fafbfe;
color: #171b2f;
font: inherit;
font-size: 14px;
font-weight: 700;
outline: none;
transition: 0.18s ease;
}
.auth-field > input,
.auth-field > select {
padding: 0 16px;
}
.auth-field input::placeholder {
color: #a8adbd;
font-weight: 600;
}
.auth-field > input:focus,
.auth-field > select:focus,
.auth-input-group:focus-within,
.password-input:focus-within {
border-color: #7164f4;
background: #ffffff;
box-shadow:
0 0 0 4px
rgba(97, 83, 240, 0.10);
}
.auth-input-group,
.password-input {
display: flex;
align-items: center;
overflow: hidden;
}
.auth-input-group i {
padding-left: 16px;
color: #5c6378;
font-style: normal;
font-size: 13px;
font-weight: 800;
}
.auth-input-group input,
.password-input input {
flex: 1;
min-width: 0;
min-height: 54px;
border: 0;
background: transparent;
color: #171b2f;
font: inherit;
font-weight: 700;
outline: none;
}
.auth-input-group input {
padding: 0 16px 0 9px;
}
.password-input input {
padding: 0 10px 0 16px;
}
.password-toggle {
width: 48px;
height: 48px;
flex: 0 0 48px;
margin-right: 4px;
border: 0;
border-radius: 14px;
background: transparent;
color: #9096aa;
cursor: pointer;
font-size: 18px;
}
.password-toggle.visible {
color: #5f52ed;
background: #efedff;
}
.field-help {
color: #9aa0b1;
font-size: 10px;
line-height: 1.4;
}
.success-text {
color: #168d58;
}
.error-text {
color: #c83c4b;
}
.auth-primary,
.auth-secondary,
.auth-back {
min-height: 56px;
border-radius: 17px;
font: inherit;
font-weight: 900;
cursor: pointer;
text-decoration: none;
}
.auth-primary {
padding: 0 18px;
border: 0;
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(
135deg,
#574aed,
#7459ff
);
color: #ffffff;
box-shadow:
0 14px 30px
rgba(91, 75, 239, 0.24);
}
.auth-primary b {
font-size: 20px;
}
.auth-primary.compact {
min-width: 190px;
}
.auth-secondary {
display: grid;
place-items: center;
border: 1px solid #e5e7f0;
background: #f8f9fd;
color: #4e556a;
}
.auth-back {
padding: 0 18px;
border: 1px solid #e5e8f1;
background: #ffffff;
color: #6d7489;
}
.auth-separator {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 14px;
color: #a0a5b5;
font-size: 10px;
font-weight: 800;
}
.auth-separator::before,
.auth-separator::after {
content: '';
height: 1px;
flex: 1;
background: #eceef4;
}
.auth-footnote,
.auth-login-link {
margin: 18px 0 0;
color: #a0a5b5;
text-align: center;
font-size: 10px;
line-height: 1.5;
}
.auth-login-link {
color: #868da2;
font-size: 12px;
}
.auth-login-link a {
color: #5f52ed;
font-weight: 900;
text-decoration: none;
}
.notice {
margin-bottom: 16px;
padding: 12px 14px;
border-radius: 15px;
font-size: 12px;
line-height: 1.5;
font-weight: 700;
}
.notice-error {
border: 1px solid #ffd7dc;
background: #fff2f4;
color: #b33343;
}
.notice-ok {
border: 1px solid #ccefdc;
background: #edf9f2;
color: #14784b;
}
/* Registration wizard */
.registration-progress {
display: grid;
grid-template-columns:
auto 1fr auto 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 28px;
}
.registration-progress button {
padding: 0;
border: 0;
background: transparent;
color: #9aa0b1;
display: grid;
justify-items: center;
gap: 6px;
cursor: pointer;
}
.registration-progress button i {
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
background: #f0f1f6;
color: #8d93a7;
font-style: normal;
font-size: 11px;
font-weight: 900;
}
.registration-progress button span {
font-size: 9px;
font-weight: 800;
}
.registration-progress button.active i {
background: #efedff;
color: #5d50ef;
}
.registration-progress button.current i {
background:
linear-gradient(
135deg,
#594cf0,
#795dff
);
color: #ffffff;
box-shadow:
0 8px 18px
rgba(91, 77, 240, 0.25);
}
.registration-progress em {
height: 2px;
border-radius: 999px;
background: #eceef4;
}
.register-step {
display: none;
}
.register-step.active {
display: grid;
gap: 16px;
animation:
registerStepIn
0.22s ease both;
}
@keyframes registerStepIn {
from {
opacity: 0;
transform: translateX(12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.business-type-grid {
display: grid;
gap: 10px;
}
.business-type-card {
min-height: 84px;
padding: 14px;
display: grid;
grid-template-columns:
48px 1fr 28px;
align-items: center;
gap: 12px;
border: 1px solid #e7e9f2;
border-radius: 20px;
background: #fbfcff;
cursor: pointer;
}
.business-type-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.business-type-card:has(input:checked) {
border-color: #7b6ef3;
background: #f4f2ff;
box-shadow:
0 0 0 3px
rgba(105, 90, 240, 0.08);
}
.business-type-icon {
width: 46px;
height: 46px;
border-radius: 15px;
display: grid;
place-items: center;
background: #efedff;
color: #5e51ee;
font-size: 20px;
font-weight: 900;
}
.business-type-card b,
.business-type-card small {
display: block;
}
.business-type-card b {
margin-bottom: 5px;
font-size: 14px;
}
.business-type-card small {
color: #8990a4;
font-size: 10px;
line-height: 1.45;
}
.business-type-card > i {
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: #e9eaf0;
color: #ffffff;
font-style: normal;
font-size: 12px;
font-weight: 900;
}
.business-type-card:has(input:checked) > i {
background: #6255ef;
}
.setup-toggle-card {
padding: 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
border: 1px solid #e7e9f2;
border-radius: 20px;
background: #fafbfe;
}
.setup-toggle-card b,
.setup-toggle-card small {
display: block;
}
.setup-toggle-card b {
margin-bottom: 5px;
font-size: 14px;
}
.setup-toggle-card small {
color: #8c92a5;
font-size: 10px;
line-height: 1.4;
}
.setup-toggle-card input {
position: absolute;
opacity: 0;
}
.setup-toggle-card > i {
width: 46px;
height: 26px;
position: relative;
border-radius: 999px;
background: #dfe2eb;
}
.setup-toggle-card > i::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 3px;
left: 3px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 2px 7px
rgba(29, 35, 63, 0.15);
transition: 0.2s ease;
}
.setup-toggle-card:has(input:checked) > i {
background: #6254ef;
}
.setup-toggle-card:has(input:checked) > i::after {
transform: translateX(20px);
}
.registration-subpanel {
padding: 14px;
display: grid;
gap: 14px;
border-radius: 20px;
background: #f5f4ff;
border: 1px solid #e5e1ff;
}
.auth-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.register-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
.register-summary {
padding: 13px 14px;
display: flex;
align-items: flex-start;
gap: 10px;
border-radius: 17px;
background: #edf9f2;
color: #277653;
}
.register-summary > span {
width: 24px;
height: 24px;
flex: 0 0 24px;
border-radius: 50%;
display: grid;
place-items: center;
background: #d6f2e2;
font-weight: 900;
}
.register-summary p {
margin: 2px 0 0;
font-size: 10px;
line-height: 1.55;
font-weight: 700;
}
.setup-preview {
max-width: 460px;
margin-top: 38px;
display: grid;
gap: 10px;
}
.setup-preview-step {
padding: 13px 14px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: center;
border: 1px solid transparent;
border-radius: 18px;
opacity: 0.52;
}
.setup-preview-step > span {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
background: #e8e9f1;
font-size: 11px;
font-weight: 900;
}
.setup-preview-step b,
.setup-preview-step small {
display: block;
}
.setup-preview-step b {
margin-bottom: 4px;
font-size: 13px;
}
.setup-preview-step small {
color: #8c92a4;
font-size: 10px;
}
.setup-preview-step.active {
border-color: #dedaff;
background:
rgba(255, 255, 255, 0.68);
opacity: 1;
}
.setup-preview-step.active > span,
.setup-preview-step.complete > span {
background: #6456ee;
color: #ffffff;
}
@media (max-width: 900px) {
.auth-shell,
.register-shell {
width: min(100%, 560px);
min-height: 100vh;
padding: 24px 16px 36px;
display: block;
}
.auth-visual {
display: none;
}
.auth-card-wrap {
min-height:
calc(100vh - 60px);
padding: 0;
justify-content: center;
}
.auth-brand-mobile {
display: flex;
}
.auth-card {
padding: 24px;
border-radius: 28px;
}
}
@media (max-width: 520px) {
.auth-shell,
.register-shell {
width: 100%;
padding: 18px 14px 28px;
}
.auth-card-wrap {
justify-content: flex-start;
}
.auth-card {
padding: 20px;
border-radius: 25px;
}
.auth-heading h2 {
font-size: 23px;
}
.auth-two-col {
grid-template-columns: 1fr;
}
.register-nav-row {
align-items: stretch;
}
.register-nav-row .auth-primary.compact {
min-width: 0;
flex: 1;
}
.registration-progress button span {
display: none;
}
}
/* ==========================================================================\n V6 Premium UX — dashboard, billing, quantity controls and mobile flow\n ========================================================================== */
.dashboard-greeting {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 4px 2px 14px;
}
.dashboard-greeting h2 {
margin: 6px 0 3px;
font-size: 21px;
line-height: 1.18;
letter-spacing: -0.7px;
}
.dashboard-greeting p {
margin: 0;
color: #8b91a5;
font-size: 11px;
}
.dashboard-actions-v6 {
margin-bottom: 14px;
}
.new-bill-cta {
min-height: 88px;
padding: 14px 15px;
display: grid;
grid-template-columns: 48px 1fr 30px;
align-items: center;
gap: 12px;
border-radius: 23px;
background:
radial-gradient(
circle at 92% 0%,
rgba(255, 255, 255, 0.18),
transparent 34%
),
linear-gradient(135deg, #4f43e8, #7159ff);
color: #ffffff;
text-decoration: none;
box-shadow: 0 16px 34px rgba(88, 72, 239, 0.28);
}
.new-bill-plus {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.16);
font-size: 26px;
font-weight: 400;
}
.new-bill-copy {
min-width: 0;
display: flex;
flex-direction: column;
}
.new-bill-copy small {
margin-bottom: 4px;
color: #dcd8ff;
font-size: 8px;
letter-spacing: 1.2px;
font-weight: 900;
}
.new-bill-copy strong {
font-size: 18px;
letter-spacing: -0.4px;
}
.new-bill-copy em {
margin-top: 3px;
color: #e9e6ff;
font-size: 10px;
font-style: normal;
}
.new-bill-cta > b {
font-size: 24px;
font-weight: 500;
}
.mini-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 8px;
margin-top: 9px;
}
.mini-action-grid > a {
min-width: 0;
min-height: 78px;
padding: 10px 6px;
border: 1px solid #e9ebf3;
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: #ffffff;
color: #252a3d;
text-decoration: none;
box-shadow: 0 7px 20px rgba(30, 36, 70, 0.04);
}
.mini-action-grid b {
font-size: 10px;
}
.mini-action-grid small {
width: 100%;
overflow: hidden;
color: #9aa0b2;
font-size: 8px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.mini-action-icon {
width: 31px;
height: 31px;
border-radius: 11px;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 900;
}
.mini-action-icon.violet {
background: #efedff;
color: #6255ef;
}
.mini-action-icon.blue {
background: #edf5ff;
color: #3478d9;
}
.mini-action-icon.amber {
background: #fff4df;
color: #bf7900;
}
.mini-action-icon.green {
background: #eaf9f1;
color: #14945c;
}
.sales-overview-card {
margin-bottom: 12px;
padding: 18px;
overflow: hidden;
position: relative;
border-radius: 25px;
background:
radial-gradient(
circle at 100% 0%,
rgba(255, 255, 255, 0.17) 0 70px,
transparent 71px
),
linear-gradient(135deg, #302d87, #5a4df3 58%, #725bff);
color: #ffffff;
box-shadow: 0 14px 30px rgba(71, 61, 184, 0.23);
}
.sales-overview-head,
.sales-overview-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.sales-overview-head small {
display: block;
margin-bottom: 7px;
color: #dcdafe;
font-size: 8px;
letter-spacing: 1px;
font-weight: 900;
}
.sales-overview-head strong {
display: block;
font-size: 31px;
line-height: 1;
letter-spacing: -1px;
}
.sales-collected-pill {
padding: 9px 11px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
text-align: right;
}
.sales-collected-pill span,
.sales-collected-pill b {
display: block;
}
.sales-collected-pill span {
margin-bottom: 3px;
color: #dddaff;
font-size: 8px;
}
.sales-collected-pill b {
font-size: 12px;
}
.sales-overview-foot {
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.13);
color: #e6e3ff;
font-size: 9px;
}
.metric-grid-v6 {
margin-bottom: 12px;
}
.dashboard-chart-v6 .chart-wrap {
height: 190px;
}
.recent-panel-v6 {
margin-bottom: 16px;
}
.empty-action {
display: inline-flex;
margin-top: 12px;
color: #6255ef;
font-size: 10px;
font-weight: 900;
text-decoration: none;
}
.billing-wizard-shell {
display: flex;
flex-direction: column;
}
.premium-progress {
margin-bottom: 18px;
padding: 3px 2px 0;
}
.premium-progress span.current i,
.premium-progress span.active:last-of-type i {
box-shadow: 0 7px 17px rgba(91, 77, 241, 0.22);
}
.compact-step-intro {
margin-bottom: 12px;
}
.compact-step-intro h2 {
margin-top: 4px;
}
.customer-step-card,
.payment-card-v6 {
padding: 15px;
border-radius: 22px;
}
.customer-mobile-input {
min-height: 59px;
}
.customer-mobile-input input {
font-size: 17px !important;
letter-spacing: 0.4px;
}
.primary-flow-btn {
min-height: 58px;
margin-top: 12px;
border-radius: 18px;
box-shadow: 0 13px 27px rgba(92, 77, 239, 0.20);
}
.premium-scan {
min-height: 86px;
border-radius: 23px;
box-shadow: 0 14px 30px rgba(37, 40, 112, 0.18);
}
.cart-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
}
.add-product-btn {
min-height: 38px;
padding: 0 13px;
border-radius: 12px;
font-size: 10px;
}
.premium-cart-item {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 10px;
padding: 12px;
border-radius: 20px;
box-shadow: 0 7px 22px rgba(24, 31, 62, 0.035);
}
.premium-cart-item .item-total {
grid-column: 2;
grid-row: 1;
align-items: flex-end;
justify-content: flex-start;
gap: 7px;
}
.premium-cart-item .qty-stepper {
grid-column: 1 / -1;
justify-self: start;
}
.qty-stepper {
display: inline-grid;
grid-template-columns: 38px minmax(40px, auto) 38px;
align-items: center;
overflow: hidden;
border: 1px solid #e4e6ef;
border-radius: 14px;
background: #f8f9fc;
}
.qty-stepper button {
width: 38px;
height: 38px;
border: 0;
background: transparent;
color: #5f52ed;
font-size: 20px;
font-weight: 700;
cursor: pointer;
}
.qty-stepper button:active {
background: #eceaff;
}
.qty-stepper strong {
min-width: 40px;
padding: 0 7px;
color: #202539;
text-align: center;
font-size: 14px;
}
.cart-qty-stepper {
grid-template-columns: 32px minmax(34px, auto) 32px;
border-radius: 12px;
}
.cart-qty-stepper button {
width: 32px;
height: 32px;
font-size: 17px;
}
.cart-qty-stepper strong {
min-width: 34px;
font-size: 12px;
}
.qty-control-block {
min-height: 70px;
padding: 12px 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #e7e9f2;
border-radius: 18px;
background: #fafbfe;
}
.qty-control-block > div:first-child small {
display: block;
margin-top: 4px;
color: #9aa0b2;
font-size: 9px;
}
.qty-stepper-large {
grid-template-columns: 44px minmax(48px, auto) 44px;
background: #ffffff;
}
.qty-stepper-large button {
width: 44px;
height: 44px;
font-size: 22px;
}
.qty-stepper-large strong {
min-width: 48px;
font-size: 17px;
}
.premium-total-card {
margin-top: 12px;
padding: 14px;
border: 1px solid #e9ebf3;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 8px 22px rgba(26, 32, 64, 0.035);
}
.sticky-flow-actions {
margin-top: 12px;
padding-bottom: 5px;
}
.payment-summary-v6 {
padding: 18px 0 15px;
text-align: center;
}
.payment-summary-v6 strong {
display: block;
margin: 5px 0 3px;
color: #151a2c;
font-size: 39px;
line-height: 1;
letter-spacing: -1.6px;
}
.payment-summary-v6 small {
color: #969caf;
font-size: 10px;
}
.receive-title-row {
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.receive-title-row small {
display: block;
margin-top: 3px;
color: #a0a5b5;
font-size: 8px;
}
.receive-title-row button {
min-height: 31px;
padding: 0 10px;
border: 0;
border-radius: 10px;
background: #efedff;
color: #5f52ed;
font-size: 9px;
font-weight: 900;
}
.payment-modes button {
height: 62px;
padding: 7px 4px;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.payment-modes button i,
.payment-modes button span {
display: block;
}
.payment-modes button i {
font-size: 15px;
}
.payment-modes button span {
font-size: 9px;
}
.premium-product-sheet {
max-height: min(86vh, 680px);
overflow-y: auto;
padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.product-sheet-price-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 105px;
gap: 10px;
}
.money-field-v6 {
min-height: 54px;
padding: 0 13px;
display: flex;
align-items: center;
border: 1px solid #e4e7f0;
border-radius: 16px;
background: #fafbfe;
}
.money-field-v6:focus-within {
border-color: #7063f4;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(98, 85, 239, 0.09);
}
.money-field-v6 i {
color: #3b4052;
font-style: normal;
font-weight: 900;
}
.money-field-v6 input {
width: 100%;
min-width: 0;
min-height: 50px;
padding: 0 8px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none;
}
.premium-sheet-save {
min-height: 55px;
margin-top: 4px;
border-radius: 17px;
box-shadow: 0 12px 25px rgba(92, 77, 239, 0.20);
}
.stock-quick-adjust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
margin-top: -4px;
}
.stock-quick-adjust button {
min-height: 37px;
border: 1px solid #e5e7f0;
border-radius: 12px;
background: #ffffff;
color: #6255ef;
font-size: 10px;
font-weight: 900;
}
.premium-product-card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.premium-product-card:active {
transform: scale(0.985);
}
@media (max-width: 390px) {
.mini-action-grid {
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 6px;
}
.mini-action-grid > a {
min-height: 72px;
padding-inline: 4px;
}
.new-bill-cta {
grid-template-columns: 44px 1fr 24px;
}
.new-bill-plus {
width: 44px;
height: 44px;
}
.product-sheet-price-row {
grid-template-columns: minmax(0, 1fr) 94px;
}
.qty-control-block {
padding: 10px;
}
}
/* ==========================================================================
V6.2 – Payment QR, WhatsApp payment page and 3D sales chart
========================================================================== */
.upi-customer-panel {
display: block;
margin-top: 14px;
padding: 16px;
border: 1px solid #e5e2ff;
border-radius: 24px;
background:
radial-gradient(
circle at 90% 8%,
rgba(111, 92, 255, 0.10),
transparent 34%
),
linear-gradient(
180deg,
#fbfaff,
#f7f6ff
);
box-shadow:
0 18px 42px
rgba(59, 49, 149, 0.08);
}
.upi-customer-panel.hidden {
display: none;
}
.upi-customer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.upi-customer-head h3 {
margin: 3px 0;
font-size: 18px;
letter-spacing: -0.4px;
}
.upi-customer-head p {
max-width: 235px;
margin: 0;
color: #898fa4;
font-size: 9px;
line-height: 1.5;
}
.upi-live-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 9px;
border-radius: 999px;
background: #e9faf1;
color: #188153;
font-size: 8px;
font-weight: 900;
}
.upi-live-badge i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #29bd76;
box-shadow:
0 0 0 4px
rgba(41, 189, 118, 0.12);
}
.upi-amount-display {
margin-bottom: 10px;
text-align: center;
}
.upi-amount-display > span,
.customer-qr-amount small {
display: block;
color: #9298ab;
font-size: 8px;
letter-spacing: 1px;
font-weight: 900;
}
.upi-amount-display strong {
display: block;
margin-top: 3px;
color: #141a31;
font-size: 34px;
line-height: 1.1;
letter-spacing: -1px;
}
.upi-qr-stage,
.customer-qr-stage {
min-height: 298px;
position: relative;
display: grid;
place-items: center;
}
.upi-qr-glow,
.customer-qr-glow {
width: 240px;
height: 240px;
position: absolute;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(101, 82, 242, 0.18),
rgba(101, 82, 242, 0)
);
filter: blur(6px);
}
.qr-card-large,
.customer-qr-wrap {
width: 292px;
height: 292px;
position: relative;
z-index: 2;
padding: 10px;
display: grid;
place-items: center;
border: 1px solid #e9e8f2;
border-radius: 28px;
background: #ffffff;
box-shadow:
0 22px 48px
rgba(21, 27, 56, 0.14);
}
#upiQr,
#payQr {
width: 270px;
height: 270px;
display: grid;
place-items: center;
overflow: hidden;
background: #ffffff;
}
#upiQr canvas,
#upiQr img,
#payQr canvas,
#payQr img {
width: 270px;
height: 270px;
max-width: 100%;
max-height: 100%;
}
.upi-payment-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 10px 0;
}
.upi-payment-details > span {
min-width: 0;
padding: 10px 11px;
border: 1px solid #e9e8f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.76);
}
.upi-payment-details small,
.upi-payment-details b {
display: block;
}
.upi-payment-details small {
margin-bottom: 3px;
color: #9aa0b3;
font-size: 7px;
letter-spacing: 0.8px;
font-weight: 900;
}
.upi-payment-details b {
overflow: hidden;
color: #31374c;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.upi-intent-button {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 0;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(
135deg,
#594bef,
#7258ff
);
color: #ffffff;
font: inherit;
font-size: 11px;
font-weight: 900;
cursor: pointer;
box-shadow:
0 12px 24px
rgba(93, 77, 239, 0.20);
}
.upi-helper-text {
display: block;
margin-top: 8px;
color: #989eb0;
text-align: center;
font-size: 8px;
}
.upi-qr-error {
position: relative;
z-index: 4;
max-width: 280px;
padding: 14px;
border: 1px solid #ffd7dc;
border-radius: 16px;
background: #fff4f5;
color: #b53445;
text-align: center;
font-size: 10px;
line-height: 1.5;
font-weight: 800;
}
.pay-public-card-v62 {
position: relative;
overflow: hidden;
}
.public-status-pill {
position: absolute;
top: 16px;
right: 16px;
padding: 7px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.17);
color: #ffffff;
font-size: 8px;
font-weight: 900;
}
.public-invoice-v62 {
overflow: hidden;
}
.public-customer-line {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid #eceef4;
}
.public-customer-line > span {
min-width: 0;
}
.public-customer-line small,
.public-customer-line b {
display: block;
}
.public-customer-line small {
margin-bottom: 3px;
color: #9aa0b2;
font-size: 7px;
letter-spacing: 0.8px;
font-weight: 900;
}
.public-customer-line b {
overflow: hidden;
color: #282e43;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-lines {
display: grid;
}
.public-invoice-totals {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid #eceef4;
background: #fafbfe;
}
.public-invoice-totals > span {
padding: 10px;
border-radius: 14px;
background: #ffffff;
}
.public-invoice-totals > span.due {
background: #fff6ea;
}
.public-invoice-totals small,
.public-invoice-totals b {
display: block;
}
.public-invoice-totals small {
margin-bottom: 4px;
color: #969caf;
font-size: 8px;
font-weight: 800;
}
.public-invoice-totals b {
color: #22283d;
font-size: 13px;
}
.public-invoice-totals .due b {
color: #bb6900;
}
.customer-qr-pay {
padding: 18px 15px;
border: 1px solid #e7e5f7;
border-radius: 27px;
background:
radial-gradient(
circle at 90% 6%,
rgba(102, 82, 242, 0.10),
transparent 30%
),
#ffffff;
}
.customer-qr-head {
text-align: center;
}
.customer-qr-head h2 {
margin: 5px 0 4px;
color: #181d31;
font-size: 22px;
letter-spacing: -0.7px;
}
.customer-qr-head p {
max-width: 290px;
margin: 0 auto;
color: #8c93a6;
font-size: 10px;
line-height: 1.5;
}
.customer-qr-amount {
margin-top: 14px;
text-align: center;
}
.customer-qr-amount strong {
display: block;
margin-top: 3px;
color: #5b4df5;
font-size: 32px;
letter-spacing: -0.8px;
}
.customer-qr-note {
display: block;
max-width: 300px;
margin: 8px auto 14px;
color: #9399ab;
text-align: center;
font-size: 9px;
line-height: 1.5;
}
.customer-pay-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.customer-pay-buttons > * {
min-height: 48px;
border-radius: 15px;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
text-decoration: none;
}
.customer-pay-buttons #payNow {
background:
linear-gradient(
135deg,
#584bef,
#7259ff
);
color: #ffffff;
}
.customer-pay-buttons #saveQr {
border: 1px solid #e4e6ef;
background: #f7f8fc;
color: #4e556c;
}
/* Premium dependency-free 3D-look sales chart */
.sales-chart-3d-shell {
min-height: 240px;
position: relative;
padding: 8px 4px 2px;
overflow: hidden;
border-radius: 20px;
background:
radial-gradient(
circle at 88% 10%,
rgba(111, 92, 255, 0.08),
transparent 28%
),
linear-gradient(
180deg,
#f9f9ff,
#ffffff
);
}
.sales-chart-3d-shell::after {
content: '';
height: 36px;
position: absolute;
right: 7px;
bottom: 30px;
left: 7px;
border-radius: 50%;
background:
radial-gradient(
ellipse,
rgba(68, 57, 175, 0.12),
rgba(68, 57, 175, 0)
);
filter: blur(7px);
pointer-events: none;
}
.sales-chart-3d-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 7px 5px;
}
.sales-chart-3d-summary small,
.sales-chart-3d-summary b {
display: block;
}
.sales-chart-3d-summary small {
margin-bottom: 2px;
color: #949aae;
font-size: 7px;
letter-spacing: 0.8px;
font-weight: 900;
}
.sales-chart-3d-summary b {
color: #1b2036;
font-size: 15px;
}
.chart-view-badge {
padding: 6px 9px;
border-radius: 999px;
background: #eeecff;
color: #5c4ff0;
font-size: 8px;
font-weight: 900;
}
.sales-chart-3d-grid {
position: absolute;
top: 60px;
right: 8px;
bottom: 39px;
left: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.sales-chart-3d-grid i {
height: 1px;
display: block;
background:
linear-gradient(
90deg,
rgba(128, 132, 153, 0),
rgba(128, 132, 153, 0.13),
rgba(128, 132, 153, 0)
);
}
.sales-chart-3d {
height: 180px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: end;
gap: 7px;
padding: 4px 7px 0;
perspective: 700px;
}
.sales-3d-column {
min-width: 0;
height: 100%;
display: grid;
grid-template-rows: 1fr 18px;
align-items: end;
justify-items: center;
}
.sales-3d-stage {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sales-3d-bar {
width: min(26px, 74%);
height: var(--bar-height);
min-height: 8px;
position: relative;
border: 0;
border-radius: 8px 8px 5px 5px;
background:
linear-gradient(
180deg,
#8a77ff 0%,
#6653f0 42%,
#4b3fc1 100%
);
box-shadow:
7px 7px 13px
rgba(55, 43, 142, 0.18);
cursor: pointer;
transform:
rotateX(2deg)
rotateY(-7deg);
transform-origin: bottom;
transition:
transform 0.18s ease,
filter 0.18s ease;
}
.sales-3d-bar::before {
content: '';
height: 9px;
position: absolute;
top: -5px;
right: 2px;
left: 2px;
border-radius: 50%;
background:
linear-gradient(
90deg,
#a99aff,
#7864f8
);
transform: skewX(-10deg);
}
.sales-3d-bar::after {
content: '';
width: 8px;
position: absolute;
top: 3px;
right: -5px;
bottom: 2px;
border-radius: 2px 5px 5px 2px;
background:
linear-gradient(
180deg,
#5143ce,
#372d9d
);
transform: skewY(-24deg);
transform-origin: left top;
opacity: 0.82;
}
.sales-3d-column.is-current .sales-3d-bar {
background:
linear-gradient(
180deg,
#6fddc0,
#2fb88d 48%,
#1e8b68
);
box-shadow:
7px 7px 14px
rgba(28, 143, 105, 0.18);
}
.sales-3d-column.is-current .sales-3d-bar::before {
background:
linear-gradient(
90deg,
#a0efd9,
#51c7a5
);
}
.sales-3d-column.is-current .sales-3d-bar::after {
background:
linear-gradient(
180deg,
#249a75,
#15694f
);
}
.sales-3d-value {
position: absolute;
top: -29px;
left: 50%;
z-index: 4;
padding: 4px 6px;
border-radius: 8px;
background: #1e2339;
color: #ffffff;
font-size: 7px;
font-weight: 900;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform:
translateX(-50%)
translateY(4px);
transition: 0.16s ease;
}
.sales-3d-bar:hover .sales-3d-value,
.sales-3d-bar:focus-visible .sales-3d-value {
opacity: 1;
transform:
translateX(-50%)
translateY(0);
}
.sales-3d-day {
padding-top: 5px;
color: #9298aa;
font-size: 8px;
font-weight: 800;
}
.sales-3d-column.is-current .sales-3d-day {
color: #268c6c;
font-weight: 900;
}
@media (max-width: 420px) {
.qr-card-large,
.customer-qr-wrap {
width: min(292px, 100%);
height: auto;
aspect-ratio: 1;
}
#upiQr,
#payQr {
width: min(270px, 100%);
height: auto;
min-height: 250px;
}
.upi-payment-details,
.public-customer-line {
grid-template-columns: 1fr;
}
.customer-pay-buttons {
grid-template-columns: 1fr;
}
.sales-chart-3d {
gap: 5px;
}
}
/* ==========================================================================
V6.3 – Bulk Barcode & Customer QR Studio
========================================================================== */
.premium-page-head {
margin-bottom: 14px;
}
.premium-page-head h1 {
margin: 4px 0 5px;
}
.premium-page-head p {
margin: 0;
color: #8b92a7;
font-size: 10px;
line-height: 1.5;
}
.bulk-code-hero {
margin-bottom: 12px;
padding: 15px;
display: grid;
grid-template-columns: 46px 1fr;
gap: 12px;
align-items: center;
border: 1px solid #e4e1ff;
border-radius: 22px;
background:
radial-gradient(
circle at 90% 10%,
rgba(108, 87, 255, 0.12),
transparent 30%
),
linear-gradient(
135deg,
#f8f7ff,
#ffffff
);
}
.bulk-code-hero-icon {
width: 46px;
height: 46px;
border-radius: 15px;
display: grid;
place-items: center;
background: #ebe8ff;
color: #5d50ef;
font-size: 22px;
font-weight: 900;
}
.bulk-code-hero b {
display: block;
margin-bottom: 4px;
font-size: 12px;
}
.bulk-code-hero p {
margin: 0;
color: #8c93a7;
font-size: 9px;
line-height: 1.45;
}
.bulk-code-form {
display: grid;
gap: 12px;
}
.code-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.code-type-card {
min-height: 116px;
padding: 13px;
position: relative;
display: grid;
align-content: start;
gap: 8px;
border: 1px solid #e6e8f1;
border-radius: 19px;
background: #fbfcff;
cursor: pointer;
}
.code-type-card input {
position: absolute;
opacity: 0;
}
.code-type-card > i {
width: 23px;
height: 23px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
display: grid;
place-items: center;
background: #e8e9ef;
color: #ffffff;
font-style: normal;
font-size: 10px;
font-weight: 900;
}
.code-type-card:has(input:checked) {
border-color: #7669f4;
background: #f4f2ff;
box-shadow:
0 0 0 3px
rgba(101, 86, 239, 0.08);
}
.code-type-card:has(input:checked) > i {
background: #6255ef;
}
.code-type-icon {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: #eeecff;
color: #5c4fee;
font-size: 20px;
}
.code-type-card b,
.code-type-card small {
display: block;
}
.code-type-card b {
font-size: 11px;
}
.code-type-card small {
color: #8c93a7;
font-size: 8px;
line-height: 1.4;
}
.info-strip {
margin-top: 9px;
padding: 10px 11px;
border-radius: 14px;
background: #f4f5fa;
color: #7e8599;
font-size: 9px;
line-height: 1.45;
}
.info-strip.warning {
background: #fff6ea;
color: #a7630c;
}
.bulk-qty-control {
width: 190px;
margin: 4px auto 12px;
display: grid;
grid-template-columns: 52px 1fr 52px;
align-items: center;
gap: 8px;
}
.bulk-qty-control button {
width: 52px;
height: 52px;
border: 1px solid #e2e5ef;
border-radius: 17px;
background: #ffffff;
color: #5d50ef;
font-size: 25px;
font-weight: 900;
cursor: pointer;
}
.bulk-qty-control strong {
text-align: center;
color: #151a2e;
font-size: 28px;
letter-spacing: -1px;
}
.bulk-quick-qty {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.bulk-quick-qty button {
min-height: 40px;
border: 1px solid #e4e6ef;
border-radius: 13px;
background: #f9faff;
color: #6d7489;
font-size: 10px;
font-weight: 900;
cursor: pointer;
}
.bulk-quick-qty button.active {
border-color: #7466f4;
background: #eeecff;
color: #5e51ef;
}
.bulk-result {
margin-top: 18px;
padding: 14px;
border: 1px solid #e5e7ef;
border-radius: 22px;
background: #ffffff;
}
.bulk-result-actions {
display: flex;
gap: 7px;
}
.bulk-result-actions button {
min-height: 36px;
padding: 0 11px;
border: 1px solid #e4e6ef;
border-radius: 12px;
background: #f8f9fd;
color: #575e73;
font-size: 9px;
font-weight: 900;
cursor: pointer;
}
.bulk-codes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.bulk-code-label {
min-width: 0;
padding: 9px;
break-inside: avoid;
border: 1px dashed #dfe2eb;
border-radius: 14px;
background: #ffffff;
}
.bulk-code-visual {
min-height: 112px;
display: grid;
place-items: center;
overflow: hidden;
}
.bulk-code-visual svg {
max-width: 100%;
}
.bulk-code-visual canvas,
.bulk-code-visual img {
max-width: 110px;
max-height: 110px;
}
.bulk-code-meta {
margin-top: 6px;
text-align: center;
}
.bulk-code-meta b,
.bulk-code-meta small {
display: block;
}
.bulk-code-meta b {
overflow: hidden;
color: #242a40;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.bulk-code-meta small {
margin-top: 2px;
color: #989eaf;
font-size: 7px;
}
.customer-product-page {
min-height: 100vh;
background: #f5f6fb;
}
.customer-product-shell {
width: min(100%, 460px);
min-height: 100vh;
margin: 0 auto;
padding: 24px 16px 36px;
}
.customer-product-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.customer-product-brand > span {
width: 44px;
height: 44px;
border-radius: 15px;
display: grid;
place-items: center;
background:
linear-gradient(
135deg,
#584bef,
#7359ff
);
color: #ffffff;
font-weight: 900;
}
.customer-product-brand b,
.customer-product-brand small {
display: block;
}
.customer-product-brand b {
font-size: 13px;
}
.customer-product-brand small {
color: #9298aa;
font-size: 9px;
}
.customer-product-card {
padding: 22px;
border: 1px solid #e7e9f0;
border-radius: 28px;
background:
radial-gradient(
circle at 90% 8%,
rgba(106, 86, 255, 0.10),
transparent 28%
),
#ffffff;
box-shadow:
0 20px 55px
rgba(36, 42, 76, 0.09);
}
.customer-product-card h1 {
margin: 6px 0 10px;
font-size: 28px;
letter-spacing: -1px;
}
.customer-product-price {
margin-bottom: 12px;
color: #5b4df5;
font-size: 34px;
font-weight: 900;
letter-spacing: -1px;
}
.customer-product-chip {
width: fit-content;
margin-bottom: 16px;
padding: 7px 10px;
border-radius: 999px;
background: #eeecff;
color: #5b4df5;
font-size: 9px;
font-weight: 900;
}
.customer-product-info-row {
padding: 13px 0;
border-top: 1px solid #eceef4;
}
.customer-product-info-row small,
.customer-product-info-row b {
display: block;
}
.customer-product-info-row small {
margin-bottom: 4px;
color: #9aa0b1;
font-size: 8px;
letter-spacing: 0.8px;
font-weight: 900;
}
.customer-product-info-row b {
color: #31374b;
font-size: 11px;
}
.customer-product-note {
margin: 16px 0 0;
color: #969cad;
font-size: 9px;
line-height: 1.55;
}
@media print {
body * {
visibility: hidden !important;
}
#bulkCodesResult,
#bulkCodesResult * {
visibility: visible !important;
}
#bulkCodesResult {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: #ffffff;
}
#bulkCodesResult .panel-head {
display: none;
}
.bulk-codes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4mm;
}
.bulk-code-label {
padding: 3mm;
border: 1px solid #bbbbbb;
border-radius: 0;
page-break-inside: avoid;
}
}
@media (max-width: 420px) {
.code-type-grid {
grid-template-columns: 1fr;
}
.bulk-codes-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================\n V6.4 Premium Dashboard + Floating Bottom Dock\n ========================================================================== */
.dash-v64-welcome {
margin: 2px 0 13px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.dash-v64-welcome h2 {
margin: 5px 0 3px;
color: #151a2c;
font-size: 19px;
line-height: 1.15;
letter-spacing: -0.55px;
}
.dash-v64-welcome p {
margin: 0;
color: #8c93a6;
font-size: 9px;
}
.premium-live-pill {
margin-top: 2px;
box-shadow: 0 7px 18px rgba(25, 166, 102, .10);
}
.dash-v64-hero {
min-height: 300px;
position: relative;
overflow: hidden;
padding: 17px;
border-radius: 29px;
color: #fff;
background:
linear-gradient(145deg, #102c69 0%, #12469f 48%, #1765da 100%);
box-shadow: 0 22px 45px rgba(24, 70, 157, .25);
}
.dash-v64-orb {
position: absolute;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 50%;
pointer-events: none;
}
.dash-v64-orb-one {
width: 260px;
height: 260px;
top: -120px;
right: -80px;
}
.dash-v64-orb-two {
width: 190px;
height: 190px;
top: -55px;
right: -25px;
background: rgba(255, 255, 255, .025);
}
.dash-v64-hero-top {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 10px;
align-items: center;
}
.dash-v64-app-mark {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: linear-gradient(145deg, #9ed3ff, #e4f4ff);
color: #1452af;
font-size: 20px;
font-weight: 950;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.dash-v64-hero-title b,
.dash-v64-hero-title small {
display: block;
}
.dash-v64-hero-title b {
margin-bottom: 3px;
font-size: 13px;
}
.dash-v64-hero-title small {
color: rgba(255,255,255,.68);
font-size: 8px;
}
.dash-v64-status {
padding: 7px 9px;
border: 1px solid rgba(94, 239, 188, .22);
border-radius: 999px;
background: rgba(20, 174, 119, .20);
color: #70efbd;
font-size: 7px;
font-weight: 900;
}
.dash-v64-sales-row {
position: relative;
z-index: 2;
margin-top: 23px;
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: end;
gap: 12px;
}
.dash-v64-sales-row span,
.dash-v64-sales-row small,
.dash-v64-sales-row strong {
display: block;
}
.dash-v64-sales-row span {
color: rgba(255,255,255,.68);
font-size: 8px;
letter-spacing: .8px;
font-weight: 850;
}
.dash-v64-sales-row strong {
margin: 5px 0 4px;
font-size: 34px;
line-height: 1;
letter-spacing: -1.4px;
}
.dash-v64-sales-row small {
color: rgba(255,255,255,.72);
font-size: 8px;
}
.dash-v64-spark-wrap {
min-height: 78px;
display: flex;
align-items: end;
}
.dash-v64-sparkline {
width: 100%;
height: 76px;
overflow: visible;
}
.dash-v64-spark-area {
fill: url(#sparkFill);
}
.dash-v64-spark-line {
fill: none;
stroke: #9fd5ff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 4px 6px rgba(126,205,255,.28));
}
.dash-v64-spark-dot {
fill: #dff3ff;
stroke: #63bdf6;
stroke-width: 2;
}
.dash-v64-hero-metrics {
position: relative;
z-index: 2;
margin-top: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.dash-v64-hero-metrics article {
min-width: 0;
padding: 10px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
background: rgba(255,255,255,.08);
backdrop-filter: blur(8px);
}
.dash-v64-hero-metrics small,
.dash-v64-hero-metrics b {
display: block;
}
.dash-v64-hero-metrics small {
margin-bottom: 5px;
color: rgba(255,255,255,.58);
font-size: 6px;
letter-spacing: .55px;
font-weight: 900;
}
.dash-v64-hero-metrics b {
overflow: hidden;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-v64-primary-cta {
min-height: 49px;
position: relative;
z-index: 2;
margin-top: 12px;
padding: 0 14px;
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 8px;
border-radius: 16px;
background: linear-gradient(90deg, #2c82ff, #6556f6);
color: #fff;
text-decoration: none;
box-shadow: 0 12px 24px rgba(19, 44, 104, .24);
}
.dash-v64-primary-cta > span {
font-size: 20px;
font-weight: 400;
}
.dash-v64-primary-cta b {
font-size: 11px;
text-align: center;
}
.dash-v64-primary-cta em {
font-style: normal;
font-size: 18px;
}
.dash-v64-section-head {
margin: 19px 2px 9px;
}
.dash-v64-section-head h3 {
margin: 4px 0 0;
font-size: 14px;
letter-spacing: -.25px;
}
.dash-v64-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.dash-v64-actions::-webkit-scrollbar {
display: none;
}
.dash-v64-action {
min-width: 78px;
min-height: 98px;
padding: 11px 7px;
display: grid;
align-content: start;
justify-items: center;
gap: 5px;
border: 1px solid #e8eaf1;
border-radius: 19px;
background: #fff;
color: #242a3f;
text-align: center;
text-decoration: none;
box-shadow: 0 12px 25px rgba(36, 42, 72, .055);
}
.dash-v64-action > span {
width: 38px;
height: 38px;
margin-bottom: 2px;
border-radius: 13px;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 900;
}
.dash-v64-action.blue > span { background:#eaf2ff; color:#367bff; }
.dash-v64-action.green > span { background:#e7f8ef; color:#22a667; }
.dash-v64-action.violet > span { background:#f0ebff; color:#7750e8; }
.dash-v64-action.orange > span { background:#fff2e6; color:#ed8a16; }
.dash-v64-action.amber > span { background:#fff5df; color:#d98b12; }
.dash-v64-action.cyan > span { background:#e6f8fb; color:#1b9fb4; }
.dash-v64-action b {
font-size: 9px;
}
.dash-v64-action small {
color: #9298aa;
font-size: 6.5px;
line-height: 1.3;
}
.dash-v64-metric-grid {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.dash-v64-metric-grid article {
padding: 11px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 9px;
align-items: center;
border: 1px solid #e7e9f0;
border-radius: 17px;
background: #fff;
box-shadow: 0 10px 22px rgba(38, 44, 74, .045);
}
.dash-v64-metric-grid small,
.dash-v64-metric-grid b {
display: block;
}
.dash-v64-metric-grid small {
margin-bottom: 3px;
color: #969cae;
font-size: 8px;
}
.dash-v64-metric-grid b {
font-size: 11px;
}
.premium-pending-banner {
margin-top: 12px;
}
.dash-v64-chart-panel {
margin-top: 13px;
border-radius: 24px;
overflow: hidden;
}
.dash-v64-chart-summary {
padding: 2px 2px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dash-v64-chart-summary small,
.dash-v64-chart-summary strong {
display: block;
}
.dash-v64-chart-summary small {
margin-bottom: 3px;
color: #989eaf;
font-size: 7px;
letter-spacing: .7px;
font-weight: 900;
}
.dash-v64-chart-summary strong {
font-size: 17px;
}
.dash-v64-chart-summary > span {
padding: 7px 9px;
border-radius: 10px;
background: #efedff;
color: #5d50ef;
font-size: 8px;
font-weight: 900;
}
.dash-v64-chart-stage {
height: 190px;
position: relative;
overflow: hidden;
border-radius: 18px;
background: linear-gradient(180deg, #f9f9ff, #fff);
}
.dash-v64-chart-grid {
position: absolute;
inset: 12px 8px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dash-v64-chart-grid i {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(128,133,154,.13), transparent);
}
.dash-v64-3d-bars {
height: 100%;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
padding: 10px 8px 0;
perspective: 750px;
}
.dash-v64-bar-column {
min-width: 0;
height: 100%;
display: grid;
grid-template-rows: 1fr 24px;
align-items: end;
justify-items: center;
}
.dash-v64-bar-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: end;
justify-content: center;
}
.dash-v64-bar {
width: min(28px, 72%);
height: var(--height);
min-height: 8px;
position: relative;
border: 0;
border-radius: 8px 8px 5px 5px;
background: linear-gradient(180deg, #8d79ff 0%, #6452ef 50%, #4637bd 100%);
box-shadow: 7px 8px 14px rgba(70,55,183,.18);
transform: rotateY(-8deg);
transform-origin: bottom;
}
.dash-v64-bar::before {
content: '';
height: 9px;
position: absolute;
top: -5px;
right: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(90deg, #b1a4ff, #7f6cff);
}
.dash-v64-bar::after {
content: '';
width: 8px;
position: absolute;
top: 3px;
right: -5px;
bottom: 2px;
border-radius: 0 5px 5px 0;
background: #36299e;
transform: skewY(-25deg);
transform-origin: left top;
opacity: .78;
}
.dash-v64-bar-column.current .dash-v64-bar {
background: linear-gradient(180deg, #62e4c2, #2db88c 55%, #1b8263);
box-shadow: 7px 8px 14px rgba(28,143,105,.18);
}
.dash-v64-bar-column.current .dash-v64-bar::before {
background: linear-gradient(90deg, #a8f2dd, #4bc9a5);
}
.dash-v64-bar-column.current .dash-v64-bar::after {
background: #177253;
}
.dash-v64-bar-tooltip {
position: absolute;
top: -28px;
left: 50%;
padding: 4px 6px;
border-radius: 8px;
background: #1e2339;
color: #fff;
font-size: 7px;
font-weight: 900;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%);
transition: .15s ease;
}
.dash-v64-bar:hover .dash-v64-bar-tooltip,
.dash-v64-bar:focus-visible .dash-v64-bar-tooltip {
opacity: 1;
}
.dash-v64-bar-day {
padding-top: 5px;
color: #9097aa;
font-size: 7px;
font-weight: 850;
}
.dash-v64-bar-column.current .dash-v64-bar-day {
color: #218665;
}
.dash-v64-recent {
margin-bottom: 18px;
}
/* Floating bottom dock inspired by native finance apps. */
.bottom-nav-v64 {
width: min(calc(100% - 24px), 392px);
height: 70px;
right: 12px;
bottom: max(10px, env(safe-area-inset-bottom));
left: 12px;
margin: auto;
padding: 7px 8px 6px;
border: 1px solid rgba(225,228,238,.92);
border-radius: 24px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 40px rgba(31,38,68,.16);
backdrop-filter: blur(18px);
}
.bottom-nav-v64 a {
min-width: 0;
height: 55px;
border-radius: 16px;
}
.bottom-nav-v64 a > span {
width: 32px;
height: 30px;
margin: 0 auto 1px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 17px;
}
.bottom-nav-v64 a small {
font-size: 7px;
font-weight: 850;
}
.bottom-nav-v64 a.active:not(.nav-bill-v64) > span {
background: #eef1ff;
color: #5548ef;
}
.bottom-nav-v64 .nav-bill-v64 {
width: 60px;
height: 60px;
margin-top: -18px;
border: 5px solid #fff;
border-radius: 20px;
background: linear-gradient(145deg, #5f51ef, #7158ff);
color: #fff;
box-shadow: 0 13px 26px rgba(91,76,239,.30);
}
.bottom-nav-v64 .nav-bill-v64 > span {
width: auto;
height: auto;
background: transparent !important;
color: #fff !important;
font-size: 24px;
}
.bottom-nav-v64 .nav-bill-v64 small {
margin-top: -2px;
color: #fff;
}
.app-shell {
padding-bottom: 88px;
}
@media (max-width: 390px) {
.dash-v64-hero {
padding: 15px;
}
.dash-v64-sales-row strong {
font-size: 30px;
}
.dash-v64-actions {
grid-template-columns: repeat(4, minmax(76px, 1fr));
}
}
/* ==========================================================================
V6.5 Mobile UI cleanup
========================================================================== */
/* Compact subpage header */
.compact-topbar {
min-height: 58px;
position: sticky;
top: 0;
z-index: 30;
padding:
max(10px, env(safe-area-inset-top))
14px
8px;
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 8px;
background:
rgba(247, 248, 252, 0.94);
backdrop-filter: blur(18px);
}
.compact-topbar h1 {
margin: 0;
overflow: hidden;
color: #171c30;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 17px;
line-height: 1.15;
letter-spacing: -0.35px;
}
.compact-back {
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #e7e9f1;
border-radius: 13px;
display: grid;
place-items: center;
background: #ffffff;
color: #3d4459;
cursor: pointer;
box-shadow:
0 7px 18px
rgba(31, 37, 68, 0.05);
}
.compact-back svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.compact-topbar-space {
width: 38px;
height: 38px;
}
.subpage-content {
padding-top: 4px;
}
.dashboard-content {
padding-top: 0;
}
/* True centered mobile dock */
.mobile-dock {
width: min(
calc(100% - 24px),
436px
);
height: 72px;
right: auto;
bottom:
max(
10px,
env(safe-area-inset-bottom)
);
left: 50%;
margin: 0;
padding: 6px 7px;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
align-items: end;
justify-content: initial;
gap: 2px;
border: 1px solid
rgba(226, 229, 239, 0.96);
border-radius: 25px;
background:
rgba(255, 255, 255, 0.97);
box-shadow:
0 18px 40px
rgba(31, 38, 68, 0.17);
backdrop-filter: blur(20px);
transform: translateX(-50%);
}
.mobile-dock a {
min-width: 0;
height: 57px;
padding: 2px 1px;
display: grid;
grid-template-rows: 34px 15px;
align-items: center;
justify-items: center;
gap: 0;
border-radius: 15px;
color: #8d94a7;
text-decoration: none;
font-size: inherit;
font-weight: 800;
}
.mobile-dock small {
font-size: 7.5px;
line-height: 1;
font-weight: 850;
}
.dock-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 12px;
}
.dock-icon svg,
.dock-bill-button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-dock a.active:not(.dock-bill) {
color: #5c4ff0;
}
.mobile-dock a.active:not(.dock-bill)
.dock-icon {
background: #eeecff;
}
.mobile-dock .dock-bill {
height: 68px;
margin-top: -18px;
grid-template-rows: 50px 14px;
overflow: visible;
color: #5b4df5;
}
.dock-bill-button {
width: 54px;
height: 54px;
border: 5px solid #ffffff;
border-radius: 19px;
display: grid;
place-items: center;
background:
linear-gradient(
145deg,
#5b4df3,
#745aff
);
color: #ffffff;
box-shadow:
0 13px 27px
rgba(91, 77, 243, 0.31);
}
.dock-bill-button svg {
width: 23px;
height: 23px;
stroke-width: 2;
}
.mobile-dock .dock-bill small {
color: #5b4df5;
}
.app-shell {
padding-bottom: 92px;
}
/* Wire / line sales chart */
.wire-chart-panel {
margin-top: 13px;
padding: 15px;
border-radius: 24px;
overflow: hidden;
}
.wire-chart-head h3 {
margin-top: 4px;
}
.wire-chart-summary {
margin-top: 2px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wire-chart-summary small,
.wire-chart-summary strong {
display: block;
}
.wire-chart-summary small {
margin-bottom: 3px;
color: #989eaf;
font-size: 7px;
letter-spacing: 0.7px;
font-weight: 900;
}
.wire-chart-summary strong {
font-size: 17px;
}
.wire-chart-chip {
padding: 7px 9px;
border-radius: 10px;
background: #efedff;
color: #5d50ef;
font-size: 8px;
font-weight: 900;
}
.wire-chart-stage {
height: 208px;
position: relative;
margin-top: 5px;
overflow: hidden;
border-radius: 18px;
background:
radial-gradient(
circle at 85% 10%,
rgba(105, 86, 244, 0.07),
transparent 30%
),
linear-gradient(
180deg,
#fbfbff,
#ffffff
);
}
.wire-chart-grid {
position: absolute;
inset: 18px 10px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.wire-chart-grid i {
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(129, 134, 154, 0.12),
transparent
);
}
.sales-wire-chart {
width: 100%;
height: 172px;
position: relative;
z-index: 2;
overflow: visible;
}
.wire-area {
fill: url(#wireAreaGradient);
}
.wire-line {
fill: none;
stroke: #6657f3;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.wire-point-hit {
fill: transparent;
cursor: pointer;
}
.wire-point-dot {
fill: #ffffff;
stroke: #6657f3;
stroke-width: 2.5;
pointer-events: none;
}
.wire-point-group.current
.wire-point-dot {
fill: #38bb8c;
stroke: #ffffff;
stroke-width: 3;
filter:
drop-shadow(
0 3px 6px
rgba(45, 181, 134, 0.35)
);
}
.wire-days {
position: absolute;
right: 11px;
bottom: 8px;
left: 11px;
z-index: 3;
display: grid;
grid-template-columns:
repeat(7, 1fr);
}
.wire-days span {
color: #969caf;
text-align: center;
font-size: 7px;
font-weight: 850;
}
.wire-days span.current {
color: #27926e;
}
.wire-tooltip {
position: absolute;
z-index: 5;
padding: 5px 7px;
border-radius: 9px;
background: #1f2439;
color: #ffffff;
font-size: 7px;
font-weight: 900;
white-space: nowrap;
pointer-events: none;
transform:
translate(
-50%,
-100%
);
box-shadow:
0 8px 18px
rgba(21, 26, 48, 0.18);
}
/* Compact Bulk Code Studio */
.code-studio {
display: grid;
gap: 10px;
}
.code-studio-intro {
padding: 13px 14px;
display: grid;
grid-template-columns: 1fr 44px;
gap: 10px;
align-items: center;
border: 1px solid #e5e2ff;
border-radius: 19px;
background:
radial-gradient(
circle at 94% 8%,
rgba(105, 86, 244, 0.12),
transparent 42%
),
#ffffff;
}
.code-studio-intro h2 {
margin: 4px 0 3px;
font-size: 16px;
letter-spacing: -0.35px;
}
.code-studio-intro p {
margin: 0;
color: #8d94a7;
font-size: 8.5px;
line-height: 1.45;
}
.code-studio-glyph {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: #eeecff;
color: #5c4ff0;
font-size: 20px;
font-weight: 900;
}
.code-studio-card {
padding: 13px;
border: 1px solid #e7e9f1;
border-radius: 19px;
background: #ffffff;
box-shadow:
0 9px 22px
rgba(35, 41, 70, 0.04);
}
.code-studio-label {
display: block;
margin-bottom: 9px;
color: #8f96a9;
font-size: 7.5px;
letter-spacing: 0.9px;
font-weight: 900;
}
.code-segmented {
padding: 3px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
border-radius: 15px;
background: #f1f2f7;
}
.code-segmented label {
position: relative;
}
.code-segmented input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.code-segmented span {
min-height: 43px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 12px;
color: #777e92;
font-size: 10px;
font-weight: 850;
cursor: pointer;
transition: 0.18s ease;
}
.code-segmented i {
font-style: normal;
font-size: 15px;
}
.code-segmented input:checked + span {
background: #ffffff;
color: #5b4df2;
box-shadow:
0 5px 15px
rgba(31, 37, 67, 0.08);
}
.code-studio-help {
margin: 8px 2px 0;
color: #989eaf;
font-size: 8px;
line-height: 1.45;
}
.code-product-picker {
width: 100%;
min-height: 65px;
padding: 9px;
border: 0;
border-radius: 16px;
display: grid;
grid-template-columns: 40px 1fr 24px;
gap: 9px;
align-items: center;
background: #f8f9fd;
color: inherit;
text-align: left;
cursor: pointer;
}
.code-picker-icon {
width: 40px;
height: 40px;
border-radius: 13px;
display: grid;
place-items: center;
background: #eeecff;
color: #5d50ef;
font-size: 17px;
}
.code-picker-copy {
min-width: 0;
}
.code-picker-copy small,
.code-picker-copy b,
.code-picker-copy em {
display: block;
}
.code-picker-copy small {
margin-bottom: 2px;
color: #9aa0b2;
font-size: 7px;
letter-spacing: 0.7px;
font-weight: 900;
}
.code-picker-copy b {
overflow: hidden;
color: #292f44;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.code-picker-copy em {
margin-top: 3px;
overflow: hidden;
color: #969caf;
font-size: 7.5px;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.code-picker-arrow {
color: #9298aa;
font-size: 21px;
font-style: normal;
}
.code-inline-note {
margin-top: 8px;
padding: 8px 9px;
border-radius: 12px;
background: #f5f6fa;
color: #858c9f;
font-size: 8px;
line-height: 1.4;
}
.code-inline-note.warning {
background: #fff6e9;
color: #a8650d;
}
.code-qty-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.code-qty-heading small,
.code-qty-heading b {
display: block;
}
.code-qty-heading small {
margin-bottom: 3px;
color: #989eaf;
font-size: 7px;
letter-spacing: 0.8px;
font-weight: 900;
}
.code-qty-heading b {
font-size: 11px;
}
.code-qty-stepper {
padding: 3px;
display: grid;
grid-template-columns:
34px 48px 34px;
align-items: center;
border-radius: 14px;
background: #f2f3f8;
}
.code-qty-stepper button {
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 11px;
background: #ffffff;
color: #5b4df2;
font-size: 19px;
font-weight: 900;
cursor: pointer;
}
.code-qty-stepper strong {
color: #1d2237;
text-align: center;
font-size: 15px;
}
.code-qty-presets {
margin-top: 10px;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 6px;
}
.code-qty-presets button {
min-height: 34px;
border: 1px solid #e5e7ef;
border-radius: 11px;
background: #f9faff;
color: #737a8f;
font-size: 9px;
font-weight: 850;
cursor: pointer;
}
.code-qty-presets button.active {
border-color: #7769f5;
background: #efedff;
color: #5b4df2;
}
.code-generate-button {
min-height: 54px;
padding: 0 15px;
border: 0;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(
135deg,
#594bee,
#7359ff
);
color: #ffffff;
font: inherit;
cursor: pointer;
box-shadow:
0 13px 26px
rgba(91, 76, 239, 0.23);
}
.code-generate-button span {
font-size: 10px;
}
.code-generate-button b {
margin-left: 3px;
font-size: 11px;
}
.code-generate-button i {
font-size: 18px;
font-style: normal;
}
.code-results {
margin-top: 13px;
padding: 12px;
}
.code-results-head {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.code-results-head h2 {
margin: 4px 0 0;
font-size: 14px;
}
.code-results-actions {
display: flex;
gap: 6px;
}
.code-results-actions button {
min-height: 34px;
padding: 0 10px;
border: 1px solid #e4e6ee;
border-radius: 11px;
background: #f8f9fd;
color: #565d71;
font-size: 8px;
font-weight: 900;
}
/* Product bottom sheet */
.code-sheet {
position: fixed;
inset: 0;
z-index: 80;
visibility: hidden;
pointer-events: none;
}
.code-sheet.open {
visibility: visible;
pointer-events: auto;
}
.code-sheet-backdrop {
position: absolute;
inset: 0;
border: 0;
background:
rgba(20, 25, 45, 0.42);
opacity: 0;
backdrop-filter: blur(3px);
transition: opacity 0.2s ease;
}
.code-sheet.open
.code-sheet-backdrop {
opacity: 1;
}
.code-sheet-panel {
width: min(100%, 460px);
max-height: 78vh;
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 8px 14px
calc(
18px
+ env(safe-area-inset-bottom)
);
overflow: auto;
border-radius: 26px 26px 0 0;
background: #ffffff;
box-shadow:
0 -20px 45px
rgba(23, 29, 53, 0.18);
transform: translateY(102%);
transition:
transform 0.24s
cubic-bezier(
.2,
.8,
.2,
1
);
}
.code-sheet.open
.code-sheet-panel {
transform: translateY(0);
}
.code-sheet-head {
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: space-between;
}
.code-sheet-head h3 {
margin: 4px 0 0;
font-size: 16px;
}
.sheet-close-button {
width: 36px;
height: 36px;
border: 0;
border-radius: 12px;
background: #f2f3f8;
color: #737a8f;
font-size: 20px;
}
.code-search {
min-height: 46px;
margin-bottom: 9px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e6e8f0;
border-radius: 14px;
background: #fafbfe;
}
.code-search span {
color: #9298aa;
font-size: 16px;
}
.code-search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
color: #282e42;
font: inherit;
font-size: 11px;
outline: none;
}
.code-product-list {
display: grid;
gap: 7px;
}
.code-product-option {
min-height: 62px;
padding: 8px;
border: 1px solid #eceef4;
border-radius: 15px;
display: grid;
grid-template-columns: 38px 1fr 20px;
gap: 9px;
align-items: center;
background: #ffffff;
color: inherit;
text-align: left;
}
.code-product-option.hidden,
.code-product-option.hidden-by-mode {
display: none;
}
.code-option-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-size: 16px;
}
.code-option-icon.blank {
background: #edf8f2;
color: #27966a;
}
.code-product-option b,
.code-product-option small {
display: block;
}
.code-product-option b {
margin-bottom: 3px;
font-size: 10px;
}
.code-product-option small {
color: #959bad;
font-size: 8px;
}
.code-product-option > i {
color: #a1a6b5;
font-size: 18px;
font-style: normal;
}
.sheet-open {
overflow: hidden;
}
.visually-hidden {
width: 1px !important;
height: 1px !important;
position: absolute !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
@media (max-width: 390px) {
.mobile-dock {
width: calc(100% - 18px);
}
.code-studio-intro {
padding: 12px;
}
}
/* ==========================================================================
V6.6 – Barcode + QR pairs, saved batches, EMI and half-page invoice
========================================================================== */
.menu-cards > a {
grid-template-columns: 44px 1fr auto;
}
.menu-cards .menu-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
}
/* Barcode + QR labels */
.code-pair-info {
padding: 11px 12px;
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
align-items: center;
border: 1px solid #e5e2ff;
border-radius: 17px;
background:
linear-gradient(
135deg,
#f8f7ff,
#ffffff
);
}
.pair-info-icon {
width: 40px;
height: 40px;
border-radius: 13px;
display: grid;
place-items: center;
background: #eeecff;
color: #5c4ff0;
font-size: 18px;
}
.code-pair-info b,
.code-pair-info small {
display: block;
}
.code-pair-info b {
margin-bottom: 3px;
font-size: 10px;
}
.code-pair-info small {
color: #8e95a8;
font-size: 8px;
line-height: 1.4;
}
.code-result-meta {
margin: -4px 0 10px;
color: #969cad;
font-size: 8px;
}
.bulk-pair-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 7px;
}
.code-pair-label {
min-width: 0;
height: 86px;
padding: 5px;
display: grid;
grid-template-columns:
minmax(0, 1fr) 1px 76px;
align-items: center;
gap: 5px;
overflow: hidden;
border: 1px dashed #cfd3df;
border-radius: 10px;
background: #ffffff;
}
.pair-barcode {
min-width: 0;
overflow: hidden;
display: grid;
place-items: center;
}
.pair-barcode svg {
width: 100%;
max-width: 150px;
height: 56px;
}
.pair-divider {
width: 1px;
height: 62px;
background: #e9ebf2;
}
.pair-qr {
width: 72px;
height: 72px;
display: grid;
place-items: center;
}
.pair-qr canvas,
.pair-qr img {
width: 72px !important;
height: 72px !important;
}
.code-history {
margin-top: 16px;
}
.code-history-list {
display: grid;
gap: 7px;
}
.code-history-card {
min-height: 60px;
padding: 8px 9px;
display: grid;
grid-template-columns:
38px 1fr auto;
gap: 9px;
align-items: center;
border: 1px solid #e7e9f1;
border-radius: 15px;
background: #ffffff;
}
.code-history-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: #eeecff;
color: #5d50ef;
}
.code-history-card b,
.code-history-card small {
display: block;
}
.code-history-card b {
margin-bottom: 3px;
font-size: 9.5px;
}
.code-history-card small {
color: #979daf;
font-size: 7.5px;
}
.code-history-card button {
min-height: 34px;
padding: 0 10px;
border: 1px solid #e3e6ef;
border-radius: 11px;
background: #f8f9fd;
color: #5c4ff0;
font-size: 8px;
font-weight: 900;
}
/* EMI setup */
.payment-modes {
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 5px;
}
.emi-config-card {
margin-top: 12px;
padding: 13px;
border: 1px solid #e3e0ff;
border-radius: 19px;
background:
radial-gradient(
circle at 90% 8%,
rgba(103, 85, 244, 0.10),
transparent 32%
),
#f9f8ff;
}
.emi-config-head {
margin-bottom: 11px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.emi-config-head h3 {
margin: 4px 0 0;
font-size: 13px;
}
.emi-badge {
padding: 6px 8px;
border-radius: 999px;
background: #eeecff;
color: #5c4ff0;
font-size: 7px;
font-weight: 900;
}
.emi-config-row {
margin-bottom: 10px;
padding: 9px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 14px;
background: #ffffff;
}
.emi-config-row small,
.emi-config-row b {
display: block;
}
.emi-config-row small {
margin-bottom: 2px;
color: #969caf;
font-size: 7px;
font-weight: 900;
}
.emi-config-row b {
font-size: 10px;
}
.emi-month-stepper {
grid-template-columns:
32px 40px 32px;
}
.emi-month-stepper button {
width: 32px;
height: 32px;
}
.emi-live-summary {
margin-top: 10px;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 6px;
}
.emi-live-summary > span {
min-width: 0;
padding: 8px 7px;
border-radius: 12px;
background: #ffffff;
}
.emi-live-summary small,
.emi-live-summary b {
display: block;
}
.emi-live-summary small {
margin-bottom: 3px;
color: #989eaf;
font-size: 6.5px;
font-weight: 900;
}
.emi-live-summary b {
overflow: hidden;
color: #272d42;
font-size: 9px;
text-overflow: ellipsis;
}
/* Due / EMI status */
.due-card-v66 {
position: relative;
}
.due-kind {
margin-left: auto;
padding: 5px 7px;
border-radius: 999px;
background: #fff3e2;
color: #b36a0a;
font-size: 7px;
font-weight: 900;
}
.due-kind.emi {
background: #eeecff;
color: #5c4ff0;
}
.normal-due-amount {
display: block;
margin: 10px 0 4px;
font-size: 18px;
}
.emi-due-snapshot {
margin: 10px 0 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.emi-due-snapshot > span {
padding: 9px;
border-radius: 13px;
background: #f7f8fc;
}
.emi-due-snapshot small,
.emi-due-snapshot b,
.emi-due-snapshot em {
display: block;
}
.emi-due-snapshot small {
margin-bottom: 3px;
color: #969caf;
font-size: 6.5px;
font-weight: 900;
}
.emi-due-snapshot b {
font-size: 11px;
}
.emi-due-snapshot em {
margin-top: 2px;
color: #5d50ef;
font-size: 7px;
font-style: normal;
}
/* EMI schedule */
.emi-plan-card {
overflow: hidden;
border: 1px solid #e5e7ef;
border-radius: 23px;
background: #ffffff;
box-shadow:
0 14px 34px
rgba(34, 40, 72, 0.06);
}
.emi-plan-hero {
padding: 15px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
background:
radial-gradient(
circle at 93% 10%,
rgba(255, 255, 255, 0.14),
transparent 34%
),
linear-gradient(
135deg,
#38349b,
#6657f3
);
color: #ffffff;
}
.emi-plan-hero .soft-label {
color: #d7d2ff;
}
.emi-plan-hero h2 {
margin: 4px 0 3px;
color: #ffffff;
font-size: 17px;
}
.emi-plan-hero p {
margin: 0;
color: #dedbff;
font-size: 8px;
}
.emi-plan-status {
padding: 6px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
font-size: 7px;
font-weight: 900;
}
.emi-plan-status.paid {
background: #dff8ea;
color: #228457;
}
.emi-summary-grid {
padding: 10px;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 7px;
}
.emi-summary-grid > span {
padding: 9px;
border-radius: 13px;
background: #f7f8fc;
}
.emi-summary-grid small,
.emi-summary-grid b {
display: block;
}
.emi-summary-grid small {
margin-bottom: 3px;
color: #989eaf;
font-size: 6.5px;
font-weight: 900;
}
.emi-summary-grid b {
font-size: 11px;
}
.emi-schedule-head {
padding: 10px 12px;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-top: 1px solid #eceef4;
border-bottom: 1px solid #eceef4;
}
.emi-schedule-head small,
.emi-schedule-head b {
display: block;
}
.emi-schedule-head small {
color: #9298aa;
font-size: 7px;
}
.emi-schedule-head b {
margin-top: 2px;
font-size: 10px;
}
.emi-installment-list {
display: grid;
}
.emi-installment {
min-height: 62px;
padding: 8px 10px;
display: grid;
grid-template-columns:
32px 1fr auto;
gap: 8px;
align-items: center;
border-bottom: 1px solid #eef0f5;
}
.emi-installment:last-child {
border-bottom: 0;
}
.emi-installment.paid {
background: #f5fbf8;
}
.emi-number {
width: 30px;
height: 30px;
border-radius: 10px;
display: grid;
place-items: center;
background: #eeecff;
color: #5c4ff0;
font-size: 8px;
font-weight: 900;
}
.emi-installment.paid .emi-number {
background: #def6e9;
color: #25865a;
}
.emi-installment b,
.emi-installment small {
display: block;
}
.emi-installment b {
margin-bottom: 3px;
font-size: 10px;
}
.emi-installment small {
color: #969caf;
font-size: 7px;
}
.emi-pay-button {
min-height: 33px;
padding: 0 9px;
border: 0;
border-radius: 11px;
background: #eeecff;
color: #5b4df1;
font-size: 7.5px;
font-weight: 900;
}
.emi-paid-mark {
text-align: right;
}
.emi-paid-mark b {
color: #24855a;
font-size: 8px;
}
.emi-paid-mark small {
color: #70a78b;
}
.emi-action-grid {
margin-top: 10px;
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 7px;
}
.emi-action-grid > * {
min-height: 42px;
border: 1px solid #e5e7ef;
border-radius: 13px;
display: grid;
place-items: center;
background: #ffffff;
color: #555d73;
font: inherit;
font-size: 8px;
font-weight: 900;
text-decoration: none;
}
.emi-action-grid > a {
border-color: #d6f0e0;
background: #edfaf3;
color: #258657;
}
.emi-payment-amount {
margin: 7px 0 12px;
color: #5b4df2;
text-align: center;
font-size: 30px;
font-weight: 900;
}
/* Public EMI */
.public-emi-hero {
padding: 18px;
border-radius: 24px;
background:
linear-gradient(
135deg,
#373396,
#6657f3
);
color: #ffffff;
}
.public-emi-hero .soft-label {
color: #d8d4ff;
}
.public-emi-hero h1 {
margin: 6px 0 2px;
color: #ffffff;
font-size: 34px;
}
.public-emi-hero p {
margin: 0;
color: #dcd9ff;
font-size: 9px;
}
.public-next-emi {
margin-top: 14px;
padding: 10px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.13);
}
.public-next-emi small,
.public-next-emi b,
.public-next-emi span {
display: block;
}
.public-next-emi small {
color: #dcd9ff;
font-size: 7px;
}
.public-next-emi b {
margin: 2px 0;
font-size: 16px;
}
.public-next-emi span {
color: #eceaff;
font-size: 8px;
}
.public-emi-summary {
margin-top: 10px;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 7px;
}
.public-emi-summary > span {
padding: 10px 7px;
border: 1px solid #e7e9f1;
border-radius: 14px;
background: #ffffff;
}
.public-emi-summary small,
.public-emi-summary b {
display: block;
}
.public-emi-summary small {
margin-bottom: 3px;
color: #999fb0;
font-size: 6px;
font-weight: 900;
}
.public-emi-summary b {
font-size: 8.5px;
}
.public-emi-list {
margin-top: 10px;
overflow: hidden;
border: 1px solid #e7e9f1;
border-radius: 19px;
background: #ffffff;
}
.public-emi-list article {
min-height: 57px;
padding: 8px 9px;
display: grid;
grid-template-columns:
29px 1fr auto;
gap: 8px;
align-items: center;
border-bottom: 1px solid #eef0f5;
}
.public-emi-list article:last-child {
border-bottom: 0;
}
.public-emi-list article.paid {
background: #f4fbf7;
}
.public-emi-list article > span {
width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df1;
font-size: 7px;
font-weight: 900;
}
.public-emi-list b,
.public-emi-list small {
display: block;
}
.public-emi-list b {
margin-bottom: 2px;
font-size: 9px;
}
.public-emi-list small {
color: #989eaf;
font-size: 7px;
}
.public-emi-list em {
color: #23875a;
text-align: right;
font-size: 7px;
font-style: normal;
font-weight: 900;
}
.public-emi-list em.pending {
color: #b66b0d;
}
.invoice-emi-note {
margin-top: 10px;
padding: 9px;
border-radius: 10px;
background: #f1efff;
}
.invoice-emi-note span,
.invoice-emi-note b,
.invoice-emi-note a {
display: block;
}
.invoice-emi-note span {
margin-bottom: 3px;
color: #5b4df1;
font-size: 7px;
font-weight: 900;
}
.invoice-emi-note b {
font-size: 9px;
}
.invoice-emi-note a {
margin-top: 5px;
color: #5b4df1;
font-size: 8px;
text-decoration: none;
}
/* Dense A4 label sheet */
@media print {
@page {
size: A4 portrait;
margin: 7mm;
}
body:has(#bulkCodesResult) * {
visibility: hidden !important;
}
#bulkCodesResult,
#bulkCodesResult * {
visibility: visible !important;
}
#bulkCodesResult {
width: auto !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
#bulkCodesResult .code-results-head,
#bulkCodesResult .code-result-meta {
display: none !important;
}
.bulk-pair-grid {
display: grid !important;
grid-template-columns:
repeat(3, 1fr) !important;
gap: 2mm !important;
}
.code-pair-label {
width: auto !important;
height: 25mm !important;
padding: 1.5mm !important;
grid-template-columns:
minmax(0, 1fr)
.2mm
19mm !important;
gap: 1mm !important;
border: .2mm solid #aaaaaa !important;
border-radius: 0 !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.pair-barcode svg {
width: 100% !important;
height: 15mm !important;
}
.pair-divider {
height: 18mm !important;
}
.pair-qr,
.pair-qr canvas,
.pair-qr img {
width: 18mm !important;
height: 18mm !important;
}
body.invoice-layout-a4 .app-shell {
width: 210mm !important;
min-height: 297mm !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
body.invoice-layout-a4 .invoice-paper {
width: 194mm !important;
max-height: 140mm !important;
margin: 6mm 8mm 0 !important;
padding: 6mm !important;
overflow: hidden !important;
border: .2mm solid #d8d8d8 !important;
box-shadow: none !important;
font-size: 9pt !important;
}
}
body.label-pdf-mode .bulk-pair-grid {
width: 1000px;
grid-template-columns:
repeat(3, 1fr);
gap: 8px;
}
body.label-pdf-mode .code-pair-label {
height: 126px;
grid-template-columns:
minmax(0, 1fr)
1px
104px;
}
body.label-pdf-mode .pair-qr,
body.label-pdf-mode .pair-qr canvas,
body.label-pdf-mode .pair-qr img {
width: 96px !important;
height: 96px !important;
}
@media (max-width: 390px) {
.payment-modes {
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 4px;
}
.payment-modes button {
padding: 7px 2px;
font-size: 7px;
}
.bulk-pair-grid {
grid-template-columns: 1fr;
}
.code-pair-label {
height: 92px;
grid-template-columns:
minmax(0, 1fr)
1px
82px;
}
.pair-qr,
.pair-qr canvas,
.pair-qr img {
width: 78px !important;
height: 78px !important;
}
}
/* ==========================================================================
V6.7 Readability, logo, invoice layouts and product variations
========================================================================== */
/* Readability pass: keep the compact mobile flow, but remove tiny text. */
.app-shell {
font-size: 14px;
}
.main-content p,
.main-content li,
.main-content td,
.main-content th {
font-size: 12px;
line-height: 1.45;
}
.main-content small,
.menu-cards small,
.product-card small,
.cart-item small,
.smart-list small,
.code-studio-help,
.code-inline-note,
.customer-product-note,
.public-note {
font-size: 10px;
line-height: 1.4;
}
.soft-label,
.code-studio-label,
.smart-field > span,
.qty-control-block .soft-label,
.section-row .soft-label {
font-size: 9px;
letter-spacing: 0.75px;
}
.smart-field input,
.smart-field select,
.smart-field textarea,
.manual-scan input,
.code-search input,
.inline-field input {
font-size: 14px;
}
.smart-field input,
.smart-field select {
min-height: 46px;
}
.smart-field textarea {
min-height: 78px;
padding-top: 12px;
}
.menu-cards > a b,
.product-card > b,
.cart-item b,
.due-card b,
.code-history-card b {
font-size: 12px;
}
.mobile-dock small {
font-size: 9px;
}
.compact-topbar h1 {
font-size: 18px;
}
.wizard-progress b,
.payment-modes span,
.code-segmented span {
font-size: 10px;
}
.notice,
.muted {
font-size: 11px;
}
/* Logo settings */
.settings-logo-panel {
overflow: visible;
}
.logo-upload-card {
min-height: 70px;
position: relative;
padding: 10px;
display: grid;
grid-template-columns: 50px 1fr 20px;
gap: 10px;
align-items: center;
border: 1px solid #e6e8f1;
border-radius: 17px;
background: #fafbfe;
cursor: pointer;
}
.logo-upload-card > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.logo-preview {
width: 50px;
height: 50px;
overflow: hidden;
border: 1px solid #e3e6ee;
border-radius: 15px;
display: grid;
place-items: center;
background: #ffffff;
}
.logo-preview img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.logo-preview b {
color: #5b4df2;
font-size: 20px;
}
.logo-upload-card > span:nth-child(3) b,
.logo-upload-card > span:nth-child(3) small {
display: block;
}
.logo-upload-card > span:nth-child(3) b {
margin-bottom: 3px;
font-size: 12px;
}
.logo-upload-card > span:nth-child(3) small {
color: #9198aa;
font-size: 10px;
}
.logo-upload-card em {
color: #8f96a8;
font-size: 20px;
font-style: normal;
}
.remove-logo-check {
margin: 8px 2px 12px;
display: flex;
align-items: center;
gap: 7px;
color: #7c8396;
font-size: 10px;
}
.print-layout-grid {
margin-bottom: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.print-layout-option {
position: relative;
}
.print-layout-option input {
position: absolute;
opacity: 0;
}
.print-layout-option > span {
min-height: 62px;
padding: 10px;
border: 1px solid #e5e7ef;
border-radius: 15px;
display: grid;
align-content: center;
background: #fafbfe;
}
.print-layout-option b,
.print-layout-option small {
display: block;
}
.print-layout-option b {
margin-bottom: 3px;
font-size: 11px;
}
.print-layout-option small {
color: #959bad;
font-size: 9px;
}
.print-layout-option > i {
width: 20px;
height: 20px;
position: absolute;
top: 7px;
right: 7px;
border-radius: 50%;
display: grid;
place-items: center;
background: #e7e9ef;
color: #ffffff;
font-size: 8px;
font-style: normal;
}
.print-layout-option input:checked + span {
border-color: #7467f4;
background: #f2f0ff;
box-shadow:
0 0 0 3px
rgba(91, 77, 242, 0.07);
}
.print-layout-option input:checked ~ i {
background: #5b4df2;
}
/* Product type + variation builder */
.android-segment-wrap {
margin-bottom: 11px;
}
.product-type-segment {
margin-top: 7px;
}
.variation-builder-head {
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.variation-builder-head h4 {
margin: 3px 0 0;
font-size: 13px;
}
.variation-builder-note {
margin: 0 0 9px;
color: #8e95a8;
font-size: 10px;
}
.variant-builder-list {
display: grid;
gap: 8px;
}
.variant-builder-card {
padding: 10px;
border: 1px solid #e5e7ef;
border-radius: 17px;
background: #f9faff;
}
.variant-card-head {
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.variant-card-head small,
.variant-card-head b {
display: block;
}
.variant-card-head small {
margin-bottom: 2px;
color: #989eaf;
font-size: 8px;
font-weight: 900;
}
.variant-card-head b {
font-size: 11px;
}
.variant-card-head > button {
width: 30px;
height: 30px;
border: 0;
border-radius: 10px;
background: #ffecee;
color: #d64a57;
font-size: 17px;
}
.variant-attribute-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
.variant-attribute-grid .smart-field input {
min-height: 42px;
padding-right: 7px;
padding-left: 7px;
font-size: 12px;
}
.variant-stock-row {
margin: 7px 0;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 13px;
background: #ffffff;
}
.variant-stock-row small,
.variant-stock-row b {
display: block;
}
.variant-stock-row small {
color: #969cad;
font-size: 8px;
}
.variant-stock-row b {
margin-top: 2px;
font-size: 13px;
}
.compact-variant-stepper {
grid-template-columns: 30px 40px 30px;
}
.compact-variant-stepper button {
width: 30px;
height: 30px;
}
.variant-sku-input {
max-width: 105px;
}
.variant-empty-add {
min-height: 56px;
border: 1px dashed #cfd4e2;
border-radius: 15px;
background: #fafbfe;
color: #5d50ef;
font-size: 11px;
font-weight: 800;
}
.cart-variant-label {
display: inline;
margin-left: 3px;
color: #6558ed;
font-size: 10px;
font-style: normal;
font-weight: 700;
}
/* Document invoice, inspired by compact business invoice layouts. */
.invoice-page .main-content {
overflow: visible;
}
.document-invoice {
--invoice-accent: #199c57;
width: 100%;
margin: 0 auto;
padding: 18px;
border: 1px solid #e7e9ee;
border-radius: 18px;
background: #ffffff;
color: #151515;
box-shadow:
0 14px 36px
rgba(24, 31, 55, 0.06);
font-size: 12px;
}
.document-invoice.a6 {
max-width: 390px;
padding: 14px;
}
.document-invoice.a5,
.document-invoice.a4 {
max-width: 520px;
}
.doc-brand-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
align-items: start;
}
.doc-logo-side {
min-height: 72px;
display: grid;
place-items: start;
}
.doc-logo {
width: 72px;
height: 72px;
object-fit: contain;
}
.doc-logo-fallback {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: #57be79;
color: #ffffff;
font-size: 32px;
font-weight: 900;
}
.doc-business {
text-align: right;
}
.doc-business > b {
display: block;
margin-bottom: 5px;
font-size: 15px;
}
.doc-business p {
margin: 1px 0;
font-size: 11px;
line-height: 1.35;
}
.doc-title-row {
margin: 10px 0 14px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
}
.doc-title-row i {
height: 1px;
background: #dedede;
}
.doc-title-row h1 {
margin: 0;
font-size: 22px;
font-weight: 500;
letter-spacing: 0.5px;
}
.doc-party-row {
min-height: 92px;
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
}
.doc-bill-to small,
.doc-invoice-no small {
display: block;
margin-bottom: 4px;
color: #555;
font-size: 10px;
}
.doc-bill-to b,
.doc-invoice-no b {
display: block;
font-size: 13px;
}
.doc-bill-to p {
margin: 2px 0;
font-size: 11px;
}
.doc-invoice-no {
text-align: right;
}
.doc-date-grid {
margin-bottom: 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #e0eee5;
}
.doc-date-grid > span {
min-width: 0;
}
.doc-date-grid b,
.doc-date-grid em {
display: block;
}
.doc-date-grid b {
padding: 8px 9px;
background: var(--invoice-accent);
color: #ffffff;
font-size: 11px;
font-weight: 500;
}
.doc-date-grid em {
min-height: 38px;
padding: 9px;
border-right: 1px solid #e4e8e5;
color: #202020;
font-size: 11px;
font-style: normal;
}
.doc-date-grid > span:last-child em {
border-right: 0;
}
.doc-items-table {
border: 1px solid #e0eee5;
}
.doc-table-head,
.doc-table-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 54px 70px 76px;
}
.doc-table-head {
background: var(--invoice-accent);
color: #ffffff;
}
.doc-table-head > span {
padding: 8px 7px;
border-right: 1px solid rgba(255, 255, 255, 0.55);
font-size: 11px;
}
.doc-table-head > span:nth-child(n+3) {
text-align: right;
}
.doc-table-row > span {
min-height: 58px;
padding: 9px 7px;
border-right: 1px solid #e6eee9;
border-bottom: 1px solid #edf1ef;
font-size: 11px;
}
.doc-table-row > span:nth-child(n+3) {
text-align: right;
}
.doc-table-row > span:last-child,
.doc-table-head > span:last-child {
border-right: 0;
}
.doc-table-row b,
.doc-table-row small {
display: block;
}
.doc-table-row b {
margin-bottom: 3px;
font-size: 12px;
}
.doc-table-row small {
color: #777;
font-size: 10px;
}
.doc-bottom-row {
display: grid;
grid-template-columns: 1fr minmax(180px, 44%);
gap: 10px;
}
.doc-thanks {
padding-top: 14px;
font-size: 11px;
}
.doc-totals {
background: #f6f5f5;
}
.doc-totals > div {
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 11px;
}
.doc-totals .doc-total {
font-weight: 800;
}
.doc-totals .doc-balance {
background: #e1f2e8;
font-weight: 800;
}
.doc-terms {
margin-top: 16px;
}
.doc-terms b {
display: block;
margin-bottom: 5px;
font-size: 12px;
}
.doc-terms p {
margin: 0;
font-size: 10px;
line-height: 1.4;
}
.document-invoice.a6 .doc-brand-row {
grid-template-columns: 58px 1fr;
gap: 9px;
}
.document-invoice.a6 .doc-logo {
width: 54px;
height: 54px;
}
.document-invoice.a6 .doc-logo-fallback {
width: 52px;
height: 52px;
font-size: 24px;
}
.document-invoice.a6 .doc-title-row h1 {
font-size: 19px;
}
.document-invoice.a6 .doc-party-row {
min-height: 76px;
}
.document-invoice.a6 .doc-table-head,
.document-invoice.a6 .doc-table-row {
grid-template-columns: 26px minmax(0, 1fr) 40px 54px 62px;
}
.document-invoice.a6 .doc-table-head > span,
.document-invoice.a6 .doc-table-row > span {
padding-right: 5px;
padding-left: 5px;
font-size: 9px;
}
.document-invoice.a6 .doc-table-row > span {
min-height: 48px;
}
.document-invoice.a6 .doc-table-row b {
font-size: 10px;
}
.document-invoice.a6 .doc-bottom-row {
grid-template-columns: 1fr;
}
.document-invoice.a6 .doc-thanks {
display: none;
}
/* POS receipt */
.pos-receipt {
margin: 0 auto;
padding: 10px 7px;
border: 0;
border-radius: 0;
background: #ffffff;
color: #000000;
box-shadow: none;
font-family:
Arial,
"Helvetica Neue",
sans-serif;
}
.pos-receipt[class~="2inch"] {
width: 58mm;
max-width: 58mm;
font-size: 10px;
}
.pos-receipt[class~="4inch"] {
width: 96mm;
max-width: 96mm;
font-size: 12px;
}
.pos-brand {
text-align: center;
}
.pos-logo {
width: 42px;
height: 42px;
margin: 0 auto 5px;
object-fit: contain;
}
.pos-brand h1 {
margin: 0 0 3px;
font-size: 15px;
line-height: 1.15;
}
.pos-receipt[class~="4inch"] .pos-brand h1 {
font-size: 18px;
}
.pos-brand p {
margin: 1px 0;
font-size: 9px;
line-height: 1.25;
}
.pos-receipt[class~="4inch"] .pos-brand p {
font-size: 11px;
}
.pos-divider {
height: 0;
margin: 7px 0;
border-top: 1px dashed #000000;
}
.pos-invoice-meta {
display: grid;
gap: 3px;
}
.pos-invoice-meta > div {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
font-size: 9px;
}
.pos-receipt[class~="4inch"] .pos-invoice-meta > div {
font-size: 11px;
}
.pos-invoice-meta b {
text-align: right;
}
.pos-item-head,
.pos-item-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px 54px;
gap: 4px;
align-items: start;
}
.pos-item-head {
margin-bottom: 4px;
font-size: 9px;
}
.pos-item-head > b:nth-child(n+2) {
text-align: right;
}
.pos-item-row {
padding: 4px 0;
border-bottom: 1px dotted #777;
font-size: 9px;
}
.pos-receipt[class~="4inch"] .pos-item-head,
.pos-receipt[class~="4inch"] .pos-item-row {
grid-template-columns: minmax(0, 1fr) 44px 72px;
font-size: 11px;
}
.pos-item-row span b,
.pos-item-row span small {
display: block;
}
.pos-item-row span b {
font-size: inherit;
}
.pos-item-row span small {
margin-top: 2px;
font-size: 8px;
}
.pos-receipt[class~="4inch"] .pos-item-row span small {
font-size: 10px;
}
.pos-item-row > strong {
text-align: right;
font-size: inherit;
}
.pos-summary {
display: grid;
gap: 3px;
}
.pos-summary > div {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
}
.pos-receipt[class~="4inch"] .pos-summary > div {
font-size: 11px;
}
.pos-summary .pos-total {
margin: 2px 0;
padding: 4px 0;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-size: 12px;
font-weight: 900;
}
.pos-receipt[class~="4inch"] .pos-summary .pos-total {
font-size: 15px;
}
.pos-emi-note {
margin-top: 6px;
padding: 5px;
border: 1px dashed #333;
text-align: center;
font-size: 9px;
font-weight: 700;
}
.pos-footer {
margin-top: 8px;
text-align: center;
font-size: 9px;
line-height: 1.35;
}
/* Print page assignments */
.invoice-layout-2inch #invoiceCapture {
page: pos58;
}
.invoice-layout-4inch #invoiceCapture {
page: pos100;
}
.invoice-layout-a6 #invoiceCapture {
page: a6page;
}
.invoice-layout-a5 #invoiceCapture {
page: a5page;
}
.invoice-layout-a4 #invoiceCapture {
page: a4half;
}
@page pos58 {
size: 58mm auto;
margin: 1.5mm;
}
@page pos100 {
size: 100mm auto;
margin: 2.5mm;
}
@page a6page {
size: A6 portrait;
margin: 5mm;
}
@page a5page {
size: A5 portrait;
margin: 7mm;
}
@page a4half {
size: 210mm 148.5mm;
margin: 7mm;
}
@media print {
body.invoice-page {
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
body.invoice-page * {
visibility: hidden !important;
}
body.invoice-page #invoiceCapture,
body.invoice-page #invoiceCapture * {
visibility: visible !important;
}
body.invoice-page .compact-topbar,
body.invoice-page .dashboard-topbar,
body.invoice-page .mobile-dock,
body.invoice-page .invoice-actions,
body.invoice-page .invoice-secondary,
body.invoice-page .wizard-next,
body.invoice-page #printerPanel,
body.invoice-page .no-print {
display: none !important;
}
body.invoice-page .app-shell,
body.invoice-page .main-content,
body.invoice-page .subpage-content {
width: auto !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
body.invoice-page #invoiceCapture {
position: static !important;
top: auto !important;
left: auto !important;
display: block !important;
margin: 0 auto !important;
transform: none !important;
box-shadow: none !important;
}
body.invoice-layout-2inch #invoiceCapture {
width: 55mm !important;
max-width: 55mm !important;
padding: 1mm !important;
}
body.invoice-layout-4inch #invoiceCapture {
width: 95mm !important;
max-width: 95mm !important;
padding: 2mm !important;
}
body.invoice-layout-a6 #invoiceCapture {
width: 95mm !important;
max-width: 95mm !important;
min-height: 138mm !important;
padding: 4mm !important;
border: 0 !important;
border-radius: 0 !important;
}
body.invoice-layout-a5 #invoiceCapture {
width: 134mm !important;
max-width: 134mm !important;
min-height: 196mm !important;
padding: 5mm !important;
border: 0 !important;
border-radius: 0 !important;
}
body.invoice-layout-a4 #invoiceCapture {
width: 196mm !important;
max-width: 196mm !important;
min-height: 134mm !important;
max-height: 134mm !important;
padding: 5mm !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 !important;
}
}
@media (max-width: 390px) {
.variant-attribute-grid {
grid-template-columns: 1fr 1fr;
}
.variant-attribute-grid .smart-field:last-child {
grid-column: 1 / -1;
}
.document-invoice {
padding: 12px;
border-radius: 15px;
}
.doc-table-head,
.doc-table-row {
grid-template-columns: 25px minmax(0, 1fr) 38px 52px 58px;
}
.doc-table-head > span,
.doc-table-row > span {
padding-right: 4px;
padding-left: 4px;
font-size: 9px;
}
.doc-table-row b {
font-size: 10px;
}
.doc-table-row small {
font-size: 8px;
}
}
.variation-report-panel {
margin-top: 12px;
}
.variation-report-list {
display: grid;
gap: 7px;
}
.variation-report-list article {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #e8eaf1;
border-radius: 13px;
background: #fafbfe;
}
.variation-report-list b,
.variation-report-list small {
display: block;
}
.variation-report-list b {
margin-bottom: 3px;
font-size: 11px;
}
.variation-report-list small {
color: #969cad;
font-size: 9px;
}
.variation-report-list > article > span {
text-align: right;
}
.pay-brand > span.has-logo {
overflow: hidden;
background: #ffffff;
border: 1px solid #e5e7ef;
}
.pay-brand > span.has-logo img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
}
/* ========================================================================== */
/* V6.8 – Exact-size professional invoice printing */
/* ========================================================================== */
.invoice-page {
--invoice-blue: #2563eb;
--invoice-blue-dark: #1d4ed8;
--invoice-blue-soft: #eff6ff;
--invoice-line: #dbe5f5;
}
.invoice-page .main-content {
overflow: visible;
}
/* ----------------------------- POS RECEIPT ----------------------------- */
.pos-receipt {
box-sizing: border-box;
margin: 0 auto;
padding: 3mm 2.6mm 3mm;
border: 0;
border-radius: 0;
background: #ffffff;
color: #111111;
box-shadow: none;
font-family: Arial, "Helvetica Neue", sans-serif;
font-weight: 500;
}
.pos-receipt[class~="2inch"] {
width: 58mm;
max-width: 58mm;
font-size: 10.5pt;
line-height: 1.28;
}
.pos-receipt[class~="4inch"] {
width: 100mm;
max-width: 100mm;
padding-right: 4mm;
padding-left: 4mm;
font-size: 12pt;
}
.pos-brand {
text-align: center;
}
.pos-logo {
width: 26mm;
height: 20mm;
margin: 0 auto 2mm;
object-fit: contain;
}
.pos-receipt[class~="4inch"] .pos-logo {
width: 34mm;
height: 24mm;
}
.pos-brand h1 {
margin: 0 0 1mm;
font-size: 15pt;
line-height: 1.08;
font-weight: 800;
}
.pos-receipt[class~="4inch"] .pos-brand h1 {
font-size: 18pt;
}
.pos-brand p {
margin: .55mm 0;
font-size: 9.5pt;
line-height: 1.2;
}
.pos-receipt[class~="4inch"] .pos-brand p {
font-size: 11pt;
}
.pos-title-block {
margin: 1mm 0 1.6mm;
text-align: center;
font-size: 11pt;
letter-spacing: .4px;
}
.pos-divider {
height: 0;
margin: 2.2mm 0;
border-top: .35mm dashed #111111;
}
.pos-invoice-meta {
display: grid;
gap: .9mm;
}
.pos-invoice-meta > div {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 3mm;
font-size: 9.5pt;
}
.pos-receipt[class~="4inch"] .pos-invoice-meta > div {
font-size: 11pt;
}
.pos-invoice-meta span {
flex: 0 0 auto;
}
.pos-invoice-meta b {
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
}
.pos-items-v8 {
display: grid;
}
.pos-line-item {
padding: 1.6mm 0;
border-bottom: .25mm dotted #777777;
}
.pos-line-item:last-child {
border-bottom: 0;
}
.pos-line-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2mm;
font-size: 10.5pt;
}
.pos-receipt[class~="4inch"] .pos-line-main {
font-size: 12pt;
}
.pos-line-main b {
min-width: 0;
overflow-wrap: anywhere;
}
.pos-line-main b small {
font-size: .84em;
font-weight: 500;
}
.pos-line-main strong {
flex: 0 0 auto;
text-align: right;
}
.pos-line-sub {
margin-top: .7mm;
display: flex;
justify-content: space-between;
gap: 2mm;
color: #333333;
font-size: 9pt;
}
.pos-receipt[class~="4inch"] .pos-line-sub {
font-size: 10.5pt;
}
.pos-summary-v8 {
display: grid;
gap: 1mm;
}
.pos-summary-v8 > div {
display: flex;
justify-content: space-between;
gap: 3mm;
font-size: 10pt;
}
.pos-receipt[class~="4inch"] .pos-summary-v8 > div {
font-size: 11.5pt;
}
.pos-summary-v8 .pos-total {
margin: 1mm 0;
padding: 1.4mm 0;
border-top: .45mm solid #111111;
border-bottom: .45mm solid #111111;
font-size: 16pt;
font-weight: 900;
}
.pos-receipt[class~="4inch"] .pos-summary-v8 .pos-total {
font-size: 19pt;
}
.pos-due-row {
padding: 1mm 0;
font-weight: 800;
}
.pos-pay-block {
margin-top: 3mm;
padding-top: 2.5mm;
border-top: .35mm dashed #111111;
display: grid;
justify-items: center;
text-align: center;
}
.invoice-qr-pos {
width: 30mm;
height: 30mm;
display: grid;
place-items: center;
overflow: hidden;
}
.pos-receipt[class~="4inch"] .invoice-qr-pos {
width: 35mm;
height: 35mm;
}
.invoice-qr-pos canvas,
.invoice-qr-pos img {
width: 100% !important;
height: 100% !important;
}
.pos-pay-block b {
margin-top: 1mm;
font-size: 10pt;
}
.pos-pay-block small {
margin-top: .5mm;
font-size: 8.5pt;
}
.pos-barcode-block {
margin-top: 3mm;
display: grid;
justify-items: center;
text-align: center;
}
.invoice-barcode-pos {
width: 48mm;
max-width: 100%;
height: 11mm;
}
.pos-receipt[class~="4inch"] .invoice-barcode-pos {
width: 72mm;
height: 13mm;
}
.pos-barcode-block small {
margin-top: .5mm;
font-size: 8pt;
}
.pos-footer-v8 {
margin-top: 2.5mm;
text-align: center;
font-size: 9pt;
line-height: 1.3;
}
.pos-footer-v8 p {
margin: 0 0 2mm;
}
.pos-footer-v8 > b {
display: block;
margin-top: 1.5mm;
font-size: 10pt;
}
.pos-footer-meta {
margin-top: 2.5mm;
display: flex;
justify-content: space-between;
gap: 2mm;
text-align: left;
font-size: 8.3pt;
}
/* ---------------------------- DOCUMENT INVOICE ---------------------------- */
.document-invoice-v8 {
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding: 7mm;
border: 1px solid #e3eaf7;
border-radius: 4mm;
background: #ffffff;
color: #171717;
box-shadow: 0 14px 36px rgba(24, 31, 55, .07);
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 10.5pt;
line-height: 1.35;
}
.document-invoice-v8.a6 {
max-width: 105mm;
padding: 5mm;
}
.document-invoice-v8.a5 {
max-width: 148mm;
}
.document-invoice-v8.a4 {
max-width: 210mm;
padding: 6mm 8mm;
}
.doc-v8-header {
min-height: 27mm;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(40mm, 46%);
gap: 8mm;
align-items: start;
}
.doc-v8-title h1 {
margin: 0 0 3.5mm;
color: var(--invoice-blue);
font-size: 26pt;
line-height: 1;
font-weight: 500;
}
.doc-v8-title dl {
margin: 0;
display: grid;
gap: 1.6mm;
}
.doc-v8-title dl > div {
display: grid;
grid-template-columns: 28mm 1fr;
gap: 2mm;
align-items: baseline;
}
.doc-v8-title dt {
color: #555f70;
font-size: 9pt;
}
.doc-v8-title dd {
margin: 0;
font-size: 10pt;
font-weight: 700;
}
.doc-v8-brand {
min-height: 24mm;
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.doc-v8-logo {
width: 48mm;
max-width: 100%;
height: 24mm;
object-fit: contain;
object-position: right top;
}
.doc-v8-business-name {
color: var(--invoice-blue-dark);
text-align: right;
font-size: 18pt;
font-weight: 900;
}
.doc-v8-party-grid {
margin-top: 5mm;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3mm;
}
.doc-v8-party-grid > article {
min-height: 31mm;
padding: 4mm;
border-radius: 2.5mm;
background: var(--invoice-blue-soft);
}
.doc-v8-card-title {
display: block;
margin-bottom: 1.5mm;
color: var(--invoice-blue-dark);
font-size: 13pt;
font-weight: 500;
}
.doc-v8-party-grid b {
font-size: 10.5pt;
}
.doc-v8-party-grid p {
margin: .7mm 0;
font-size: 9.2pt;
line-height: 1.25;
}
.doc-v8-supply-row {
margin: 4mm 1mm 2.5mm;
display: flex;
justify-content: space-between;
gap: 5mm;
font-size: 9.3pt;
}
.doc-v8-items {
overflow: hidden;
border: .3mm solid #d9e2f0;
border-radius: 1.5mm;
}
.doc-v8-table-head,
.doc-v8-table-row {
display: grid;
align-items: stretch;
}
.doc-v8-items.non-gst .doc-v8-table-head,
.doc-v8-items.non-gst .doc-v8-table-row {
grid-template-columns: 8mm minmax(0, 1fr) 14mm 23mm 25mm;
}
.doc-v8-items.gst-cgst .doc-v8-table-head,
.doc-v8-items.gst-cgst .doc-v8-table-row {
grid-template-columns: 7mm minmax(32mm, 1.45fr) 12mm 11mm 18mm 20mm 17mm 17mm 21mm;
}
.doc-v8-items.gst-igst .doc-v8-table-head,
.doc-v8-items.gst-igst .doc-v8-table-row {
grid-template-columns: 7mm minmax(35mm, 1.6fr) 13mm 12mm 20mm 21mm 19mm 22mm;
}
.doc-v8-table-head {
background: var(--invoice-blue);
color: #ffffff;
}
.doc-v8-table-head > span {
padding: 2.6mm 1.6mm;
border-right: .2mm solid rgba(255, 255, 255, .7);
display: flex;
align-items: center;
font-size: 8.4pt;
font-weight: 700;
}
.doc-v8-table-head > span:nth-child(n+3) {
justify-content: flex-end;
text-align: right;
}
.doc-v8-table-row > span {
min-height: 14mm;
padding: 2.7mm 1.6mm;
border-right: .2mm solid #e4eaf4;
border-bottom: .2mm solid #e4eaf4;
display: flex;
align-items: flex-start;
justify-content: flex-end;
font-size: 8.7pt;
text-align: right;
}
.doc-v8-table-row > span:first-child,
.doc-v8-table-row > span:nth-child(2) {
justify-content: flex-start;
text-align: left;
}
.doc-v8-table-head > span:last-child,
.doc-v8-table-row > span:last-child {
border-right: 0;
}
.doc-v8-table-row:last-child > span {
border-bottom: 0;
}
.doc-v8-item-name {
display: block !important;
}
.doc-v8-item-name b,
.doc-v8-item-name small {
display: block;
}
.doc-v8-item-name b {
font-size: 9.2pt;
}
.doc-v8-item-name small {
margin-top: 1mm;
color: #6b7280;
font-size: 8pt;
}
.doc-v8-summary-row {
margin-top: 3mm;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(45mm, 40%);
gap: 5mm;
align-items: start;
}
.doc-v8-words {
padding-top: 2mm;
font-size: 9pt;
}
.doc-v8-words > b {
font-size: 9.5pt;
}
.doc-v8-words > p {
margin: 1mm 0 0;
font-weight: 700;
line-height: 1.35;
}
.doc-v8-bank {
margin-top: 4mm;
padding: 3mm;
border: .25mm solid #d9e4f4;
border-radius: 2mm;
background: #fafcff;
}
.doc-v8-bank > span {
display: block;
margin-bottom: 1.3mm;
color: var(--invoice-blue-dark);
font-weight: 800;
}
.doc-v8-bank p {
margin: .55mm 0;
font-size: 8.3pt;
}
.doc-v8-totals {
background: #f8fafc;
}
.doc-v8-totals > div {
min-height: 9mm;
padding: 2mm 3mm;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4mm;
font-size: 9.5pt;
}
.doc-v8-grand-total {
border-top: .45mm solid #111827;
border-bottom: .45mm solid #111827;
background: #ffffff;
font-size: 12pt !important;
font-weight: 900;
}
.doc-v8-due-total {
background: #eaf2ff;
color: #153d9a;
font-weight: 900;
}
.doc-v8-payment-signature {
margin-top: 5mm;
padding-top: 4mm;
border-top: .25mm dashed #9fb4d2;
display: grid;
grid-template-columns: minmax(0, 1fr) 48mm;
gap: 7mm;
align-items: end;
}
.doc-v8-code-area {
display: flex;
align-items: flex-end;
gap: 6mm;
}
.doc-v8-qr-wrap,
.doc-v8-barcode-wrap {
display: grid;
justify-items: center;
gap: 1mm;
text-align: center;
}
.invoice-qr-doc {
width: 25mm;
height: 25mm;
display: grid;
place-items: center;
overflow: hidden;
}
.invoice-qr-doc canvas,
.invoice-qr-doc img {
width: 100% !important;
height: 100% !important;
}
.doc-v8-qr-wrap > span,
.doc-v8-barcode-wrap > small {
font-size: 7.5pt;
font-weight: 700;
}
.invoice-barcode-doc {
width: 44mm;
height: 13mm;
}
.doc-v8-signature {
min-height: 28mm;
display: grid;
align-content: end;
justify-items: center;
text-align: center;
}
.doc-v8-signature img {
width: 34mm;
max-height: 16mm;
margin-bottom: 1mm;
object-fit: contain;
}
.doc-v8-signature-space {
width: 34mm;
height: 13mm;
display: block;
border-bottom: .25mm solid #777777;
}
.doc-v8-signature b {
margin-top: 1mm;
font-size: 8.5pt;
}
.doc-v8-signature small {
font-size: 7.5pt;
}
.doc-v8-footer {
margin-top: 5mm;
}
.doc-v8-terms b {
display: block;
margin-bottom: 1mm;
font-size: 10pt;
}
.doc-v8-terms p {
margin: 0;
font-size: 8.5pt;
line-height: 1.4;
}
.doc-v8-system-note {
margin-top: 3mm;
padding-top: 2mm;
border-top: .25mm dashed #c3cedd;
color: #6b7280;
text-align: center;
font-size: 7.5pt;
}
/* A6 is intentionally compact but remains readable. */
.document-invoice-v8.a6 {
font-size: 9pt;
}
.document-invoice-v8.a6 .doc-v8-header {
min-height: 22mm;
grid-template-columns: minmax(0, 1fr) 37mm;
gap: 3mm;
}
.document-invoice-v8.a6 .doc-v8-title h1 {
margin-bottom: 2.2mm;
font-size: 18pt;
}
.document-invoice-v8.a6 .doc-v8-title dl > div {
grid-template-columns: 21mm 1fr;
}
.document-invoice-v8.a6 .doc-v8-title dt,
.document-invoice-v8.a6 .doc-v8-title dd {
font-size: 7.5pt;
}
.document-invoice-v8.a6 .doc-v8-logo {
width: 35mm;
height: 18mm;
}
.document-invoice-v8.a6 .doc-v8-party-grid {
margin-top: 3mm;
gap: 2mm;
}
.document-invoice-v8.a6 .doc-v8-party-grid > article {
min-height: 24mm;
padding: 2.5mm;
}
.document-invoice-v8.a6 .doc-v8-card-title {
font-size: 10pt;
}
.document-invoice-v8.a6 .doc-v8-party-grid b,
.document-invoice-v8.a6 .doc-v8-party-grid p,
.document-invoice-v8.a6 .doc-v8-supply-row {
font-size: 7.2pt;
}
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-head,
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-row {
grid-template-columns: 6mm minmax(0, 1fr) 11mm 9mm 16mm 18mm;
}
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-head > span:nth-child(6),
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-head > span:nth-child(7),
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-head > span:nth-child(8),
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-row > span:nth-child(6),
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-row > span:nth-child(7),
.document-invoice-v8.a6 .doc-v8-items.gst-cgst .doc-v8-table-row > span:nth-child(8) {
display: none;
}
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-head,
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-row {
grid-template-columns: 6mm minmax(0, 1fr) 11mm 9mm 16mm 18mm;
}
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-head > span:nth-child(6),
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-head > span:nth-child(7),
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-row > span:nth-child(6),
.document-invoice-v8.a6 .doc-v8-items.gst-igst .doc-v8-table-row > span:nth-child(7) {
display: none;
}
.document-invoice-v8.a6 .doc-v8-table-head > span,
.document-invoice-v8.a6 .doc-v8-table-row > span {
min-height: 10mm;
padding: 1.7mm .9mm;
font-size: 6.8pt;
}
.document-invoice-v8.a6 .doc-v8-item-name b {
font-size: 7.4pt;
}
.document-invoice-v8.a6 .doc-v8-item-name small {
font-size: 6.4pt;
}
.document-invoice-v8.a6 .doc-v8-summary-row {
grid-template-columns: 1fr 38mm;
gap: 2mm;
}
.document-invoice-v8.a6 .doc-v8-words,
.document-invoice-v8.a6 .doc-v8-totals > div {
font-size: 7pt;
}
.document-invoice-v8.a6 .doc-v8-bank {
display: none;
}
.document-invoice-v8.a6 .doc-v8-payment-signature {
grid-template-columns: 1fr 34mm;
gap: 2mm;
}
.document-invoice-v8.a6 .invoice-qr-doc {
width: 20mm;
height: 20mm;
}
.document-invoice-v8.a6 .invoice-barcode-doc {
width: 29mm;
height: 10mm;
}
.document-invoice-v8.a6 .doc-v8-code-area {
gap: 2mm;
}
.document-invoice-v8.a6 .doc-v8-signature img {
width: 27mm;
max-height: 12mm;
}
.document-invoice-v8.a6 .doc-v8-terms p {
font-size: 6.8pt;
}
/* Settings additions */
.invoice-number-settings {
margin-top: 12px;
padding: 12px;
border: 1px solid #e2e8f4;
border-radius: 16px;
background: #f8fbff;
}
.compact-head {
margin-bottom: 8px;
}
.setting-preview-chip {
margin-top: 8px;
padding: 9px 10px;
border-radius: 12px;
background: #eaf2ff;
color: #47607f;
font-size: 11px;
}
.setting-preview-chip b {
color: var(--primary, #5b4df5);
}
.signature-preview img {
object-fit: contain;
}
/* Exact PDF capture should never inherit mobile shrinking rules. */
body.invoice-capture-mode .invoice-paper {
transform: none !important;
zoom: 1 !important;
}
/* Fallback browser print: exact PDF is the primary print method. */
@media print {
html,
body.invoice-page {
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
body.invoice-page .compact-topbar,
body.invoice-page .dashboard-topbar,
body.invoice-page .mobile-dock,
body.invoice-page .invoice-actions,
body.invoice-page .invoice-secondary,
body.invoice-page .wizard-next,
body.invoice-page #printerPanel,
body.invoice-page .no-print {
display: none !important;
}
body.invoice-page .app-shell,
body.invoice-page .main-content,
body.invoice-page .subpage-content {
width: auto !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
body.invoice-page #invoiceCapture {
position: static !important;
margin: 0 !important;
transform: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.invoice-layout-2inch #invoiceCapture {
width: 58mm !important;
max-width: 58mm !important;
}
body.invoice-layout-4inch #invoiceCapture {
width: 100mm !important;
max-width: 100mm !important;
}
body.invoice-layout-a6 #invoiceCapture {
width: 105mm !important;
max-width: 105mm !important;
}
body.invoice-layout-a5 #invoiceCapture {
width: 148mm !important;
max-width: 148mm !important;
}
body.invoice-layout-a4 #invoiceCapture {
width: 210mm !important;
max-width: 210mm !important;
}
}
@media (max-width: 390px) {
.document-invoice-v8 {
padding: 12px;
border-radius: 15px;
}
.document-invoice-v8:not(.a6) .doc-v8-title h1 {
font-size: 22px;
}
.document-invoice-v8:not(.a6) .doc-v8-header {
grid-template-columns: 1fr 42%;
gap: 10px;
}
.document-invoice-v8:not(.a6) .doc-v8-logo {
width: 100%;
height: 58px;
}
.document-invoice-v8:not(.a6) .doc-v8-party-grid > article {
padding: 10px;
}
}
/* ==========================================================================
V6.9 Accessibility + Barcode Only + EMI KYC
========================================================================== */
/* Bigger app typography for low-eyesight users */
.app-shell {
font-size: 15px;
}
.app-shell small,
.app-shell .soft-label,
.app-shell .field-caption,
.app-shell .code-studio-label {
font-size: 11px !important;
line-height: 1.35;
}
.app-shell .smart-field > span,
.app-shell label > span {
font-size: 12px;
}
.app-shell input,
.app-shell select,
.app-shell textarea,
.app-shell button {
font-size: 15px;
}
.mobile-dock small {
font-size: 10px !important;
}
/* Payment QR - intentionally large on phone */
.upi-customer-panel .upi-qr-stage {
min-height: 420px;
padding: 18px 10px 22px;
}
.upi-customer-panel .qr-card-large {
width: min(92vw, 390px);
min-height: 390px;
padding: 22px;
border-radius: 28px;
display: grid;
place-items: center;
}
.upi-customer-panel #upiQr,
.upi-customer-panel #upiQr canvas,
.upi-customer-panel #upiQr img {
width: min(76vw, 330px) !important;
height: min(76vw, 330px) !important;
max-width: 330px !important;
max-height: 330px !important;
}
/* Customer live suggestions */
.customer-mobile-input {
position: relative;
}
.customer-suggestions {
margin-top: 8px;
overflow: hidden;
border: 1px solid #dfe3ee;
border-radius: 16px;
background: #ffffff;
box-shadow:
0 14px 34px
rgba(27, 34, 64, .10);
}
.customer-suggestions button {
width: 100%;
padding: 11px 12px;
border: 0;
border-bottom: 1px solid #eef0f5;
display: grid;
grid-template-columns: 42px 1fr;
gap: 10px;
align-items: center;
background: #ffffff;
color: #1d2338;
text-align: left;
}
.customer-suggestions button:last-child {
border-bottom: 0;
}
.customer-suggestions b,
.customer-suggestions small {
display: block;
}
.customer-suggestions b {
margin-bottom: 2px;
font-size: 14px;
}
.customer-suggestions small {
color: #7d8599;
font-size: 12px !important;
}
.suggestion-avatar {
width: 40px;
height: 40px;
border-radius: 13px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-size: 16px;
font-weight: 900;
}
/* GST inclusive selling amount */
.gst-inclusive-toggle {
margin: 10px 0;
padding: 12px;
border: 1px solid #e3e5ee;
border-radius: 16px;
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: start;
background: #f9faff;
}
.gst-inclusive-toggle input {
width: 20px;
height: 20px;
accent-color: #5b4df2;
}
.gst-inclusive-toggle b,
.gst-inclusive-toggle small {
display: block;
}
.gst-inclusive-toggle b {
font-size: 13px;
}
.gst-inclusive-toggle small {
margin-top: 3px;
color: #7e8699;
font-size: 11px !important;
}
.gst-inclusive-preview {
margin-bottom: 10px;
padding: 10px;
border-radius: 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
background: #f0f8f4;
}
.gst-inclusive-preview span {
color: #687386;
font-size: 11px;
}
.gst-inclusive-preview b,
.gst-inclusive-preview i {
display: block;
margin-top: 3px;
color: #1d6e4a;
font-size: 14px;
font-style: normal;
}
/* Product image */
.product-image-picker {
margin-bottom: 12px;
padding: 11px;
border: 1px solid #e4e7ef;
border-radius: 18px;
display: grid;
grid-template-columns: 84px 1fr;
gap: 12px;
align-items: center;
background: #fafbfe;
}
.product-image-preview {
width: 84px;
height: 84px;
overflow: hidden;
border-radius: 18px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-size: 28px;
}
.product-image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-image-copy b,
.product-image-copy small {
display: block;
}
.product-image-copy b {
margin: 3px 0;
font-size: 14px;
}
.product-image-copy small {
color: #7e869a;
}
.product-image-action {
width: max-content;
margin-top: 8px;
padding: 8px 11px;
border-radius: 11px;
display: inline-block;
background: #5b4df2;
color: #ffffff;
font-size: 12px;
font-weight: 850;
}
/* Barcode-only studio */
.barcode-studio-v69 {
display: grid;
gap: 12px;
}
.barcode-mode-switch {
padding: 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
border-radius: 16px;
background: #eceef5;
}
.barcode-mode-switch button {
min-height: 46px;
border: 0;
border-radius: 13px;
background: transparent;
color: #697186;
font-weight: 850;
}
.barcode-mode-switch button.active {
background: #ffffff;
color: #5b4df2;
box-shadow:
0 6px 16px
rgba(31, 38, 68, .08);
}
.barcode-mode-panel {
display: grid;
gap: 11px;
}
.barcode-product-select {
min-height: 68px;
padding: 11px;
border: 1px solid #e2e5ed;
border-radius: 18px;
display: grid;
grid-template-columns: 44px 1fr 24px;
gap: 10px;
align-items: center;
background: #ffffff;
color: #23293d;
text-align: left;
}
.barcode-product-select > span {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-size: 20px;
}
.barcode-product-select small,
.barcode-product-select b {
display: block;
}
.barcode-product-select b {
margin-top: 3px;
font-size: 15px;
}
.barcode-product-select em {
color: #9aa0af;
font-size: 22px;
font-style: normal;
}
.accessible-stepper-card {
padding: 12px;
border: 1px solid #e2e5ed;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
}
.accessible-stepper-card small,
.accessible-stepper-card b {
display: block;
}
.accessible-stepper-card b {
margin-top: 3px;
font-size: 14px;
}
.accessible-stepper {
display: grid;
grid-template-columns: 42px 56px 42px;
gap: 5px;
align-items: center;
}
.accessible-stepper button {
width: 42px;
height: 42px;
border: 0;
border-radius: 13px;
background: #eeecff;
color: #5b4df2;
font-size: 22px;
font-weight: 900;
}
.accessible-stepper strong {
text-align: center;
font-size: 20px;
}
.barcode-display-options {
display: grid;
gap: 7px;
}
.barcode-display-options label,
.barcode-logo-option {
min-height: 48px;
padding: 10px 12px;
border: 1px solid #e4e6ef;
border-radius: 15px;
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
font-size: 13px;
font-weight: 750;
}
.barcode-display-options input,
.barcode-logo-option input {
width: 20px;
height: 20px;
accent-color: #5b4df2;
}
.barcode-generate-main {
min-height: 54px;
padding: 0 16px;
border: 0;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(
135deg,
#5548ed,
#7359ff
);
color: #ffffff;
font-weight: 900;
box-shadow:
0 12px 25px
rgba(91, 77, 243, .23);
}
.multi-info-card {
padding: 11px;
border-radius: 16px;
display: grid;
grid-template-columns: 36px 1fr;
gap: 9px;
align-items: center;
background: #f1efff;
}
.multi-info-card > span {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
background: #ffffff;
color: #5b4df2;
font-weight: 900;
}
.multi-info-card b,
.multi-info-card small {
display: block;
}
.multi-info-card b {
font-size: 13px;
}
.multi-info-card small {
margin-top: 3px;
color: #747c91;
}
.barcode-search {
min-height: 50px;
padding: 0 13px;
border: 1px solid #e2e5ed;
border-radius: 15px;
display: flex;
align-items: center;
gap: 9px;
background: #ffffff;
}
.barcode-search input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
}
.multi-product-list {
display: grid;
gap: 7px;
}
.multi-barcode-product {
min-height: 66px;
padding: 7px;
border: 1px solid #e3e6ee;
border-radius: 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 7px;
align-items: center;
background: #ffffff;
}
.multi-barcode-product.selected {
border-color: #bdb5ff;
background: #faf9ff;
}
.multi-product-main {
min-width: 0;
padding: 0;
border: 0;
display: grid;
grid-template-columns: 36px 1fr;
gap: 9px;
align-items: center;
background: transparent;
color: #242a3e;
text-align: left;
}
.multi-check {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-weight: 900;
}
.multi-product-main b,
.multi-product-main small {
display: block;
}
.multi-product-main b {
font-size: 13px;
}
.multi-product-main small {
margin-top: 2px;
color: #737b90;
}
.mini-stepper {
display: grid;
grid-template-columns: 32px 32px 32px;
gap: 3px;
align-items: center;
}
.mini-stepper button {
width: 32px;
height: 32px;
border: 0;
border-radius: 10px;
background: #eeecff;
color: #5b4df2;
font-size: 18px;
font-weight: 900;
}
.mini-stepper strong {
text-align: center;
font-size: 14px;
}
.multi-total-bar {
padding: 11px;
border-radius: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: #1f2740;
color: #ffffff;
}
.multi-total-bar small,
.multi-total-bar b {
display: block;
}
.multi-total-bar small {
color: #aeb7cf;
}
.multi-total-bar b {
margin-top: 3px;
font-size: 15px;
}
.barcode-only-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 6px;
}
.barcode-label-v69 {
min-height: 88px;
padding: 6px;
overflow: hidden;
border: 1px dashed #cfd3de;
border-radius: 8px;
display: grid;
place-items: center;
align-content: center;
gap: 2px;
background: #ffffff;
color: #111111;
text-align: center;
}
.barcode-label-logo {
max-width: 54px;
max-height: 22px;
object-fit: contain;
}
.barcode-label-name {
width: 100%;
overflow: hidden;
font-size: 10px;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.barcode-label-svg {
width: 100%;
height: 56px;
}
.barcode-label-price {
font-size: 11px;
}
body.barcode-pdf-mode .barcode-only-grid {
width: 1000px;
grid-template-columns:
repeat(4, 1fr);
gap: 7px;
}
body.barcode-pdf-mode .barcode-label-v69 {
height: 128px;
}
/* EMI KYC */
.emi-customer-profile-card,
.emi-kyc-head {
margin-bottom: 10px;
padding: 12px;
border: 1px solid #e2e5ed;
border-radius: 19px;
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 10px;
align-items: center;
background: #ffffff;
}
.emi-customer-avatar,
.emi-kyc-avatar {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-size: 18px;
font-weight: 900;
}
.emi-customer-profile-card h3,
.emi-kyc-head h2 {
margin: 3px 0;
font-size: 15px;
}
.emi-customer-profile-card p,
.emi-kyc-head p {
margin: 0;
color: #747c91;
font-size: 12px;
}
.kyc-status {
padding: 7px 9px;
border-radius: 999px;
background: #fff2df;
color: #a86409;
font-size: 10px;
font-weight: 900;
text-decoration: none;
white-space: nowrap;
}
.kyc-status.complete {
background: #e3f8ed;
color: #238256;
}
.emi-kyc-form {
display: grid;
gap: 10px;
}
.document-upload-card {
min-height: 62px;
margin-top: 8px;
padding: 9px;
border: 1px solid #e2e5ed;
border-radius: 15px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 9px;
align-items: center;
background: #fafbfe;
}
.document-upload-card > span {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
}
.document-upload-card b,
.document-upload-card small {
display: block;
}
.document-upload-card input {
grid-column: 1 / -1;
width: 100%;
}
/* Dense A4 barcode print */
@media print {
body:has(.barcode-only-grid) * {
visibility: hidden !important;
}
#bulkCodesResult,
#bulkCodesResult * {
visibility: visible !important;
}
#bulkCodesResult {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
#bulkCodesResult .code-results-head {
display: none !important;
}
.barcode-only-grid {
display: grid !important;
grid-template-columns:
repeat(4, 1fr) !important;
gap: 2mm !important;
}
.barcode-label-v69 {
height: 27mm !important;
padding: 1.5mm !important;
border: .2mm solid #999999 !important;
border-radius: 0 !important;
break-inside: avoid !important;
}
.barcode-label-svg {
width: 100% !important;
height: 15mm !important;
}
.barcode-label-name {
font-size: 8pt !important;
}
.barcode-label-price {
font-size: 9pt !important;
}
.barcode-label-logo {
max-height: 7mm !important;
}
}
@media (max-width: 390px) {
.barcode-only-grid {
grid-template-columns: 1fr 1fr;
}
.emi-customer-profile-card,
.emi-kyc-head {
grid-template-columns: 44px 1fr;
}
.emi-customer-profile-card .kyc-status,
.emi-kyc-head .kyc-status {
grid-column: 1 / -1;
width: max-content;
}
}
/* ==========================================================================
V7.0 EMI Pay + Suggestions + A4 Full + Terms + Mini Website
========================================================================== */
.item-suggestions {
margin: 7px 0 10px;
overflow: hidden;
border: 1px solid #dfe3ee;
border-radius: 16px;
background: #fff;
box-shadow: 0 14px 34px rgba(27, 34, 64, .10);
}
.item-suggestions button {
width: 100%;
padding: 11px 12px;
border: 0;
border-bottom: 1px solid #eef0f5;
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
align-items: center;
background: #fff;
color: #1d2338;
text-align: left;
}
.item-suggestions button:last-child { border-bottom: 0; }
.item-suggestions b, .item-suggestions small { display: block; }
.item-suggestions b { font-size: 14px; }
.item-suggestions small { margin-top: 2px; color: #7d8599; font-size: 11px !important; }
.item-suggestion-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-weight: 900;
}
.terms-builder {
margin-top: 12px;
padding: 12px;
border: 1px solid #e4e7ef;
border-radius: 18px;
background: #fafbfe;
}
.terms-builder-head {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.terms-builder-head h4 { margin: 3px 0 0; font-size: 14px; }
.terms-builder-head button {
min-height: 38px;
padding: 0 10px;
border: 0;
border-radius: 11px;
background: #eeecff;
color: #5b4df2;
font-weight: 850;
}
.term-points-list { display: grid; gap: 7px; }
.term-point-row {
display: grid;
grid-template-columns: 18px 1fr 34px;
gap: 6px;
align-items: center;
}
.term-point-row > span { color: #5b4df2; font-size: 18px; text-align: center; }
.term-point-row input {
min-width: 0;
min-height: 44px;
padding: 0 10px;
border: 1px solid #dfe3ed;
border-radius: 12px;
background: #fff;
}
.term-point-row button {
width: 34px;
height: 34px;
border: 0;
border-radius: 10px;
background: #ffecef;
color: #d73e56;
font-size: 18px;
}
.doc-v8-terms ol { margin: 6px 0 0; padding-left: 18px; }
.doc-v8-terms li { margin-bottom: 3px; }
.pos-terms-list p { margin: 2px 0; text-align: left; }
.public-emi-pay-card {
margin-top: 12px;
padding: 14px;
border: 1px solid #e2dfff;
border-radius: 22px;
background: linear-gradient(180deg, #faf9ff, #fff);
box-shadow: 0 14px 30px rgba(57, 48, 143, .08);
}
.public-emi-pay-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.public-emi-pay-head h2 { margin: 4px 0 2px; font-size: 28px; }
.public-emi-pay-head p { margin: 0; color: #798196; font-size: 12px; }
.upi-chip {
padding: 7px 9px;
border-radius: 999px;
background: #eeecff;
color: #5b4df2;
font-size: 10px;
font-weight: 900;
}
.emi-public-qr {
width: min(82vw, 310px);
height: min(82vw, 310px);
margin: 14px auto;
padding: 10px;
border-radius: 22px;
display: grid;
place-items: center;
background: #fff;
box-shadow: 0 12px 30px rgba(30, 35, 63, .10);
}
.emi-public-qr canvas, .emi-public-qr img {
width: 100% !important;
height: 100% !important;
}
.public-emi-upi-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.public-emi-upi-meta span { padding: 9px; border-radius: 13px; background: #f5f6fb; }
.public-emi-upi-meta small, .public-emi-upi-meta b { display: block; }
.public-emi-upi-meta small { color: #8b92a5; font-size: 9px; }
.public-emi-upi-meta b { margin-top: 3px; font-size: 12px; word-break: break-word; }
.public-emi-pay-button {
min-height: 52px;
margin-top: 10px;
padding: 0 15px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #5548ed, #7359ff);
color: #fff;
font-weight: 900;
text-decoration: none;
}
.mini-site-settings { display: grid; gap: 10px; }
.mini-site-hero-card {
padding: 14px;
border-radius: 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: linear-gradient(135deg, #343094, #6556f3);
color: #fff;
}
.mini-site-hero-card .soft-label { color: #d9d5ff; }
.mini-site-hero-card h2 { margin: 4px 0; color: #fff; font-size: 18px; }
.mini-site-hero-card p { margin: 0; color: #dedbff; font-size: 12px; }
.app-switch input { display: none; }
.app-switch i {
width: 46px;
height: 26px;
border-radius: 999px;
display: block;
position: relative;
background: rgba(255,255,255,.25);
}
.app-switch i::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
background: #fff;
transition: .2s;
}
.app-switch input:checked + i { background: #3bc682; }
.app-switch input:checked + i::after { transform: translateX(20px); }
.slug-field { display: grid; gap: 5px; }
.slug-field small { color: #8b92a5; font-size: 10px !important; word-break: break-all; }
.publish-catalog-list { display: grid; gap: 7px; }
.publish-catalog-row {
min-height: 64px;
padding: 8px;
border: 1px solid #e3e6ee;
border-radius: 15px;
display: grid;
grid-template-columns: 20px 44px 1fr 24px;
gap: 8px;
align-items: center;
background: #fff;
}
.publish-catalog-row input { width: 18px; height: 18px; accent-color: #5b4df2; }
.publish-thumb {
width: 44px;
height: 44px;
border-radius: 12px;
overflow: hidden;
display: grid;
place-items: center;
background: #eeecff;
color: #5b4df2;
font-weight: 900;
}
.publish-thumb img { width: 100%; height: 100%; object-fit: cover; }
.publish-catalog-row b, .publish-catalog-row small { display: block; }
.publish-catalog-row b { font-size: 13px; }
.publish-catalog-row small { margin-top: 2px; color: #7c8498; font-size: 10px !important; }
.publish-catalog-row i { color: #5b4df2; font-style: normal; opacity: 0; }
.publish-catalog-row input:checked ~ i { opacity: 1; }
.store-assets-panel { margin-top: 14px; }
.store-asset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.store-qr-card {
padding: 14px;
border: 1px solid #e3e6ee;
border-radius: 19px;
display: grid;
place-items: center;
gap: 8px;
background: #fff;
}
.store-qr-card button, .secondary-action-button {
min-height: 42px;
padding: 0 12px;
border: 0;
border-radius: 12px;
background: #eeecff;
color: #5b4df2;
font-weight: 850;
}
.digital-visiting-card {
aspect-ratio: 1.75 / 1;
padding: 18px;
border-radius: 20px;
display: grid;
grid-template-columns: 1fr 110px;
grid-template-rows: 1fr auto;
gap: 10px;
background: linear-gradient(135deg, #151a2b, #303889);
color: #fff;
}
.visiting-brand { display: flex; gap: 9px; align-items: center; }
.visiting-brand img { width: 54px; height: 54px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; }
.visiting-brand b, .visiting-brand small { display: block; }
.visiting-brand b { font-size: 17px; }
.visiting-brand small { margin-top: 3px; color: #cdd2ef; font-size: 10px !important; }
#visitingQr { width: 105px; height: 105px; padding: 4px; border-radius: 10px; background: #fff; }
#visitingQr canvas, #visitingQr img { width: 100% !important; height: 100% !important; }
.visiting-contact { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; color: #d9ddf4; font-size: 10px; }
.public-store-page { margin: 0; background: #f4f6fb; color: #161b2d; font-family: Inter, Arial, sans-serif; }
.public-store-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: 16px 14px 96px; }
.public-store-hero {
padding: 22px 18px;
border-radius: 26px;
background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.15), transparent 30%), linear-gradient(135deg, #343094, #6556f3);
color: #fff;
box-shadow: 0 18px 45px rgba(42, 38, 112, .18);
}
.public-store-brand { display: flex; gap: 12px; align-items: center; }
.public-store-brand img, .public-store-brand > span { width: 64px; height: 64px; border-radius: 18px; object-fit: contain; display: grid; place-items: center; background: #fff; color: #5b4df2; font-size: 24px; font-weight: 900; }
.public-store-brand small { color: #d7d4ff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.public-store-brand h1 { margin: 4px 0 0; color: #fff; font-size: 24px; }
.public-store-hero > p { margin: 15px 0 0; color: #e4e2ff; font-size: 14px; line-height: 1.55; }
.public-store-actions { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.public-store-actions a { min-height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: #4c42d6; text-decoration: none; font-weight: 900; }
.public-store-about, .public-store-catalog, .public-store-contact-card { margin-top: 14px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(34,40,70,.06); }
.public-store-about h2, .public-store-contact-card h2 { margin: 5px 0 8px; font-size: 20px; }
.public-store-about p, .public-store-contact-card p { margin: 0; color: #626b81; font-size: 14px; line-height: 1.6; }
.public-store-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.public-store-section-head h2 { margin: 4px 0 0; font-size: 20px; }
.public-store-section-head > span { color: #8b92a5; font-size: 12px; }
.public-store-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public-store-item { overflow: hidden; border: 1px solid #e7e9f0; border-radius: 18px; background: #fff; }
.public-store-item-image { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: #f0efff; color: #5b4df2; font-size: 28px; font-weight: 900; }
.public-store-item-image img { width: 100%; height: 100%; object-fit: cover; }
.public-store-item-copy { padding: 10px; }
.public-store-item-copy small { color: #766cf0; font-size: 9px; font-weight: 900; }
.public-store-item-copy h3 { margin: 4px 0; font-size: 14px; }
.public-store-item-copy b { font-size: 15px; }
.public-store-item-actions { padding: 0 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.public-store-item-actions a { min-height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f1efff; color: #5749e8; text-decoration: none; font-size: 11px; font-weight: 900; }
.public-store-footer { padding: 20px 6px; text-align: center; color: #7d8598; }
.public-store-footer b, .public-store-footer small { display: block; }
.public-store-footer small { margin-top: 3px; font-size: 10px; }
.public-store-floating-actions { width: min(calc(100% - 20px), 700px); padding: 8px; position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 1px solid #e4e6ee; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 14px 38px rgba(23,29,57,.15); backdrop-filter: blur(12px); }
.public-store-floating-actions a { min-height: 46px; border-radius: 14px; display: grid; place-items: center; background: #5b4df2; color: #fff; text-decoration: none; font-weight: 900; }
@media (max-width: 420px) {
.public-store-grid { grid-template-columns: 1fr 1fr; }
.digital-visiting-card { padding: 14px; grid-template-columns: 1fr 90px; }
#visitingQr { width: 86px; height: 86px; }
.visiting-brand img { width: 46px; height: 46px; }
.visiting-brand b { font-size: 14px; }
}
/* V7.1 hotfix: customer step + live product photo */
#newNameWrap:not(.hidden) {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #dfe3ee;
}
#newNameWrap:not(.hidden) input {
min-height: 52px;
font-size: 16px;
font-weight: 700;
}
.product-image-actions {
margin-top: 9px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.product-image-actions .product-image-action {
margin-top: 0;
min-height: 38px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.product-image-actions .product-image-action.secondary {
border: 1px solid #dcd8ff;
background: #f1efff;
color: #5b4df2;
}
/* ==========================================================================\n V7.2 – Profile storefront, website catalog & guest billing\n ========================================================================== */
.customer-step-actions{display:grid;gap:9px}
.guest-bill-btn{width:100%;min-height:58px;padding:9px 12px;border:1px solid #dfe3ee;border-radius:17px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:#fff;color:#252b40;text-align:left;box-shadow:0 8px 20px rgba(29,35,62,.04)}
.guest-bill-btn>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#fff3df;color:#b76a07;font-size:18px}
.guest-bill-btn b,.guest-bill-btn small{display:block}.guest-bill-btn b{font-size:14px}.guest-bill-btn small{margin-top:2px;color:#81889a;font-size:11px!important}.guest-bill-btn i{color:#9aa1b1;font-size:18px;font-style:normal}
.website-profile-hero{margin-bottom:10px;padding:13px;border:1px solid #e1e5ee;border-radius:20px;display:grid;grid-template-columns:54px 1fr auto;gap:11px;align-items:center;background:linear-gradient(135deg,#f7f9ff,#fff)}
.website-profile-logo{width:54px;height:54px;overflow:hidden;border-radius:16px;display:grid;place-items:center;background:#e8edff;color:#315fd8;font-size:20px;font-weight:900}.website-profile-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.website-profile-hero h2{margin:3px 0 4px;font-size:16px}.website-profile-hero a{display:block;max-width:235px;overflow:hidden;color:#315fd8;font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.website-live-badge{padding:6px 8px;border-radius:999px;background:#e1f8eb;color:#248357;font-size:9px;font-weight:900}
.profile-sync-note{margin-bottom:11px;padding:10px;border-radius:14px;display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;background:#eef5ff}.profile-sync-note>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#fff;color:#2563eb;font-weight:900}.profile-sync-note p{margin:0;color:#596579;font-size:11px;line-height:1.5}
.website-catalog-link{min-height:66px;padding:10px 11px;border:1px solid #e2e5ed;border-radius:18px;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:#fff;color:#22293e;text-decoration:none}.website-catalog-link>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eeecff;color:#5b4df2;font-size:18px}.website-catalog-link b,.website-catalog-link small{display:block}.website-catalog-link b{font-size:14px}.website-catalog-link small{margin-top:2px;color:#81889a;font-size:11px!important}.website-catalog-link i{color:#969dae;font-size:20px;font-style:normal}
.catalog-manager-hero{padding:14px;border-radius:20px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(135deg,#242d58,#5268f3);color:#fff}.catalog-manager-hero .soft-label{color:#cdd6ff}.catalog-manager-hero h2{margin:4px 0;color:#fff;font-size:18px}.catalog-manager-hero p{margin:0;max-width:300px;color:#d9dfff;font-size:11px;line-height:1.5}.catalog-count-bubble{width:44px;height:44px;flex:0 0 44px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:15px;font-weight:900}
.catalog-manager-search{margin-top:10px;min-height:50px;padding:0 13px;border:1px solid #e1e4ed;border-radius:15px;display:flex;align-items:center;gap:9px;background:#fff}.catalog-manager-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.catalog-filter-row{display:flex;gap:7px;overflow:auto;padding:10px 0;scrollbar-width:none}.catalog-filter-row button{min-height:36px;padding:0 13px;border:1px solid #e2e5ed;border-radius:999px;background:#fff;color:#727b90;font-size:11px;font-weight:850;white-space:nowrap}.catalog-filter-row button.active{border-color:#5b4df2;background:#eeecff;color:#5b4df2}.catalog-manager-list{display:grid;gap:8px}.catalog-manager-card{width:100%;min-height:74px;padding:8px;border:1px solid #e2e5ed;border-radius:17px;display:grid;grid-template-columns:54px 1fr auto 16px;gap:9px;align-items:center;background:#fff;color:#22293e;text-align:left}.catalog-manager-thumb{width:54px;height:54px;overflow:hidden;border-radius:14px;display:grid;place-items:center;background:#eef1f7;color:#5b4df2;font-size:17px;font-weight:900}.catalog-manager-thumb img{width:100%;height:100%;object-fit:cover}.catalog-manager-copy{min-width:0}.catalog-manager-copy small,.catalog-manager-copy b,.catalog-manager-copy em{display:block}.catalog-manager-copy small{color:#9299aa;font-size:9px!important;font-weight:800}.catalog-manager-copy b{margin:3px 0;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.catalog-manager-copy em{color:#536078;font-size:11px;font-style:normal}.catalog-publish-state{padding:5px 7px;border-radius:999px;background:#f1f2f6;color:#808799;font-size:9px;font-weight:900}.catalog-publish-state.live{background:#e1f8eb;color:#248357}.catalog-manager-card>i{color:#9da4b4;font-size:18px;font-style:normal}.catalog-edit-panel{max-height:min(88vh,760px);overflow:auto}.catalog-publish-toggle{margin-bottom:10px;padding:11px;border:1px solid #e1e4ed;border-radius:15px;display:grid;grid-template-columns:20px 1fr;gap:10px;background:#f9faff}.catalog-publish-toggle input{width:20px;height:20px;accent-color:#5b4df2}.catalog-publish-toggle b,.catalog-publish-toggle small{display:block}.catalog-publish-toggle b{font-size:13px}.catalog-publish-toggle small{margin-top:2px;color:#7d8598;font-size:10px!important}.catalog-seo-details{margin-top:8px}
@media(max-width:390px){.website-profile-hero{grid-template-columns:50px 1fr}.website-live-badge{grid-column:1/-1;width:max-content}.catalog-manager-card{grid-template-columns:50px 1fr auto}.catalog-manager-card>i{display:none}.catalog-publish-state{grid-column:3;grid-row:1}}
/* ==========================================================================
V7.3 – Direct physical printing + responsive invoice/payment presentation
========================================================================== */
/* Payment QR must fit the available card instead of overflowing fixed pixels. */
.upi-customer-panel {
width: 100%;
}
.upi-customer-panel .upi-qr-stage {
min-height: 0;
padding: 16px 0 20px;
}
.upi-customer-panel .qr-card-large {
width: 100%;
max-width: 520px;
min-height: 0;
margin: 0 auto;
padding: clamp(12px, 4vw, 22px);
aspect-ratio: 1 / 1;
border-radius: 28px;
box-sizing: border-box;
}
.upi-customer-panel #upiQr {
width: 100% !important;
height: auto !important;
max-width: 470px !important;
max-height: none !important;
aspect-ratio: 1 / 1;
}
.upi-customer-panel #upiQr canvas,
.upi-customer-panel #upiQr img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
display: block;
}
/* Invoice view: retain good mobile layout, but use tablet/desktop space properly. */
@media (min-width: 720px) {
body.invoice-page .app-shell {
width: min(1120px, calc(100vw - 40px));
max-width: 1120px;
margin: 0 auto;
}
body.invoice-page .main-content,
body.invoice-page .subpage-content {
width: 100%;
max-width: none;
}
body.invoice-page .document-invoice-v8 {
width: min(920px, 100%);
max-width: 920px;
margin-inline: auto;
padding: 34px;
}
body.invoice-page .pos-receipt {
width: min(460px, 100%) !important;
max-width: 460px !important;
margin-inline: auto;
padding: 26px;
border-radius: 20px;
}
body.invoice-page .pos-receipt .pos-logo {
width: 110px;
max-height: 80px;
}
body.invoice-page .pos-brand h1 {
font-size: 28px;
}
body.invoice-page .pos-brand p,
body.invoice-page .pos-invoice-meta,
body.invoice-page .pos-line-sub,
body.invoice-page .pos-terms-list p {
font-size: 15px;
}
body.invoice-page .pos-line-main b,
body.invoice-page .pos-line-main strong,
body.invoice-page .pos-summary-v8 > div {
font-size: 17px;
}
body.invoice-page .pos-summary-v8 .pos-total {
font-size: 25px;
}
body:has(#billingConfig) .app-shell {
width: min(760px, calc(100vw - 36px));
max-width: 760px;
margin-inline: auto;
}
body:has(#billingConfig) .main-content,
body:has(#billingConfig) .subpage-content {
max-width: none;
}
body:has(#billingConfig) .upi-customer-panel {
padding: 24px;
}
body:has(#billingConfig) .upi-customer-panel .qr-card-large {
max-width: 560px;
}
}
/* Professional document view order: brand left, invoice identity right. */
.document-invoice-v8 .doc-v8-brand {
order: 1;
justify-content: flex-start;
}
.document-invoice-v8 .doc-v8-title {
order: 2;
text-align: right;
}
.document-invoice-v8 .doc-v8-title dl > div {
grid-template-columns: minmax(0, 1fr) auto;
}
.document-invoice-v8 .doc-v8-title dt,
.document-invoice-v8 .doc-v8-title dd {
text-align: right;
}
/* Direct print button terminology. */
.invoice-actions #printBtn {
background: linear-gradient(135deg, #155fc8, #2b7dea);
color: #ffffff;
}
/* ==========================================================================
V7.4 – true responsive shell + isolated fixed invoice viewer
========================================================================== */
.invoice-viewer-shell {
width: 100%;
padding: 12px;
border: 1px solid #e1e6ef;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(32, 42, 76, .07);
}
.invoice-viewer-toolbar {
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.invoice-viewer-toolbar h2 {
margin: 3px 0 0;
font-size: 16px;
}
.invoice-open-full {
padding: 9px 11px;
border-radius: 12px;
background: #edf4ff;
color: #1769e8;
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.invoice-viewport {
width: 100%;
min-height: 300px;
padding: 12px;
overflow: hidden;
border-radius: 18px;
background:
radial-gradient(circle at 90% 0, rgba(41, 118, 232, .08), transparent 30%),
#eef2f7;
}
.invoice-scale-box {
margin: 0 auto;
position: relative;
}
.invoice-scale-box iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
background: transparent;
}
.invoice-action-grid {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.invoice-action-grid > * {
min-height: 58px;
padding: 8px 6px;
border: 1px solid #e3e7ef;
border-radius: 15px;
display: grid;
place-items: center;
align-content: center;
gap: 4px;
background: #fff;
color: #4e566b;
font: inherit;
text-decoration: none;
cursor: pointer;
}
.invoice-action-grid > *.primary {
border-color: #1769e8;
background: linear-gradient(135deg, #1769e8, #2d7df0);
color: #fff;
}
.invoice-action-grid span {
font-size: 18px;
}
.invoice-action-grid b {
font-size: 11px;
}
.invoice-secondary-actions {
margin-top: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.invoice-secondary-actions a {
min-height: 44px;
padding: 0 12px;
border-radius: 13px;
display: grid;
place-items: center;
background: #fff0f1;
color: #bf3b48;
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.invoice-secondary-actions .next-bill {
background: linear-gradient(135deg, #5a4ef2, #7258ff);
color: #fff;
}
/* Keep the excellent mobile app UI, but do not trap desktop/tablet in a 460px phone shell. */
@media (min-width: 768px) {
.app-shell {
width: min(100%, 1180px);
max-width: 1180px;
min-height: 100vh;
}
.main-content {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.topbar,
.compact-topbar {
padding-left: 24px;
padding-right: 24px;
}
.mobile-dock {
width: min(calc(100% - 40px), 680px);
}
.menu-cards,
.settings-page,
.team-page,
.emi-kyc-form,
.code-studio,
.barcode-studio-v69 {
max-width: 820px;
margin-inline: auto;
}
body:has(#billingConfig) .main-content {
max-width: 900px;
}
.invoice-viewer-shell,
.invoice-action-grid,
.invoice-secondary-actions {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.invoice-viewport {
padding: 24px;
}
}
@media (min-width: 1100px) {
.app-shell {
width: min(100%, 1380px);
max-width: 1380px;
}
.main-content {
max-width: 1280px;
}
.dashboard-grid,
.stat-grid {
gap: 14px;
}
.invoice-viewer-shell {
padding: 18px;
}
}
@media (max-width: 430px) {
.invoice-viewer-shell {
padding: 8px;
border-radius: 18px;
}
.invoice-viewport {
padding: 8px;
}
.invoice-action-grid {
grid-template-columns: repeat(2, 1fr);
}
}