/* Global, app-wide styles -- not scoped to any single component. A handful of
   pages also have their own "<PageName>.razor.css" file next to them (Blazor
   "CSS isolation" -- see e.g. Pages/MapPage.razor.css's header comment for how
   that mechanism works) for styling that's genuinely specific to one page; this
   file is for everything else. Most of the actual look-and-feel (colors, fonts,
   shape) is a MudTheme -- see Theme/BartrTheme.cs -- this file only holds things
   a C# theme object can't express: a couple of true page-wide resets, two shape
   utility classes Mud components opt into, and the framework-required Blazor
   loading/error UI below.

   Bartr's brand colors, "Space Grotesk" wordmark/heading font, and "Plus Jakarta
   Sans" body font (self-hosted -- see css/fonts.css and wwwroot/fonts/) all came
   from the original React prototype's design -- see Theme/BartrTheme.cs's header
   comment. */

/* The one global source for Bartr's brand colors as CSS custom properties --
   same hex values as Theme/BartrTheme.cs's Accent/Ink/Cream constants, kept in
   sync by hand since one is a C# MudTheme and the other plain CSS. Any
   component's markup that needs to reference brand color outside what a MudTheme
   already applies (a border, an SVG fill, ...) should use var(--coral) etc.
   here rather than a hardcoded hex, so there's exactly one place to change it. */
:root {
    --coral: #E85D3A;
    --ink: #1A1A1A;
    --cream: #F0EEE9;
}

html, body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cream);
}

h1:focus {
    outline: none;
}

/* MudBlazor has no built-in "fully pill-shaped" button/chip option -- the
   original design used borderRadius:100 on nearly every button, chip, and
   badge, so components that want that look opt in with Class="rounded-pill"
   (MudChip/MudButton/etc. already default to Theme/BartrTheme.cs's
   DefaultBorderRadius of 16px, which suits cards but is too subtle for a
   pill). */
.rounded-pill {
    border-radius: 100px !important;
}

/* Every outlined MudTextField/MudSelect's label sits permanently in its
   "shrunk" position (small, on the border) instead of MudBlazor's default of
   only shrinking it once the field is focused or has a value/placeholder --
   an empty, unfocused field otherwise looks like it has no label at all,
   since the label text sits centered inside the box exactly like a
   placeholder would until you interact with it. This reproduces the same
   transform/width MudBlazor's own shrunk-state rule sets (see
   `.mud-shrink~label...mud-input-label-outlined` in MudBlazor.min.css, keyed
   off a `.mud-shrink` sibling class or `:focus-within`), just unconditionally
   -- color is deliberately left alone, so a field still visibly highlights
   (secondary -> primary/coral) when focused, exactly as before. `legend`'s
   width/padding is the notch cut into the outline border behind the label;
   MudBlazor collapses it to 0 in the unshrunk state, so it needs the same
   always-on treatment or the label would sit on top of an uninterrupted
   border line instead of a gap. !important for the same reason
   .rounded-pill below needs it -- overriding MudBlazor.min.css's own rule,
   not just adding a fresh one, so this has to win regardless of
   selector-specificity/source-order. */
.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75) !important;
    max-width: calc((100% - 14px) / 0.75) !important;
}

.mud-input-outlined-border legend {
    width: auto !important;
    padding: 0 5px !important;
}

/* The "Bartr" wordmark next to the logo mark in MainLayout.razor's app bar --
   Space Grotesk (see Theme/BartrTheme.cs) at a weight/spacing Typo.h6 alone
   doesn't give it. */
.bartr-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* MudAppBar with Color.Surface + Elevation="0" (see MainLayout.razor) has no
   built-in separator from the page content below it -- this adds the same
   thin hairline the original design used to divide its top bar from content. */
.border-bottom {
    border-bottom: 1px solid #E5E2DC;
}

/* A handful of pages still use plain flex/text-alignment utility classes on a
   literal <div> (rather than a MudStack/MudText component) for small one-off
   layout tweaks -- e.g. "put this badge on the far right of this row."
   MudBlazor.min.css ships spacing utilities (mb-3, gap-2, pa-4, ...) but NOT
   these flex-alignment/text-alignment/sizing ones, so they're defined here to
   keep that markup working now that Bootstrap's CSS is gone from this project
   (see index.html). */
.justify-content-between { justify-content: space-between; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* MudBlazor.min.css ships gap-N, flex-wrap, and cursor-pointer utilities
   (used elsewhere in this project's markup) but no font-weight or
   text-transform ones -- added here for the same reason as the block above. */
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.text-uppercase { text-transform: uppercase; }

/* Login.razor and Register.razor each wrap a MudDivider in one of these on
   either side of "or" -- MudDivider's own CSS sets width:100%, which (with
   nothing else constraining it) makes it claim the whole row for itself and
   overflow the card; this gives it a narrower flex slot to be 100% of
   instead. Shared here since the exact same pattern repeats in both files. */
.divider-flex-wrap { flex: 1; min-width: 0; }

/* A workaround, not a look: several *.razor.css files need to style a
   MudBlazor component (MudAvatar, MudText, MudPaper, ...) via a class on it,
   but Blazor's CSS isolation only stamps its scope attribute onto elements
   *literally authored* in that .razor file -- never onto a child component's
   own rendered root. A scoped rule using the `::deep` combinator (e.g.
   `::deep .foo { }`) still needs *some* literal ancestor element carrying
   that scope attribute to match against, and several of these components sit
   directly under other MudBlazor components with no literal HTML anywhere
   above them in the file. `<div class="contents">` wrapped immediately
   around such a component gives `::deep` that literal ancestor to anchor to
   -- and `display: contents` means the div itself never appears in the
   layout (its children are boxed as if it weren't there), so it can't affect
   sizing, flex/grid behavior, or spacing the way an ordinary wrapping <div>
   would. See e.g. Pages/ProfilePage.razor's `<div class="contents">` around
   its avatar, and Pages/ProfilePage.razor.css's matching comment. */
.contents { display: contents; }

/* Custom scrollbar, ported from the original React app's index.css. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--coral) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--coral);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink);
}

/* ── Everything below this line is required by the Blazor WebAssembly framework
   itself (referenced directly by wwwroot/index.html and blazor.webassembly.js) --
   not part of the Bartr brand, don't remove even though it isn't MudBlazor. ── */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

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

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

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

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

/* MudFileUpload's underlying <input type=file> renders with the native
   "hidden" attribute, which computes to display:none. iOS Safari's native
   "Take Photo" camera-capture sheet renders a completely black preview when
   the triggering file input isn't actually part of the layout -- a known
   WebKit bug (unrelated to the input's accept value), confirmed here via
   Playwright by inspecting the input's computed style on CreateListing/
   EditListing/ProfilePage. The fix is the standard "visually hidden but
   still laid out" pattern instead of display:none -- keeps every other
   browser's behavior (and MudFileUpload's own click-to-open wiring)
   unchanged, since the element is still present, just invisible and
   zero-sized. !important overrides the "hidden" attribute's higher-priority
   UA-stylesheet display:none. */
.mud-file-upload input[type="file"] {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}