:root{
    --bg:#0f1216; --panel:#1a1f27; --panel2:#222933; --line:#2c333f;
    --txt:#e8edf4; --muted:#93a0b0; --teal:#0d7d7d;
    --green:#21a366; --amber:#e0a83a; --red:#d9534f; --blue:#3a7bd5;
    --ready:#0d7d7d; --prog:#9a6b00; --draft:#5a6472; --conf:#0d7d7d; --radius:14px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{background:var(--bg);color:var(--txt);font-family:"Segoe UI",Tahoma,system-ui,sans-serif;font-size:16px}
  header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#171c24,#12161c);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .brand{display:flex;align-items:center}
  .brand img{height:48px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
  .spacer{flex:1}
  .crumb{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .crumb b{color:var(--txt)} .crumb a{color:var(--teal);cursor:pointer;text-decoration:none}
  .counts{display:flex;gap:8px;flex-wrap:wrap}
  .chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}
  .chip b{color:var(--txt)}
  button{cursor:pointer;border:none;border-radius:10px;font-weight:700;font-size:15px;padding:12px 16px;color:#fff;transition:transform .05s,filter .15s}
  button:active{transform:scale(.97)} button:disabled{opacity:.45;cursor:not-allowed}
  .btn-start{background:var(--green)} .btn-finish{background:var(--teal)}
  .btn-confirm{background:var(--green)} .btn-cancel{background:var(--red)}
  .btn-ghost{background:var(--panel2);border:1px solid var(--line)}
  main{padding:14px 14px 90px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:900px;margin:30px auto}
  .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;cursor:pointer;transition:border-color .15s,transform .05s;display:flex;flex-direction:column;gap:6px}
  .tile:hover{border-color:var(--teal)} .tile:active{transform:scale(.98)}
  .tile h3{margin:0;font-size:19px} .tile .sub{color:var(--muted);font-size:13px}
  .home-tile{padding:34px 22px;align-items:center;text-align:center;gap:12px}
  .home-tile .ico{font-size:46px;line-height:1}
  .home-tile h3{font-size:22px}
  .bulk{display:flex;gap:10px;padding:12px 14px;position:sticky;top:60px;z-index:15;background:rgba(15,18,22,.85);backdrop-filter:blur(6px)}
  .bulk button{flex:1;font-size:16px;padding:14px}
  .bulk .btn-ghost{flex:0 0 56px;max-width:56px;font-size:18px;padding:14px 0}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}
  .card.progress{border-color:var(--prog);box-shadow:0 0 0 1px var(--prog) inset}
  .card.draft{border-color:var(--draft)}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  /* Fix #36c: manintenance/MO card title no longer breaks vertically when card is narrow */
  .card-top > div:first-child{flex:1 1 auto;min-width:0;max-width:100%}
  .card-top > .badge-wrap{flex:0 1 auto;justify-content:flex-end}
  .mo{font-weight:800;font-size:16px;word-break:normal;overflow-wrap:break-word;white-space:normal;line-height:1.35} .prod{color:var(--muted);font-size:14px;line-height:1.4;word-break:normal;overflow-wrap:break-word}
  .badge{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap}
  .badge.ready{background:var(--ready)} .badge.progress{background:var(--prog)}
  .badge.draft{background:var(--draft)} .badge.confirmed{background:var(--conf)}
  .badge.waiting{background:var(--amber);color:#1a1f27} .badge.pending{background:var(--draft)}
  .scrap-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999}
  .scrap-box{background:#fff;border-radius:14px;padding:20px;width:min(92vw,360px);box-shadow:0 12px 40px rgba(0,0,0,.25);color:#1a2a3a!important}
  /* Fix 2026-07-07 v2: force dark text on white modal backgrounds — using !important to beat theme */
  .scrap-box{color:#1a2a3a!important}
  .scrap-box h3, .scrap-box h4{color:#0a3a5a!important}
  .scrap-box p, .scrap-box div:not([style*="color"]):not(.pk-dest):not(.pk-moves-list):not(.scrap-box):not(#qsResults):not(#qsResults *){color:#1a2a3a}
  .scrap-box b, .scrap-box strong{color:#0a3a5a}
  .scrap-box label{color:#555!important}
  .scrap-box small{color:#556}
  .scrap-box input:not([type=checkbox]):not([type=radio]), .scrap-box select, .scrap-box textarea{color:#1a2a3a!important;background:#fff}
  .scrap-box input::placeholder, .scrap-box textarea::placeholder{color:#8a95a3;opacity:1}
  .scrap-box .muted, .scrap-box .sub2{color:#777!important}
  .scrap-box option{color:#1a2a3a;background:#fff}

  /* ---------- FIX #40: MOBILE UI POLISH (2026-07-07 night) ---------- */
  /* Mobile viewport (<=600px) — tighter header, smarter toolbars, better empty states */
  @media (max-width:600px){
    /* Header: compress logo, hide subtitle-heavy elements */
    header{padding:6px 10px !important;gap:6px !important}
    .brand img{height:32px !important}
    .crumb{font-size:12px !important;gap:4px !important}
    .counts{gap:4px !important}
    .counts .chip{padding:3px 8px !important;font-size:11px !important}
    header .chip b{margin:0 2px}
    /* Logout button smaller on mobile */
    #logout{padding:6px 10px !important;font-size:13px !important}
    /* User pill (مدير عام) more compact */
    .user-pill,#userChip{font-size:12px !important;padding:3px 8px !important}
    /* Toolbars stacking */
    .pk-toolbar{gap:4px !important;margin-bottom:6px !important}
    .pk-toolbar input,.pk-toolbar select,.pk-toolbar button{font-size:13px !important;padding:6px 8px !important}
    #pkSearch{min-width:100% !important;order:-1}
    #pkGroupBy,#pkClearFilters{flex:1 1 auto !important;min-width:0}
    /* Bulk bar tighter */
    #pkBulkBar{padding:6px !important;font-size:12px !important;gap:4px !important}
    #pkBulkBar label,#pkBulkBar span,#pkBulkBar button{font-size:12px !important;padding:4px 8px !important}
    /* Tabs: force equal width */
    .tabs{gap:4px !important;margin:0 0 8px !important}
    .tabs .tab{flex:1 1 0 !important;padding:8px 6px !important;font-size:13px !important;justify-content:center;min-width:0}
    .tab b{font-size:11px !important;padding:1px 6px !important}
    /* Empty state message — more helpful */
    .empty{padding:36px 20px !important;font-size:14px !important;line-height:1.6}
    /* Cards: mobile friendly padding */
    .card{padding:10px !important}
    .mo{font-size:14px !important;line-height:1.3 !important;word-break:normal;overflow-wrap:break-word}
    /* Buttons in card-actions: stack better */
    .card-actions{gap:4px !important}
    .card-actions button{font-size:12px !important;padding:8px 6px !important;flex:1 1 40% !important;min-width:70px !important}
    /* Home tiles: 2 columns */
    .tiles{grid-template-columns:1fr 1fr !important;gap:8px !important}
    .home-tile{padding:14px 10px !important}
    .home-tile h3{font-size:16px !important}
    /* Filter chips */
    #mtFilters{padding:6px !important;gap:4px !important}
    #mtFilters input,#mtFilters select{font-size:12px !important;padding:4px 8px !important}
  }
  /* Very small screens (<=380px, e.g. iPhone SE) — even tighter */
  @media (max-width:380px){
    .brand img{height:28px !important}
    header{padding:5px 8px !important}
    .crumb{font-size:11px !important}
    .counts .chip{padding:2px 6px !important;font-size:10px !important}
    .tabs .tab{padding:6px 4px !important;font-size:12px !important}
    .tiles{grid-template-columns:1fr !important}
  }

  /* ---------- FIX #39: UNIVERSAL DARK-BG SHIELD (2026-07-07 late) ---------- */
  /* أي element داخل .scrap-box عنده خلفية غامقة → نص فاتح — مهما كان عدد طبقات nesting. */
  .scrap-box [style*="background:var(--panel2)"],
  .scrap-box [style*="background:var(--panel)"],
  .scrap-box [style*="background: var(--panel2)"],
  .scrap-box [style*="background: var(--panel)"],
  .scrap-box [style*="background:#222"],
  .scrap-box [style*="background:#1a"],
  .scrap-box [style*="background:#0f"],
  .scrap-box [style*="background:#111"],
  .scrap-box [style*="background:#12"],
  .scrap-box [style*="background:#171"],
  .scrap-box [style*="background:#1e"],
  .scrap-box [style*="background:#2a"],
  .scrap-box [style*="background:#334155"]{
    color:#e8edf4 !important;
  }
  .scrap-box [style*="background:var(--panel2)"] *:not(button):not(.badge):not(input):not(select):not(textarea):not([style*="color"]),
  .scrap-box [style*="background:var(--panel)"] *:not(button):not(.badge):not(input):not(select):not(textarea):not([style*="color"]),
  .scrap-box [style*="background: var(--panel2)"] *:not(button):not(.badge):not(input):not(select):not(textarea):not([style*="color"]),
  .scrap-box [style*="background: var(--panel)"] *:not(button):not(.badge):not(input):not(select):not(textarea):not([style*="color"]){
    color:#e8edf4 !important;
  }
  .scrap-box [style*="background:var(--panel2)"] b:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] strong:not([style*="color"]),
  .scrap-box [style*="background:var(--panel)"] b:not([style*="color"]),
  .scrap-box [style*="background:var(--panel)"] strong:not([style*="color"]){
    color:#ffffff !important;
  }
  .scrap-box [style*="background:var(--panel2)"] small:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] [style*="opacity:.6"]:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] [style*="opacity:.7"]:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] [style*="opacity:.75"]:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] [style*="opacity:.8"]:not([style*="color"]),
  .scrap-box [style*="background:var(--panel2)"] [style*="opacity:.85"]:not([style*="color"]),
  .scrap-box [style*="background:var(--panel)"] small:not([style*="color"]){
    color:#cbd5e1 !important;
    opacity:1 !important;
  }
  .scrap-box [style*="background:var(--panel2)"] label,
  .scrap-box [style*="background:var(--panel)"] label{
    color:#cbd5e1 !important;
  }
  .scrap-box [style*="background:var(--panel2)"] a:not([style*="color"]),
  .scrap-box [style*="background:var(--panel)"] a:not([style*="color"]){
    color:#60a5fa !important;
  }
  /* Helpdesk list rows (customer service tickets) — mkinah primary use of dark rows */
  .scrap-box #hdList,
  .scrap-box #hdList *{
    color:#e8edf4 !important;
  }
  .scrap-box #hdList .hdRow > div > div:first-child{
    color:#ffffff !important;
    font-weight:700 !important;
  }
  .scrap-box #hdList .hdRow small,
  .scrap-box #hdList .hdRow [style*="opacity"]{
    color:#cbd5e1 !important;
    opacity:1 !important;
  }
  .scrap-box #hdList .hdRow:hover{
    background:rgba(255,255,255,.05) !important;
  }
  .scrap-box #hdList .btn-confirm,
  .scrap-box #hdList button{
    color:#ffffff !important;
  }

  /* qsCount (light bg text) — explicit dark */
  .scrap-box #qsCount{color:#1a2a3a!important}
  .scrap-box #qsCount a{color:#0066cc}
  /* QA-view modal ONLY — scoped so it doesn't affect Picking/MO/Scrap modals */
  .scrap-box.qa-view-box{color:#1a2a3a}
  .scrap-box.qa-view-box h3, .scrap-box.qa-view-box b, .scrap-box.qa-view-box strong{color:#0a3a5a}
  .scrap-box.qa-view-box small{color:#556}
  .scrap-box.qa-view-box input, .scrap-box.qa-view-box select{color:#1a2a3a;background:#fff}
  /* QA search results — dark panel needs light text (var(--panel2) is dark) */
  #qsResults, #qsResults *{color:#e8ecf0}
  #qsResults .qsRow{color:#e8ecf0}
  #qsResults button{color:#fff}
  .scrap-box h3{margin:0 0 12px} .scrap-box label{display:block;margin:10px 0 4px;font-size:14px;color:#555}
  .scrap-box select,.scrap-box input{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;font-size:15px}
  .scrap-box textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;font-size:14px;font-family:inherit}
  .qa-box{max-height:90vh;overflow:auto}
  .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
  .qa-sec-h{font-weight:700;margin:14px 0 6px;color:var(--teal,#0d7d7d);border-bottom:1px solid var(--line,#eee);padding-bottom:4px}
  .qa-f label{font-size:12px;opacity:.85;display:block;margin:2px 0}
  .qa-f input{padding:7px 9px;font-size:14px}
  .scrap-actions{display:flex;gap:10px;margin-top:16px} .scrap-actions button{flex:1}
  .tabs{display:flex;gap:10px;margin:0 0 16px;justify-content:center;flex-wrap:wrap}
  .tab{background:#1a2230;color:#aeb7c4;border:1px solid #2a3342;border-radius:999px;padding:10px 20px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}
  .tab b{background:#2a3342;color:#fff;border-radius:999px;padding:1px 9px;font-size:13px}
  .tab.active{background:var(--conf);color:#fff;border-color:var(--conf)}
  .tab.active b{background:rgba(255,255,255,.25)}
  .chip.clickable{cursor:pointer}
  .chip.clickable.on{background:var(--conf);color:#fff;border-color:var(--conf)}
  .pick{margin:6px 0 10px;font-size:14px;color:#cdd5e0}
  .pick b{color:#fff}
  .pick.muted{color:#7d8794}
  .meta{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
  .card-actions{display:flex;gap:8px} .card-actions button{flex:1;padding:11px}
  .btn-warn{background:#d98e00}.btn-done{background:var(--green)}.btn-proc{background:#2563eb}
  .btn-ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
  .card-actions.wrap{flex-wrap:wrap}.card-actions.wrap button{flex:1 1 30%;min-width:88px;font-size:13px;padding:10px}
  .wo-line{font-size:13px;color:var(--muted);margin-top:4px}.wo-line b{color:var(--txt)}
  .wo-note{font-size:12px;color:var(--muted);margin-top:4px}
  .wo-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--txt)}
  .badge-wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}.wo-run{color:var(--green)}.wo-pause{color:#d98e00}
  .empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:18px}
  .login{max-width:380px;margin:60px auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
  .login h2{margin:0 0 4px;font-size:20px;text-align:center}
  .login .wcname{color:var(--teal);text-align:center;font-weight:700;margin-bottom:6px}
  .login input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:13px;font-size:16px}
  .login button{background:var(--teal);font-size:16px;padding:14px}
  .login .err{color:var(--red);font-size:14px;text-align:center;min-height:18px}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:12px 18px;border-radius:12px;font-size:15px;z-index:50;opacity:0;transition:opacity .25s,bottom .25s;pointer-events:none;max-width:90vw;text-align:center}
  .toast.show{opacity:1;bottom:30px} .toast.ok{border-color:var(--green)} .toast.err{border-color:var(--red)}
  .spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;animation:r .7s linear infinite;vertical-align:-3px}
  @keyframes r{to{transform:rotate(360deg)}}
  .loading{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,18,22,.55);z-index:40}
  .loading.on{display:flex}
  .hidden{display:none!important}
  .q-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 22px}
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;text-align:center}
  .kpi .v{font-size:30px;font-weight:800;line-height:1} .kpi .l{color:var(--muted);font-size:13px;margin-top:7px}
  .kpi.good .v{color:var(--green)} .kpi.warn .v{color:var(--amber)} .kpi.bad .v{color:var(--red)}
  .q-h{font-size:16px;color:var(--muted);margin:10px 0 12px;font-weight:700}
  .qrow{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:9px}
  .qrow .n{font-weight:700;font-size:15px} .qrow .c{background:var(--amber);color:#1a1f27;border-radius:999px;padding:4px 14px;font-weight:800;font-size:14px}
  .search{width:100%;max-width:560px;margin:0 auto 16px;display:block;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:13px 16px;font-size:16px}
  .scrap-box .ln{display:flex;align-items:center;gap:10px;margin:9px 0;padding-bottom:9px;border-bottom:1px solid #eee}
  .scrap-box .ln .pn{flex:1;font-size:14px;color:#333;line-height:1.3}
  .scrap-box .ln .pn small{color:#999;display:block}
  .scrap-box .ln input{width:96px;flex:0 0 96px;text-align:center}
  .scrap-box .sub2{color:#777;font-size:13px;margin:-4px 0 10px}
  .scrap-box.wide{width:min(94vw,460px);max-height:86vh;overflow:auto}
  .closed-screen{position:fixed;inset:0;z-index:10000;background:linear-gradient(160deg,#1a1f27,#0f1216);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:18px}
  .closed-screen img{height:130px;width:auto}
  .closed-screen h1{font-size:27px;margin:0;color:#fff}
  .closed-screen p{color:var(--muted);font-size:18px;margin:0;max-width:440px;line-height:1.7}
  .closed-screen .clock{font-size:15px;color:var(--amber);font-weight:700}
  .usr-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
  .usr-row .ui{flex:1;min-width:0}
  .usr-row .un{font-weight:700;font-size:15px}
  .usr-row .ud{color:var(--muted);font-size:13px;margin-top:2px}
  .usr-row .rl{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;white-space:nowrap;color:#fff}
  .rl.master{background:var(--red)} .rl.dept_head{background:var(--blue)} .rl.operator{background:var(--ready)} .rl.production_manager{background:#6b46c1}
  .rl.maintenance{background:#c2410c} .rl.quality{background:#0f766e}
  .mt-stage{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--panel2);color:var(--txt)}
  #whoami{color:var(--muted);font-size:13px;white-space:nowrap;margin-inline-start:8px}
  #topLogout{background:var(--red);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit;margin-inline-start:8px}
  .usr-row .acts{display:flex;gap:6px} .usr-row .acts button{padding:8px 11px;font-size:13px}
  .add-btn{width:100%;max-width:560px;margin:0 auto 16px;display:block;background:var(--green)}
  .frm label{display:block;margin:11px 0 4px;font-size:14px;color:#555;font-weight:600}
  .frm select,.frm input{width:100%;padding:11px;border:1px solid #ccc;border-radius:8px;font-size:15px;background:#fff;color:#222}

  /* Planning toolbar + grouping + create-MO modal */
  .plan-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 auto 14px;max-width:900px}
  .plan-toolbar .search{flex:1;min-width:150px;margin:0;max-width:none}
  .plan-sel{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--txt);font-size:14px;font-family:inherit}
  #moNewBtn{white-space:nowrap;background:var(--teal)}
  .mo-group{margin-bottom:16px}
  .mo-group-h{font-weight:700;margin:8px 2px;padding:8px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;align-items:center;color:var(--txt)}
  .mo-group-n{background:var(--teal);color:#fff;border-radius:12px;padding:2px 10px;font-size:12px}
  #moGrid.grouped{display:block}
  .cmo-list{max-height:220px;overflow:auto;border:1px solid #ddd;border-radius:8px;margin:6px 0}
  .cmo-item{padding:9px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:14px;color:#333}
  .cmo-item:hover{background:#fbeaec}
  .cmo-item .muted{color:#999;font-size:12px}
  .cmo-picked{padding:9px 10px;background:#eafaef;border-radius:8px;margin:6px 0;font-weight:600;color:#197a3d;font-size:14px}
  .scrap-box.mo-new{width:min(94vw,460px)}

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media print {
  body * { visibility: hidden; }
  #mrReport, #mrReport * { visibility: visible; }
  #mrReport { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; max-height: none !important; overflow: visible !important; }
  .no-print { display: none !important; }
  .scrap-overlay { position: static !important; background: transparent !important; }
}
/* Generic Autocomplete dropdown */
.ac-dropdown{position:fixed;z-index:10000;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-height:320px;overflow-y:auto;overscroll-behavior:contain;min-width:200px;font-size:14px}
.ac-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .1s}
.ac-item:last-child{border-bottom:none}
.ac-item:hover, .ac-item.active{background:#0d7d7d;color:#fff;box-shadow:inset 3px 0 0 #66e0d3}
.ac-item .ac-name{font-weight:600;font-size:14px}
.ac-item .ac-code{font-size:12px;opacity:.75;font-family:monospace;margin-top:2px}
.ac-item .ac-meta{font-size:11px;opacity:.7;margin-top:2px}
.ac-item:hover .ac-code, .ac-item.active .ac-code,
.ac-item:hover .ac-meta, .ac-item.active .ac-meta{opacity:.9;color:#fff}
.ac-empty{padding:10px 12px;opacity:.6;text-align:center;font-size:13px}
@media (max-width:600px){
  .ac-dropdown{font-size:15px;max-height:60vh}
  .ac-item{padding:10px 12px}
}

  /* users-ui-v2 — enhanced Users settings */
  .usr-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 auto 14px;max-width:1100px}
  .usr-toolbar input.search{flex:1;min-width:200px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--txt);font-family:inherit;font-size:14px}
  .usr-toolbar .filter-chip{padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;user-select:none;transition:all .15s;font-family:inherit}
  .usr-toolbar .filter-chip:hover{color:var(--txt);border-color:var(--teal)}
  .usr-toolbar .filter-chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}
  .usr-toolbar .filter-chip .cnt{opacity:.75;font-size:11px;margin-inline-start:4px}
  .usr-group{margin:0 auto 16px;max-width:1100px}
  .usr-group-hdr{display:flex;align-items:center;gap:10px;margin:14px 0 8px;padding:0 4px}
  .usr-group-hdr .g-name{font-weight:700;font-size:15px;color:var(--txt)}
  .usr-group-hdr .g-cnt{color:var(--muted);font-size:12px}
  .usr-group-hdr .g-line{flex:1;height:1px;background:var(--line)}
  .usr-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:8px;transition:border-color .15s}
  .usr-card:hover{border-color:var(--teal)}
  .usr-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex:0 0 auto;letter-spacing:.5px}
  .usr-avatar.master{background:linear-gradient(135deg,#d9534f,#a83f3b)}
  .usr-avatar.factory_manager{background:linear-gradient(135deg,#c2410c,#8a2d08)}
  .usr-avatar.production_manager{background:linear-gradient(135deg,#6b46c1,#4a2f8f)}
  .usr-avatar.maintenance{background:linear-gradient(135deg,#c2410c,#8a2d08)}
  .usr-avatar.quality{background:linear-gradient(135deg,#0f766e,#0a524d)}
  .usr-avatar.dept_head{background:linear-gradient(135deg,#3a7bd5,#245ea8)}
  .usr-avatar.operator{background:linear-gradient(135deg,#21a366,#177b4b)}
  .usr-info{flex:1;min-width:0}
  .usr-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .usr-name{font-weight:700;font-size:16px;color:var(--txt)}
  .usr-emp-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(33,163,102,.15);border:1px solid rgba(33,163,102,.35);color:#5dd39e;font-size:11px;padding:2px 8px;border-radius:6px;font-weight:600}
  .usr-scope{color:var(--muted);font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .usr-badge{font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;color:#fff}
  .usr-badge.master{background:var(--red)}
  .usr-badge.factory_manager{background:#c2410c}
  .usr-badge.production_manager{background:#6b46c1}
  .usr-badge.maintenance{background:#c2410c}
  .usr-badge.quality{background:#0f766e}
  .usr-badge.dept_head{background:var(--blue)}
  .usr-badge.operator{background:var(--green)}
  .usr-acts{display:flex;gap:6px;flex:0 0 auto}
  .usr-acts .btn-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;transition:all .15s;font-family:inherit;font-size:16px}
  .usr-acts .btn-icon:hover{background:var(--panel2);color:var(--txt);border-color:var(--txt)}
  .usr-acts .btn-icon.del:hover{background:rgba(217,83,79,.15);color:var(--red);border-color:var(--red)}

  /* Enhanced userForm modal */
  .frm-v2 h3{margin:0 0 6px;padding:0;font-size:20px;color:#111}
  .frm-v2 .modal-sub{color:#666;font-size:13px;margin:0 0 18px}
  .frm-v2 .form-section{border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fafbfc}
  .frm-v2 .form-section-title{font-weight:700;font-size:13px;color:#374151;margin:0 0 12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px}
  .frm-v2 .form-section-title .num{width:22px;height:22px;background:var(--teal);color:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
  .frm-v2 label.field-label{display:block;margin:0 0 5px;font-size:13px;color:#555;font-weight:600}
  .frm-v2 .field-hint{font-size:12px;color:#888;margin-top:3px}
  .frm-v2 input,.frm-v2 select{width:100%;padding:11px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff;color:#222;font-family:inherit;box-sizing:border-box}
  .frm-v2 input:focus,.frm-v2 select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(193,18,31,.1)}
  .frm-v2 .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:600px){.frm-v2 .grid-2{grid-template-columns:1fr}}
  .frm-v2 .emp-picker{position:relative}
  .frm-v2 .emp-picker-input-row{display:flex;gap:8px;align-items:stretch}
  .frm-v2 .emp-picker-input-row input{flex:1}
  .frm-v2 .emp-picker-input-row .btn-clear{padding:0 14px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;color:#666;cursor:pointer;font-family:inherit;font-size:13px}
  .frm-v2 .emp-picker-input-row .btn-clear:hover{background:#e5e7eb;color:#111}
  .frm-v2 .emp-current{margin-top:8px;padding:10px 12px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px}
  .frm-v2 .emp-current.linked{background:#dcfce7;border:1px solid #86efac;color:#166534}
  .frm-v2 .emp-current.unlinked{background:#f3f4f6;border:1px solid #e5e7eb;color:#6b7280}
  .frm-v2 .emp-results{margin-top:8px;max-height:230px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff;display:none}
  .frm-v2 .emp-results.show{display:block}
  .frm-v2 .emp-results .empRow{padding:9px 12px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .1s}
  .frm-v2 .emp-results .empRow:last-child{border-bottom:none}
  .frm-v2 .emp-results .empRow:hover{background:#f0fdf4}
  .frm-v2 .caps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:#fff;border:1px solid #e5e7eb;border-radius:8px}
  @media (max-width:600px){.frm-v2 .caps-grid{grid-template-columns:1fr}}
  .frm-v2 .cap-check{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;border-radius:6px;font-size:13px;color:#374151;transition:background .1s}
  .frm-v2 .cap-check:hover{background:#f9fafb}
  .frm-v2 .cap-check input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--teal)}
  .frm-v2 .op-types-list{max-height:220px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;padding:8px;background:#fff}
  .frm-v2 .op-types-list label{display:flex;align-items:center;gap:8px;padding:5px 4px;cursor:pointer;font-size:13px;color:#374151}
  .frm-v2 .op-types-list label:hover{background:#f9fafb}
  .frm-v2 .frm-actions{display:flex;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid #e5e7eb}
  .frm-v2 .frm-actions button{flex:1;padding:12px;font-size:15px;font-weight:700;border-radius:10px;font-family:inherit;cursor:pointer}
  .frm-v2 .frm-actions .btn-primary{background:var(--green);color:#fff;border:none}
  .frm-v2 .frm-actions .btn-primary:hover{filter:brightness(1.05)}
  .frm-v2 .frm-actions .btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}
  .frm-v2 .frm-actions .btn-secondary:hover{background:#e5e7eb}
  .scrap-box.wide.frm-v2{width:min(94vw,640px)!important;max-width:640px;padding:22px;max-height:90vh;overflow-y:auto;border-radius:16px}

  /* Picking-Done modal grid: responsive for mobile (Fix 2026-07-06) */
  .pd-grid-header{display:grid;grid-template-columns:36px 2fr 80px 80px 80px 100px;gap:6px;padding:4px 0;border-bottom:2px solid var(--line);font-weight:700;font-size:13px}
  .pd-grid-row{display:grid;grid-template-columns:36px 2fr 80px 80px 80px 100px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
  .pd-grid-row .pd-name{font-size:14px;line-height:1.35}
  .pd-grid-row .pd-num{font-size:13px;font-weight:600}
  #pdMoves{max-height:60vh;overflow-y:auto;overflow-x:hidden}
  @media (max-width:600px){
    .pd-grid-header{display:none}  /* hide header on mobile — each row becomes a card */
    .pd-grid-row{grid-template-columns:28px 1fr;grid-template-areas:"chk name" "stats stats" "qty qty";gap:4px;padding:10px 4px;row-gap:6px;border-bottom:1px solid var(--line)}
    .pd-grid-row .pd-chk{grid-area:chk;align-self:start;padding-top:4px}
    .pd-grid-row .pd-name{grid-area:name;font-size:14px;font-weight:600}
    .pd-grid-row .pd-num-cell{display:none!important}  /* hide desktop cells */
    .pd-grid-row .pd-stats{grid-area:stats;display:flex!important;flex-wrap:wrap;gap:12px;font-size:12px;opacity:.9}
    .pd-grid-row .pd-stats .pd-num{font-weight:700}
    .pd-grid-row .pd-qty-wrap{grid-area:qty;justify-content:flex-start!important}
    .pd-grid-row .pd-qty-input{width:110px!important;font-size:16px;padding:6px}
    .scrap-box{padding:10px!important;width:98vw!important;max-width:98vw!important;box-sizing:border-box}
    .scrap-box.wide{max-width:98vw!important;width:98vw!important}
    .scrap-box h3{font-size:16px}
    #pdMoves{max-height:50vh}
    /* HD Detail modal mobile: shorter sections + sticky footer */
    .hd-detail-box{width:98vw!important;max-width:98vw!important;max-height:94vh!important;padding:0!important}
    .hd-detail-box .hd-detail-scroll{padding:12px 12px 8px 12px!important}
    .hd-detail-box #hdDtDesc{max-height:100px!important;font-size:12px!important}
    .hd-detail-box #hdDtMsgs{max-height:20vh!important}
    .hd-detail-box .hd-detail-footer{padding:8px 12px!important}
  }

  /* Waly-patch 2026-07-12: force light background on picking-done modal inputs.
     Inline styles use background:var(--panel2) which is dark; combined with the
     already-!important color:#1a2a3a made the text invisible. */
  .scrap-box .pdLotNew, .scrap-box .pdQty, .scrap-box .pdLotMultiQty,
  .scrap-box input.pdLotNew, .scrap-box input.pdQty, .scrap-box input.pdLotMultiQty{
    background: #fff !important;
    color: #1a2a3a !important;
    border: 1px solid #ccc !important;
  }
  .scrap-box .pdLotNew::placeholder, .scrap-box .pdLotMultiQty::placeholder{
    color: #8a95a3 !important;
    opacity: 1;
  }

  .scrap-box #srList button,
  .scrap-box #srMoves button{
    color:#fff !important;
  }
  .scrap-box #pdMoves .pd-name b{
    color:#ffffff !important;
    font-weight:700;
  }
  .scrap-box #pdMoves .pd-num-cell,
  .scrap-box #pdMoves .pd-num-cell b{
    color:#e0e7ee !important;
    font-weight:600;
  }
  /* الأرقام الملوّنة (رصيد أخضر/أحمر) — رفع تباين */
  .scrap-box #pdMoves [style*="color:#0a7"]{ color:#4ade80 !important; }
  .scrap-box #pdMoves [style*="color:#c66"]{ color:#fca5a5 !important; }
  .scrap-box #pdMoves small{ color:#cbd5e1 !important; }

  /* .pd-bulk-toolbar (تحديد سريع) */
  .scrap-box .pd-bulk-toolbar,
  .scrap-box .pd-bulk-toolbar *{
    color:#e8edf4;
  }
  .scrap-box .pd-bulk-toolbar small,
  .scrap-box .pd-bulk-toolbar [style*="opacity:.7"]{
    color:#cbd5e1 !important;
    opacity:1 !important;
  }

  /* .pk-toolbar (مودال باكينج الجماعي) */
  .scrap-box .pk-toolbar,
  .scrap-box .pk-toolbar *{ color:#e8edf4; }

  /* Lot badge (فاتح داخل الجدول الداكن) */
  .scrap-box [style*="background:#e0f2fe"]{
    background:#e0f2fe !important;
    color:#0369a1 !important;
  }

  /* أزرار Bulk (btn-ghost) داخل toolbar داكن */
  .scrap-box .pd-bulk-toolbar .btn-ghost,
  .scrap-box .pk-toolbar .btn-ghost{
    background:#374151 !important;
    color:#f1f5f9 !important;
    border:1px solid #4b5563 !important;
  }
  .scrap-box .pd-bulk-toolbar .btn-ghost:hover,
  .scrap-box .pk-toolbar .btn-ghost:hover{
    background:#4b5563 !important;
    border-color:#6b7280 !important;
  }
/* Waly 2026-07-15: fix spare-parts issue modal work-center dropdown readability
   ONLY targets #spWc (spare parts modal) — no impact on other <select>s */
#spWc,
#spWc option,
#retDest,
#retDest option,
#srDest,
#srDest option {
  background: #1a1a1a !important;
  color: #f5f5f5 !important;
}
#spWc option:disabled,
#retDest option:disabled {
  color: #888 !important;
}

/* Waly 2026-07-15: fix picking-done modal (#pdMoves) lot/qty input readability
   ONLY targets lot pickers inside #pdMoves — no impact on other inputs anywhere */
#pdMoves .pdLot,
#pdMoves .pdLot option,
#pdMoves .pdLotNew,
#pdMoves .pdQty,
#pdMoves .pdLotMultiQty,
#pdMoves input.pdLotNew,
#pdMoves input.pdQty,
#pdMoves input.pdLotMultiQty {
  background: #1a1a1a !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
}
#pdMoves .pdLot option:disabled {
  color: #888 !important;
}
#pdMoves .pdLotNew::placeholder,
#pdMoves .pdQty::placeholder,
#pdMoves .pdLotMultiQty::placeholder {
  color: #8a95a5 !important;
  opacity: 1 !important;
}

/* Waly 2026-07-15: fix picking-done modal secondary action buttons readability
   ONLY targets these specific IDs — no impact on other buttons */
button#pdUnres,
button#pdScrapAll,
button#pdBoNo,
button#pdRecycle,
button#pdBoCreate {
  background: #1f2937 !important;
  color: #f5f5f5 !important;
  border: 1px solid #6b7280 !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 150ms !important;
}
button#pdUnres:hover,
button#pdScrapAll:hover,
button#pdBoNo:hover,
button#pdRecycle:hover,
button#pdBoCreate:hover {
  background: #374151 !important;
  border-color: #9ca3af !important;
}
/* Slight color-code the destructive one (scrap) */
button#pdScrapAll {
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}
button#pdScrapAll:hover {
  background: #7f1d1d !important;
  color: #fff !important;
}
/* Slight color-code the constructive one (create backorder) */
button#pdBoCreate {
  color: #6ee7b7 !important;
  border-color: #047857 !important;
}
button#pdBoCreate:hover {
  background: #047857 !important;
  color: #fff !important;
}