/* --- src/facility-v2.css ---
   Shared shell for facility-v2.html / facility-v2-chat.html. Visual language
   ported from C:\vestilla-portal (Tailwind v4 tokens in app/globals.css +
   hand-tuned brand colors used directly in its page markup) - see that
   project's app-shell/site-header/button/card conventions. This stylesheet
   is intentionally self-contained (no dependency on styles.css) so none of
   the dark facility-portal theme rules leak in here.

   Functional contract this file must not break: app.js (bundle.js) looks up
   #startButton/#endButton/#connectionStatus/#orbLabel/#categoryIcon/
   #speakingStatus by id and .avatar by class, and writes the
   --fm-accent/--fm-accent-dark/--fm-accent-rgb custom properties + the
   fm-category-icon/fm-icon-* class names directly onto these elements - all
   of those names are kept byte-for-byte so the existing bundle keeps working
   unmodified. */

* {
    box-sizing: border-box;
}

.fv-portal {
    margin: 0;
    min-height: 100vh;
    background: var(--fv-bg);
    color: var(--fv-fg);
    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Default accent (lime) shown until a live category guess overrides it -
       see applyCategoryTheme()/resetCategoryTheme() in app.js. */
    --fm-accent: #F3FF6B;
    --fm-accent-dark: #C7D400;
    --fm-accent-rgb: 243, 255, 107;
}

.fv-portal a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --fv-bg: #F5F3ED;
    --fv-fg: #1B241E;
    --fv-muted-fg: #74786F;
    --fv-primary: #173126;
    --fv-primary-2: #1F4030;
    --fv-lime: #F3FF6B;
    --fv-lime-hover: #EAFF47;
    --fv-lime-text: #152018;
    --fv-card: #FFFFFF;
    --fv-card-2: #ECE7DC;
    --fv-faint: #FAF9F5;
    --fv-border: #DAD7CA;
    --fv-chip-green: #E9F0E6;
    --fv-status-live-dot: #8BD76B;
    --fv-danger: #E5484D;
    --fv-danger-bg: rgba(229, 72, 77, 0.1);
    --fv-radius-sm: 0.75rem;
    --fv-radius-md: 1rem;
    --fv-radius-lg: 1.5rem;
    --fv-radius-xl: 1.75rem;
    --fv-radius-2xl: 2rem;
    --fv-shell-max: 1320px;
}

.fv-shell {
    width: min(100% - 2rem, var(--fv-shell-max));
    margin-inline: auto;
}

/* --- Header --- */

.fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0 14px;
}

.fv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--fv-fg);
}

.fv-brand img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    display: block;
}

.fv-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--fv-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04);
}

.fv-nav-link {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fv-muted-fg);
    transition: background 0.15s ease, color 0.15s ease;
}

.fv-nav-link:hover {
    color: var(--fv-fg);
}

.fv-nav-link.is-active {
    background: var(--fv-primary);
    color: #FFFFFF;
}

.fm-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Auth-modal.js injects a plain <a class="fm-header-pill"> for "My requests"
   once signed in (see renderUserBadge()) - it styles the sign-in card and
   the user badge/profile panel itself, but not this pill, so it needs a
   light-theme rule here or it renders unstyled. */
.fv-portal .fm-header-pill {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--fv-border);
    border-radius: 999px;
    color: var(--fv-fg);
    background: #FFFFFF;
    transition: border-color 0.15s ease;
}

.fv-portal .fm-header-pill:hover {
    border-color: var(--fv-primary);
}

/* facility-v2-header.js's renderPartnerLinks() ports the "Manage"/"Partners"
   links from vestilla-portal's site-header.tsx verbatim, Tailwind utility
   classes included, rather than renaming them to this file's own fv-/fm-
   convention - these are just enough of Tailwind's scale to match that
   markup, not a general-purpose utility set. */
