/* =====================================================================
   stock-modern.css — Stock Center (new Manage Stock workspace)
   ---------------------------------------------------------------------
   Visual language matches the Advanced Warehouse / dashboard refresh:
   surface cards, indigo-violet accent, severity colours, uppercase muted
   labels, monospace tabular numbers.

   Scoped entirely to .sc-wrap / .sc-history, so it cannot affect any
   other screen. RTL-aware via logical properties. Reversible: delete this
   file + its <link>.
   ===================================================================== */

.sc-wrap{
  --sc-accent:#6D5EF6; --sc-accent-ink:#4736C9; --sc-accent-soft:rgba(109,94,246,.10);
  --sc-good:#0F9F6E; --sc-warn:#E8940C; --sc-crit:#E23B4E;
  --sc-surface:#FFFFFF; --sc-bg:#F4F5FB; --sc-surface2:#F1F2F9; --sc-border:#E4E6F1;
  --sc-text:#15172B; --sc-text2:#565A76; --sc-text3:#8A8DA8;
  --sc-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
  --sc-radius:14px;
  --sc-shadow:0 1px 2px rgba(20,22,43,.04),0 10px 26px -14px rgba(20,22,43,.16);
  color:var(--sc-text);
  padding-bottom:104px; /* room for the sticky apply bar */
}
body.dark-theme .sc-wrap{
  --sc-surface:#141724; --sc-bg:#0B0D15; --sc-surface2:#1B1F30; --sc-border:#262B41;
  --sc-text:#ECEEF9; --sc-text2:#A4A8C6; --sc-text3:#6E7391;
  --sc-accent:#8B7CF9; --sc-accent-ink:#C7BEFF; --sc-accent-soft:rgba(139,124,249,.14);
  --sc-good:#26C08A; --sc-warn:#F1A73A; --sc-crit:#F16173;
  --sc-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 32px -16px rgba(0,0,0,.6);
}

/* ---- header --------------------------------------------------------- */
.sc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.sc-head-left{ display:flex; align-items:center; gap:.85rem; }
.sc-back{
  display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; flex:0 0 auto;
  border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-text);
  border-radius:12px; font-size:1.05rem; transition:.15s;
}
.sc-back:hover{ background:var(--sc-accent-soft); color:var(--sc-accent-ink); border-color:var(--sc-accent); }
.sc-wrap [dir="rtl"] .sc-back i, [dir="rtl"] .sc-wrap .sc-back i{ transform:scaleX(-1); }
.sc-title{ font-size:1.5rem; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--sc-text); }
.sc-sub{ margin:.15rem 0 0; font-size:.88rem; color:var(--sc-text2); }
.sc-head-right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.sc-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:11px;
  border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-text);
  font-size:.87rem; font-weight:600; transition:.15s; white-space:nowrap;
}
.sc-btn:hover{ background:var(--sc-surface2); }
.sc-btn.primary{
  background:linear-gradient(140deg,var(--sc-accent),var(--sc-accent-ink)); border:0; color:#fff;
  box-shadow:0 10px 22px -12px var(--sc-accent);
}
.sc-btn.primary:hover{ filter:brightness(1.05); }
.sc-btn.primary:disabled{ opacity:.6; cursor:not-allowed; filter:none; }
.sc-btn.ghost{ background:transparent; color:var(--sc-text2); }

/* ---- KPIs ----------------------------------------------------------- */
.sc-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1rem; }
.sc-kpi{
  background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:var(--sc-radius);
  padding:.85rem 1rem; box-shadow:var(--sc-shadow); position:relative; overflow:hidden;
}
.sc-kpi::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--sc-text3); opacity:.5; }
.sc-kpi.good::before{ background:var(--sc-good); opacity:1; }
.sc-kpi.warn::before{ background:var(--sc-warn); opacity:1; }
.sc-kpi.crit::before{ background:var(--sc-crit); opacity:1; }
.sc-kpi .lbl{ display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--sc-text3); margin-bottom:.3rem; }
.sc-kpi .val{ display:block; font-family:var(--sc-mono); font-size:1.35rem; font-weight:700; color:var(--sc-text); font-variant-numeric:tabular-nums; }

