/* Colour roles: navy = frame, blue = normal actions, green = money in / save & print, amber = due or waited on, red = delete only. */
:root{--go:#15803D;--go-d:#116B33;--card:#fff;--amber:#B45309;--amber-bg:#FEF3C7}

/* Large text for older eyes or small tablets */
html[data-size=large] body{zoom:1.14}
@media(max-width:700px){html[data-size=large] body{zoom:1.08}}

/* Bigger tap targets on touch screens */
@media(pointer:coarse){.btn,.seg a,.seg button,.nav .ni{min-height:44px}input,select,textarea{min-height:44px}}

/* Dark mode, easy on the eyes for evening shifts */
html[data-theme=dark]{color-scheme:dark;--bg:#0B1624;--card:#112238;--line:#243750;--line2:#1B2D45;--text:#E7EEF6;--t2:#C4D0DE;--muted:#93A6BC;--faint:#6F849C;--blue-l:#0F3250;--navy:#2B77B8;--ok:#4ADE80;--warn:#FBBF24;--bad:#F87171;--go:#15803D}
html[data-theme=dark] body{background:var(--bg);color:var(--text)}
html[data-theme=dark] .side,html[data-theme=dark] .card,html[data-theme=dark] .tw,html[data-theme=dark] .top,html[data-theme=dark] header,html[data-theme=dark] .drw,html[data-theme=dark] .box{background:var(--card);color:var(--text)}
html[data-theme=dark] [style*="background:#fff"],html[data-theme=dark] [style*="background: #fff"],html[data-theme=dark] [style*="background:white"]{background:var(--card)!important}
html[data-theme=dark] [style*="background:#F8FAFC"],html[data-theme=dark] [style*="background:#F4F7FA"],html[data-theme=dark] [style*="background:#F1F5F9"],html[data-theme=dark] [style*="background:var(--bg)"]{background:var(--bg)!important}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:#0E1D30;color:var(--text);border-color:var(--line)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:var(--faint)}
html[data-theme=dark] .btn.ghost{background:var(--card);color:var(--text);border-color:var(--line)}html[data-theme=dark] .btn.ghost:hover{background:#17304D;border-color:#2B77B8}
html[data-theme=dark] .seg{background:#0E1D30}html[data-theme=dark] .seg a.on,html[data-theme=dark] .seg button.on{background:var(--card);color:var(--text)}
html[data-theme=dark] .nav .ni{color:var(--t2)}html[data-theme=dark] .nav .ni:hover{background:#17304D}html[data-theme=dark] .nav .ni.on{background:var(--blue);color:#fff}
html[data-theme=dark] .sfoot .ni .i,html[data-theme=dark] .nav .ni .i{color:inherit}
html[data-theme=dark] .logo .a{color:#fff}
html[data-theme=dark] a{color:#7CC3EC}html[data-theme=dark] .btn,html[data-theme=dark] .nav a,html[data-theme=dark] .seg a{color:inherit}
html[data-theme=dark] .btn:not(.ghost){color:#fff}
html[data-theme=dark] hr{border-color:var(--line)}
html[data-theme=dark] th{background:#0E1D30!important}
/* The printed slip stays paper white so what you see is what prints. */
html[data-theme=dark] .slip,html[data-theme=dark] .slip *{background-color:#fff;color:#0F172A}
html[data-theme=dark] .slip .mute{color:#475569}
html[data-theme=dark] .noprint .card{background:var(--card)}
/* Sales screen pieces that carry their own white */
html[data-theme=dark] .sec,html[data-theme=dark] .bt,html[data-theme=dark] .mode,html[data-theme=dark] .chipb,html[data-theme=dark] .rnd,html[data-theme=dark] .fld2,html[data-theme=dark] .pin,html[data-theme=dark] .rxbox,html[data-theme=dark] .frame,html[data-theme=dark] .acc,html[data-theme=dark] .stp,html[data-theme=dark] .cal,html[data-theme=dark] .sum,html[data-theme=dark] .pm,html[data-theme=dark] .qk,html[data-theme=dark] .hl,html[data-theme=dark] .modal .mb{background:var(--card);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .sec>.hd,html[data-theme=dark] .dbox,html[data-theme=dark] .dash,html[data-theme=dark] .opt,html[data-theme=dark] .stp button,html[data-theme=dark] .frame.on,html[data-theme=dark] .acc.on{background:var(--bg);color:var(--text)}
html[data-theme=dark] .bt:hover,html[data-theme=dark] .hl:hover,html[data-theme=dark] .chipb:hover{background:#17304D}
html[data-theme=dark] .bt.pri,html[data-theme=dark] .mode.on,html[data-theme=dark] .chipb.on,html[data-theme=dark] .rnd.on,html[data-theme=dark] .pm.on{background:var(--blue);color:#fff;border-color:var(--blue)}
html[data-theme=dark] .rxbox input,html[data-theme=dark] .rxbox button,html[data-theme=dark] .rxbox span,html[data-theme=dark] .fld2 input,html[data-theme=dark] .fld2 span,html[data-theme=dark] .stp input{background:transparent;color:var(--text)}
html[data-theme=dark] .pdsel{background:var(--bg);color:var(--t2)}
html[data-theme=dark] .totalb{background:#0F3250}
html[data-theme=dark] .cal .g button{color:var(--text)}
html[data-theme=dark] .pv{background:#0B1624}
html[data-theme=dark] .iconbtn,html[data-theme=dark] .stickyh,html[data-theme=dark] .kbd{background:var(--card);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .iconbtn .i,html[data-theme=dark] .iconbtn svg{color:var(--text)}
html[data-theme=dark] .kbdbtn{background:var(--bg);color:var(--t2)}
/* Single-card pages: lock screen, two-step code, locked account */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg)}
.center .box.card{width:min(400px,100%);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 40px rgba(15,23,42,.12)}
.center .brand{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}.center .brand b{color:var(--blue)}
.center h1{margin:0}.center p.sub{margin:0;color:var(--muted)}

/* ---------- Profile dropdown ---------- */
.pop.pm2{width:316px;padding:0;overflow:hidden;border-radius:18px;top:54px;box-shadow:0 18px 48px rgba(15,23,42,.22);border:1px solid var(--line)}
.pm2-head{display:flex;gap:14px;align-items:center;padding:18px;background:linear-gradient(135deg,#123A63 0%,#1683C2 100%);color:#fff}
.av.big{width:54px;height:54px;font-size:19px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);color:#fff}
.pm2-name{font-weight:700;font-size:16px;line-height:1.25}.pm2-role{font-size:12px;color:#CFE6F7;margin-top:1px}.pm2-sub{font-size:12px;color:#E6F2FB;margin-top:3px;font-variant-numeric:tabular-nums}
.pm2-list{padding:8px;display:flex;flex-direction:column;gap:2px}
.pm2 .mi{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--text);font-weight:600;font-size:14px;text-decoration:none;background:none;border:none;width:100%;text-align:left;cursor:pointer}
.pm2 .mi:hover{background:var(--blue-l)}.pm2 .mi .tx{flex:1}.pm2 .mi>.i:last-child{color:var(--faint)}
.pm2 .tile{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:#EBF5FC;color:#1683C2}
.pm2-out{border-top:1px solid var(--line2);padding:8px;margin:0}.pm2 .mi.out{color:#B91C1C}.pm2 .mi.out .tile{background:#FEE2E2;color:#B91C1C}.pm2 .mi.out:hover{background:#FEF2F2}
.pm2-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:39}
@media(max-width:760px){.pop.pm2{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:22px 22px 0 0;z-index:41;max-height:86vh;overflow:auto}}

/* ---------- Header tools (sales screen) ---------- */
.headtools{display:flex;align-items:center;gap:8px;min-width:0}
.ht{height:38px;padding:0 14px;border-radius:11px;border:1.5px solid var(--line);background:#fff;color:var(--t2);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;transition:all .15s}
.ht:hover{border-color:var(--blue);color:var(--blue)}
.ht.new{background:linear-gradient(135deg,#1683C2,#126DA3);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(22,131,194,.3)}.ht.new:hover{color:#fff;filter:brightness(1.06)}
.ht.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:0 10px}
@media(max-width:1200px){.ht .lb{display:none}.ht{padding:0 11px}}

/* ---------- A little more colour, light mode ---------- */
body{background:linear-gradient(180deg,#EEF5FB 0,#F4F7FA 220px)}
.head{background:linear-gradient(90deg,#fff 0,#F3F9FE 100%)}
.nav .ni .i{color:#1683C2}.nav .ni.on .i{color:#fff}
.nav .grp{color:#6B8BA8}
.side{background:linear-gradient(180deg,#fff 0,#F5F9FD 100%)}
.card,.tw{box-shadow:0 1px 2px rgba(18,58,99,.04)}
.pagehead h1{color:var(--navy)}
@media(max-width:760px){.head #daybtn,.head .ht.ghost,.head .hsearch{display:none!important}.headtools{gap:6px}.ht{padding:0 10px}.head .user .who{display:none}}
.lockbtn{position:relative;text-decoration:none;color:var(--navy)}.lockbtn .lk{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;background:var(--navy);color:#fff;border-radius:6px;padding:0 5px;line-height:14px;white-space:nowrap}.lockbtn .lk[hidden]{display:none}
@media(max-width:760px){.lockbtn .lk{display:none}}

/* One palette: navy and blue. Red stays only for delete and short cash. */
.nr .tile{background:var(--blue-l)!important;color:var(--blue)!important}
.tile2 .i,.kpi .i{color:var(--blue)}
.rxbox .sg{background:#EBF5FC!important;color:#1683C2!important}.rxbox .sg[style*="#FEE2E2"]{background:#E2EAF3!important;color:#123A63!important}

/* Amount box used on Settings and the sales screen */
.fld2{display:flex;align-items:center;height:38px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:0 12px;gap:8px}.fld2:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,131,194,.12)}
.fld2 input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;height:100%;padding:0;box-shadow:none;border-radius:0}
.fld2>span{flex:none;white-space:nowrap}

/* ---------- Urdu and Arabic: fonts and right-to-left ---------- */
@font-face{font-family:'Alvi Nastaleeq';src:local('Alvi Nastaleeq'),local('AlviNastaleeq'),local('Alvi Nastaleeq Lahori'),url('/fonts/AlviNastaleeq.ttf') format('truetype');font-display:swap}
html[lang=ar] body,html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea,html[lang=ar] button{font-family:'Almarai','Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif}
html[lang=ur] body,html[lang=ur] input,html[lang=ur] select,html[lang=ur] textarea,html[lang=ur] button{font-family:'Alvi Nastaleeq','Noto Nastaliq Urdu','Noto Naskh Arabic','Segoe UI',Tahoma,serif;line-height:1.85}
html[lang=ur] .btn,html[lang=ur] .bt,html[lang=ur] .act,html[lang=ur] .ht,html[lang=ur] .chipb,html[lang=ur] .pm,html[lang=ur] .qk,html[lang=ur] .mode,html[lang=ur] .seg button,html[lang=ur] .seg a,html[lang=ur] .nav .ni{line-height:1.5}
html[lang=ur] .tsheet .tot b,html[lang=ur] .ordno b,html[lang=ur] .mono,html[lang=ar] .mono{font-family:'Inter',system-ui,sans-serif}
html[dir=rtl] .side{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .sum{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .pop{right:auto;left:0}
html[dir=rtl] .notif{right:auto;left:0}
html[dir=rtl] .nav .ni.sub{padding-left:12px;padding-right:46px}
html[dir=rtl] .tip::after{left:auto;right:50%;transform:translateX(50%)}
html[dir=rtl] .lockbtn .lk{left:50%}
html[dir=rtl] input[type=number],html[dir=rtl] input[inputmode=numeric],html[dir=rtl] input[inputmode=decimal],html[dir=rtl] input[type=tel]{direction:ltr;text-align:right}
html[dir=rtl] .i[style*="caret-right"],html[dir=rtl] .i[style*="arrow-right"]{transform:scaleX(-1)}
html[dir=rtl] .kb,html[dir=rtl] .kbd{direction:ltr;unicode-bidi:isolate}
.pm2-lang{padding:8px 12px 10px;border-top:1px solid var(--line2)}.pm2-lang .lbl2{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.langpills{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}.pm2-lang .langpills{margin-top:0;justify-content:flex-start}
.langpills button{height:30px;padding:0 14px;border:1.5px solid var(--line);background:#fff;border-radius:999px;font-weight:700;font-size:12px;color:var(--t2);cursor:pointer;line-height:1.2}
.langpills button:hover{border-color:var(--blue);color:var(--blue)}
html[lang=en] .lp-en,html[lang=ur] .lp-ur,html[lang=ar] .lp-ar{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Text size (Settings > Appearance, or A− / A+ in the profile menu) ---------- */
html[data-size=small] body{zoom:.9}
html[data-size=large] body{zoom:1.14}
html[data-size=larger] body{zoom:1.28}
html[data-size=largest] body{zoom:1.44}
@media(max-width:700px){html[data-size=large] body{zoom:1.08}html[data-size=larger] body{zoom:1.14}html[data-size=largest] body{zoom:1.2}}
.szrow{display:flex;align-items:center;gap:8px}.szrow button{height:32px;min-width:48px;border:1.5px solid var(--line);background:#EEF5FB;border-radius:10px;font-weight:800;color:var(--navy);cursor:pointer}.szrow button:hover{border-color:var(--blue)}.szrow span{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}

/* ---------- Owner / shop logo in the top bar ---------- */
.av.logo{background:#fff;border:1.5px solid var(--line);padding:3px;overflow:hidden}.av.logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.av.big.logo{border:2px solid rgba(255,255,255,.7)}

/* ---------- One calm blue palette, easy on the eyes for long shifts ---------- */
:root{--bg:#E6EEF6;--line:#C3D6E7;--line2:#D8E5F0;--blue-l:#DDEBF8;--muted:#566C84;--t2:#2F4560;--faint:#7C92A8}
body{background:#E6EEF6}
.side,.head{background:#F4F8FC}
.card,.tw,.sec,.dbox,.pay,.sum,.drw{background:#FCFEFF;border-color:#C3D6E7}
.sec>.hd{border-bottom-color:#C3D6E7}
body .pin,body .fld2,body .rxbox,body .stp,body .vi,body input[type=text],body input[type=search],body input[type=number],body input[type=date],body input[type=tel],body input[type=email],body input[type=password],body select,body textarea{background:#F2F8FD;border-color:#B7CEE3}
body .fld2 input,body .rxbox input{background:transparent}
body .pin:focus,body .fld2:focus-within,body input:focus,body select:focus,body textarea:focus{background:#fff;border-color:var(--blue)}
body .chipb,body .rnd,body .pm,body .qk,body .bt,body .vc,body .hl,body .frame,body .acc,body .mode,body .btn.ghost,body .ht,body .pvb,body .rpx,body .seg.s2 button{background:#EEF5FB;border-color:#B7CEE3}
body .bt.pri,body .btn:not(.ghost):not(.red),body .ht.new{background:var(--blue)}
body .ht.new{background:linear-gradient(135deg,#1683C2,#126DA3)}
body .chipb.on,body .rnd.on,body .pm.on,body .vc.on,body .mode.on{background:var(--navy);border-color:var(--navy);color:#fff}
body .frame.on,body .acc.on{background:#D4E7F8;border-color:var(--navy)}
body .chipb:hover,body .bt:hover,body .frame:hover,body .acc:hover,body .btn.ghost:hover,body .ht:hover{border-color:var(--blue);background:#E3EFFA}
body .seg{background:#D6E5F2}body .seg a.on,body .seg button.on{background:#fff}
body .dash{background:#EAF3FB;border-color:#A9C6DE}
body .opt{background:#D6E5F2;color:#2F4560}
body .stp button{background:#DDEBF8}
body .rxbox .sg{border-right-color:#B7CEE3}
.sum .sf{background:#F1F7FC}
body .ht.ghost{background:transparent;border-color:transparent}
body .ht.ghost:hover{background:#E3EFFA;border-color:#B7CEE3}
.tsheet .c{color:var(--navy)}
.cust1{background:#FCFEFF}
.pagehead h1,h1{color:var(--navy)}
.nav .ni:hover{background:#E3EFFA}

/* ---------- Responsive: header and pages ---------- */
@media(max-width:1280px){.hsearch .kbd{display:none}.hsearch{flex:0 1 200px}.head{gap:8px}#daybtn>.who{display:none!important}}
@media(max-width:1100px){.hsearch{display:none}.head .user .who{display:none}}
@media(max-width:760px){.pm2-lang{padding-bottom:12px}}
img,svg,video{max-width:100%}
@media(max-width:900px){.head .ht.ghost,.head #daybtn{display:none!important}}
@media(max-width:760px){
 .head{gap:6px}.head>*{flex:none}
 .head .headtools{flex:1 1 0!important;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}.head .headtools::-webkit-scrollbar{display:none}.head .headtools .ht{flex:none}
 .head .user{padding:0}.head .iconbtn{width:38px;height:38px}
}

/* The page area must scroll inside the screen on phones (the shell is a column there) */
.main{min-height:0}
@media(max-width:760px){.main{flex:1 1 0;min-height:0;height:100%}.page{min-height:0}}
#sz,#th{flex-wrap:wrap;width:auto;max-width:100%}#sz button,#th button{flex:1 1 auto}