.fv-portal .flex { display: flex; }
.fv-portal .items-center { align-items: center; }
.fv-portal .gap-1\.5 { gap: 0.375rem; }
.fv-portal .text-xs { font-size: 0.75rem; line-height: 1rem; }
.fv-portal .font-medium { font-weight: 500; }
.fv-portal .text-primary { color: var(--fv-primary); }
.fv-portal .min-h-11 { min-height: 2.75rem; }
.fv-portal .size-3\.5 { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.fv-portal .hover\:underline:hover { text-decoration: underline; }

/* --- Buttons --- */

.fv-portal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--fv-radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 22px;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.fv-portal .btn:active:not(:disabled) {
    transform: translateY(1px);
}

.fv-portal .btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.fv-portal .btn-primary {
    background: var(--fv-lime);
    color: var(--fv-lime-text);
    box-shadow: 0 10px 26px rgba(23, 49, 38, 0.16);
}

.fv-portal .btn-primary:hover:not(:disabled) {
    background: var(--fv-lime-hover);
}

.fv-portal .btn-primary:disabled {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: not-allowed;
}

.fv-portal .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--fv-primary);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.fv-portal .btn-secondary:not(:disabled):hover {
    background: #FFFFFF;
}

.fv-portal .btn-secondary:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
    cursor: not-allowed;
}

/* .btn-secondary's translucent-white border (see above) is meant for the
   dark call modal - on a white/light background that same border is nearly
   invisible. Use this instead for bordered buttons that sit on light
   backgrounds (e.g. "Switch to call" on /facility-v2-chat's white header). */
.fv-portal .btn-outline {
    background: #FFFFFF;
    color: var(--fv-fg);
    border: 1px solid var(--fv-border);
}

.fv-portal .btn-outline:hover:not(:disabled) {
    background: var(--fv-faint);
    border-color: var(--fv-primary);
}

.fv-portal .btn-glass {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
}

.fv-portal .btn-glass:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* --- Status badge (idle / connecting / live) --- */

.fv-portal .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.fv-portal .status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.fv-portal .status-badge.is-connecting {
    color: #F0C44F;
    border-color: rgba(240, 196, 79, 0.4);
    background: rgba(240, 196, 79, 0.1);
}

.fv-portal .status-badge.is-connecting::before {
    animation: fvBlink 1s ease-in-out infinite;
}

.fv-portal .status-badge.is-live {
    color: var(--fm-accent);
    border-color: rgba(var(--fm-accent-rgb), 0.5);
    background: rgba(var(--fm-accent-rgb), 0.12);
}

.fv-portal .status-badge.is-live::before {
    animation: fvBlink 1.4s ease-in-out infinite;
}

@keyframes fvBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* --- Voice orb / avatar --- */

.fv-orb {
    position: relative;
    flex: none;
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fv-orb-ring {
    position: absolute;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 1px solid rgba(var(--fm-accent-rgb), 0.4);
    animation: fvPulseRing 3.2s ease-out infinite;
}

.fv-orb-ring--2 {
    border-color: rgba(var(--fm-accent-rgb), 0.25);
    animation-delay: 1.6s;
}

@keyframes fvPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    70%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.fv-portal .avatar {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(var(--fm-accent-rgb), 0.5), rgba(255, 255, 255, 0.06) 62%);
    border: 1px solid rgba(var(--fm-accent-rgb), 0.4);
    box-shadow: 0 0 50px rgba(var(--fm-accent-rgb), 0.18), inset 0 0 28px rgba(var(--fm-accent-rgb), 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    animation: fvBreathe 4.5s ease-in-out infinite;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.fv-portal .avatar.speaking-mode {
    box-shadow: 0 0 70px rgba(var(--fm-accent-rgb), 0.32), inset 0 0 34px rgba(var(--fm-accent-rgb), 0.2);
    border-color: rgba(var(--fm-accent-rgb), 0.65);
}

@keyframes fvBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

.fv-orb-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    line-height: 1.5;
}

.fm-category-icon {
    width: 34px;
    height: 34px;
    color: var(--fm-accent);
    opacity: 1;
    transform: scale(1);
    transition: color 0.4s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin 0.3s ease;
}

.fm-category-icon:empty {
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.4);
}

.fm-category-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fm-icon-drip {
    animation: fvIconDrip 1.6s ease-in-out infinite;
}

@keyframes fvIconDrip {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(5px);
        opacity: 0.7;
    }
}

.fm-icon-flicker {
    animation: fvIconFlicker 1.1s steps(1, end) infinite;
}

@keyframes fvIconFlicker {

    0%,
    19%,
    21%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    55% {
        opacity: 0.3;
    }
}

.fm-icon-spin {
    animation: fvIconSpin 3.5s linear infinite;
}

@keyframes fvIconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fm-icon-sway {
    animation: fvIconSway 2.4s ease-in-out infinite;
    transform-origin: 50% 85%;
}

