/* Filament spool graphic for the Materials by Colour + Materials by Type breakdown.
   ---------------------------------------------------------------------------
   A photoreal spool whose coil and label follow the filament colour: a shared base PNG
   (images/spool-base.png) with a colour-mask overlay (images/spool-color.svg) tinted
   with hard-light (vivid) + a light multiply (depth). The material type sits on the
   spool's slanted label. Both assets download once and cache, so every spool reuses them.

   Scoped to the breakdown container IDs (not an ancestor) so it works wherever the
   breakdown renders. Uses global theme tokens, never the taper-scoped --t* ones. */

.filSpool{
  position:relative; display:inline-block; flex:0 0 auto;
  aspect-ratio:839 / 733; isolation:isolate;   /* contain the blend to base+tint */
  container-type:inline-size;                   /* so the label text scales with the spool */
}
.filSpoolBase{ position:absolute; top:0; left:0; width:98.33%; height:100%; object-fit:contain; display:block; }
/* the base image content is 825/839 of the SVG's coordinate box — match that so the
   colour mask lines up exactly with the coil + label in the photo. */
.filSpoolTint{
  position:absolute; inset:0; background:var(--fil,#8a94a6); pointer-events:none;
  -webkit-mask:url(images/spool-color.svg) left center / 98.33% 100% no-repeat;
          mask:url(images/spool-color.svg) left center / 98.33% 100% no-repeat;
}
.filSpoolTint.hl{ mix-blend-mode:hard-light; }        /* vivid colour, keeps the 3D shading */
.filSpoolTint.mul{ mix-blend-mode:multiply; opacity:.42; }  /* deepens it so pale colours still read */
/* the label is printed on the spool's tag, which sits at an angle in the photo, so the
   text is slanted to sit flat on it */
.filSpoolLabel{
  position:absolute; left:55.5%; top:63%; width:38%; height:19%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:-.2px; line-height:1; overflow:hidden; white-space:nowrap;
  font-size:16cqw;
  transform:rotate(-6.5deg) skewX(4deg); transform-origin:center;
  color:var(--ink,#15181d); text-shadow:0 1px 1px rgba(0,0,0,.18); pointer-events:none;
}
.filSpoolLabel.filSpoolLabelLong{ font-size:12.5cqw; letter-spacing:-.4px; }
.filSpoolLabel.filSpoolLabelXLong{ font-size:11cqw; letter-spacing:-.5px; }

/* ---------- small spool ICON: the colour indicator in the inventory list + table ----------
   A front-facing spool (images/spool-icon.png) whose coil follows the filament colour via
   the same hard-light + multiply tint, masked by images/spool-icon-color.svg. Replaces the
   flat colour dot / swatch. Base + mask are 812×774 (1:1), so a plain centre/contain aligns
   them. */
.filSpoolIcon{
  position:relative; isolation:isolate; flex:0 0 auto;
  background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important;
  aspect-ratio:812 / 774; overflow:visible;
}
.filSpoolIconBase{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.filSpoolIconTint{
  position:absolute; inset:0; background:var(--fil,#8a94a6); pointer-events:none;
  -webkit-mask:url(images/spool-icon-color.svg) center / contain no-repeat;
          mask:url(images/spool-icon-color.svg) center / contain no-repeat;
}
.filSpoolIconTint.hl{ mix-blend-mode:hard-light; }
.filSpoolIconTint.mul{ mix-blend-mode:multiply; opacity:.42; }

/* The icon REPLACES the old swatch entirely — kill filament-swatch-realism's glossy
   pseudo-overlay, its box-shadow frame, overflow clip and forced 22×14 size (all
   !important), so no old indicator shows through and the spool can be its real size. */
.filSpoolIcon::before, .filSpoolIcon::after{ content:none !important; display:none !important; background:none !important; }
.filSpoolIcon{ overflow:visible !important; box-shadow:none !important; background:none !important; border-radius:0 !important; }

/* Profile catalog cards: the colour orb becomes the spool icon (old round dot frame gone). */
.materialCatalogCard .materialColorOrb.filSpoolIcon{ width:32px !important; height:30px !important; flex:0 0 32px !important; border:0 !important; }
.profileCatalogListView .materialColorOrb.filSpoolIcon{ width:30px !important; height:28px !important; flex:0 0 30px !important; }

/* Table View rows (#inventoryTableBody .filDot) + main-list cards (.invCardSwatch): a
   bigger icon with room to breathe so nothing looks crammed. */
#inventoryTableBody td i.filSpoolIcon{ width:46px !important; height:42px !important; margin:0 2px !important; vertical-align:middle !important; }
#inventoryTableBody .inventoryNameCell{ grid-template-columns:50px 1fr !important; gap:12px !important; align-items:center; }
.invCard .invId span.invCardSwatch.filSpoolIcon{ width:48px !important; height:42px !important; flex:0 0 48px !important; }
.invCard .invId{ gap:13px; }

/* Colour-PICKER previews + item colour circles as the spool icon (Add / Edit inventory,
   the item dialog, profile forms). Need the extra specificity to beat filament-swatch-
   realism's collapsed-preview sizing (.colorPick:not(.open) .unifiedColorPreview). */
.unifiedColorPreview.filSpoolIcon,
.colorPick:not(.open) .unifiedColorPreview.filSpoolIcon{ width:30px !important; height:28px !important; }
.bigColorPreview.filSpoolIcon{ width:46px !important; height:42px !important; }
.inventoryDialogColor.filSpoolIcon{ width:36px !important; height:33px !important; flex:0 0 36px !important; }
/* filament preset dropdown option + collapsed trigger: swap the flat sample for the spool icon */
.themedSelectSample.filSpoolIcon{ width:28px !important; height:26px !important; flex:0 0 28px !important; }
/* the collapsed trigger uses justify-content:space-between, which floats a short label to
   the middle; when a spool sample is present, let the label grow so it sits beside the icon */
.themedSelectButton.hasColorSample span{ flex:1 1 auto; text-align:left; }

/* ---------- shared: 3 chips per row in each section ---------- */
#inventoryColorBreakdown{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px; align-content:start; }
#inventoryTypeBreakdown{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; align-content:start; }
/* Only show a page-full: 18 colours (6 rows) and 6 types (2 rows); the rest live behind
   "View All". */
#inventoryColorBreakdown > .inventoryColorChip:nth-of-type(n+19){ display:none !important; }
#inventoryTypeBreakdown > .inventoryBreakdownChip.type:nth-of-type(n+7){ display:none !important; }

/* ---------- Colours card: the swatch <i> BECOMES the small SMSpool icon ---------- */
/* 3 chips per row is tight, so keep the icon compact and stop the "X kg left" line from
   wrapping onto 3 lines. */
#inventoryColorBreakdown .inventoryColorChip{ min-width:0; gap:7px !important; padding:6px 9px 6px 6px !important; }
/* NO frame around the colour icon — inventory-top-polish puts a white inset box-shadow +
   a flat --chip-color background + border-radius on `.inventoryColorChip > i` (specificity
   1,1,1); this rule (1,2,1) strips all of it so only the spool shows. */
#inventoryColorBreakdown .inventoryColorChip i.filSpoolIcon{
  width:34px !important; height:31px !important; flex:0 0 34px !important; margin:-2px 0;
  box-shadow:none !important; background:none !important; border-radius:0 !important; overflow:visible !important;
}
#inventoryColorBreakdown .inventoryColorChip .inventoryColorCopy{ min-width:0; }
#inventoryColorBreakdown .inventoryColorChip .inventoryColorCopy > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#inventoryColorBreakdown .inventoryColorChip .inventoryColorWeight{ white-space:nowrap; }

/* ---------- hover: total $ value of that colour / type in stock ---------- */
#inventoryColorBreakdown, #inventoryTypeBreakdown{ overflow:visible; }
.inventoryColorChip[data-fil-value], .inventoryBreakdownChip.type[data-fil-value]{ position:relative; }
.inventoryColorChip[data-fil-value]:hover, .inventoryBreakdownChip.type[data-fil-value]:hover{ z-index:25; }
.inventoryColorChip[data-fil-value]:hover::after,
.inventoryBreakdownChip.type[data-fil-value]:hover::after{
  content:attr(data-fil-value) " in stock";
  position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%);
  z-index:26; white-space:nowrap; padding:6px 11px; border-radius:9px;
  background:var(--panel,#12161e); color:var(--text); font-size:.74rem; font-weight:750;
  border:1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7); pointer-events:none;
}
.inventoryColorChip[data-fil-value]:hover::before,
.inventoryBreakdownChip.type[data-fil-value]:hover::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 2px); transform:translateX(-50%) rotate(45deg);
  z-index:26; width:9px; height:9px; background:var(--panel,#12161e);
  border-right:1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 44%, var(--line)); pointer-events:none;
}

/* ---------- Materials by Type card: a tile with a big, labelled spool (all one theme colour) ---------- */
#inventoryTypeBreakdown .inventoryBreakdownChip.type{
  display:flex !important; flex-direction:column; align-items:center; gap:2px;
  text-align:center; padding:12px 10px 13px !important; min-width:0;
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
  background:
    radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--panel2, var(--panel)) !important;
}
#inventoryTypeBreakdown .inventoryBreakdownChip.type .filSpool{ height:70px; }
#inventoryTypeBreakdown .inventoryBreakdownChip.type .filSpoolTypeName{   /* the type name caption */
  font-weight:800; font-size:.9rem; color:var(--text); letter-spacing:.2px;
}
#inventoryTypeBreakdown .inventoryBreakdownChip.type > strong{
  font-size:.7rem; font-weight:700; color:color-mix(in srgb, var(--accent) 82%, var(--text));
  text-transform:uppercase; letter-spacing:.06em;
}
#inventoryTypeBreakdown .inventoryBreakdownChip.type .filSpoolTypeMeta{
  font-size:.7rem; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums;
}
#inventoryTypeBreakdown .inventoryBreakdownChip.type .inventoryTypeColorPreview{ display:none; }

/* ---------- "most / least" insight line under each section ---------- */
.filSpoolInsight{
  display:flex; align-items:center; gap:8px; margin:12px 2px 2px; padding:9px 12px;
  border-radius:11px; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  font-size:.76rem; color:var(--muted); line-height:1.35;
}
.filSpoolInsight b{ color:var(--text); font-weight:750; }
.filSpoolInsightDot{
  flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference){
  #inventoryTypeBreakdown .inventoryBreakdownChip.type{ transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  #inventoryTypeBreakdown .inventoryBreakdownChip.type:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -16px color-mix(in srgb, var(--accent) 80%, transparent);
  }
}