*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--color-bg);font-family:var(--font-family);color:var(--color-text)}
button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer}
body{direction:rtl;overflow-x:hidden}
.app{min-height:100vh;background:linear-gradient(180deg,#eff5fc 0,#fff 35%,#f8fbff 100%)}
.statusbar{height:34px;background:linear-gradient(135deg,#123f82,#082f6d);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700;position:relative;direction:ltr}
.statusbar .island{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:120px;height:24px;border-radius:20px;background:#020712}.status-icons{display:flex;gap:7px;align-items:center;font-size:12px}.signal{letter-spacing:-2px}.battery{background:#fff;color:#163c74;padding:2px 6px;border-radius:7px;font-size:11px}
.topbar{height:74px;background:linear-gradient(135deg,#123f82,#082f6d);color:#fff;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;padding:0 20px;position:sticky;top:0;z-index:30;box-shadow:0 8px 20px rgba(8,47,109,.13)}
.brand{text-align:center;line-height:1.1}.brand strong{display:block;font-size:24px;letter-spacing:.2px}.brand span{font-size:12px;opacity:.78}
.top-actions{display:flex;gap:12px;align-items:center}.icon-btn{width:42px;height:42px;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:50%;display:grid;place-items:center;position:relative}.icon-btn .dot{position:absolute;top:5px;left:6px;width:8px;height:8px;border-radius:50%;background:#ff4b56}
.topbar .menu-trigger{justify-self:start;background:transparent;border:0;color:#fff;padding:8px}
.icon{display:inline-block;width:22px;height:22px;background:currentColor;mask-repeat:no-repeat;mask-size:contain;mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;vertical-align:middle;flex:0 0 auto}
.icon-xs{width:15px;height:15px}.icon-sm{width:18px;height:18px}.icon-lg{width:28px;height:28px}.icon-xl{width:34px;height:34px}

.icon-receipt{mask-image:url("../assets/icons/receipt.svg");-webkit-mask-image:url("../assets/icons/receipt.svg")}
.icon-save{mask-image:url("../assets/icons/save.svg");-webkit-mask-image:url("../assets/icons/save.svg")}
.icon-search{mask-image:url("../assets/icons/search.svg");-webkit-mask-image:url("../assets/icons/search.svg")}
.icon-building{mask-image:url("../assets/icons/building.svg");-webkit-mask-image:url("../assets/icons/building.svg")}
.icon-filter{mask-image:url("../assets/icons/filter.svg");-webkit-mask-image:url("../assets/icons/filter.svg")}
.icon-database{mask-image:url("../assets/icons/database.svg");-webkit-mask-image:url("../assets/icons/database.svg")}
.icon-bank{mask-image:url("../assets/icons/bank.svg");-webkit-mask-image:url("../assets/icons/bank.svg")}
.icon-arrow-down{mask-image:url("../assets/icons/arrow-down.svg");-webkit-mask-image:url("../assets/icons/arrow-down.svg")}
.icon-percent{mask-image:url("../assets/icons/percent.svg");-webkit-mask-image:url("../assets/icons/percent.svg")}
.icon-whatsapp{mask-image:url("../assets/icons/whatsapp.svg");-webkit-mask-image:url("../assets/icons/whatsapp.svg")}
.icon-sync{mask-image:url("../assets/icons/sync.svg");-webkit-mask-image:url("../assets/icons/sync.svg")}
.icon-send{mask-image:url("../assets/icons/send.svg");-webkit-mask-image:url("../assets/icons/send.svg")}
.icon-layers{mask-image:url("../assets/icons/layers.svg");-webkit-mask-image:url("../assets/icons/layers.svg")}
.icon-edit{mask-image:url("../assets/icons/edit.svg");-webkit-mask-image:url("../assets/icons/edit.svg")}
.icon-book{mask-image:url("../assets/icons/book.svg");-webkit-mask-image:url("../assets/icons/book.svg")}
.icon-plus{mask-image:url("../assets/icons/plus.svg");-webkit-mask-image:url("../assets/icons/plus.svg")}
.icon-bell{mask-image:url("../assets/icons/bell.svg");-webkit-mask-image:url("../assets/icons/bell.svg")}
.icon-info{mask-image:url("../assets/icons/info.svg");-webkit-mask-image:url("../assets/icons/info.svg")}
.icon-wallet{mask-image:url("../assets/icons/wallet.svg");-webkit-mask-image:url("../assets/icons/wallet.svg")}
.icon-camera{mask-image:url("../assets/icons/camera.svg");-webkit-mask-image:url("../assets/icons/camera.svg")}
.icon-location{mask-image:url("../assets/icons/location.svg");-webkit-mask-image:url("../assets/icons/location.svg")}
.icon-check{mask-image:url("../assets/icons/check.svg");-webkit-mask-image:url("../assets/icons/check.svg")}
.icon-close{mask-image:url("../assets/icons/close.svg");-webkit-mask-image:url("../assets/icons/close.svg")}
.icon-cart{mask-image:url("../assets/icons/cart.svg");-webkit-mask-image:url("../assets/icons/cart.svg")}
.icon-calendar{mask-image:url("../assets/icons/calendar.svg");-webkit-mask-image:url("../assets/icons/calendar.svg")}
.icon-warehouse{mask-image:url("../assets/icons/warehouse.svg");-webkit-mask-image:url("../assets/icons/warehouse.svg")}
.icon-settings{mask-image:url("../assets/icons/settings.svg");-webkit-mask-image:url("../assets/icons/settings.svg")}
.icon-pdf{mask-image:url("../assets/icons/pdf.svg");-webkit-mask-image:url("../assets/icons/pdf.svg")}
.icon-trash{mask-image:url("../assets/icons/trash.svg");-webkit-mask-image:url("../assets/icons/trash.svg")}
.icon-lock{mask-image:url("../assets/icons/lock.svg");-webkit-mask-image:url("../assets/icons/lock.svg")}
.icon-arrow-up{mask-image:url("../assets/icons/arrow-up.svg");-webkit-mask-image:url("../assets/icons/arrow-up.svg")}
.icon-back{mask-image:url("../assets/icons/back.svg");-webkit-mask-image:url("../assets/icons/back.svg")}
.icon-coins{mask-image:url("../assets/icons/coins.svg");-webkit-mask-image:url("../assets/icons/coins.svg")}
.icon-home{mask-image:url("../assets/icons/home.svg");-webkit-mask-image:url("../assets/icons/home.svg")}
.icon-shield{mask-image:url("../assets/icons/shield.svg");-webkit-mask-image:url("../assets/icons/shield.svg")}
.icon-paperclip{mask-image:url("../assets/icons/paperclip.svg");-webkit-mask-image:url("../assets/icons/paperclip.svg")}
.icon-phone{mask-image:url("../assets/icons/phone.svg");-webkit-mask-image:url("../assets/icons/phone.svg")}
.icon-printer{mask-image:url("../assets/icons/printer.svg");-webkit-mask-image:url("../assets/icons/printer.svg")}
.icon-document{mask-image:url("../assets/icons/document.svg");-webkit-mask-image:url("../assets/icons/document.svg")}
.icon-excel{mask-image:url("../assets/icons/excel.svg");-webkit-mask-image:url("../assets/icons/excel.svg")}
.icon-barcode{mask-image:url("../assets/icons/barcode.svg");-webkit-mask-image:url("../assets/icons/barcode.svg")}
.icon-transfer{mask-image:url("../assets/icons/transfer.svg");-webkit-mask-image:url("../assets/icons/transfer.svg")}
.icon-clock{mask-image:url("../assets/icons/clock.svg");-webkit-mask-image:url("../assets/icons/clock.svg")}
.icon-menu{mask-image:url("../assets/icons/menu.svg");-webkit-mask-image:url("../assets/icons/menu.svg")}
.icon-invoice{mask-image:url("../assets/icons/invoice.svg");-webkit-mask-image:url("../assets/icons/invoice.svg")}
.icon-chart{mask-image:url("../assets/icons/chart.svg");-webkit-mask-image:url("../assets/icons/chart.svg")}
.icon-users{mask-image:url("../assets/icons/users.svg");-webkit-mask-image:url("../assets/icons/users.svg")}
.icon-user{mask-image:url("../assets/icons/user.svg");-webkit-mask-image:url("../assets/icons/user.svg")}
.icon-box{mask-image:url("../assets/icons/box.svg");-webkit-mask-image:url("../assets/icons/box.svg")}
.icon-tree{mask-image:url("../assets/icons/tree.svg");-webkit-mask-image:url("../assets/icons/tree.svg")}
.icon-tag{mask-image:url("../assets/icons/tag.svg");-webkit-mask-image:url("../assets/icons/tag.svg")}
.shell{display:grid;grid-template-columns:1fr;min-height:calc(100vh - 108px)}
.sidebar{position:fixed;inset:0 auto 0 0;width:min(88vw,330px);background:#fff;z-index:80;box-shadow:18px 0 45px rgba(13,45,87,.18);transform:translateX(-102%);transition:transform var(--transition);direction:rtl;padding:18px;overflow:auto}.sidebar.open{transform:translateX(0)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sidebar h2{margin:0;font-size:18px}.nav-list{display:grid;gap:6px}.nav-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:#31425a;background:#fff;border:1px solid transparent;padding:11px 12px;border-radius:12px;font-weight:600}.nav-link:hover,.nav-link.active{background:var(--tint-blue);color:var(--color-primary);border-color:#cfe0fa}.nav-link .num{margin-inline-start:auto;color:#8aa0bd;font-size:11px}.sidebar-divider{height:1px;background:#e8eef6;margin:14px 0}.sidebar-state{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sidebar-state button{border:1px solid var(--color-border);background:#fff;border-radius:10px;padding:9px 4px;font-size:11px}
.overlay{position:fixed;inset:0;background:rgba(4,14,28,.34);z-index:70;opacity:0;pointer-events:none;transition:opacity var(--transition)}.overlay.show{opacity:1;pointer-events:auto}
.main{width:100%;max-width:var(--max-content);margin:0 auto;padding:18px 16px calc(var(--bottomnav-h) + 18px)}
.screen{display:none;animation:screenIn .2s ease}.screen.active{display:block}@keyframes screenIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.title-wrap{display:flex;align-items:center;gap:10px}.title-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--color-blue);background:var(--tint-blue)}.screen-head h1{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.1}.head-select{display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);background:#fff;border-radius:13px;padding:10px 12px;min-height:42px;box-shadow:var(--shadow-sm)}
.searchbar{height:46px;border:1px solid var(--color-border);background:#fff;border-radius:15px;display:flex;align-items:center;gap:8px;padding:0 14px;box-shadow:var(--shadow-sm);margin-bottom:14px}.searchbar input{border:0;outline:0;background:transparent;flex:1;min-width:0}.searchbar .icon{color:#475569}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:14px}.card + .card{margin-top:12px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.card-title h2,.card-title h3{margin:0;font-size:16px}.section-title{font-size:16px;font-weight:800;margin:3px 0 10px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:12px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.field{display:grid;gap:5px}.field label{font-size:12px;font-weight:700}.required::after{content:' *';color:var(--color-red)}.control{height:var(--height-input);border:1px solid var(--color-border-strong);background:#fff;border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 11px;box-shadow:0 1px 3px rgba(15,35,68,.04)}.control:focus-within{border-color:#6ba7ff;box-shadow:0 0 0 3px rgba(28,100,242,.1)}.control input,.control select{width:100%;border:0;outline:0;background:transparent}.control select{appearance:none}.control .icon{color:#435572}.control.tinted{background:#f8fbff}
textarea.control{min-height:72px;height:auto;padding-top:11px;resize:vertical}
.btn{height:var(--height-btn);border:1px solid var(--color-border);border-radius:13px;background:#fff;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;transition:transform var(--transition),box-shadow var(--transition)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-primary{background:linear-gradient(135deg,#103f84,#0a326d);border-color:#103f84;color:#fff}.btn-blue{background:var(--tint-blue);color:#1758bd;border-color:#c9ddfb}.btn-green{background:var(--tint-green);color:#11863a;border-color:#c4efcf}.btn-red{background:var(--tint-red);color:#c82935;border-color:#ffd0d4}.btn-orange{background:var(--tint-orange);color:#b66e00;border-color:#ffe1a0}.btn-purple{background:var(--tint-purple);color:#6930c3;border-color:#ded0ff}.btn-sm{height:36px;padding:0 12px;font-size:12px;border-radius:10px}.btn-icon{width:42px;padding:0}.action-row{display:flex;gap:10px;flex-wrap:wrap}.action-row .btn{flex:1;min-width:115px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.kpi{min-height:96px;border-radius:16px;padding:13px;border:1px solid rgba(120,140,180,.16);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.kpi strong{display:block;font-size:22px;margin-top:7px;white-space:nowrap}.kpi small{color:#445670}.kpi-blue{background:linear-gradient(135deg,#f7fbff,#e5f1ff)}.kpi-green{background:linear-gradient(135deg,#f8fff9,#e6f8ea)}.kpi-red{background:linear-gradient(135deg,#fffafa,#ffecef)}.kpi-orange{background:linear-gradient(135deg,#fffdf8,#fff1d5)}.kpi-purple{background:linear-gradient(135deg,#fdfbff,#f1eaff)}.kpi .icon{width:28px;height:28px}.kpi-blue .icon{color:var(--color-blue)}.kpi-green .icon{color:var(--color-green)}.kpi-red .icon{color:var(--color-red)}.kpi-orange .icon{color:var(--color-orange)}.kpi-purple .icon{color:var(--color-purple)}
.table-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:15px;background:#fff}.data-table{width:100%;border-collapse:collapse;min-width:680px}.data-table th{background:linear-gradient(180deg,#edf5ff,#e5eefb);font-size:12px;padding:10px 8px;text-align:right;white-space:nowrap}.data-table td{padding:9px 8px;border-top:1px solid #edf1f6;font-size:12px;vertical-align:middle}.data-table tr:hover td{background:#fafcff}.row-title{display:flex;align-items:center;gap:8px;font-weight:700}.thumb{width:44px;height:38px;border-radius:9px;object-fit:cover;border:1px solid #e3eaf4;background:#f8fbff}.qty{display:inline-grid;grid-template-columns:28px 34px 28px;border:1px solid var(--color-border);border-radius:9px;overflow:hidden;height:30px;direction:ltr}.qty button{border:0;background:#f8fbff;color:#1260cc;font-weight:800}.qty input{width:34px;border:0;text-align:center;outline:0;background:#fff;font-size:12px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}.badge-green{color:#108333;background:#dcf7e4}.badge-red{color:#c52531;background:#ffe4e7}.badge-blue{color:#1e5ebd;background:#e2efff}.badge-orange{color:#a96200;background:#fff0cf}.badge-purple{color:#6930c3;background:#efe7ff}.badge-gray{color:#536074;background:#edf2f7}
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.summary-box{border:1px solid var(--color-border);border-radius:14px;padding:12px;background:#fff}.summary-box strong{font-size:20px;display:block;margin-top:5px}.summary-box.em{background:var(--tint-blue)}.summary-box.ok{background:var(--tint-green)}.summary-box.warn{background:var(--tint-orange)}.summary-box.bad{background:var(--tint-red)}
.segmented{display:flex;border:1px solid var(--color-border);border-radius:13px;overflow:hidden;background:#fff}.segmented button{border:0;background:transparent;padding:10px 18px;min-width:90px;font-weight:800}.segmented button.active{background:var(--color-primary);color:#fff}
.switch{position:relative;width:48px;height:26px;border-radius:99px;background:#cbd5e1;display:inline-block;vertical-align:middle;cursor:pointer;transition:background var(--transition)}.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform var(--transition)}.switch.on{background:#2680eb}.switch.on::after{transform:translateX(22px)}
.bottomnav{position:fixed;bottom:0;left:0;right:0;height:var(--bottomnav-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid #dce5f1;z-index:40;padding:7px 8px 10px;box-shadow:0 -8px 24px rgba(21,51,91,.06)}.bottomnav button{border:0;background:transparent;color:#4b5b72;display:grid;place-items:center;gap:4px;font-size:10px;font-weight:800;height:58px;border-radius:15px}.bottomnav button.active{background:#e7f1ff;color:#0f4ba2}.bottomnav .fab{width:52px;height:52px;border-radius:50%;margin:auto;background:linear-gradient(135deg,#174b99,#082f6d);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(8,47,109,.25)}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modal-card{width:min(640px,95vw);max-height:80vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 35px 80px rgba(4,20,45,.28);padding:18px;border:1px solid #dce5f1}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.modal-head h3{margin:0}.picker-list{display:grid;gap:8px}.picker-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-border);padding:11px;border-radius:12px;background:#fff}.picker-item:hover{background:#f5f9ff}
.toast-stack{position:fixed;left:18px;bottom:90px;z-index:120;display:grid;gap:8px}.toast{min-width:250px;max-width:360px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:8px}.toast.success{border-right:4px solid var(--color-green)}.toast.error{border-right:4px solid var(--color-red)}
.state-overlay{position:absolute;inset:0;z-index:25;background:rgba(248,251,255,.94);display:none;align-items:center;justify-content:center;text-align:center;border-radius:18px}.state-overlay.show{display:flex}.state-box{max-width:420px;padding:28px}.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #dce8f9;border-top-color:#1f6fe5;animation:spin .8s linear infinite;margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}
.chart-card{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:center}.chart-svg{width:100%;height:170px;display:block}.chart-side strong{font-size:28px}.chart-side .up{color:var(--color-green);font-weight:800}.muted{color:var(--color-muted)}.mono{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}.positive{color:#15923c;font-weight:800}.negative{color:#d42935;font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.two{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.five{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.form-grid .span-2{grid-column:1/-1}.subnav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.subnav button{border:1px solid var(--color-border);background:#fff;border-radius:12px;padding:10px;font-weight:700}.subnav button.active{background:var(--color-primary);color:white}.progress{height:12px;border-radius:99px;background:#e6ebf2;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#1ca84c,#3ac768);border-radius:99px}
.tree{display:grid;gap:4px}.tree-row{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px}.tree-row.active{background:#dcecff}.tree-row.l2{padding-right:24px}.tree-row.l3{padding-right:40px}.tree-row.l4{padding-right:56px}
.permission-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #edf1f6;padding:9px 0}.permission-row:first-child{border-top:0}.user-list{display:grid;gap:8px}.user-card{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;border:1px solid var(--color-border);border-radius:13px;padding:10px}.user-card.active{border-color:#5e9cf5;background:#eef6ff}.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#eef4ff;border:1px solid #d8e2ee}.user-meta strong{display:block}.user-meta small{display:block;margin-top:3px;color:#66768d}
.chat{background:#f4f0e9;border-radius:14px;min-height:250px;padding:14px;background-image:radial-gradient(#d8d2c8 1px,transparent 1px);background-size:18px 18px}.bubble{max-width:72%;padding:11px 12px;border-radius:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:13px}.bubble.in{background:#fff;margin-right:auto}.bubble.out{background:#dcf8df;margin-left:auto}.bubble small{display:block;color:#728096;margin-top:5px}.attachment{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(0,0,0,.08);margin-top:8px;padding-top:8px}
.timeline{position:relative;padding-right:20px}.timeline::before{content:'';position:absolute;right:7px;top:10px;bottom:10px;width:2px;background:#d4dce8}.timeline-item{position:relative;padding:7px 16px 7px 0}.timeline-item::before{content:'';position:absolute;right:0;top:12px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #a7b3c6}.timeline-item.done::before{background:#19a94b;border-color:#19a94b}.timeline-item.active::before{border-color:#1c64f2;box-shadow:0 0 0 4px #e6f0ff}.timeline-item.active{background:#eef6ff;border-radius:10px}.timeline-item small{color:#63758e}
.setting-tile{border:1px solid var(--color-border);border-radius:14px;padding:12px;text-align:center;background:#fff}.setting-tile .icon{width:30px;height:30px;margin-bottom:8px}.setting-tile.active{border-color:#5e9cf5;background:#eef6ff}
.desktop-title{display:none}
.shell,.main,.screen{min-width:0}
.split{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.split>*,.two>*,.three>*,.five>*{min-width:0}

/* FINAL FIDELITY OVERRIDES — deterministic values used by Flutter handoff */
.topbar{direction:ltr}.topbar>*{direction:rtl}.brand{direction:rtl}
.sidebar{inset:0 0 0 auto;transform:translateX(102%);box-shadow:-18px 0 45px rgba(13,45,87,.18)}
.sidebar.open{transform:translateX(0)}
.screen-head{min-height:56px}.screen-head h1{letter-spacing:-.25px}
.card,.table-wrap,.searchbar,.control,.head-select,.kpi,.summary-box{backdrop-filter:none}
.data-table input,.inline-num{font-variant-numeric:tabular-nums}
.data-table td,.data-table th{font-variant-numeric:tabular-nums}
.row-title small{display:block;margin-top:2px}
.nav-link{transition:background var(--transition),color var(--transition),border-color var(--transition)}
.btn,.setting-tile,.picker-item,.bottomnav button{transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:active,.setting-tile:active,.picker-item:active{transform:translateY(1px)}
input:focus,select:focus,textarea:focus{outline:none}.control:focus-within,.searchbar:focus-within{border-color:#6aa5f6;box-shadow:0 0 0 3px rgba(28,100,242,.10)}
.screen{animation:screenIn .16s ease both}@keyframes screenIn{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.icon-truck{mask-image:url("../assets/icons/truck.svg");-webkit-mask-image:url("../assets/icons/truck.svg")}
.icon-briefcase{mask-image:url("../assets/icons/briefcase.svg");-webkit-mask-image:url("../assets/icons/briefcase.svg")}
.icon-warning{mask-image:url("../assets/icons/warning.svg");-webkit-mask-image:url("../assets/icons/warning.svg")}
.icon-scale{mask-image:url("../assets/icons/scale.svg");-webkit-mask-image:url("../assets/icons/scale.svg")}
.icon-refresh{mask-image:url("../assets/icons/refresh.svg");-webkit-mask-image:url("../assets/icons/refresh.svg")}
.icon-message{mask-image:url("../assets/icons/message.svg");-webkit-mask-image:url("../assets/icons/message.svg")}
.icon-store{mask-image:url("../assets/icons/store.svg");-webkit-mask-image:url("../assets/icons/store.svg")}
.icon-calculator{mask-image:url("../assets/icons/calculator.svg");-webkit-mask-image:url("../assets/icons/calculator.svg")}
.icon-scan{mask-image:url("../assets/icons/scan.svg");-webkit-mask-image:url("../assets/icons/scan.svg")}

/* NINESOFT COLORED ICON SYSTEM */
.icon-cart,.icon-invoice,.icon-document,.icon-receipt{color:#1671e8}
.icon-users,.icon-user,.icon-phone,.icon-building{color:#2563eb}
.icon-calendar,.icon-shield,.icon-tree,.icon-layers,.icon-transfer,.icon-paperclip,.icon-database{color:#7c3aed}
.icon-warehouse,.icon-box,.icon-whatsapp,.icon-check,.icon-arrow-up,.icon-excel{color:#16a34a}
.icon-wallet,.icon-coins,.icon-tag,.icon-clock,.icon-book{color:#f59e0b}
.icon-trash,.icon-back,.icon-pdf,.icon-warning,.icon-briefcase{color:#ef3340}
.icon-bank,.icon-chart,.icon-sync,.icon-refresh,.icon-calculator{color:#1685e5}
.icon-percent{color:#0f9f9a}.icon-settings,.icon-edit,.icon-search,.icon-location,.icon-filter{color:#53657b}
.icon-truck{color:#e83e78}.icon-scale{color:#7c3aed}.icon-message{color:#16a34a}.icon-store{color:#1671e8}.icon-scan,.icon-barcode{color:#0b3a7a}
.btn .icon,.topbar .icon,.bottomnav .fab .icon,.icon-btn .icon{color:currentColor!important}
.title-icon .icon{width:27px;height:27px}.title-icon{background:linear-gradient(145deg,#f8fbff,#e5f0ff);border:1px solid #e1eaf6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.control>.icon,.searchbar>.icon,.head-select>.icon{width:20px;height:20px;filter:saturate(1.1)}
.section-title>.icon,.card-title>.icon{margin-left:4px}
.setting-tile{position:relative;overflow:hidden}.setting-tile .icon{filter:saturate(1.15)}
.setting-tile:before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.45),transparent 55%);pointer-events:none}

/* DASHBOARD */
.dashboard-welcome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dashboard-welcome h2{margin:0;font-size:17px}.dashboard-welcome p{margin:3px 0 0;color:var(--color-muted);font-size:12px}
.dashboard-period{display:flex;align-items:center;gap:7px;border:1px solid var(--color-border);background:#fff;border-radius:12px;padding:8px 11px;font-weight:700;white-space:nowrap}
.dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}
.dashboard-kpi{border:1px solid var(--color-border);border-radius:16px;padding:13px;display:flex;align-items:center;justify-content:space-between;min-height:92px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.dashboard-kpi:after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;background:currentColor;opacity:.055;left:-18px;top:-22px}
.dashboard-kpi strong{display:block;font-size:24px;margin-top:5px}.dashboard-kpi small{display:block;margin-top:3px;color:var(--color-muted)}
.dashboard-kpi .dash-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff;box-shadow:0 4px 12px rgba(22,55,95,.08)}
.dashboard-kpi.blue{background:linear-gradient(145deg,#fff,#eaf3ff);color:#1267da}.dashboard-kpi.green{background:linear-gradient(145deg,#fff,#eaf9ee);color:#15923c}.dashboard-kpi.red{background:linear-gradient(145deg,#fff,#fff0f1);color:#d72c39}.dashboard-kpi.orange{background:linear-gradient(145deg,#fff,#fff6df);color:#d88700}
.dashboard-kpi .label{color:var(--color-text);font-weight:800}
.dashboard-chart{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:center}.dashboard-chart .chart-meta h3{margin:0 0 6px;font-size:18px}.dashboard-chart .chart-meta strong{font-size:30px}.dashboard-chart .trend{display:inline-flex;align-items:center;gap:4px;margin-top:7px;color:#16883b;background:#dff8e7;padding:5px 9px;border-radius:99px;font-weight:800}
.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:10px 0}.quick-card{border:1px solid var(--color-border);border-radius:15px;background:#fff;min-height:86px;padding:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:800;box-shadow:var(--shadow-sm)}.quick-card .quick-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}.quick-card.primary{background:linear-gradient(145deg,#174c9a,#082f6d);color:#fff;border-color:#123f82}.quick-card.primary .icon{color:#fff!important}.quick-card.blue .quick-icon{background:#eaf3ff}.quick-card.green .quick-icon{background:#eaf9ee}.quick-card.orange .quick-icon{background:#fff6df}.quick-card.purple .quick-icon{background:#f3edff}
.dashboard-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.activity-list,.alert-list{display:grid;gap:7px}.activity-row,.alert-row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;padding:9px;border:1px solid #e8eef6;border-radius:11px;background:#fff}.activity-icon,.alert-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.activity-row small,.alert-row small{color:var(--color-muted)}.activity-row .time{font-size:11px;color:var(--color-muted);white-space:nowrap}.alert-row.warn{background:#fff9ea}.alert-row.danger{background:#fff2f3}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.module-card{border:1px solid var(--color-border);background:#fff;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:right;min-height:62px;font-weight:800;box-shadow:0 2px 7px rgba(21,51,91,.045)}.module-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.module-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}.module-card small{display:block;font-weight:500;color:var(--color-muted);margin-top:2px}.tone-blue .module-icon{background:#eaf3ff}.tone-green .module-icon{background:#eaf9ee}.tone-orange .module-icon{background:#fff6df}.tone-purple .module-icon{background:#f3edff}.tone-red .module-icon{background:#fff0f1}.tone-teal .module-icon{background:#e8fbf8}.tone-pink .module-icon{background:#fff0f6}.module-card .icon{width:23px;height:23px}
.sidebar .nav-link .icon{width:19px;height:19px}.nav-link.active{background:#eaf3ff;color:#0f4ba2;border-color:#d9e8ff}.nav-link.active .num{background:#fff;color:#0f4ba2}
/* richer field icon treatment */
.control>.icon:first-child{width:28px;height:28px;padding:5px;border-radius:8px;background:#f3f7fc;box-shadow:inset 0 0 0 1px #e6edf6}
.control>.icon-calendar{background:#f3edff}.control>.icon-warehouse,.control>.icon-box{background:#eaf9ee}.control>.icon-wallet,.control>.icon-coins,.control>.icon-tag{background:#fff6df}.control>.icon-users,.control>.icon-user,.control>.icon-invoice,.control>.icon-document,.control>.icon-bank{background:#eaf3ff}.control>.icon-tree,.control>.icon-layers,.control>.icon-database{background:#f3edff}

/* =========================================================
   NINESOFT MODERN EXECUTIVE UI — 2026 FINAL DESIGN SYSTEM
   ========================================================= */
.statusbar{display:none!important}
html{color-scheme:light}
body{font-family:var(--font-family);font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
.app{background:linear-gradient(180deg,#f2f6fb 0,#f8fbff 34%,#f4f7fb 100%)}
.topbar{height:var(--topbar-h);grid-template-columns:auto 1fr auto;padding:0 14px;background:linear-gradient(120deg,#0d3973 0%,#0a2e63 100%);box-shadow:0 6px 22px rgba(9,46,99,.13);position:sticky;top:0}
.brand strong{font-size:21px;font-weight:800;letter-spacing:-.2px}.brand span{font-size:11px;opacity:.82}
.top-actions{gap:7px}.icon-btn{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.10);transition:background var(--transition),transform var(--transition)}.icon-btn:hover{background:rgba(255,255,255,.17)}.icon-btn:active{transform:scale(.96)}
.topbar .menu-trigger{width:38px;height:38px;display:grid;place-items:center;border-radius:12px}.topbar .menu-trigger:hover{background:rgba(255,255,255,.10)}
.icon-sun{mask-image:url("../assets/icons/sun.svg");-webkit-mask-image:url("../assets/icons/sun.svg")}.icon-moon{mask-image:url("../assets/icons/moon.svg");-webkit-mask-image:url("../assets/icons/moon.svg")}
.theme-toggle .icon{color:#fff!important}
.main{max-width:var(--max-content)}
.screen-head{min-height:52px}.screen-head h1{font-weight:800;letter-spacing:-.45px}.title-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#fff,#eaf3ff);box-shadow:0 6px 16px rgba(28,100,242,.10);border:1px solid #e1e9f5}
.card{border-radius:18px;box-shadow:0 4px 16px rgba(25,49,82,.055)}
.searchbar,.control,.head-select{border-radius:13px;box-shadow:0 2px 8px rgba(25,49,82,.045)}
.btn{border-radius:13px}.data-table th{font-weight:800}.data-table td{font-weight:500}

/* Modern colored icon shells across internal screens */
.control>.icon:first-child{width:29px;height:29px;padding:6px;border-radius:9px;background:#f2f6fb;box-shadow:inset 0 0 0 1px rgba(80,105,140,.07)}
.title-icon .icon{width:25px;height:25px}
.setting-tile .icon{width:28px;height:28px}
.nav-link .nav-icon-shell{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#f1f5f9;flex:0 0 auto}.nav-link .nav-icon-shell .icon{width:17px;height:17px}
.nav-link.active .nav-icon-shell{background:#dceaff}

/* Dashboard ordering and iOS-like app launcher language */
.dashboard-welcome{margin:0 0 10px}.dashboard-welcome h2{font-size:17px}.dashboard-period{border-radius:13px;background:var(--color-surface)}
.dashboard-block-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:14px 0 9px}.dashboard-block-title h2{margin:0;font-size:15px;font-weight:800}.dashboard-block-title span{font-size:11px;color:var(--color-muted)}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.quick-card{min-height:112px;border:1px solid var(--color-border);border-radius:20px;background:var(--color-surface);padding:13px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:800;box-shadow:0 7px 20px rgba(27,52,89,.07)}
.quick-card .quick-icon{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(20,50,90,.16),inset 0 1px 0 rgba(255,255,255,.38)}
.quick-card .quick-icon .icon{width:31px;height:31px;color:#fff!important}
.quick-card.invoice .quick-icon{background:linear-gradient(145deg,#3b8ef7,#1765d8)}
.quick-card.voucher .quick-icon{background:linear-gradient(145deg,#23c873,#0a9b52)}
.quick-card.journal .quick-icon{background:linear-gradient(145deg,#9b6cf8,#7140db)}
.quick-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,52,89,.11)}

.module-launcher-card{margin-top:0!important}
.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 7px;padding:4px 0}
.module-card{border:0;background:transparent;border-radius:18px;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;text-align:center;min-height:96px;font-weight:750;box-shadow:none;color:var(--color-text)}
.module-card:hover{transform:translateY(-2px);box-shadow:none;background:transparent}.module-card small{display:none}.module-card>span:last-child{font-size:10.5px;line-height:1.25;max-width:92px}
.module-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 7px 16px rgba(19,44,78,.13),inset 0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden}
.module-icon:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}.module-card .icon{width:27px;height:27px;color:#fff!important;position:relative;z-index:1}
.tone-blue .module-icon{background:linear-gradient(145deg,#4294f7,#2563eb)}.tone-green .module-icon{background:linear-gradient(145deg,#2dcc80,#0ca45d)}.tone-orange .module-icon{background:linear-gradient(145deg,#ffb545,#f08a00)}.tone-purple .module-icon{background:linear-gradient(145deg,#9d72f4,#7139dc)}.tone-red .module-icon{background:linear-gradient(145deg,#ff6d79,#e83c4c)}.tone-teal .module-icon{background:linear-gradient(145deg,#27c8bd,#0a9b94)}.tone-pink .module-icon{background:linear-gradient(145deg,#f471b5,#db3d91)}.tone-cyan .module-icon{background:linear-gradient(145deg,#3fc9ed,#0a94bc)}.tone-slate .module-icon{background:linear-gradient(145deg,#7b8ca3,#52667e)}

.dashboard-kpis{margin:8px 0 12px}.dashboard-kpi{border-radius:18px;min-height:88px}.dashboard-kpi .dash-icon{width:45px;height:45px;border-radius:14px}.dashboard-kpi strong{font-size:23px;font-variant-numeric:tabular-nums}
.dashboard-chart{border-radius:18px}.dashboard-panes{margin-top:10px}
.activity-row,.alert-row{border-radius:13px}.activity-icon,.alert-icon{border-radius:11px}

/* Compact desktop shortcut rail */
.sidebar{background:var(--color-surface)}.sidebar-head{padding-bottom:4px}.nav-list{gap:3px}.nav-link{padding:7px 8px;border-radius:11px;font-size:12px;gap:7px}.nav-link .num{font-size:9px}.sidebar-state button{padding:7px 2px}

/* Dark theme — real inversion of surfaces/text, not a filter */
html[data-theme="dark"]{color-scheme:dark;--color-bg:#0c1420;--color-surface:#111c2a;--color-surface-2:#152233;--color-text:#edf4ff;--color-muted:#9aabc0;--color-border:#263649;--color-border-strong:#33465d;--tint-blue:#142a46;--tint-green:#133625;--tint-red:#3b1e25;--tint-orange:#3b2d16;--tint-purple:#2b2140;--tint-teal:#123b39;--tint-cyan:#12333d;--shadow-sm:0 4px 14px rgba(0,0,0,.16);--shadow-md:0 16px 38px rgba(0,0,0,.28)}
html[data-theme="dark"] body,html[data-theme="dark"] .app{background:#0c1420;color:var(--color-text)}
html[data-theme="dark"] .topbar{background:linear-gradient(120deg,#0a244d,#061b39)}
html[data-theme="dark"] .card,html[data-theme="dark"] .searchbar,html[data-theme="dark"] .control,html[data-theme="dark"] .head-select,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .segmented,html[data-theme="dark"] .subnav button,html[data-theme="dark"] .summary-box,html[data-theme="dark"] .setting-tile,html[data-theme="dark"] .picker-item,html[data-theme="dark"] .modal-card,html[data-theme="dark"] .toast,html[data-theme="dark"] .sidebar,html[data-theme="dark"] .quick-card{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
html[data-theme="dark"] .data-table th{background:#17283c;color:#eaf2ff}html[data-theme="dark"] .data-table td{border-color:#233449}html[data-theme="dark"] .data-table tr:hover td{background:#152234}
html[data-theme="dark"] .qty button,html[data-theme="dark"] .qty input{background:#142235;color:#dbe9ff}html[data-theme="dark"] .qty{border-color:#30445c}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{color:#eef4ff}html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#7f91a9}
html[data-theme="dark"] .bottomnav{background:rgba(13,24,38,.97);border-color:#26384d}html[data-theme="dark"] .bottomnav button{color:#a9b7c9}html[data-theme="dark"] .bottomnav button.active{background:#183252;color:#8fc0ff}
html[data-theme="dark"] .nav-link{color:#b5c2d2;background:transparent}html[data-theme="dark"] .nav-link:hover,html[data-theme="dark"] .nav-link.active{background:#172d49;color:#93c4ff;border-color:#23466f}html[data-theme="dark"] .nav-link .nav-icon-shell{background:#18283a}html[data-theme="dark"] .nav-link.active .nav-icon-shell{background:#1f4168}
html[data-theme="dark"] .dashboard-kpi.blue{background:linear-gradient(145deg,#111c2a,#132b48)}html[data-theme="dark"] .dashboard-kpi.green{background:linear-gradient(145deg,#111c2a,#133425)}html[data-theme="dark"] .dashboard-kpi.red{background:linear-gradient(145deg,#111c2a,#3a1d24)}html[data-theme="dark"] .dashboard-kpi.orange{background:linear-gradient(145deg,#111c2a,#392d18)}html[data-theme="dark"] .dashboard-kpi .label{color:#eef4ff}html[data-theme="dark"] .dashboard-kpi .dash-icon{background:#172638}
html[data-theme="dark"] .kpi-blue{background:linear-gradient(135deg,#111c2a,#142b47)}html[data-theme="dark"] .kpi-green{background:linear-gradient(135deg,#111c2a,#153727)}html[data-theme="dark"] .kpi-red{background:linear-gradient(135deg,#111c2a,#3c1f27)}html[data-theme="dark"] .kpi-orange{background:linear-gradient(135deg,#111c2a,#3b2e18)}html[data-theme="dark"] .kpi-purple{background:linear-gradient(135deg,#111c2a,#2b2142)}html[data-theme="dark"] .kpi small{color:#a8b6c9}
html[data-theme="dark"] .activity-row,html[data-theme="dark"] .alert-row{background:#121f2f;border-color:#25374b}html[data-theme="dark"] .alert-row.warn{background:#302916}html[data-theme="dark"] .alert-row.danger{background:#341d24}
html[data-theme="dark"] .state-overlay{background:rgba(12,20,32,.94)}html[data-theme="dark"] .chat{background-color:#18221f;background-image:radial-gradient(#2d3a35 1px,transparent 1px)}html[data-theme="dark"] .bubble.in{background:#172638}html[data-theme="dark"] .bubble.out{background:#173626}
html[data-theme="dark"] .permission-row{border-color:#25354a}html[data-theme="dark"] .user-card.active,html[data-theme="dark"] .setting-tile.active{background:#17304e;border-color:#2c5f98}
html[data-theme="dark"] .control>.icon:first-child{background:#19283a;box-shadow:inset 0 0 0 1px #26394e}
html[data-theme="dark"] .title-icon{background:linear-gradient(145deg,#152234,#162d49);border-color:#26394f}
html[data-theme="dark"] .progress{background:#263649}

/* =========================================================
   PROFESSIONAL SVG ICONS + COLORED SECTION RIBBON (2026-11-04)
   ========================================================= */
svg.icon{
  display:inline-block;
  width:22px;
  height:22px;
  flex:0 0 auto;
  vertical-align:middle;
  background:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  overflow:visible;
  color:inherit;
}
svg.icon-xs{width:15px;height:15px}svg.icon-sm{width:18px;height:18px}svg.icon-lg{width:28px;height:28px}svg.icon-xl{width:34px;height:34px}
.icon-host{display:inline-grid;place-items:center;line-height:0}

.screen-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
  margin:0 0 14px;
  padding:11px 14px;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:19px;
  background:
    radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--screen-accent) 36%,transparent) 0,transparent 32%),
    linear-gradient(135deg,#123f82 0%,#0d3b78 52%,#082f6d 100%);
  box-shadow:0 12px 28px rgba(8,47,109,.18);
}
.screen-head::after{
  content:"";
  position:absolute;
  inset:auto -30px -54px auto;
  width:170px;
  height:120px;
  border-radius:50%;
  background:color-mix(in srgb,var(--screen-accent) 22%,transparent);
  filter:blur(2px);
  pointer-events:none;
}
.screen-head-main{position:relative;z-index:1;display:flex;align-items:center;gap:11px;min-width:0}
.screen-head-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--screen-accent);
  background:linear-gradient(145deg,#fff,var(--screen-accent-soft));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 20px rgba(4,25,61,.22),inset 0 0 0 1px rgba(255,255,255,.6);
}
.screen-head-icon svg.icon{width:27px;height:27px;stroke-width:2.05}
.screen-title-copy{min-width:0}.screen-kicker{display:block;margin-bottom:1px;font-size:10px;font-weight:700;letter-spacing:.6px;color:rgba(255,255,255,.65);direction:ltr;text-align:right}
.screen-head h1{
  margin:0;
  color:#fff;
  font-family:"Segoe UI Variable","Noto Sans Arabic","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  font-size:clamp(22px,2.5vw,29px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.5px;
  text-wrap:balance;
}
.screen-head-action{position:relative;z-index:1;min-width:0;display:flex;align-items:center;justify-content:flex-end}
.screen-head .head-select,.screen-head .dashboard-period{
  min-height:40px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.screen-head .head-select svg.icon,.screen-head .dashboard-period svg.icon{color:var(--screen-accent-soft)}

.control>svg.icon,.searchbar>svg.icon,.head-select>svg.icon,.section-title>svg.icon,.card-title svg.icon{color:var(--screen-accent,var(--color-blue))}
.section-title{font-family:"Segoe UI Variable","Noto Sans Arabic","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-weight:800;letter-spacing:-.15px}

.sidebar{width:var(--sidebar-mobile-w);max-width:76vw;padding:12px 9px}
.sidebar-head{margin-bottom:8px;padding:0 3px 7px;border-bottom:1px solid var(--color-border)}
.sidebar-head strong{font-family:"Segoe UI Variable","Noto Sans Arabic",Tahoma,sans-serif;font-size:16px;font-weight:800}
.nav-list{gap:3px}
.nav-link{
  min-height:42px;
  padding:5px 6px;
  gap:7px;
  border-radius:11px;
  font-size:11.5px;
  line-height:1.2;
  font-weight:700;
  transition:background var(--transition),border-color var(--transition),transform var(--transition),color var(--transition);
}
.nav-link:hover{transform:translateX(-1px)}
.nav-link .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-link .nav-icon-shell{
  width:31px;
  height:31px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:var(--nav-accent);
  background:linear-gradient(145deg,var(--nav-accent),color-mix(in srgb,var(--nav-accent) 76%,#0b2448 24%));
  box-shadow:0 5px 12px color-mix(in srgb,var(--nav-accent) 25%,transparent);
}
.nav-link .nav-icon-shell svg.icon{width:17px;height:17px;stroke-width:2.15}
.nav-link.active{
  color:color-mix(in srgb,var(--nav-accent) 72%,#12213a 28%);
  background:var(--nav-soft);
  border-color:color-mix(in srgb,var(--nav-accent) 24%,#dfe6ef 76%);
}
.nav-link.active .nav-icon-shell{transform:scale(1.04);box-shadow:0 6px 14px color-mix(in srgb,var(--nav-accent) 34%,transparent)}
.nav-link .num{font-size:8px;padding:2px 5px;border-radius:999px;background:var(--color-surface-2)}

.module-card .module-icon{
  color:#fff;
  background:var(--module-accent);
  background:linear-gradient(145deg,var(--module-accent),color-mix(in srgb,var(--module-accent) 76%,#0b2448 24%));
  box-shadow:0 8px 18px color-mix(in srgb,var(--module-accent) 25%,transparent);
}
.module-card .module-icon svg.icon{stroke-width:2.15}

html[data-theme="dark"] .screen-head{border-color:rgba(148,190,255,.2);box-shadow:0 14px 30px rgba(0,0,0,.28)}
html[data-theme="dark"] .screen-head h1{color:#fff}
html[data-theme="dark"] .screen-kicker{color:rgba(255,255,255,.66)}
html[data-theme="dark"] .nav-link.active{background:color-mix(in srgb,var(--nav-accent) 18%,#111f30 82%);color:#eaf4ff;border-color:color-mix(in srgb,var(--nav-accent) 35%,#223b57 65%)}
html[data-theme="dark"] .nav-link .num{background:#13253a;color:#a9bdd5}

/* =========================================================
   NINESOFT YEMEN SMART WORKFLOW — 2026
   Search-first fields, workspace tabs, weights and preferences
   ========================================================= */
body{font-size:calc(var(--font-size-body) * var(--ui-font-scale));font-weight:var(--ui-font-weight)}
.topbar{background:linear-gradient(120deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 70%,#031b38))}
.workspace-bar{height:var(--workspace-h);background:color-mix(in srgb,var(--color-surface) 96%,transparent);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:5px 10px;position:sticky;top:var(--topbar-h);z-index:29;backdrop-filter:blur(14px)}
.workspace-tabs{display:flex;align-items:center;gap:5px;width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}.workspace-tabs::-webkit-scrollbar{display:none}
.workspace-tab{height:33px;min-width:108px;max-width:190px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-muted);border-radius:10px 10px 5px 5px;display:flex;align-items:center;gap:6px;padding:0 9px;white-space:nowrap;box-shadow:0 2px 7px rgba(20,45,80,.04)}
.workspace-tab span{overflow:hidden;text-overflow:ellipsis}.workspace-tab.active{background:var(--color-surface);color:var(--color-primary);border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--color-border));box-shadow:inset 0 -2px 0 var(--ui-accent),0 3px 8px rgba(20,45,80,.07)}
.workspace-tab i{font-style:normal;margin-inline-start:auto;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;font-size:16px;line-height:1}.workspace-tab i:hover{background:var(--tint-red);color:var(--color-red)}
.workspace-add{width:33px;height:33px;border:1px dashed var(--color-border-strong);background:var(--color-surface);color:var(--color-primary);border-radius:10px;display:grid;place-items:center;flex:0 0 auto}.workspace-save{margin-inline-start:auto;display:flex;align-items:center;gap:5px;color:var(--color-muted);font-size:10px;white-space:nowrap;padding:0 8px}
.screen-head-actions{display:flex;gap:6px;align-items:center}.screen-head-actions .head-select{border:1px solid rgba(255,255,255,.28)}

/* Searchable inputs */
.smart-select{position:relative;overflow:visible!important;z-index:1}.smart-select.open{z-index:var(--smart-z);border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 14%,transparent)}
.smart-select input{min-width:0}.smart-search-btn{width:29px;height:29px;border:0;border-radius:8px;background:var(--tint-blue);color:var(--color-primary);display:grid;place-items:center;flex:0 0 auto}.smart-search-btn:hover{background:#dcecff}
.smart-options{display:none;position:absolute;top:calc(100% + 7px);right:0;left:0;max-height:280px;overflow:auto;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:14px;padding:6px;box-shadow:0 20px 46px rgba(10,35,70,.18);z-index:var(--smart-z)}.smart-select.open .smart-options{display:grid;gap:4px}
.smart-option{width:100%;border:0;background:transparent;color:var(--color-text);display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:right;padding:8px;border-radius:10px}.smart-option:hover,.smart-option.active{background:var(--tint-blue)}.smart-option-icon,.entity-mini-icon{width:32px;height:32px;border-radius:10px;background:var(--tint-blue);color:var(--color-blue);display:grid;place-items:center}.smart-option span:nth-child(2){display:grid;min-width:0}.smart-option b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-option small{font-size:9px;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-option em{font-size:8px;font-style:normal;color:var(--color-green);background:var(--tint-green);padding:3px 5px;border-radius:99px;white-space:nowrap}.smart-empty{padding:18px;text-align:center;color:var(--color-muted);display:flex;justify-content:center;gap:7px}

/* Every data block has local search */
.table-block{display:grid;gap:6px;min-width:0}.table-tools{display:flex;align-items:center;gap:8px;justify-content:space-between}.table-search{height:32px;min-width:210px;max-width:380px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:10px;display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--color-muted)}.table-search input{border:0;background:transparent;outline:0;width:100%;color:var(--color-text);font-size:10px}.table-hint{font-size:9px;color:var(--color-muted)}

/* Yemen entity context */
.entity-context{margin-top:10px;border:1px solid var(--color-border);background:linear-gradient(135deg,var(--tint-blue),var(--color-surface));border-radius:14px;padding:9px 11px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px}.entity-context-icon{width:40px;height:40px;border-radius:12px;background:var(--color-surface);color:var(--color-primary);display:grid;place-items:center;box-shadow:var(--shadow-sm)}.entity-context div{display:grid}.entity-context small{color:var(--color-muted);margin-top:2px}

/* Weight and currency calculators */
.weight-card{border-color:color-mix(in srgb,var(--color-purple) 24%,var(--color-border));background:linear-gradient(135deg,var(--color-surface),var(--tint-purple))}.weight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:end}.calc-result{min-height:var(--height-input);border:1px solid var(--color-border);background:var(--color-surface);border-radius:12px;padding:7px 10px;display:grid;align-content:center}.calc-result span{font-size:9px;color:var(--color-muted)}.calc-result strong{font-size:17px;line-height:1.1}.calc-result small{font-size:9px;color:var(--color-muted)}.calc-result.primary{background:linear-gradient(135deg,var(--tint-green),var(--color-surface));border-color:#cdeed8;color:var(--color-green)}
.currency-converter{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:9px;align-items:end;padding:10px;border:1px dashed var(--color-border-strong);border-radius:14px;background:var(--color-surface-2)}

/* Friendly journal */
.journal-simple{background:linear-gradient(135deg,var(--color-surface),var(--tint-orange))}.journal-explain{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:9px;margin-bottom:12px}.journal-explain>div{padding:9px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);display:grid}.journal-explain>div b{font-size:14px}.journal-explain>div small{color:var(--color-muted);margin-top:3px}.journal-explain>span{color:var(--color-primary);display:grid;place-items:center}.journal-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.journal-side{padding:10px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface)}.journal-side h3{margin:0 0 8px;font-size:14px}.journal-side.debit{box-shadow:inset 4px 0 0 var(--color-blue)}.journal-side.credit{box-shadow:inset 4px 0 0 var(--color-green)}

/* Preferences */
.preference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.range-field{display:grid;gap:6px}.range-field label{font-size:11px;font-weight:750;display:flex;justify-content:space-between}.range-field input[type=range]{accent-color:var(--ui-accent);width:100%}.range-field output{font-variant-numeric:tabular-nums;color:var(--color-primary)}.control input[type=color]{height:30px;padding:0;border-radius:8px;cursor:pointer}.theme-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.theme-choice button{height:42px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px}.theme-choice button.active{background:var(--tint-blue);color:var(--color-primary);border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--color-border))}.idea-tile{border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:14px;padding:12px;display:grid;gap:5px}.idea-tile .icon{color:var(--color-primary)}.idea-tile small{color:var(--color-muted)}

/* Command palette */
.command-palette{display:grid;gap:8px}.command-results{display:grid;gap:4px;max-height:430px;overflow:auto}.command-results button{border:0;background:transparent;color:var(--color-text);border-radius:11px;padding:9px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;text-align:right}.command-results button:hover,.command-results button.active{background:var(--tint-blue)}.command-results span{display:grid}.command-results small{color:var(--color-muted);font-size:9px}.command-results kbd{font-family:inherit;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:6px;padding:3px 6px;font-size:8px}.command-help{text-align:center;color:var(--color-muted);font-size:9px}

html.hide-zero-rows .data-table tr.has-zero{display:none}
html[data-density="compact"]{--height-input:36px;--height-btn:38px;--space-3:8px;--space-4:11px}html[data-density="compact"] .card{padding:10px}html[data-density="compact"] .data-table td{padding-top:6px;padding-bottom:6px}

html[data-theme="dark"] .workspace-bar{background:rgba(13,24,38,.96)}html[data-theme="dark"] .workspace-tab,html[data-theme="dark"] .workspace-add,html[data-theme="dark"] .smart-options,html[data-theme="dark"] .smart-option,html[data-theme="dark"] .table-search,html[data-theme="dark"] .entity-context,html[data-theme="dark"] .calc-result,html[data-theme="dark"] .journal-side,html[data-theme="dark"] .theme-choice button,html[data-theme="dark"] .idea-tile,html[data-theme="dark"] .currency-converter{background:var(--color-surface);border-color:var(--color-border);color:#edf4ff}html[data-theme="dark"] .workspace-tab.active,html[data-theme="dark"] .smart-option:hover,html[data-theme="dark"] .smart-option.active,html[data-theme="dark"] .theme-choice button.active{background:#172d49;color:#fff}html[data-theme="dark"] .smart-search-btn{background:#183252;color:#9bc8ff}html[data-theme="dark"] .entity-context{background:linear-gradient(135deg,#142a46,#111c2a)}html[data-theme="dark"] .weight-card,html[data-theme="dark"] .journal-simple{background:linear-gradient(135deg,#111c2a,#172234)}
.connection-status{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:5px 9px;font-size:11px;color:#fff;white-space:nowrap}.connection-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#f4b740}.connection-status[data-mode="online"]:before{background:#22c55e}.connection-status[data-mode="offline"]:before{background:#f59e0b}.connection-status[data-mode="auth"]:before{background:#ef4444}.login-overlay{position:fixed;inset:0;z-index:9999;background:rgba(3,18,42,.74);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px}.login-overlay.show{display:flex}.login-card{width:min(420px,100%);background:var(--color-surface,#fff);color:var(--color-text,#10203a);border-radius:24px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:grid;gap:10px}.login-brand{text-align:center;display:grid;gap:4px;margin-bottom:8px}.login-brand strong{font-size:28px;color:var(--color-primary)}.login-card input{height:48px;border:1px solid var(--color-border);border-radius:14px;padding:0 14px;background:var(--color-field,#fff);color:inherit;font:inherit}.login-card button{height:50px;border:0;border-radius:14px;background:var(--color-primary);color:white;font:inherit;font-weight:800;cursor:pointer}.login-card small{text-align:center;color:var(--color-muted)}.login-error{background:#fee2e2;color:#991b1b;padding:10px;border-radius:12px;text-align:center}