/*
 * CrowdVibe look, level 2 (buttons, surfaces, type), for every panel. Registered in CrowdcruitTheme::apply() and
 * published by `php artisan filament:assets`. Taken from crowdcruit.com: bright aquamarine buttons with near-black
 * text, 16px cards with 6% borders, Manrope headings set tight, uppercase spaced labels.
 *
 * The one exception to "only Filament's colour variables": the brand accent below. Filament's generated primary
 * palette has no shade as bright and saturated as #33F591, so the token is defined once here and used only for the
 * primary button. Everything else stays on Filament's variables, light and dark.
 */

:root {
    --cv-accent: oklch(0.857 0.202 154.368);        /* #33F591, cc-aquamarine */
    --cv-accent-hover: oklch(0.9 0.16 154.368);      /* a step lighter, like the site's hover */
    --cv-accent-glow: oklch(0.857 0.202 154.368 / 0.35);
    --cv-ink: oklch(0.117 0.009 284.949);            /* #050508, the site's background, as button text */
}

/* 1. Buttons ---------------------------------------------------------------------------------------------------- */

.fi-btn {
    border-radius: 10px;
    transition: background-color 150ms ease, box-shadow 200ms ease, color 150ms ease;
}

/* Primary: bright aquamarine with near-black text, a soft glow on hover (the site's "Request a Demo"). */
.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):not(label) {
    --bg: var(--cv-accent);
    --dark-bg: var(--cv-accent);
    --hover-bg: var(--cv-accent-hover);
    --dark-hover-bg: var(--cv-accent-hover);
    --text: var(--cv-ink);
    --dark-text: var(--cv-ink);
    --hover-text: var(--cv-ink);
    --dark-hover-text: var(--cv-ink);
    font-weight: var(--font-weight-semibold);
}

.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    box-shadow: 0 0 0 1px var(--cv-accent), 0 6px 20px -6px var(--cv-accent-glow);
}

/* On a white page the bright fill needs an edge to stand out. */
:root:not(.dark) .fi-btn.fi-color.fi-color-primary:not(.fi-outlined):not(label) {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-700) 45%, transparent);
}

/* Grey buttons: the site's thin outline instead of a filled look. */
.dark .fi-btn:not(.fi-color):not(label),
.dark .fi-btn.fi-color-gray:not(label) {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 12%, transparent);
}

.dark .fi-btn:not(.fi-color):not(label):hover,
.dark .fi-btn.fi-color-gray:not(label):hover {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 22%, transparent);
}

/* 2. Surfaces ---------------------------------------------------------------------------------------------------- */

/* Cards, tables, stat tiles and our own surfaces: 16px corners (the site uses 20px; tighter for a dense tool). */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel,
.tc-surface,
.tc-savebar {
    border-radius: 16px;
}

/* Dark mode borders at the site's 6% white instead of Filament's 10% ring, a little stronger on hover. */
.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .tc-surface {
    --tw-ring-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 6%, transparent);
    transition: box-shadow 200ms ease;
}

.dark .fi-section:not(.fi-section-not-contained):hover,
.dark .fi-ta-ctn:hover,
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent);
}

/* Inputs follow the softer corners. */
.fi-input-wrp {
    border-radius: 10px;
}

/* 3. Type -------------------------------------------------------------------------------------------------------- */

/* Page titles: Manrope heavy and tight, like the site's "Tech hiring". */
.fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.fi-section-header-heading {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Descriptions a touch lighter so headings lead. */
.fi-header-subheading,
.fi-section-header-description {
    font-weight: 400;
}

/* The site's small uppercase labels ("SYSTEM MODULES") for stat and fact labels and the sidebar groups. */
.tc-checks-stats dt,
.tc-facts dt,
.tc-label,
.tc-guide-toc > .tc-label,
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
}

.fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Uppercase labels run wider: keep each stat label on one line so the values stay aligned. */
.tc-checks-stats { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.tc-checks-stats dt { white-space: nowrap; }

/* 4. Badges and meters ------------------------------------------------------------------------------------------- */

/* Status badges as the site's outline pill: thin tinted edge, tinted text, a faint fill. */
.fi-badge.fi-color {
    border-radius: 9999px;
    padding-inline: 0.55rem;
    background-color: color-mix(in oklab, var(--color-500) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-500) 45%, transparent);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.dark .fi-badge.fi-color {
    color: var(--color-300);
}

.fi-badge.fi-color-gray {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-500) 40%, transparent);
}

/* Meters thinner, filled with the CrowdVibe score card's gradient. */
.tc-meter {
    height: 0.3125rem;
}

.tc-rubric-meter {
    height: 0.375rem;
}

.tc-meter-fill {
    background-color: transparent;
    background-image: linear-gradient(90deg, color-mix(in oklab, var(--color-500, var(--primary-500)) 55%, transparent), var(--color-400, var(--primary-400)));
}

.dark .tc-meter.fi-color-primary .tc-meter-fill,
.dark .tc-rubric-meter .tc-meter-fill {
    box-shadow: 0 0 10px -2px var(--cv-accent-glow);
}

/* 6. Sign-in pages ----------------------------------------------------------------------------------------------- */

/* The site's faint grid with one green glow in the corner, and a raised card for the form. */
.fi-simple-layout {
    --cv-grid: color-mix(in oklab, var(--gray-950) 5%, transparent);
    background-color: var(--gray-50);
    background-image:
        radial-gradient(60rem 30rem at 85% -10%, oklch(0.857 0.202 154.368 / 0.12), transparent 60%),
        linear-gradient(to right, var(--cv-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cv-grid) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
}

.dark .fi-simple-layout {
    --cv-grid: color-mix(in oklab, var(--color-white) 4%, transparent);
    background-color: var(--gray-950);
}

.fi-simple-main {
    border-radius: 20px;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 8%, transparent), 0 30px 80px -40px color-mix(in oklab, var(--gray-950) 45%, transparent);
}

.dark .fi-simple-main {
    background-color: var(--gray-900);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 7%, transparent), 0 30px 80px -30px color-mix(in oklab, var(--gray-950) 90%, transparent);
}

.fi-simple-header-heading {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.tc-login-tagline {
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.dark .tc-login-tagline {
    color: var(--gray-400);
}