/* ============================================================================
   SWA design tokens (location-detail redesign — Phase 1 scaffolding)
   Colour tokens alias the MudBlazor palette variables so they auto-switch with
   light/dark (driven by ThemeService.Theme). Structural tokens (radius, spacing,
   gradients) are theme-agnostic; the accent-soft + neutral gradients use
   color-mix() so they adapt to the active surface without a separate dark block.
   Later phases (summary card, tabs, room cards) consume these — do not hardcode
   palette hex in component .razor.css; reference --swa-* / --mud-palette-*.
   ============================================================================ */
:root {
    /* colour aliases (follow the MudTheme automatically) */
    --swa-accent: var(--mud-palette-primary);
    --swa-accent-text: var(--mud-palette-primary-text);
    --swa-surface: var(--mud-palette-surface);
    --swa-bg: var(--mud-palette-background);
    --swa-ink: var(--mud-palette-text-primary);
    --swa-muted: var(--mud-palette-text-secondary);
    --swa-border: var(--mud-palette-lines-default);

    /* derived accent washes (adapt to the active surface) */
    --swa-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    --swa-accent-ring: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);

    /* theme-INDEPENDENT brand blue — for text/icons placed on an always-white
       surface (e.g. a white button) or the brand hero gradient. Fixed at a darkened
       tint of the marketing-site Primary (#3B82F6 -> #1D4ED8, ~6.7:1 on white) so it
       stays legible regardless of theme — the raw Primary only clears ~3.7:1 on
       white, too low for small button text. Do NOT use the palette primary directly
       on hardcoded-white surfaces. */
    --swa-accent-fixed: #1D4ED8;
    --swa-hero-grad: linear-gradient(135deg, #16294A 0%, #060D1A 100%);

    /* structural */
    --swa-radius-card: 16px;
    --swa-radius-chip: 999px;
    --swa-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04);
    --swa-shadow-card-hover: 0 4px 12px rgba(28, 25, 23, 0.10);
    --swa-gap: 16px;

    /* room-card icon-fallback gradients (used when a child node has no cover photo).
       Neutral, theme-aware mixes; RoomCard picks one by a stable hash of node id. */
    --swa-grad-1: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-surface) 70%, #DDE3EA), color-mix(in srgb, var(--mud-palette-surface) 80%, #C7D0DA));
    --swa-grad-2: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-surface) 70%, #E4E0D6), color-mix(in srgb, var(--mud-palette-surface) 80%, #D6CFBE));
    --swa-grad-3: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-surface) 70%, #DCE5DE), color-mix(in srgb, var(--mud-palette-surface) 80%, #C6D6CB));
    --swa-grad-4: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-surface) 70%, #E6DCE2), color-mix(in srgb, var(--mud-palette-surface) 80%, #D7C6D0));
}

