@font-face {
    font-family: "Basel";
    src: url("/assets/Basel-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basel';
    src: url("/assets/Basel-Bold.otf") format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ABCGravityUprightVariable';
    src: url("/assets/ABCGravityUprightVariable.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Apply the custom font to all elements */
body {
    font-family: "Basel", sans-serif !important;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "ABCGravityUprightVariable", sans-serif !important;
}

.btn-outline-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: #953BF6;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #953BF6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5a0dd4;
  --bs-btn-hover-border-color: #5a0dd4;
  --bs-btn-focus-shadow-rgb: 102, 16, 242;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4f0bbb;
  --bs-btn-active-border-color: #4f0bbb;
}

.hype-meter-progress .progress-bar {
    font-weight: 600;
    transition: width 0.6s ease-in-out, background-color 0.3s ease;
    animation: hype-bar-fill 0.8s ease-out;
}

/* Hover feedback on progress bar segments */
.hype-meter-progress .progress-bar:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

/* Animate progress bars filling on load */
@keyframes hype-bar-fill {
    from { width: 0%; }
}

/* Score badge hover */
#section-1 .mantine-Paper-root:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

/* --- Hype card: score cards use flexbox column so score rows align at bottom --- */
.hype-score-card {
    display: flex;
    flex-direction: column;
}

/* Force the three indicator boxes (Hype, Growth, Valuation gap) to share
   the row width equally. Use an explicit 3-column grid instead of relying
   on Mantine's Group(grow) flex rules (which let the growth box, wrapped
   in an extra Div, render narrower than the others). Grid columns of 1fr
   are always exactly equal regardless of each box's content. */
.hype-indicators-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hype-indicators-row > * {
    min-width: 0 !important;
    max-width: none !important;
}

.hype-score-row {
    margin-top: auto;
}

/* Growth indicator link — clickable card styling.
   It wraps a dmc.Paper in an extra Div (unlike the other two boxes which
   are bare Papers). Make the Div a full-width flex container and let the
   inner Paper grow to fill it, so this box matches the others' width. */
.hype-score-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 100%;
}

.hype-score-link .mantine-Paper-root {
    cursor: pointer;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hype-score-link:hover .mantine-Paper-root {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border-color: #868e96;
}

/* --- Company-info Spoiler ---
   The Spoiler (maxHeight=0) is only meant to collapse the company
   description on mobile, where Mantine's native "Show more / Hide"
   toggle handles expand/collapse. On desktop (> 768px) we force the
   content fully open and hide the toggle so it reads as plain text.
   We scope the desktop override to a min-width media query so it never
   interferes with Mantine's expand logic on mobile. */
@media (min-width: 769px) {
    .company-info-spoiler-content {
        max-height: none !important;
    }

    .company-info-spoiler-control {
        display: none !important;
    }

    /* Mantine adds margin-bottom to the Spoiler root (data-has-spoiler)
       to reserve room for the toggle. Remove it on desktop, where the
       toggle is hidden, so no blank gap is left below the content. */
    .company-info-spoiler {
        margin-bottom: 0 !important;
    }
}

/* "Show more / Hide" toggle: small and black. Mantine only renders this
   control when the description is longer than the Spoiler's maxHeight,
   so it never appears for short descriptions. */
.company-info-spoiler-control {
    font-size: 11px !important;
    color: #000 !important;
}

/* --- Alert summaries Spoiler ---
   Same behaviour as the company-info Spoiler, applied to every long alert
   summary (valuation message, valuation-graph message, quadrant message,
   growth / growth-rate / revenue / product-maturity graph messages).
   The whole body is hidden on mobile behind a small black "Show more"
   toggle; on desktop the content is fully open with no toggle. */
@media (min-width: 769px) {
    .alert-spoiler-content {
        max-height: none !important;
    }

    .alert-spoiler-control {
        display: none !important;
    }

    /* Mantine adds margin-bottom to the Spoiler root (data-has-spoiler)
       to reserve room for the toggle. Remove it on desktop, where the
       toggle is hidden, so no blank gap is left at the bottom of the
       alert. */
    .alert-spoiler {
        margin-bottom: 0 !important;
    }
}

.alert-spoiler-control {
    font-size: 11px !important;
    color: #000 !important;
}

/* --- Hype card: mobile responsiveness --- */
@media (max-width: 768px) {
    /* Let the header row wrap so the badge drops below the title */
    .hype-card-header {
        flex-wrap: wrap !important;
    }

    /* Shrink the badge in the header on mobile */
    .hype-card-header .mantine-Badge-root {
        font-size: 10px !important;
        height: 20px !important;
        padding: 0 8px !important;
    }

    /* Smaller title on mobile */
    .hype-card-title {
        font-size: 1rem !important;
    }

    /* Smaller logo on mobile */
    .hype-card-logo {
        height: 24px !important;
        max-width: 80px !important;
    }

    /* Compact padding on score cards */
    .hype-score-card {
        padding: 6px 8px !important;
    }

    /* Keep the three indicator boxes exactly equal width (grid handles the
       column sizing); clip overflow so populated values/labels can't make
       one box wider than the others. */
    .hype-indicators-row > * {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Smaller score values on mobile */
    .hype-score-row .mantine-Text-root {
        font-size: var(--mantine-font-size-md) !important;
    }

    /* Smaller badges on mobile */
    .hype-score-row .mantine-Badge-root {
        font-size: 9px !important;
        padding: 0 4px !important;
        height: 16px !important;
    }

    /* Hide growth driver subtitle on very small screens */
    #growth-driver-label {
        display: none;
    }
}

/* =========================================================================
   Growth card (section-4) — visual polish
   ========================================================================= */

/* Smooth fade-in when the card becomes visible
   (top accent border & hover lift come from .dashboard-card) */
.growth-card[style*="display: block"],
.growth-card[style*="display:block"] {
    animation: growth-card-enter 0.45s ease-out both;
}

@keyframes growth-card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Plotly chart container — remove default padding artifacts */
.growth-card .js-plotly-plot .plotly {
    border-radius: 8px;
}

/* ── Growth chart: force full width on all screens ── */
.growth-card .js-plotly-plot,
.growth-card .plot-container,
.growth-card .svg-container {
    width: 100% !important;
}

/* ── Growth chart: mobile-specific tightening ── */
@media (max-width: 768px) {
    /* Remove card horizontal padding so chart fills edge-to-edge */
    .growth-card {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Let the Plotly container breathe */
    .growth-card .js-plotly-plot {
        min-height: 280px;
    }

    /* Shrink the mode bar so it doesn't eat space */
    .growth-card .modebar-container {
        transform: scale(0.8);
        transform-origin: top right;
    }

    /* Tighter gap between logo/title and chart */
    .growth-card .mantine-Stack-root {
        gap: 4px !important;
    }

    /* Smaller company logo on mobile */
    #growth-card-logo {
        height: 18px !important;
        max-width: 60px !important;
    }
}

/* =========================================================================
   Welcome / landing card — visual polish
   ========================================================================= */

/* Hero header */
.welcome-hero {
    padding: 32px 16px 8px;
    animation: welcome-hero-enter 0.5s ease-out both;
}

.welcome-hero__eyebrow {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.welcome-hero__title {
    font-size: clamp(1.8rem, 4.5vw, 3rem) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #5a0dd4 60%, #953BF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@keyframes welcome-hero-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Both welcome cards: subtle accent + lift on hover */
.welcome-card {
    border-top: 3px solid #953BF6 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: welcome-card-enter 0.5s ease-out both;
    display: flex;
    flex-direction: column;
}

/* Dashboard cards: same hover/lift behavior as welcome cards, no entry animation */
.dashboard-card {
    border-top: 3px solid #953BF6 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(149, 58, 246, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.welcome-card--secondary {
    border-top-color: #b06bff !important;
    animation-delay: 0.05s;
}

.welcome-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(149, 58, 246, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

@keyframes welcome-card-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Divider tint inside welcome card 2 */
.welcome-card__divider {
    border-color: rgba(149, 59, 246, 0.25) !important;
}

/* Company chip grid items (logo-only) */
.welcome-company-chip {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        filter 0.18s ease;
    cursor: pointer;
}

.welcome-company-chip__logo {
    filter: grayscale(20%);
    opacity: 0.9;
    transition: filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.welcome-company-chip:hover {
    transform: translateY(-2px);
    border-color: #953BF6 !important;
    background-color: #faf5ff !important;
    box-shadow: 0 6px 16px rgba(149, 58, 246, 0.18);
}

.welcome-company-chip:hover .welcome-company-chip__logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ── Welcome card: mobile responsiveness ── */
@media (max-width: 768px) {
    .welcome-hero {
        padding: 16px 8px 0;
    }

    .welcome-hero__title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }

    .welcome-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .welcome-company-chip {
        height: 48px;
        padding: 6px !important;
    }

    .welcome-company-chip__logo {
        max-height: 22px !important;
    }
}

/* ---------------------------------------------------------------------------
   Full-page loading overlay (shown while a company page is loading)
   --------------------------------------------------------------------------- */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: page-loading-overlay-fade-in 0.15s ease-out;
}

.page-loading-overlay__label {
    letter-spacing: 0.02em;
}

@keyframes page-loading-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Company-select dropdown: mobile expand-on-focus
   ---------------------------------------------------------------------------
   On mobile the header is tight, so the company-select input stays compact
   (the placeholder can't grow without crowding the logo / ranking / account
   items). When the user taps/focuses the input we lift the container out of
   the flex flow (position: absolute) and stretch it across the header so the
   user has room to type, overlaying the sibling header items instead of
   pushing them. On blur it animates back to the compact size. Desktop
   (> 768px) keeps the original responsive sizing untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* The container is absolutely positioned at ALL times on mobile so that
       focusing/blurring only changes its WIDTH, never its positioning scheme.
       This is important: the Mantine option list is rendered in a portal and
       anchored to the input. If the input reflowed (e.g. static -> absolute)
       at the moment a user taps an option, the popover would reposition and
       the tap would be lost — which made unsupported-company selection fail
       on touch devices. Keeping `position: absolute` constant avoids that. */
    #dropdown-container {
        position: absolute !important;
        top: 50% !important;
        /* Sit to the RIGHT of the burger + RAST logo. The left group is:
           header padding (~16px) + burger (~18px) + gap (~10px) + logo
           (65px at the base breakpoint) ≈ 109px, plus a small gap. */
        left: 120px !important;
        transform: translateY(-50%) !important;
        width: 130px !important;
        max-width: 40vw !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        transition: width 0.2s ease, max-width 0.2s ease;
    }

    /* Expanded (focused) state: only the width grows to overlay the header. */
    #dropdown-container:focus-within {
        width: auto !important;
        right: 8px !important;  /* stretch toward the right edge of the header */
        max-width: none !important;
    }

    /* Make the inner Select input fill the container width. */
    #dropdown-container .mantine-select-wrapper,
    #dropdown-container .mantine-Select-root,
    #dropdown-container .mantine-Select-wrapper {
        width: 100% !important;
    }
}