@keyframes fvIconSway {

    0%,
    100% {
        transform: rotate(-9deg);
    }

    50% {
        transform: rotate(9deg);
    }
}

.fm-icon-shake {
    animation: fvIconShake 0.5s ease-in-out infinite;
}

@keyframes fvIconShake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(-2px) rotate(-6deg);
    }

    75% {
        transform: translateX(2px) rotate(6deg);
    }
}

.fm-icon-pulse {
    animation: fvIconPulse 1.8s ease-in-out infinite;
}

@keyframes fvIconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* auth-modal.js unconditionally appends a second "My requests" pill into
   .fm-header-right on sign-in (see its renderUserBadge()) - both facility-v2
   pages already carry a permanent "My requests" link in .fv-nav, so the
   auto-injected duplicate is hidden here instead of edited out of
   auth-modal.js (which is shared with the dark facility.html/contact.html/
   chat.html, where that pill is still the only "My requests" link). */
.fv-portal .fm-header-right>a.fm-header-pill {
    display: none;
}

/* auth-modal.js also injects its own <style id="fm-auth-styles"> the first
   time it runs, hardcoding a dark theme for .fm-user-badge/.fm-user-widget/
   .fm-profile-panel (and everything inside the profile panel) - see that
   file's injectStyles(). These rules are scoped under .fv-portal so they win
   the cascade on these two pages only, without touching the shared file or
   the dark pages that still use its default styling. */
.fv-portal .fm-user-widget {
    position: relative;
}

.fv-portal .fm-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--fv-border);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05);
    color: var(--fv-fg);
    font-family: inherit;
    font-size: 13px;
}

.fv-portal .fm-user-badge:hover {
    border-color: var(--fv-primary);
}

.fv-portal .fm-user-name {
    display: inline-flex;
    align-items: center;
}

.fv-portal .fm-user-name::before {
    content: none;
}

.fv-portal .fv-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fv-chip-green);
    color: var(--fv-primary);
    font-size: 11px;
    font-weight: 700;
}

.fv-portal .fm-user-chevron {
    font-size: 10px;
    color: var(--fv-muted-fg);
}

/* facility-v2-header.js swaps the "▾" text glyph for a real SVG chevron
   (matching vestilla-portal's lucide ChevronDown) and adds this class -
   overrides the plain-text sizing above once that swap has happened. */
.fv-portal .fm-user-chevron.fv-user-chevron-icon {
    display: inline-flex;
    color: var(--fv-muted-fg);
}

.fv-portal .fm-user-chevron.fv-user-chevron-icon svg {
    width: 15px;
    height: 15px;
}

.fv-portal .fm-profile-panel {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-lg);
    box-shadow: 0 24px 48px rgba(20, 30, 20, 0.16);
    color: var(--fv-fg);
}

.fv-portal .fm-profile-head h3 {
    color: var(--fv-fg);
}

.fv-portal .fm-profile-close {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-profile-close:hover {
    color: var(--fv-fg);
}

.fv-portal .fm-profile-label {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-profile-value {
    color: var(--fv-fg);
}

.fv-portal .fm-profile-address-item {
    border: 1px solid var(--fv-border);
    background: var(--fv-faint);
    color: var(--fv-fg);
}

.fv-portal .fm-profile-btn-primary {
    background: var(--fv-primary);
    color: #FFFFFF;
}

.fv-portal .fm-profile-btn-secondary {
    background: var(--fv-faint);
    color: var(--fv-fg);
    border: 1px solid var(--fv-border);
}

.fv-portal .fm-profile-btn-danger {
    background: var(--fv-danger-bg);
    color: var(--fv-danger);
    border: 1px solid rgba(229, 72, 77, 0.3);
}

.fv-portal .fm-profile-add-address {
    border: 1px dashed var(--fv-border);
    color: var(--fv-muted-fg);
}

.fv-portal .fm-profile-loading {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-profile-address-fields input {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    color: var(--fv-fg);
}

.fv-portal .fm-profile-address-fields input::placeholder {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-profile-address-fields input:focus {
    border-color: var(--fv-primary);
    box-shadow: 0 0 0 3px rgba(23, 49, 38, 0.12);
}

.fv-portal .fm-profile-address-remove {
    background: var(--fv-danger-bg);
    color: var(--fv-danger);
}

/* The full-page profile form (facility-v2-profile.html, #fm-profile-root)
   reuses profile.js's .fm-auth-field/.fm-auth-status markup, which is also
   used by the dark sign-in overlay (auth-modal.js's own injected styles) -
   scoped to #fm-profile-root so the overlay keeps its own dark look. */
.fv-portal #fm-profile-root .fm-profile-card {
    padding: 28px;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-xl);
    background: #FFFFFF;
}

.fv-portal #fm-profile-root .fm-auth-field {
    margin-bottom: 16px;
    text-align: left;
}

.fv-portal #fm-profile-root .fm-auth-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--fv-muted-fg);
}

