:root{--bg:#f5f7f8;--panel:#fff;--ink:#182421;--muted:#71807c;--line:#e5eae8;--green:#176b55;--green2:#e7f3ee;--red:#c75050;--amber:#a76813;--shadow:0 10px 30px rgba(24,54,45,.06)}*{box-sizing:border-box}body{margin:0;font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--ink);font-size:15px}.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;background:#123f34;color:#fff;padding:26px 18px 18px;position:fixed;inset-block:0;right:0;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}.brand-mark{width:43px;height:43px;border-radius:13px;background:#f0b957;color:#153e34;font-size:25px;font-weight:800;display:grid;place-items:center}.brand strong,.brand span{display:block}.brand strong{font-size:21px}.brand span{font-size:12px;color:#a7c1ba;margin-top:2px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.nav-item{border:0;background:transparent;color:#b7cec8;padding:12px 13px;border-radius:11px;font:600 14px inherit;text-align:right;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.11);color:#fff}.nav-item.active{box-shadow:inset -3px 0 #f0b957}.nav-item .ico{width:24px;font-size:20px;text-align:center}.nav-item kbd{margin-right:auto;background:rgba(255,255,255,.12);border:0;color:#a7c1ba;padding:2px 7px;border-radius:5px;font:11px inherit}.side-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.11);padding:18px 5px 0;display:flex;align-items:center;gap:10px}.side-footer .user-avatar{width:36px;height:36px;background:#d6ebe4;color:#176b55;border-radius:50%;display:grid;place-items:center;font-weight:800}.side-footer strong,.side-footer span{display:block}.side-footer strong{font-size:13px}.side-footer span{font-size:11px;color:#9dbbb3;margin-top:2px}.side-footer button{margin-right:auto;background:none;border:0;color:#fff}main{margin-right:246px;width:calc(100% - 246px);min-width:0}.topbar{height:76px;background:rgba(255,255,255,.93);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.date-block span,.date-block small{display:block}.date-block span{font-weight:700}.date-block small{color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:10px}.icon-btn,.menu-btn{width:42px;height:42px;background:#fff;border:1px solid var(--line);border-radius:11px;cursor:pointer;position:relative}.icon-btn i{width:7px;height:7px;border-radius:50%;background:#e05b57;position:absolute;top:8px;right:8px}.menu-btn{display:none}.primary,.outline,.secondary{font:700 14px inherit;border-radius:10px;padding:11px 17px;cursor:pointer;border:1px solid transparent}.primary{background:var(--green);color:#fff;box-shadow:0 7px 16px rgba(23,107,85,.18)}.primary:hover{background:#105945}.outline{background:#fff;border-color:#dce4e1;color:#344943}.secondary{background:var(--green2);color:var(--green)}.wide{width:100%}.large{padding:14px 18px;font-size:16px}.view{display:none;padding:30px 32px 50px;max-width:1600px;margin:auto}.view.active{display:block}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-title.compact{margin-bottom:20px}.page-title h1{font-size:27px;margin:3px 0 4px;letter-spacing:-.4px}.page-title p{color:var(--muted);margin:0}.eyebrow{color:var(--green);font-weight:700;font-size:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow);overflow:hidden}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat span{color:#566763;font-weight:600}.stat-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.stat.mint .stat-icon{background:#e6f3ed;color:#258064}.stat.amber .stat-icon{background:#fff0d7;color:#bc7a1e}.stat.violet .stat-icon{background:#eee8f7;color:#745c9b}.stat.blue .stat-icon{background:#e5eff8;color:#4a7396}.stat>strong{display:block;font-size:25px;margin:15px 0 8px;direction:rtl}.stat small{color:#899590}.stat small span,.stat small i{color:var(--green);font-style:normal;font-weight:700}.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;margin-bottom:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 15px}.panel h2{font-size:17px;margin:0 0 3px}.panel p{margin:0;color:var(--muted);font-size:13px}.text-btn{border:0;background:none;color:var(--green);font:700 13px inherit;cursor:pointer}.live{font-size:12px;color:var(--green);background:var(--green2);border-radius:20px;padding:6px 10px}.live i{display:inline-block;width:6px;height:6px;background:#35a680;border-radius:50%;margin-left:4px}.activity-list{padding:0 20px 12px}.activity{display:flex;align-items:center;gap:12px;padding:13px 2px;border-top:1px solid #eef1f0}.activity:first-child{border-top:0}.activity-icon{width:38px;height:38px;border-radius:12px;background:#edf5f2;color:var(--green);display:grid;place-items:center;font-weight:800}.activity.expense .activity-icon{background:#fff0ee;color:#bf5f58}.activity>div:nth-child(2){flex:1}.activity strong,.activity span{display:block}.activity span{font-size:12px;color:var(--muted);margin-top:3px}.activity .amount{text-align:left;font-weight:800}.activity .amount small{display:block;color:var(--muted);font-weight:400;margin-top:3px}.cash-summary{padding-bottom:18px}.cash-equation{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 20px}.cash-equation div{background:#f7f9f8;border:1px solid #edf0ef;border-radius:11px;padding:12px 10px;text-align:center;flex:1}.cash-equation span,.cash-equation strong{display:block}.cash-equation span{font-size:11px;color:var(--muted);margin-bottom:7px}.cash-equation strong{font-size:15px}.cash-equation>b{color:#94a19d}.net-box{margin:0 20px 15px;background:#123f34;color:#fff;border-radius:13px;padding:17px;display:flex;align-items:center;justify-content:space-between}.net-box span{color:#c3d8d2}.net-box strong{font-size:22px}.cash-summary>.secondary{width:calc(100% - 40px);margin:0 20px}.debt-watch{padding-bottom:18px}.debt-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 20px}.debt-card{border:1px solid var(--line);border-radius:13px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#e8f1ef;color:var(--green);font-weight:800;flex:none}.debt-card div{min-width:0}.debt-card strong,.debt-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debt-card span{font-size:12px;color:var(--muted);margin-top:4px}.debt-card b{margin-right:auto;color:#b14f4f;white-space:nowrap}.step-pill{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 13px;gap:9px;font-size:12px;color:var(--muted)}.step-pill .active{color:var(--green);font-weight:700}.step-pill i{width:30px;height:1px;background:var(--line)}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:18px;align-items:start}.pos-main{display:flex;flex-direction:column;gap:16px}.employee-picker,.product-picker{padding:19px}.picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.picker-head>div{display:flex;align-items:center;gap:10px}.number{width:30px;height:30px;border-radius:9px;background:var(--green2);color:var(--green);font-weight:800;display:grid;place-items:center}.small{padding:8px 11px;font-size:12px}.search-wrap{height:44px;border:1px solid #dfe5e3;background:#fbfcfc;border-radius:11px;display:flex;align-items:center;padding:0 13px;gap:8px}.search-wrap:focus-within{border-color:#6ca493;box-shadow:0 0 0 3px #e8f3ef}.search-wrap span{font-size:20px;color:#82908c}.search-wrap input{border:0;outline:0;background:transparent;font:500 14px inherit;width:100%}.employee-chips{display:flex;gap:9px;margin-top:12px;overflow:auto;padding-bottom:3px}.employee-chip{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:8px;min-width:145px;cursor:pointer;text-align:right;font:inherit}.employee-chip.active{border-color:var(--green);background:#f1f8f5;box-shadow:0 0 0 2px #ddefe8}.employee-chip .avatar{width:32px;height:32px;font-size:12px}.employee-chip span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.product-toolbar{display:flex;gap:10px;margin-bottom:15px}.product-toolbar .search-wrap{flex:1}.filters{display:flex;gap:5px;background:#f4f6f5;border-radius:10px;padding:4px}.filters button{border:0;background:transparent;border-radius:7px;padding:7px 11px;font:600 12px inherit;color:#71807c;cursor:pointer}.filters button.active{background:#fff;color:var(--green);box-shadow:0 2px 5px #dfe5e3}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.product-card{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;cursor:pointer;text-align:right;font-family:inherit;transition:.15s}.product-card:hover{border-color:#77a99b;transform:translateY(-2px);box-shadow:0 6px 14px #e3ebe8}.product-emoji{height:64px;background:#f4f7f6;border-radius:10px;display:grid;place-items:center;font-size:30px;margin-bottom:10px}.product-card strong,.product-card span{display:block}.product-card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-card span{color:var(--green);font-weight:800;margin-top:7px}.cart{position:sticky;top:94px;overflow:hidden}.cart-head{padding:18px 18px 14px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.cart-head h2{margin:0}.cart-head span{font-size:12px;color:var(--muted)}.cart-head button{border:0;background:none;color:#9aa5a2;cursor:pointer;font-size:18px}.cart-employee{margin:13px;background:#f2f7f5;border-radius:11px;padding:10px;display:flex;align-items:center;gap:10px}.cart-employee.empty{filter:grayscale(1);opacity:.7}.cart-employee small,.cart-employee strong{display:block}.cart-employee small{color:var(--muted);font-size:11px;margin-bottom:2px}.cart-items{min-height:210px;max-height:310px;overflow:auto;padding:0 15px}.empty-state{text-align:center;color:#95a09d;padding:35px 10px}.empty-state span{font-size:34px}.empty-state strong,.empty-state p{display:block;margin-top:8px}.empty-state p{font-size:12px}.cart-line{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px 0;border-bottom:1px solid #edf0ef}.cart-line>div:first-child strong,.cart-line>div:first-child span{display:block}.cart-line>div:first-child span{font-size:12px;color:var(--muted);margin-top:3px}.qty{display:flex;align-items:center;gap:7px}.qty button{width:25px;height:25px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}.line-total{grid-column:2;font-weight:800;text-align:left}.cart-footer{border-top:1px solid var(--line);padding:14px 17px}.note-row input{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit;outline:0}.total-row{display:flex;align-items:center;justify-content:space-between;padding:15px 2px}.total-row strong{font-size:22px;color:var(--green)}.primary:disabled{background:#b9c8c4;box-shadow:none;cursor:not-allowed}.hint{text-align:center;color:var(--muted);display:block;margin-top:8px}.toolbar-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.toolbar-card .search-wrap{width:360px}.summary-mini{text-align:left}.summary-mini span,.summary-mini strong{display:block}.summary-mini span{font-size:11px;color:var(--muted)}.summary-mini strong{font-size:18px;color:#b04d4d;margin-top:3px}.table-wrap{overflow:auto}.table-wrap.flat{box-shadow:none;border:0;border-radius:0}table{width:100%;border-collapse:collapse}th{text-align:right;color:#76837f;font-size:12px;background:#f8faf9;padding:13px 18px;border-bottom:1px solid var(--line)}td{padding:14px 18px;border-bottom:1px solid #edf0ef;font-size:14px}tbody tr:last-child td{border-bottom:0}.employee-cell{display:flex;align-items:center;gap:9px}.employee-cell span{color:var(--muted);font-size:11px;display:block}.debt-amount{color:#b44949;font-weight:800}.row-actions{display:flex;gap:7px}.row-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;font:600 11px inherit;cursor:pointer}.row-actions button.pay{color:var(--green);background:#edf7f3}.cashbox-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;align-items:start}.cash-form,.closing-card{padding:22px}.cash-form>p{margin-bottom:20px}.cash-form>label,.closing-card>label{display:block;font-weight:700;font-size:13px;margin:16px 0}.money-input{display:flex;border:1px solid var(--line);border-radius:10px;margin-top:7px;overflow:hidden}.money-input input{border:0;outline:0;padding:12px;width:100%;font:700 16px inherit;direction:ltr;text-align:right}.money-input span{background:#f5f7f6;padding:12px;color:var(--muted);white-space:nowrap}.expense-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0 8px}.expense-title label{font-weight:700}.expense-row{display:grid;grid-template-columns:1fr 130px 32px;gap:8px;margin-top:8px}.expense-row input{border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;min-width:0}.expense-row button{border:0;background:#fff0ef;color:#c34e4e;border-radius:8px;cursor:pointer}.closing-card{background:#123f34;color:#fff}.closing-label{color:#bdd2cc}.closing-card>strong{display:block;font-size:32px;margin-top:9px}.divider{height:1px;background:rgba(255,255,255,.14);margin:22px 0}.closing-lines p{display:flex;justify-content:space-between;color:#d7e4e1;margin:12px 0}.closing-lines .negative b{color:#ffb5ab}.closing-card .money-input{border-color:rgba(255,255,255,.2)}.closing-card .money-input input{background:rgba(255,255,255,.08);color:#fff}.closing-card .money-input span{background:rgba(255,255,255,.12);color:#fff}.difference-box{text-align:center;background:rgba(255,255,255,.08);border-radius:9px;padding:10px;color:#bfd0cc;font-size:12px;margin-bottom:13px}.status-open{background:#e7f4ee;color:var(--green);border-radius:20px;padding:8px 12px;font-weight:700;font-size:12px}.report-tabs{display:flex;gap:5px;margin-bottom:16px}.report-tabs button{border:1px solid var(--line);background:#fff;padding:9px 16px;border-radius:9px;font:600 13px inherit;cursor:pointer}.report-tabs button.active{background:var(--green);color:#fff}.report-stats{grid-template-columns:repeat(3,1fr)}.manage-products{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.manage-product{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.manage-product .product-emoji{height:90px}.manage-product h3{margin:10px 0 5px}.manage-product p{margin:0;color:var(--green);font-weight:800}.manage-product small{color:var(--muted)}.manage-product button{width:100%;margin-top:12px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px;font:inherit;cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:rgba(10,30,25,.45);z-index:50;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}.modal-backdrop.open{display:flex}.modal{background:#fff;border-radius:17px;width:min(520px,100%);max-height:90vh;overflow:auto;padding:25px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.2)}.modal-close{position:absolute;left:15px;top:13px;border:0;background:#f1f3f2;width:32px;height:32px;border-radius:50%;font-size:22px;cursor:pointer}.modal h2{margin:0 0 5px}.modal>div>p{color:var(--muted);margin:0 0 20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{font-size:13px;font-weight:700}.form-grid label.full{grid-column:1/-1}.form-grid input,.form-grid select{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;margin-top:6px;font:inherit}.statement-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.statement-head .avatar{width:50px;height:50px;font-size:18px}.statement-balance{background:#f8efee;border-radius:11px;padding:13px;display:flex;justify-content:space-between;margin-bottom:15px}.statement-balance strong{color:#b14949;font-size:20px}.statement-list{max-height:340px;overflow:auto}.statement-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:11px 2px}.statement-row>div{flex:1}.statement-row span,.statement-row small{display:block}.statement-row span{font-weight:700}.statement-row small{color:var(--muted);margin-top:3px}.statement-row b.sale{color:#b44949}.statement-row b.payment{color:var(--green)}.toast{position:fixed;left:25px;bottom:25px;background:#173f35;color:#fff;padding:13px 16px;border-radius:12px;display:flex;gap:10px;align-items:center;z-index:100;transform:translateY(120px);opacity:0;transition:.3s;box-shadow:0 12px 30px rgba(0,0,0,.2)}.toast.show{transform:translateY(0);opacity:1}.toast>span{width:30px;height:30px;border-radius:50%;background:#3f9f7f;display:grid;place-items:center}.toast strong,.toast p{display:block;margin:0}.toast p{color:#bcd1cb;font-size:12px;margin-top:2px}@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}.debt-cards{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.manage-products{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){.sidebar{transform:translateX(100%);transition:.25s}.sidebar.open{transform:translateX(0)}main{margin-right:0;width:100%}.menu-btn{display:block}.topbar{padding:0 17px}.view{padding:22px 16px}.pos-layout,.dashboard-grid,.cashbox-grid{grid-template-columns:1fr}.cart{position:relative;top:0}.manage-products{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.stats-grid,.report-stats{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.page-title{align-items:flex-start;gap:12px}.page-title h1{font-size:23px}.step-pill{display:none}.quick-sale{padding:10px}.date-block small{display:none}.debt-cards{grid-template-columns:1fr}.product-toolbar{flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid label.full{grid-column:auto}.toolbar-card .search-wrap{width:100%}.summary-mini{display:none}.manage-products{grid-template-columns:1fr 1fr}.expense-row{grid-template-columns:1fr 95px 30px}.page-title>.outline{padding:9px}.employee-picker,.product-picker{padding:13px}}
@media print{.sidebar,.topbar,.page-title button,.report-tabs{display:none!important}main{margin:0;width:100%}.view{display:none!important}.view.active{display:block!important;padding:0}.panel,.stat{box-shadow:none}}

/* ============================================================
   MOBILE ENHANCEMENTS & NATIVE APP EXPERIENCE (ملاءمة الهواتف)
   ============================================================ */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 35, 28, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 25;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

.sidebar-close-btn {
  display: none;
  position: absolute;
  left: 14px;
  top: 18px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.sidebar-close-btn:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0.92);
}

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
  z-index: 40;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: center;
  justify-content: space-around;
}