/* Mobile density: compact spacing on phones; desktop keeps the roomy values. */
@media (max-width: 599.98px) {
    :root { --swa-gap: 10px; }
    .swa-page-container { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* Media heights for image cards. Global (not scoped) because the rules target the
   <img> rendered by MudImage, which never receives a component's scoped attribute. */
.search-card-media { width: 100%; height: 180px; object-fit: cover; display: block; }
.item-detail-photo { width: 100%; max-height: 320px; object-fit: cover; display: block; }

/* Item detail: constrain the whole view (header card, tab strip, panels) to ONE
   readable, centred column so the photo, tabs and field text share the same width
   instead of sprawling across a wide desktop screen. */
.item-detail-shell { max-width: 760px; margin-inline: auto; }

/* Responsive headings (app-wide). MudBlazor's default h3–h6 are oversized on phones,
   where page titles (Typo.h4: "Settings", "Sharing", "My Account", "Storage Locations")
   and the location name eat too much vertical space. Scale them down below 600px so they
   look proportionate; desktop keeps the full, roomy size. */
@media (max-width: 599.98px) {
    .mud-typography-h3 { font-size: 1.75rem; line-height: 1.2; }
    .mud-typography-h4 { font-size: 1.5rem;  line-height: 1.25; }
    .mud-typography-h5 { font-size: 1.25rem; line-height: 1.3; }
    .mud-typography-h6 { font-size: 1.1rem;  line-height: 1.35; }
}

@media (max-width: 599.98px) {
    /* Search results: shorter media so two compact cards fit per row on phones. */
    .search-card-media { height: 120px; }
    /* Item detail: smaller hero photo so the data below is reachable without scrolling. */
    .item-detail-photo { max-height: 200px; }
    /* Item detail: denser field text on phones (global because the rules target the
       classes MudText renders, which never receive a component's scoped attribute). */
    .item-detail-card .mud-typography-body1 { font-size: 0.9rem; line-height: 1.45; }
    .item-detail-card .mud-typography-overline { font-size: 0.65rem; }
    /* Share invite row: wrap (email on its own line, role + send below) instead of
       overflowing a narrow dialog. !important overrides MudStack's inline flex-wrap. */
    .swa-invite-row { flex-wrap: wrap !important; }
}

/* App bar tagline: full text collapses to "SWA" on small screens */
.swa-tagline {
    white-space: nowrap;
    opacity: 0.75;
    letter-spacing: 0.01em;
    font-size: 1.5em;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    line-height: 1;
}

.swa-tagline-short {
    font-weight: 700;
    flex-shrink: 0;
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
}

.swa-tagline-suffix {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    opacity: 1;
    font-weight: 400;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
}

/* MudBlazor Md breakpoint = 960px */
@media (max-width: 959.98px) {
    .swa-tagline-short {
        max-width: 80px;
        opacity: 1;
    }
    .swa-tagline-suffix {
        max-width: 0;
        opacity: 0;
    }
}

/* Logo: follow the AppBar text colour (SVG fill is hardcoded black).
   The appbar is light in light mode / near-black in dark mode, so binding to
   --mud-palette-appbar-text keeps the logo legible in both themes. */
.mud-appbar .swa-logo path {
    fill: var(--mud-palette-appbar-text);
}

/* Same for the drawer header logo, which sits outside .mud-appbar — without this
   the hardcoded-black SVG is near-invisible on the dark-mode drawer surface. */
.mud-drawer .swa-logo path {
    fill: var(--mud-palette-drawer-text);
}

/* Hero text — always white on the fixed navy hero gradient regardless of theme */
.hero-white-text {
    color: #FFFFFF !important;
}

/* CSS Grid wrapper: all 6 feature cards same height across all rows */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .feature-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

/* Feature cards: fill their grid cell completely */
.feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card .mud-card-content {
    flex: 1;
}

/* How It Works step avatar — centre in its column */
.how-step-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* Markdown rendered in AI chat bubbles */
.markdown-body { font-size: inherit; line-height: 1.6; }
.markdown-body p { margin: 0 0 0.5em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body code {
    font-family: monospace;
    font-size: 0.875em;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    padding: 2px 5px;
}
.markdown-body pre {
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.25em 0; }
.markdown-body li { margin: 0.1em 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 0.5em 0 0.25em; font-weight: 600; }
.markdown-body blockquote {
    border-left: 3px solid var(--mud-palette-divider);
    padding-left: 1em;
    margin: 0.5em 0;
    color: var(--mud-palette-text-secondary);
}
.markdown-body a { color: var(--mud-palette-primary); }
.markdown-body hr { border: none; border-top: 1px solid var(--mud-palette-divider); margin: 0.5em 0; }

/* ── Tab strip — shared by LocationTabs + ItemTabs ──────────────────────────
   These rules use the swa- prefix (global convention) and therefore belong in
   global CSS. They were originally scoped to LocationTabs.razor.css and are
   promoted here so ItemTabs (and future tab components) can share them without
   duplication. LocationTabs.razor.css retains only non-tab rules (none remain
   as of this change — the file is now empty except its comment header).      */

.swa-tab-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: 1px solid var(--swa-border);
    margin-bottom: var(--swa-gap);
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.swa-tab-strip::-webkit-scrollbar {
    display: none;
}

.swa-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--swa-muted);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .swa-tab {
        transition: none;
    }
}

.swa-tab:hover {
    color: var(--swa-ink);
    background-color: color-mix(in srgb, var(--swa-accent) 6%, transparent);
}

.swa-tab:focus-visible {
    outline: 2px solid var(--swa-accent-ring);
    border-radius: 4px 4px 0 0;
}

.swa-tab--active {
    color: var(--swa-accent);
    border-bottom-color: var(--swa-accent);
}

.swa-tab--active:hover {
    background-color: color-mix(in srgb, var(--swa-accent) 8%, transparent);
}

.swa-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--swa-radius-chip);
    background: var(--swa-accent-soft);
    color: var(--swa-accent);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.swa-tab--active .swa-tab__badge {
    background: var(--swa-accent);
    color: var(--swa-accent-text, #fff);
}

@media (max-width: 599.98px) {
    .swa-tab { padding: 8px 10px; font-size: 0.8125rem; gap: 4px; }
}

/* ── End tab strip ──────────────────────────────────────────────────────── */

/* ── Share-form density normalisation ───────────────────────────────────────
   Apply .swa-share-form to the root wrapper of any sharing panel/dialog.
   All outlined inputs (MudTextField, MudSelect, MudNumericField) and buttons
   inside are locked to exactly 40px so the row is visually uniform.

   MudBlazor 7.16 outlined-input DOM (Dense/no-label path):
     .mud-input-control                       ← flex column, margins
       .mud-input-control-input-container     ← inner container
         div.mud-input.mud-input-outlined     ← border wrapper
           .mud-input-slot.mud-input-root     ← the real <input> or select slot
                                                padding-top/bottom drive height

   With Margin.Dense (.mud-input-root-margin-dense): padding = 10.5px top+bottom.
   We override to 9px top+bottom so total = 9+20+9 = 38px content-box + 2*1px border = 40px.
   The input element's `box-sizing: content-box` means padding is OUTSIDE the font height.

   Buttons: MudBlazor default = 36px; we force 40px so they align with the inputs.
   ──────────────────────────────────────────────────────────────────────────── */

.swa-share-form .mud-input-control-input-container {
    /* Ensure the container itself doesn't collapse the input height */
    min-height: 40px;
}

/* The outlined border wrapper — lock total height to 40px */
.swa-share-form .mud-input.mud-input-outlined {
    min-height: 40px;
}

/* The actual input slot (content-box): override Dense padding so height = 9+~20px+9 = 38px + 2px border = 40px */
.swa-share-form .mud-input-slot.mud-input-root-outlined,
.swa-share-form div.mud-input-slot.mud-input-root-outlined {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 0.875rem;
    /* Keep left/right padding from MudBlazor (14px) */
}

/* For MudSelect the slot is a div, same rules apply */
.swa-share-form .mud-input-root-outlined.mud-input-root-margin-dense,
.swa-share-form div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 0.875rem;
}

