/* Inventory page — polished top section (2026-07-24)
   Gradient title in a glowing panel with a cube tile, circular icons + colour
   accents on the metric cards, and marked breakdown headings. Theme-driven
   (var(--accent) etc.), so it follows the user's appearance. */

/* Now the page is wider, bump the nav tab text a little. A .tabs .tab rule (with a
   deeper selector than the base .tab) was pinning it to the small button default. */
.tabs .tab{font-size:.95rem!important}
/* On mobile the .95rem above (a .tabs .tab rule) out-specified the base mobile override,
   leaving the tab labels too big + bold. Match that specificity inside the media query
   so it wins: smaller and lighter on phones. */
@media(max-width:620px){ .tabs .tab{ font-size:.72rem!important; font-weight:600!important; letter-spacing:0!important; } }

/* The metric cards (Inventory Items / Available Material / Low / Out) reveal a small
   details tooltip on hover, and inventory-final-polish.css set cursor:help on them —
   which shows a "?" pointer that reads as broken. They aren't a clickable action, so
   use the normal arrow. */
#inventorySignedIn .inventoryPageMetrics .inventoryMetric{cursor:default!important}

/* Pro Workspace bar — a permanently SLIM strip above the tabs. No hover/focus expand,
   no reveal strip, no lift-on-hover animation. Clicking toggles the dashboard; the
   chevron + "View Dashboard" / "Close Dashboard" label reflect the state (via .is-open,
   set in release-polish's syncExpanded). */
#workflowDashboardBar{min-height:56px!important;
  transition:box-shadow .3s ease!important}
#workflowDashboardBar,
#workflowDashboardBar:hover,#workflowDashboardBar:focus-visible,#workflowDashboardBar.is-open{min-height:56px!important;transform:none!important}
#workflowDashboardBar .workflowReveal{display:none!important}

/* ---------- header panel ---------- */
/* Title block on the left; the Total Inventory Value sits at the TOP-RIGHT beside
   the title (align-items:flex-start pins it up top). No decorative accent streak —
   it read as a line poking out of the panel. */
