/* ============================================================================
   Stock-Categories (/stock-categories) — premium restyle
   Brand palette: ORANGE / BLACK / WHITE (orange #ff6d00/#e65100, black #1a1a2e).
   Scoped ENTIRELY under .scx-root (added only on this route by index.html).
   Targets the page's inline-styled buttons via [style*=...] selectors.
   ============================================================================ */
.scx-root{
  --scx-card:#ffffff; --scx-ink:#1a1a2e; --scx-mut:#6b6b7b; --scx-line:#ececf0;
  --scx-orange:#ff6d00; --scx-orange2:#ff8c33; --scx-orange-deep:#e65100;
  --scx-black:#1a1a2e; --scx-black2:#2a2a42; --scx-orangebg:#fff3e9;
  --scx-danger:#c62828; --scx-dangerbg:#fdeaea;
  --scx-shadow:0 1px 2px rgba(26,26,46,.04), 0 12px 30px -12px rgba(26,26,46,.16);
  --scx-shadow-hover:0 2px 6px rgba(26,26,46,.06), 0 22px 48px -16px rgba(255,109,0,.30);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  padding:34px 40px 64px !important; max-width:1280px; margin:0 auto;
  background:radial-gradient(900px 420px at 88% -8%, rgba(255,109,0,.08), transparent 60%);
}
/* ---------- Header ---------- */
.scx-root .page-header{ margin-bottom:8px !important; }
.scx-root .page-header h1{
  font-size:30px !important; font-weight:800 !important; letter-spacing:-.02em; line-height:1.1;
  color:var(--scx-black) !important; -webkit-text-fill-color:initial; background:none;
}
.scx-root .page-header h1::after{
  content:""; display:block; width:54px; height:4px; margin-top:14px; border-radius:4px;
  background:linear-gradient(90deg,var(--scx-orange),var(--scx-orange2));
}
.scx-root > p{ color:var(--scx-mut) !important; font-size:14.5px !important; margin:14px 0 26px !important; max-width:680px; line-height:1.55; }
.scx-root > p b{ color:var(--scx-black); font-weight:700; }

/* ---------- Create card ---------- */
.scx-root > .card:first-of-type{
  display:flex !important; gap:14px !important; align-items:center;
  background:var(--scx-card) !important; border:1px solid var(--scx-line) !important;
  border-radius:18px !important; padding:18px 20px !important; box-shadow:var(--scx-shadow) !important;
  position:relative; overflow:hidden; margin-bottom:8px !important;
}
.scx-root > .card:first-of-type::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--scx-orange),var(--scx-orange-deep)); }
.scx-root .card .input, .scx-root .card input[type="text"], .scx-root .card input:not([type]){
  flex:1 !important; min-width:220px !important; background:#fbfbfc !important;
  border:1.5px solid var(--scx-line) !important; border-radius:12px !important; padding:13px 16px !important;
  font-size:15px !important; color:var(--scx-ink) !important; transition:.18s; outline:none !important;
}
.scx-root .card .input:focus, .scx-root .card input:focus{ border-color:var(--scx-orange) !important; box-shadow:0 0 0 4px rgba(255,109,0,.14) !important; background:#fff !important; }

/* ---------- All cards ---------- */
.scx-root .card{
  background:var(--scx-card) !important; border:1px solid var(--scx-line) !important;
  border-radius:20px !important; padding:22px 24px !important; margin-bottom:18px !important;
  box-shadow:var(--scx-shadow) !important; transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.scx-root .card:not(:first-of-type):hover{ transform:translateY(-3px); box-shadow:var(--scx-shadow-hover) !important; }
.scx-root .card > div:first-child{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px; margin-bottom:4px; }
.scx-root .card > div:first-child > div:first-child{ font-size:18px !important; font-weight:750 !important; color:var(--scx-black) !important; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }

/* status line: Assigné à / Non assignée */
.scx-root .card > div:nth-child(2){
  font-size:12.5px !important; font-weight:600 !important; letter-spacing:.02em; text-transform:uppercase;
  color:var(--scx-mut) !important; margin:6px 0 16px !important; display:inline-flex; align-items:center; gap:7px;
}
.scx-root .card > div:nth-child(2)::before{ content:""; width:8px; height:8px; border-radius:50%; background:#c7c7d0; }
.scx-root .card:has(button[style*="rgb(17, 17, 17)"]) > div:nth-child(2)::before{ background:var(--scx-orange); box-shadow:0 0 0 4px var(--scx-orangebg); }

/* employee toggle grid */
.scx-root .card > div:last-child{ display:flex !important; flex-wrap:wrap !important; gap:9px !important; }

/* unassigned pills (white) */
.scx-root .card button[style*="rgb(255, 255, 255)"]{
  padding:9px 15px !important; border-radius:11px !important; border:1.5px solid var(--scx-line) !important;
  background:#fbfbfc !important; color:#33333f !important; font-size:13.5px !important; font-weight:600 !important;
  transition:.16s cubic-bezier(.2,.7,.2,1); cursor:pointer;
}
.scx-root .card button[style*="rgb(255, 255, 255)"]:hover{
  border-color:var(--scx-orange) !important; color:var(--scx-orange-deep) !important; background:#fff !important;
  transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(255,109,0,.45) !important;
}
/* assigned pills -> BLACK (brand sidebar color), orange shadow on hover */
.scx-root .card button[style*="rgb(17, 17, 17)"]:not([style*="6px 10px"]){
  padding:9px 16px !important; border-radius:11px !important; border:0 !important;
  background:linear-gradient(135deg,var(--scx-black),var(--scx-black2)) !important; color:#fff !important;
  font-size:13.5px !important; font-weight:700 !important; cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(26,26,46,.55) !important; transition:.16s;
}
.scx-root .card button[style*="rgb(17, 17, 17)"]:not([style*="6px 10px"]):hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 22px -8px rgba(255,109,0,.5) !important; }

/* "+ Créer" -> orange gradient */
.scx-root > .card:first-of-type button[style*="rgb(17, 17, 17)"]{
  padding:13px 22px !important; border-radius:12px !important; border:0 !important;
  background:linear-gradient(135deg,var(--scx-orange),var(--scx-orange-deep)) !important; color:#fff !important;
  font-weight:700 !important; font-size:14.5px !important; cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 22px -8px rgba(255,109,0,.6) !important; transition:.16s;
}
.scx-root > .card:first-of-type button[style*="rgb(17, 17, 17)"]:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(255,109,0,.7) !important; }

/* Supprimer (kept subtle red — destructive action affordance) */
.scx-root .card button[style*="rgb(251, 233, 233)"]{
  padding:8px 15px !important; border-radius:10px !important; border:1px solid #f3d0d0 !important;
  background:var(--scx-dangerbg) !important; color:var(--scx-danger) !important; font-size:13px !important; font-weight:650 !important; cursor:pointer; transition:.16s;
}
.scx-root .card button[style*="rgb(251, 233, 233)"]:hover{ background:var(--scx-danger) !important; color:#fff !important; border-color:var(--scx-danger) !important; }

/* responsive */
@media (max-width:640px){
  .scx-root{ padding:22px 16px 48px !important; }
  .scx-root .page-header h1{ font-size:24px !important; }
  .scx-root > .card:first-of-type{ flex-wrap:wrap; }
}