/* Make the headline numbers on the dashboard stats cards larger and bolder
   than Filament's stock styling. The accent color comes from each Stat's
   ->color() in App\Filament\User\Widgets\WorkupStatsOverview, applied by
   Filament via inline CSS variables on the .fi-wi-stats-overview-stat
   wrapper — we only resize/reweight here. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 2.5rem;       /* ~40px, up from Filament's ~24px default */
    font-weight: 700;
    line-height: 1.1;
}

/* Color the headline number per stat. Brand hexes copied from _theme.css
   so the panel and public site stay in lockstep — blue/green/orange 500. */
.fi-wi-stats-overview-stat.stat-blue .fi-wi-stats-overview-stat-value {
    color: #0d2ea0;
}

.fi-wi-stats-overview-stat.stat-green .fi-wi-stats-overview-stat-value {
    color: #2c8500;
}

.fi-wi-stats-overview-stat.stat-orange .fi-wi-stats-overview-stat-value {
    color: #f38e29;
}

.fi-wi-stats-overview-stat.stat-purple .fi-wi-stats-overview-stat-value {
    color: #6b46c1;
}

/* Filament has no built-in purple, so the `stat-purple` widgets pair the
   purple value above with `->color('info')` — which paints Filament's
   info-blue onto the description and leaves the card looking two-toned.
   Override here so the description text (and any descriptionIcon Filament
   would otherwise color via --color-500) pick up the same purple as the
   value. Specificity matches Filament's own .fi-color rule; our stylesheet
   loads after Filament's, so source order wins the tie. */
.fi-wi-stats-overview-stat.stat-purple .fi-wi-stats-overview-stat-description.fi-color {
    color: #6b46c1;
}

.fi-wi-stats-overview-stat.stat-purple .fi-wi-stats-overview-stat-description.fi-color .fi-icon {
    color: #6b46c1;
}

/* Beef up the "Start a new workup" CTA so it visually echoes the
   "Add Product Configuration" button on the configurator page. Filament's
   `xl` size preset isn't quite big enough on its own. The hook class is set
   via extraAttributes() in App\Filament\User\Pages\Dashboard. */
.fi-btn.dashboard-cta {
    padding: 0.875rem 1.5rem;    /* ~14px / 24px */
    font-size: 1rem;              /* 16px */
}

.fi-btn.dashboard-cta .fi-btn-icon,
.fi-btn.dashboard-cta svg {
    width: 1.5rem;                /* size-6 */
    height: 1.5rem;
}

/* -- Analytics page tab styling ------------------------------------------ */
/* Hook class lives on `.fi-sc-tabs` (set via the Tabs schema component's
   extraAttributes()). Filament's `contained(false)` mode strips the outer
   schema container, but the inner tab strip still renders as a rounded
   white card with pill-style buttons. We swap that for an underline-on-
   active strip that matches the design mockup. */

/* Tab strip: drop the white card + shadow, anchor left, draw a bottom
   border to separate the strip from the widget rows below. We also kill
   Filament's stock `overflow-x: auto` — for a 3-tab nav with short labels
   there's no horizontal overflow to ever scroll, and the rule leaks an
   unwanted scrollbar onto the strip whenever a child element (e.g. the
   active-tab underline pseudo-element) extends past the box bounds. */
.analytics-tabs .fi-tabs:not(.fi-contained) {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-inline: 0;
    border-bottom: 1px solid var(--gray-200);
    column-gap: 1.5rem;
    margin-bottom: 1.25rem;
    overflow: visible;
}

/* Individual tab button: no pill background, no rounding — just labeled
   text + icon with the active-state underline emerging from ::after. */
.analytics-tabs .fi-tabs .fi-tabs-item {
    border-radius: 0;
    background-color: transparent;
    padding: 0.75rem 0.25rem;
    margin: 0;
    position: relative;
}

.analytics-tabs .fi-tabs .fi-tabs-item:hover,
.analytics-tabs .fi-tabs .fi-tabs-item:focus-visible,
.analytics-tabs .fi-tabs .fi-tabs-item.fi-active {
    background-color: transparent;
}

/* Hover/keyboard-focus affordance on inactive tabs: the label and icon
   shift to the site's light blue ($light-blue in _variables.scss — same
   hover hue as the public nav) and a soft gray underline previews where
   the active indicator will land. Active tabs keep their full-strength
   state. Transitions use Tailwind's default timing (150ms, its stock
   ease curve) so the fade matches motion elsewhere in the app. */
.analytics-tabs .fi-tabs .fi-tabs-item .fi-tabs-item-label,
.analytics-tabs .fi-tabs .fi-tabs-item .fi-icon {
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.analytics-tabs .fi-tabs .fi-tabs-item:hover:not(.fi-active) .fi-tabs-item-label,
.analytics-tabs .fi-tabs .fi-tabs-item:hover:not(.fi-active) .fi-icon,
.analytics-tabs .fi-tabs .fi-tabs-item:focus-visible:not(.fi-active) .fi-tabs-item-label,
.analytics-tabs .fi-tabs .fi-tabs-item:focus-visible:not(.fi-active) .fi-icon {
    color: #1861d8;
}

/* The hover underline lives on every inactive tab as a transparent bar so
   its background-color can fade in/out rather than popping. */
.analytics-tabs .fi-tabs .fi-tabs-item:not(.fi-active)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: transparent;
    border-radius: 2px 2px 0 0;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.analytics-tabs .fi-tabs .fi-tabs-item:hover:not(.fi-active)::after,
.analytics-tabs .fi-tabs .fi-tabs-item:focus-visible:not(.fi-active)::after {
    background-color: var(--gray-300);
}
/* Divider ahead of the Site Traffic tab: the first three tabs all report
   on workups while Site Traffic covers the whole site, so a short vertical
   rule separates the two groups. The `tab-site-traffic` marker class comes
   from the Tab's extraAttributes() in Analytics.php — `:last-child` won't
   work here because Filament renders its (hidden) overflow dropdown after
   the tab buttons inside the same strip. Drawn as a ::before centered in
   the strip's 1.5rem column-gap (left: -0.75rem) so it adds no layout
   width; ::after is already taken by the underline indicator. */
.analytics-tabs .fi-tabs .fi-tabs-item.tab-site-traffic::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.25rem;
    background-color: var(--gray-300);
}

/* Active tab: 2px brand-primary underline pinned to the strip's border. */
.analytics-tabs .fi-tabs .fi-tabs-item.fi-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: #0d2ea0;
    border-radius: 2px 2px 0 0;
}

/* -- All Workups: muted soft-deleted rows ------------------------------- */
/* Hook class applied via `->recordClasses(fn ($r) => $r->trashed() ? '...' :
   null)` in `AllWorkupsResource::table()`. Filament colors text-column
   content via `.fi-ta-text-item` (text-gray-950, almost black), so a plain
   `td { color: ... }` rule loses the specificity fight. We target the
   actual text-item span — and explicitly skip the `.fi-badge` descendants
   so the red "Deleted" status badge still pops to call out the row state. */
.workup-row-trashed .fi-ta-text-item:not(.fi-badge) {
    color: var(--gray-400);
}

.workup-row-trashed .fi-ta-text-item:not(.fi-badge) .fi-link {
    color: var(--gray-400);
}