/* ==========================================================================
   HillMetrics — Foundation layer
   Fonts, motion tokens and namespaced utilities.
   Loaded FIRST in App.razor (before MudBlazor) — everything here is either
   an @font-face, a CSS custom property, or a namespaced `hm-*` utility, so
   it never fights the component library.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter (variable font, self-hosted — no external calls).
   HmTheme declares "Inter" as the primary font family; until now no font
   file was shipped, so the whole app silently fell back to Arial.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Motion tokens — single source of truth for durations and easing.
   Use these in every Hm* component instead of hard-coded values.
   -------------------------------------------------------------------------- */
:root {
    --hm-motion-fast: 150ms;
    --hm-motion-base: 200ms;
    --hm-motion-slow: 300ms;
    --hm-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --hm-motion-fast: 0ms;
        --hm-motion-base: 0ms;
        --hm-motion-slow: 0ms;
    }

    .hm-page-enter {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Page content entrance — applied by HmPageLayout around PageContent.

   Opacity only, deliberately: an element animating `transform` becomes the
   containing block of its `position: fixed` descendants for the whole duration
   of the animation. Page content holds plenty of those — every temporary
   MudDrawer a page declares (the filter panel, the documentation viewer),
   overlays, popovers. A closed right-hand drawer sits at
   `right: calc(-1 * <its width>)`, which is off-screen against the viewport but
   not against this wrapper: the wrapper's right edge is inset by the container's
   own margins, so the drawer's leftmost part landed inside the viewport and was
   visible until the animation ended. That was the flash on the right on every
   page load. `translate` would do exactly the same, and animating `top` or
   `margin` instead would reflow the page on every frame; a fade alone is worth
   more than four pixels of travel.
   -------------------------------------------------------------------------- */
.hm-page-enter {
    animation: hm-page-enter var(--hm-motion-fast) var(--hm-ease);
}

@keyframes hm-page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Typography utilities.
   Replace the legacy `font-weight-bold` / `font-weight-medium` (defined by
   no loaded framework) and Bootstrap's `fw-bold`.
   -------------------------------------------------------------------------- */
.hm-fw-500 { font-weight: 500; }
.hm-fw-600 { font-weight: 600; }

/* Semantic text colors bound to the active MudBlazor palette. */
.hm-text-error { color: var(--mud-palette-error); }
.hm-text-warning { color: var(--mud-palette-warning); }
.hm-text-success { color: var(--mud-palette-success); }

/* --------------------------------------------------------------------------
   Responsive visibility utilities.
   Breakpoints follow MudBlazor: xs < 600, sm < 960, md < 1280 px.
   `hm-hide-mobile` is a legacy alias for `hm-hide-sm-down`.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    .hm-hide-xs { display: none !important; }
}

@media (max-width: 959.98px) {
    .hm-hide-sm-down,
    .hm-hide-mobile { display: none !important; }
}

@media (max-width: 1279.98px) {
    .hm-hide-md-down { display: none !important; }
}

/* Truncate long cell text with an ellipsis; pair with a max-width on the element. */
.hm-text-truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-text-primary { color: var(--mud-palette-primary); }
.hm-nowrap { white-space: nowrap; }