/* Inventory page upgrade (2026-07-23)
   ---------------------------------------------------------------------------
   - Total Inventory Value in the page header, counting up with a glare sweep
     when the page opens (mirrors the Etsy dock orders reveal).
   - The "+ Add Inventory Item" button sits above the search section, next to a
     "View Entire Inventory" launcher for the full catalog.
   - Low / Out of Stock cards carry a compact brand + colour list.
   - The inline table is removed from the page itself (the full catalog opens in
     the expanded view). The table markup stays in the DOM -- hidden ONLY on the
     main page -- because the expanded view clones it. The hide is scoped to
     .inventoryPage so the cloned copy inside the expanded window stays visible. */

/* ---------- Total Inventory Value (header) ---------- */
.inventoryHeaderActions{display:flex;align-items:flex-start;justify-content:flex-end}
.inventoryValueDisplay{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  padding:12px 18px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--accent) 14%,var(--surface-raised,var(--panel))),
    var(--surface-raised,var(--panel2,var(--panel))));
  box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
  min-width:210px;
}
.inventoryValueLabel{
  color:var(--accent2,var(--accent));font-size:.6rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}
.inventoryValueAmount{
  font-size:1.9rem;line-height:1.02;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--text),color-mix(in srgb,var(--accent2,var(--accent)) 70%,var(--text)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 20px color-mix(in srgb,var(--accent) 20%,transparent);
}
.inventoryValueSub{color:var(--muted);font-size:.72rem;font-weight:600}
/* Diagonal glare that sweeps across once while the number counts up. */
.inventoryValueDisplay::after{
  content:'';position:absolute;inset:-60% -40%;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 40%,
    color-mix(in srgb,#fff 26%,transparent) 48%,
    color-mix(in srgb,var(--accent2,var(--accent)) 22%,transparent) 51%,
    transparent 60%);
  transform:translateX(-70%) rotate(3deg);
}
.inventoryValueDisplay.counting::after{animation:inventoryValueGlare 1s cubic-bezier(.4,0,.2,1) 1}
@keyframes inventoryValueGlare{
  0%{transform:translateX(-72%) rotate(3deg);opacity:0}
  18%{opacity:.85}
  100%{transform:translateX(72%) rotate(3deg);opacity:0}
}
.inventoryValueDisplay.counting .inventoryValueAmount{text-shadow:0 2px 28px color-mix(in srgb,var(--accent2,var(--accent)) 45%,transparent)}
@media(prefers-reduced-motion:reduce){
  .inventoryValueDisplay.counting::after{animation:none}
}

/* Completed-print deduction: a "−$X.XX" pill that floats above the value while it rolls down.
   :has lets it escape the box's overflow:hidden only while the badge is present. */
