:root{--p:#6366f1;--pg:rgba(99,102,241,.3);--c:#06b6d4;--cg:rgba(6,182,212,.25);--pk:#ec4899;--s:#10b981;--d:#ef4444;--bg:#07091a;--card:rgba(15,22,45,.7);--b:rgba(255,255,255,.07);--bh:rgba(99,102,241,.4);--t:#eef2ff;--m:#7480a0;--sh:0 8px 32px rgba(0,0,0,.5)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Tajawal','Inter',sans-serif;background:var(--bg);color:var(--t);min-height:100vh;background-image:radial-gradient(ellipse at 0% 0%,rgba(99,102,241,.15) 0%,transparent 50%),radial-gradient(ellipse at 100% 100%,rgba(6,182,212,.1) 0%,transparent 50%);background-attachment:fixed}
.screen{display:none}.screen.active{display:block}
.glass{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--b);border-radius:20px;box-shadow:var(--sh)}
.hidden{display:none!important}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--bh)}

/* HEADER */
.g-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 24px;margin:12px auto;border-radius:18px;position:sticky;top:12px;z-index:1000;max-width:1400px}
.gh-left,.gh-right{display:flex;align-items:center;gap:12px}
.gh-right{justify-content:flex-end}
.gh-center{display:flex;justify-content:center}
.logo-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center}
.logo-mark i{width:20px;height:20px;color:#fff}
.lt-main{font-size:1.1rem;font-weight:800;display:block}.lt-main b{color:var(--c)}
.lt-sub{font-size:.72rem;color:var(--m);display:block}
.gh-btn{background:rgba(255,255,255,.04);border:1px solid var(--b);color:var(--m);width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s}
.gh-btn:hover{color:var(--t);border-color:var(--bh)}
.gh-btn i{width:16px;height:16px}
.gh-btn-admin{border-color:rgba(99,102,241,.3);color:var(--p)}
.gh-btn-admin:hover{background:rgba(99,102,241,.15)}

/* BRANCH PILL */
.branch-pill-wrap{position:relative}
.branch-pill-btn{display:flex;align-items:center;gap:7px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);border-radius:20px;padding:8px 16px;cursor:pointer;color:var(--c);font-family:inherit;font-size:.88rem;font-weight:700;transition:all .25s}
.branch-pill-btn:hover{background:rgba(6,182,212,.2)}
.branch-pill-btn i{width:14px;height:14px}
.branch-drop{position:absolute;top:calc(100%+8px);left:50%;transform:translateX(-50%);min-width:220px;padding:10px;z-index:300;display:none}
.branch-pill-wrap.open{z-index:1000}
.branch-pill-wrap.open .branch-drop{display:block;animation:fu .2s ease}
.bdrop-title{font-size:.78rem;color:var(--m);padding:0 6px 8px;font-weight:600}
.bdrop-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .2s;font-size:.88rem;font-weight:600}
.bdrop-item:hover,.bdrop-item.active{background:rgba(6,182,212,.15);color:var(--c)}
.bdrop-item i{width:16px;height:16px}

/* DASHBOARD */
.dash-body{padding:0 2vw 2rem;display:flex;flex-direction:column;gap:2rem;max-width:1600px;margin:0 auto;width:100%}
.no-data-banner{display:flex;align-items:center;gap:12px;padding:24px;color:var(--m);border-radius:20px;background:rgba(255,255,255,0.02)}
.no-data-banner i{width:24px;height:24px;flex-shrink:0;color:var(--p)}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi-card{background:var(--card);border:1px solid var(--b);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:8px;transition:all .3s ease}
.kpi-card:hover{border-color:var(--bh);background:rgba(99,102,241,0.05);transform:translateY(-4px)}
.kpi-val{font-size:2.4rem;font-weight:900;line-height:1}
.kpi-lbl{font-size:.78rem;color:var(--m);font-weight:600}
.kpi-sub{font-size:.75rem;color:var(--m)}
.kpi-c{color:var(--c)}.kpi-p{color:var(--p)}.kpi-s{color:var(--s)}.kpi-pk{color:var(--pk)}

