/* Realistic filament swatches (2026-07-23)
   ---------------------------------------------------------------------------
   Makes each colour sample read like a real spool of filament instead of a flat
   chip: a glossy diagonal sheen + moulded depth over the base colour, and a
   material texture for the Textured group (wood grain, stone speckle, bone
   mottle). Pure CSS — no images, no storage, and it themes/scales on its own.

   Deliberately does NOT set `background`: the base colour still comes from
   --swatch (or the dialog's inline colour, or the dual-colour split), so those
   all keep working. Everything here is overlay + shadow on top. */

.unifiedSwatches .swatch,
.colorSwatches .swatch{
  position:relative;
  overflow:hidden;
  /* Moulded depth: a lit top edge, a shadowed bottom, a hairline rim. */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.38),
    inset 0 -3px 6px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(0,0,0,.16),
    0 4px 10px rgba(0,0,0,.22);
}

/* Sheen: the bright diagonal streak of a glossy filament surface. Sits on top. */
.unifiedSwatches .swatch::before,
.colorSwatches .swatch::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:2;
  background:linear-gradient(135deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.16) 20%,
    rgba(255,255,255,0)   40%,
    rgba(0,0,0,.08)       64%,
    rgba(0,0,0,.30)       100%);
}

/* Material texture layer, between the base colour and the sheen. */
.swatch[data-texture]::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:1;
}

/* Wood: fine directional grain with occasional lighter streaks. */
.swatch[data-texture="wood"]::after{
  background:
    repeating-linear-gradient(87deg,
      rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 3px,
      rgba(0,0,0,.10) 3px 4px, rgba(0,0,0,0) 4px 7px,
      rgba(255,255,255,.12) 7px 8px, rgba(0,0,0,0) 8px 12px);
  mix-blend-mode:soft-light;
  opacity:.95;
}

/* Stone: mineral speckle — light and dark grains scattered across the face. */
.swatch[data-texture="stone"]::after{
  background:
    radial-gradient(circle at 17% 26%, rgba(255,255,255,.6) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 61% 39%, rgba(0,0,0,.5)  0 .9px, transparent 1.9px),
    radial-gradient(circle at 83% 20%, rgba(255,255,255,.45) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 39% 72%, rgba(0,0,0,.45) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 73% 77%, rgba(255,255,255,.4) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 29% 52%, rgba(0,0,0,.35) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 50% 12%, rgba(0,0,0,.3)  0 .6px, transparent 1.4px);
  opacity:.9;
}

/* Bone / fossil: soft mottled patches rather than hard speckle. */
.swatch[data-texture="bone"]::after{
  background:
    radial-gradient(circle at 30% 30%, rgba(0,0,0,.18) 0 3px, transparent 8px),
    radial-gradient(circle at 70% 66%, rgba(0,0,0,.14) 0 4px, transparent 9px),
    radial-gradient(circle at 54% 20%, rgba(255,255,255,.28) 0 3px, transparent 7px);
  mix-blend-mode:multiply;
  opacity:.7;
}

/* A touch more lift on hover, so the sample feels physical. */
.unifiedSwatches .swatch:hover,
.colorSwatches .swatch:hover{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(0,0,0,.18),
    0 7px 16px rgba(0,0,0,.30);
}

@media (prefers-reduced-motion:reduce){
  .unifiedSwatches .swatch,
  .colorSwatches .swatch{transition:none}
}

/* ---------- Colour INDICATOR dots, site-wide ---------- */
/* The little coloured circles everywhere (filament rows, profile & project cards,
   the runway, inventory chips, the picker's selected preview, etc.) get the same
   glossy filament look. The sheen is a pseudo-element overlay, so each dot keeps
   its OWN background — a solid colour OR a dual-colour split. */
.filDot, .filDotDual,
.materialColorOrb,
.recentProjectSwatch,
.frDot,
.inventoryStockDot,
.invCardSwatch,
.inventoryColorChip > i,
.unifiedColorPreview, .bigColorPreview,
.inventoryDialogColor{
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.26);
}
.filDot::before, .filDotDual::before,
.materialColorOrb::before,
.recentProjectSwatch::before,
.frDot::before,
.inventoryStockDot::before,
.invCardSwatch::before,
.inventoryColorChip > i::before,
.unifiedColorPreview::before, .bigColorPreview::before,
.inventoryDialogColor::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    radial-gradient(125% 120% at 30% 22%, rgba(255,255,255,.62), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 48%),
    linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.14) 74%, rgba(0,0,0,.30) 100%);
}

/* ---------- Indicators are ROUNDED-RECTANGLE samples, not dots ---------- */
/* Same shape as the picker swatches, sized to each slot. Wider-than-tall with a
   soft corner reads as a little filament chip. */
.filDot, .filDotDual{ width:22px !important; height:14px !important; border-radius:4px !important; vertical-align:-2px; }
.frDot{ width:22px !important; height:14px !important; border-radius:4px !important; }
.materialColorOrb{ width:26px !important; height:17px !important; border-radius:5px !important; }
.inventoryStockDot{ width:18px !important; height:12px !important; flex:0 0 18px !important; border-radius:3px !important; }
.inventoryColorChip > i{ width:22px !important; height:14px !important; border-radius:4px !important; }
.invCardSwatch{ width:30px !important; height:20px !important; flex:0 0 30px !important; border-radius:6px !important; }
.inventoryDialogColor{ width:26px !important; height:18px !important; flex:0 0 26px !important; border-radius:6px !important; }
.colorPick:not(.open) .unifiedColorPreview{ width:26px !important; height:17px !important; border-radius:5px !important; }
.unifiedColorPreview{ border-radius:6px !important; }
.bigColorPreview{ width:46px !important; height:30px !important; border-radius:8px !important; }

/* The name-cell dot column in the inventory table needs room for the wider chip. */
.inventoryNameCell{ grid-template-columns:24px 1fr !important; }
.inventoryNameCell .filDot{ width:22px !important; height:14px !important; border-radius:4px !important; }

/* Material texture on indicators, tagged by JS (data-texture). Sits below the
   sheen (z-index:1 < the ::before's 2) and above the base colour. */
.filDot[data-texture]::after, .filDotDual[data-texture]::after,
.materialColorOrb[data-texture]::after, .frDot[data-texture]::after,
.inventoryStockDot[data-texture]::after, .inventoryColorChip > i[data-texture]::after,
.invCardSwatch[data-texture]::after, .unifiedColorPreview[data-texture]::after,
.bigColorPreview[data-texture]::after, .inventoryDialogColor[data-texture]::after,
.themedSelectSample[data-texture]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
}
.themedSelectSample[data-texture="wood"]::after, .filDot[data-texture="wood"]::after, .frDot[data-texture="wood"]::after, .materialColorOrb[data-texture="wood"]::after, .inventoryStockDot[data-texture="wood"]::after, .inventoryColorChip > i[data-texture="wood"]::after, .invCardSwatch[data-texture="wood"]::after, .unifiedColorPreview[data-texture="wood"]::after, .bigColorPreview[data-texture="wood"]::after, .inventoryDialogColor[data-texture="wood"]::after{
  background:
    repeating-linear-gradient(87deg, rgba(0,0,0,.40) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(255,255,255,.26) 3px 4px, rgba(0,0,0,0) 4px 6.5px),
    repeating-linear-gradient(87deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 9px);
  mix-blend-mode:soft-light; opacity:1;
}
.filDot[data-texture="stone"]::after, .frDot[data-texture="stone"]::after, .materialColorOrb[data-texture="stone"]::after, .inventoryStockDot[data-texture="stone"]::after, .inventoryColorChip > i[data-texture="stone"]::after, .invCardSwatch[data-texture="stone"]::after, .unifiedColorPreview[data-texture="stone"]::after, .bigColorPreview[data-texture="stone"]::after, .inventoryDialogColor[data-texture="stone"]::after, .themedSelectSample[data-texture="stone"]::after{
  background:
    radial-gradient(circle at 20% 28%, rgba(255,255,255,.85) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 62% 50%, rgba(0,0,0,.72) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 82% 24%, rgba(255,255,255,.7) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, rgba(0,0,0,.62) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 33% 52%, rgba(255,255,255,.6) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 73% 78%, rgba(0,0,0,.55) 0 .7px, transparent 1.6px);
  mix-blend-mode:soft-light;
}
.filDot[data-texture="bone"]::after, .frDot[data-texture="bone"]::after, .materialColorOrb[data-texture="bone"]::after, .inventoryStockDot[data-texture="bone"]::after, .inventoryColorChip > i[data-texture="bone"]::after, .invCardSwatch[data-texture="bone"]::after, .unifiedColorPreview[data-texture="bone"]::after, .bigColorPreview[data-texture="bone"]::after, .inventoryDialogColor[data-texture="bone"]::after, .themedSelectSample[data-texture="bone"]::after{
  background:
    radial-gradient(circle at 32% 34%, rgba(0,0,0,.26) 0 2px, transparent 5.5px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.42) 0 2px, transparent 5.5px),
    radial-gradient(circle at 52% 22%, rgba(0,0,0,.18) 0 1.6px, transparent 4.5px);
  mix-blend-mode:soft-light;
}

/* ---------- Colour sample next to each name in the preset dropdown ---------- */
.themedSelectOption.hasColorSample{ display:flex; align-items:center; gap:9px; }
.themedSelectSample{
  position:relative; overflow:hidden; flex:0 0 26px;
  width:26px; height:17px; border-radius:5px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.22);
}
.themedSelectSample::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    radial-gradient(125% 120% at 30% 22%, rgba(255,255,255,.62), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 48%),
    linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.14) 74%, rgba(0,0,0,.30) 100%);
}