#inventorySignedIn.inventoryPage .inventoryPageHeader{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin:18px 0 16px; padding:22px 26px; border-radius:20px;   /* top margin so it clears the divider above */
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:
    radial-gradient(120% 200% at 100% -50%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 55%),
    linear-gradient(118deg, color-mix(in srgb,var(--accent) 13%,var(--panel)) 0%, var(--panel2) 62%);
  box-shadow:0 20px 46px -24px color-mix(in srgb,var(--accent) 65%,transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
#inventorySignedIn.inventoryPage .inventoryPageHeader > *{position:relative;z-index:1}
/* title block flexes/wraps; the value card keeps its size at the top-right */
#inventorySignedIn.inventoryPage .inventoryPageHeader > div:first-child{flex:1 1 320px;min-width:0}
#inventorySignedIn.inventoryPage .inventoryPageHeader .inventoryHeaderActions{flex:0 0 auto}
#inventorySignedIn.inventoryPage .inventoryPageHeader .inventoryEyebrow{color:var(--accent2)}
#inventorySignedIn.inventoryPage .inventoryPageHeader h2{
  margin:6px 0 8px; gap:16px!important; align-items:center;
  font-size:clamp(1.55rem,3vw,2.15rem); letter-spacing:-.01em;
}
#inventorySignedIn.inventoryPage .inventoryPageHeader h2 > span:last-child{
  font-weight:900;
  background:linear-gradient(92deg, var(--text) 0%, color-mix(in srgb,var(--accent2) 62%,var(--text)) 52%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#inventorySignedIn.inventoryPage .inventoryPageHeader p{color:var(--muted)}
.inventoryPageHeader .invHeaderIconTile{
  width:56px; height:56px; flex:0 0 56px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 82%,#000), var(--accent2));
  box-shadow:0 12px 28px -8px color-mix(in srgb,var(--accent) 80%,transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
.inventoryPageHeader .invHeaderIconTile svg{width:30px;height:30px}

/* ---------- metric cards: circular icon + colour accent ---------- */
#inventorySignedIn .inventoryPageMetrics .inventoryMetric{
  display:grid!important; grid-template-columns:auto 1fr; column-gap:14px; align-items:center;
  border-left:3px solid color-mix(in srgb,var(--accent) 70%,var(--line))!important;
}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric.warning{border-left-color:var(--warn)!important}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric.danger{border-left-color:var(--bad)!important}
/* The icon is a <span>, so it must beat the generic "> span" rule below — hence the
   full-specificity selector — or it lands in column 2 as an inline block and spills
   out of its circular frame. */
#inventorySignedIn .inventoryPageMetrics .inventoryMetric > span.invMetricIcon{
  grid-row:1 / 3; grid-column:1; align-self:center;
  width:46px; height:46px; border-radius:50%; display:grid!important; place-items:center;
  color:var(--accent2); background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric > span.invMetricIcon svg{width:23px;height:23px;display:block}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric.warning > span.invMetricIcon{color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric.danger > span.invMetricIcon{color:var(--bad); background:color-mix(in srgb,var(--bad) 16%,transparent); border-color:color-mix(in srgb,var(--bad) 34%,transparent)}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric > span:not(.invMetricIcon){grid-column:2; color:var(--muted)}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric > strong{grid-column:2; font-size:1.7rem; line-height:1.1}
.inventoryMetric.warning > strong{color:var(--warn)}
.inventoryMetric.danger > strong{color:var(--bad)}
#inventorySignedIn .inventoryMetric .inventoryMetricDetails,
#inventorySignedIn .inventoryMetric .inventoryMetricItems{grid-column:1 / 3}

/* ---------- breakdown: Colors and Material Types SIDE BY SIDE ---------- */
#inventorySignedIn .inventoryBreakdown{grid-template-columns:1fr 1fr!important; gap:16px; align-items:start}
#inventorySignedIn .inventoryBreakdown > section{width:100%;min-width:0}
@media(max-width:700px){ #inventorySignedIn .inventoryBreakdown{grid-template-columns:1fr!important} }
/* Show ALL colours/types (no cap) so nothing looks "missing"; "View All Materials"
   still opens the full inventory list. */
.inventoryBreakdownHeading{display:flex;align-items:center;gap:10px}
/* Colours card: much bigger, clearer colour indicators. */
#inventorySignedIn .inventoryColorChip{padding:7px 12px 7px 8px!important;gap:11px!important;border-radius:14px!important;align-items:center!important}
#inventorySignedIn .inventoryColorChip > i{width:26px!important;height:26px!important;flex:0 0 26px!important;border-radius:8px!important;
  background:var(--chip-color,#888)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),0 1px 4px rgba(0,0,0,.45)!important}
#inventorySignedIn .inventoryColorChip .inventoryColorCopy > span{font-weight:750}
#inventorySignedIn .inventoryColorChip .inventoryColorWeight{font-size:.7rem}
#inventorySignedIn .inventoryColorChip > strong{font-variant-numeric:tabular-nums}
.invBreakIcon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;color:var(--accent2);
  background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.invBreakIcon svg{width:19px;height:19px}

@media(max-width:620px){
  #inventorySignedIn.inventoryPage .inventoryPageHeader{padding:18px 16px}
  #inventorySignedIn .inventoryPageMetrics .inventoryMetric > strong{font-size:1.45rem}
}

/* The card accent top bar is inset from the corners globally (see index.html) so it can
   never poke past a rounded corner on an overflow:visible card — no per-card fix needed. */

/* ---------- Low / Out of Stock item chips: reveal only on hover/focus ----------
   The sample item chips (e.g. "3DimsFila · Sand") used to sit permanently under the
   metric number. Tuck them away like the metric description, so the card is clean until
   you hover it. :empty stays hidden (rule in the base sheet). */
#inventorySignedIn .inventoryPageMetrics .inventoryMetricItems{
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height .24s ease, opacity .18s ease, margin-top .24s ease;
}
#inventorySignedIn .inventoryPageMetrics .inventoryMetric:hover .inventoryMetricItems,
#inventorySignedIn .inventoryPageMetrics .inventoryMetric:focus-within .inventoryMetricItems{
  max-height:130px; opacity:1; margin-top:8px; overflow:auto;
}
@media(prefers-reduced-motion:reduce){
  #inventorySignedIn .inventoryPageMetrics .inventoryMetricItems{transition:none}
}