.inventoryValueDisplay:has(.inventoryValueDeductBadge){overflow:visible}
.inventoryValueDeductBadge{
  position:absolute;top:-11px;right:14px;z-index:3;pointer-events:none;
  padding:3px 9px;border-radius:999px;
  font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;
  background:linear-gradient(135deg,#c23f26,var(--bad,#f0603f));
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--bad,#f0603f) 60%,transparent);
  animation:inventoryValueDeduct 3.2s ease forwards;
}
@keyframes inventoryValueDeduct{
  0%{opacity:0;transform:translateY(6px) scale(.9)}
  9%{opacity:1;transform:translateY(0) scale(1)}
  78%{opacity:1;transform:translateY(-2px)}
  100%{opacity:0;transform:translateY(-13px)}
}
/* Stock ADDED (e.g. a scale weigh-in) rolls the value UP with a green "+$X" pill. */
.inventoryValueDeductBadge.add{
  background:linear-gradient(135deg,#1f8f4e,var(--good,#3fb950));
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--good,#3fb950) 60%,transparent);
}
@media(prefers-reduced-motion:reduce){
  .inventoryValueDeductBadge{animation:none;opacity:1}
}

/* "Available Material" total roll: a "+X g" / "−X g" pill on its metric card while
   #inventoryPageTotal rolls up (add) or down (subtract). The card is overflow:hidden
   (!important), so the pill sits INSIDE the top-right corner — same spot as the deduction
   badge — rather than floating above, where it would be clipped. */
.invStockDeltaBadge{
  position:absolute;top:7px;right:9px;z-index:9;pointer-events:none;
  padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;
  background:linear-gradient(135deg,#c23f26,var(--bad,#f0603f));
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--bad,#f0603f) 60%,transparent);
  animation:inventoryValueDeduct 3.2s ease forwards;
}
.invStockDeltaBadge.add{
  background:linear-gradient(135deg,#1f8f4e,var(--good,#3fb950));
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--good,#3fb950) 60%,transparent);
}
@media(prefers-reduced-motion:reduce){
  .invStockDeltaBadge{animation:none;opacity:1}
}

/* ---------- Action bar: Add + View Entire Inventory ---------- */
.inventoryActionBar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 4px;
}
.inventoryActionBar .btn{min-height:44px}
.inventoryViewAllBtn{display:inline-flex;align-items:center;gap:9px}
.inventoryViewAllBtn .inventoryViewAllIcon{display:inline-grid;place-items:center;width:18px;height:18px}
.inventoryViewAllBtn .inventoryViewAllIcon svg{width:16px;height:16px;fill:currentColor}

/* ---------- Low / Out of Stock item chips ---------- */
.inventoryMetricItems{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;
}
.inventoryMetricItems:empty{display:none}
.inventoryStockChip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:3px 8px 3px 6px;border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 30%,var(--line));
  background:color-mix(in srgb,currentColor 8%,transparent);
  font-size:.68rem;font-weight:600;line-height:1.25;
}
.inventoryMetric.warning .inventoryStockChip{color:var(--warn,#d97706)}
.inventoryMetric.danger .inventoryStockChip{color:var(--bad,#dc2626)}
.inventoryStockChip .inventoryStockDot{
  width:11px;height:11px;flex:0 0 11px;border-radius:50%;
  background:var(--chip-color,#94a3b8);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 1px rgba(15,23,42,.16);
}
.inventoryStockChip .inventoryStockName{
  color:var(--text);font-weight:700;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.inventoryStockChip .inventoryStockColor{color:var(--muted);font-weight:600}
/* clickable low/out chips: reorder or reveal the row */
.inventoryStockChip[data-inv-id]{cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s ease}
.inventoryStockChip[data-inv-id]:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 16%,transparent);transform:translateY(-1px)}
.inventoryStockChip[data-inv-id]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inventoryStockChip.inventoryStockMore{
  color:var(--muted);border-style:dashed;background:transparent;font-weight:700;
}

/* ---------- Layout: Add button on the right, inline form, in-page full view ---------- */
/* "+ Add Inventory Item" sits on the RIGHT, above the search. */
.inventoryActionBar{display:flex;justify-content:flex-end;gap:10px;margin:4px 0 10px}
.inventoryActionBar .btn{min-height:44px}

/* The catalog wraps the search + table so the whole thing can go full-screen. */
.inventoryCatalog{display:block}

/* The add form is inline, directly below the search — never a popup. */
.inventoryAddForm{
  margin:2px 0 14px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:14px;background:var(--surface-raised,var(--panel));
  padding:16px;box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.inventoryAddForm.hidden{display:none}

/* Catalog head: title + Export / View All, wrapping cleanly. */
.inventoryCatalogButtons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- View Entire Inventory: a wide IN-PAGE card list ---------- */
/* z-index 860 keeps it BELOW the corner docks (Complete Print 900, Support 905,
   action dock 906, integration dock) so those stay visible and clickable; the
   bottom padding also keeps cards clear of them. It is its own element, so opening
   it never reflows the page (that reflow is what made the old table flicker). */
.inventoryFullView{
  position:fixed; inset:0; z-index:860;
  display:flex; flex-direction:column; gap:14px;
  padding:22px clamp(16px,4vw,48px) 96px;
  background:var(--bg,#0d1117);
  overflow:hidden;
  animation:invFullIn .18s ease both;
}
.inventoryFullView.hidden{display:none}
@keyframes invFullIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.inventoryFullView{animation:none}}

.inventoryFullHead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; flex:0 0 auto}
.inventoryFullEyebrow{color:var(--accent2,var(--accent)); font-size:.62rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase}
.inventoryFullHead h2{margin:2px 0 0; font-size:1.3rem; display:flex; align-items:baseline; gap:10px}
.inventoryFullCount{color:var(--muted); font-size:.85rem; font-weight:600}
.inventoryFullControls{display:flex; align-items:center; gap:10px; flex:1 1 320px; max-width:600px; justify-content:flex-end}
.inventoryFullSearch{flex:1 1 auto; min-width:180px; padding:11px 14px; border:1px solid var(--edge-strong,var(--line)); border-radius:12px; background:var(--surface-input,var(--panel)); color:var(--text); font:500 .9rem var(--app-font,system-ui)}
.inventoryFullSearch:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.inventoryFullClose{flex:0 0 auto}

.inventoryFullList{flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px}
.invCardEmpty{padding:44px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:16px}

.invCard{
  display:grid; grid-template-columns:auto minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:18px; align-items:center;
  padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--c,var(--accent)); border-radius:16px;
  background:linear-gradient(155deg,var(--surface-raised,var(--panel)),color-mix(in srgb,var(--panel) 94%,var(--accent) 6%));
}
.invCard.low{border-left-color:var(--warn)}
.invCard.out{border-left-color:var(--bad)}
.invCardSwatch{width:22px; height:22px; flex:0 0 22px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.28)}
.invCardMain{min-width:0}
.invCardName{display:flex; align-items:center; gap:9px; min-width:0}
.invCardName strong{font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.invCardName .stockStatus{flex:0 0 auto}
.invCardSub{margin-top:3px; color:var(--muted); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.invCardStock{min-width:0}
.invCardStockTop{display:flex; justify-content:space-between; gap:8px; font-size:.76rem; color:var(--muted)}
.invCardStockTop strong{color:var(--text)}
.invCardBar{height:7px; margin-top:6px; border:1px solid var(--line); border-radius:999px; background:var(--surface-input,var(--panel)); overflow:hidden}
.invCardBar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.invCard.low .invCardBar i{background:var(--warn)}
.invCard.out .invCardBar i{background:var(--bad)}
.invCardFacts{display:flex; flex-direction:column; gap:3px; font-size:.74rem; color:var(--muted); min-width:0}
.invCardFacts b{color:var(--text); font-weight:700}
.invCardActions{display:flex; gap:8px}
.invCardActions .btn{padding:8px 12px; font-size:.76rem; min-height:0}

@media (max-width:860px){
  .inventoryFullView{padding:16px 14px 96px}
  .invCard{grid-template-columns:auto minmax(0,1fr); gap:9px 14px}
  .invCardStock,.invCardFacts,.invCardActions{grid-column:2}
  .invCardActions{justify-content:flex-start; margin-top:4px}
}

/* ---------- "Create filament profile" tick in the edit dialog ---------- */
.inventoryDialogProfileField{grid-column:1/-1}
.inventoryDialogProfileToggle{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:12px 14px;border-radius:12px;
  border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
/* Beat the edit form's `input{width:100%!important}` for this one checkbox. */
.inventoryDialogEditForm input[type="checkbox"].inventoryDialogProfileCheck,
.inventoryDialogProfileToggle input[type="checkbox"]{
  width:18px!important;height:18px!important;min-height:0!important;flex:0 0 18px!important;
  margin:2px 0 0!important;padding:0!important;accent-color:var(--accent);cursor:pointer;
}
.inventoryDialogProfileToggle strong{display:block;font-size:.86rem;color:var(--text)}
.inventoryDialogProfileToggle small{display:block;margin-top:3px;color:var(--muted);font-size:.72rem;font-weight:500;line-height:1.35}

@media(max-width:620px){
  .inventoryHeaderActions{width:100%;justify-content:stretch}
  .inventoryValueDisplay{width:100%;align-items:flex-start;min-width:0}
  .inventoryValueDisplay{align-items:flex-start}
  .inventoryActionBar .btn{flex:1 1 auto}
}