/* WH CARDS GRID */
.wh-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem}
.wh-card{background:var(--card);border:1px solid var(--b);border-radius:24px;padding:24px;transition:all .3s ease}
.wh-card:hover{border-color:var(--bh);transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.wh-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wh-card-title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:800}
.wh-card-title i{width:18px;height:18px}
.wh-badge{font-size:.72rem;padding:3px 10px;border-radius:8px;font-weight:700}
.wh-item-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;transition:background .2s}
.wh-item-row:hover{background:rgba(255,255,255,.04)}
.wh-item-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.wh-item-qty{font-size:.82rem;font-weight:700;padding:2px 8px;border-radius:6px}
.wh-see-more{text-align:center;padding:8px;font-size:.78rem;color:var(--m);cursor:pointer}
.wh-see-more:hover{color:var(--c)}

/* LAUNCH BAR */
.launch-bar{display:flex;align-items:center;gap:14px;padding:16px 20px;flex-wrap:wrap}
.lb-label{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:var(--m);white-space:nowrap}
.lb-label i{width:18px;height:18px;color:var(--p)}
.lb-selector-wrap{position:relative;flex:1;min-width:200px}
.lb-vehicle-btn{width:100%;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.3);border:1px solid var(--b);border-radius:14px;padding:10px 16px;cursor:pointer;color:var(--t);font-family:inherit;font-size:.9rem;font-weight:600;transition:border-color .25s}
.lb-vehicle-btn:hover{border-color:var(--bh)}
.lb-vehicle-btn i{width:16px;height:16px;margin-right:auto;color:var(--m)}
.lb-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.lb-drop{position:absolute;top:calc(100%+8px);right:0;left:0;z-index:200;padding:10px;display:none}
.lb-selector-wrap.open .lb-drop{display:block;animation:fu .2s ease}
.lbd-search-wrap{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--b);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.lbd-search-wrap i{width:14px;height:14px;color:var(--m);flex-shrink:0}
.lbd-search-wrap input,.vd-search-row input,.search-bar-wrap input{background:none;border:none;color:var(--t);font-family:inherit;font-size:.88rem;width:100%;outline:none}
.lbd-list,.vd-list{max-height:250px;overflow-y:auto}
.lbd-item,.vd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .2s}
.lbd-item:hover,.lbd-item.sel,.vd-item:hover,.vd-item.sel{background:rgba(99,102,241,.15)}
.lbd-code,.vd-code{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}
.lbd-name,.vd-name-txt{font-size:.85rem;font-weight:600}
.lbd-sub,.vd-sub{font-size:.72rem;color:var(--m)}
.btn-go-loading{background:linear-gradient(135deg,var(--p),var(--c));color:#fff;border:none;padding:12px 24px;border-radius:14px;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 4px 16px var(--pg);transition:all .3s;font-family:inherit}
.btn-go-loading:hover:not(:disabled){transform:translateY(-2px)}
.btn-go-loading:disabled{opacity:.4;cursor:not-allowed}
.btn-go-loading i{width:16px;height:16px}

/* RECENT */
.recent-section{background:var(--card);border:1px solid var(--b);border-radius:18px;padding:18px}
.recent-h.rep-hdr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}
.rep-filters{display:flex;flex-wrap:wrap;gap:1rem;flex:1}
.rep-actions{display:flex;gap:10px;flex-wrap:wrap}
.rep-table-cnt{background:var(--card);border:1px solid var(--b);border-radius:24px;overflow:auto;max-height:calc(100vh - 280px);box-shadow:var(--sh)}
.btn-ghost-sm{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--d);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;font-family:inherit}
.recent-list{display:flex;flex-direction:column;gap:8px}
.empty-hist{text-align:center;color:var(--m);font-size:.85rem;padding:20px}
.rec-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:12px}
.rec-veh{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--pk));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.rec-info{flex:1}
.rec-title{font-size:.88rem;font-weight:700}
.rec-meta{font-size:.75rem;color:var(--m)}
.rec-qty{font-size:.82rem;font-weight:700;color:var(--s);background:rgba(16,185,129,.1);padding:3px 10px;border-radius:8px}

