/* Shared Chamba.Ui styles.
   Semantic classes that replace repeated inline styles across pages. */

/* Nunito bundled locally (variable weight) for full offline support in MAUI. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Nunito-Variable.ttf') format('truetype');
}

.chamba-clickable {
    cursor: pointer;
}

.chamba-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.chamba-card-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--mud-default-borderradius);
}

.chamba-listing-card-link,
.chamba-saved-listing-link,
.chamba-hidden-listing-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.chamba-listing-card-link:focus-visible,
.chamba-saved-listing-link:focus-visible,
.chamba-hidden-listing-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--mud-default-borderradius);
}

.chamba-saved-listing-link > * {
    display: block;
}

/* Let vertical drags that begin on a listing photo scroll the page.
   MudCarousel's root/swipe wrapper elements otherwise capture the gesture,
   so force pan-y across the whole carousel subtree (inline styles on the
   inner divs don't reach these MudBlazor-generated wrapper elements). */
.chamba-carousel,
.chamba-carousel .mud-carousel-swipe,
.chamba-carousel .mud-carousel-item,
.chamba-carousel .mud-carousel-item img {
    touch-action: pan-y !important;
}

/* Brand wordmark used in the app bar and drawer header */
.chamba-wordmark {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chamba-brand-tj {
    --chamba-tj-deep-purple: #332051;
    --chamba-tj-lavender: #A987D8;
    --chamba-tj-light-background: #F6F2FA;
    --chamba-tj-dark-background: #272230;
    --chamba-tj-sunrise-gold: #F4BF45;
}

.chamba-header-logo {
    display: block;
    width: auto;
    max-width: clamp(168px, 42vw, 280px);
    max-height: 52px;
    object-fit: contain;
}

.chamba-brand-tj .chamba-header-logo {
    max-height: 48px;
}

.chamba-settings-select {
    margin-top: 0.25rem;
}

/* Semantic typography colors are too light for normal text on light surfaces.
   Keep component fills, icons and dark-theme colors on the MudBlazor palette. */
.chamba-theme-light.chamba-brand-tj .mud-typography.mud-warning-text {
    color: #8A4B00 !important;
}

.chamba-theme-light.chamba-brand-tj .mud-typography.mud-info-text {
    color: #005A9C !important;
}

.chamba-theme-light.chamba-brand-tj .mud-typography.mud-secondary-text {
    color: #595959 !important;
}

.chamba-theme-light.chamba-brand-tj .mud-typography.mud-primary-text {
    color: #8055A6 !important;
}

.chamba-theme-dark.chamba-brand-tj .mud-typography.mud-primary-text,
.chamba-theme-dark.chamba-brand-tj .mud-typography.mud-info-text {
    color: var(--chamba-tj-lavender) !important;
}

.chamba-theme-dark.chamba-brand-tj .mud-typography.mud-warning-text {
    color: var(--chamba-tj-sunrise-gold) !important;
}

.chamba-theme-dark.chamba-brand-tj .mud-typography.mud-secondary-text {
    color: #D4C8E2 !important;
}

/* Home hero band */
.chamba-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: #fff;
}

.chamba-hero-logo {
    display: block;
    width: auto;
    max-width: min(100%, 560px);
    max-height: 180px;
    object-fit: contain;
}

.chamba-brand-tj .chamba-hero-logo {
    max-height: 150px;
}

.chamba-hero-fallback-title {
    color: #fff;
    font-weight: 700;
    margin: 0 0 4px;
}

.chamba-hero-icon {
    color: #fff;
    opacity: 0.95;
}

.chamba-hero-title {
    color: #fff;
    font-weight: 700;
}

.chamba-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.chamba-brand-tj .chamba-header-logo-tj-dark-variant,
.chamba-brand-tj .chamba-hero-logo-tj-dark-variant {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.chamba-theme-light.chamba-brand-tj .chamba-drawer-logo-tj-dark-variant {
    filter: brightness(0) saturate(100%) invert(13%) sepia(44%) saturate(1858%) hue-rotate(230deg) brightness(88%) contrast(110%);
}

.chamba-theme-dark.chamba-brand-tj .chamba-hero {
    background: linear-gradient(135deg, var(--chamba-tj-dark-background), var(--chamba-tj-deep-purple));
    color: #F6F2FA;
}

.chamba-theme-dark.chamba-brand-tj .chamba-hero-subtitle,
.chamba-theme-dark.chamba-brand-tj .chamba-hero-fallback-title {
    color: #F6F2FA;
}

@media (max-width: 599.95px) {
    .chamba-main-appbar {
        min-height: 58px;
    }

    .chamba-main-appbar .mud-toolbar {
        min-height: 58px;
    }

    .chamba-header-logo {
        max-width: min(calc(100vw - 160px), 240px);
        max-height: 52px;
    }

    .chamba-brand-tj .chamba-header-logo {
        max-height: 44px;
    }

    .chamba-hero {
        padding: 10px 12px 12px;
    }

    .chamba-hero-logo {
        max-width: 100%;
        max-height: 110px;
    }

    .chamba-brand-tj .chamba-hero-logo {
        max-height: 100px;
    }
}

/* Friendly empty state for list pages */
.chamba-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    color: var(--mud-palette-text-secondary);
}

