/* Mosytr Cashier — client-side POS */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mcsh{--mc-primary:#3d627e;--mc-bg:#f9f9f9;--mc-row:#f2f2f2;--mc-text:#111;--mc-muted:#6b6b6b;--mc-green:#2e8b3a;--mc-red:#a80000;--mc-yellow:#f2b705;--mc-line:#3d627e;
  font-family:'Cairo',Tahoma,Arial,sans-serif;direction:rtl;text-align:right;color:var(--mc-text);background:var(--mc-bg);
  position:relative;max-width:720px;margin:0 auto;min-height:100vh;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mcsh *{box-sizing:border-box;font-family:inherit}
body.mcsh-standalone{margin:0;background:#e9edf0}
.mcsh-embedded{min-height:80vh;border-radius:10px;overflow:hidden}
:where(.mcsh) button{cursor:pointer;border:0;background:none;color:inherit;font-size:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;line-height:normal;min-height:0}
.mcsh input,.mcsh select,.mcsh textarea{font-size:16px}

/* header */
.mc-bar{position:sticky;top:0;z-index:20;background:var(--mc-primary);color:#fff;display:flex;align-items:center;gap:8px;min-height:60px;padding:6px 12px;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.mc-bar h1{flex:1;margin:0;font-size:21px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.mc-ib{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff!important;font-size:22px;font-weight:700}
.mc-ib:active{background:rgba(255,255,255,.15)}
.mc-ib.txt{width:auto;padding:0 8px;font-size:16px;border-radius:8px}
.mc-ib svg{width:24px;height:24px;fill:currentColor}

/* body */
.mc-body{padding:12px 12px 120px}
.mc-note{color:var(--mc-muted);font-size:14px;line-height:1.7;margin:4px 0 12px}
.mc-label{display:block;font-size:13px;margin:12px 0 4px;font-weight:600}
.mc-input{width:100%;border:1.5px solid var(--mc-line);border-radius:22px;background:var(--mc-row);padding:10px 16px;outline:none;text-align:right;color:var(--mc-text)}
.mc-input:focus{background:#fff;box-shadow:0 0 0 3px rgba(61,98,126,.15)}
.mc-input.center{text-align:center}
textarea.mc-input{min-height:80px;resize:vertical;border-radius:18px}
.mc-row2{display:flex;gap:10px}.mc-row2>div{flex:1;min-width:0}
.mcsh .mc-btn{display:block;width:100%;background:var(--mc-primary)!important;color:#fff!important;border:0;cursor:pointer;line-height:1.5;border-radius:24px;padding:12px;font-size:18px;font-weight:600;margin-top:18px;box-shadow:0 2px 3px rgba(0,0,0,.15)}
.mcsh .mc-btn.alt{background:var(--mc-row)!important;color:var(--mc-text)!important;border:1.5px solid var(--mc-line)}
.mcsh .mc-btn.danger{background:var(--mc-red)!important}
.mc-btns{display:flex;gap:12px}.mc-btns .mc-btn{flex:1}
.mc-link{color:#2a1fa8!important;text-decoration:underline;font-size:14px;background:none;padding:0}
.mc-radio{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:16px}
.mc-radio input{width:22px;height:22px;accent-color:var(--mc-primary)}
.mc-check{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:14px}
.mc-check input{width:18px;height:18px;accent-color:var(--mc-primary)}

/* home grid — sized so all tiles fit one phone screen (like the original app) */
.mc-s-home{padding-bottom:12px!important}
.mc-warn{background:#fff4d6;padding:8px 12px;border-radius:10px;color:#6b4e00!important;margin:0 0 10px!important}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.mc-tile{background:none;border-radius:0;overflow:visible;text-align:right;display:block;width:100%;padding:0}
.mc-tile.wide{grid-column:1/-1}
.mc-home{--th:clamp(78px,calc((100vh - 236px) / 4),190px)}
@supports (height:100dvh){.mc-home{--th:clamp(78px,calc((100dvh - 236px) / 4),190px)}}
.mc-home.has-warn{--th:clamp(70px,calc((100vh - 290px) / 4),180px)}
.mc-tile .art{height:var(--th,120px);display:flex;align-items:center;justify-content:center;font-size:calc(var(--th,120px) * .46);line-height:1;border-radius:6px;background:linear-gradient(135deg,#eef3f6,#cdd9e2);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.mc-tile:active .art{filter:brightness(.94)}
.mc-tile .lbl{padding:3px 2px 0;font-weight:600;font-size:15px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-tile .art svg{width:64px;height:64px;fill:var(--mc-primary)}

/* settings list (like the original app) */
.mc-set{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.12);overflow:hidden;margin-bottom:12px}
.mc-set>button,.mc-set>.mc-sw{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:right;font-size:16px;border-bottom:1px solid #e6e6e6;min-height:56px}
.mc-set>:last-child{border-bottom:0}
.mc-set>button:active{background:#eef1f3}
.mc-set .ico{width:36px;height:36px;border-radius:50%;background:#e4ecf2;color:var(--mc-primary);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.mc-set .t{flex:1;min-width:0}.mc-set .t small{display:block;color:var(--mc-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-set .t.red{color:var(--mc-red)}
.mc-sw{display:flex;align-items:center;gap:12px;font-size:16px;padding:12px 2px;cursor:pointer}
.mc-sw .t{flex:1}
.mc-sw input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:13px;background:#c4c4c4;position:relative;flex:none;cursor:pointer;transition:background .15s;margin:0}
.mc-sw input::after{content:'';position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:right .15s}
.mc-sw input:checked{background:var(--mc-primary)}
.mc-sw input:checked::after{right:23px}
.mc-tax{display:flex;align-items:center;gap:10px;background:var(--mc-row);border-bottom:1.5px solid var(--mc-line);padding:10px 14px;font-size:17px}
.mc-tax input{width:22px;height:22px;accent-color:var(--mc-primary);flex:none}
.mc-tax .t{flex:1}.mc-tax .r{font-weight:700;min-width:60px;text-align:center}
.mc-tax .x{width:34px;height:34px;border-radius:50%;color:var(--mc-red)!important;font-size:18px}
.mc-logo{display:flex;align-items:center;justify-content:center;height:160px;border:1.5px dashed var(--mc-line);border-radius:12px;background:var(--mc-row);margin-bottom:6px;overflow:hidden}
.mc-logo img{max-width:100%;max-height:150px}
.mc-dd{color:#fff!important;font-size:20px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.mc-dd span{font-size:14px;opacity:.85}
.mc-menu button.on{background:#e8eef2;font-weight:700}

/* tables */
.mc-table{border-radius:22px 22px 0 0;overflow:hidden;margin-top:12px}
.mc-thead,.mc-tr{display:flex;align-items:center;padding:0 16px}
.mc-thead{background:var(--mc-primary);color:#fff;font-size:13px;min-height:44px}
.mc-tr{background:var(--mc-row);border-bottom:1.5px solid var(--mc-line);min-height:64px;padding-top:8px;padding-bottom:8px}
.mc-tr.click{cursor:pointer}.mc-tr.click:active{background:#e5e9ec}
.mc-c{flex:1;min-width:0;text-align:center;font-size:17px;word-break:break-word}
.mc-c.main{flex:2.2;text-align:right}
.mc-c small,.mc-sub{display:block;color:var(--mc-muted);font-size:14px}
.mc-tfoot{background:var(--mc-row);border-top:3px double var(--mc-line);display:flex;align-items:center;padding:12px 16px;font-weight:700;font-size:17px}
.green{color:var(--mc-green)!important}.red{color:var(--mc-red)!important}
.mc-empty{text-align:center;color:var(--mc-muted);padding:30px 10px;font-size:14px}

/* list cards */
.mc-card{background:var(--mc-row);padding:12px 16px;margin-bottom:10px;display:flex;align-items:center;gap:10px;cursor:pointer}
.mc-card .info{flex:1}.mc-card .info b{display:block;font-size:17px}
.mc-card .amt{font-size:22px;font-weight:600;color:var(--mc-red)}
.mc-search{display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--mc-line);margin:-12px -12px 12px;padding:6px 14px;background:#fff}
.mc-search input{flex:1;border:0;outline:0;padding:10px 4px;background:none;text-align:center}

/* add bar (invoice) */
.mc-addbar{display:flex;border:1.5px solid var(--mc-line);border-radius:26px;overflow:hidden;background:var(--mc-row)}
.mc-addbar input{flex:1;border:0;outline:0;background:none;padding:12px 16px;min-width:0}
.mcsh .mc-addbar button{background:var(--mc-primary)!important;color:#fff!important;padding:0 26px;font-size:17px}
.mc-sugg{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);border-radius:6px;margin-top:4px;max-height:240px;overflow:auto;position:relative;z-index:5}
.mc-sugg div{padding:12px 16px;border-bottom:1px solid #eee;cursor:pointer;display:flex;justify-content:space-between}
.mc-sugg div:active{background:#eef3f6}
.mc-fixfoot{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:720px;background:var(--mc-bg);padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1.5px solid var(--mc-line);z-index:15}
.mcsh-embedded .mc-fixfoot{position:sticky;transform:none;left:auto}
.mc-fixfoot .tot{text-align:center;font-size:20px;font-weight:600;padding:6px 0}
.mc-fixfoot .mc-btn{margin-top:6px}

/* balance box */
.mc-box{border:1.5px solid var(--mc-line);border-radius:22px 22px 0 0;overflow:hidden;margin:6px 0 14px}
.mc-box .h{background:var(--mc-primary);color:#fff;text-align:center;padding:10px;font-size:14px;display:flex}
.mc-box .h span,.mc-box .v span{flex:1;text-align:center}
.mc-box .v{background:var(--mc-row);text-align:center;font-size:30px;font-weight:600;padding:16px;display:flex}
.mc-box .v+.v{border-top:1.5px solid var(--mc-line)}
.mc-legend{display:flex;justify-content:center;gap:24px;color:var(--mc-muted);font-size:14px;margin:4px 0 10px}
.mc-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-left:5px;vertical-align:middle}

/* period bar */
.mc-period{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:720px;background:var(--mc-primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 18px calc(10px + env(safe-area-inset-bottom));z-index:15}
.mcsh-embedded .mc-period{position:sticky;transform:none;left:auto}
.mcsh .mc-period button{color:#fff!important;font-size:19px;display:flex;align-items:center;gap:8px}
.mc-period .sum{font-size:13px;opacity:.85}

/* tabs */
.mc-tabs{display:flex;background:var(--mc-primary);border-top:1px solid rgba(255,255,255,.6);overflow-x:auto;scrollbar-width:none}
.mcsh .mc-tabs button{flex:1;color:#fff;padding:14px 12px;font-size:16px;white-space:nowrap;border-bottom:3px solid transparent}
.mc-tabs.big button{font-size:20px;font-weight:700}
.mcsh .mc-tabs button.on{color:var(--mc-yellow);border-color:var(--mc-yellow)}
.mc-tabs.big button.on{border-color:transparent}
.mc-stat{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);padding:16px 18px;margin-bottom:12px}
.mc-stat .t{font-size:18px}.mc-stat .n{font-size:34px;font-weight:700;color:var(--mc-primary);direction:ltr;text-align:right}
.mc-kv{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:17px}
.mc-kv b{font-size:22px;color:var(--mc-primary);white-space:nowrap}
.mc-acc{background:#fff}
.mc-acc>button{width:100%;text-align:right;padding:20px 22px;font-size:19px;font-weight:700;border-bottom:1px solid #e3e3e3}
.mc-acc .items button{width:100%;text-align:right;padding:18px 34px;background:var(--mc-row);border-bottom:1px solid #e6e6e6;font-size:16px}

/* product details */
.mc-pname{text-align:center;font-size:24px;font-weight:700;padding:6px 0 10px;border-bottom:1.5px solid var(--mc-line)}
.mc-qtybox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 4px}
.mc-qtybox b{font-size:20px}.mc-qtybox span{border:1.5px solid var(--mc-line);border-radius:20px;padding:6px 26px;font-size:24px;color:var(--mc-red);background:var(--mc-row)}
.mc-actbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:720px;background:var(--mc-primary);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:15}
.mcsh-embedded .mc-actbar{position:sticky;transform:none;left:auto}
.mcsh .mc-actbar button{flex:1;color:#fff!important;padding:10px 0;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mc-actbar svg{width:26px;height:26px;fill:#fff}

/* fab */
.mc-fab{position:fixed;bottom:24px;left:calc(50% - min(50vw,360px) + 24px);width:62px;height:62px;border-radius:50%;background:var(--mc-primary)!important;color:#fff!important;font-size:34px;box-shadow:0 3px 8px rgba(0,0,0,.35);z-index:16;display:flex;align-items:center;justify-content:center}
.mcsh-embedded .mc-fab{position:absolute}
.mc-fab svg{width:30px;height:30px;fill:#fff}

/* drawer */
.mc-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
.mc-drawer{position:fixed;top:0;bottom:0;right:0;width:min(78vw,340px);background:#fafafa;z-index:51;overflow:auto;box-shadow:-2px 0 10px rgba(0,0,0,.3)}
.mc-drawer .top{background:var(--mc-primary);color:#fff;font-size:44px;font-weight:600;padding:46px 20px;text-align:center}
.mc-drawer button{display:flex;align-items:center;gap:18px;width:100%;padding:16px 22px;font-size:17px;text-align:right}
.mc-drawer button svg{width:26px;height:26px;fill:#555;flex:none}
.mc-drawer hr{border:0;border-top:1px solid #ddd;margin:6px 0}
.mc-drawer .sec{color:var(--mc-muted);padding:8px 22px;font-size:14px}

/* popup menu */
.mc-menu-bg{position:fixed;inset:0;z-index:60}
.mc-menu{position:fixed;background:#fafafa;box-shadow:0 4px 14px rgba(0,0,0,.25);border-radius:4px;min-width:220px;z-index:61;overflow:hidden}
.mc-menu button{display:block;width:100%;text-align:right;padding:15px 22px;font-size:16px;color:var(--mc-primary)}
.mc-menu button:active{background:#eceff1}
.mc-menu button.dark{color:#111}

/* dialog */
.mc-dlg-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.mc-dlg{background:#f2f2f2;border-radius:22px;width:100%;max-width:440px;max-height:94vh;max-height:94dvh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.mc-dlg .dh{flex:none;padding:12px 18px;text-align:center;font-weight:700;font-size:17px;border-bottom:1.5px solid var(--mc-line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.mc-dlg .dh span{flex:1}
.mc-dlg .db{padding:8px 16px;overflow:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}
.mc-dlg .db .mc-frow{margin:7px 0}.mc-dlg .db .mc-frow>.mc-input{padding:8px 12px}
.mc-dlg .df{flex:none;display:flex;border-top:1.5px solid var(--mc-line)}
.mc-dlg .df button{flex:1;padding:14px;font-size:19px}
.mc-dlg .df button.primary{font-weight:700}
.mc-dlg .df button.danger{color:var(--mc-red)}
.mc-frow{display:flex;align-items:center;gap:12px;margin:10px 0}
.mc-frow>label{width:118px;flex:none;font-size:16px;font-weight:600}
.mc-frow>.mc-input{flex:1;text-align:center;border-radius:20px}
.mc-frow.redlbl>label{color:var(--mc-red)}

/* toast */
.mc-toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#5a5a5a;color:#fff;padding:12px 26px;border-radius:30px;z-index:90;font-size:16px;box-shadow:0 3px 10px rgba(0,0,0,.3);max-width:90vw;text-align:center;animation:mcIn .2s}
@keyframes mcIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* scanner */

/* report */
.mc-report-head{text-align:center;margin-bottom:6px}
.mc-report-head b{display:block;font-size:18px}
.mc-report-head small{color:var(--mc-muted)}



/* print format chips */
.mc-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.mcsh .mc-chip{border:1.5px solid var(--mc-line)!important;border-radius:18px;padding:9px 6px;background:#fff!important;color:var(--mc-text)!important;font-size:15px}
.mcsh .mc-chip.on{background:var(--mc-primary)!important;color:#fff!important}
.mc-dlg .mc-btn{margin-top:10px;font-size:16px;padding:11px}
.mcsh .mc-kv{border:0;text-align:right;cursor:pointer}
.mc-kv small{display:block}

/* printer picker */
.mc-dev{display:flex;align-items:stretch;gap:6px;background:#fff;border:1.5px solid #d5dde3;border-radius:14px;margin:6px 0;overflow:hidden}
.mcsh .mc-dev-main{flex:1;text-align:right;padding:10px 14px;display:block}
.mc-dev-main b{display:block;font-size:16px}.mc-dev-main small{display:block;color:var(--mc-muted);font-size:12px;direction:ltr;text-align:right}
.mcsh .mc-dev-x{width:44px;font-size:18px;border-right:1px solid #eee!important}
.mc-prlog{max-height:110px;overflow:auto;background:#111;color:#9f9;font:11px/1.5 monospace;direction:ltr;text-align:left;padding:6px;border-radius:8px;margin-top:8px}
.mcsh button{-webkit-user-select:none;user-select:none}
.mcsh .mc-btn:disabled{opacity:.6}
.mc-bk{display:block;width:100%;text-align:right;padding:10px 12px;border-bottom:1px solid #ddd;background:#fff!important;border-radius:0}
.mc-bk:first-of-type{border-radius:12px 12px 0 0}.mc-bk b{display:block;font-size:15px;text-align:left;word-break:break-all}.mc-bk small{display:block;color:var(--mc-muted);font-size:12px}
.mc-bk:active{background:#eef1f3!important}
.mc-h3{font-size:17px;font-weight:700;margin:8px 0 6px}.mc-p{font-size:15px;line-height:1.9;margin:0 0 6px}
.mc-det{margin:4px 0 14px;font-size:14px}.mc-det summary{color:#2a1fa8;cursor:pointer;list-style:none}.mc-det summary::before{content:'⌄ '}.mc-det div{background:#fff;border-radius:10px;padding:10px 12px;margin-top:6px;line-height:1.9}
.mcsh .mc-btn.mc-mid{display:inline-block;width:auto;min-width:140px;padding:11px 34px;border-radius:16px;margin-top:6px}
.mc-hr{border:0;border-top:1.5px solid var(--mc-line);margin:20px 0 14px}
.mc-unitwrap{position:relative}.mc-unitwrap .mc-input{padding-left:96px}
.mc-unit{position:absolute;left:10px;top:50%;transform:translateY(-50%);border:1.5px solid var(--mc-line)!important;border-radius:16px;padding:4px 18px;font-size:16px;background:#fff!important;min-width:64px}
select.mc-input{appearance:auto}
.mc-cloud{position:relative}.mc-cloud i{position:absolute;bottom:7px;left:7px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--mc-primary);background:#9aa}
.mc-cloud.s-ok i{background:#3ddc84}.mc-cloud.s-wait i{background:#ffb300}.mc-cloud.s-err i{background:#ff5252}.mc-cloud.s-off i{background:#9e9e9e}