/* TWO-PANEL LOADING SCREEN */
.two-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:2rem;padding:0 2vw 2rem;min-height:calc(100vh - 140px);max-width:1600px;margin:0 auto}
@media (max-width: 1000px) {
  .two-panel { grid-template-columns: 1fr; height: auto; }
  .panel { height: 600px; }
}
.panel{display:flex;flex-direction:column;overflow:hidden;padding:16px}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-shrink:0}
.panel-title{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.panel-title i{width:16px;height:16px}
.cyan{color:var(--c)}.pink{color:var(--pk)}
.cnt-badge{background:rgba(99,102,241,.15);color:var(--p);border:1px solid rgba(99,102,241,.2);padding:3px 10px;border-radius:8px;font-size:.78rem;font-weight:700}
.wh-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;flex-shrink:0}
.wh-tab{background:rgba(255,255,255,.04);border:1px solid var(--b);color:var(--m);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;transition:all .2s}
.wh-tab.active,.wh-tab:hover{background:rgba(6,182,212,.15);border-color:rgba(6,182,212,.35);color:var(--c)}
.scroll-list{flex:1;overflow-y:auto;padding-right:2px}
.scroll-list::-webkit-scrollbar{width:3px}.scroll-list::-webkit-scrollbar-thumb{background:var(--bh);border-radius:3px}

/* ITEM CARD */
.item-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:14px;margin-bottom:8px;transition:all .2s;cursor:pointer}
.item-card:hover{background:rgba(255,255,255,.06);border-color:rgba(6,182,212,.25);transform:translateX(-2px)}
.ic-thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(6,182,212,.2));border:1px solid var(--b);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-thumb i{width:20px;height:20px;color:var(--p)}
.ic-info{flex:1;min-width:0}
.ic-name{font-size:.88rem;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-sku{font-size:.72rem;color:var(--m);display:block;margin-top:2px}
.ic-wh{font-size:.72rem;color:var(--c);display:block}
.ic-qty{font-size:.82rem;font-weight:700;padding:3px 8px;border-radius:7px;background:rgba(16,185,129,.12);color:var(--s);border:1px solid rgba(16,185,129,.2);white-space:nowrap;margin-left:6px}
.ic-qty.low{background:rgba(239,68,68,.1);color:var(--d);border-color:rgba(239,68,68,.2)}
.add-btn{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--p),var(--c));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px var(--pg);transition:all .2s;flex-shrink:0}
.add-btn:hover{transform:scale(1.1)}
.add-btn i{width:14px;height:14px}

