/* ============================================================
   cross-component.css — global hoist of classes used in multiple components.
   ============================================================
   Pass D follow-up (BOLD Stellar Sweep 2026-05-08, MR for CC-309 Tier 1).

   Why this file exists:
     • Blazor's scoped CSS attaches a per-component scope hash (e.g. [b-xyz123])
       to selectors in companion .razor.css files. A class defined in
       ProductHome.razor.css therefore does NOT apply when the same class name
       appears in markup of a DIFFERENT component — even though the markup
       reads as if it should.
     • CC-309 correctly flags such cross-component class references as
       "defined nowhere" — the local definition is invisible cross-component.
     • This file hoists the 22 classes that the audit identified as cross-
       component references into a global, unscoped stylesheet so the rule
       applies everywhere the class name appears in markup.

   Provenance: each block below was copied from its original component's
   companion .razor.css. The original definitions remain in place, so each
   home component renders identically (Blazor scope hash specificity wins
   over the unscoped global rule). Other components now also pick up a
   sensible default.

   Long-term cleanup: many of these aren't true utilities — they're
   domain-specific styles that drifted into multiple components. Consider
   extracting a shared component (e.g. <XAlertBar>) so the styling lives
   with the markup contract, then deleting these hoists.

   Tokens consumed: --x-spacing-*, --x-radius-*, --x-color-*, --x-text-*,
   --x-font-weight-* (all defined in gotom8-theme.css).
   ============================================================ */

/* Alerts (originally in ProductHome.razor.css + BudgetWidget.razor.css) ---- */
.alert-bar {
    padding: var(--x-spacing-4) var(--x-spacing-6);
    border-radius: var(--x-radius-card);
    font-size: var(--x-text-sm);
    line-height: 1.5;
}

.alert-error {
    background: var(--x-color-destructive-muted);
    border: 2px solid var(--x-color-destructive);
    color: var(--x-color-destructive);
}

.alert-warning {
    border: 1px solid var(--x-color-warning);
}

/* Tier 2 — semantic-palette completion (CC-309 follow-up). Matches the existing
   alert-error visual treatment but keyed on info/success palette tokens. */
.alert-info {
    background: var(--x-color-info-muted);
    border: 2px solid var(--x-color-info);
    color: var(--x-color-info);
}

.alert-success {
    background: var(--x-color-success-muted);
    border: 2px solid var(--x-color-success);
    color: var(--x-color-success);
}

/* Empty-state (originally in DashboardMyWorkTab.razor.css) -------------- */
.empty-state-icon {
    color: var(--x-color-border);
}

/* Form layout (originally in CredentialOverviewTab.razor.css) ----------- */
.form-field {
    display: flex;
    flex-direction: column;
}

/* Tier 2 — form primitives (CC-309 follow-up) */
.form-label-bold {
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-text-primary);
    font-size: var(--x-text-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2);
    margin-bottom: var(--x-spacing-4);
}

/* Tier 2 — page-layout primitives (CC-309 follow-up) */
.page-center-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--x-spacing-4);
    border-bottom: 1px solid var(--x-color-border);
}

/* Tier 2 — workspace loading state (Routes.razor uses this; was undefined). */
.workspace-loading-state {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--x-spacing-8);
    color: var(--x-color-muted-foreground);
}

/* GTM wizard progress (originally in GtmWizardShell.razor.css) ---------- */
.gtm-progress-header {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3);
    padding: var(--x-spacing-6);
    background: linear-gradient(135deg, var(--x-color-primary-muted) 0%, var(--x-color-accent) 100%);
    border-radius: var(--x-radius-xl);
    border: 1px solid var(--x-color-border);
}

.gtm-progress-header-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--x-spacing-4);
}

.gtm-progress-percentage {
    font-size: var(--x-text-2xl);
    font-weight: 700;
    color: var(--x-color-primary);
    line-height: 1;
}

/* Idea backlog list (originally in IdeaBacklog.razor.css) --------------- */
.ideas-list {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3);
}

/* Initiative card tag (originally in InitiativeCard.razor.css) ---------- */
.initiative-card-tag {
    padding: var(--x-spacing-0-5) var(--x-spacing-1-5);
    background-color: var(--x-color-muted);
    border-radius: var(--x-radius-sm);
    font-size: var(--x-text-xxs);
    color: var(--x-color-muted-foreground);
}

/* JTBD legend (originally in JtbdSatisfactionMatrix.razor.css) ---------- */
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--x-text-xs);
    color: var(--x-color-muted-foreground);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Matrix table wrapper (originally in ProviderSettings.razor.css) ------- */
.matrix-table-wrapper {
    overflow-x: auto;
}

/* Member identity sub-line (originally in MemberIdentityCell.razor.css) - */
.member-identity-sub {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    line-height: 1.2;
}

/* AI settings meter / metric (originally in AiSettings.razor.css + CustomerMetricsDashboard.razor.css) */
.meter-label {
    font-weight: 500;
    color: var(--x-color-foreground);
}

