:root{font-family:Inter,system-ui,-apple-system,"Noto Sans Arabic",sans-serif;background:#0e172c;color:#f5f7ff;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #344668;background:#1c2c4c;padding:0 max(18px,calc((100vw - 1140px)/2));gap:18px}.brand{display:flex;align-items:center;gap:12px}.mark{font-size:35px;font-weight:900;background:linear-gradient(145deg,#f8cc67,#8f61fa);color:transparent;background-clip:text}.brand strong{display:block;font-size:27px}.brand small{font-size:11px;color:#b8c4df}.top{display:flex;gap:9px}main{max-width:1140px;margin:auto;padding:30px 18px 75px}button,input,select,textarea{font:inherit;border:1px solid #425778;border-radius:11px;padding:12px;background:#101b32;color:#f6f8ff}button{cursor:pointer}button:hover,.provider:hover{border-color:#9182ef}input,select,textarea{width:100%}label{display:block;font-size:13px;color:#b4c3de;margin:14px 0 7px}button.primary{background:#6758d8;border:0;font-weight:700;padding:14px}.auth{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start;margin:42px auto;max-width:1050px}.card,.panel{border:1px solid #344766;border-radius:20px;background:#1e2d4b;padding:26px;box-shadow:0 15px 38px #0002}.hero{background:radial-gradient(circle at top right,#41336a,#172947 70%);min-height:480px;padding:44px}.pill,.eyebrow{color:#bcb3ff;letter-spacing:.07em;font-size:12px}.hero h1{font-size:clamp(30px,4vw,51px);line-height:1.16}.hero p{color:#bfcde8;line-height:1.8}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}.features span{border:1px solid #53698d;border-radius:100px;padding:10px 13px}.auth form{display:flex;flex-direction:column}.auth h2{margin:6px 0 14px}.link{border:0;background:transparent;color:#bcb3ff;margin:10px 0}.line{text-align:center;color:#a4b4ce;margin:6px}.provider{color:inherit;text-decoration:none;border:1px solid #52647e;border-radius:10px;padding:15px;text-align:center;margin:5px 0;font-weight:600}.muted{color:#acbbd5;font-size:13px;line-height:1.6}.apphead{display:flex;align-items:end;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:10px 0 25px}.apphead h1{margin:4px 0}.apphead>div:last-child{display:flex;gap:8px}.apphead select{max-width:240px}nav{display:flex;gap:7px;overflow:auto;margin:18px 0 26px;padding-bottom:9px}nav button{white-space:nowrap;background:#202d49;padding:13px 16px}nav button.active{background:#6758d8;border-color:#6758d8}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.metric{background:#1f3050;padding:22px;border-radius:15px;border:1px solid #344968}.metric small{color:#aebbd4}.metric strong{display:block;margin-top:10px;font-size:27px}.panel{margin:18px 0;overflow:auto}.panel h2{margin-top:0}.actions{display:flex;flex-wrap:wrap;gap:9px}.actions button{flex:1}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.formgrid label{margin:0}.formgrid input,.formgrid select{margin-top:6px}.panel form button{margin-top:14px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:570px;text-align:start}th,td{border-bottom:1px solid #3a4b68;padding:13px 12px;text-align:start;font-size:14px}th{color:#aebfdb;font-weight:600}#flash{position:fixed;bottom:25px;right:20px;max-width:360px;border-radius:12px;background:#32385e;color:white;padding:14px;display:none;box-shadow:0 5px 20px #0008}footer{text-align:center;padding:28px;color:#8fa0bb;font-size:12px}[dir=rtl] .brand,[dir=rtl] .top{direction:ltr}[dir=rtl] .auth,[dir=rtl] .panel{direction:rtl}@media(max-width:750px){.auth{grid-template-columns:1fr;margin-top:5px;gap:16px}.hero{min-height:auto;padding:25px}.hero h1{font-size:28px}.card{padding:20px}.grid{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.apphead>div:last-child{width:100%}.apphead select{min-width:0;flex:1}.brand strong{font-size:22px}header{padding:0 14px}main{padding:16px 12px 35px}}
[hidden]{display:none!important}@media print{header,nav,.actions,form,#flash,#logout,#newBusiness{display:none!important}body{background:#fff;color:#111}.panel,.metric{background:white;color:#111;box-shadow:none;border:1px solid #ddd}th,td{color:#111}}

/* Logical layout follows the selected language; horizontal navigation remains scrollable. */
[dir=rtl] .brand,[dir=rtl] .top{direction:rtl}
#who,input[type=email],input[type=password],input[name=currency],input[name=code]{direction:ltr;text-align:start}
.apphead>div,.top,.brand{min-width:0}.apphead h1{overflow-wrap:anywhere}
[dir=rtl] #flash{right:auto;left:20px}
/* Accounting forms and reports */
.wide{grid-column:1/-1}.lineitem,.journalline{padding:12px;margin-block:10px;border:1px solid #ccd5e2;border-radius:10px}.filterbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:18px}.filterbar label{min-width:130px;flex:1}textarea{width:100%;min-height:70px;padding:10px;border:1px solid #bec9da;border-radius:8px;font:inherit}.actions{display:flex;flex-wrap:wrap;gap:6px}.actions button{white-space:nowrap}button:disabled{opacity:.55;cursor:wait}nav{flex-wrap:wrap}td{vertical-align:top}.invoice-print{background:white;color:#15213b;padding:20px}@media(max-width:650px){.filterbar{display:grid;grid-template-columns:1fr 1fr}.filterbar label{min-width:0}.formgrid{grid-template-columns:1fr}.lineitem,.journalline{padding:10px}.actions{min-width:110px}header{gap:10px;flex-wrap:wrap}main{padding-inline:10px}}@media print{.filterbar,form,nav,header,.actions,button,.apphead{display:none!important}.panel{break-inside:avoid;border:0;box-shadow:none}.printing-invoice #pane>*:not(#invoiceDetail){display:none!important}.printing-invoice #invoiceDetail{display:block!important}.printing-invoice #invoiceDetail .panel>*:not(.invoice-print){display:none!important}body,main{background:white!important;color:black!important}.tablewrap{overflow:visible!important}table{font-size:10pt}}

.brand-logo{display:block;width:64px;height:64px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}@media(max-width:480px){.brand-logo{width:52px;height:52px}.brand{gap:8px}}
/* Header grows with its contents, including longer Arabic and Urdu controls. */
header{height:auto;min-height:82px;padding-block:9px;flex-wrap:nowrap}
.brand>div{min-width:0}.brand small{white-space:normal;line-height:1.5}
.top{align-items:center;flex-shrink:0}.top #lang{width:108px;flex:none}.top #logout{flex:none;white-space:nowrap;line-height:1.4}
@media(max-width:750px){
 header{min-height:72px;padding:10px 12px;gap:10px;align-items:center}
 .brand{gap:7px}.brand-logo{width:44px;height:44px}.brand strong{font-size:21px;line-height:1.2}.brand small{font-size:9px;max-width:115px}
 .top{gap:6px}.top #lang{width:88px;min-width:0;max-width:88px;padding:9px 5px;font-size:12px;height:40px}.top #logout{font-size:12px;padding:9px 8px;min-height:40px}
 .apphead{gap:14px;margin-block:14px 18px}.apphead h1{font-size:26px;line-height:1.45;margin-block:5px 10px}.apphead .eyebrow{font-size:11px}#who{font-size:13px;overflow-wrap:anywhere;margin-block:5px 10px}
 .apphead>div:last-child{display:flex;align-items:center;gap:8px}.apphead #businessSelect{width:0;flex:1;min-width:0;max-width:100%;font-size:14px;padding:10px}.apphead #newBusiness{flex:none;white-space:nowrap;font-size:13px;padding:10px}
 #tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;max-width:100%;margin:12px 0 18px;padding:3px 1px 8px;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;scrollbar-width:thin}
 #tabs button{flex:0 0 auto;max-width:none;padding:10px 12px;font-size:13px;line-height:1.5;white-space:nowrap;scroll-snap-align:start}
 .metric{padding:17px}.metric strong{font-size:24px}.grid{gap:12px}
}
@media(max-width:360px){header{flex-wrap:wrap;row-gap:8px}.brand{flex:1 1 100%}.top{width:100%;justify-content:flex-end}.brand small{max-width:none}.apphead h1{font-size:23px}}
/* One header row at phone widths; the navigation is a disclosure menu. */
#login{flex:none;white-space:nowrap;line-height:1.4}
.app-menu{position:relative;margin:16px 0 20px;z-index:10}
.app-menu summary{display:flex;align-items:center;gap:10px;width:100%;padding:12px 15px;background:#202d49;border:1px solid #425778;border-radius:12px;list-style:none;cursor:pointer;min-height:48px;font-size:15px}
.app-menu summary::-webkit-details-marker{display:none}.app-menu summary::marker{content:''}.app-menu summary:focus-visible{outline:2px solid #c3baff;outline-offset:3px}.app-menu[open] summary{border-color:#9182ef}
.menu-icon{font-size:19px;line-height:1}#activeMenuLabel{margin-inline-start:auto;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c9c1ff;font-size:14px}
#appMenu #tabs{position:absolute;inset-inline-start:0;top:calc(100% + 6px);display:grid;grid-template-columns:1fr;gap:4px;width:min(100%,420px);max-width:100%;max-height:min(65vh,560px);overflow-x:hidden;overflow-y:auto;margin:0;padding:8px;background:#172640;border:1px solid #52647e;border-radius:12px;box-shadow:0 12px 28px #0006;scroll-snap-type:none}
#appMenu:not([open]) #tabs{display:none}#appMenu #tabs button{width:100%;max-width:100%;text-align:start;white-space:normal;overflow-wrap:anywhere;padding:11px 13px;line-height:1.5;font-size:14px;border-radius:8px;scroll-snap-align:none}#appMenu #tabs button.active{background:#6758d8}
@media(max-width:750px){
 header{display:flex;flex-wrap:nowrap;min-height:64px;gap:8px;padding:10px}
 .brand{flex:1 1 auto;min-width:0;gap:5px}.brand-logo{width:36px;height:36px}.brand strong{font-size:20px;white-space:nowrap}.brand small{display:none}
 .top{flex:0 0 auto;width:auto;gap:5px;align-items:center;justify-content:flex-end}.top #lang{width:76px;max-width:76px;height:36px;padding:7px 3px;font-size:11px}.top #logout,.top #login{height:36px;min-height:36px;padding:7px;font-size:11px;white-space:nowrap}
 .app-menu{margin:12px 0 18px}.app-menu summary{padding:10px 12px;font-size:14px}#activeMenuLabel{font-size:13px}
}
@media print{#appMenu,#login{display:none!important}}

#app>.app-menu:first-child{margin-top:0;margin-bottom:18px}

/* Account navigation now occupies the previous logout position in the header. */
header{position:relative;z-index:30}header #appMenu{position:static;flex:none;margin:0}header #appMenu summary{width:auto;min-height:40px;padding:9px 11px;gap:7px;font-size:13px;white-space:nowrap}header #activeMenuLabel{display:none}
header #appMenu #tabs{inset-inline-start:auto;inset-inline-end:12px;top:calc(100% + 5px);width:min(340px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
header #appMenu #logout{border-color:#73505c;color:#ffc5ce;margin-top:6px;height:auto;min-height:40px;text-align:start;white-space:normal}
@media(max-width:750px){header #appMenu summary{height:36px;min-height:36px;padding:7px 8px;font-size:11px;gap:5px}header #appMenu .menu-icon{font-size:16px}}
#worldBusinessDialog{background:#1d2e50;color:#f4f6ff;border:1px solid #526584;border-radius:18px;padding:20px;width:min(520px,calc(100vw - 36px));max-height:85vh;overflow:auto;box-sizing:border-box}#worldBusinessDialog::backdrop{background:#0009}#worldBusinessDialog select,#worldBusinessDialog input{max-width:100%;box-sizing:border-box}#worldBusinessDialog button{margin:6px}