.chamba-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 56px;
    color: var(--mud-palette-text-disabled);
}

/* Consistent, responsive treatment for clickable cards.
   Scoped to MudCard so inner clickable elements (div/label/summary) are unaffected. */
.mud-card.chamba-clickable {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mud-card.chamba-clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--mud-elevation-8);
}

/* Keep the pressed feedback snappy on touch/click */
.mud-card.chamba-clickable:active {
    transform: translateY(-1px);
}

/* Category / type selector tile card content */
.chamba-type-card-content {
    padding: 6px !important;
    min-height: 68px;
    justify-content: center;
}

/* Small label text used inside category tiles */
.chamba-type-label {
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
}

/* Count badge inside category tiles. Larger, bolder and high-contrast so the
   number stays readable on small phone screens. Uses a light tinted background
   with dark green text (instead of white-on-green) for stronger legibility. */
.chamba-type-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--mud-palette-success-hover, rgba(46, 125, 50, 0.14));
    color: var(--mud-palette-success-darken, #1b5e20);
    border: 1px solid var(--mud-palette-success-darken, #1b5e20);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Reusable compact horizontal strip for listing-kind filters/chips. */
.chamba-listing-kind-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.chamba-listing-kind-strip__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 0.5rem;
    padding: 0.15rem 0 0.5rem;
}

.chamba-listing-kind-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.chamba-listing-kind-chip:hover {
    border-color: var(--mud-palette-primary);
}

.chamba-listing-kind-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.chamba-listing-kind-chip.is-selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.chamba-listing-kind-chip__count {
    font-size: 0.75rem;
    opacity: 0.8;
}

.chamba-listing-category-select {
    width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
}

.chamba-listing-category-select .mud-input-control {
    max-width: 100%;
}

.chamba-listing-selector__toggle {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.chamba-listing-selector__toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.chamba-listing-selector__summary,
.chamba-listing-selector__selected-kind,
.chamba-listing-type-selector__option {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.chamba-listing-selector__summary {
    flex-wrap: wrap;
}

.chamba-listing-selector__title {
    font-weight: 600;
}

.chamba-listing-selector__selected-kind {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.chamba-listing-selector__content {
    padding: 10px 4px 0;
}

.chamba-listing-selector__content[hidden] {
    display: none !important;
}

.chamba-listing-type-selector__option {
    min-height: 48px;
}

/* Highlight border for the currently selected category tile */
.chamba-type-card--active {
    border: 2px solid var(--mud-palette-primary);
}

/* Sticky back-button / page header that stays visible while scrolling.
   Pins just below the fixed MudAppBar. The box is pulled up under the app bar
   (which has a higher z-index and covers the overlap) via extra top padding and
   a matching negative top offset, so the background always meets the app bar
   with no visible gap, even if the app bar height varies slightly. Negative
   horizontal margins span the container padding so the background covers
   content scrolling underneath. */
.chamba-sticky-header {
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) - 8px);
    z-index: 20;
    background: var(--mud-palette-background);
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px 16px 8px;
}

/* MudAppBar is 56px tall on small screens. */
@media (max-width: 599.95px) {
    .chamba-sticky-header {
        top: calc(var(--mud-appbar-height, 56px) - 8px);
    }
}

/* Listing detail table: keep the label column on one line. */
.chamba-detail-table td:first-child {
    white-space: nowrap;
    width: 1%;
    padding-right: 16px;
    vertical-align: top;
}

/* Customer community multi-select picker */
.chamba-community-picker {
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    min-width: 0;
}

.chamba-community-picker__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chamba-community-picker__header h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.chamba-community-picker__toggle {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.chamba-community-picker__toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.chamba-community-picker__content[hidden] {
    display: none !important;
}

.chamba-community-picker__counter {
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
}

.chamba-community-picker__search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chamba-community-picker__label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.chamba-community-picker__search input {
    flex: 1 1 200px;
    min-width: 0;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--mud-palette-text-secondary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.chamba-community-picker__clear,
.chamba-community-picker__remove {
    min-height: 48px;
    min-width: 48px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 8px;
    font: inherit;
    cursor: pointer;
}

.chamba-community-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
}

.chamba-community-picker__remove {
    flex-shrink: 0;
    border: 0;
    font-size: 1.5rem;
}

.chamba-community-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

.chamba-community-picker__results {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    min-width: 0;
    padding: 0 8px 8px;
}

.chamba-community-picker__results legend {
    font-size: 0.875rem;
    padding: 0 4px;
    width: auto;
}

.chamba-community-picker__option input {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    accent-color: var(--mud-palette-primary);
}

.chamba-community-picker__selection-state {
    margin-left: auto;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.chamba-community-picker__option {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    min-height: 56px;
    overflow-wrap: anywhere;
}

.chamba-community-picker__option.is-selected {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 3px 0 var(--mud-palette-primary);
}

.chamba-community-picker input:focus-visible,
.chamba-community-picker button:focus-visible,
.chamba-community-picker__option:hover,
.chamba-community-picker__option:focus-within {
    background: var(--mud-palette-action-default-hover);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

@media (max-width: 599.95px) {
    .chamba-community-picker__results {
        max-height: 200px;
    }
}

/* Pull-to-refresh gesture */
html.chamba-listing-editor-active {
    overscroll-behavior-y: contain;
}

.ptr-container {
    position: relative;
}

.ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.15s ease-out, opacity 0.15s ease-out;
}

.ptr-indicator.ptr-spinning {
    transition: none;
}

/* One-time essential-storage notice pinned to the bottom of the viewport. */
.chamba-storage-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ *
 * Suspension notices (global banner + shared inline-warning palette)
 * High-contrast accessible amber: light amber background (#FFF3D6)
 * with dark charcoal-brown text (#4A3209). Measured contrast ratio
 * ~10.4:1 for body text and the bold title, well above WCAG AA 4.5:1.
 * Scoped to suspension notices so unrelated MudAlerts are unaffected.
 * ------------------------------------------------------------------ */
.chamba-suspension-notice {
    max-width: 900px;
    margin: 8px auto;
}

.chamba-suspension-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    background-color: #FFF3D6;
    border: 1px solid #E0A400;
    border-left: 4px solid #B36B00;
    border-radius: 8px;
    padding: 14px 16px;
    color: #4A3209;
}

.chamba-suspension-notice__icon {
    color: #B36B00;
    flex: 0 0 auto;
    margin-top: 2px;
}

.chamba-suspension-notice__body {
    flex: 1 1 220px;
    min-width: 0;
}

.chamba-suspension-notice__title {
    margin: 0 0 2px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #3A2707;
}

.chamba-suspension-notice__until {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #4A3209;
}

.chamba-suspension-notice__detail {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4A3209;
}

.chamba-suspension-notice__link.mud-button-root {
    flex: 0 0 auto;
    align-self: center;
    color: #7A4A00;
    font-weight: 600;
}

.chamba-suspension-notice__link.mud-button-root:hover {
    background-color: rgba(179, 107, 0, 0.12);
    color: #5E3900;
}

.chamba-suspension-notice__link.mud-button-root:focus-visible {
    outline: 2px solid #B36B00;
    outline-offset: 2px;
}

/* Narrow phones (~300-375px): stack the link below the text and let it
   span the full width so nothing is clipped. */
@media (max-width: 420px) {
    .chamba-suspension-notice__inner {
        flex-direction: column;
    }

    .chamba-suspension-notice__link.mud-button-root {
        align-self: flex-start;
    }
}

/* Shared inline suspension warnings (dashboard, listing details, create
   listing). Applies the same accessible amber palette to the scoped
   MudAlert without affecting other alerts. */
.mud-alert.chamba-suspension-inline {
    background-color: #FFF3D6;
    border: 1px solid #E0A400;
    border-left: 4px solid #B36B00;
    color: #4A3209;
}

.mud-alert.chamba-suspension-inline .mud-alert-icon,
.mud-alert.chamba-suspension-inline .mud-icon-root {
    color: #B36B00;
}

.mud-alert.chamba-suspension-inline .mud-alert-message,
.mud-alert.chamba-suspension-inline h2 {
    color: #4A3209;
}