/* ============================================================================
   GIXO APP DESIGN SYSTEM  —  .gxds
   ----------------------------------------------------------------------------
   An opt-in layer that gives app surfaces the same craft the marketing pages
   already have: the brand's Manrope display type, a real scale with tracking,
   deliberate rhythm, and polished surface/chip/tile components.

   • Opt in by adding class="gxds" to a page's top-level container.
   • Everything is scoped under .gxds, so pages that don't opt in are untouched.
   • Built entirely on the existing --gixo-* tokens, so it flips light/dark with
     the rest of the app — no new theme code.
   Pilot surface: the Dashboard (/dashboard).
   ============================================================================ */

.gxds{
  --gxds-display:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Re-point MudBlazor's per-level heading family vars → Manrope (inherited,
     so it wins by the cascade, not by !important). */
  --mud-typography-h1-family:var(--gxds-display);
  --mud-typography-h2-family:var(--gxds-display);
  --mud-typography-h3-family:var(--gxds-display);
  --mud-typography-h4-family:var(--gxds-display);
  --mud-typography-h5-family:var(--gxds-display);
  --mud-typography-h6-family:var(--gxds-display);
  --mud-typography-subtitle1-family:var(--gxds-display);
}

/* ---- Typography: the brand display face + real tracking + hierarchy ----
   The :not(.product-headline) lifts these above product-themes.css's
   `.product-scope h1` (0,1,1), which loads after this file and would otherwise
   win the tie and force the Inter-first stack. It also, by design, leaves the
   brand `.product-headline` utility on its own display face. No new !important. */
.gxds :is(h1,h2,h3,h4,h5,h6):not(.product-headline),
.gxds :is(.mud-typography-h1,.mud-typography-h2,.mud-typography-h3,
          .mud-typography-h4,.mud-typography-h5,.mud-typography-h6){
  font-family:var(--gxds-display);
  letter-spacing:-.022em;
  line-height:1.12;
  text-wrap:balance;
}
.gxds :is(.mud-typography-h1,.mud-typography-h2,.mud-typography-h3,.mud-typography-h4){
  font-weight:800;letter-spacing:-.03em;line-height:1.06;
}
.gxds :is(.mud-typography-h5,.mud-typography-h6){font-weight:700;letter-spacing:-.014em;}

/* ---- Hero: the "designed moment" a dashboard header should have ---- */
.gxds-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;margin:0 0 1.75rem;
}
.gxds-hero__eyebrow{
  font-family:var(--gxds-display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gixo-primary);margin:0 0 .55rem;
}
/* Double .gxds scope → (0,2,0), decisively above `.product-scope h1` (0,1,1). */
.gxds .gxds-hero__title{
  font-family:var(--gxds-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.04;color:var(--gixo-text-primary);
  margin:0;text-wrap:balance;
}
.gxds-hero__lede{
  color:var(--gixo-text-secondary);font-size:1.02rem;line-height:1.55;margin:.5rem 0 0;max-width:56ch;
}

/* ---- Eyebrow / section label ---- */
.gxds-eyebrow{
  font-family:var(--gxds-display);font-weight:700;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gixo-text-muted);margin:0 0 .95rem;display:block;
}

/* ---- Status pills: encode state in colour + shape, separate from the accent ---- */
.gxds-pill{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.66rem;
  letter-spacing:.03em;padding:.28rem .62rem;border-radius:999px;white-space:nowrap;line-height:1;
}
.gxds-pill::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;opacity:.9;}
.gxds-pill--draft {color:var(--gixo-text-muted);background:var(--gixo-surface-light);border:1px solid var(--gixo-border);}
.gxds-pill--review{color:var(--gixo-warning);background:color-mix(in srgb,var(--gixo-warning) 13%,transparent);}
.gxds-pill--ready {color:var(--gixo-success);background:color-mix(in srgb,var(--gixo-success) 13%,transparent);}
.gxds-pill--live  {color:var(--gixo-primary);background:color-mix(in srgb,var(--gixo-primary) 13%,transparent);}

/* ---- Elevated panel + tile: consistent radius, real shadow, hover lift ---- */
.gxds-panel{
  background:var(--gixo-card);border:1px solid var(--gixo-border);border-radius:16px;
  box-shadow:var(--gixo-shadow-sm);
}
.gxds-tile{
  position:relative;background:var(--gixo-card);border:1px solid var(--gixo-border);
  border-radius:16px;box-shadow:var(--gixo-shadow-sm);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gxds-tile:hover{transform:translateY(-3px);box-shadow:var(--gixo-shadow-md);border-color:var(--gixo-border-hover);}
.gxds-tile__rail{position:absolute;inset:0 0 auto 0;height:3px;background:var(--gxds-accent,var(--gixo-primary));}

/* ---- A branded card header (icon chip + title), used on the trial/CTA card ---- */
.gxds-cardhead{display:flex;align-items:center;gap:.85rem;}
.gxds-cardhead__ico{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gixo-primary) 14%,transparent);color:var(--gixo-primary);
}
.gxds-cardhead__ico .mud-icon-root{font-size:1.35rem;}

