:root{
--bg:#f5f7f6;
--panel:#fff;
--panel2:#f8faf9;
--text:#1e2a26;
--muted:#77827d;
--line:#e8eeeb;
--green:#177a5c;
--green2:#e8f5ef;
--red:#c75b57;
--red2:#fff0ef;
--amber:#b9812e;
--shadow:0 8px 26px #21372c0b;
--radius:18px}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Tajawal','Noto Sans Arabic',Tahoma,Arial,sans-serif;
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased}
body.dark{
--bg:#202825;
--panel:#29322e;
--panel2:#303a35;
--text:#e8efeb;
--muted:#a1aea7;
--line:#3a4640;
--green:#65c39a;
--green2:#28483a;
--red:#ef8b83;
--red2:#493331;
--amber:#dfb36b;
--shadow:0 8px 26px #10161230}
button,input,textarea,select{
font:inherit}
button{
cursor:pointer}
#app{
min-height:100vh}
.layout{
display:flex;
max-width:1440px;
margin:auto;
min-height:100vh}
.sidebar{
width:244px;
padding:30px 18px;
border-left:1px solid var(--line);
display:flex;
flex-direction:column;
gap:30px;
flex-shrink:0}
.brand{
display:flex;
align-items:center;
gap:11px;
padding:0 8px}
.brand img{
width:43px;
height:43px}
.brand strong{
font:700 23px 'DM Sans',sans-serif;
letter-spacing:-.7px}
.brand small{
display:block;
color:var(--muted);
font-size:12px;
margin-top:1px}
.nav{
display:grid;
gap:7px}
.nav button{
border:0;
background:transparent;
color:var(--muted);
padding:13px 14px;
border-radius:12px;
text-align:right;
display:flex;
align-items:center;
gap:12px;
font-weight:600}
.nav button.active{
background:var(--green2);
color:var(--green)}
.nav svg{
width:20px;
height:20px}
.side-foot{
margin-top:auto;
color:var(--muted);
font-size:12px;
padding:0 10px}
.main{
flex:1;
min-width:0;
padding:28px 38px 50px}
.top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:26px}
.top h1{
font-size:23px;
margin:0 0 4px}
.top p{
margin:0;
color:var(--muted);
font-size:13px}
.actions{
display:flex;
gap:9px;
align-items:center}
.icon-btn,.btn{
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
height:42px;
padding:0 14px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-weight:600}
.icon-btn{
width:42px;
padding:0}
.btn.primary{
background:var(--green);
border-color:var(--green);
color:white}
.btn.subtle{
background:var(--green2);
border-color:transparent;
color:var(--green)}
.btn.danger{
color:var(--red);
background:var(--red2);
border-color:transparent}
.btn.sm{
height:35px;
padding:0 11px;
font-size:13px}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-bottom:23px}
.stat{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--shadow)}
.stat-label{
color:var(--muted);
font-size:13px;
display:flex;
gap:8px;
align-items:center}
.stat-icon{
width:32px;
height:32px;
background:var(--green2);
color:var(--green);
border-radius:10px;
display:grid;
place-items:center}
.stat-icon svg{
width:17px}
.stat-value{
font:700 33px 'Tajawal',sans-serif;
margin-top:15px;
letter-spacing:-.5px}
.stat-foot{
color:var(--muted);
font-size:12px;
margin-top:5px}
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow)}
.card-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:19px 21px;
border-bottom:1px solid var(--line)}
.card-head h2{
font-size:16px;
margin:0}
.card-head p{
font-size:12px;
color:var(--muted);
margin:4px 0 0}
.table-wrap{
overflow:auto}
.table{
width:100%;
border-collapse:collapse;
white-space:nowrap}
.table th{
text-align:right;
color:var(--muted);
font-size:12px;
font-weight:500;
padding:13px 20px;
background:var(--panel2)}
.table td{
padding:14px 20px;
border-top:1px solid var(--line);
font-size:14px}
.customer{
display:flex;
align-items:center;
gap:11px}
.avatar{
height:37px;
width:37px;
border-radius:12px;
background:var(--green2);
color:var(--green);
display:grid;
place-items:center;
font-weight:700}
.customer b{
display:block;
font-size:14px}
.customer small{
display:block;
color:var(--muted);
font-size:12px;
margin-top:2px}
.money{
font:700 18px 'Tajawal',sans-serif}
.money.debt{
color:var(--red)}
.money.good{
color:var(--green)}
.toolbar{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap}
.search{
position:relative}
.search input{
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
height:42px;
border-radius:12px;
padding:0 40px 0 13px;
outline:none;
width:250px}
.search svg{
position:absolute;
right:13px;
top:12px;
width:17px;
color:var(--muted)}
.empty{
text-align:center;
padding:36px 20px;
color:var(--muted)}
.empty svg{
width:38px;
height:38px;
display:block;
margin:0 auto 12px;
opacity:.7}
.empty b{
display:block;
color:var(--text);
margin:8px 0 4px}
.pill{
padding:5px 9px;
border-radius:20px;
font-size:12px;
font-weight:600}
.pill.debt{
background:var(--red2);
color:var(--red)}
.pill.pay{
background:var(--green2);
color:var(--green)}
.modal-back{
position:fixed;
inset:0;
background:#0d17128a;
display:grid;
place-items:center;
padding:16px;
z-index:10}
.modal{
background:var(--panel);
width:min(100%,480px);
border-radius:20px;
box-shadow:0 20px 70px #0003;
max-height:90vh;
overflow:auto}
.modal-head{
padding:21px 23px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center}
.modal-head h2{
font-size:18px;
margin:0}
.modal-body{
padding:22px;
display:grid;
gap:15px}
.field{
display:grid;
gap:6px}
.field label{
font-size:13px;
font-weight:600}
.field input,.field textarea,.field select{
width:100%;
border:1px solid var(--line);
background:var(--bg);
color:var(--text);
border-radius:11px;
padding:11px 12px;
outline:none}
.field textarea{
min-height:75px;
resize:vertical}
.modal-actions{
display:flex;
justify-content:flex-start;
gap:9px;
padding:0 22px 22px}
.detail-top{
padding:22px;
display:flex;
justify-content:space-between;
align-items:center}
.detail-balance{
font:700 34px 'Tajawal',sans-serif;
color:var(--red)}
.detail-balance.good{
color:var(--green)}
.detail-section{
padding:0 22px 20px}
.detail-section h3{
font-size:15px}
.detail-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:13px 0;
border-top:1px solid var(--line)}
.filters{
display:flex;
gap:9px;
align-items:end;
flex-wrap:wrap;
padding:16px 20px;
border-bottom:1px solid var(--line)}
.filters .field{
min-width:160px}
.filters input{
padding:9px 10px}
.report-tabs{
display:flex;
gap:7px;
flex-wrap:wrap;
padding:17px 20px 0}
.report-tabs button{
border:1px solid var(--line);
background:var(--panel);
color:var(--muted);
border-radius:10px;
padding:8px 12px;
font-size:13px}
.report-tabs button.active{
background:var(--green2);
color:var(--green);
border-color:transparent}
.settings-row{
padding:19px 21px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:18px}
.settings-row:last-child{
border:0}
.settings-row b{
display:block}
.settings-row small{
display:block;
color:var(--muted);
margin-top:4px}
.toast{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
z-index:20;
background:#1d2a24;
color:white;
padding:12px 18px;
border-radius:12px;
box-shadow:var(--shadow)}
.mobile-nav{
display:none}
.footnote{
font-size:12px;
color:var(--muted);
padding:13px 19px}
.range-total{
display:flex;
gap:20px;
flex-wrap:wrap;
padding:14px 20px;
background:var(--panel2);
color:var(--muted);
font-size:13px}
.range-total b{
color:var(--text);
font-size:17px;
font-weight:700;
font-family:'Tajawal',sans-serif}
.table td.money{
font-size:18px;
font-family:'Tajawal',sans-serif;
font-weight:700}
@media(max-width:850px){
.sidebar{
width:205px;
padding:24px 12px}
.main{
padding:24px 22px 40px}
.stats{
gap:10px}
.stat{
padding:16px}
.stat-value{
font-size:27px}
}
@media(max-width:640px){
.layout{
display:block}
.sidebar{
display:none}
.main{
padding:18px 14px calc(88px + env(safe-area-inset-bottom))}
.top{
margin-bottom:19px}
.top h1{
font-size:21px}
.top p{
font-size:12px}
.actions .backup-short{
display:none}
.stats{
grid-template-columns:1fr 1fr;
gap:9px}
.stat{
padding:14px;
border-radius:15px}
.stat:first-child{
grid-column:span 2}
.stat-value{
font-size:27px;
margin-top:11px}
.stat-label{
font-size:12px}
.stat-icon{
width:28px;
height:28px}
.card-head{
padding:16px}
.table th,.table td{
padding:12px 14px}
.search{
flex:1}
.search input{
width:100%}
.toolbar{
width:100%}
.toolbar>.search{
flex-basis:100%}
.toolbar>.btn{
flex:1}
.mobile-nav{
display:flex;
position:fixed;
z-index:5;
bottom:0;
right:0;
left:0;
background:var(--panel);
border-top:1px solid var(--line);
padding:7px 8px calc(7px + env(safe-area-inset-bottom));
justify-content:space-around}
.mobile-nav button{
border:0;
background:none;
color:var(--muted);
display:grid;
justify-items:center;
gap:3px;
font-size:10px;
padding:5px 11px;
border-radius:10px}
.mobile-nav button.active{
color:var(--green)}
.mobile-nav svg{
width:21px;
height:21px}
.settings-row{
align-items:flex-start;
flex-direction:column}
.settings-row .btn{
align-self:stretch}
.filters{
padding:13px}
.filters .field{
flex:1;
min-width:130px}
.filters .btn{
width:100%}
.card-head .toolbar .btn{
flex:0}
.hide-mobile{
display:none}
}
svg{
width:20px;
height:20px;
flex:0 0 auto}
.stat-icon svg{
width:17px;
height:17px}
.empty svg{
width:38px;
height:38px}
.money,.stat-value,.detail-balance{
direction:rtl;
unicode-bidi:isolate;
font-variant-numeric:tabular-nums}
.stat-value{
line-height:1.3}
.btn,.icon-btn,.nav button,.mobile-nav button{
line-height:1.25}
.avatar{
flex:0 0 37px}
.customer{
min-width:0}
.customer>span:last-child{
min-width:0}
.customer small{
overflow:hidden;
text-overflow:ellipsis;
max-width:230px}
.date-picker{
position:relative}
.date-trigger{
width:100%;
min-height:42px;
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
border-radius:11px;
padding:9px 11px;
display:flex;
align-items:center;
gap:9px;
text-align:right}
.date-trigger svg{
width:18px;
height:18px;
color:var(--green)}
.calendar-pop{
position:fixed;
z-index:30;
top:0;
left:0;
width:280px;
padding:13px;
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 15px 42px #10251b30}
.cal-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px}
.cal-head b{
font-size:14px}
.cal-nav{
border:0;
background:var(--panel2);
color:var(--text);
width:31px;
height:31px;
border-radius:9px;
font-size:21px;
line-height:1}
.cal-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:3px;
text-align:center}
.cal-weekday{
font-size:11px;
color:var(--muted);
padding:5px 0}
.cal-day{
height:32px;
border:0;
border-radius:9px;
background:transparent;
color:var(--text);
font-size:12px}
.cal-day:hover{
background:var(--green2);
color:var(--green)}
.cal-day.selected{
background:var(--green);
color:white;
font-weight:700}
.cal-day.outside{
color:var(--muted);
opacity:.35}
.cal-footer{
display:flex;
justify-content:space-between;
margin-top:9px;
padding-top:8px;
border-top:1px solid var(--line)}
.cal-footer button{
border:0;
background:transparent;
color:var(--green);
font-size:12px;
padding:5px 8px}
*{
scrollbar-width:thin;
scrollbar-color:var(--muted) var(--panel2)}
*::-webkit-scrollbar{
width:8px;
height:8px}
*::-webkit-scrollbar-track{
background:var(--panel2);
border-radius:8px}
*::-webkit-scrollbar-thumb{
background:var(--line);
border:2px solid var(--panel2);
border-radius:8px}
*::-webkit-scrollbar-thumb:hover{
background:var(--muted)}
input[type=number]{
appearance:textfield;
-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0}
.field input:focus,.field textarea:focus,.field select:focus{
border-color:var(--green);
box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)}
.field textarea{
resize:none}
.field input,.field textarea,.field select{
accent-color:var(--green);
color-scheme:light}
body.dark .field input,body.dark .field textarea,body.dark .field select{
color-scheme:dark}
.debt-action{
color:var(--red);
background:var(--red2);
border-color:transparent}
.delete-customer{
color:#fff;
background:#536f7d;
border:1px solid #536f7d;
font-weight:700;
box-shadow:0 2px 0 #354d59;
transition:background .15s,transform .15s,box-shadow .15s}
.delete-customer:hover{
background:#435d6b;
transform:translateY(-1px);
box-shadow:0 3px 7px #354d5940}
.delete-customer:active{
transform:translateY(1px);
box-shadow:none}
.delete-customer:focus-visible{
outline:3px solid #7697a666;
outline-offset:2px}
.customer-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
gap:13px;
padding:16px}
.customer-card{
min-width:0;
border:1px solid var(--line);
background:var(--panel);
border-radius:15px;
padding:15px;
transition:border-color .15s,transform .15s}
.customer-card:hover{
border-color:var(--green);
transform:translateY(-1px)}
.customer-card-main{
width:100%;
border:0;
padding:0;
background:none;
color:var(--text);
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
gap:10px;
align-items:center;
text-align:right}
.customer-card-main .avatar{
width:40px;
height:40px;
flex-basis:40px}
.customer-card-info{
min-width:0}
.customer-card-info b,.customer-card-info small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.customer-card-info b{
font-size:14px}
.customer-card-info small{
font-size:12px;
color:var(--muted);
margin-top:4px}
.customer-card-balance{
font-size:18px;
font-weight:700;
white-space:nowrap;
font-family:'Tajawal',sans-serif}
.customer-card-balance.debt{
color:var(--red)}
.customer-card-balance.good{
color:var(--green)}
.customer-card-actions{
display:flex;
gap:8px;
margin-top:14px;
padding-top:12px;
border-top:1px solid var(--line)}
.customer-card-actions .btn{
flex:1}
.menu-toggle{
display:none}
.heading{
display:flex;
align-items:center;
gap:11px}
@media(max-width:640px){
.menu-toggle{
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:12px;
background:var(--panel);
color:var(--text);
font-size:22px;
line-height:1}
.mobile-nav{
display:none}
.menu-backdrop{
display:block;
position:fixed;
inset:0;
z-index:11;
border:0;
background:#10191570}
.sidebar.mobile-open{
display:flex;
position:fixed;
z-index:12;
top:68px;
right:12px;
bottom:auto;
width:min(280px,calc(100vw - 24px));
height:auto;
max-height:calc(100vh - 84px);
padding:56px 14px 14px;
background:var(--panel);
border:1px solid var(--line);
border-radius:18px;
box-shadow:0 18px 48px #0004;
overflow:auto;
gap:12px}
.sidebar.mobile-open .brand,.sidebar.mobile-open .side-foot{
display:none}
.sidebar.mobile-open .nav{
gap:5px}
.sidebar.mobile-open .nav button{
padding:12px 14px}
.mobile-menu-close{
position:absolute;
top:12px;
left:12px;
width:36px;
height:36px;
border-radius:11px;
border:1px solid var(--line);
background:var(--panel2);
color:var(--text);
font-size:23px;
line-height:1;
display:grid;
place-items:center}
.menu-backdrop{
background:#10191545}
}

.auth-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;box-sizing:border-box;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:var(--bg)}
.auth-card{width:min(100%,430px);padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.auth-brand img{width:48px;height:48px}
.auth-brand b{display:block;font:700 24px 'DM Sans',sans-serif}
.auth-brand small{display:block;color:var(--muted);font-size:12px}
.auth-card h1{margin:0 0 6px;font-size:22px}
.auth-card>p{margin:0 0 22px;color:var(--muted);font-size:14px}
.auth-card .field{margin:14px 0}
.auth-card .field input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);outline:none}
.auth-card .field input:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)}
.auth-submit{width:100%;margin-top:8px}
.auth-note{display:block;margin-top:18px;color:var(--muted);font-size:12px;line-height:1.7}
.logout-btn{white-space:nowrap}
@media(max-width:640px){.auth-card{padding:24px 20px}.top .logout-btn{padding:0 9px;font-size:12px}}

/* Prevent iOS Safari from auto-zooming when a form field receives focus. */
@media(max-width:640px){input,select,textarea{font-size:16px!important}}

.auth-error{display:none;color:var(--red);font-size:13px;margin-top:6px}.auth-error.visible{display:block}

.side-logout{position:relative;width:100%;justify-content:center;color:var(--red);background:var(--red2);border-color:transparent;padding-inline:42px}.side-logout:hover{filter:brightness(.97)}.side-logout svg{position:absolute;right:14px;width:18px;height:18px;color:var(--red)}