.fv-portal #fm-profile-root .fm-auth-field input {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    color: var(--fv-fg);
    font-family: inherit;
    font-size: 14.5px;
    padding: 11px 13px;
    border-radius: var(--fv-radius-sm);
    outline: none;
}

.fv-portal #fm-profile-root .fm-auth-field input::placeholder {
    color: var(--fv-muted-fg);
}

.fv-portal #fm-profile-root .fm-auth-field input:focus {
    border-color: var(--fv-primary);
    box-shadow: 0 0 0 3px rgba(23, 49, 38, 0.12);
}

.fv-portal #fm-profile-root .fm-auth-field input:disabled {
    opacity: 0.55;
}

.fv-portal #fm-profile-root .fm-auth-status {
    min-height: 0;
    font-size: 12.5px;
    text-align: left;
    border-radius: 9px;
}

.fv-portal #fm-profile-root .fm-auth-status:empty {
    display: none;
}

.fv-portal #fm-profile-root .fm-auth-status-error {
    margin: 4px 0 14px;
    padding: 10px;
    background: var(--fv-danger-bg);
    color: var(--fv-danger);
    border: 1px solid rgba(229, 72, 77, 0.3);
}

.fv-portal #fm-profile-root .fm-auth-status-success {
    margin: 4px 0 14px;
    padding: 10px;
    background: rgba(52, 199, 89, 0.12);
    color: #1E8E3E;
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.fv-portal #fm-profile-root .fm-profile-page-map {
    height: 320px;
    border-radius: var(--fv-radius-sm);
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--fv-border);
}

.fv-portal #fm-profile-root .fm-profile-address-row {
    margin-bottom: 16px;
}

.fv-portal #fm-profile-root .fm-profile-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.fv-portal #fm-profile-root .fm-profile-actions .fm-profile-btn {
    flex: 1;
}

/* auth-modal.js's sign-in/sign-up overlay (see its injectStyles()/
   buildOverlay()) is a dark card by default - it's appended straight onto
   <body>, so it's still a descendant of body.fv-portal on these pages and
   these scoped rules re-skin it to match facility-v2 without touching the
   shared file (which the dark facility.html/contact.html/chat.html still
   want in its default dark look). Markup/ids/behavior are all unchanged. */
.fv-portal .fm-auth-overlay {
    background: rgba(23, 49, 38, 0.55);
}

.fv-portal .fm-auth-card {
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-xl);
    background: #FFFFFF;
    box-shadow: 0 30px 70px rgba(20, 30, 20, 0.22);
    color: var(--fv-fg);
    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.fv-portal .fm-auth-tabs {
    background: var(--fv-faint);
}

.fv-portal .fm-auth-tab {
    color: var(--fv-muted-fg);
    font-family: inherit;
}

.fv-portal .fm-auth-tab.is-active {
    background: var(--fv-primary);
    color: #FFFFFF;
}

.fv-portal .fm-auth-heading {
    color: var(--fv-fg);
}