/* ---- operation selector --------------------------------------------- */
.sc-opbar{
  background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:var(--sc-radius);
  padding:.85rem 1rem; margin-bottom:.85rem; box-shadow:var(--sc-shadow);
}
.sc-opbar-label{ display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--sc-text3); margin-bottom:.55rem; }
.sc-ops{ display:flex; flex-wrap:wrap; gap:.45rem; }
.sc-op{
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:11px;
  border:1px solid var(--sc-border); background:var(--sc-surface2); color:var(--sc-text2);
  font-size:.87rem; font-weight:600; transition:.15s;
}
.sc-op:hover{ color:var(--sc-text); border-color:var(--sc-accent); }
.sc-op.active{
  background:linear-gradient(140deg,var(--sc-accent),var(--sc-accent-ink)); border-color:transparent; color:#fff;
  box-shadow:0 8px 18px -10px var(--sc-accent);
}
.sc-ophint{ margin-top:.6rem; font-size:.78rem; color:var(--sc-text3); }

/* ---- filters -------------------------------------------------------- */
.sc-filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.85rem; }
.sc-search{ position:relative; flex:1 1 240px; display:flex; align-items:center; }
.sc-search i{ position:absolute; inset-inline-start:.8rem; color:var(--sc-text3); font-size:.9rem; pointer-events:none; }
.sc-search input{
  width:100%; height:2.7rem; padding-inline-start:2.4rem; padding-inline-end:.9rem;
  border:1px solid var(--sc-border); border-radius:11px; background:var(--sc-surface); color:var(--sc-text); font-size:.9rem;
}
.sc-search input:focus{ outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 3px var(--sc-accent-soft); }
.sc-select{
  height:2.7rem; padding:0 .8rem; border:1px solid var(--sc-border); border-radius:11px;
  background:var(--sc-surface); color:var(--sc-text); font-size:.88rem; font-weight:500; min-width:150px;
}
.sc-select:focus{ outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 3px var(--sc-accent-soft); }

/* ---- table ---------------------------------------------------------- */
.sc-tablewrap{
  background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:var(--sc-radius);
  box-shadow:var(--sc-shadow); overflow-x:auto;
}
.sc-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.sc-table thead th{
  position:sticky; top:0; z-index:1; background:var(--sc-surface2); color:var(--sc-text3);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:.7rem .8rem; text-align:start; white-space:nowrap; border-bottom:1px solid var(--sc-border);
}
.sc-table tbody td{ padding:.6rem .8rem; border-bottom:1px solid var(--sc-border); vertical-align:middle; }
.sc-table tbody tr:last-child td{ border-bottom:0; }
.sc-table tbody tr:hover{ background:var(--sc-surface2); }
.sc-table tbody tr.staged{ background:var(--sc-accent-soft); }
.sc-table .n{ text-align:end; font-family:var(--sc-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sc-table th.n{ text-align:end; }
.sc-dim{ color:var(--sc-text3); }
.sc-unit{ color:var(--sc-text3); font-size:.78rem; }

.sc-prod{ display:flex; align-items:center; gap:.6rem; min-width:180px; }
.sc-avatar{
  width:2rem; height:2rem; flex:0 0 auto; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--sc-accent-soft); color:var(--sc-accent-ink); font-weight:700; font-size:.85rem;
}
.sc-prod-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.sc-prod-txt b{ color:var(--sc-text); font-weight:600; }
.sc-prod-txt small{ color:var(--sc-text3); font-size:.74rem; }

.sc-tag{
  display:inline-block; padding:.15rem .5rem; border-radius:6px; background:var(--sc-surface2);
  border:1px solid var(--sc-border); color:var(--sc-text2); font-size:.75rem; font-weight:600;
}
.sc-status{ display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.sc-status.ok{ background:rgba(15,159,110,.12); color:var(--sc-good); }
.sc-status.low{ background:rgba(232,148,12,.14); color:var(--sc-warn); }
.sc-status.out{ background:rgba(226,59,78,.12); color:var(--sc-crit); }

.sc-qty-col{ width:120px; }
.sc-qty{
  width:100px; height:2.2rem; text-align:end; padding:0 .55rem;
  border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-surface); color:var(--sc-text);
  font-family:var(--sc-mono); font-size:.87rem;
}
.sc-qty:focus{ outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 3px var(--sc-accent-soft); }
/* Alert level: quieter than the quantity input — it's a setting, not an action. */
.sc-min{
  width:76px; height:2.1rem; text-align:end; padding:0 .45rem;
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--sc-text2);
  font-family:var(--sc-mono); font-size:.85rem;
}
.sc-min:hover{ border-color:var(--sc-border); background:var(--sc-surface); }
.sc-min:focus{ outline:none; border-color:var(--sc-accent); background:var(--sc-surface); box-shadow:0 0 0 3px var(--sc-accent-soft); color:var(--sc-text); }
.sc-min:disabled{ opacity:.5; }

