/* ============================================================
   NexPOS — মূল স্টাইল (সব CSS এই এক ফাইলেই; কোনো বাইরের ফন্ট/CDN/ছবি নেই)
   ডিজাইন ভাষা: গভীর সবুজ ব্র্যান্ড, নরম ছায়া, গোলাকার কার্ড,
   পরিষ্কার ধাপক্রম (spacing scale) — ডেস্কটপ ও মোবাইল দুটোতেই।
   ============================================================ */
:root{
    --green:#0e9f6e; --green-dark:#0b7a55; --green-deep:#06382a; --green-mid:#0b4a36;
    --ink:#1f2937; --muted:#6b7280; --line:#e3e9e6; --bg:#eef3f1; --card:#ffffff;
    --red:#dc2626; --red-dark:#b91c1c; --amber:#d97706; --blue:#2563eb;
    --radius:14px; --radius-lg:18px;
    --shadow-sm:0 1px 2px rgba(6,56,42,.05), 0 2px 8px rgba(6,56,42,.05);
    --shadow-md:0 4px 14px rgba(6,56,42,.09), 0 10px 30px rgba(6,56,42,.07);
    --shadow-lg:0 12px 40px rgba(3,40,28,.22);
    --ring:0 0 0 3px rgba(14,159,110,.20);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0; color:var(--ink);
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(14,159,110,.07), transparent 60%),
        var(--bg);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali","Hind Siliguri",sans-serif;
    font-size:15px; line-height:1.55;
}
a{color:var(--green-dark); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3}
::selection{background:#a7f3d0}
.muted{color:var(--muted)}

/* ---------- লেআউট / শেল ---------- */
.layout{display:flex; min-height:100vh}
.sidebar{
    width:236px; flex:0 0 236px; color:#d9f5e8;
    background:linear-gradient(178deg, var(--green-mid) 0%, var(--green-deep) 78%);
    padding:20px 14px 24px; position:sticky; top:0; height:100vh; overflow:auto;
    box-shadow:2px 0 18px rgba(3,40,28,.18);
}
.sidebar .brand{
    font-size:19px; font-weight:700; color:#fff; line-height:1.35;
    padding:2px 10px 16px; margin-bottom:10px; word-break:break-word;
    border-bottom:1px solid rgba(255,255,255,.16);
}
.sidebar .brand::after{
    content:"NexPOS · দোকানের হিসাব"; display:block; margin-top:3px;
    font-size:11.5px; font-weight:400; letter-spacing:.4px; color:#9fd8c0;
}
.sidenav a{
    display:flex; align-items:center; gap:6px;
    color:#d9f5e8; padding:10px 12px; border-radius:10px; margin:3px 0; font-size:15px;
    border-left:3px solid transparent; transition:background .15s ease, transform .15s ease;
}
.sidenav a:hover{background:rgba(255,255,255,.10); text-decoration:none; transform:translateX(2px)}
.sidenav a.active{
    background:linear-gradient(90deg, var(--green), #12b981); color:#fff; font-weight:600;
    border-left-color:#bbf7d0; box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.main{flex:1; min-width:0; padding:20px 24px 32px}
.topbar{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    position:sticky; top:12px; z-index:30;
    background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
    padding:9px 14px; margin-bottom:14px;
}
.topbar .who{color:var(--muted); font-size:14px; font-weight:500}
.page-title{
    font-size:23px; font-weight:700; margin:4px 0 18px; color:#0d2f23;
}
.page-title::after{
    content:""; display:block; width:52px; height:4px; border-radius:99px;
    background:linear-gradient(90deg, var(--green), #6ee7b7); margin-top:7px;
}
.foot{margin-top:30px; color:var(--muted); font-size:13px; text-align:center}

/* ---------- মোবাইল শেল: সাইডবার → ওপরের বার + স্ক্রলযোগ্য ন্যাভ ---------- */
@media(max-width:900px){
    .layout{display:block}
    .sidebar{
        position:static; width:auto; height:auto; flex:none;
        padding:12px 12px 10px; box-shadow:0 2px 14px rgba(3,40,28,.20);
    }
    .sidebar .brand{padding:0 4px 10px; margin-bottom:8px; font-size:17px}
    .sidenav{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
    .sidenav a{flex:0 0 auto; white-space:nowrap; margin:0; padding:8px 12px; border-left:none; border-bottom:3px solid transparent}
    .sidenav a:hover{transform:none}
    .sidenav a.active{border-bottom-color:#bbf7d0}
    .main{padding:14px 12px 26px}
    .topbar{top:8px}
    .page-title{font-size:20px}
}

/* ---------- কার্ড/প্যানেল/গ্রিড ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; margin-bottom:20px}
.card{
    background:var(--card); border:1px solid var(--line); border-top:4px solid var(--green);
    border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm);
}
.cards .card:nth-child(2){border-top-color:#0d9488}
.cards .card:nth-child(3){border-top-color:#0284c7}
.cards .card:nth-child(4){border-top-color:var(--amber)}
.cards .card:nth-child(5){border-top-color:var(--red)}
.card .label{color:var(--muted); font-size:13px; font-weight:500}
.card .value{font-size:25px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.card .value.red{color:var(--red)} .card .value.green{color:var(--green-dark)} .card .value.amber{color:var(--amber)}
.panel{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:20px; margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.panel h2{margin:0 0 14px; font-size:17px; font-weight:700; color:#0d2f23}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media(max-width:900px){ .two-col{grid-template-columns:1fr} }

/* ---------- টেবিল ---------- */
table{width:100%; border-collapse:collapse; background:var(--card)}
th,td{border-bottom:1px solid var(--line); padding:11px 12px; text-align:left; vertical-align:top}
th{
    background:#f2f7f4; font-size:12.5px; font-weight:600; letter-spacing:.3px;
    color:#4b5563; white-space:nowrap;
}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#f4fbf7}
tr:last-child td{border-bottom:none}
.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.table-wrap{
    overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--card); box-shadow:var(--shadow-sm);
}
.table-wrap table{border:none}
.panel .table-wrap, .panel table{box-shadow:none}
.low{color:var(--red); font-weight:700}
.due{color:var(--red); font-weight:600}
.ok{color:var(--green-dark); font-weight:600}
.badge{
    display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; line-height:1.5;
}
.badge.red{background:#fef2f2; color:var(--red-dark); border:1px solid #fecaca}
.badge.green{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.badge.amber{background:#fffbeb; color:#92400e; border:1px solid #fde68a}

/* ---------- ফর্ম/বোতাম ---------- */
label{display:block; font-size:13px; font-weight:500; color:#4b5563; margin:12px 0 5px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=tel],
select,textarea{
    width:100%; padding:10px 12px; border:1px solid #ccd6d1; border-radius:10px;
    font:inherit; background:#fcfefd; color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{color:#9ca3af}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green); box-shadow:var(--ring); background:#fff}
.btn{
    display:inline-block; border:none; cursor:pointer; font:inherit; font-weight:600; text-align:center;
    padding:10px 18px; border-radius:10px; color:#fff;
    background:linear-gradient(180deg, #12b981, var(--green-dark));
    box-shadow:0 2px 6px rgba(11,122,85,.28);
    transition:filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover{filter:brightness(1.06); text-decoration:none; box-shadow:0 4px 12px rgba(11,122,85,.30)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.secondary{background:#eef3f1; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn.secondary:hover{background:#e2eae7; filter:none}
.btn.danger{background:linear-gradient(180deg, #ef4444, var(--red-dark)); box-shadow:0 2px 6px rgba(185,28,28,.25)}
.btn.danger:hover{filter:brightness(1.06)}
.btn.small{padding:6px 12px; font-size:13px; border-radius:8px}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}
.inline-form{display:inline}
.checks{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.checks label{
    display:inline-flex; align-items:center; gap:7px; margin:0; padding:7px 12px;
    background:#f2f7f4; border:1px solid var(--line); border-radius:99px;
    color:var(--ink); font-size:14px; font-weight:500; cursor:pointer;
}
.checks label:hover{border-color:var(--green)}
.checks input{width:auto; accent-color:var(--green)}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px}
.toolbar .grow{flex:1; min-width:180px}
.toolbar label{margin-top:0}
details summary{font-weight:600}
details summary:hover{color:var(--green-dark)}

/* কর্মচারী কার্ড (staff.php) */
.staff-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:16px;
    margin-bottom:14px; background:#fcfefd; box-shadow:var(--shadow-sm);
}

/* ---------- অ্যালার্ট ---------- */
.alert{
    border-radius:12px; padding:12px 15px; margin-bottom:16px;
    border:1px solid; border-left-width:5px; font-weight:500; box-shadow:var(--shadow-sm);
}
.alert.success{background:#ecfdf5; border-color:#a7f3d0; color:#065f46}
.alert.error{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.alert.info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af}

/* ---------- লগইন/রেজিস্ট্রেশন (অথ পেজ) ---------- */
.auth-wrap{
    min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:28px 14px;
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(255,255,255,.14), transparent 55%),
        radial-gradient(800px 420px at 90% 100%, rgba(110,231,183,.16), transparent 55%),
        linear-gradient(150deg, var(--green-mid) 0%, var(--green-deep) 70%);
}
.auth-card{
    background:#fff; border-radius:20px; padding:30px 28px 26px; width:100%; max-width:430px;
    box-shadow:var(--shadow-lg); border-top:5px solid var(--green);
}
.auth-card h1{margin:0 0 5px; font-size:24px; font-weight:700; text-align:center; color:#0d2f23}
.auth-card .sub{color:var(--muted); text-align:center; margin:0 0 10px; font-size:14px}
.auth-card .alt{text-align:center; margin:16px 0 0; color:var(--muted); font-size:14px}
.auth-card .alt a{font-weight:600}
.auth-card label{margin-top:14px}
.auth-card .btn.block{padding:12px 18px; font-size:16px}
.auth-card small{display:block; margin-top:5px}
@media(max-width:480px){ .auth-card{padding:24px 18px 20px} }

/* ---------- POS (দ্রুত বেচা) ---------- */
.pos-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start}
.pos-grid > form.panel{
    position:sticky; top:78px; border-top:4px solid var(--green);
    background:linear-gradient(180deg, #fbfefc, #fff);
}
@media(max-width:980px){
    .pos-grid{grid-template-columns:1fr}
    .pos-grid > form.panel{position:static}
}
#pos-search{padding:13px 14px; font-size:16px; border-radius:12px; box-shadow:var(--shadow-sm)}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:11px; margin-top:14px}
.tile{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 12px;
    cursor:pointer; text-align:left; font:inherit; min-height:86px;
    display:flex; flex-direction:column; gap:2px;
    box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tile:hover{border-color:var(--green); box-shadow:0 6px 16px rgba(14,159,110,.18); transform:translateY(-1px)}
.tile:active{transform:scale(.98)}
.tile .tname{font-weight:600; font-size:15px; line-height:1.35}
.tile .tprice{color:var(--green-dark); font-weight:700; font-size:17px; margin-top:auto}
.tile .tstock{color:var(--muted); font-size:12px}
.tile.out{opacity:.48; background:#f8faf9}
.cart-table input{padding:7px 8px}
.cart-table .qty{width:76px} .cart-table .price{width:104px}
.pos-total{font-size:18px; font-weight:700; text-align:right; margin-top:8px}
.pos-row{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; color:var(--ink)}
.pos-row span:first-child{color:var(--muted)}
.pos-row strong{font-variant-numeric:tabular-nums}
#total-view{font-size:21px; color:#0d2f23}
.quick-btns{display:flex; gap:10px; margin-top:14px}
.quick-btns .btn{flex:1; padding:12px 10px; font-size:15px}

/* POS দুই-ধাপ ধারা (ক্যাটালগ → হিসাব) — শুধু NexPOS অ্যাপে (.app-mode থাকলেই);
   ওয়েবে এই নিয়মের কোনোটাই প্রযোজ্য নয় — POS সেখানে হুবহু আগের লেআউটে থাকে */
.app-mode #pos-step-bar{display:none}
.app-mode .pos-back{display:none}
.app-mode .tile .tbadge{display:none}
@media screen and (max-width:980px){
    .app-mode .pos-step{display:none}
    .app-mode .pos-step.pos-step-active{display:block}
    .app-mode .tile{position:relative}
    .app-mode .tile .timg{height:96px}
    .app-mode .tile .tbadge.show{
        display:inline-flex; position:absolute; top:8px; right:8px; z-index:2;
        background:var(--green-dark); color:#fff; font-weight:700; font-size:13px; line-height:1.4;
        padding:2px 9px; border-radius:99px; box-shadow:var(--shadow-sm);
    }
    .app-mode .pos-back{display:inline-block; margin-bottom:12px}
    .app-mode #pos-step-catalog{padding-bottom:82px}
    .app-mode #pos-step-bar.on{
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
        align-items:center; justify-content:space-between; gap:12px;
        background:#fff; border-top:1px solid var(--line);
        box-shadow:0 -4px 16px rgba(6,56,42,.14); padding:10px 14px;
    }
    .app-mode #pos-step-bar .btn{flex:0 0 auto; font-size:16px; padding:12px 22px}
    .app-mode .pos-bar-text{font-size:15px}
}

/* ---------- রসিদ (80mm প্রিন্ট) ---------- */
.receipt-body{
    background:
        radial-gradient(700px 320px at 50% -60px, rgba(14,159,110,.12), transparent 60%),
        #e8edeb;
}
.receipt{
    width:80mm; max-width:100%; margin:14px auto 22px; background:#fff; padding:12px 11px 16px;
    font-size:13px; line-height:1.5; color:#000; border-radius:6px; box-shadow:var(--shadow-md);
}
.receipt h1{font-size:19px; text-align:center; margin:0}
.receipt .center{text-align:center}
.receipt .muted{color:#444}
.receipt table{font-size:13px; background:none}
.receipt th,.receipt td{border-bottom:1px dashed #999; padding:4px 3px; background:none; color:#000}
.receipt .tot{display:flex; justify-content:space-between; padding:2px 0}
.receipt .tot.grand{font-size:16px; font-weight:700; border-top:1px solid #000; margin-top:4px; padding-top:6px}
.receipt hr{border:none; border-top:1px dashed #000; margin:8px 0}

/* ---------- প্রিন্ট ---------- */
@media print{
    .no-print,.sidebar,.topbar,.btn{display:none !important}
    .layout{display:block}
    .main{padding:0}
    body{background:#fff}
    .receipt-body{background:#fff}
    .receipt{margin:0 auto; box-shadow:none; border-radius:0}
    .panel,.card,.table-wrap{border:none; box-shadow:none}
    .page-title::after{display:none}
}
@page{ margin:10mm }

@media (prefers-reduced-motion: reduce){
    *{transition:none !important}
}

/* ---------- সাবস্ক্রিপশন / প্যাকেজ (Phase 2) ---------- */
.sub-warn,.sub-expired{
    border-radius:12px; padding:11px 15px; margin-bottom:16px;
    border:1px solid; border-left-width:5px; font-weight:500; box-shadow:var(--shadow-sm);
}
.sub-warn{background:#fffbeb; border-color:#fde68a; color:#92400e}
.sub-warn a{color:#92400e; font-weight:700; text-decoration:underline}
.sub-expired{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.sub-expired a{color:#991b1b; font-weight:700; text-decoration:underline}
.plan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.plan-card{
    background:var(--card); border:1px solid var(--line); border-top:4px solid var(--green);
    border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm);
}
.plan-card .plan-name{font-size:17px; font-weight:700}
.plan-card .plan-price{font-size:24px; font-weight:800; color:var(--green-dark); margin:4px 0 2px}
.plan-buy{margin-top:12px}
.plan-buy summary{list-style:none; text-align:center; cursor:pointer}
.plan-buy summary::-webkit-details-marker{display:none}
.plan-buy label{display:block; margin:10px 0 4px; font-weight:600; font-size:14px}
.plan-buy input{width:100%}

/* ============================================================
   Phase 2 সম্পূর্ণ: ছবি/লোগো, নোটিফিকেশন, KOT, লেবেল
   (শুধু নতুন ক্লাস — আগের কোনো নিয়ম বদলানো হয়নি)
   ============================================================ */

/* পণ্যের ছবি ও লোগো */
.thumb{width:40px; height:40px; object-fit:cover; border-radius:8px; border:1px solid var(--line); vertical-align:middle}
.prod-thumb-lg{max-width:110px; max-height:110px; object-fit:contain; border-radius:10px; border:1px solid var(--line); background:#fff}
.tile .timg{width:100%; height:64px; object-fit:cover; border-radius:8px; margin-bottom:5px; border:1px solid var(--line)}
.brand-logo{height:30px; width:auto; max-width:64px; object-fit:contain; vertical-align:-8px; border-radius:6px; background:rgba(255,255,255,.92); padding:2px}
.receipt-logo{display:block; margin:0 auto 6px; max-height:15mm; max-width:60mm; object-fit:contain}

/* নোটিফিকেশন ঘণ্টা (টপবার) ও তালিকা */
.bell{position:relative; font-size:19px; line-height:1; padding:4px 2px}
.bell:hover{text-decoration:none; transform:scale(1.08)}
.bell-badge{
    position:absolute; top:-4px; right:-9px; min-width:18px; text-align:center;
    background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1.55;
    border-radius:99px; padding:0 4px; box-shadow:0 1px 4px rgba(185,28,28,.4);
}
.notif-list{display:flex; flex-direction:column}
.notif-item{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:11px 4px; border-bottom:1px solid var(--line);
}
.notif-item:last-child{border-bottom:none}
.notif-item.read{opacity:.55}
.notif-icon{font-size:20px}
.notif-text{flex:1; min-width:180px}

/* কিচেন কপি (KOT) */
.kot .kot-table{font-size:56px; font-weight:800; text-align:center; line-height:1.15; letter-spacing:1px}
.kot .kot-item{font-size:15px; font-weight:600}
.kot .kot-qty{font-size:20px; font-weight:800}

/* পণ্যের লেবেল */
.labels-sheet{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start}
.lbl{
    background:#fff; border:1px dashed #b6c4be; border-radius:3px; padding:2mm;
    overflow:hidden; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-start; text-align:center; color:#000;
    page-break-inside:avoid; break-inside:avoid;
}
.lbl-shop{font-size:8pt; color:#333}
.lbl-name{font-weight:700; font-size:10pt; line-height:1.25}
.lbl-price{font-weight:800; font-size:13pt; line-height:1.2}
.lbl-line{font-size:8pt; line-height:1.3}
.lbl-code{font-size:8pt; letter-spacing:1.5px}
.lbl .barcode{width:82%; max-width:40mm; margin-top:1mm}
.lbl .barcode svg{display:block; width:100%}
.sheet-a4{page:a4sheet}
@page a4sheet{size:A4; margin:8mm}
@media print{
    .labels-sheet{gap:0}
    .lbl{border:none}
}


/* ============================================================
   সফটওয়্যার অ্যাডমিন সুইট: স্টিকি ওভারভিউ স্ট্রিপ, টাইল গ্রিড,
   দোকানের বিস্তারিত সারি, নোটিশ প্যানেল
   (শুধু নতুন ক্লাস — আগের কোনো নিয়ম বদলানো হয়নি)
   ============================================================ */
.admin-strip{
    display:flex; flex-wrap:wrap; gap:5px 20px; align-items:center;
    position:sticky; top:8px; z-index:35;
    background:linear-gradient(90deg, var(--green-mid), var(--green-deep));
    color:#cdeede; border-radius:12px; padding:9px 16px; margin-bottom:14px;
    box-shadow:var(--shadow-md); font-size:14px;
}
.admin-strip:hover{text-decoration:none; color:#cdeede}
.admin-strip strong{color:#fff; font-size:15px; font-variant-numeric:tabular-nums}
.admin-strip .strip-alert{color:#fecaca; font-weight:700}
.admin-strip .strip-alert strong{color:#fca5a5}
.admin-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; margin-bottom:18px}
.admin-tile{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
    background:var(--card); border:1px solid var(--line); border-top:4px solid var(--green);
    border-radius:var(--radius); padding:24px 12px 19px; text-align:center;
    font-weight:600; font-size:15.5px; color:var(--ink); box-shadow:var(--shadow-sm);
    transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.admin-tile:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--green)}
.admin-tile .tile-ic{font-size:31px; line-height:1}
.admin-badge{
    position:absolute; top:8px; right:8px; min-width:22px; text-align:center;
    background:var(--red); color:#fff; font-size:12px; font-weight:700; line-height:1.5;
    border-radius:99px; padding:1px 6px; box-shadow:0 1px 4px rgba(185,28,28,.4);
}
.shop-more td{background:#fbfdfc; padding-top:6px}
.shop-tools{display:grid; grid-template-columns:1fr 1fr; gap:8px 26px; margin:10px 0 6px; text-align:left}
@media(max-width:900px){ .shop-tools{grid-template-columns:1fr} }
.shop-tools h3{margin:0 0 8px; font-size:14.5px; color:#0d2f23}
.shop-tools table th,.shop-tools table td{padding:7px 9px}

/* দোকানের ড্যাশবোর্ডে অ্যাডমিন নোটিশ */
.notice-panel{border-left:5px solid var(--amber); background:#fffdf5}
.notice-item{padding:9px 0; border-bottom:1px dashed var(--line)}
.notice-item:last-child{border-bottom:none; padding-bottom:2px}
.notice-item > div{margin:2px 0}

/* ============================================================
   রেসপন্সিভ ওভারহল + ভাষা সুইচ (বাংলা/EN) — ২০২৬-১১-০৫
   মোবাইলে সব অপশন পৌঁছানো, ট্যাপ-বান্ধব আকার, iOS জুম রোধ।
   সব width-নিয়ম `screen and` দিয়ে ঘেরা — প্রিন্ট আউটপুটে
   কোনো প্রভাব নেই (@media print নিয়ম আগের মতোই)।
   ============================================================ */

/* ভাষা সুইচার (টপবার / অথ কার্ড / অ্যাডমিন টপবার) */
.lang-switch{white-space:nowrap; font-size:13.5px; color:var(--muted)}
.lang-switch a{font-weight:600}
.lang-switch strong{color:var(--ink)}
.auth-lang{text-align:center; margin:0 0 12px; font-size:13.5px}

/* ব্র্যান্ড ক্যাপশন: ইংরেজি মোডে ইংরেজি লেখা */
html[lang="en"] .sidebar .brand::after{content:"NexPOS · Shop Accounts"}

/* কনটেন্ট ছবি কখনো কনটেইনারের বাইরে যাবে না (প্রিন্ট/mm সাইজের ছবি বাদে) */
.panel img, .tile img{max-width:100%; height:auto}
.panel img.prod-thumb-lg{max-width:110px; max-height:110px}
.panel img.thumb{width:40px; height:40px}

/* লম্বা লেখা ভেঙে যাবে, টেবিল/কার্ড উপচে পড়বে না */
.table-wrap td{overflow-wrap:break-word}
.staff-card, .notice-item, .notif-text{overflow-wrap:break-word}
details > summary{padding-top:6px; padding-bottom:6px}

@media screen and (max-width:900px){
    /* ফর্ম কন্ট্রোল 16px — iPhone-এ ফোকাস জুম বন্ধ */
    input, select, textarea{font-size:16px}
    .panel{padding:14px}
    /* মোবাইল ন্যাভ: সব অপশন স্ক্রলে পৌঁছানো যায় — ডানদিকে ফেড ইঙ্গিত,
       স্ক্রলবার লুকানো, ট্যাপ এলাকা বড় */
    .sidebar{padding:10px 10px 8px}
    .sidebar .brand{padding:0 4px 8px; margin-bottom:6px}
    .sidenav{
        scrollbar-width:none; scroll-snap-type:x proximity;
        -webkit-mask-image:linear-gradient(to right, #000 90%, rgba(0,0,0,.25));
        mask-image:linear-gradient(to right, #000 90%, rgba(0,0,0,.25));
    }
    .sidenav::-webkit-scrollbar{display:none}
    .sidenav a{min-height:44px; display:flex; align-items:center; scroll-snap-align:start; padding:8px 13px}
    /* টপবার: নাম ছোট হলে কেটে যাবে, ঘণ্টা+লগআউট সবসময় দেখা যাবে */
    .topbar .who{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .topbar > span:last-child{flex:0 0 auto; display:flex; align-items:center; gap:10px}
}

@media screen and (max-width:560px){
    /* ড্যাশবোর্ড কার্ড: ২ কলাম, টাকার অঙ্ক ছোট ফন্টে — উপচে পড়বে না */
    .cards{grid-template-columns:1fr 1fr; gap:10px}
    .card{padding:12px 12px 10px}
    .card .value{font-size:20px}
    /* ফিল্টার বার: প্রতিটি অংশ নিজের লাইনে */
    .toolbar > *{flex:1 1 100%}
    /* POS: কার্টের ইনপুট ছোট, পণ্যের নাম ভাঙবে; টাইল ২ কলাম বজায় */
    .tiles{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
    .cart-table input{padding:6px 5px}
    .cart-table .qty{width:60px}
    .cart-table .price{width:84px}
    .cart-table td{overflow-wrap:break-word}
    /* প্যাকেজ কার্ড এক কলামে */
    .plan-grid{grid-template-columns:1fr}
    /* অ্যাডমিন টাইল: ২ কলাম, ছোট আইকন */
    .admin-grid{grid-template-columns:1fr 1fr; gap:10px}
    .admin-tile{padding:16px 8px 13px; font-size:14px}
    .admin-tile .tile-ic{font-size:26px}
    .admin-strip{font-size:13px; gap:4px 14px; padding:8px 12px}
    /* রসিদ/KOT পেজের ওপরের বোতামের সারি ভেঙে যাবে */
    .no-print{flex-wrap:wrap}
    .receipt{max-width:100%}
}

@media screen and (max-width:380px){
    /* খুব ছোট ফোনে কার্ড এক কলামে — টাকার অঙ্ক কখনো কাটবে না */
    .cards{grid-template-columns:1fr}
}

/* ---------- Features 2: রিমোট ব্যানার, স্ক্যান, লাইভ চ্যাট ---------- */
.remote-banner{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    background:#b91c1c; color:#fff; border-radius:10px; padding:10px 14px; margin-bottom:14px;
    font-weight:600; box-shadow:0 4px 14px rgba(185,28,28,.35);
}
.remote-banner .btn{background:#fff; color:#b91c1c; box-shadow:none}
.scan-row{display:flex; gap:8px; align-items:stretch}
.scan-row input{flex:1}
.tile .twarr{color:#0b7a55; font-size:12px; font-weight:600}
.tile.flash{border-color:var(--green); background:#ecfdf5; box-shadow:0 0 0 3px rgba(14,159,110,.35)}
.scan-overlay{
    position:fixed; inset:0; z-index:200; background:rgba(6,30,22,.82);
    display:flex; align-items:center; justify-content:center; padding:16px;
}
.scan-box{background:#fff; border-radius:14px; padding:16px; width:min(440px,100%); box-shadow:0 18px 50px rgba(0,0,0,.4)}
.scan-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.scan-video{width:100%; border-radius:10px; background:#000; aspect-ratio:4/3; object-fit:cover}
.scan-hint{color:#6b7280; font-size:13px; margin:10px 0 0}
@media screen{
    .live-chat-btn{
        position:fixed; right:16px; bottom:18px; z-index:120;
        display:inline-flex; align-items:center; gap:6px;
        background:#22c55e; color:#fff; font-weight:700; font-size:14.5px;
        padding:11px 18px; border-radius:999px; text-decoration:none;
        box-shadow:0 8px 22px rgba(22,163,74,.45);
    }
    .live-chat-btn:hover{background:#16a34a; text-decoration:none}
}
/* ── Module 11: রিমোট প্রিন্ট প্যানেল (শুধু স্ক্রিনে; প্যানেলটি
   .no-print মোড়কে থাকে বলে কাগজে কখনো আসে না) ── */
@media screen{
    .rp-panel{
        background:#fff; border:1px solid #e5e7eb; border-radius:10px;
        padding:10px 12px; margin-top:8px; text-align:left;
    }
    .rp-panel h4{margin:2px 0 8px; font-size:14px}
    .rp-none{color:#6b7280; font-size:13px; margin:4px 0}
    .rp-device{
        display:flex; align-items:center; gap:8px;
        padding:7px 0; border-bottom:1px solid #f1f5f9;
    }
    .rp-device:last-child{border-bottom:0}
    .rp-info{flex:1; min-width:0}
    .rp-info small{display:block; color:#6b7280; font-size:12px; line-height:1.5}
    .rp-history{margin-top:10px; border-top:1px dashed #e5e7eb; padding-top:8px}
    .rp-hrow{
        display:flex; align-items:center; gap:6px; flex-wrap:wrap;
        padding:4px 0; font-size:12.5px; color:#374151;
    }
}

/* ===== লগইন/রেজিস্ট্রেশন: মার্কেটিং শোকেস (auth-promo) ===== */
.auth-layout{display:flex; gap:24px; width:100%; max-width:1120px; align-items:flex-start}
.auth-layout .auth-card{flex:0 0 auto; order:2}
.auth-ticker{display:none}
.auth-showcase{flex:1 1 auto; order:1; min-width:0; position:relative; overflow:hidden;
    border-radius:20px; padding:22px; color:#fff;
    background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);
    box-shadow:0 18px 44px rgba(0,0,0,.22)}
.auth-showcase::before{content:''; position:absolute; inset:-40%;
    background:radial-gradient(circle at 25% 30%, rgba(255,255,255,.20), transparent 42%),
               radial-gradient(circle at 78% 82%, rgba(245,158,11,.20), transparent 46%);
    animation:showDrift 16s ease-in-out infinite alternate; pointer-events:none}
@keyframes showDrift{from{transform:translate(-2.5%,-1.5%)}to{transform:translate(2.5%,2%)}}
.auth-showcase > *{position:relative}
.show-offer{background:linear-gradient(120deg,#f59e0b,#f97316); border-radius:14px;
    padding:14px 16px; animation:offerGlow 2.8s ease-in-out infinite}
@keyframes offerGlow{0%,100%{box-shadow:0 6px 20px rgba(249,115,22,.30)}50%{box-shadow:0 8px 32px rgba(249,115,22,.62)}}
.show-offer-badge{display:inline-block; font-weight:800; font-size:19px; line-height:1.3;
    background:rgba(0,0,0,.20); border-radius:999px; padding:3px 14px;
    animation:offerPulse 2.8s ease-in-out infinite}
@keyframes offerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.show-offer-text{margin:9px 0 0; font-size:15px; line-height:1.55; font-weight:600}
.show-slider{position:relative; margin-top:16px; border-radius:14px; overflow:hidden;
    aspect-ratio:16/9; background:#0b3d2e; box-shadow:0 10px 26px rgba(0,0,0,.25)}
.show-slide{position:absolute; inset:0; margin:0; opacity:0; animation:slideFade 15s linear infinite}
.show-slide-2{animation-delay:5s}
.show-slide-3{animation-delay:10s}
@keyframes slideFade{0%{opacity:0}4%{opacity:1}31%{opacity:1}37%{opacity:0}100%{opacity:0}}
.show-slide img{width:100%; height:100%; object-fit:cover; display:block;
    animation:kenBurns 15s linear infinite}
.show-slide-2 img{animation-delay:5s}
.show-slide-3 img{animation-delay:10s}
@keyframes kenBurns{0%{transform:scale(1)}33%{transform:scale(1.09)}100%{transform:scale(1.09)}}
.show-slide figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px;
    font-size:15px; font-weight:700; line-height:1.45; color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.68)); text-shadow:0 1px 4px rgba(0,0,0,.5)}
.show-dots{position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:2}
.show-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45);
    animation:dotPulse 15s linear infinite}
.show-dots span:nth-child(2){animation-delay:5s}
.show-dots span:nth-child(3){animation-delay:10s}
@keyframes dotPulse{0%,31%{background:#fff}37%,100%{background:rgba(255,255,255,.45)}}
.show-slider:hover .show-slide, .show-slider:hover .show-slide img,
.show-slider:hover .show-dots span{animation-play-state:paused}
.show-plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin-top:16px}
.show-plan{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26);
    border-radius:12px; padding:12px 10px; text-align:center}
.show-plan-name{font-size:13px; font-weight:700; opacity:.92}
.show-plan-price{font-size:23px; font-weight:800; margin:3px 0 1px}
.show-plan-dur{font-size:12px; opacity:.85}
.show-benefits-title{margin:18px 0 10px; font-size:17px; font-weight:800}
.show-benefits{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px}
.show-tile{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
    border-radius:12px; padding:12px 13px; animation:tileUp .6s ease both;
    animation-delay:calc(var(--i,0)*70ms)}
@keyframes tileUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
.show-tile-icon{font-size:25px; line-height:1.2}
.show-tile-name{font-weight:800; font-size:14.5px; margin-top:5px}
.show-tile-text{font-size:12.5px; line-height:1.5; opacity:.88; margin-top:2px}
.show-downloads{margin-top:4px}
.show-dl-row{display:flex; gap:10px; flex-wrap:wrap}
.show-dl-btn{flex:1 1 180px; text-align:center; font-size:15.5px; padding:13px 16px}
@media (max-width: 920px){
    .auth-layout{flex-direction:column; max-width:520px; gap:16px}
    .auth-layout .auth-card{width:100%; max-width:none; order:0}
    .auth-ticker{display:flex; align-items:center; gap:9px; width:100%;
        background:linear-gradient(120deg,#f59e0b,#f97316); color:#fff;
        border-radius:12px; padding:9px 13px; font-size:13.5px; line-height:1.45;
        box-shadow:0 8px 20px rgba(0,0,0,.20); animation:tileUp .5s ease both}
    .auth-ticker-badge{font-weight:800; white-space:nowrap}
    .auth-ticker-text{font-weight:600}
    .auth-showcase{width:100%; padding:18px; order:0}
    .show-benefits{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (prefers-reduced-motion: reduce){
    .auth-showcase::before, .show-offer, .show-offer-badge, .auth-ticker,
    .show-slide, .show-slide img, .show-dots span, .show-tile{animation:none !important}
    .show-slide{opacity:0}
    .show-slide-1{opacity:1}
}

/* ============================================================
   A4 ইনভয়েস রসিদ — ২০টি টেমপ্লেট (শুধু নতুন; থার্মাল রসিদের
   কোনো নিয়ম বদলানো হয়নি। প্রতিটি টেমপ্লেটে একই ডাটা, শুধু সাজ)
   ============================================================ */
.receipt-body.a4-mode{--rcptw:210mm}
.a4-invoice{
    --a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#d9deda;
    width:210mm; max-width:100%; margin:14px auto 22px;
    background:#fff; color:#16181d; padding:30px 34px 26px;
    font-size:14px; line-height:1.55; border-radius:6px; box-shadow:var(--shadow-md);
}
.a4-invoice .a4-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.a4-invoice .a4-brand{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0}
.a4-invoice .a4-logo{max-height:18mm; max-width:55mm; object-fit:contain}
.a4-invoice .a4-shopname{font-size:26px; font-weight:800; line-height:1.25}
.a4-invoice .a4-shopmeta{color:#4b5563; font-size:13px}
.a4-invoice .a4-docbox{text-align:center}
.a4-invoice .a4-doctitle{font-size:21px; font-weight:800; letter-spacing:2px; color:var(--a4-accent)}
.a4-invoice .a4-docline{font-size:13.5px}
.a4-invoice .a4-meta{display:flex; justify-content:space-between; gap:24px; margin:20px 0 14px}
.a4-invoice .a4-party{min-width:0}
.a4-invoice .a4-party-r{text-align:right}
.a4-invoice .a4-partytitle{font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--a4-accent); margin-bottom:2px}
.a4-invoice .a4-partyname{font-weight:700; font-size:15px}
.a4-invoice .a4-partysub{color:#4b5563; font-size:13px}
.a4-invoice .a4-items{width:100%; border-collapse:collapse; font-size:13.5px; background:none}
.a4-invoice .a4-items th,.a4-invoice .a4-items td{padding:7px 8px; background:none; color:inherit; text-align:left; vertical-align:top; border:none; border-bottom:1px solid var(--a4-line)}
.a4-invoice .a4-items .a4-sl{width:38px; text-align:center}
.a4-invoice .a4-items .a4-num{text-align:right; white-space:nowrap}
.a4-invoice .a4-items thead th{font-size:12.5px; border-bottom:2px solid var(--a4-accent)}
.a4-invoice .a4-warranty{color:#4b5563}
.a4-invoice .a4-lower{display:flex; justify-content:space-between; gap:28px; margin-top:16px}
.a4-invoice .a4-side{flex:1; min-width:0}
.a4-invoice .a4-note{font-size:13px}
.a4-invoice .a4-totals{width:320px; max-width:100%; flex:0 0 auto}
.a4-invoice .a4-tot{display:flex; justify-content:space-between; gap:16px; padding:3px 0}
.a4-invoice .a4-tot.grand{font-size:17px; font-weight:800; border-top:2px solid var(--a4-accent); margin-top:6px; padding-top:8px}
.a4-invoice .a4-foot{margin-top:24px; padding-top:12px; border-top:1px dashed #b6bdb9; text-align:center; color:#374151}

/* ---- টেমপ্লেটের রঙ (ইনভয়েস ও সেটিংসের মিনি-প্রিভিউ দুটোতেই) ---- */
.a4-invoice[data-template="1"],.a4-mini[data-template="1"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#cfe0d8}
.a4-invoice[data-template="2"],.a4-mini[data-template="2"]{--a4-accent:#374151; --a4-soft:#f3f4f6; --a4-line:#e5e7eb}
.a4-invoice[data-template="3"],.a4-mini[data-template="3"]{--a4-accent:#1d4ed8; --a4-soft:#e8effd; --a4-line:#c9d8f6}
.a4-invoice[data-template="4"],.a4-mini[data-template="4"]{--a4-accent:#0e9f6e; --a4-soft:#e7f6ef; --a4-line:#dde5e1}
.a4-invoice[data-template="5"],.a4-mini[data-template="5"]{--a4-accent:#0f766e; --a4-soft:#e6f4f2; --a4-line:#cfe7e3}
.a4-invoice[data-template="6"],.a4-mini[data-template="6"]{--a4-accent:#7c3aed; --a4-soft:#f1eafd; --a4-line:#ddd0fa}
.a4-invoice[data-template="7"],.a4-mini[data-template="7"]{--a4-accent:#ea580c; --a4-soft:#fdeee2; --a4-line:#f8dcc4}
.a4-invoice[data-template="8"],.a4-mini[data-template="8"]{--a4-accent:#475569; --a4-soft:#eef1f4; --a4-line:#d3dae1}
.a4-invoice[data-template="9"],.a4-mini[data-template="9"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#dde5e1}
.a4-invoice[data-template="10"],.a4-mini[data-template="10"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#dde5e1}
.a4-invoice[data-template="11"],.a4-mini[data-template="11"]{--a4-accent:#4b5563; --a4-soft:#f3f4f6; --a4-line:#d4d8dc}
.a4-invoice[data-template="12"],.a4-mini[data-template="12"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#e3eae7}
.a4-invoice[data-template="13"],.a4-mini[data-template="13"]{--a4-accent:#0891b2; --a4-soft:#e4f6fa; --a4-line:#c8e9f1}
.a4-invoice[data-template="14"],.a4-mini[data-template="14"]{--a4-accent:#e11d63; --a4-soft:#fdeef3; --a4-line:#f6cfdd}
.a4-invoice[data-template="15"],.a4-mini[data-template="15"]{--a4-accent:#a8760a; --a4-soft:#faf3e0; --a4-line:#e8dbb8}
.a4-invoice[data-template="16"],.a4-mini[data-template="16"]{--a4-accent:#33608c; --a4-soft:#eaf1f7; --a4-line:#cfdfec}
.a4-invoice[data-template="17"],.a4-mini[data-template="17"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#eef2f0}
.a4-invoice[data-template="18"],.a4-mini[data-template="18"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#dde5e1}
.a4-invoice[data-template="19"],.a4-mini[data-template="19"]{--a4-accent:#0b7a55; --a4-soft:#e7f6ef; --a4-line:#dde5e1}
.a4-invoice[data-template="20"],.a4-mini[data-template="20"]{--a4-accent:#111111; --a4-soft:#f4f4f4; --a4-line:#9ca3af}

.a4-invoice{print-color-adjust:exact; -webkit-print-color-adjust:exact}

/* ---- হেডার সাজ ---- */
/* বাম-সারি (৩, ৪, ৭, ১৭) */
.a4-invoice:is([data-template="3"],[data-template="4"],[data-template="7"],[data-template="17"]) .a4-head{align-items:flex-start; text-align:left}
.a4-invoice:is([data-template="3"],[data-template="4"],[data-template="7"],[data-template="17"]) .a4-brand{flex-direction:row; align-items:center; gap:14px}
.a4-invoice:is([data-template="3"],[data-template="4"],[data-template="7"],[data-template="17"]) .a4-docbox{text-align:left}
/* স্প্লিট — লোগো/তথ্য বামে, ডক বক্স ডানে (৫, ১৩, ১৬) */
.a4-invoice:is([data-template="5"],[data-template="13"],[data-template="16"]) .a4-head{flex-direction:row; justify-content:space-between; align-items:flex-start; text-align:left}
.a4-invoice:is([data-template="5"],[data-template="13"],[data-template="16"]) .a4-brand{flex-direction:row; align-items:center; gap:14px}
.a4-invoice:is([data-template="5"],[data-template="13"],[data-template="16"]) .a4-docbox{text-align:right; flex:0 0 auto}
/* হেডার ব্যান্ড (৯ গাঢ়, ১৯ গ্রেডিয়েন্ট) */
.a4-invoice:is([data-template="9"],[data-template="19"]) .a4-head{
    margin:-30px -34px 4px; padding:26px 34px 20px; color:#fff;
}
.a4-invoice[data-template="9"] .a4-head{background:#06382a}
.a4-invoice[data-template="19"] .a4-head{background:linear-gradient(120deg,#0b7a55,#06382a)}
.a4-invoice:is([data-template="9"],[data-template="19"]) .a4-shopmeta{color:#cfe8da}
.a4-invoice:is([data-template="9"],[data-template="19"]) .a4-doctitle{color:#7ee2b8}
/* ১৫: হেডারের নিচে দ্বৈত রেখা */
.a4-invoice[data-template="15"] .a4-head{border-bottom:3px double var(--a4-accent); padding-bottom:14px}

/* ---- মেটা ব্লক ---- */
.a4-invoice[data-template="16"] .a4-party{border:1px solid var(--a4-line); border-radius:8px; padding:10px 12px; flex:1}
.a4-invoice[data-template="2"] .a4-meta{margin:28px 0 18px}

/* ---- টেবিলের সাজ ---- */
/* পূর্ণ বর্ডার (১, ৩, ৮, ১১, ১৫, ২০) */
.a4-invoice:is([data-template="1"],[data-template="3"],[data-template="8"],[data-template="11"],[data-template="15"],[data-template="20"]) .a4-items th,
.a4-invoice:is([data-template="1"],[data-template="3"],[data-template="8"],[data-template="11"],[data-template="15"],[data-template="20"]) .a4-items td{border:1px solid var(--a4-line)}
.a4-invoice:is([data-template="1"],[data-template="3"],[data-template="8"],[data-template="11"],[data-template="15"],[data-template="20"]) .a4-items thead th{background:var(--a4-soft); border-bottom:1px solid var(--a4-line)}
/* স্ট্রাইপ (৬, ৭, ১০, ১৩, ১৯) */
.a4-invoice:is([data-template="6"],[data-template="7"],[data-template="10"],[data-template="13"],[data-template="19"]) .a4-items thead th{background:var(--a4-accent); color:#fff; border-bottom:none}
.a4-invoice:is([data-template="6"],[data-template="7"],[data-template="10"],[data-template="13"],[data-template="19"]) .a4-items tbody tr:nth-child(even) td{background:var(--a4-soft)}
/* বর্ডারহীন (১৭) */
.a4-invoice[data-template="17"] .a4-items th,.a4-invoice[data-template="17"] .a4-items td{border-bottom:none; padding-top:9px; padding-bottom:9px}
.a4-invoice[data-template="17"] .a4-items thead th{color:var(--a4-accent)}
/* মনো (২০): কালো হেডার সারি */
.a4-invoice[data-template="20"] .a4-items thead th{background:#111; color:#fff}
.a4-invoice[data-template="20"]{font-family:Georgia,'Times New Roman',serif}
.a4-invoice[data-template="20"] .a4-tot.grand{border-top:3px double #111}

/* ---- মোটের বাক্স ---- */
.a4-invoice:is([data-template="3"],[data-template="14"]) .a4-totals{border:1px solid var(--a4-line); border-radius:10px; padding:12px 14px; background:var(--a4-soft)}
.a4-invoice[data-template="14"] .a4-totals{border-radius:16px}
.a4-invoice:is([data-template="6"],[data-template="9"],[data-template="19"]) .a4-tot.grand{background:var(--a4-accent); color:#fff; border-top:none; border-radius:6px; padding:7px 9px}
/* ১৫: ফুটার বাক্স */
.a4-invoice[data-template="15"] .a4-foot{border:1px solid var(--a4-accent); border-radius:8px; padding:12px}
/* ১৮: গাঢ় নিচের ব্যান্ড (মোট + ফুটার) */
.a4-invoice[data-template="18"] .a4-lower{background:#0b3524; color:#e7f6ef; margin:22px -34px 0; padding:18px 34px 8px}
.a4-invoice[data-template="18"] .a4-tot.grand{border-top-color:#34d399}
.a4-invoice[data-template="18"] .a4-foot{background:#0b3524; color:#cfe8da; border-top:none; margin:0 -34px -26px; padding:2px 34px 22px}

/* ---- ঘনত্ব ---- */
.a4-invoice[data-template="11"]{font-size:12.5px; padding:22px 26px 20px}
.a4-invoice[data-template="11"] .a4-items th,.a4-invoice[data-template="11"] .a4-items td{padding:4px 6px}
.a4-invoice[data-template="11"] .a4-shopname{font-size:21px}
.a4-invoice[data-template="11"] .a4-doctitle{font-size:16px}
.a4-invoice[data-template="12"]{font-size:15.5px}
.a4-invoice[data-template="12"] .a4-items th,.a4-invoice[data-template="12"] .a4-items td{padding:11px 10px}
.a4-invoice[data-template="12"] .a4-shopname{font-size:31px}
.a4-invoice[data-template="2"] .a4-shopname{font-weight:600}
.a4-invoice[data-template="2"] .a4-doctitle{letter-spacing:4px}

/* ---- সেটিংস: টেমপ্লেট পিকার ও মিনি-প্রিভিউ ---- */
.a4-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin-top:8px}
.a4-card{display:block; border:1px solid var(--line); border-radius:10px; padding:9px; background:#fff; cursor:pointer; margin:0; font-weight:400}
.a4-card:hover{border-color:var(--green)}
.a4-card:has(input:checked){border-color:var(--green); box-shadow:var(--ring)}
.a4-card-top{display:flex; gap:6px; align-items:center; font-weight:600; font-size:13px; margin-bottom:7px}
.a4-mini{display:block; height:78px; border:1px solid #e2e8f0; border-radius:4px; padding:6px; overflow:hidden; background:#fff}
.a4-mini .m-band{display:none; height:10px; margin:-6px -6px 5px; background:var(--a4-accent)}
.a4-mini[data-template="9"] .m-band{display:block; background:#06382a}
.a4-mini[data-template="19"] .m-band{display:block; background:linear-gradient(120deg,#0b7a55,#06382a)}
.a4-mini .m-head{display:flex; gap:5px; align-items:center; margin-bottom:5px}
.a4-mini .m-logo{width:12px; height:12px; border-radius:3px; background:var(--a4-accent); flex:0 0 12px}
.a4-mini .m-lines{flex:1; min-width:0}
.a4-mini .m-line{display:block; height:4px; background:#dde5e1; border-radius:2px; margin-bottom:3px}
.a4-mini .m-line.w60{width:60%}
.a4-mini .m-line.w40{width:40%}
.a4-mini .m-row{display:block; height:6px; border-bottom:1px solid #e5eae8; margin-bottom:3px}
.a4-mini:is([data-template="6"],[data-template="7"],[data-template="10"],[data-template="13"],[data-template="19"]) .m-row.alt{background:var(--a4-soft)}
.a4-mini .m-tot{display:block; height:8px; margin-top:5px; background:var(--a4-soft); border-left:3px solid var(--a4-accent)}
.a4-mini[data-template="18"] .m-tot{background:#0b3524; border-left-color:#34d399}

@media print{
    .a4-invoice{margin:0 auto; box-shadow:none; border-radius:0; width:auto}
}

/* ---------- Roadmap 2: ড্যাশবোর্ড স্ট্যাট কার্ড, গ্লোবাল সার্চ, খালি অবস্থা ---------- */
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.stat-card{
    display:flex; flex-direction:column; gap:2px; text-decoration:none; color:#fff;
    border-radius:14px; padding:16px 18px 13px; box-shadow:0 6px 16px rgba(13,47,35,.16);
    transition:transform .12s ease, box-shadow .12s ease;
}
.stat-card:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(13,47,35,.22)}
.stat-card .sc-label{font-size:13.5px; font-weight:600; opacity:.92}
.stat-card .sc-value{font-size:27px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums}
.stat-card .sc-sub{font-size:12.5px; opacity:.85}
.stat-card.sc-green{background:linear-gradient(135deg,#059669,#10b981)}
.stat-card.sc-rose{background:linear-gradient(135deg,#e11d48,#fb7185)}
.stat-card.sc-amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.stat-card.sc-violet{background:linear-gradient(135deg,#6d28d9,#8b5cf6)}

.gsearch{position:relative; flex:1 1 auto; max-width:430px; min-width:130px}
.gsearch input{
    width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:99px;
    font-size:14px; background:#f8fafc; outline:none;
}
.gsearch input:focus{border-color:#0F6BDE; background:#fff; box-shadow:0 0 0 3px rgba(15,107,222,.15)}
.gs-results{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 14px 34px rgba(13,47,35,.20); overflow:hidden; max-height:70vh; overflow-y:auto;
}
.gs-group{padding:8px 14px 3px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em}
.gs-item{display:flex; flex-direction:column; padding:7px 14px; text-decoration:none; color:inherit}
.gs-item:hover,.gs-item:focus{background:#eef6ff}
.gs-item .gs-name{font-weight:600; font-size:14.5px}
.gs-item .gs-sub{font-size:12.5px; color:var(--muted)}
.gs-none{padding:12px 14px; color:var(--muted); font-size:14px}
.gs-all{display:block; padding:9px 14px; border-top:1px solid var(--line); font-weight:600; text-decoration:none; color:#0F6BDE; background:#f8fafc}
.gs-all:hover{background:#eef6ff}

.empty-state{
    text-align:center; padding:30px 18px 26px; margin:4px 0 6px;
    border:1.5px dashed #cbd5e1; border-radius:14px; background:#fbfdff;
}
.empty-state .es-art{color:#94a3b8; line-height:0}
.empty-state .es-title{font-size:18px; font-weight:700; margin-top:10px; color:#1f2937}
.empty-state .es-sub{color:var(--muted); font-size:14px; margin:5px auto 14px; max-width:430px}
.help-ic{color:#0F6BDE; line-height:0; display:inline-flex}
.help-ic svg{width:30px; height:30px}

@media screen and (max-width:720px){
    .topbar{flex-wrap:wrap}
    .gsearch{order:5; flex:1 1 100%; max-width:none}
    .stat-cards{grid-template-columns:1fr 1fr; gap:10px}
    .stat-card{padding:13px 14px 11px}
    .stat-card .sc-value{font-size:21px}
}
@media (prefers-reduced-motion: reduce){
    .stat-card{transition:none}
}