@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@700&display=swap');
:root{color-scheme:light;--fm-primary:#0D3D2B;--fm-primary-hover:#14563C;--fm-primary-tint:#E8F2EC;--fm-accent:#E85E0D;--fm-action:#B84506;--fm-accent-tint:#FDF0E8;--fm-success:#117A41;--fm-success-fill:#128C4B;--fm-danger:#C0392B;--fm-warning:#A94C08;--fm-bg:#F8F9FA;--fm-card:#FFFFFF;--fm-text:#2D3436;--fm-muted:#636E72;--fm-line:#D6DEE0;--fm-danger-tint:#FDECEA;--fm-radius:12px;--fm-space:16px;--fm-e1:0 1px 3px #00000014;--fm-e2:0 4px 12px #0000001f;--fm-e3:0 8px 24px #00000029;--fm-chart-1:#0D3D2B;--fm-chart-2:#128C4B;--fm-chart-3:#E85E0D;--fm-chart-4:#C0392B;--fm-chart-5:#8E44AD}
html[data-theme=dark]{color-scheme:dark;--fm-bg:#111916;--fm-card:#1B2621;--fm-text:#EDF3EF;--fm-muted:#B3C2B9;--fm-line:#3D5045;--fm-primary-tint:#263C30;--fm-accent-tint:#473024;--fm-success:#6ED99A;--fm-danger:#FF9A8D;--fm-warning:#FFBF75;--fm-danger-tint:#492B27}
/* Legacy aliases keep existing rendering and business logic intact. */
html:root{--green:var(--fm-primary);--green2:var(--fm-primary-hover);--green-light:var(--fm-primary-tint);--orange:var(--fm-accent);--orange-light:var(--fm-accent-tint);--ok:var(--fm-success);--pos:var(--fm-success);--bad:var(--fm-danger);--neg:var(--fm-danger);--warn:var(--fm-warning);--bg:var(--fm-bg);--paper:var(--fm-bg);--card:var(--fm-card);--white:var(--fm-card);--ink:var(--fm-text);--muted:var(--fm-muted);--line:var(--fm-line);--grey:var(--fm-line);--bg-page:var(--fm-bg);--bg-card:var(--fm-card);--bg-header:var(--fm-card);--text-primary:var(--fm-text);--text-secondary:var(--fm-muted);--border-default:var(--fm-line);--gray-50:var(--fm-bg);--gray-100:var(--fm-primary-tint);--success:var(--fm-success);--danger:var(--fm-danger)}
body{background:var(--fm-bg);color:var(--fm-text);font-size:15px}
h1,.page-title{font-size:24px}h2,h3{font-size:18px}small,.hint{font-size:13px}
@media(pointer:coarse){button,input,select{min-height:44px}}button{font-size:15px;transition:background .2s,box-shadow .2s,transform .2s}button:hover:not(:disabled){transform:translateY(-1px)}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--fm-accent);outline-offset:3px}
input,select,textarea{background-color:var(--fm-card);color:var(--fm-text);border-color:var(--fm-line)}
.n,.num,.money,.kpi-value,.qn,.lt{font-family:Tajawal,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.fm-icon{width:20px;height:20px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7}
.fm-theme{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:4px 10px;border:1px solid var(--fm-line);border-radius:12px;background:var(--fm-card);color:var(--fm-text);font:inherit;cursor:pointer}
.fm-theme-track{width:48px;height:26px;border-radius:20px;background:var(--fm-line);padding:3px;display:block}.fm-theme-track:before{content:'';display:block;width:20px;height:20px;background:var(--fm-muted);border-radius:50%;transition:transform .2s}.fm-theme[aria-checked=true] .fm-theme-track{background:var(--fm-primary)}.fm-theme[aria-checked=true] .fm-theme-track:before{background:white;transform:translateX(-22px)}
.fm-dialog{background:var(--fm-card)!important;color:var(--fm-text)!important;box-shadow:var(--fm-e3);border-radius:16px;animation:slideUp .25s ease-out}
.fm-modal-head{position:sticky;top:-1px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--fm-card);color:var(--fm-text);padding:12px 0;border-bottom:1px solid var(--fm-line);margin-bottom:16px}.fm-modal-head h2,.fm-modal-head h3{margin:0;font-size:18px}
.fm-close,.modal-close{width:32px!important;height:32px!important;min-height:32px;min-width:32px;padding:0!important;display:grid;place-items:center;background:var(--fm-primary-tint)!important;color:var(--fm-text)!important;border-radius:8px;font-size:22px}
.fm-closing{animation:fadeOut .15s ease-in!important}.fm-backdrop{position:fixed;inset:0;background:#0009;z-index:1100}
.fm-dialog input,.fm-dialog select,.fm-dialog textarea{background-color:var(--fm-card)!important;color:var(--fm-text)!important;border-color:var(--fm-line)!important}
html[data-theme=dark] :is(.card,.card-b,.modal-box,.modal-head,.filterbar,.pane,.pane-h,.pane-b,.tot,.ln,.scan,.sheet>div){background:var(--fm-card);color:var(--fm-text);border-color:var(--fm-line)}
html[data-theme=dark] :is(.green-text,.modal-title,.sheet h3,.box h1,.title){color:var(--fm-text)}
.btn.o,.tbtn.primary{background:var(--fm-action);color:white}.fm-chip{border-radius:20px;padding:8px 16px;min-height:40px;background:var(--fm-bg);color:var(--fm-text)}.fm-chip[aria-pressed=true]{background:var(--fm-primary);color:white}
.fm-badge{display:inline-block;border-radius:20px;padding:2px 8px;background:var(--fm-danger-tint);color:var(--fm-danger);font-size:13px}.fm-progress{height:8px;border-radius:8px;background:var(--fm-line);overflow:hidden}.fm-progress>span{display:block;height:100%;background:var(--fm-success-fill)}
table{border-collapse:collapse}th{background:var(--fm-primary);color:white;padding:14px 16px}td{padding:12px 16px;border-bottom:1px solid var(--fm-line)}tbody tr:nth-child(even){background:var(--fm-bg)}tbody tr:hover{background:var(--fm-primary-tint)}
.toast,.fm-toast{border-radius:12px;box-shadow:var(--fm-e2);animation:slideUp .25s;background:var(--fm-primary);color:white}.toast.bad{background:#C0392B;color:white}
.fm-skeleton,.skeleton{background:linear-gradient(90deg,var(--fm-line),var(--fm-card),var(--fm-line));background-size:200% 100%;animation:fmShimmer 1.4s infinite;border-radius:12px;min-height:32px}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fadeOut{to{opacity:0;transform:translateY(8px)}}@keyframes bounceIn{0%{transform:scale(.94)}65%{transform:scale(1.02)}100%{transform:none}}@keyframes pulse{50%{box-shadow:0 0 0 5px #C0392B22}}@keyframes flash{50%{box-shadow:0 0 0 5px var(--fm-accent)}}@keyframes fmShimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.fm-theme,.fm-modal-head .fm-close,.fm-table-tools,.fm-pagination{display:none!important}}

/* Readable text roles in dark mode; brand fills keep their original identity. */
html[data-theme=dark]{--success-bg:var(--fm-primary-tint);--danger-bg:var(--fm-danger-tint);--text-tertiary:var(--fm-muted);--green-mid:var(--fm-muted);--gray-200:var(--fm-line);--gray-300:var(--fm-line)}
html[data-theme=dark] :is(.prod .tx b,.prod .im,.cat:not(.on),.bs-row,.pnl-row,.tblpill,.page-title,.card-h h2){color:var(--fm-text)}
html[data-theme=dark] :is(.cat:not(.on),.pay:not(.on),.more button,.btn.g){background:var(--fm-primary-tint);color:var(--fm-text)}
html[data-theme=dark] .fm-dialog :is(p,small,label,div[style*="color:#555"],div[style*="color:#9a3412"]){color:var(--fm-text)!important}
html[data-theme=dark] .fm-dialog button[style*="background:#fff"]{background:var(--fm-primary-tint)!important;color:var(--fm-text)!important}
html[data-theme=dark] .kpi{background:var(--fm-card)!important;color:var(--fm-text)}
html[data-theme=dark] .kpi b{color:var(--fm-text)}
.fm-quantity{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.fm-quantity button{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--fm-primary-tint);color:var(--fm-text);font-size:22px}.fm-quantity input{min-width:60px;width:100px!important;font:700 24px Tajawal,sans-serif;text-align:center}

.fm-debit{background:var(--fm-accent-tint)!important}.fm-credit{background:var(--fm-primary-tint)!important}.btn.r,.toast.bad{background:#C0392B;color:white}.toast.ok{background:#117A41;color:white}

.bs-grid,#bsLines{direction:ltr}.bs-grid>*,.fm-balance-column{direction:rtl;min-width:0}

@media print{[data-fm-paged=true]{display:table-row!important}.fm-backdrop{display:none!important}}

html[data-theme=dark] :is(.tblpill,.chip:not(.bad)){background:var(--fm-primary-tint);color:var(--fm-text)}html[data-theme=dark] .chip.bad{background:var(--fm-danger-tint);color:var(--fm-danger)}

/* Theme surfaces cover legacy fixed fills without recoloring brand action fills. */
html[data-theme=dark]{--lift-1:var(--fm-e1);--lift-2:var(--fm-e2);--lift-3:var(--fm-e3);--edge:inset 0 1px 0 #ffffff08;--t1:var(--fm-danger-tint);--t1i:var(--fm-danger);--t2:var(--fm-primary-tint);--t2i:var(--fm-success);--t3:var(--fm-accent-tint);--t3i:var(--fm-warning)}
html[data-theme=dark] body{background:var(--fm-bg)}
html[data-theme=dark] :is(.tbar,.topbar,.filterbar,.tpill,.ticon,.top,.box,.card-h,.card-b,.scan,.tot,.pay:not(.on),.cat:not(.on),.more button,.btn.g,.pane-h,.pane-b){background:var(--fm-card);color:var(--fm-text);border-color:var(--fm-line)}
html[data-theme=dark] :is(.card h3,.pane h3,.prod span,.ln b,.lt,.tr:not(.big),.field label,.box h1,.q){color:var(--fm-text)}
html[data-theme=dark] :is(.tsearch input,input,select,textarea){background-color:var(--fm-card);color:var(--fm-text);border-color:var(--fm-line)}
html[data-theme=dark] input::placeholder{color:var(--fm-muted);opacity:1}
html[data-theme=dark] .appbar input{background:#ffffff0d;color:white;border-color:#ffffff30}
html[data-theme=dark] .appbar input::placeholder{color:#C1D2C7}
html[data-theme=dark] .kpi.warn{background:var(--fm-accent-tint)!important}html[data-theme=dark] .kpi.warn b{color:var(--fm-warning)!important}
html[data-theme=dark] .kpi.bad{background:var(--fm-danger-tint)!important}html[data-theme=dark] .kpi.bad b{color:var(--fm-danger)!important}
html[data-theme=dark] tbody tr:hover>td{background:var(--fm-primary-tint)}
html[data-theme=dark] .top button{background:var(--fm-primary-tint);color:var(--fm-text)}
html[data-theme=dark] .tk .nt{background:var(--fm-accent-tint);color:var(--fm-warning)}
html[data-theme=dark] .nav button.on{background:var(--fm-primary-tint);color:var(--fm-text)}
html[data-theme=dark] .tbl.available{background:var(--fm-card);color:var(--fm-text)}
html[data-theme=dark] .tbl:is(.occupied,.ordering){background:var(--fm-accent-tint);color:var(--fm-text)}
html[data-theme=dark] .tbl.waiting_payment{background:var(--fm-danger-tint);color:var(--fm-danger)}
.top{background:var(--fm-card);color:var(--fm-text)}.top .btn,.center .btn{background:var(--fm-primary);color:white}
.prod .im::after{background:none}.prod .mods{background:var(--fm-primary);color:white}
.prod.out{opacity:1}.prod.out .im{background:var(--fm-bg)!important}.prod.out .tx{color:var(--fm-muted)}
.fm-theme{width:auto}.fm-theme-track:before{position:relative}.fm-theme[aria-checked=true] .fm-theme-track:before{transform:translateX(-22px)}

html[data-theme=dark] .navlist .ic{background:var(--fm-primary-tint);color:var(--fm-text)}
html[data-theme=dark] .navlist button:hover{background:var(--fm-primary-tint);color:var(--fm-text)}
html[data-theme=dark] .thumb{background:var(--fm-primary-tint);color:var(--fm-text)}
#operationalInbox{overflow-x:hidden}.fm-modal-head>*{min-width:0}

html:root{--t1:var(--fm-danger-tint);--t1i:var(--fm-danger);--t2:var(--fm-primary-tint);--t2i:var(--fm-success);--t3:var(--fm-primary-tint);--t3i:var(--fm-success);--t4:var(--fm-accent-tint);--t4i:var(--fm-warning)}
.kpi.warn b{color:var(--fm-warning)!important}

/* Report subtotals use one authoritative foreground/background pair in both themes. */
table tbody tr.total>td{background:var(--fm-primary-tint)!important;color:var(--fm-text)!important;border-top:2px solid var(--fm-line);font-weight:700}
table tbody tr.total>td.pos,table tbody tr.total>td .pos{color:var(--fm-success)!important}
table tbody tr.total>td.neg,table tbody tr.total>td .neg{color:var(--fm-danger)!important}
table tbody tr:hover.total>td{background:var(--fm-primary-tint)!important}

html:root{--text-tertiary:var(--fm-muted)}

/* Checkboxes/radios never inherit the full-width text-field sizing; their label lays out inline. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-width:18px;min-height:0;padding:0;margin:0;flex:none;box-shadow:none;accent-color:var(--fm-primary);cursor:pointer;vertical-align:middle}
html[data-theme=dark] :is(input[type=checkbox],input[type=radio]){accent-color:var(--fm-success)}
label:has(>input[type=checkbox]:not(.fm-boolean)),label:has(>input[type=radio]){display:flex;align-items:center;gap:10px;cursor:pointer;line-height:1.5}
html[data-theme=dark] .big{color:var(--fm-success)}