.sc-after{ color:var(--sc-accent-ink); font-weight:700; }
.sc-after.bad{ color:var(--sc-crit); }
.sc-pos{ color:var(--sc-good); font-weight:700; }
.sc-neg{ color:var(--sc-crit); font-weight:700; }

.sc-rowbtn{
  width:2rem; height:2rem; border-radius:8px; border:1px solid var(--sc-border);
  background:var(--sc-surface); color:var(--sc-text2); display:inline-flex; align-items:center; justify-content:center;
}
.sc-rowbtn:hover{ background:var(--sc-accent-soft); color:var(--sc-accent-ink); border-color:var(--sc-accent); }

.sc-empty{ text-align:center; padding:2.5rem 1rem; color:var(--sc-text3); }
.sc-empty i{ font-size:2rem; display:block; margin-bottom:.5rem; opacity:.6; }
.sc-empty p{ margin:0; font-size:.9rem; }

/* ---- sticky apply bar ------------------------------------------------ */
.sc-applybar{
  /* Below the sidebar/overlay (z 10000+) but above page content. The mobile
     quick-action footer sits at z-index 3000, so on small screens the bar is
     lifted above it rather than fighting it for stacking order. */
  position:fixed; inset-inline:1rem; bottom:1rem; z-index:2990;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; border-radius:var(--sc-radius);
  background:var(--sc-surface); border:1px solid var(--sc-accent);
  box-shadow:0 18px 44px -18px rgba(20,22,43,.5);
}
.sc-applybar[hidden]{ display:none; }
.sc-applybar-info{ display:flex; align-items:center; gap:.45rem; font-size:.87rem; color:var(--sc-text2); font-weight:600; }
.sc-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.7rem; height:1.7rem; padding:0 .45rem;
  border-radius:999px; background:linear-gradient(140deg,var(--sc-accent),var(--sc-accent-ink)); color:#fff;
  font-family:var(--sc-mono); font-weight:700; font-size:.82rem;
}
.sc-reason{
  flex:1 1 220px; height:2.5rem; padding:0 .8rem; border:1px solid var(--sc-border); border-radius:10px;
  background:var(--sc-surface); color:var(--sc-text); font-size:.87rem;
}
.sc-reason:focus{ outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 3px var(--sc-accent-soft); }
.sc-applybar-actions{ display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; }

/* ---- history modal --------------------------------------------------- */
.sc-history{ --sc-accent:#6D5EF6; --sc-accent-ink:#4736C9; --sc-accent-soft:rgba(109,94,246,.10);
  --sc-good:#0F9F6E; --sc-crit:#E23B4E;
  --sc-surface:#FFFFFF; --sc-surface2:#F1F2F9; --sc-border:#E4E6F1;
  --sc-text:#15172B; --sc-text2:#565A76; --sc-text3:#8A8DA8;
  --sc-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
  --sc-radius:14px; --sc-shadow:none;
}
body.dark-theme .sc-history{
  --sc-surface:#141724; --sc-surface2:#1B1F30; --sc-border:#262B41;
  --sc-text:#ECEEF9; --sc-text2:#A4A8C6; --sc-text3:#6E7391;
  --sc-accent:#8B7CF9; --sc-accent-ink:#C7BEFF; --sc-good:#26C08A; --sc-crit:#F16173;
}
.sc-note{
  padding:.65rem .85rem; margin-bottom:.75rem; border-radius:10px;
  background:rgba(232,148,12,.12); border:1px solid rgba(232,148,12,.3); color:#8a5a06; font-size:.84rem;
}
body.dark-theme .sc-note{ color:#F1A73A; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width:768px){
  .sc-title{ font-size:1.25rem; }
  .sc-kpis{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
  /* Clear the 72px fixed .mobile-quick-footer so both stay tappable. */
  .sc-wrap{ padding-bottom:190px; }
  .sc-applybar{ inset-inline:.5rem; bottom:5.25rem; padding:.65rem .75rem; }
  .sc-applybar-actions{ margin-inline-start:0; width:100%; }
  .sc-applybar-actions .sc-btn{ flex:1; justify-content:center; }
  .sc-table{ font-size:.82rem; }
}