.b-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: #6c7c77;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
  flex: 1;
  text-decoration: none;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.b-nav-item:active {
  transform: scale(0.92);
}
.b-nav-item.active {
  color: var(--green);
}
.b-nav-item .b-icon {
  font-size: 19px;
  line-height: 1;
}

.mobile-cart-bar {
  display: none;
  position: sticky;
  bottom: 68px;
  margin: 16px 0 8px 0;
  background: #123f34;
  color: #fff;
  border-radius: 14px;
  padding: 11px 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(18, 63, 52, 0.35);
  z-index: 35;
  cursor: pointer;
  animation: slideUpMob 0.25s ease-out;
}
.mobile-cart-bar.active {
  display: flex;
}
@keyframes slideUpMob {
  from { transform: translateY(15px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.mobile-cart-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-cart-info strong {
  display: block;
  font-size: 14px;
}
.mobile-cart-info span {
  display: block;
  font-size: 13px;
  color: #f0b957;
  font-weight: 800;
}
.mobile-cart-action {
  background: #f0b957;
  color: #123f34;
  border: 0;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 9px;
  font-family: inherit;
}

@media (max-width: 850px) {
  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar-close-btn {
    display: flex;
  }
  .mobile-bottom-nav {
    display: flex;
  }
  .sidebar {
    z-index: 30;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 64px;
    padding: 0 16px;
  }

  /* Selected Employee Banner */
  .selected-emp-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 4px;
  }
  .selected-emp-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .selected-emp-info .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .selected-emp-info strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #064e3b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .selected-emp-info span {
    display: block;
    font-size: 12px;
    color: #047857;
    font-weight: 600;
  }
  .btn-change-emp {
    background: #fff;
    color: #047857;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }
  .btn-change-emp:active {
    background: #d1fae5;
  }

  /* POS Unified Mobile Layout */
  .pos-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-bottom: 80px;
  }
  .pos-layout .pos-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .compact-emp-picker {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .compact-emp-picker .picker-head {
    margin-bottom: 8px !important;
  }
  .product-picker {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .product-picker .picker-head {
    margin-bottom: 8px !important;
  }
  /* Mobile Optimized Product Grid & Cards */
  .product-toolbar {
    display: flex;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .product-search-unified {
    width: 100%;
    height: 42px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
  }
  .product-search-unified:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  }
  .product-search-unified input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }
  .filters {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px !important;
    background: transparent !important;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar {
    display: none;
  }
  .filters button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font: 700 12px inherit !important;
    color: #475569 !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .filters button.active {
    background: #176b55 !important;
    color: #ffffff !important;
    border-color: #176b55 !important;
    box-shadow: 0 2px 6px rgba(23, 107, 85, 0.25) !important;
  }
  .filters button small {
    opacity: 0.8;
    font-size: 11px;
    margin-right: 2px;
  }
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: 350px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
  }
  .product-card {
    position: relative !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    text-align: right !important;
    font-family: inherit !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 68px !important;
    -webkit-tap-highlight-color: transparent;
  }
  .product-card:active {
    transform: scale(0.96) !important;
    background: #f1f5f9 !important;
  }
  .product-card.in-cart {
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 0 0 1px #10b981 !important;
  }
  .product-card .cart-badge {
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    padding: 2px 7px !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
    z-index: 2;
  }
  .product-card-body {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .product-card-body .product-emoji {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }
  .product-card.in-cart .product-emoji {
    background: #d1fae5 !important;
  }
  .product-details {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .product-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .product-price {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #15803d !important;
    margin-top: 3px !important;
    direction: rtl !important;
  }

  /* Cart directly visible under products */
  .pos-layout .cart {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    border: 2px solid #176b55 !important;
    box-shadow: 0 4px 16px rgba(23, 107, 85, 0.12) !important;
    border-radius: 14px !important;
  }
  .cart-head {
    padding: 12px 14px !important;
  }
  .cart-items {
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 0 12px !important;
  }
  .cart-footer {
    padding: 12px 14px !important;
  }
  .total-row {
    padding: 10px 0 !important;
  }
  .total-row strong {
    font-size: 24px !important;
  }
  #completeSale {
    padding: 15px !important;
    font-size: 16px !important;
    border-radius: 11px !important;
  }
  .qty {
    gap: 12px !important;
  }
  .qty button {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: #f1f5f4 !important;
    border: 1px solid var(--line) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer;
  }
  .qty b {
    font-size: 15px !important;
    min-width: 20px !important;
    text-align: center !important;
  }
}

/* Base styles for Selected Employee Banner on desktop */
.selected-emp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.selected-emp-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.selected-emp-info .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.selected-emp-info strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #064e3b;
}
.selected-emp-info span {
  display: block;
  font-size: 13px;
  color: #047857;
  font-weight: 600;
}
.btn-change-emp {
  background: #fff;
  color: #047857;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-change-emp:hover {
  background: #d1fae5;
}

/* Base Product Card Structured Styles */
.product-card {
  position: relative;
  transition: all 0.15s ease;
}
.product-card.in-cart {
  border-color: #10b981;
  background: #ecfdf5;
  box-shadow: 0 0 0 1px #10b981;
}
.product-card .cart-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 12px;
  padding: 2px 7px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
  z-index: 2;
}
.product-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.product-card-body .product-emoji {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #f1f5f9;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 0 !important;
}
.product-card.in-cart .product-emoji {
  background: #d1fae5;
}
.product-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.product-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  word-break: break-word;
}
.product-price {
  font-size: 13px;
  font-weight: 800;
  color: #15803d;
  margin-top: 3px;
  direction: rtl;
}