/* CART CARD */
.cart-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(236,72,153,.04);border:1px solid rgba(236,72,153,.15);border-radius:14px;margin-bottom:8px;transition:all .2s}
.cart-card:hover{border-color:rgba(236,72,153,.3)}
.cc-thumb{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(139,92,246,.2));border:1px solid rgba(236,72,153,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-thumb i{width:18px;height:18px;color:var(--pk)}
.cc-info{flex:1;min-width:0}
.cc-name{font-size:.82rem;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-sku{font-size:.7rem;color:var(--m);display:block}
.qty-ctrl{display:flex;align-items:center;gap:5px}
.qty-btn{background:rgba(255,255,255,.08);border:1px solid var(--b);color:var(--t);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s}
.qty-btn:hover{background:rgba(99,102,241,.2)}
.qty-inp{width:44px;text-align:center;background:rgba(0,0,0,.3);border:1px solid var(--b);border-radius:7px;color:var(--t);padding:5px 2px;font-size:.85rem;font-weight:700;font-family:inherit;outline:none}
.rm-btn{width:26px;height:26px;border-radius:7px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:var(--d);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.rm-btn:hover{background:rgba(239,68,68,.25)}
.rm-btn i{width:12px;height:12px}

/* CART FOOTER */
.cart-footer{border-top:1px solid var(--b);padding-top:12px;flex-shrink:0}
.cart-stats{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.cs-row{display:flex;justify-content:space-between;align-items:center}
.cs-lbl{font-size:.72rem;color:var(--m);font-weight:600;letter-spacing:.3px}
.cs-row span:last-child{font-size:.82rem;font-weight:700}
.cs-accent{color:var(--c)}
.btn-confirm{width:100%;background:linear-gradient(135deg,var(--p),var(--c));color:#fff;border:none;padding:14px;border-radius:14px;font-size:.95rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.3px;box-shadow:0 5px 20px var(--pg);transition:all .3s;font-family:inherit}
.btn-confirm:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--pg)}
.btn-confirm i{width:16px;height:16px}
.btn-ghost-danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--d);padding:5px 12px;border-radius:9px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:5px;transition:all .2s}
.btn-ghost-danger:hover{background:rgba(239,68,68,.18)}
.btn-ghost-danger i{width:13px;height:13px}

/* VEHICLE SELECTOR (loading screen) */
.vehicle-sel-wrap{position:relative}
.vehicle-sel-btn{display:flex;align-items:center;gap:8px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);border-radius:14px;padding:8px 14px;cursor:pointer;color:var(--t);font-family:inherit;transition:all .25s;min-width:200px}
.vehicle-sel-btn:hover{background:rgba(99,102,241,.2)}
.vehicle-sel-btn i{width:14px;height:14px;color:var(--m);margin-right:auto}
.vsel-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.vsel-info{text-align:right}
.vsel-code{font-size:.82rem;font-weight:700;display:block}
.vsel-name{font-size:.7rem;color:var(--m);display:block}
.vehicle-drop{position:absolute;top:calc(100%+8px);left:50%;transform:translateX(-50%);width:280px;z-index:300;padding:10px;display:none}
.vehicle-sel-wrap.open .vehicle-drop{display:block;animation:fu .2s ease}
.vd-search-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--b);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.vd-search-row i{width:14px;height:14px;color:var(--m);flex-shrink:0}

