/*
 * MealPlanner theme.
 *
 * The house apps share one look. This file is MealPlanner's standalone copy of the shared
 * ClientAssets theme: same tokens, own accent. Swap it for a reference to the shared razor
 * class library the day that library becomes a package this repo can restore — the token
 * names are what has to match, not where the file lives.
 *
 * Fluent UI v5 removed FluentDesignTheme: theming is CSS variables and nothing configures it from
 * C#. The v4 FAST token names (--accent-base-color, --neutral-foreground-rest,
 * --type-ramp-base-font-size) are dead and have been replaced by the Fluent 2 names v5 reads.
 *
 * v5 writes the full token set itself, from its JS initializer into an adopted `html { ... }` rule,
 * deriving the brand ramp from index.html's `data-theme-color`. The overrides below are `:root`
 * rather than `html` on purpose: `:root` is a pseudo-class and outranks a bare `html`, so they win
 * over the initializer whatever order the sheets land in. They pin the handful of tokens that want
 * the accent exactly; every other --colorBrand* comes off the ramp and so needs nothing here.
 *
 * MealPlanner's own pages style themselves from the --mealplanner-*, --shop-* and --surface tokens,
 * which nothing else writes — that is what makes the shopping list render correctly whether or not
 * Fluent's JS has run.
 */

/*
 * v5's normalization is declined in index.html (`no-fuib-style`) because it locks the body's height
 * and overflow. `box-sizing: border-box` is the one rule in it this app still wants, and it is not
 * optional: every padded box below is measured as if it were in force.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Accent: the aubergine of a market stall, distinct from PointManager and TravelPlanner.
       index.html's data-theme-color must carry this same hex — it is what v5 builds the ramp from. */
    --mealplanner-accent: #6b3f68;
    --mealplanner-accent-strong: #532f51;
    --mealplanner-accent-muted: #f2ecf2;

    /* Fluent 2 tokens, which is what v5 components read. */
    --colorBrandBackground: var(--mealplanner-accent);
    --colorBrandBackgroundHover: var(--mealplanner-accent-strong);
    --colorBrandBackgroundPressed: var(--mealplanner-accent-strong);
    --colorBrandForeground1: var(--mealplanner-accent);
    --colorBrandForegroundLink: var(--mealplanner-accent);
    --colorBrandStroke1: var(--mealplanner-accent);

    --body-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fontFamilyBase: var(--body-font);

    /* MealPlanner's own foreground, used by everything outside a Fluent component. */
    --text-primary: #1f1a1f;
    --text-secondary: #5f545e;

    /* Shop colours, used by the shopping list from phase 4 onwards. */
    --shop-monoprix: #e2001a;
    --shop-picard: #00539f;

    --surface: #ffffff;
    --surface-sunken: #faf8fa;
    --border-subtle: #e3dde3;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --text-primary: #f4f0f4;
        --text-secondary: #b3a7b1;
        --mealplanner-accent-muted: #2a1f29;
        --surface: #1b171b;
        --surface-sunken: #131013;
        --border-subtle: #332c33;
    }
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: var(--body-font);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--surface-sunken);
    /* iOS Safari: stop a two-finger stretch from detaching the fixed header. */
    overscroll-behavior-y: none;
}

h1:focus {
    outline: none;
}

/*
 * App-wide rather than page-scoped, so it covers whatever is added next. The shopping list's only
 * motion is a row fading as it is ticked, and somebody who has asked for less of that has asked
 * once, for everything.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.app-shell {
    display: flex;
    flex-direction: column;
    /* dvh, not vh: on a phone the mobile browser's chrome shrinks the viewport as you scroll, and
       vh keeps reserving space for chrome that is no longer there. */
    height: 100dvh;
}

.app-header {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--mealplanner-accent);
    color: #ffffff;
    /* The notch and the rounded corners on a phone held in landscape. */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 40rem) {
    .app-header {
        padding: 1rem 1.5rem;
    }
}

.app-header__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.app-header__subtitle {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.85;
}

.app-header__account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.8125rem;
}

.app-header__user {
    opacity: 0.85;
}

.app-header__sign-out {
    /* Thumb-sized, as every other target on the page is. */
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.6);
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.app-header__sign-out:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Momentum scrolling, and a scroll container the page's sticky bars can anchor to. */
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* A phone has no room for a 1.5rem gutter on both sides; a desktop has room for more. */
@media (min-width: 40rem) {
    .app-content {
        padding: 1.5rem;
    }
}

/* Blazor's own error strip, restyled to match rather than to shout. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 1.5rem;
    background-color: #fde68a;
    color: #3f2d00;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

.loading-progress {
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--mealplanner-accent);
    stroke-dasharray: calc(3.141592653589793 * var(--blazor-load-percentage, 0%) * 0.8) 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
    font-weight: 600;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}