/* ============================================================
   سیستەمی فرۆشتنی پارچەی سەیارە - Stylesheet (RTL)
   فۆنت: Vazirmatn (Google Fonts) - بۆ پیتە کوردییەکان (ڕ ڵ ێ ۆ) گونجاوە
   ============================================================ */

:root{
  --primary:#0f766e;
  --primary-dark:#115e59;
  --primary-darker:#0b3f3c;
  --primary-light:#e6f4f2;
  --accent:#ea8a2e;
  --bg:#f3f5f7;
  --card-bg:#ffffff;
  --text:#18212f;
  --text-muted:#667085;
  --border:#e4e7ec;
  --border-strong:#d0d5dd;
  --success:#15803d;
  --success-bg:#e8f6ee;
  --danger:#c2410c;
  --danger-strong:#b42318;
  --danger-bg:#fdeee8;
  --warning:#a16207;
  --warning-bg:#fdf4dc;
  --info:#1d4ed8;
  --info-bg:#e8eefc;
  --radius:12px;
  --radius-sm:8px;
  --sidebar-w:248px;
  --topbar-h:62px;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --font: 'Vazirmatn', 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  direction:rtl;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;line-height:1.4;}
h1{font-size:1.5rem;} h2{font-size:1.25rem;} h3{font-size:1.05rem;}
img{max-width:100%;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- layout ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--primary-darker) 0%,var(--primary-dark) 100%);
  color:#fff;height:100vh;position:sticky;top:0;align-self:flex-start;
  display:flex;flex-direction:column;
}
.sidebar .brand{padding:18px 18px;font-weight:800;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:8px;}
.sidebar .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.14);font-size:1rem;}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 10px;}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;color:#dcefec;padding:9px 12px;font-size:.92rem;border-radius:9px;margin-bottom:2px;font-weight:500;
}
.sidebar nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff;}
.sidebar nav a.active{background:#fff;color:var(--primary-dark);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.sidebar .user-box{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;}
.sidebar .user-box a{display:inline-block;padding:4px 0;font-size:.82rem;color:#ffd2a6;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  height:var(--topbar-h);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:20;
}
.topbar .title{font-weight:800;font-size:1.1rem;}
.content{padding:22px;flex:1;}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text);}