/* ============================================================================
   DASHBOARD SURFACE  —  brings the whole /dashboard up to the hero's craft.
   Every rule is scoped under .gxds and enhances the EXISTING structure
   (hero, sticky create button, "Your work" toolbar, ContentGrid list/grid,
   quickstart) — no markup surgery, flips light/dark via --gixo-* tokens.
   ============================================================================ */

/* --- Integrate the sticky create "+" into the hero row, killing the dead band
       it used to float in. It stays sticky; it just starts life at the hero's
       right edge instead of in an empty strip below it. --- */
.gxds .gxds-hero{margin:1.9rem 1.5rem .35rem;}
.gxds .plus-actions-container{
  margin-top:-4.35rem;          /* lift level with the hero title */
  margin-bottom:1.15rem;
  justify-content:flex-end;
  padding:0 1.5rem 0 0;
  background:transparent;       /* was a filled sticky band */
}
.gxds .plus-actions-container .plus-action-btn{box-shadow:var(--gixo-shadow-md);}

/* --- "Your work" toolbar → a real elevated panel --- */
.gxds .dashboard-grid-toolbar{
  border:1px solid var(--gixo-border);
  border-radius:18px;
  box-shadow:var(--gixo-shadow-sm);
}
.gxds .dashboard-toolbar-top > .mud-typography{   /* the "Your work" heading */
  font-family:var(--gxds-display);font-weight:800;letter-spacing:-.02em;font-size:1.2rem;
}

/* --- Work list rows → tactile cards with a hover lift (accent rail kept) --- */
.gxds .list-row{
  border:1px solid var(--gixo-border);
  border-radius:14px;
  box-shadow:var(--gixo-shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gxds .list-row:hover{
  transform:translateY(-2px);
  box-shadow:var(--gixo-shadow-md);
  border-color:var(--gixo-border-hover);
}
.gxds .list-row-title{font-family:var(--gxds-display);font-weight:700;letter-spacing:-.01em;}

/* --- Grid preview cards → same radius + lift language --- */
.gxds .gixo-preview-card{
  border-radius:16px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gxds .gixo-preview-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gixo-shadow-md);
  border-color:var(--gixo-border-hover);
}

/* --- Status badges → one consistent pill language --- */
.gxds :is(.status-ok,.review-badge,.failed-badge,.processing-badge,.new-badge,.lifecycle-badge){
  display:inline-flex;align-items:center;gap:.34rem;
  font-weight:700;font-size:.68rem;letter-spacing:.02em;line-height:1;
  padding:.3rem .62rem;border-radius:999px;white-space:nowrap;
}

/* --- Quickstart / "Start here" cards → the tile hover language --- */
.gxds .quickstart-card{
  border-radius:16px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gxds .quickstart-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gixo-shadow-md);
  border-color:var(--gixo-border-hover);
}

/* --- Analytics band (below the work list): stat tiles, roadmap, charts →
       the same tile/panel language so the whole page reads as one surface. --- */

/* Stat tiles: rounder, real hover-lift, and the big numbers in the display face */
.gxds .gixo-stat-card{border-radius:16px;box-shadow:var(--gixo-shadow-sm);}
.gxds .gixo-stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gixo-shadow-md);
  border-color:var(--gixo-border-hover);
}
.gxds .gixo-stat-card .stat-value{
  font-family:var(--gxds-display);font-weight:800;letter-spacing:-.03em;
}

/* Content Roadmap widget → consistent panel + suggestion mini-cards */
.gxds .roadmap-widget{
  border:1px solid var(--gixo-border);
  border-radius:18px;
  box-shadow:var(--gixo-shadow-sm);
}
.gxds .suggestion-item{
  border-radius:12px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gxds .suggestion-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--gixo-shadow-sm);
  border-color:var(--gixo-border-hover);
}

/* Chart panels (tagged .gxds-analytics-panel in markup; the inline border/bg
   stays, we just round + elevate to match). .gxds double-scope beats MudPaper. */
.gxds .gxds-analytics-panel{
  border-radius:18px;
  box-shadow:var(--gixo-shadow-sm);
}