/* Profile catalog cards (2026-07-23)
   ---------------------------------------------------------------------------
   Two fixes:
   - No hover-to-expand animation. The cards used to lift, scale up and unfold an
     extra details panel on hover, which made the grid feel jumpy. They now sit
     still; a quiet border/shadow highlight is the only hover feedback.
   - Long names no longer collide with the stock badge. The badge keeps its size
     and the name truncates with an ellipsis beside it (the full name stays as the
     card's hover title). */

/* Static on hover: no translate, no scale, no growth. */
#profileList .materialCatalogCard{transition:border-color .2s ease, box-shadow .2s ease !important}
#profileList .materialCatalogCard:hover{transform:none !important}
/* Belt and braces: if a cached build still injects the expand panel, keep it
   collapsed so nothing unfolds on hover. */
.materialCatalogCard .materialCardExpandedDetails{display:none !important}

/* Name / badge row: badge holds its width, name ellipses instead of colliding. */
.materialCatalogCard .materialCardTop{align-items:flex-start}
.materialCatalogCard .materialCardIdentity{flex:1 1 auto; min-width:0}
.materialCatalogCard .materialCardIdentity h4{min-width:0}
.materialCatalogCard .materialCardName{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.materialCatalogCard .materialCardTop > .stockStatus{flex:0 0 auto; align-self:flex-start}

/* "Live from your inventory" — shown when a preset's stock comes from a matched
   inventory item rather than the profile itself. */
.materialStockNote{
  margin-top:7px; display:flex; align-items:center; gap:6px;
  font-size:.66rem; font-weight:750; letter-spacing:.02em;
  color:color-mix(in srgb, var(--good,#3fb95e) 70%, var(--text));
}
.materialStockNote::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:0 0 6px;
  background:var(--good,#3fb95e); box-shadow:0 0 7px var(--good,#3fb95e);
}

/* ---------- Recently-saved filament profiles (overview card) ----------
   3 compact cards between the metrics row and the Show All button. */
.recentFilamentProfiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0 4px; }
.recentFilamentProfiles[hidden]{ display:none; }
.recentProfileCard{ display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--card-color,var(--accent)) 32%,var(--line)); border-radius:13px;
  background:color-mix(in srgb,var(--card-color,var(--accent)) 7%,var(--surface-sub,var(--panel2))); color:var(--text);
  text-align:left; cursor:pointer; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.recentProfileCard:hover{ border-color:color-mix(in srgb,var(--card-color,var(--accent)) 60%,var(--line));
  box-shadow:0 8px 20px color-mix(in srgb,var(--card-color,var(--accent)) 16%,transparent); transform:translateY(-1px); }
.recentProfileCard .filDot.filSpoolIcon{ width:34px !important; height:32px !important; flex:0 0 34px !important; }
.recentProfileInfo{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.recentProfileInfo b{ font-size:.86rem; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recentProfileInfo small{ color:var(--muted); font-size:.68rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recentProfilePrice{ margin-left:auto; flex:0 0 auto; font-weight:800; font-size:.82rem; color:var(--accent2,var(--accent)); font-variant-numeric:tabular-nums; }
@media(max-width:760px){ .recentFilamentProfiles{ grid-template-columns:1fr; } }

/* ---------- Profiles workspace card icons ----------
   Filaments -> SMSpool artwork, Printer -> printer artwork. Each is a base image with a
   theme-accent colorable layer masked on top (same technique as the inventory spools),
   replacing the old outline glyphs. */
/* Bigger icon frames + artwork on both the switcher and the landing cards. */
.profileTypeCardMerged .profileTypeCardIcon{ width:94px !important; height:94px !important; flex:0 0 94px !important; border-radius:22px !important; }
.profileTypeCard:not(.profileTypeCardMerged) .profileTypeCardIcon{ width:112px !important; height:112px !important; flex:0 0 112px !important; border-radius:26px !important; }
.profileTypeCardIcon .profileGlyph{ position:relative; display:block; width:78px; height:78px; isolation:isolate; }
.profileTypeCard:not(.profileTypeCardMerged) .profileTypeCardIcon .profileGlyph{ width:94px; height:94px; }
.profileGlyph .pgBase, .profileGlyph .pgTint{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:contain; }
.profileGlyphSpool .pgBase{ background-image:url(images/spool-icon.png); }
.profileGlyphSpool .pgTint{ background-color:var(--accent2,var(--accent)); -webkit-mask:url(images/spool-icon-color.svg) center/contain no-repeat; mask:url(images/spool-icon-color.svg) center/contain no-repeat; }
.profileGlyphPrinter .pgBase{ background-image:url(images/printer.png); }
.profileGlyphPrinter .pgTint{ background-color:var(--accent2,var(--accent)); -webkit-mask:url(images/printercolor.svg) center/contain no-repeat; mask:url(images/printercolor.svg) center/contain no-repeat; }

/* List view: the row is a 4-track grid (identity / stock / meta / actions). The three
   info tracks had hard pixel minimums (180+160+210px) that, plus the actions, exceed a
   normal card width — so the grid overflowed and the Use/Edit/Delete actions crowded
   over the Location value ("Not assigned"). Let every flexible track shrink to fit and
   keep the meta values wrapping inside their own cell, so the actions never overlap. */
#profileList.profileCatalogListView .materialCatalogCard{
  grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr) auto !important;
  column-gap:14px !important;
}
/* Stack Price / Sealed spools / Location as full-width "label — value" rows (like the
   grid view) so the meta stays inside its track AND long values wrap at spaces, never
   mid-word. The earlier overflow-wrap:anywhere fix stopped the overlap but chopped
   "Location" into "Locati / on" — this keeps whole words. */
#profileList.profileCatalogListView .materialCardMeta{
  min-width:0 !important; display:flex !important; flex-direction:column; gap:3px; overflow:hidden;
}
#profileList.profileCatalogListView .materialMetaRow{
  min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
#profileList.profileCatalogListView .materialMetaRow > span{color:var(--muted); white-space:nowrap; flex:0 0 auto}
#profileList.profileCatalogListView .materialMetaRow > strong{
  min-width:0; text-align:right; word-break:normal; overflow-wrap:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#profileList.profileCatalogListView .materialCardActions{min-width:0}
#profileList.profileCatalogListView .materialCardActions .btn{min-width:0; padding-inline:12px; white-space:nowrap}