/* ---------- cards ---------- */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.card-header h2{margin:0;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.stat-card .label{color:var(--text-muted);font-size:.84rem;margin-bottom:4px;font-weight:500;}
.stat-card .value{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;}
.stat-card .sub{font-size:.78rem;color:var(--text-muted);margin-top:2px;}
.stat-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:transparent;}
.stat-card.accent::before{background:var(--primary);}
.stat-card.warn::before{background:var(--warning);}
.stat-card.danger::before{background:var(--danger);}
.stat-card.success::before{background:var(--success);}
.stat-card.highlight{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border-color:transparent;}
.stat-card.highlight .label,.stat-card.highlight .sub{color:rgba(255,255,255,.8);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:8px 16px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.9rem;font-weight:600;
  cursor:pointer;background:var(--primary);color:#fff;transition:background .15s, box-shadow .15s, transform .05s;line-height:1.5;
}
.btn:hover{background:var(--primary-dark);text-decoration:none;color:#fff;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(15,118,110,.25);}
.btn-sm{padding:5px 11px;font-size:.82rem;}
.btn-secondary{background:#fff;color:var(--text);border-color:var(--border-strong);}
.btn-secondary:hover{background:#f6f7f9;color:var(--text);}
.btn-danger{background:var(--danger-strong);}
.btn-danger:hover{background:#912018;}
.btn-success{background:var(--success);}
.btn-success:hover{background:#116632;}
.btn-warning{background:var(--warning);color:#fff;}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary);}
.btn-outline:hover{background:var(--primary-light);color:var(--primary-dark);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-block{width:100%;}
.icon-btn{padding:6px 9px;}

/* ---------- forms ---------- */
label{display:block;font-size:.84rem;margin-bottom:5px;color:#475467;font-weight:600;}
.form-group{margin-bottom:14px;}
.form-control,select.form-control,textarea.form-control{
  width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:.92rem;
  background:#fff;color:var(--text);font-family:inherit;transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.15);}
.form-control[readonly]{background:#f8f9fb;}
textarea.form-control{resize:vertical;min-height:70px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.form-check{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--text);}
.form-check input{width:17px;height:17px;accent-color:var(--primary);}
.input-group{display:flex;}
.input-group .form-control{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.input-group .btn{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.input-addon{display:flex;align-items:center;gap:6px;}
.help-text{font-size:.78rem;color:var(--text-muted);margin-top:4px;font-weight:400;}
.required::after{content:" *";color:var(--danger);}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;}
table.table{width:100%;border-collapse:collapse;font-size:.9rem;}
table.table th, table.table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border);vertical-align:middle;}
table.table thead th{background:#f8f9fb;color:#475467;font-weight:700;font-size:.8rem;white-space:nowrap;}
table.table tbody tr:hover{background:#f9fbfb;}
table.table tfoot td{font-weight:800;background:#f8f9fb;}
table.table td.num, table.table th.num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap;}
.table-actions{display:flex;gap:6px;white-space:nowrap;}
.empty-state{text-align:center;padding:40px 10px;color:var(--text-muted);}

/* ---------- badges / alerts ---------- */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:700;line-height:1.7;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-danger{background:var(--danger-bg);color:var(--danger-strong);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-muted{background:#eef0f3;color:#475467;}

.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:.9rem;border:1px solid transparent;}
.alert-success{background:var(--success-bg);color:var(--success);border-color:#bfe5cd;}
.alert-danger{background:var(--danger-bg);color:var(--danger-strong);border-color:#f6cfc2;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:#f0dfa4;}
.alert-info{background:var(--info-bg);color:var(--info);border-color:#c9d7f8;}

/* ---------- color chip (پارچە) ---------- */
.color-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 8px;border-radius:20px;background:#f2f4f7;border:1px solid var(--border);font-size:.74rem;font-weight:600;color:#344054;white-space:nowrap;}
.color-chip .dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:0 0 auto;}
.part-note{font-size:.76rem;color:#7a5a12;background:#fff8e6;border-radius:6px;padding:2px 8px;margin-top:4px;display:inline-block;max-width:320px;}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.55);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:100;}
.modal-backdrop.open{display:flex;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 50px rgba(16,24,40,.25);animation:pop .15s ease-out;}
.modal.modal-lg{max-width:940px;}
.modal.modal-sm{max-width:430px;}
@keyframes pop{from{transform:translateY(-10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-header h3{margin:0;}
.modal-body{padding:18px 20px;max-height:72vh;overflow-y:auto;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-start;gap:8px;}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-muted);line-height:1;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;background:#e9edf0;padding:4px;border-radius:10px;width:fit-content;max-width:100%;}
.tabs a{padding:7px 16px;font-size:.88rem;color:#475467;border-radius:8px;font-weight:600;}
.tabs a:hover{text-decoration:none;color:var(--text);}
.tabs a.active{color:var(--primary-dark);background:#fff;box-shadow:var(--shadow);}

/* ---------- permissions / roles ---------- */
.perm-group{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:#fcfcfd;}
.perm-group .form-row{gap:6px 14px;}
.perm-item{border-radius:6px;padding:2px 6px;margin:0;}
.perm-item.perm-diff{background:var(--warning-bg);}
.perm-item.perm-diff::after,.perm-diff-dot{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.role-card{margin-bottom:0;display:flex;flex-direction:column;}
.role-perm-summary{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-content:flex-start;}
.progress{height:6px;border-radius:6px;background:#eef0f3;overflow:hidden;}
.progress span{display:block;height:100%;background:var(--primary);border-radius:6px;}

/* ---------- reports: profit & loss ---------- */
.pl-table{width:100%;border-collapse:collapse;font-size:.95rem;}
.pl-table td{padding:9px 4px;border-bottom:1px dashed var(--border);}
.pl-table td:last-child{text-align:left;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.pl-table tr.minus td:first-child::before{content:"− ";color:var(--danger);font-weight:700;}
.pl-table tr.minus td:last-child{color:var(--danger-strong);}
.pl-table tr.subtotal td{border-bottom:1px solid var(--border-strong);font-weight:800;background:#f8f9fb;}
.pl-table tr.total td{border-bottom:none;font-weight:800;font-size:1.08rem;padding-top:12px;}
.pl-table tr.total.pos td:last-child{color:var(--success);}
.pl-table tr.total.neg td:last-child{color:var(--danger-strong);}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
.bar{height:8px;background:#eef0f3;border-radius:6px;overflow:hidden;min-width:80px;}
.bar span{display:block;height:100%;background:var(--primary);}
.bar.neg span{background:var(--danger);}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,var(--primary) 0%,var(--primary-darker) 70%);padding:16px;}
.login-card{background:#fff;border-radius:16px;padding:34px 30px;width:100%;max-width:390px;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.login-card h1{text-align:center;font-size:1.2rem;color:var(--primary-dark);margin-bottom:22px;font-weight:800;}

/* ---------- POS ---------- */
.pos-layout{display:grid;grid-template-columns:1fr 390px;gap:16px;align-items:start;}
.brand-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;}
.brand-tile{
  flex:0 0 auto;width:86px;text-align:center;cursor:pointer;border:2px solid transparent;border-radius:12px;padding:6px;background:#fff;transition:.15s;
}
.brand-tile:hover{border-color:var(--border-strong);text-decoration:none;}
.brand-tile.active{border-color:var(--primary);background:var(--primary-light);}
.brand-tile img{width:46px;height:46px;object-fit:contain;border-radius:6px;}
.brand-tile .logo-fallback{width:46px;height:46px;border-radius:8px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto;}
.brand-tile span{display:block;font-size:.72rem;margin-top:4px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;max-height:62vh;overflow-y:auto;padding:2px;}
.product-tile{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;transition:.15s;}
.product-tile:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.product-tile .name{font-size:.86rem;font-weight:700;margin-bottom:4px;min-height:2.4em;line-height:1.45;}
.product-tile .meta{font-size:.72rem;color:var(--text-muted);}
.product-tile .price{color:var(--primary-dark);font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;}
.product-tile .qty-badge{float:left;}

.cart-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:sticky;top:78px;box-shadow:var(--shadow);}
.cart-items{max-height:38vh;overflow-y:auto;margin-bottom:10px;}
.cart-item{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.85rem;}
.cart-item .qty-ctrl{display:flex;align-items:center;gap:4px;}
.cart-item .qty-ctrl input{width:44px;text-align:center;padding:3px;border:1px solid var(--border-strong);border-radius:6px;}
.cart-totals div{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.9rem;}
.cart-totals .grand{font-size:1.18rem;font-weight:800;color:var(--primary-dark);border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
.discount-inputs{display:flex;gap:4px;align-items:center;}
.discount-inputs input{width:92px;text-align:left;padding:3px 8px;}
.discount-inputs input.pct{width:62px;}

/* ---------- invoice / print ---------- */
.invoice-box{background:#fff;padding:26px;max-width:800px;margin:0 auto;}
.invoice-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--primary);padding-bottom:12px;margin-bottom:16px;gap:12px;}
.invoice-logo{height:56px;width:56px;object-fit:contain;border-radius:8px;flex:0 0 auto;}
.invoice-totals{max-width:340px;margin-inline-start:auto;}
.cost-col{background:#fbfaf3;}
.profit-panel{border:1px dashed var(--warning);background:#fffcf2;border-radius:var(--radius);padding:14px 18px;margin-top:16px;}
.profit-panel h3{color:var(--warning);margin-bottom:8px;}
@media print{
  .no-print{display:none !important;}
  body{background:#fff;font-size:13px;}
  /* browsers print with "background graphics" turned off by default, which doesn't just
     drop background-color/images - it also mutes border colors and colored pills (the
     status badge, the teal underline under the invoice head, the table's row lines) into
     near-invisible grey. force exact colors so the printed receipt matches what's on
     screen instead of coming out flat and line-less. */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;}
  /* the sidebar/topbar chrome still reserved their layout width on the printed page even
     though their dark background usually prints invisible ("no background graphics") - that
     left a big blank gap next to a squeezed invoice. hide the whole app shell around it and
     let the invoice card use the full printable page width instead. */
  .sidebar,.topbar,.menu-toggle{display:none !important;}
  .app-shell{display:block;}
  .main{width:100%;}
  .content{padding:0;}
  .card{box-shadow:none;}
  .invoice-box{box-shadow:none;padding:0;max-width:100%;margin:0;border:none;}
}

/* ---------- utils ---------- */
.d-flex{display:flex;} .align-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:6px;} .gap-2{gap:10px;} .gap-3{gap:16px;}
.flex-wrap{flex-wrap:wrap;}
.mt-1{margin-top:6px;} .mt-2{margin-top:12px;} .mt-3{margin-top:20px;}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:6px;} .mb-2{margin-bottom:12px;}
.text-muted{color:var(--text-muted);} .text-danger{color:var(--danger-strong);} .text-success{color:var(--success);} .text-warning{color:var(--warning);}
.text-center{text-align:center;} .text-left{text-align:left;}
.fw-bold{font-weight:700;}
.small{font-size:.8rem;}
.w-100{width:100%;}
.pill-group{display:flex;gap:8px;flex-wrap:wrap;}
.pill{padding:6px 14px;border:1px solid var(--border-strong);border-radius:20px;cursor:pointer;font-size:.85rem;background:#fff;font-weight:600;transition:.15s;}
.pill:hover{border-color:var(--primary);}
.pill.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.pagination a,.pagination span{padding:5px 12px;border:1px solid var(--border);border-radius:8px;font-size:.85rem;color:var(--text);}
.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.autocomplete-box{position:relative;}
.autocomplete-list{position:absolute;z-index:50;top:100%;right:0;left:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);max-height:280px;overflow-y:auto;margin-top:4px;}
.autocomplete-list .ac-item{padding:9px 12px;cursor:pointer;font-size:.86rem;border-bottom:1px solid var(--border);}
.autocomplete-list .ac-item:last-child{border-bottom:none;}
.autocomplete-list .ac-item:hover,.autocomplete-list .ac-item.hl{background:var(--primary-light);}

@media (max-width: 900px){
  .pos-layout{grid-template-columns:1fr;}
  .cart-box{position:static;}
}
@media (max-width: 760px){
  .sidebar{position:fixed;right:0;top:0;bottom:0;transform:translateX(100%);transition:.2s;z-index:200;}
  .sidebar.open{transform:translateX(0);box-shadow:-10px 0 30px rgba(0,0,0,.3);}
  .menu-toggle{display:block;}
  .form-row{grid-template-columns:1fr;}
  .content{padding:14px;}
  .topbar{padding:0 14px;}
}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start;}
@media (max-width: 900px){ .grid-2-1{grid-template-columns:1fr;} }
.cart-item input.price-bad{border-color:var(--danger) !important;background:var(--danger-bg);}

/* POS tile photo: big enough to tell similar parts apart at a glance */
.product-tile .tile-img{height:92px;margin:2px 0 8px;border-radius:9px;background:#f6f7f9;display:flex;align-items:center;justify-content:center;overflow:hidden;clear:both;}
.product-tile .tile-img img{width:100%;height:100%;object-fit:cover;}
.product-tile .tile-img span{font-size:1.8rem;opacity:.5;}
.product-tile{position:relative;}
.product-tile .qty-badge{position:absolute;top:14px;left:14px;float:none;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.15);}
/* brand logos are often wide wordmarks (TOYOTA, HYUNDAI) - give them the full tile width */
.brand-tile img{width:100%;height:42px;object-fit:contain;}
.brand-tile{width:92px;}
/* product list thumbnail */
.thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#fff;}
.link-btn{background:none;border:none;padding:4px 0;font:inherit;font-size:.82rem;color:#ffd2a6;cursor:pointer;}
.link-btn:hover{text-decoration:underline;}

/* a grid/flex child defaults to min-width:auto, so a long row inside it (the brand-logo strip,
   the product grid) stretched the whole POS page past the phone's width - the browser then
   zoomed out and the hidden sidebar showed up in the middle of the screen. Let the columns
   shrink and keep the long rows scrolling inside their own box instead. */
.pos-layout{grid-template-columns:minmax(0,1fr) 390px;}
.pos-layout > *, .main, .content, .card, .form-row > *{min-width:0;}
.brand-strip{max-width:100%;}
body{overflow-x:clip;}
@media (max-width: 900px){
  .pos-layout{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 760px){
  .invoice-head{flex-wrap:wrap;}
  .invoice-box{padding:14px;}
  .card-header .d-flex{flex-wrap:wrap;}
}
.topbar > div{min-width:0;}
.topbar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width: 760px){ .topbar > .small{display:none;} }
@media (max-width: 760px){
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:150;}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;}
  .product-tile .tile-img{height:84px;}
}
@media (max-width: 760px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stat-card{padding:12px;}
  .stat-card .value{font-size:1.15rem;}
}