*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f4f0;--surface:#fff;--surface2:#faf9f6;--border:#e2ddd6;--border2:#ccc8c0;
  --text:#1c1a18;--muted:#706860;--accent:#c94c28;--accent2:#e8722e;
  --green:#1a6b3a;--greenbg:#e8f5ee;--red:#8b1a1a;--redbg:#fdf0f0;
  --blue:#1a4a8a;--bluebg:#e8f0fc;--amber:#7a4e00;--amberbg:#fdf3e0;
  --purple:#5a1a8a;--purplebg:#f3e8fd;
  --r:8px;--rl:12px;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:200}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;width:340px;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.login-logo{font-size:1.2rem;font-weight:700;letter-spacing:.06em;text-align:center;margin-bottom:1.8rem;color:var(--text)}
.login-logo span{color:var(--accent)}
.login-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.login-field label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.login-field input{padding:.6rem .8rem;border:1px solid var(--border2);border-radius:8px;font-size:.95rem;color:var(--text);background:var(--surface2)}
.login-field input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.login-btn{width:100%;padding:.7rem;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:.5rem}
.login-btn:hover{background:var(--accent2)}
.login-error{color:var(--red);font-size:.8rem;text-align:center;margin-top:.5rem;min-height:1.2rem}

/* ── APP LAYOUT ── */
#app{display:none;grid-template-columns:240px 1fr;grid-template-rows:54px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .2s ease}
#app.sb-collapsed{grid-template-columns:0px 1fr}
#app.sb-collapsed .sidebar{padding:0;border:none;overflow:hidden;min-width:0}
#app.visible{display:grid}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:.75rem;padding:0 1rem;background:var(--surface);border-bottom:1px solid var(--border);z-index:20}
.logo{font-size:.9rem;font-weight:700;letter-spacing:.06em;color:var(--text);flex-shrink:0}
.logo span{color:var(--accent)}
.search-wrap{flex:1;max-width:340px;position:relative}
.search-wrap input{width:100%;padding:.38rem .7rem .38rem 2rem;border:1px solid var(--border);background:var(--surface2);border-radius:6px;font-size:.83rem;color:var(--text)}
.si{position:absolute;left:.55rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tb-right{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.tb-btn{padding:.32rem .65rem;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;font-size:.75rem;color:var(--text);display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.tb-btn:hover{background:var(--surface2)}
.tb-btn.danger{color:var(--red);border-color:var(--red)}
.tb-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.tb-btn.primary:hover{background:var(--accent2)}
#sync-status{font-size:.7rem;font-family:monospace;color:var(--muted);padding:.22rem .5rem;background:var(--surface2);border:1px solid var(--border);border-radius:20px;white-space:nowrap}
.user-badge{font-size:.72rem;padding:.22rem .6rem;background:var(--purplebg);color:var(--purple);border-radius:20px;border:1px solid var(--purple);font-weight:600}

/* ── SIDEBAR ── */
.sidebar{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:.5rem 0;display:flex;flex-direction:column;transition:all .2s ease;min-width:0}
.app.sb-collapsed .sidebar{padding:0;border:none;overflow:hidden}
.sb-sec-title{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.5rem .8rem .25rem;font-weight:600}
.sb-item{display:flex;align-items:center;gap:.45rem;padding:.35rem .8rem;font-size:.8rem;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--text)}
.sb-item:hover{background:var(--surface2)}
.sb-item.active{background:var(--accent);color:#fff;font-weight:500}
.sb-item.active .sb-count{background:rgba(255,255,255,.25);color:#fff}
.sb-icon{font-size:.95rem;flex-shrink:0;width:18px;text-align:center}
.sb-count{margin-left:auto;font-size:.65rem;background:var(--surface2);border:1px solid var(--border);padding:.1rem .38rem;border-radius:10px;color:var(--muted);min-width:22px;text-align:center}
.sb-div{height:1px;background:var(--border);margin:.3rem .8rem}

/* ── MAIN ── */
.main{overflow-y:auto;padding:1rem}
.grid-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.5rem}
.grid-title{font-size:.88rem;font-weight:600}
.res-info{font-size:.72rem;color:var(--muted);font-family:monospace}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.65rem}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.09)}
.card-thumb{width:100%;height:115px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;border-bottom:1px solid var(--border)}
.card-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.card-body{padding:.6rem .65rem;display:flex;flex-direction:column;gap:.22rem}
.card-name{font-size:.78rem;font-weight:600;line-height:1.3}
.card-sub{font-size:.65rem;color:var(--muted)}
.card-badges{display:flex;gap:.22rem;flex-wrap:wrap;margin-top:.2rem}
.badge{font-size:.6rem;padding:.1rem .35rem;border-radius:4px;font-family:monospace;font-weight:600}
.b-ok{background:var(--greenbg);color:var(--green)}
.b-no{background:var(--redbg);color:var(--red)}
.b-code{background:var(--amberbg);color:var(--amber)}
.b-prod{background:var(--bluebg);color:var(--blue)}
.b-edit{background:var(--purplebg);color:var(--purple)}
.b-trash{background:#fef0e0;color:#a05000}

/* ── PANEL ── */
.p-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.p-overlay.open{opacity:1;pointer-events:all}
.panel{position:fixed;right:0;top:0;bottom:0;width:min(660px,100vw);background:var(--surface);border-left:1px solid var(--border);z-index:51;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.panel.open{transform:translateX(0)}
.p-hdr{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.p-hdr h2{font-size:.95rem;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-btn{padding:.3rem .6rem;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;font-size:.73rem;color:var(--text);display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.ph-btn:hover{background:var(--surface2)}
.ph-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ph-btn.green{background:var(--greenbg);color:var(--green);border-color:var(--green)}
.ph-btn.red{background:var(--redbg);color:var(--red);border-color:var(--red)}
.ph-btn.blue{background:var(--bluebg);color:var(--blue);border-color:var(--blue)}
.p-body{overflow-y:auto;flex:1;padding:1.1rem}

/* ── SECTIONS ── */
.sec{margin-bottom:1.3rem}
.sec-hdr{font-size:.65rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);padding-bottom:.35rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.4rem}
.sec-badge{font-size:.6rem;padding:.1rem .38rem;border-radius:4px;font-weight:700}
.sb-ok{background:var(--greenbg);color:var(--green)}
.sb-miss{background:var(--redbg);color:var(--red)}
.itbl{width:100%;border-collapse:collapse;font-size:.81rem}
.itbl td{padding:.3rem .1rem;vertical-align:top}
.itbl td:first-child{color:var(--muted);width:140px;font-size:.75rem;padding-right:.5rem}
.iv{color:var(--text)}
.iv.rtl{direction:rtl;text-align:right}
.iv.mono{font-family:monospace;font-size:.78rem}
.iv.empty{color:var(--muted);font-style:italic}
.bc-row{font-family:monospace;font-size:.77rem;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:.35rem .6rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.3rem}
.bc-code{color:var(--amber);font-weight:700}
.bc-ar{color:var(--muted);font-size:.72rem;direction:rtl}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:.18rem .5rem;font-size:.73rem}
.chip-wrap{display:flex;flex-wrap:wrap;gap:.3rem}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.prod-cell{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:.45rem .6rem}
.prod-lbl{font-size:.62rem;color:var(--muted);margin-bottom:.12rem;text-transform:uppercase;letter-spacing:.05em}
.prod-val{font-size:.85rem;font-weight:600;font-family:monospace}
.prod-val.rtl{font-family:inherit;font-size:.78rem;direction:rtl}
.no-data{color:var(--muted);font-size:.78rem;font-style:italic;line-height:1.6}
.ratio-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:.4rem}

/* ── EDIT MODE ── */
.ef{display:flex;flex-direction:column;gap:.18rem;margin-bottom:.55rem}
.el{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ei,.et,.es{width:100%;padding:.38rem .55rem;border:1px solid var(--border2);border-radius:6px;background:var(--surface);color:var(--text);font-size:.81rem;font-family:inherit}
.ei:focus,.et:focus,.es:focus{outline:2px solid var(--accent);outline-offset:-1px}
.et{resize:vertical;min-height:60px}
.eg2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.eg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.45rem}

/* DataProducts linker */
.dp-link-box{background:var(--bluebg);border:1px solid var(--blue);border-radius:8px;padding:.6rem .8rem;margin-bottom:.8rem}
.dp-link-label{font-size:.7rem;color:var(--blue);font-weight:600;margin-bottom:.35rem}
.dp-link-val{font-size:.82rem;font-weight:600;color:var(--text);direction:rtl;margin-bottom:.35rem}
.dp-search-wrap{position:relative}
.dp-search-input{width:100%;padding:.38rem .55rem;border:1px solid var(--border2);border-radius:6px;font-size:.81rem;background:var(--surface);color:var(--text)}
.dp-dropdown{position:absolute;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--border2);border-radius:6px;max-height:220px;overflow-y:auto;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.dp-opt{padding:.38rem .6rem;font-size:.79rem;cursor:pointer;display:flex;flex-direction:column;gap:.1rem;border-bottom:1px solid var(--border)}
.dp-opt:hover{background:var(--bluebg)}
.dp-opt-name{direction:rtl;font-weight:500}
.dp-opt-meta{font-size:.68rem;color:var(--muted);font-family:monospace}

/* Material ratio input */
.ratio-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.ratio-row input{flex:1;padding:.35rem .5rem;border:1px solid var(--border2);border-radius:5px;background:var(--surface);color:var(--text);font-size:.79rem;font-family:monospace}
.ratio-colon{font-size:.9rem;color:var(--muted);flex-shrink:0}
.ratio-pct{font-size:.72rem;color:var(--muted);font-family:monospace;white-space:nowrap;flex-shrink:0;min-width:70px}
.add-row-btn{font-size:.72rem;color:var(--blue);background:none;border:1px dashed var(--border2);border-radius:6px;padding:.3rem .6rem;cursor:pointer;width:100%;margin-top:.25rem}
.add-row-btn:hover{background:var(--bluebg)}
.del-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:.28rem .45rem;cursor:pointer;color:var(--red);font-size:.75rem}
.del-btn:hover{background:var(--redbg)}

/* Save bar */
.save-bar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:.65rem 0;margin-top:.5rem;display:flex;gap:.5rem}
.save-btn{flex:1;padding:.5rem;background:var(--accent);color:#fff;border:none;border-radius:7px;font-size:.85rem;font-weight:600;cursor:pointer;justify-content:center}
.save-btn:hover{background:var(--accent2)}
.cancel-btn{padding:.5rem .9rem;border:1px solid var(--border);border-radius:7px;background:none;cursor:pointer;font-size:.82rem;color:var(--text)}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:14px;padding:1.8rem;width:min(480px,90vw);max-height:85vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.2)}
.modal h3{font-size:1rem;font-weight:700;margin-bottom:1.2rem}
.modal-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.2rem}
.btn{padding:.45rem .9rem;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface2)}
.btn-green{background:var(--green);color:#fff}

/* ── SETTINGS / ADMIN ── */
.settings-panel{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:80;display:none;align-items:flex-start;justify-content:flex-end}
.settings-panel.open{display:flex}
.settings-box{background:var(--surface);width:min(420px,100vw);height:100vh;overflow-y:auto;border-left:1px solid var(--border);padding:1.2rem}
.settings-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.settings-hdr h3{font-size:.95rem;font-weight:700}
.user-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.user-name{font-size:.85rem;font-weight:600;flex:1}
.user-role{font-size:.7rem;padding:.18rem .5rem;border-radius:10px;font-weight:600}
.role-admin{background:var(--purplebg);color:var(--purple)}
.role-supervisor{background:var(--amberbg);color:var(--amber)}
.role-operator{background:var(--bluebg);color:var(--blue)}
.role-viewer{background:var(--greenbg);color:var(--green)}
.toggle-role{font-size:.7rem;padding:.22rem .5rem;border:1px solid var(--border);border-radius:5px;cursor:pointer;background:none;color:var(--text)}
.toggle-role:hover{background:var(--surface2)}
.del-user-btn{font-size:.7rem;padding:.22rem .45rem;border:1px solid var(--red);border-radius:5px;cursor:pointer;background:none;color:var(--red)}

/* ── ACTIVITY LOG ── */
.log-row{padding:.45rem .6rem;border-bottom:1px solid var(--border);font-size:.78rem;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:start}
.log-user{font-weight:600;color:var(--purple)}
.log-action{color:var(--text)}
.log-time{font-size:.68rem;color:var(--muted);font-family:monospace;white-space:nowrap}

/* ── PRINT ── */
.print-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:1rem}
.print-overlay.open{display:flex}
.print-wrap{width:210mm;max-width:100%}
.print-actions{background:#222;padding:.55rem 1rem;display:flex;gap:.5rem;align-items:center;border-radius:8px 8px 0 0}
.print-card{background:#fff;color:#111;width:210mm;min-height:160mm;padding:12mm;font-family:'Segoe UI',sans-serif;font-size:9.5pt;line-height:1.45}
.pc-logo{font-size:13pt;font-weight:700;color:#c94c28;letter-spacing:.06em}
.pc-hdr{display:flex;justify-content:space-between;border-bottom:2pt solid #c94c28;padding-bottom:5mm;margin-bottom:5mm}
.pc-title{font-size:15pt;font-weight:700;margin:.4rem 0 .25rem}
.pc-sec{margin-bottom:4mm}
.pc-sec-title{font-size:8.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#666;border-bottom:1pt solid #ddd;padding-bottom:2pt;margin-bottom:2.5mm}
.pc-tbl{width:100%;border-collapse:collapse;font-size:8.5pt}
.pc-tbl td{padding:2pt 3pt;border-bottom:1pt solid #eee;vertical-align:top}
.pc-tbl td:first-child{color:#666;width:120pt}
.pc-tbl th{background:#f5f5f5;padding:2.5pt 3pt;font-size:8pt;text-align:left;border-bottom:1pt solid #ccc;color:#444}
.pc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:3mm}
.pc-box{border:1pt solid #ddd;border-radius:3pt;padding:2.5mm;background:#fafafa}
.pc-box-lbl{font-size:7pt;color:#888;text-transform:uppercase;letter-spacing:.05em}
.pc-box-val{font-size:10pt;font-weight:700}
.pc-footer{border-top:1pt solid #ddd;padding-top:2.5mm;font-size:7pt;color:#888;display:flex;justify-content:space-between;margin-top:4mm}
.pnf{color:#bbb;font-style:italic}

@media print{
  body>*:not(.print-overlay){display:none!important}
  .print-overlay{display:block!important;position:static;background:none;padding:0}
  .print-actions{display:none!important}
  .print-wrap{width:100%}
  .print-card{box-shadow:none;padding:8mm}
}
mark{background:#fff3a0;border-radius:2px;padding:0 1px}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--green);color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.8rem;z-index:300;transition:opacity .4s;pointer-events:none}