/* SEARCH BAR */
.search-bar-wrap{display:flex;align-items:center;gap:10px;margin:0 12px 10px;padding:10px 16px;border-radius:14px}
.search-bar-wrap i{width:16px;height:16px;color:var(--m);flex-shrink:0}
#btn-search-clear{background:none;border:none;color:var(--m);cursor:pointer;display:flex;margin-right:auto}
#btn-search-clear i{width:14px;height:14px}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:430px;padding:24px}
.modal-hdr{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.mod-icon{width:22px;height:22px;color:var(--p)}
.modal-hdr h3{font-size:1.1rem;font-weight:800;flex:1}
.modal-cls{background:rgba(255,255,255,.06);border:1px solid var(--b);color:var(--m);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-cls i{width:14px;height:14px}
.modal-body{display:flex;flex-direction:column;gap:16px}
.fg{display:flex;flex-direction:column;gap:8px}
.fg label{font-size:.85rem;color:var(--m);font-weight:700;margin-right:4px}
.fg input{background:rgba(0,0,0,.35);border:1px solid var(--b);color:var(--t);padding:12px 16px;border-radius:12px;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .25s}
.fg input:focus{border-color:var(--bh);background:rgba(0,0,0,0.5)}
.err-box{color:var(--d);font-size:.82rem;background:rgba(239,68,68,.1);padding:9px 13px;border-radius:9px}
.admin-sec{background:rgba(0,0,0,.25);border:1px solid var(--b);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.asec-title{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--m)}
.asec-title i{width:16px;height:16px}
.file-badge{font-size:.75rem;color:var(--m)}
.adm-status{font-size:.82rem;text-align:center;min-height:18px}
.mt8{margin-top:8px}
.row-gap{gap:12px}

/* ADMIN USER LIST */
.user-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:14px;margin-bottom:8px}
.user-info{display:flex;flex-direction:column;gap:3px}
.user-name{font-weight:700;font-size:.95rem}
.user-role{font-size:.7rem;color:var(--p);text-transform:uppercase;font-weight:800;letter-spacing:1px}
.perm-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.perm-tag{font-size:.65rem;background:rgba(255,255,255,.08);padding:2px 8px;border-radius:6px;color:var(--m)}
.perm-tag.act{background:rgba(99,102,241,.15);color:var(--p)}

/* PERMISSIONS GRID */
.perms-section{background:rgba(0,0,0,.2);padding:12px;border-radius:14px;border:1px solid var(--b)}
.perm-label{font-size:.75rem;font-weight:700;color:var(--m);margin-bottom:8px;display:block}
.perms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
.p-check{display:flex;align-items:center;gap:6px;font-size:.85rem;cursor:pointer;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid transparent;transition:all .2s}
.p-check:has(input:checked){background:rgba(99,102,241,0.1);border-color:var(--bh)}
.p-check input{cursor:pointer;accent-color:var(--p)}

/* SYNC GRID */
.sync-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sync-item{background:rgba(0,0,0,0.2);padding:12px;border-radius:14px;border:1px solid var(--b);display:flex;flex-direction:column;gap:8px}
.sync-item label{font-size:.75rem;color:var(--m);font-weight:600}

.btn-icon-danger{background:rgba(239,68,68,.1);border:none;color:var(--d);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-icon-danger i{width:14px;height:14px}

/* BUTTONS */
.btn-primary{background:linear-gradient(135deg,var(--p),#8b5cf6);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 14px var(--pg);transition:all .3s}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.05);border:1px solid var(--b);color:var(--t);padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .3s}
.btn-secondary:hover{border-color:var(--bh)}
.btn-success{background:linear-gradient(135deg,var(--s),#059669);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .3s}
.btn-success:hover{transform:translateY(-1px)}
.btn-primary i,.btn-secondary i,.btn-success i{width:16px;height:16px}
.fw{width:100%}

/* EMPTY STATE */
.empty-st{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;color:var(--m)}
.empty-st i{width:40px;height:40px;opacity:.35}
.empty-st p{font-size:.85rem}

/* MOB FAB */
.mob-fab{display:none;position:fixed;bottom:20px;left:20px;width:58px;height:58px;background:linear-gradient(135deg,var(--p),var(--c));color:#fff;border:none;border-radius:18px;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 6px 20px var(--pg);z-index:100}
.mob-fab i{width:24px;height:24px}
.fab-badge{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--pk);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

@keyframes fu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:768px){
  .two-panel{grid-template-columns:1fr;height:auto}
  .mob-fab{display:flex}
  .cart-panel{display:none}
  .cart-panel.mob-show{display:flex}
  .g-header{grid-template-columns:auto 1fr auto}
  .lt-main{font-size:.95rem}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .wh-cards-grid{grid-template-columns:1fr}
}

/* ── REPORTS SCREEN ────────────────────────────────── */
.reports-body { padding: 100px 2rem 2rem; max-width: 1400px; margin: 0 auto; }
.reports-filters { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 2rem; background: rgba(255,255,255,0.03); border: 1px solid var(--b); }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.reports-table-wrap { border-radius: 1.5rem; overflow: auto; background: rgba(255,255,255,0.02); border: 1px solid var(--b); max-height: 60vh; }
.rep-table { width: 100%; border-collapse: collapse; text-align: right; }
.rep-table th { background: rgba(255,255,255,0.05); padding: 1rem; font-size: 0.9rem; color: var(--m); border-bottom: 1px solid var(--b); position: sticky; top: 0; z-index: 10; }
.rep-table td { padding: 1rem; border-bottom: 1px solid var(--b); font-size: 0.95rem; color: var(--t); }
.rep-table tr:hover { background: rgba(255,255,255,0.03); }
.rep-qty { font-weight: 700; color: var(--c); }
.rep-sector { color: var(--p); font-weight: 600; font-size: 0.85rem; }

.btn-success-sm { background: var(--s); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 10px; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; font-weight: 600; }
.btn-success-sm:hover { filter: brightness(1.1); transform: translateY(-2px); }

@media (max-width: 768px) {
    .reports-body { padding: 80px 1rem 1rem; }
    .rf-grid { grid-template-columns: 1fr; }
    .rep-table { font-size: 0.8rem; min-width: 600px; }
    .rep-table th, .rep-table td { padding: 0.6rem; }
}

/* ── DATA SYNC SECTION ───────────────────────────────── */
.reports-sync { padding: 1.5rem; margin-bottom: 1.5rem; border: 1px dashed rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
.rs-title { font-size: 1rem; font-weight: 800; color: var(--p); display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sync-item { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--b); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 10px; }
.sync-item label { font-size: 0.8rem; font-weight: 700; color: var(--t); }
.btn-secondary-sm { background: rgba(255,255,255,0.05); border: 1px solid var(--b); color: var(--t); border-radius: 10px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 0.85rem; font-family: inherit; transition: all 0.2s; }
.btn-secondary-sm:hover { background: rgba(255,255,255,0.1); border-color: var(--p); }

/* ── USER MANAGEMENT REDESIGN ────────────────────────── */
.user-mgt-sec { background: transparent; border: none; padding: 0; margin-top: 10px; }
.premium-add-user { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 1rem; }
.premium-add-user h4 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--t); }
.premium-add-user h4 i { color: var(--p); width: 18px; height: 18px; }
.user-inputs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.icon-input { position: relative; display: flex; align-items: center; }
.icon-input i { position: absolute; right: 14px; width: 16px; height: 16px; color: var(--m); }
.icon-input input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--b); color: var(--t); font-family: inherit; font-size: 0.9rem; padding: 12px 14px 12px 36px; border-radius: 12px; outline: none; transition: border-color 0.2s; }
.icon-input input:focus { border-color: var(--bh); background: rgba(0, 0, 0, 0.5); }
.premium-perms { background: rgba(0, 0, 0, 0.2); border-radius: 14px; padding: 16px; border: 1px solid rgba(255,255,255,0.05); }
.premium-perms label { font-size: 0.8rem; color: var(--m); font-weight: 700; margin-bottom: 12px; display: block; }
.toggle-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.switch-lbl { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.switch-lbl input { display: none; }
.ts-slider { position: relative; width: 36px; height: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; transition: 0.3s; }
.ts-slider::before { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: 0.3s; }
.switch-lbl input:checked + .ts-slider { background: var(--p); }
.switch-lbl input:checked + .ts-slider::before { transform: translateX(16px); }
.ts-txt { font-size: 0.8rem; font-weight: 600; color: var(--t); }

.premium-user-list { display: flex; flex-direction: column; gap: 10px; }
.p-user-card { background: rgba(15, 22, 45, 0.5); border: 1px solid var(--b); border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s; }
.p-user-card:hover { border-color: rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.05); }
.p-u-info { display: flex; align-items: center; gap: 14px; }
.p-u-avatar { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(6,182,212,0.2)); border: 1px solid rgba(99,102,241,0.3); display: flex; align-items: center; justify-content: center; color: var(--p); }
.p-u-details { display: flex; flex-direction: column; gap: 4px; }
.p-u-name { font-weight: 800; font-size: 1rem; color: var(--t); }
.p-u-role { font-size: 0.75rem; color: var(--m); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.p-u-perms { display: flex; gap: 6px; flex-wrap: wrap; }
.p-u-perm { font-size: 0.7rem; background: rgba(255,255,255,0.06); padding: 4px 10px; border-radius: 8px; color: var(--t); border: 1px solid transparent; }
.p-u-perm.active { background: rgba(99,102,241,0.15); color: var(--p); border-color: rgba(99,102,241,0.2); }
.p-u-actions { display: flex; gap: 8px; }
.btn-icon-del { width: 34px; height: 34px; border-radius: 10px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--d); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.btn-icon-del:hover { background: rgba(239, 68, 68, 0.2); transform: scale(1.05); }

@media (max-width: 600px) {
    .user-inputs-row { grid-template-columns: 1fr; }
    .p-user-card { flex-direction: column; align-items: flex-start; gap: 14px; }
    .p-u-actions { align-self: flex-end; }
}