.fv-portal .fm-auth-sub {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-field label {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-field input {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    color: var(--fv-fg);
    font-family: inherit;
}

.fv-portal .fm-auth-field input::placeholder {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-field input:focus {
    border-color: var(--fv-primary);
    box-shadow: 0 0 0 3px rgba(23, 49, 38, 0.12);
}

.fv-portal .fm-auth-map {
    border: 1px solid var(--fv-border);
}

/* wireNearbyProperties()'s trigger button and its floating list (see
   auth-modal.js's injectStyles()) default to that file's dark theme - the
   near-transparent white-on-dark background/border/text were invisible
   against this light card, and the dropdown panel below it still rendered
   as a dark popup against the rest of this re-skinned form. */
.fv-portal .fm-auth-property-trigger {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    color: var(--fv-fg);
    font-family: inherit;
}

.fv-portal .fm-auth-property-trigger:hover:not(:disabled) {
    border-color: var(--fv-primary);
}

.fv-portal .fm-auth-property-trigger:focus,
.fv-portal .fm-auth-property-trigger.is-open {
    border-color: var(--fv-primary);
    box-shadow: 0 0 0 3px rgba(23, 49, 38, 0.12);
}

.fv-portal .fm-auth-property-trigger-label.is-placeholder {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-property-chevron {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-property-dropdown {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    box-shadow: 0 16px 34px rgba(20, 30, 20, 0.18);
}

.fv-portal .fm-auth-property-option {
    color: var(--fv-fg);
    border-top: 1px solid var(--fv-border);
    font-family: inherit;
}

.fv-portal .fm-auth-property-dropdown .fm-auth-property-option:first-of-type {
    border-top: none;
}

.fv-portal .fm-auth-property-option:hover,
.fv-portal .fm-auth-property-option:focus {
    background: var(--fv-faint);
}

.fv-portal .fm-auth-property-option.is-active {
    background: rgba(23, 49, 38, 0.08);
}

.fv-portal .fm-auth-property-option small {
    color: var(--fv-muted-fg);
}

.fv-portal .fm-auth-property-empty {
    color: var(--fv-muted-fg);
}

/* wireApartmentField()'s <select> (see auth-modal.js's injectStyles())
   defaults to that file's dark theme too - same near-invisible
   white-on-dark fill/border problem the property trigger above had. */
.fv-portal .fm-auth-unit-select {
    background: #FFFFFF;
    border: 1px solid var(--fv-border);
    color: var(--fv-fg);
    font-family: inherit;
}

.fv-portal .fm-auth-unit-select:hover {
    border-color: var(--fv-primary);
}

.fv-portal .fm-auth-unit-select:focus {
    border-color: var(--fv-primary);
    box-shadow: 0 0 0 3px rgba(23, 49, 38, 0.12);
}

.fv-portal .fm-auth-unit-select:disabled {
    color: var(--fv-muted-fg);
    background: var(--fv-faint);
    border-color: var(--fv-border);
}

.fv-portal .fm-auth-unit-select option {
    color: var(--fv-fg);
}

.fv-portal .fm-auth-status-error {
    background: var(--fv-danger-bg);
    color: var(--fv-danger);
    border: 1px solid rgba(229, 72, 77, 0.3);
}

.fv-portal .fm-auth-status-success {
    background: rgba(52, 199, 89, 0.12);
    color: #1E8E3E;
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.fv-portal .fm-auth-submit {
    background: var(--fv-lime);
    color: var(--fv-lime-text);
    font-family: inherit;
    box-shadow: 0 10px 26px rgba(23, 49, 38, 0.16);
}

.fv-portal .fm-auth-submit:hover:not(:disabled) {
    background: var(--fv-lime-hover);
    box-shadow: 0 10px 26px rgba(23, 49, 38, 0.16);
}

.fv-portal .fm-auth-skip {
    color: var(--fv-muted-fg);
    font-family: inherit;
}

.fv-portal .fm-auth-skip:hover {
    color: var(--fv-fg);
}

/* Pagination dots for address rotation (see FVAddressCycle.renderDots() in
   facility-v2-header.js) - one dot per saved address; hidden entirely
   (.is-visible not added) for an account with zero/one address, since
   there's nothing to page through. Default look suits a dark photo overlay
   (hero background, property-card photo); facility-v2-my-requests.html's
   text-only kicker overrides the colors for its light background - see that
   page's own <style> block. */
.fv-dots {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
}

.fv-dots.is-visible {
    display: flex;
}

.fv-page-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fv-page-dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

.fv-page-dot.is-active {
    background: var(--fv-lime);
    transform: scale(1.3);
}

/* --- Generic panels --- */

.fv-card {
    border-radius: var(--fv-radius-xl);
    border: 1px solid var(--fv-border);
    background: var(--fv-card);
    padding: 24px;
}

.fv-card-dark {
    border-radius: var(--fv-radius-xl);
    background: var(--fv-primary);
    color: #FFFFFF;
    padding: 24px;
}

/* --- Footer --- */

.fv-footer {
    border-top: 1px solid var(--fv-border);
    padding: 22px 0 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--fv-muted-fg);
}

.fv-footer a:hover {
    color: var(--fv-fg);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .fv-header {
        justify-content: center;
    }

    .fv-nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}