@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  .view {
    padding: 16px 14px 28px !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .stat {
    padding: 14px 12px !important;
    border-radius: 13px !important;
  }
  .stat > strong {
    font-size: 20px !important;
    margin: 8px 0 4px !important;
  }
  .stat-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  .stat span {
    font-size: 12px !important;
  }
  .stat small {
    font-size: 11px !important;
  }
  #sale-view .page-title.compact {
    margin-bottom: 8px !important;
  }
  #sale-view .page-title.compact p,
  #sale-view .page-title.compact .eyebrow {
    display: none !important;
  }
  #sale-view .page-title.compact h1 {
    font-size: 19px !important;
    margin: 0 !important;
  }
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table th, table td {
    padding: 11px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 22px 16px 28px !important;
    box-sizing: border-box !important;
    animation: sheetUp 0.25s ease-out;
  }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .page-title h1 {
    font-size: 22px !important;
  }
  .quick-sale {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
  .cash-equation {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px 10px !important;
  }
  .cash-equation div {
    min-width: 75px !important;
    padding: 8px 6px !important;
  }
  .cash-equation strong {
    font-size: 13px !important;
  }
}

/* Product Management View Modern & Mobile Styles */
.compact-manage-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.badge-pill {
  display: inline-block;
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-right: 6px;
}
.manage-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.manage-search {
  width: 100%;
  height: 44px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.manage-search:focus-within {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.manage-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.manage-products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.manage-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.manage-card:active {
  transform: scale(0.98);
  background: #f8fafc;
}
.manage-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}
.manage-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.manage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.manage-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manage-card-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}
.manage-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tag-category {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.tag-barcode {
  display: inline-block;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-family: monospace;
  padding: 1px 6px;
  border-radius: 6px;
}
.manage-edit-icon {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.manage-edit-icon:hover {
  background: var(--green2);
  color: var(--green);
  border-color: var(--green);
}

@media (min-width: 768px) {
  .manage-products-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (min-width: 1200px) {
  .manage-products-list {
    grid-template-columns: repeat(3, 1fr);
  }
}