.metric-label {
    font-size: var(--x-text-xxs);
    font-weight: var(--x-font-weight-medium);
    color: var(--x-color-muted-foreground);
}

.metric-value {
    font-size: var(--x-text-3xl);
    font-weight: var(--x-font-weight-bold);
    color: var(--x-color-foreground);
    margin-bottom: var(--x-spacing-1);
}

/* Preferences panel (originally in DigestPreferencesPanel.razor.css) ---- */
.preference-section {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3);
}

.preference-actions {
    display: flex;
    gap: var(--x-spacing-3);
    padding-top: var(--x-spacing-2);
}

/* Budget / cost / usage (originally in AiSettings.razor.css) ------------ */
.provider-cost {
    font-weight: 500;
    color: var(--x-color-foreground);
}

.remaining-budget {
    color: var(--x-color-muted-foreground);
}

.usage-by-provider {
    margin-top: var(--x-spacing-6);
}

/* ============================================================
   XSelect Label="" empty-label collapse (v3.68.0 absorption follow-up)
   ============================================================
   XSelect's wrapper renders a <span class="x-select-label"> element above
   the input even when consumers pass Label="" (empty string). The wrapper
   has `gap: var(--x-spacing-1-5)` and the label has `margin-bottom:
   var(--x-spacing-1)` and inherits its own line-height — so an empty Label
   still occupies ~20-30px of vertical space above the input.

   GoToM8 has 25+ XSelect call sites that pass Label="" because the
   semantic label lives elsewhere (a section header, an XSearchHeader's
   ChildContent slot, an inline filter bar). All of them render with the
   ghost label space. The screenshot of the Knowledge Library "All
   Categories" / "All Sources" filters made this visible.

   Until the lib ships a `LabelHidden` parameter or auto-suppresses the
   label element when null/empty, this global rule collapses the empty
   label and removes the wrapper gap. `:has()` is supported in all modern
   browsers (Chrome 105+, Firefox 121+, Safari 15.4+); on older browsers
   the rules fall through harmlessly and the legacy oversized look stays.

   Filing upstream xablu-libs issue: XSelect should either omit the
   x-select-label element when Label is null/empty, or provide a
   LabelHidden=true parameter for visually-hidden-but-aria-labeled cases.
   ============================================================ */
.x-select-label:empty {
    display: none;
    margin: 0;
}

.x-select:has(.x-select-label:empty) {
    gap: 0;
}

/* ============================================================
   .gtm-stat-tile — shared flat horizontal [label][value][icon] tile.
   2026-05-25 design sweep.

   Converged from CrmSummaryBar.crm-stat-tile / MiStatsBar.mi-stat-tile —
   any page with a top-of-page KPI row carrying label + number + icon
   should adopt these classes instead of duplicating the structure in
   per-page scoped CSS. XMetricCard would have been the natural lib home
   but its vertical default layout can't be horizontalized without
   ::deep selectors that XBLZ035 flags as a build error.

   Used in: FeatureRoadmap, IdeaBacklog, IntegrationsOverview,
   PortfolioCoverageMap, ExecutionControlPlane, OperationalPulse.
   ============================================================ */
.gtm-stat-tile {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--x-spacing-2);
    padding: var(--x-spacing-2) var(--x-spacing-3);
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-md);
    background: var(--x-color-card);
    min-height: 44px;
}

.gtm-stat-label {
    font-size: var(--x-text-xs);
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.gtm-stat-value {
    font-size: var(--x-text-lg);
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-foreground);
}

.gtm-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--x-radius-md);
}

.gtm-stat-icon--primary { background: var(--x-color-primary-muted); color: var(--x-color-primary); }
.gtm-stat-icon--info    { background: var(--x-color-info-muted);    color: var(--x-color-info); }
.gtm-stat-icon--success { background: var(--x-color-success-muted); color: var(--x-color-success); }
.gtm-stat-icon--warning { background: var(--x-color-warning-muted); color: var(--x-color-warning); }
.gtm-stat-icon--danger  { background: var(--x-color-destructive-muted); color: var(--x-color-destructive); }

/* Companion grid-wrapper: pages drop .gtm-stat-tile children inside without
   each page needing its own grid-template-columns rule. Variant suffixes set
   column count for desktop; 1024/640px collapse to 2/1 columns (canonical
   breakpoint set per DbArchitectureGuardrail). */
.gtm-kpi-row {
    display: grid;
    gap: var(--x-spacing-3);
    grid-template-columns: repeat(4, 1fr);
}

.gtm-kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.gtm-kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
.gtm-kpi-row--5 { grid-template-columns: repeat(5, 1fr); }
.gtm-kpi-row--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .gtm-kpi-row,
    .gtm-kpi-row--3,
    .gtm-kpi-row--4,
    .gtm-kpi-row--5,
    .gtm-kpi-row--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gtm-kpi-row,
    .gtm-kpi-row--3,
    .gtm-kpi-row--4,
    .gtm-kpi-row--5,
    .gtm-kpi-row--6 {
        grid-template-columns: 1fr;
    }
}