/* MudSelect rendered text inside the input slot */
.swa-share-form .mud-select-input {
    font-size: 0.875rem;
}

/* Buttons: match input height exactly */
.swa-share-form .mud-button-root {
    height: 40px;
    min-height: 40px;
    font-size: 0.875rem;
}

/* Cap email field width so it doesn't stretch edge-to-edge in wide panels */
.swa-share-form .swa-email-field {
    max-width: 360px;
    flex: 1 1 200px;  /* shrink on mobile, grow up to max-width */
}

/* ── End share-form density normalisation ───────────────────────────────── */

/* Photo grid — shared by PhotosTabPanel + ItemPhotosTabPanel ──────────────
   Originally scoped to PhotosTabPanel.razor.css; promoted here so both panels
   share the rules without duplication (same approach used for the tab strip). */

.swa-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--swa-gap);
    margin-bottom: 1rem;
}

.swa-photo-tile {
    position: relative;
    border-radius: var(--swa-radius-card);
    overflow: hidden;
    box-shadow: var(--swa-shadow-card);
    background: var(--swa-surface);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .swa-photo-tile {
        transition: none;
    }
}

.swa-photo-tile:hover {
    box-shadow: var(--swa-shadow-card-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .swa-photo-tile:hover {
        transform: none;
    }
}

.swa-photo-tile__btn {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.swa-photo-tile:focus-within {
    outline: 2px solid var(--swa-accent-ring);
    outline-offset: 2px;
}

.swa-photo-tile__btn mud-image,
.swa-photo-tile__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swa-photo-tile__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--swa-surface);
}

.swa-photo-tile__overlay {
    position: absolute;
    top: 4px;
    display: flex;
    align-items: flex-start;
}

.swa-photo-tile__overlay--left {
    left: 4px;
}

.swa-photo-tile__overlay--right {
    right: 4px;
}

/* Translucent round backing keeps icons readable over any image.
   Min size = 44px × 44px to satisfy WCAG 2.5.5 touch-target. */
.swa-photo-tile__action-backing {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swa-photo-tile__action-backing .mud-icon-button {
    color: #ffffff !important;
    min-width: 44px;
    min-height: 44px;
}

.swa-photo-tile__overlay--left .mud-chip {
    margin: 0;
    height: auto;
    font-size: 0.7rem;
}

.swa-photo-tile__caption {
    padding: 4px 8px;
    font-size: 0.75rem;
    color: var(--swa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* ── End photo grid ─────────────────────────────────────────────────────── */

/* ── Empty-state — shared by Photos + Documents tab panels ──────────────── */
.swa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--mud-palette-text-secondary);
}

.swa-empty-state .mud-icon-root {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 4px;
}
/* ── End empty-state ─────────────────────────────────────────────────────── */

/* ── Own-vs-shared indicators (Locations sections, "shared by X") ─────────── */
/* The "My locations" / "Shared with me" headers carry their inter-section spacing
   via an mt-6 utility applied in Razor (only on the 2nd+ header), so no structural
   :first-of-type rule is needed here. This class is kept as a styling hook. */

/* "Shared by <name> (<email>)" attribution — let a long email wrap rather than
   overflow the card, and keep the row visually subordinate to the title. */
.swa-shared-by {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep the small "Shared" chip compact and aligned with the card title. */
.swa-shared-badge {
    height: 22px;
}
/* ── End own-vs-shared indicators ────────────────────────────────────────── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }