/* /Components/Admin/ActivityLogFilters.razor.rz.scp.css */
/* Admin activity-log filter control (Phase 04.12 / D-06 … D-09).

   The class vocabulary and geometry are copied VALUE FOR VALUE from
   Components/Admin/Staff/StaffRosterFilters.razor.css — the search field, the round filter pill
   and its count badge, the active-filter chips, "Clear all", the count line and the whole sheet.
   That includes its control type tiers (11/700, 12/600, 12/400, 13/500, 13/600, 13/400, 14/500,
   16/500) and its off-scale paddings, which the UI contract sanctions for THIS component and only
   this component: D-06 exists because the admin already knows this control from /admin/staff, and
   re-authoring it to the base scale would produce two filter bars that read as different things.

   Gold #CEB185 appears here only as the active-filter count badge and as hover/focus borders. An
   active preset or option chip is INK #201F1D with white text — the documented admin convention.
   Gold is the CTA colour, never a state fill. Never a stock Bootstrap .btn-primary.

   ::deep themes the Radzen dropdown and date-picker children, which otherwise render in the stock
   Radzen palette and read as foreign here. */

.activity-filters[b-drhbpbrjea] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

/* ── Search row ── */
.roster-searchrow[b-drhbpbrjea] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: 'Montserrat', sans-serif;
}

.roster-search[b-drhbpbrjea] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    /* Capped so the field stays a search box on a wide desktop rather than stretching the width of
       the feed underneath it. */
    max-width: 420px;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
}

.roster-search:focus-within[b-drhbpbrjea] {
    border-color: #B89970;
}

.roster-search__icon[b-drhbpbrjea] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: 0.7;
}

.roster-search__input[b-drhbpbrjea] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
}

.roster-search__input[b-drhbpbrjea]::placeholder {
    color: #A8A29A;
}

/* Hide the WebKit clear affordance — it lands on top of the rounded border, and there is already a
   removable chip for the chosen person. */
.roster-search__input[b-drhbpbrjea]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Names the group and the dropdowns for assistive tech without occupying layout. */
.activity-visually-hidden[b-drhbpbrjea] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Person suggestion popover (D-07) ── */
.activity-picker[b-drhbpbrjea] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    /* Above the admin chrome (sidebar rail 1000, its phone drawer 1100, the fixed hamburger 1200)
       but below Radzen's own popups, which its JS pins at 2000. */
    z-index: 1250;
    max-height: 320px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(32, 31, 29, 0.18);
    padding: 4px;
}

.activity-picker__item[b-drhbpbrjea] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #201F1D;
    cursor: pointer;
}

.activity-picker__item:hover[b-drhbpbrjea] {
    background: #F7F5F2;
}

.activity-picker__item:focus-visible[b-drhbpbrjea] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
}

.activity-picker__name[b-drhbpbrjea] {
    min-width: 0;
    word-break: break-word;
}

/* The role is what separates two people who share a name, so it is never dropped — only ever
   degraded to its raw stored code. */
.activity-picker__role[b-drhbpbrjea] {
    color: #6B6660;
    flex: 0 0 auto;
}

.activity-picker__empty[b-drhbpbrjea],
.activity-picker__hint[b-drhbpbrjea] {
    margin: 0;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #6B6660;
}

/* The cap is stated rather than hidden: a silently truncated list shows a subset as if it were
   the whole. */
.activity-picker__hint[b-drhbpbrjea] {
    border-top: 1px solid #E8E5E0;
}

/* ── Filter pill ── */
.roster-filter-pill[b-drhbpbrjea] {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #E8E5E0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.roster-filter-pill:hover[b-drhbpbrjea] {
    background: #E0D2B8;
}

.roster-filter-pill:focus-visible[b-drhbpbrjea] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.roster-filter-pill img[b-drhbpbrjea] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Active fill is ink, matching the preset chips — gold is the CTA colour, not a state. */
.roster-filter-pill--on[b-drhbpbrjea] {
    background: #201F1D;
}

.roster-filter-pill--on img[b-drhbpbrjea] {
    filter: invert(1);
}

/* Count badge. The button's aria-label already carries "(3 active)", so this is aria-hidden. */
.roster-filter-pill__n[b-drhbpbrjea] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #CEB185;
    color: #201F1D;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── Inline dropdowns / presets: the >= 1280px tier ──
   Below 1280 the feed itself is already a card list, and three dropdowns beside a search box in a
   ~528-784px content column wrap into a wall. They live in the sheet instead, which is exactly the
   pattern the staff roster uses at every width. */
.activity-filters__inline[b-drhbpbrjea],
.activity-presets[b-drhbpbrjea] {
    display: none;
}

@media (min-width: 1280px) {
    .activity-filters__inline[b-drhbpbrjea] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .activity-presets[b-drhbpbrjea] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
    }

    /* The sheet is the narrow-tier surface; at this width the pill is redundant. */
    .roster-filter-pill[b-drhbpbrjea] {
        display: none;
    }
}

.activity-field[b-drhbpbrjea] {
    flex: 1 1 180px;
    min-width: 0;
}

/* ── Date presets (D-09) ── */
.activity-preset[b-drhbpbrjea] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.activity-preset:hover[b-drhbpbrjea] {
    border-color: #CEB185;
}

.activity-preset:focus-visible[b-drhbpbrjea] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.activity-preset--active[b-drhbpbrjea] {
    background: #201F1D;
    border-color: #201F1D;
    color: #FFFFFF;
}

.activity-custom[b-drhbpbrjea] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.activity-custom__dash[b-drhbpbrjea] {
    color: #8A857D;
}

/* An inverted range is refused at the control and fires no query at all. */
.activity-range-error[b-drhbpbrjea] {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: #C0392B;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Chips + count ── */
.roster-meta[b-drhbpbrjea] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    font-family: 'Montserrat', sans-serif;
}

.roster-count[b-drhbpbrjea] {
    margin: 0;
    font-size: 13px;
    color: #6B6660;
}

/* Active-filter chips.
   Deliberately NOT the pill vocabulary: a pill means "switch view", and these mean "a value is in
   force, drop it". They WRAP onto further lines and push the feed down — never a horizontal
   scroller and never a "+N more" collapse, because a chip an admin cannot see is a filter they
   forget is on, which is the exact confusion this row exists to prevent. */
.filter-chips[b-drhbpbrjea] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-chip[b-drhbpbrjea] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Asymmetric on purpose: the right side is tightened to seat the × inside its own tap target. */
    padding: 4px 6px 4px 12px;
    border-radius: 24px;
    border: 1px solid #E8E5E0;
    background: #F7F5F2;
    color: #201F1D;
    font-size: 13px;
    font-weight: 500;
    max-width: 100%;
    word-break: break-word;
}

/* Padding + negative margin gives the × a 44px hit area without visually inflating the chip. */
.filter-chip__x[b-drhbpbrjea] {
    border: 0;
    background: transparent;
    color: #6B6660;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 14px;
    margin: -14px -8px -14px -14px;
}

.filter-chip__x:hover[b-drhbpbrjea] {
    color: #201F1D;
}

.filter-chip__x:focus-visible[b-drhbpbrjea] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
    border-radius: 50%;
}

.filter-clear[b-drhbpbrjea] {
    border: 0;
    background: transparent;
    color: #6B6660;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    min-height: 44px;
    padding: 0 8px;
}

.filter-clear:hover[b-drhbpbrjea] {
    color: #201F1D;
}

/* ── Sheet ── */
.filter-sheet-backdrop[b-drhbpbrjea] {
    position: fixed;
    inset: 0;
    /* Above every piece of admin chrome (rail 1000, phone drawer 1100, fixed hamburger 1200) and
       still below Radzen's popups at 2000, so the dropdowns open over the sheet, not behind it. */
    z-index: 1300;
    background: rgba(32, 31, 29, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.filter-sheet[b-drhbpbrjea] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 12px 40px rgba(32, 31, 29, 0.25);
}

.filter-sheet__head[b-drhbpbrjea] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #E8E5E0;
}

.filter-sheet__title[b-drhbpbrjea] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.filter-sheet__close[b-drhbpbrjea] {
    position: absolute;
    left: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.filter-sheet__close img[b-drhbpbrjea] {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.filter-sheet__close:focus-visible[b-drhbpbrjea],
.filter-sheet__clear:focus-visible[b-drhbpbrjea],
.filter-sheet__apply:focus-visible[b-drhbpbrjea] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.filter-sheet__clear[b-drhbpbrjea] {
    position: absolute;
    right: 12px;
    border: 0;
    background: transparent;
    color: #CEB185;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    padding: 0 4px;
}

.filter-sheet__clear:hover[b-drhbpbrjea] {
    color: #B89970;
}

.filter-sheet__body[b-drhbpbrjea] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px;
}

.filter-sheet__divider[b-drhbpbrjea] {
    height: 1px;
    background: #E8E5E0;
    margin: 18px 0;
}

.filter-field[b-drhbpbrjea] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 16px;
}

.filter-label[b-drhbpbrjea] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-options[b-drhbpbrjea] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Sticky so Apply is reachable without scrolling past the facets. */
.filter-sheet__foot[b-drhbpbrjea] {
    flex-shrink: 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E8E5E0;
    background: #FFFFFF;
}

.filter-sheet__apply[b-drhbpbrjea] {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: #201F1D;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-sheet__apply:hover[b-drhbpbrjea] {
    background: #3A3835;
}

.filter-sheet__apply:disabled[b-drhbpbrjea] {
    background: #A8A29A;
    cursor: not-allowed;
}

/* Below 520 the sheet goes full-bleed — a centred card with 24px of backdrop either side wastes
   the width a phone hasn't got. */
@media (max-width: 519px) {
    .filter-sheet-backdrop[b-drhbpbrjea] {
        padding: 0;
        align-items: stretch;
    }

    .filter-sheet[b-drhbpbrjea] {
        max-width: none;
        border-radius: 0;
    }

    .filter-sheet__head[b-drhbpbrjea] {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
}

/* ── Radzen children ──
   Stock Radzen inputs are blue-accented and 4px-radius; bring them onto the brand. */
.filter-sheet[b-drhbpbrjea]  .rz-dropdown,
.filter-sheet[b-drhbpbrjea]  .rz-datepicker,
.filter-sheet[b-drhbpbrjea]  .rz-textbox,
.activity-field[b-drhbpbrjea]  .rz-dropdown,
.activity-custom[b-drhbpbrjea]  .rz-datepicker,
.activity-custom[b-drhbpbrjea]  .rz-textbox {
    min-height: 44px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    width: 100%;
    min-width: 0;
}

.filter-sheet[b-drhbpbrjea]  .rz-dropdown:not(.rz-state-disabled):hover,
.filter-sheet[b-drhbpbrjea]  .rz-datepicker:hover,
.activity-field[b-drhbpbrjea]  .rz-dropdown:not(.rz-state-disabled):hover,
.activity-custom[b-drhbpbrjea]  .rz-datepicker:hover {
    border-color: #CEB185;
}

.filter-sheet[b-drhbpbrjea]  .rz-dropdown.rz-state-focused,
.filter-sheet[b-drhbpbrjea]  .rz-textbox:focus,
.activity-field[b-drhbpbrjea]  .rz-dropdown.rz-state-focused,
.activity-custom[b-drhbpbrjea]  .rz-textbox:focus {
    outline: none;
    border-color: #CEB185;
    box-shadow: none;
}

.activity-custom[b-drhbpbrjea]  .rz-datepicker {
    flex: 0 0 200px;
    width: 200px;
}
/* /Components/Admin/AdminSidebar.razor.rz.scp.css */
/* Desktop default: sidebar visible at left, hamburger hidden */
.admin-sidebar[b-pi76cg8jcy] {
    width: 240px;
    /* 100dvh, not 100vh. On mobile Safari 100vh is the viewport with the URL bar HIDDEN, so a
       fixed, top-anchored, overflow:hidden box measured that way runs 60-90px past the bottom of
       what you can actually see — and nothing in it can be scrolled into view. That put the pinned
       log-out footer off-screen entirely on a phone, which is the likeliest reason a tester
       reported not being able to find it. dvh tracks the CURRENT visible height. The 100vh line
       stays as the fallback for browsers without dvh; they were never the broken case. */
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    background: #FFFFFF;
    border-right: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* the nav scrolls, not the shell — keeps the footer pinned */
    z-index: 1000;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.admin-sidebar__brand[b-pi76cg8jcy] {
    padding: 20px 16px;
    border-bottom: 1px solid #E5E5E5;
    flex: 0 0 auto;
}
.admin-sidebar__brand img[b-pi76cg8jcy] {
    height: 28px;
    max-width: 100%;
    width: auto;
    display: block;
}

.admin-sidebar__nav[b-pi76cg8jcy] {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* The account + log-out zone. Set on a tinted surface so the block reads as a distinct region of
   the sidebar rather than as two more rows of the nav list above it. */
.admin-sidebar__footer[b-pi76cg8jcy] {
    flex: 0 0 auto;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E5E5E5;
    background: #FAF7F1;
}

.admin-sidebar__account[b-pi76cg8jcy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 10px;
    min-width: 0;               /* lets the ellipsis below actually engage */
}

.admin-sidebar__account-avatar[b-pi76cg8jcy] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #CEB185;
    color: #201F1D;             /* dark on gold — the brand's legible pairing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-sidebar__account-text[b-pi76cg8jcy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.admin-sidebar__account-name[b-pi76cg8jcy] {
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar__account-email[b-pi76cg8jcy] {
    font-size: 11px;
    color: #6B6660;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deliberately NOT the gold accent, despite gold being the app's primary button fill.
   Three reasons: gold #CEB185 carries only 2.05:1 against white text, so the "gold fill, white
   text" pairing is unreadable and the brand's own rule is dark-on-gold; gold already means
   "current page" one row above, so a gold block here would read as an active nav item; and it
   would make ending your session the loudest, most inviting target on an iPad rail. What makes a
   control findable is having a SHAPE the eye can catch — a bordered box among flat text rows —
   with colour reserved to confirm the choice on hover. */
.admin-sidebar__logout[b-pi76cg8jcy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;           /* iOS minimum touch target */
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #DED5C8;
    border-radius: 8px;
    color: #201F1D;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-sidebar__logout-icon[b-pi76cg8jcy] {
    display: inline-flex;
    color: #B33A3A;             /* matches the staff header's logout item */
    transition: color 0.15s ease;
}

.admin-sidebar__logout:hover[b-pi76cg8jcy],
.admin-sidebar__logout:focus-visible[b-pi76cg8jcy] {
    background: #FDF4F3;
    border-color: #B33A3A;
    color: #B33A3A;
}

.admin-sidebar__logout:focus-visible[b-pi76cg8jcy] {
    outline: 2px solid #B33A3A;
    outline-offset: 2px;
}

/* Recessive on purpose. It has to be READABLE when someone goes looking for it, and invisible
   the rest of the time — an admin rail is not the place to advertise a commit hash. */
.admin-sidebar__build[b-pi76cg8jcy] {
    display: block;
    padding: 8px 4px 0;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #9A948B;
    text-align: center;
    user-select: all;               /* one tap selects the whole SHA for pasting */
}

.admin-sidebar__leaf[b-pi76cg8jcy],
.admin-sidebar__parent[b-pi76cg8jcy] {
    display: block;
    padding: 10px 20px;
    color: #201F1D;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.admin-sidebar__parent[b-pi76cg8jcy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.admin-sidebar__parent[b-pi76cg8jcy]::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.admin-sidebar__group--expanded .admin-sidebar__parent[b-pi76cg8jcy]::after {
    transform: rotate(45deg);
    opacity: 1;
}

.admin-sidebar__leaf:hover[b-pi76cg8jcy],
.admin-sidebar__parent:hover[b-pi76cg8jcy] {
    background: #FAF7F1;
}

.admin-sidebar__leaf--active[b-pi76cg8jcy] {
    color: #CEB185;
    border-left: 3px solid #CEB185;
    background: #FAF7F1;
    padding-left: 17px;
}

.admin-sidebar__leaf--disabled[b-pi76cg8jcy] {
    color: #BBB;
    cursor: not-allowed;
    padding: 10px 20px 10px 32px;
    font-size: 13px;
    font-style: italic;
}

.admin-sidebar__group[b-pi76cg8jcy] {
    display: flex;
    flex-direction: column;
}

.admin-sidebar__group--expanded .admin-sidebar__parent[b-pi76cg8jcy] {
    font-weight: 600;
    color: #CEB185;
}

.admin-sidebar__children[b-pi76cg8jcy] {
    display: none;
    padding-left: 16px;
}

.admin-sidebar__group--expanded .admin-sidebar__children[b-pi76cg8jcy] {
    display: flex;
    flex-direction: column;
}

.admin-sidebar-hamburger[b-pi76cg8jcy] {
    display: none;
}

.admin-sidebar-backdrop[b-pi76cg8jcy] {
    display: none;
}

@media (max-width: 767px) {
    .admin-sidebar[b-pi76cg8jcy] {
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        z-index: 1100;
        width: 80%;
        max-width: 280px;
        padding-top: env(safe-area-inset-top, 0px); /* clear the Dynamic Island / notch */
    }
    .admin-sidebar.admin-sidebar--open[b-pi76cg8jcy] {
        transform: translateX(0);
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    }

    /* The fixed hamburger (left 12px + 40px wide) sits over the open drawer,
       so indent the brand logo past it to avoid the overlap. */
    .admin-sidebar__brand[b-pi76cg8jcy] {
        padding-left: 64px;
    }

    .admin-sidebar-hamburger[b-pi76cg8jcy] {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-around;
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 12px;
        z-index: 1200;
        width: 40px;
        height: 40px;
        padding: 8px;
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        cursor: pointer;
    }
    .admin-sidebar-hamburger span[b-pi76cg8jcy] {
        display: block;
        height: 2px;
        background: #201F1D;
        border-radius: 1px;
    }

    .admin-sidebar-backdrop[b-pi76cg8jcy] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1099;
    }
}
/* /Components/Admin/Dashboard/DashboardStatTile.razor.rz.scp.css */
/* One stat tile. Kept deliberately quiet: the figure is the only loud thing on it. */

.dash-tile[b-zta961j330] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-left: 3px solid var(--color-border, #E8E5E0);
    border-radius: 12px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}

.dash-tile__value[b-zta961j330] {
    /* Proportional figures, not tabular: at display sizes equal-width digits make a
       three-digit number look loose. Tabular is for columns of numbers, not this. */
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    color: #201F1D;
}

.dash-tile__label[b-zta961j330] {
    font-size: 14px;
    font-weight: 400;
    color: #6B6660;
}

.dash-tile__meta[b-zta961j330] {
    font-size: 12px;
    font-weight: 400;
    color: #8C867C;
}

/* Tones carry the same meaning as the .rpt-badge vocabulary on the receipts queue.
   Only the 3px left rule is coloured — a tinted card for every tile would make a
   normal shift day look like an incident board. */
.dash-tile--ok[b-zta961j330]        { border-left-color: #2E6B3A; }
.dash-tile--attention[b-zta961j330] { border-left-color: #BE8420; }
.dash-tile--suspect[b-zta961j330]   { border-left-color: #B0392A; }
.dash-tile--neutral[b-zta961j330]   { border-left-color: #E8E5E0; }

/* ── Filter chip variant ── */

.dash-tile--selectable[b-zta961j330] {
    cursor: pointer;
    /* 44px is the touch target the admin buttons elsewhere in the app use; admins
       work on iPads, so these have to be tappable, not just clickable. */
    min-height: 44px;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.dash-tile--selectable:hover[b-zta961j330] {
    background: #FAF7F1;
}

.dash-tile--selectable:focus-visible[b-zta961j330] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.dash-tile--active[b-zta961j330] {
    background: #FAF7F1;
    border-color: #201F1D;
}

.dash-tile--active .dash-tile__label[b-zta961j330] {
    color: #201F1D;
    font-weight: 600;
}

.dash-tile[b-zta961j330] { box-sizing:border-box; position:relative; min-width:0; height:100%; text-decoration:none; min-height:112px; padding:16px; gap:6px; }
.dash-tile__label[b-zta961j330] { order:-1; padding-right:12px; }
.dash-tile__arrow[b-zta961j330] { position:absolute; right:12px; top:12px; color:#6B6660; }
.dash-tile__meta[b-zta961j330] { color:#6B6660; }
a.dash-tile:focus-visible[b-zta961j330] { outline:3px solid #8a6a3c; outline-offset:3px; }
/* /Components/Admin/Dashboard/ExtendShiftDialog.razor.rz.scp.css */
dialog[b-tg3k0ppfso] { width:min(460px,calc(100% - 32px)); border:1px solid #dedad2; border-radius:16px; padding:24px; color:#262622; }
dialog[b-tg3k0ppfso]::backdrop { background:#24262177; }
h2[b-tg3k0ppfso] { font-size:22px; } p[b-tg3k0ppfso] { line-height:1.7; } input[b-tg3k0ppfso] { display:block; width:100%; padding:12px; border:1px solid #aaa; border-radius:8px; margin:10px 0; }
.actions[b-tg3k0ppfso] { display:flex; gap:12px; flex-wrap:wrap; }
button[b-tg3k0ppfso] { min-height:44px; padding:12px; border:1px solid #aaa; border-radius:8px; background:white; }
button:last-child[b-tg3k0ppfso] { background:#292a25; color:white; flex:1; }
[role=alert][b-tg3k0ppfso] { color:#a53d32; }
/* /Components/Admin/Dashboard/LiveOpsTab.razor.rz.scp.css */

.live[b-s8pdit9p9o] { font-family:'Montserrat',sans-serif; min-width:0; color:#262622; }
.toolbar[b-s8pdit9p9o],.controls[b-s8pdit9p9o],.section-head[b-s8pdit9p9o] { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.toolbar[b-s8pdit9p9o] { margin:18px 0; } .controls[b-s8pdit9p9o] { justify-content:flex-start; }
small[b-s8pdit9p9o] { display:block; color:#6b6660; font-size:12px; margin-top:5px; line-height:1.5; }
.control[b-s8pdit9p9o] { min-height:44px; border:1px solid #dedad2; border-radius:9px; padding:10px 13px; background:white; color:#262622; font:inherit; max-width:100%; }
button[b-s8pdit9p9o] { cursor:pointer; } button:disabled[b-s8pdit9p9o] { opacity:.6; cursor:wait; }
.live__band[b-s8pdit9p9o] { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:20px 0; }
.attention[b-s8pdit9p9o] { display:flex; justify-content:space-between; gap:15px; background:#fff8e9; border:1px solid #e5d5b5; padding:17px; border-radius:11px; margin:22px 0 30px; }
a[b-s8pdit9p9o] { color:inherit; text-decoration:none; } a:hover[b-s8pdit9p9o] { text-decoration:underline; }
h2[b-s8pdit9p9o] { font-size:20px; margin:0; } .section-head[b-s8pdit9p9o] { margin:20px 0 15px; }
.search-controls[b-s8pdit9p9o] { margin:15px 0; } .search[b-s8pdit9p9o] { flex:1; min-width:140px; }
.hint[b-s8pdit9p9o] { font-size:12px; line-height:1.6; color:#6b6660; }
.location-list[b-s8pdit9p9o],.panel[b-s8pdit9p9o] { background:white; border:1px solid #e5e2da; border-radius:13px; overflow:hidden; }
.location[b-s8pdit9p9o] { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(0,1fr) 18px; align-items:center; gap:18px; padding:20px; border-bottom:1px solid #e5e2da; }
.location:last-child[b-s8pdit9p9o] { border-bottom:0; } .location:hover[b-s8pdit9p9o] { background:#fcfaf5; text-decoration:none; } .location strong[b-s8pdit9p9o] { overflow-wrap:anywhere; }
.issue[b-s8pdit9p9o] { color:#855812; } .panel[b-s8pdit9p9o] { padding:22px; margin:20px 0; }
.back[b-s8pdit9p9o] { display:inline-block; padding:12px 0; min-height:44px; font-weight:600; }
.roster-row[b-s8pdit9p9o] { display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #e5e2da; padding:17px 0; }
.row-actions[b-s8pdit9p9o] { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .row-actions a[b-s8pdit9p9o] { padding:12px 0; }
.stage[b-s8pdit9p9o] { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 0; border-bottom:1px solid #e5e2da; }
.answer[b-s8pdit9p9o] { padding:18px 0; border-bottom:1px solid #e5e2da; } .answer summary[b-s8pdit9p9o] { min-height:44px; cursor:pointer; }
.empty[b-s8pdit9p9o],.live__loading[b-s8pdit9p9o] { padding:32px 18px; text-align:center; } .live__error[b-s8pdit9p9o] { padding:18px; border:1px solid #b0392a; border-radius:10px; }
:focus-visible[b-s8pdit9p9o] { outline:3px solid #8a6a3c; outline-offset:3px; }
@media(max-width:1200px) { .live__band[b-s8pdit9p9o] { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) {
 .live__band[b-s8pdit9p9o] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .toolbar>.controls[b-s8pdit9p9o] { width:100%; } .toolbar select[b-s8pdit9p9o] { flex:1; min-width:0; }
 .location[b-s8pdit9p9o] { grid-template-columns:minmax(0,1fr) 15px; gap:7px; padding:17px; }
 .location>div[b-s8pdit9p9o] { grid-column:1; } .location>span[b-s8pdit9p9o] { grid-column:2; grid-row:1/4; }
 .roster-row[b-s8pdit9p9o] { align-items:flex-start; flex-direction:column; gap:8px; } .panel[b-s8pdit9p9o] { padding:17px; }
 .attention[b-s8pdit9p9o] { padding:14px; } .section-head h2[b-s8pdit9p9o] { font-size:18px; }
}
/* /Components/Admin/Dashboard/OverviewTab.razor.rz.scp.css */
/* Business overview tab. Scoped; ::deep reaches the shared badge/card vocabulary and Radzen internals. */

.ovw[b-by8icctpw3] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Montserrat', sans-serif;
}

/* ── Filter row. ONE row, above everything it scopes — never per-chart filters. ── */

.ovw__filters[b-by8icctpw3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 12px;
}

.ovw__presets[b-by8icctpw3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ovw__preset[b-by8icctpw3] {
    min-height: 44px;
    padding: 0 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #6B6660;
    cursor: pointer;
}

.ovw__preset:hover[b-by8icctpw3] { background: #FAF7F1; }

.ovw__preset:focus-visible[b-by8icctpw3] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.ovw__preset--active[b-by8icctpw3] {
    background: #201F1D;
    border-color: #201F1D;
    color: #FFFFFF;
    font-weight: 600;
}

.ovw__dates[b-by8icctpw3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ovw__dash[b-by8icctpw3] {
    font-size: 14px;
    color: #6B6660;
}

/* ── Refetch: hold the previous render, never flash a skeleton ── */

.ovw__body[b-by8icctpw3] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: opacity 120ms ease;
}

.ovw__body--refreshing[b-by8icctpw3] { opacity: 0.55; }

/* ── Loading / error / empty ── */

.ovw__loading[b-by8icctpw3] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.ovw__error[b-by8icctpw3],
.ovw__empty[b-by8icctpw3] {
    padding: 28px 20px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 12px;
    text-align: center;
}

.ovw__error[b-by8icctpw3] { border-color: #E2C9C5; }

.ovw__error h3[b-by8icctpw3],
.ovw__empty-title[b-by8icctpw3] {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
}

.ovw__error p[b-by8icctpw3],
.ovw__empty-body[b-by8icctpw3] {
    margin: 0 0 14px;
    font-size: 14px;
    color: #6B6660;
}

.ovw__empty--inline[b-by8icctpw3] { padding: 20px; }

/* ── Headline. The ONLY place the gold accent appears on this screen. ── */

.headline[b-by8icctpw3] {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 12px;
}

.headline__label[b-by8icctpw3] {
    font-size: 14px;
    font-weight: 500;
    color: #6B6660;
}

.headline__value[b-by8icctpw3] {
    /* Same sans as everything else, proportional figures — a display face or tabular digits
       would both read as decoration at this size. */
    margin: 4px 0;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.05;
    color: #CEB185;
}

/* No data: muted ink at a smaller size. The brand gold is 2.05:1 on white — legible as a large
   figure, but a 48px em-dash in it reads as a stray horizontal rule, not as "nothing to report". */
.headline__value--empty[b-by8icctpw3] {
    font-size: 32px;
    color: #8C867C;
}

.headline__meta[b-by8icctpw3] {
    font-size: 13px;
    color: #6B6660;
}

/* ── KPI row ── */

.ovw__kpis[b-by8icctpw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* ── Charts ── */

.chart-grid[b-by8icctpw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}

.chart-card[b-by8icctpw3] {
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 12px;
}

.chart-card__title[b-by8icctpw3] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
}

.chart-card__empty[b-by8icctpw3] {
    margin: 0;
    padding: 24px 0;
    font-size: 14px;
    color: #8C867C;
    text-align: center;
}

/* Radzen sizes its chart to the host element. 260px of plot + room for the axis band, so the
   x-axis labels are never cropped into a nested scrollbar. */
[b-by8icctpw3] .chart-card .rz-chart {
    width: 100%;
    height: 260px;
}

/* Recessive chrome: hairline solid gridlines one shade off the surface, never dashed. */
[b-by8icctpw3] .chart-card .rz-gridlines line,
[b-by8icctpw3] .chart-card .rz-axis line,
[b-by8icctpw3] .chart-card .rz-tick line {
    stroke: #ECEAE6;
    stroke-width: 1;
    stroke-dasharray: none;
}

[b-by8icctpw3] .chart-card text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    /* Labels wear text ink, never the series colour. */
    fill: #6B6660;
}

/* A 2px surface gap between stacked segments, rather than a border drawn around each. */
[b-by8icctpw3] .chart-card .rz-series path,
[b-by8icctpw3] .chart-card .rz-series rect {
    stroke: #FFFFFF;
    stroke-width: 2;
}

/* ── Ranked bar lists (charts 5–8) ──
   Horizontal bars built in plain HTML: category names stay readable at any length,
   and every value is stated as a number beside its bar, so the bar is never the
   only way to read it. */

.ranked[b-by8icctpw3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranked__row[b-by8icctpw3] {
    display: grid;
    grid-template-columns: minmax(88px, 30%) 1fr auto;
    align-items: center;
    gap: 10px;
}

.ranked__label[b-by8icctpw3] {
    font-size: 13px;
    color: #201F1D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranked__track[b-by8icctpw3] {
    height: 10px;
    background: #F2F0EC;
    border-radius: 5px;
    overflow: hidden;
}

.ranked__fill[b-by8icctpw3] {
    display: block;
    height: 100%;
    border-radius: 5px;
    /* min-width so a non-zero value never renders as an invisible sliver. */
    min-width: 2px;
}

.ranked__value[b-by8icctpw3] {
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    /* Tabular here — these DO align vertically down the column. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Sections / tables ── */

.ovw__section[b-by8icctpw3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ovw__section-title[b-by8icctpw3] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
}

.ovw__link[b-by8icctpw3] {
    color: #201F1D;
    font-weight: 600;
    text-decoration: none;
}

.ovw__link:hover[b-by8icctpw3] { text-decoration: underline; }

.ovw__muted[b-by8icctpw3] {
    color: #8C867C;
    font-weight: 400;
}

@media (max-width: 767px) {
    .ovw__filters[b-by8icctpw3] { flex-direction: column; align-items: stretch; }
    .ovw__dates[b-by8icctpw3] { justify-content: space-between; }
    .headline__value[b-by8icctpw3] { font-size: 38px; }
    .chart-grid[b-by8icctpw3] { grid-template-columns: 1fr; }
    .ranked__row[b-by8icctpw3] { grid-template-columns: minmax(72px, 34%) 1fr auto; }
}

/* Same reading order on every device; one readable chart per phone row. */
.ovw[b-by8icctpw3], .ovw__body[b-by8icctpw3], .chart-card[b-by8icctpw3] { min-width:0; }
.ovw__kpis[b-by8icctpw3] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.chart-grid[b-by8icctpw3] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.chart-card[b-by8icctpw3] { padding:20px; }
[b-by8icctpw3] .chart-card .rz-chart { min-width:0; width:100%; height:300px; }
.more-reports[b-by8icctpw3] { border:1px solid #e5e2da; border-radius:12px; padding:18px; }
.more-reports>summary[b-by8icctpw3] { cursor:pointer; min-height:44px; font-weight:600; }
.more-reports .chart-grid[b-by8icctpw3] { margin:20px 0; }
.daily-details[b-by8icctpw3] { background:white; padding:18px; border-radius:12px; }
.daily-row[b-by8icctpw3] { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; border-bottom:1px solid #e5e2da; }
.ovw__link[b-by8icctpw3] { display:inline-block; padding:12px 0; min-height:44px; }
@media(max-width:767px) {
 .ovw__kpis[b-by8icctpw3] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .chart-grid[b-by8icctpw3] { grid-template-columns:minmax(0,1fr); }
 .chart-card[b-by8icctpw3] { padding:12px; }
 .ovw__dates[b-by8icctpw3] { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); width:100%; }
 .ovw__dates[b-by8icctpw3]  .rz-datepicker { width:100%; min-width:0; }
 .ovw__dates[b-by8icctpw3]  input { min-width:0; width:100%; }
 .ovw__presets[b-by8icctpw3] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; }
 .ovw__preset[b-by8icctpw3] { padding:0 6px; font-size:12px; }
}

@media(min-width:768px) and (max-width:1199px) {
 .chart-grid[b-by8icctpw3] { grid-template-columns:minmax(0,1fr); }
 .ovw__kpis[b-by8icctpw3] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* /Components/Admin/Events/ApplicationDayList.razor.rz.scp.css */
/*
    Per-day chips. Colours reuse the queue's .pill-* palette so a chip and the roll-up pill
    beside it read as one system rather than two vocabularies for the same fact.
*/

.day-list[b-mi9palbehz] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.day-list--compact[b-mi9palbehz] {
    /* Desktop: chips wrap inside a table cell instead of stacking. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem;
}

.day-list__legacy[b-mi9palbehz] {
    font-size: .75rem;
    color: #8A857D;
    font-style: italic;
}

.day-chip[b-mi9palbehz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    /* Full-width 44px rows are the DEFAULT — the phone is the harder surface, so it gets the
       shape that works, and the desktop opts down. */
    min-height: 44px;
    padding: .25rem .75rem;
    font-size: .8125rem;
}

.day-list--compact .day-chip[b-mi9palbehz] {
    min-height: 28px;
    padding: .125rem .375rem .125rem .5rem;
    font-size: .75rem;
}

.day-chip__main[b-mi9palbehz] {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    min-width: 0;
}

.day-chip__date[b-mi9palbehz] {
    font-weight: 600;
    white-space: nowrap;
}

.day-chip__cap[b-mi9palbehz] {
    color: #8A857D;
    font-size: .6875rem;
    white-space: nowrap;
}

.day-chip__status[b-mi9palbehz] {
    font-size: .6875rem;
    white-space: nowrap;
    opacity: .85;
}

.day-chip__full[b-mi9palbehz] {
    font-size: .6875rem;
    font-weight: 600;
    color: #7A5A1F;
    white-space: nowrap;
}

/* ── Per-day decision buttons ─────────────────────────────────────────────── */

.day-chip__actions[b-mi9palbehz] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.day-btn[b-mi9palbehz] {
    /* 44px on the phone card; the compact rule below takes it to 28px on desktop, which is
       the trade AdminResponsiveList's two fragments exist to let us make. */
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.day-list--compact .day-btn[b-mi9palbehz] {
    min-width: 28px;
    min-height: 28px;
    font-size: .75rem;
}

.day-btn:disabled[b-mi9palbehz] {
    opacity: .4;
    cursor: not-allowed;
}

.day-btn--yes[b-mi9palbehz] { color: #1F5F32; }
.day-btn--yes:hover:not(:disabled)[b-mi9palbehz] { background: #E6F4EA; border-color: #1F5F32; }

.day-btn--no[b-mi9palbehz] { color: #7A1F1F; }
.day-btn--no:hover:not(:disabled)[b-mi9palbehz] { background: #F7E1E1; border-color: #7A1F1F; }

.day-btn:focus-visible[b-mi9palbehz] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

/* ── Chip states — same palette as .pill-* in Queue.razor ─────────────────── */

.day-chip--pending[b-mi9palbehz]   { background: #F4ECDF; border-color: #E8DCC6; color: #7A5A1F; }
.day-chip--approved[b-mi9palbehz]  { background: #E6F4EA; border-color: #CBE6D4; color: #1F5F32; }
.day-chip--rejected[b-mi9palbehz]  { background: #F7E1E1; border-color: #EBCBCB; color: #7A1F1F; }
.day-chip--withdrawn[b-mi9palbehz] { background: #EAE5DC; border-color: #DDD7CC; color: #4A4640; }

.day-chip--cancelled[b-mi9palbehz] {
    background: #EAE5DC;
    border-color: #DDD7CC;
    color: #4A4640;
}

.day-chip--cancelled .day-chip__date[b-mi9palbehz] {
    text-decoration: line-through;
}
/* /Components/Admin/Events/StaffEventDayBuilder.razor.rz.scp.css */
/*
    Day builder — scoped so nothing here can reach the other admin screens.
    Brand tokens only (gold #CEB185 / ink #201F1D / border #E8E5E0), never Bootstrap's
    stock blue.
*/

.day-builder[b-0v5xy82ib7] {
    font-family: 'Montserrat', sans-serif;
}

/* ── Panels (generator, calendar, bulk apply) ─────────────────────────────── */

.db-panel[b-0v5xy82ib7] {
    background: #FBFAF8;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.db-panel-title[b-0v5xy82ib7] {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6B6862;
    margin-bottom: .75rem;
}

.day-builder[b-0v5xy82ib7]  .form-label {
    font-size: .75rem;
    font-weight: 600;
    color: #6B6862;
    margin-bottom: .25rem;
}

.db-gen-msg[b-0v5xy82ib7] {
    margin-top: .75rem;
    font-size: .8125rem;
    color: #6B6862;
}

/* ── Weekday toggles ──────────────────────────────────────────────────────── */

.db-weekdays[b-0v5xy82ib7] {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
}

.db-weekday[b-0v5xy82ib7] {
    flex: 1 1 auto;
    min-width: 44px;
    /* 44px tall on every surface — these are the generator's primary control and get
       tapped on a phone as often as clicked. */
    min-height: 44px;
    padding: 0 .5rem;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background: #FFFFFF;
    color: #201F1D;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.db-weekday:hover[b-0v5xy82ib7] {
    border-color: #CEB185;
}

.db-weekday.is-on[b-0v5xy82ib7] {
    background: #CEB185;
    border-color: #CEB185;
    /* Dark ink on the light gold — white would fail contrast on this fill. */
    color: #201F1D;
}

/* ── Escape-hatch links ───────────────────────────────────────────────────── */

.db-hatches[b-0v5xy82ib7] {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.db-link[b-0v5xy82ib7] {
    background: none;
    border: 0;
    padding: .25rem 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: #9E815C;
    cursor: pointer;
}

.db-link:hover[b-0v5xy82ib7] {
    color: #B89970;
    text-decoration: underline;
}

.db-calendar-note[b-0v5xy82ib7] {
    margin-top: .5rem;
    font-size: .8125rem;
    color: #6B6862;
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.db-table[b-0v5xy82ib7] {
    width: 100%;
    border-collapse: collapse;
}

.db-table thead th[b-0v5xy82ib7] {
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6B6862;
    padding: .5rem .625rem;
    border-bottom: 1px solid #E8E5E0;
}

.db-table tbody td[b-0v5xy82ib7] {
    padding: .5rem .625rem;
    border-bottom: 1px solid #F2F0ED;
    vertical-align: middle;
}

.db-table tfoot td[b-0v5xy82ib7] {
    padding: .75rem .625rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #201F1D;
    border-top: 1px solid #E8E5E0;
}

.db-date[b-0v5xy82ib7] {
    font-weight: 600;
    color: #201F1D;
}

.db-note[b-0v5xy82ib7] {
    font-size: .75rem;
    color: #6B6862;
    margin-top: .125rem;
}

.db-static[b-0v5xy82ib7] {
    color: #6B6862;
}

.day-builder[b-0v5xy82ib7]  .form-control-sm {
    border: 1px solid #E8E5E0;
    border-radius: 8px;
}

.day-builder[b-0v5xy82ib7]  .form-control:focus,
.day-builder[b-0v5xy82ib7]  .form-select:focus {
    border-color: #CEB185;
    box-shadow: none;
}

/* ── Row states ───────────────────────────────────────────────────────────── */

.db-row-locked[b-0v5xy82ib7],
.db-row-cancelled[b-0v5xy82ib7] {
    background: #FAF9F7;
}

.db-row-cancelled .db-date[b-0v5xy82ib7] {
    text-decoration: line-through;
    color: #6B6862;
}

.db-row-invalid[b-0v5xy82ib7] {
    background: #FDF6F5;
}

.db-error-row td[b-0v5xy82ib7],
.db-row-error[b-0v5xy82ib7] {
    font-size: .8125rem;
    color: #C0392B;
    padding-top: 0;
}

.db-row-error[b-0v5xy82ib7] {
    margin-top: .5rem;
}

.db-empty[b-0v5xy82ib7] {
    border: 1px dashed #E8E5E0;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: #6B6862;
    font-size: .875rem;
}

/* ── Mobile cards ─────────────────────────────────────────────────────────── */

.db-card-head[b-0v5xy82ib7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.db-card-fields[b-0v5xy82ib7] {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.db-card-fields label[b-0v5xy82ib7] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.db-card-fields label span[b-0v5xy82ib7] {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6B6862;
}

/* 44px targets on the phone — the desktop table can be denser, these cannot. */
.db-card-fields[b-0v5xy82ib7]  .form-control {
    min-height: 44px;
}

.db-footer-mobile[b-0v5xy82ib7] {
    padding: .75rem .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #201F1D;
}
/* /Components/Admin/Events/StaffEventDeleteImpact.razor.rz.scp.css */
/* Impact panel for staff-event deletion. Brand tokens per CLAUDE.md: ink #201F1D,
   border #E8E5E0, error #C0392B, gold #CEB185. */

.impact-panel[b-64unie46tf] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #FFFFFF;
}

.impact-panel.impact-blocked[b-64unie46tf] {
    border-color: #C0392B;
    background: #FDF6F5;
}

.impact-line[b-64unie46tf] {
    font-size: 13px;
    line-height: 1.5;
}

.impact-muted[b-64unie46tf] {
    color: #6B645B;
}

.impact-clear[b-64unie46tf] {
    font-weight: 600;
}

.impact-error[b-64unie46tf] {
    color: #C0392B;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.impact-reason[b-64unie46tf] {
    color: #7A1F1F;
    font-weight: 600;
}

.impact-counts[b-64unie46tf] {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #201F1D;
}
/* /Components/Admin/Settings/AiSettingsTab.razor.rz.scp.css */
/* AI tab of the admin Settings page. Moved from the former Pages/Admin/Sales/AiSettings.razor.css
   when settings were consolidated behind /admin/settings — rules are unchanged apart from the
   root class (.ai-settings-page -> .ai-settings-tab) and the page-level max-width/centring, which
   now belongs to the host page.

   Two switches (gold ON track) + a % threshold. AutoAccept + threshold rows are visibly
   greyed/disabled when AI is OFF. Gold #CEB185 reserved for the switch ON track + the Save CTA
   only. Montserrat, 8px radius. ::deep themes the Radzen switch children. */

.ai-settings-tab[b-zjvcc1iet7] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.tab-sub[b-zjvcc1iet7] {
    font-size: 16px;
    color: #6B6760;
    margin: 0 0 24px;
}

.ai-settings-card[b-zjvcc1iet7] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 8px 16px;
}

.setting-row[b-zjvcc1iet7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #E8E5E0;
}

.ai-settings-card .setting-row:last-child[b-zjvcc1iet7] {
    border-bottom: none;
}

/* Visibly disabled when AI is OFF (greyed, non-interactive cue). */
.setting-row--disabled[b-zjvcc1iet7] {
    opacity: 0.5;
}

.setting-text[b-zjvcc1iet7] {
    flex: 1 1 auto;
    min-width: 0;
}

.setting-title[b-zjvcc1iet7] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.setting-help[b-zjvcc1iet7] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.4;
    margin-top: 2px;
}

.failsafe-note[b-zjvcc1iet7] {
    font-size: 14px;
    color: #8A6D1E;
    background: #FBEFD6;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 8px;
    line-height: 1.4;
}

/* ── Threshold input ── */
.threshold-input-wrap[b-zjvcc1iet7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.threshold-input[b-zjvcc1iet7] {
    width: 84px;
    min-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-align: right;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.threshold-input:focus[b-zjvcc1iet7] {
    outline: none;
    border-color: #CEB185;
}

.threshold-input:disabled[b-zjvcc1iet7] {
    background: #F4ECDF;
    cursor: not-allowed;
}

.threshold-pct[b-zjvcc1iet7] {
    font-size: 16px;
    color: #6B6760;
}

/* ── Gold switch ON track (brand-consistent) ── */
.ai-settings-tab[b-zjvcc1iet7]  .rz-switch.rz-switch-checked .rz-switch-circle {
    background-color: #FFFFFF;
}

.ai-settings-tab[b-zjvcc1iet7]  .rz-switch.rz-switch-checked {
    background-color: #CEB185;
}

/* ── Usage meter (read-only) ── */
.usage-card[b-zjvcc1iet7] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.usage-title[b-zjvcc1iet7] {
    font-size: 14px;
    color: #6B6760;
}

.usage-figure[b-zjvcc1iet7] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 4px 0;
}

.usage-meta[b-zjvcc1iet7] {
    font-size: 14px;
    color: #9E815C;
}

/* ── Save CTA (gold, dark text) ── */
.settings-actions[b-zjvcc1iet7] {
    margin-top: 24px;
}

.ai-settings-tab[b-zjvcc1iet7]  .save-btn.rz-button {
    min-height: 44px;
    padding: 0 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
}

.ai-settings-tab[b-zjvcc1iet7]  .cta-gold.rz-button,
.ai-settings-tab[b-zjvcc1iet7]  .cta-gold.rz-button:hover,
.ai-settings-tab[b-zjvcc1iet7]  .cta-gold.rz-button:focus {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.ai-settings-tab[b-zjvcc1iet7]  .cta-gold.rz-button:hover {
    background-color: #B89970;
    border-color: #B89970;
}

.ai-settings-tab[b-zjvcc1iet7]  .cta-gold.rz-button:disabled {
    opacity: 0.6;
}
/* /Components/Admin/Settings/StaffSettingsTab.razor.rz.scp.css */
/* Staff tab of the admin Settings page. Shares the AI tab's visual language (white card, 1px
   #E8E5E0 border, 8px radius, Montserrat, gold #CEB185 reserved for the accent + Save CTA) so
   the two tabs read as one screen. */

.staff-settings-tab[b-362m0c2vtu] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.tab-sub[b-362m0c2vtu] {
    font-size: 16px;
    color: #6B6760;
    margin: 0 0 24px;
}

.staff-settings-card[b-362m0c2vtu] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 16px;
}

.setting-title[b-362m0c2vtu] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.setting-help[b-362m0c2vtu] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.4;
    margin-top: 2px;
}

/* ── Employment type checkboxes ── */
.type-list[b-362m0c2vtu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.type-row[b-362m0c2vtu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background: #FBFAF8;
    cursor: pointer;
}

.type-row:hover[b-362m0c2vtu] {
    border-color: #CEB185;
}

/* 44px min touch target on the row; the box itself stays a comfortable 18px. */
.type-row input[type="checkbox"][b-362m0c2vtu] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #CEB185;
    flex: 0 0 auto;
    cursor: pointer;
}

.type-text[b-362m0c2vtu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.type-name[b-362m0c2vtu] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.type-desc[b-362m0c2vtu] {
    font-size: 13px;
    color: #6B6760;
    line-height: 1.4;
    margin-top: 2px;
}

/* Same amber advisory treatment as the AI tab's fail-safe note. */
.warn-note[b-362m0c2vtu] {
    font-size: 14px;
    color: #8A6D1E;
    background: #FBEFD6;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 12px;
    line-height: 1.4;
}

/* ── Save CTA (gold, dark text) ── */
.settings-actions[b-362m0c2vtu] {
    margin-top: 24px;
}

.staff-settings-tab[b-362m0c2vtu]  .save-btn.rz-button {
    min-height: 44px;
    padding: 0 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
}

.staff-settings-tab[b-362m0c2vtu]  .cta-gold.rz-button,
.staff-settings-tab[b-362m0c2vtu]  .cta-gold.rz-button:hover,
.staff-settings-tab[b-362m0c2vtu]  .cta-gold.rz-button:focus {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.staff-settings-tab[b-362m0c2vtu]  .cta-gold.rz-button:hover {
    background-color: #B89970;
    border-color: #B89970;
}

.staff-settings-tab[b-362m0c2vtu]  .cta-gold.rz-button:disabled {
    opacity: 0.6;
}
/* /Components/Admin/Staff/StaffJobsTab.razor.rz.scp.css */
/* Jobs tab of the admin staff-detail page. Same card/typography language as the Profile tab. */

.staff-jobs-tab[b-wl1wdwcmp7] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

/* ── Summary counters ── */
.jobs-summary[b-wl1wdwcmp7] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.summary-stat[b-wl1wdwcmp7] {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 12px 16px;
}

.stat-figure[b-wl1wdwcmp7] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

.stat-label[b-wl1wdwcmp7] {
    font-size: 13px;
    color: #6B6660;
    margin-top: 2px;
}

/* ── Filter chips (same affordance as the roster segment pills) ── */
.jobs-filters[b-wl1wdwcmp7] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filter-chip[b-wl1wdwcmp7] {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #4A453D;
    cursor: pointer;
}

.filter-chip:hover[b-wl1wdwcmp7] {
    border-color: #CEB185;
}

.filter-chip--active[b-wl1wdwcmp7] {
    background: #F4ECDF;
    border-color: #CEB185;
    color: #201F1D;
}

/* ── Outcome badges ── */
.outcome[b-wl1wdwcmp7] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.outcome-present[b-wl1wdwcmp7] { background: #E6F4EA; color: #1F5F32; }
.outcome-noshow[b-wl1wdwcmp7]  { background: #F7E1E1; color: #7A1F1F; }

/* Lateness / early-leave sit under the badge — context, not a second status. */
.outcome-note[b-wl1wdwcmp7] {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #8A6D1E;
}

/* ── Empty + error states ── */
.jobs-empty[b-wl1wdwcmp7] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
}

.jobs-empty h3[b-wl1wdwcmp7] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

.jobs-empty p[b-wl1wdwcmp7] {
    font-size: 14px;
    color: #6B6660;
    margin: 0;
}

.jobs-none-in-filter[b-wl1wdwcmp7] {
    font-size: 14px;
    color: #6B6660;
    padding: 16px 0;
}

.jobs-error[b-wl1wdwcmp7] {
    font-size: 14px;
    color: #7A1F1F;
    background: #F7E1E1;
    border-radius: 8px;
    padding: 10px 14px;
}

/* Grid: let the table scroll rather than crush the columns on a phone. */
.staff-jobs-tab[b-wl1wdwcmp7]  .jobs-grid {
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    overflow: hidden;
}

.staff-jobs-tab[b-wl1wdwcmp7]  .jobs-grid .rz-data-grid-data {
    overflow-x: auto;
}
/* /Components/Admin/Staff/StaffProfileTab.razor.rz.scp.css */
/* Profile tab of the admin staff-detail page. Card treatment matches the member's own profile
   (white, 1px #E8E5E0, 12px radius, Montserrat) so admin and staff views read as one product. */

.staff-profile-tab[b-g2oerary3u] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

/* Two columns on desktop, one on mobile. Cards vary in height, so masonry-ish column flow
   would leave ragged gaps — a plain grid with aligned tops is calmer. */
.profile-grid[b-g2oerary3u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

@media (max-width: 767px) {
    .profile-grid[b-g2oerary3u] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile-card[b-g2oerary3u] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 16px 18px;
}

.profile-card h2[b-g2oerary3u] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #201F1D;
}

/* Label left, value right — the value wraps rather than pushing the label off. */
.field[b-g2oerary3u] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid #F2EFEA;
    font-size: 14px;
}

.profile-card .field:last-of-type[b-g2oerary3u] {
    border-bottom: none;
    padding-bottom: 0;
}

.field > span[b-g2oerary3u] {
    color: #6B6660;
    flex: 0 0 auto;
}

.field > strong[b-g2oerary3u] {
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.field .mono[b-g2oerary3u] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: #4A453D;
}

.field-error[b-g2oerary3u] {
    margin: 10px 0 0;
    font-size: 13px;
    color: #7A1F1F;
}

/* The CV preview needs the full width — a PDF in a half-width column is unreadable. */
.cv-card[b-g2oerary3u] {
    margin-top: 16px;
}

/* ── Status pill (same palette as the roster list) ── */
.pill[b-g2oerary3u] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.pill-applicant[b-g2oerary3u] { background: #F4ECDF; color: #7A5A1F; }
.pill-interview[b-g2oerary3u] { background: #E3EEF7; color: #1F4A7A; }
.pill-available[b-g2oerary3u] { background: #E6F4EA; color: #1F5F32; }
.pill-onleave[b-g2oerary3u]   { background: #F7F1DC; color: #7A6020; }
.pill-fired[b-g2oerary3u]     { background: #F7E1E1; color: #7A1F1F; }
.pill-rejected[b-g2oerary3u]  { background: #EAE5DC; color: #4A4640; }
/* On hold — dashed border reads "temporary", separating an admin hold at a glance from the
   solid-fill .pill-onleave (staff-initiated) and .pill-fired (terminal). */
.pill-suspended[b-g2oerary3u] { background: #F4ECDF; color: #6B4E16; border: 1px dashed #B08A3E; }
.pill-deleted[b-g2oerary3u]   { background: #EAE5DC; color: #6B6660; }
/* /Components/Admin/Staff/StaffReleasePreview.razor.rz.scp.css */
.release-preview[b-cqfjcn3ltn] {
    font-family: 'Montserrat', sans-serif;
    background: #FBF9F6;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0 16px;
}

.rp-loading[b-cqfjcn3ltn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6B645B;
}

.rp-count[b-cqfjcn3ltn],
.rp-empty[b-cqfjcn3ltn],
.rp-pending[b-cqfjcn3ltn],
.rp-error-text[b-cqfjcn3ltn] {
    font-size: 13px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.rp-empty[b-cqfjcn3ltn] {
    color: #6B645B;
}

.rp-count strong[b-cqfjcn3ltn] {
    font-weight: 600;
}

.rp-list[b-cqfjcn3ltn] {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.rp-item[b-cqfjcn3ltn] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #EFEAE0;
    font-size: 13px;
}

.rp-item:last-child[b-cqfjcn3ltn] {
    border-bottom: none;
}

.rp-store[b-cqfjcn3ltn] {
    color: #201F1D;
    font-weight: 500;
}

.rp-date[b-cqfjcn3ltn] {
    color: #6B645B;
    white-space: nowrap;
}

.rp-pending[b-cqfjcn3ltn] {
    margin-top: 10px;
}

.rp-note[b-cqfjcn3ltn] {
    font-size: 12px;
    line-height: 1.5;
    color: #6B645B;
    margin: 10px 0 0;
}

.rp-more[b-cqfjcn3ltn],
.rp-retry[b-cqfjcn3ltn] {
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #B89970;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.rp-error-sub[b-cqfjcn3ltn] {
    font-size: 12px;
    line-height: 1.5;
    color: #6B645B;
    margin: 6px 0 0;
}
/* /Components/Admin/Staff/StaffRosterFilters.razor.rz.scp.css */
/* Admin staff-roster filter control.

   Copies the /staff-search vocabulary (Pages/Search.razor.css + Components/FilterModal.razor.css)
   so admin and client filtering read as one product: a gold-outlined 24px-radius search field, a
   round filter pill beside it, and a sheet with a centred title, a gold "Clear filters" link and a
   sticky ink Apply button.

   Inside the sheet the facets keep the canonical admin filter-pill vocabulary documented in
   Pages/Admin/Sales/ReceiptsQueue.razor.css: fully-rounded white/outlined pills, ink #201F1D active
   fill with white text, gold #CEB185 as the HOVER border only. Gold stays reserved for the primary
   CTA and hover/focus accents — never an active fill.

   ::deep themes the Radzen dropdown/numeric children, which otherwise render in the stock Radzen
   palette and read as foreign here. */

/* ── Search row ──
   Its own centred row above the segment chips. Centred rather than left-aligned so it reads as the
   page's primary control instead of another item in the toolbar. */
.roster-searchrow[b-czbyg5pop2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: 'Montserrat', sans-serif;
}

.roster-search[b-czbyg5pop2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    /* Capped so the field stays a search box on a wide desktop rather than stretching the width of
       the table underneath it. */
    max-width: 420px;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
}

.roster-search:focus-within[b-czbyg5pop2] {
    border-color: #B89970;
}

.roster-search__icon[b-czbyg5pop2] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: 0.7;
}

.roster-search__input[b-czbyg5pop2] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
}

.roster-search__input[b-czbyg5pop2]::placeholder {
    color: #A8A29A;
}

/* Hide the WebKit clear affordance — it lands on top of the rounded border and there is already a
   removable chip for the search term. */
.roster-search__input[b-czbyg5pop2]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.roster-filter-pill[b-czbyg5pop2] {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #E8E5E0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.roster-filter-pill:hover[b-czbyg5pop2] {
    background: #E0D2B8;
}

.roster-filter-pill:focus-visible[b-czbyg5pop2] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.roster-filter-pill img[b-czbyg5pop2] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Active fill is ink, matching the segment chips — gold is the CTA colour, not a state. */
.roster-filter-pill--on[b-czbyg5pop2] {
    background: #201F1D;
}

.roster-filter-pill--on img[b-czbyg5pop2] {
    filter: invert(1);
}

/* Count badge. The button's aria-label already carries "(3 active)", so this is aria-hidden. */
.roster-filter-pill__n[b-czbyg5pop2] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #CEB185;
    color: #201F1D;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── Chips + count, below the segment chips ── */
.roster-meta[b-czbyg5pop2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 12px;
    font-family: 'Montserrat', sans-serif;
}

.roster-count[b-czbyg5pop2] {
    margin: 0;
    font-size: 13px;
    color: #6B6660;
}

/* Active-filter chips.
   Deliberately NOT the pill vocabulary: a pill means "switch view", and these mean "a value is in
   force, drop it". Lighter fill, tighter radius, always visible so a filter can never be silently
   applied. */
.filter-chips[b-czbyg5pop2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-chip[b-czbyg5pop2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 12px;
    border-radius: 24px;
    border: 1px solid #E8E5E0;
    background: #F7F5F2;
    color: #201F1D;
    font-size: 13px;
    font-weight: 500;
}

/* Padding + negative margin gives the × a 44px hit area without visually inflating the chip. */
.filter-chip__x[b-czbyg5pop2] {
    border: 0;
    background: transparent;
    color: #6B6660;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 14px;
    margin: -14px -8px -14px -14px;
}

.filter-chip__x:hover[b-czbyg5pop2] {
    color: #201F1D;
}

.filter-chip__x:focus-visible[b-czbyg5pop2] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
    border-radius: 50%;
}

.filter-clear[b-czbyg5pop2] {
    border: 0;
    background: transparent;
    color: #6B6660;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    min-height: 44px;
    padding: 0 8px;
}

.filter-clear:hover[b-czbyg5pop2] {
    color: #201F1D;
}

/* ── Sheet ── */
.filter-sheet-backdrop[b-czbyg5pop2] {
    position: fixed;
    inset: 0;
    /* Above every piece of admin chrome — the sidebar rail is 1000, its phone drawer 1100 and the
       fixed hamburger 1200, and at 1200 this only covered the hamburger by DOM accident. Still
       below Radzen's popups, which its JS pins at 2000, so the language and location dropdowns
       open over the sheet rather than behind it. */
    z-index: 1300;
    background: rgba(32, 31, 29, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.filter-sheet[b-czbyg5pop2] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 12px 40px rgba(32, 31, 29, 0.25);
}

.filter-sheet__head[b-czbyg5pop2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #E8E5E0;
}

.filter-sheet__title[b-czbyg5pop2] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.filter-sheet__close[b-czbyg5pop2] {
    position: absolute;
    left: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.filter-sheet__close img[b-czbyg5pop2] {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.filter-sheet__close:focus-visible[b-czbyg5pop2],
.filter-sheet__clear:focus-visible[b-czbyg5pop2],
.filter-sheet__apply:focus-visible[b-czbyg5pop2] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.filter-sheet__clear[b-czbyg5pop2] {
    position: absolute;
    right: 12px;
    border: 0;
    background: transparent;
    color: #CEB185;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    padding: 0 4px;
}

.filter-sheet__clear:hover[b-czbyg5pop2] {
    color: #B89970;
}

.filter-sheet__body[b-czbyg5pop2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px;
}

.filter-sheet__divider[b-czbyg5pop2] {
    height: 1px;
    background: #E8E5E0;
    margin: 18px 0;
}

/* One facet per row rather than a grid: the whole point of moving to a sheet was that nine facets
   side by side read as clutter. */
.filter-field[b-czbyg5pop2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 16px;
}

.filter-label[b-czbyg5pop2] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-hint[b-czbyg5pop2] {
    margin: 0;
    font-size: 12px;
    color: #8A857D;
}

.filter-options[b-czbyg5pop2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-opt[b-czbyg5pop2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.filter-opt:hover[b-czbyg5pop2] {
    border-color: #CEB185;
}

.filter-opt:focus-visible[b-czbyg5pop2] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.filter-opt--on[b-czbyg5pop2] {
    background: #201F1D;
    border-color: #201F1D;
    color: #FFFFFF;
}

.filter-opt__n[b-czbyg5pop2] {
    font-size: 12px;
    font-weight: 600;
    color: #8A857D;
}

.filter-opt--on .filter-opt__n[b-czbyg5pop2] {
    color: #CEB185;
}

.filter-range[b-czbyg5pop2],
.filter-compare[b-czbyg5pop2] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filter-range__dash[b-czbyg5pop2] {
    color: #8A857D;
}

/* Sticky so Apply is reachable without scrolling to the bottom of ten facets. */
.filter-sheet__foot[b-czbyg5pop2] {
    flex-shrink: 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E8E5E0;
    background: #FFFFFF;
}

.filter-sheet__apply[b-czbyg5pop2] {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: #201F1D;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-sheet__apply:hover[b-czbyg5pop2] {
    background: #3A3835;
}

/* Below 520 the sheet goes full-bleed — a centred card with 24px of backdrop either side wastes
   the width a phone hasn't got. */
@media (max-width: 519px) {
    .filter-sheet-backdrop[b-czbyg5pop2] {
        padding: 0;
        align-items: stretch;
    }

    .filter-sheet[b-czbyg5pop2] {
        max-width: none;
        border-radius: 0;
    }

    .filter-sheet__head[b-czbyg5pop2] {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
}

/* ── Radzen children ──
   Stock Radzen inputs are blue-accented and 4px-radius; bring them onto the brand. */
.filter-sheet[b-czbyg5pop2]  .rz-dropdown,
.filter-sheet[b-czbyg5pop2]  .rz-spinner,
.filter-sheet[b-czbyg5pop2]  .rz-textbox {
    min-height: 44px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    width: 100%;
    min-width: 0;
}

.filter-sheet[b-czbyg5pop2]  .rz-dropdown:not(.rz-state-disabled):hover,
.filter-sheet[b-czbyg5pop2]  .rz-spinner:hover {
    border-color: #CEB185;
}

.filter-sheet[b-czbyg5pop2]  .rz-dropdown.rz-state-focused,
.filter-sheet[b-czbyg5pop2]  .rz-spinner input:focus,
.filter-sheet[b-czbyg5pop2]  .rz-textbox:focus {
    outline: none;
    border-color: #CEB185;
    box-shadow: none;
}

/* The comparator dropdown holds one glyph — let the number take the room. */
.filter-compare[b-czbyg5pop2]  .rz-dropdown {
    flex: 0 0 84px;
    width: 84px;
}

.filter-sheet[b-czbyg5pop2]  .rz-multiselect-label .rz-chip {
    background: #201F1D;
    color: #FFFFFF;
    border-radius: 999px;
}
/* /Components/AdminBottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-66t5urep1z] {
    flex-shrink: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-66t5urep1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
}

.nav-item[b-66t5urep1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-66t5urep1z] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-66t5urep1z] {
    color: #CEB185;
}

.nav-item.active[b-66t5urep1z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185;
    border-radius: 23px;
}

.nav-icon[b-66t5urep1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-66t5urep1z] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
}

.nav-item.active .nav-icon img[b-66t5urep1z] {
    filter: invert(72%) sepia(85%) saturate(352%) hue-rotate(4deg) brightness(94%) contrast(92%) !important;
}

.nav-icon i[b-66t5urep1z] {
    font-size: 24px;
    color: #201F1D;
    transition: color 0.2s ease;
}

.nav-item.active .nav-icon i[b-66t5urep1z] {
    color: #CEB185 !important;
}

.dashboard-icon-fallback[b-66t5urep1z],
.clients-icon-fallback[b-66t5urep1z] {
    font-size: 24px;
    line-height: 1;
    display: block;
}

.nav-label[b-66t5urep1z] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-66t5urep1z] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Additional styles to ensure active state is working */
.nav-item.active[b-66t5urep1z] {
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-66t5urep1z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-66t5urep1z] {
        max-width: 100%;
    }
}
/* /Components/AdminTopHeader.razor.rz.scp.css */
/* Admin Top Header */
.admin-top-header[b-uut13qyens] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 1000;
}

.header-logo[b-uut13qyens] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-uut13qyens] {
    position: absolute;
    right: 10px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-notifications[b-uut13qyens] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-uut13qyens] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-notifications:active[b-uut13qyens] {
    transform: scale(0.95);
}

.notification-icon[b-uut13qyens] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-badge[b-uut13qyens] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    border: 2px solid #FFFFFF;
}

.notification-badge span[b-uut13qyens] {
    line-height: 1;
}

.header-settings[b-uut13qyens] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-settings:hover[b-uut13qyens] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-settings:active[b-uut13qyens] {
    transform: scale(0.95);
}

.header-settings img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-uut13qyens] {
        width: 150px;
    }

    .header-actions[b-uut13qyens] {
        gap: 10px;
    }

    .header-notifications[b-uut13qyens],
    .header-settings[b-uut13qyens] {
        width: 28px;
        height: 28px;
    }

    .notification-icon[b-uut13qyens] {
        width: 28px;
        height: 28px;
    }

    .notification-badge[b-uut13qyens] {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-uut13qyens] {
        width: 130px;
    }

    .header-actions[b-uut13qyens] {
        gap: 8px;
    }

    .header-notifications[b-uut13qyens],
    .header-settings[b-uut13qyens] {
        width: 24px;
        height: 24px;
    }

    .notification-icon[b-uut13qyens] {
        width: 24px;
        height: 24px;
    }

    .notification-badge[b-uut13qyens] {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}
/* /Components/BottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-3d1dbppciq] {
    flex-shrink: 0;
    width: 100%;
    max-width: 402px;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-3d1dbppciq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
    width: 100%;
}

.nav-item[b-3d1dbppciq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-3d1dbppciq] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-3d1dbppciq] {
    color: #CEB185;
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-3d1dbppciq]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

.nav-icon[b-3d1dbppciq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-3d1dbppciq] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
    object-fit: contain;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Specific fix for Profile icon to match other icons */
.nav-item:first-child .nav-icon img[b-3d1dbppciq] {
    width: 48px;
    height: 48px;
}

/* Fix for Events icon to make it wider */
.nav-item:nth-child(4) .nav-icon img[b-3d1dbppciq] {
    width: 32px;
    height: 24px;
}

.nav-item.active .nav-icon img[b-3d1dbppciq] {
    filter: brightness(0) saturate(100%) invert(65%) sepia(85%) saturate(350%) hue-rotate(4deg) brightness(95%) contrast(90%) !important;
}

.nav-label[b-3d1dbppciq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-3d1dbppciq] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-3d1dbppciq] {
        max-width: 100%;
    }
}
/* /Components/ClientBottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-p7xr0ryfwt] {
    flex-shrink: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-p7xr0ryfwt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
}

.nav-item[b-p7xr0ryfwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-p7xr0ryfwt] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-p7xr0ryfwt] {
    color: #CEB185;
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-p7xr0ryfwt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

.nav-icon[b-p7xr0ryfwt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-p7xr0ryfwt] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
}

.nav-item.active .nav-icon img[b-p7xr0ryfwt] {
    filter: invert(72%) sepia(85%) saturate(352%) hue-rotate(4deg) brightness(94%) contrast(92%) !important;
}

.nav-label[b-p7xr0ryfwt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-p7xr0ryfwt] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-p7xr0ryfwt] {
        max-width: 100%;
    }
}
/* /Components/ClientTopHeader.razor.rz.scp.css */
/* Client Top Header */
.search-header[b-g6frwu1eef] {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    height: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0) 20px 0 20px;
    z-index: 1000;
}

.header-logo[b-g6frwu1eef] {
    position: absolute;
    left: 20px;
    top: calc(env(safe-area-inset-top, 0) + 15px);
    height: 29px;
    width: 175px;
}

.header-logo img[b-g6frwu1eef] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-g6frwu1eef] {
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-g6frwu1eef] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-notifications:active[b-g6frwu1eef] {
    transform: translateY(-50%) scale(0.95);
}

.notification-icon[b-g6frwu1eef] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-g6frwu1eef] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-badge[b-g6frwu1eef] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    border: 2px solid #FFFFFF;
}

.notification-badge span[b-g6frwu1eef] {
    line-height: 1;
}

.header-actions[b-g6frwu1eef] {
    position: absolute;
    right: 0px;
    top: calc(env(safe-area-inset-top, 0) + 10px);
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-g6frwu1eef] {
        width: 150px;
    }

    .notification-icon[b-g6frwu1eef] {
        width: 36px;
        height: 36px;
    }

    .notification-badge[b-g6frwu1eef] {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-g6frwu1eef] {
        width: 130px;
    }

    .notification-icon[b-g6frwu1eef] {
        width: 32px;
        height: 32px;
    }

    .notification-badge[b-g6frwu1eef] {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.confirm-dialog-overlay[b-hy2ic3j8ls] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 24px;
}

.confirm-dialog-overlay.visible[b-hy2ic3j8ls] {
    opacity: 1;
    visibility: visible;
}

.confirm-dialog[b-hy2ic3j8ls] {
    background: #ffffff;
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.confirm-dialog-title[b-hy2ic3j8ls] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #201f1d;
    margin: 0;
}

.confirm-dialog-message[b-hy2ic3j8ls] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4946;
    margin: 0;
}

.confirm-dialog-actions[b-hy2ic3j8ls] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.confirm-dialog-btn[b-hy2ic3j8ls] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.confirm-dialog-btn:disabled[b-hy2ic3j8ls] {
    cursor: not-allowed;
    opacity: 0.6;
}

.confirm-dialog-btn.secondary[b-hy2ic3j8ls] {
    background-color: #ffffff;
    color: #201f1d;
    border-color: #E8E5E0;
}

.confirm-dialog-btn.secondary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #F5F3EF;
}

.confirm-dialog-btn.primary[b-hy2ic3j8ls] {
    background-color: #201f1d;
    color: #ffffff;
}

.confirm-dialog-btn.primary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #3a3835;
}

.confirm-dialog.danger .confirm-dialog-btn.primary[b-hy2ic3j8ls] {
    background-color: #842029;
}

.confirm-dialog.danger .confirm-dialog-btn.primary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #6d1a22;
}
/* /Components/EventFilterModal.razor.rz.scp.css */
/* Event Filter Modal Styles */
.event-filter-modal-overlay[b-fild78xftq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.event-filter-modal-overlay.visible[b-fild78xftq] {
    opacity: 1;
    visibility: visible;
}

.event-filter-modal[b-fild78xftq] {
    background: white;
    width: 100%;
    max-width: 402px;
    height: 100vh;
    max-height: 90vh;
    border-radius: 0;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.event-filter-header[b-fild78xftq] {
    position: relative;
    background: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
}

.close-button[b-fild78xftq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white;
}

.close-button img[b-fild78xftq] {
    width: 24px;
    height: 24px;
}

.event-filter-title[b-fild78xftq] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    z-index: 5;
}

.clear-filters[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    text-align: right;
    width: 159px;
    flex-shrink: 0;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

/* Filter Sections */
.event-filter-section[b-fild78xftq] {
    padding: 25px;
}

.event-filter-section-header[b-fild78xftq] {
    margin-bottom: 16px;
}

.event-filter-section-title[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
}

/* Dropdown Styles */
.event-filter-dropdown-container[b-fild78xftq] {
    position: relative;
}

.event-filter-dropdown[b-fild78xftq] {
    background: white;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    position: relative;
}

.event-filter-dropdown-text[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    flex: 1;
}

.event-filter-dropdown-arrow[b-fild78xftq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.event-filter-dropdown-arrow.rotated[b-fild78xftq] {
    transform: rotate(180deg);
}

.event-filter-dropdown-arrow img[b-fild78xftq] {
    width: 100%;
    height: 100%;
}

.event-filter-dropdown-options[b-fild78xftq] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E8E5E0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.event-filter-dropdown-option[b-fild78xftq] {
    padding: 12px 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    border-bottom: 1px solid #E8E5E0;
}

.event-filter-dropdown-option:last-child[b-fild78xftq] {
    border-bottom: none;
}

.event-filter-dropdown-option:hover[b-fild78xftq] {
    background-color: #F5F5F5;
}

.event-filter-dropdown-option.selected[b-fild78xftq] {
    background-color: #CEB185;
    color: white;
}

.event-filter-dropdown-option.disabled[b-fild78xftq] {
    color: #999;
    cursor: not-allowed;
}

/* Date Input Styles */
.event-filter-date-container[b-fild78xftq] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.event-filter-date-input-container[b-fild78xftq] {
    flex: 1;
    min-width: 0;
    max-width: 50%;
}

.event-filter-date-input[b-fild78xftq] {
    position: relative;
    background: white;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
}

.event-filter-date-field[b-fild78xftq] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 15px 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    background: transparent;
    box-sizing: border-box;
    min-width: 0;
}

.event-filter-date-icon[b-fild78xftq] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.event-filter-date-icon img[b-fild78xftq] {
    width: 100%;
    height: 100%;
}

/* Divider */
.event-filter-divider[b-fild78xftq] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Apply Button */
.event-filter-apply-button-container[b-fild78xftq] {
    padding: 25px;
    padding-top: 40px;
}

.event-filter-apply-button[b-fild78xftq] {
    width: 100%;
    height: 44px;
    background: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.event-filter-apply-button:hover[b-fild78xftq] {
    background-color: #3A3A3A;
}

.event-filter-apply-button:active[b-fild78xftq] {
    background-color: #1A1A1A;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .event-filter-modal[b-fild78xftq] {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }

    .event-filter-date-container[b-fild78xftq] {
        flex-direction: column;
        gap: 12px;
    }

    .event-filter-date-input-container[b-fild78xftq] {
        max-width: 100%;
        flex: none;
    }
}

/* Additional responsive adjustments for very small screens */
@media (max-width: 360px) {
    .event-filter-date-field[b-fild78xftq] {
        font-size: 14px;
        padding: 0 12px 0 12px;
    }

    .event-filter-date-input[b-fild78xftq] {
        height: 40px;
    }
}
/* /Components/FilterModal.razor.rz.scp.css */
/* Filter Modal Styles */
.filter-modal-overlay[b-1licq5dn3y] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-modal-overlay.visible[b-1licq5dn3y] {
    opacity: 1;
    visibility: visible;
}

.filter-modal[b-1licq5dn3y] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-modal[b-1licq5dn3y]::-webkit-scrollbar {
    display: none;
}

/* Header */
.filter-header[b-1licq5dn3y] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    z-index: 10;
    flex-shrink: 0;
}

.close-button[b-1licq5dn3y] {
    position: absolute;
    left: 18px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
}

.close-button img[b-1licq5dn3y] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.filter-title[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
}

.clear-filters[b-1licq5dn3y] {
    position: absolute;
    right: 20px;
    bottom: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
}

/* Filter Sections */
.filter-section[b-1licq5dn3y] {
    padding: 25px;
}

.filter-section-header[b-1licq5dn3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-section-title[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
}

/* Height Range Dropdowns */
.height-dropdowns-container[b-1licq5dn3y] {
    margin-top: 20px;
}

.height-dropdowns[b-1licq5dn3y] {
    display: flex;
    gap: 16px;
}

.height-dropdown[b-1licq5dn3y] {
    flex: 1;
}

.height-dropdown-label[b-1licq5dn3y] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #201F1D;
    margin-bottom: 8px;
}

/* Dropdowns */
.dropdown-container[b-1licq5dn3y] {
    position: relative;
    margin-top: 20px;
}

.dropdown-button[b-1licq5dn3y] {
    width: 100%;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.dropdown-button:hover[b-1licq5dn3y] {
    border-color: #CEB185;
}

.dropdown-text[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
}

.dropdown-arrow[b-1licq5dn3y] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated[b-1licq5dn3y] {
    transform: rotate(180deg);
}

.dropdown-menu[b-1licq5dn3y] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    min-width: auto;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    text-align: left;
    list-style: none;
}

.dropdown-item[b-1licq5dn3y] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    white-space: normal;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover[b-1licq5dn3y] {
    background-color: #F5F5F5;
}

.dropdown-item.selected[b-1licq5dn3y] {
    background-color: #CEB185;
    color: #FFFFFF;
}

.dropdown-item.disabled[b-1licq5dn3y] {
    color: #999;
    cursor: not-allowed;
}

/* Checkboxes */
.checkbox-list[b-1licq5dn3y] {
    margin-top: 20px;
}

.checkbox-item[b-1licq5dn3y] {
    margin-bottom: 16px;
}

.checkbox-container[b-1licq5dn3y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-input[b-1licq5dn3y] {
    width: 26px;
    height: 26px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    cursor: pointer;
    appearance: none;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-input:checked[b-1licq5dn3y] {
    background-color: #CEB185;
    border-color: #CEB185;
}

.checkbox-input:checked[b-1licq5dn3y]::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
}

.checkbox-label[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    flex: 1;
}

.view-more-languages[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    margin-top: 16px;
    text-align: left;
}

.additional-languages[b-1licq5dn3y] {
    margin-top: 16px;
}

/* Dividers */
.filter-divider[b-1licq5dn3y] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Apply Button */
.apply-button-container[b-1licq5dn3y] {
    padding: 25px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background-color: #FFFFFF;
}

.apply-button[b-1licq5dn3y] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.apply-button:hover[b-1licq5dn3y] {
    background-color: #333;
}


/* Responsive adjustments */
@media (max-width: 402px) {
    .filter-section[b-1licq5dn3y] {
        padding: 20px;
    }

    .filter-divider[b-1licq5dn3y] {
        margin: 0 20px;
    }

    .apply-button-container[b-1licq5dn3y] {
        padding: 20px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 360px) {
    .filter-header[b-1licq5dn3y] {
        padding: 0 15px;
    }

    .close-button[b-1licq5dn3y] {
        left: 15px;
    }

    .clear-filters[b-1licq5dn3y] {
        right: 15px;
    }

    .filter-section[b-1licq5dn3y] {
        padding: 15px;
    }

    .filter-divider[b-1licq5dn3y] {
        margin: 0 15px;
    }

    .apply-button-container[b-1licq5dn3y] {
        padding: 15px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/ImageCropper.razor.rz.scp.css */
/* Image Cropper Container */
.image-cropper-container[b-1jeuaqlpth] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    max-width: 100%;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

/* Cropper Header */
.cropper-header[b-1jeuaqlpth] {
    text-align: center;
    margin-bottom: 16px;
}

.cropper-title[b-1jeuaqlpth] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.cropper-subtitle[b-1jeuaqlpth] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Cropper Wrapper */
.cropper-wrapper[b-1jeuaqlpth] {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f8f8;
    min-height: 200px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.image-cropper[b-1jeuaqlpth] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Cropper Controls */
.cropper-controls[b-1jeuaqlpth] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Rotation Controls */
.cropper-rotation-controls[b-1jeuaqlpth] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Cropper Actions */
.cropper-actions[b-1jeuaqlpth] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cropper-btn[b-1jeuaqlpth] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cropper-btn-cancel[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.cropper-btn-cancel:hover[b-1jeuaqlpth] {
    background-color: #E8E5E0;
    transform: translateY(-1px);
}

.cropper-btn-cancel:active[b-1jeuaqlpth] {
    transform: translateY(0);
}

.cropper-btn-crop[b-1jeuaqlpth] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.cropper-btn-crop:hover:not(:disabled)[b-1jeuaqlpth] {
    background-color: #3A3937;
    transform: translateY(-1px);
}

.cropper-btn-crop:active:not(:disabled)[b-1jeuaqlpth] {
    background-color: #1A1917;
}

.cropper-btn-crop:disabled[b-1jeuaqlpth] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.cropper-btn-rotate[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
    min-width: 140px;
}

.cropper-btn-rotate:hover:not(:disabled)[b-1jeuaqlpth] {
    background-color: #E8E5E0;
    transform: translateY(-1px);
}

.cropper-btn-rotate:active:not(:disabled)[b-1jeuaqlpth] {
    transform: translateY(0);
}

.cropper-btn-rotate:disabled[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    cursor: not-allowed;
    opacity: 0.6;
}

.rotate-icon[b-1jeuaqlpth] {
    font-size: 18px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.cropper-btn-rotate:hover:not(:disabled) .rotate-icon[b-1jeuaqlpth] {
    transform: rotate(15deg);
}

.cropper-spinner[b-1jeuaqlpth] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-1jeuaqlpth 1s linear infinite;
}

@keyframes spin-b-1jeuaqlpth {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .image-cropper-container[b-1jeuaqlpth] {
        padding: 12px;
        margin: 8px;
        border-radius: 8px;
    }

    .cropper-header[b-1jeuaqlpth] {
        margin-bottom: 12px;
    }

    .cropper-title[b-1jeuaqlpth] {
        font-size: 18px;
    }

    .cropper-subtitle[b-1jeuaqlpth] {
        font-size: 13px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        min-height: 180px;
        max-height: 50vh;
        margin-bottom: 12px;
    }

    .cropper-rotation-controls[b-1jeuaqlpth] {
        flex-direction: column;
        gap: 8px;
    }

    .cropper-actions[b-1jeuaqlpth] {
        flex-direction: column;
        gap: 8px;
    }

    .cropper-btn[b-1jeuaqlpth] {
        width: 100%;
        padding: 14px 24px;
    }
}

@media (max-width: 480px) {
    .image-cropper-container[b-1jeuaqlpth] {
        padding: 8px;
        margin: 4px;
        border-radius: 6px;
    }

    .cropper-header[b-1jeuaqlpth] {
        margin-bottom: 8px;
    }

    .cropper-title[b-1jeuaqlpth] {
        font-size: 16px;
    }

    .cropper-subtitle[b-1jeuaqlpth] {
        font-size: 12px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        min-height: 150px;
        max-height: 45vh;
        margin-bottom: 8px;
    }
}

/* Desktop Layout Optimization */
@media (min-width: 1024px) {
    .image-cropper-container[b-1jeuaqlpth] {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        max-height: 500px;
        min-height: 300px;
    }
}

/* Large Desktop Layout */
@media (min-width: 1440px) {
    .image-cropper-container[b-1jeuaqlpth] {
        max-width: 900px;
        padding: 24px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        max-height: 600px;
        min-height: 350px;
    }
}

/* Circular crop mask */
.cropper-circle-mode[b-1jeuaqlpth]  .cropper-view-box,
.cropper-circle-mode[b-1jeuaqlpth]  .cropper-face {
    border-radius: 50%;
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .image-cropper[b-1jeuaqlpth] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
/* /Components/MuxVideoCard.razor.rz.scp.css */
/* Mux Video Card */
.mux-video-card[b-gcj9mm5aem] {
    width: 171px;
    height: 181px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0;
    border: 1px solid rgba(232, 229, 224, 0.5);
}

.mux-video-card:hover[b-gcj9mm5aem] {
    transform: scale(1.02);
    border-color: #CEB185;
}

.mux-video-card.selected[b-gcj9mm5aem] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.mux-video-card.selected:hover[b-gcj9mm5aem] {
    transform: scale(1.0);
}

/* Video Thumbnail */
.video-thumbnail[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-image[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thumbnail-placeholder[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.play-icon[b-gcj9mm5aem] {
    font-size: 32px;
    color: #666;
    opacity: 0.7;
}

/* Duration Overlay */
.duration-overlay[b-gcj9mm5aem] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* Play Button Overlay */
.play-overlay[b-gcj9mm5aem] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.mux-video-card:hover .play-overlay[b-gcj9mm5aem] {
    opacity: 1;
}

.play-button[b-gcj9mm5aem] {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.play-button:hover[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Selection Indicators */
.selection-indicator[b-gcj9mm5aem] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-gcj9mm5aem] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-gcj9mm5aem] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Delete Overlay */
.delete-overlay[b-gcj9mm5aem] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
}

.delete-button[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.delete-button:hover[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-button:active[b-gcj9mm5aem] {
    transform: scale(0.95);
}

.delete-button svg[b-gcj9mm5aem] {
    width: 14px;
    height: 14px;
}

/* Video Info */
.video-info[b-gcj9mm5aem] {
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 163px;
    padding-top: 10px;
    z-index: 1;
}

.video-title[b-gcj9mm5aem] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
    hyphens: auto;
}

.video-duration[b-gcj9mm5aem] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin-top: 2px;
}

/* Responsive Design */
@media (max-width: 480px) {
    .mux-video-card[b-gcj9mm5aem] {
        width: 100%;
        height: 181px;
    }

    .video-info[b-gcj9mm5aem] {
        width: 100%;
    }

    .video-title[b-gcj9mm5aem] {
        font-size: 14px;
    }

    .video-duration[b-gcj9mm5aem] {
        font-size: 12px;
    }

    .play-button[b-gcj9mm5aem] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .selection-circle[b-gcj9mm5aem],
    .selection-check[b-gcj9mm5aem] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .delete-button[b-gcj9mm5aem] {
        width: 32px;
        height: 32px;
    }

    .delete-button svg[b-gcj9mm5aem] {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 360px) {
    .video-title[b-gcj9mm5aem] {
        font-size: 13px;
    }

    .video-duration[b-gcj9mm5aem] {
        font-size: 11px;
    }

    .play-button[b-gcj9mm5aem] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}
/* /Components/MuxVideoPlayer.razor.rz.scp.css */
/* Mux Video Player */
.mux-video-player[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.video-element[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #000;
}

.video-duration[b-spslufhbzd] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
    z-index: 10;
}

.video-placeholder[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #666;
}

.placeholder-icon[b-spslufhbzd] {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.placeholder-text[b-spslufhbzd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

/* Full-screen mode for PortfolioOverlay */
.mux-video-player.fullscreen[b-spslufhbzd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    border-radius: 0;
}

.mux-video-player.fullscreen .video-element[b-spslufhbzd] {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}

/* Desktop - constrain video to fit viewport */
@media (min-width: 768px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }

    .video-element[b-spslufhbzd] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 70vw;
        max-height: 75vh;
    }

    .video-element[b-spslufhbzd] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

@media (min-width: 1440px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 60vw;
        max-height: 80vh;
    }

    .video-element[b-spslufhbzd] {
        max-width: 60vw;
        max-height: 80vh;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-duration[b-spslufhbzd] {
        font-size: 12px;
        padding: 2px 6px;
    }

    .placeholder-icon[b-spslufhbzd] {
        font-size: 36px;
    }

    .placeholder-text[b-spslufhbzd] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .video-duration[b-spslufhbzd] {
        font-size: 11px;
        padding: 2px 4px;
    }

    .placeholder-icon[b-spslufhbzd] {
        font-size: 32px;
    }

    .placeholder-text[b-spslufhbzd] {
        font-size: 13px;
    }
}

/* Video controls styling */
.video-element[b-spslufhbzd]::-webkit-media-controls {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}

.video-element[b-spslufhbzd]::-webkit-media-controls-panel {
    background: transparent;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-play-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button {
    background-color: transparent;
    border: none;
    opacity: 1;
    -webkit-appearance: media-play-button;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-play-button {
    -webkit-appearance: media-play-button;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button {
    -webkit-appearance: media-pause-button;
}

/* Ensure control icons are visible */
.video-element[b-spslufhbzd]::-webkit-media-controls-play-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-mute-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-fullscreen-button {
    color: white;
    background-color: transparent;
    opacity: 1;
}

/* Loading state */
.mux-video-player.loading .video-element[b-spslufhbzd] {
    opacity: 0.5;
}

.mux-video-player.loading[b-spslufhbzd]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-spslufhbzd 1s linear infinite;
    z-index: 20;
}

@keyframes spin-b-spslufhbzd {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error state */
.mux-video-player.error .video-element[b-spslufhbzd] {
    display: none;
}

.mux-video-player.error .video-placeholder[b-spslufhbzd] {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #d32f2f;
}

.mux-video-player.error .placeholder-icon[b-spslufhbzd] {
    color: #d32f2f;
}

.mux-video-player.error .placeholder-text[b-spslufhbzd] {
    color: #d32f2f;
}
/* /Components/PhotoActionSheet.razor.rz.scp.css */
.photo-action-sheet-overlay[b-ibre0bybvg] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 24px;
}

.photo-action-sheet-overlay.visible[b-ibre0bybvg] {
    opacity: 1;
    visibility: visible;
}

.photo-action-sheet[b-ibre0bybvg] {
    background: #ffffff;
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-action-sheet-title[b-ibre0bybvg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #201f1d;
    margin: 0;
}

.photo-action-sheet-actions[b-ibre0bybvg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.photo-action-sheet-btn[b-ibre0bybvg] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid #E8E5E0;
    background-color: #ffffff;
    color: #201f1d;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.photo-action-sheet-btn:hover:not(:disabled)[b-ibre0bybvg] {
    background-color: #F5F3EF;
}

.photo-action-sheet-btn.cancel[b-ibre0bybvg] {
    background-color: #201f1d;
    color: #ffffff;
    border-color: #201f1d;
}

.photo-action-sheet-btn.cancel:hover:not(:disabled)[b-ibre0bybvg] {
    background-color: #3a3835;
}
/* /Components/PortfolioOverlay.razor.rz.scp.css */
/* Portfolio Overlay Styles */
.portfolio-overlay[b-71q9gx65pm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
}

.portfolio-back-button[b-71q9gx65pm] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.portfolio-back-button:hover[b-71q9gx65pm] {
    transform: scale(1.1);
}

.portfolio-back-button img[b-71q9gx65pm] {
    width: 100%;
    height: 100%;
    filter: invert(1);
}

.portfolio-main-image-container[b-71q9gx65pm],
.portfolio-main-media-container[b-71q9gx65pm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.portfolio-main-image[b-71q9gx65pm] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* Image Placeholder */
.image-placeholder[b-71q9gx65pm] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    min-height: 200px;
}

.image-loading[b-71q9gx65pm] {
    font-size: 16px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Desktop-specific sizing for portfolio overlay */
@media (min-width: 768px) {
    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 60px 40px 80px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
        object-fit: contain;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .portfolio-back-button[b-71q9gx65pm] {
        top: 20px;
        left: 20px;
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .portfolio-back-button:hover[b-71q9gx65pm] {
        background: rgba(0, 0, 0, 0.7);
        transform: scale(1.1);
    }

    .portfolio-back-button img[b-71q9gx65pm] {
        width: 24px;
        height: 24px;
        filter: invert(1);
    }

    .portfolio-dots-container[b-71q9gx65pm] {
        bottom: 40px;
        background: rgba(0, 0, 0, 0.3);
        padding: 8px 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
    }

    .portfolio-dot[b-71q9gx65pm] {
        width: 12px;
        height: 12px;
        margin: 0 4px;
    }

    .portfolio-dot.active[b-71q9gx65pm] {
        transform: scale(1.3);
    }
}

@media (min-width: 1024px) {
    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 80px 60px 100px 60px;
        max-width: 1400px;
    }

    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

@media (min-width: 1440px) {
    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 60vw;
        max-height: 80vh;
    }
}

.portfolio-dots-container[b-71q9gx65pm] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1001;
}

.portfolio-dot[b-71q9gx65pm] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.portfolio-dot.active[b-71q9gx65pm] {
    background: #ceb185;
    transform: scale(1.2);
}

.portfolio-dot:hover[b-71q9gx65pm] {
    background: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments for portfolio overlay */
@media (max-width: 480px) {
    .portfolio-back-button[b-71q9gx65pm] {
        top: 40px;
        left: 15px;
        width: 35px;
        height: 35px;
    }

    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 80px 15px 100px 15px;
    }

    .portfolio-dots-container[b-71q9gx65pm] {
        bottom: 80px;
    }

    .portfolio-dot[b-71q9gx65pm] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/Staff/ApplyDaysPanel.razor.rz.scp.css */
/* Staff day picker. Phone-first: every row is a 44px tap target. */

.apply-days[b-2b4jigkxsc] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.apply-days__head[b-2b4jigkxsc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.apply-days__title[b-2b4jigkxsc] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.apply-days__all[b-2b4jigkxsc] {
    background: none;
    border: 0;
    padding: .25rem 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #9E815C;
    cursor: pointer;
}

.apply-days__all:hover[b-2b4jigkxsc] { text-decoration: underline; }

.apply-days__none[b-2b4jigkxsc] {
    font-size: 13px;
    color: #6B645B;
    margin: 0;
}

.apply-days__list[b-2b4jigkxsc] {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apply-day[b-2b4jigkxsc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    background: #FFFFFF;
    cursor: pointer;
}

.apply-day--on[b-2b4jigkxsc] {
    border-color: #CEB185;
    background: #FDFBF7;
}

.apply-day--closed[b-2b4jigkxsc] {
    background: #F7F5F2;
    color: #8A857D;
    cursor: not-allowed;
}

.apply-day__box[b-2b4jigkxsc] {
    width: 20px;
    height: 20px;
    accent-color: #CEB185;
    flex: 0 0 auto;
}

.apply-day__text[b-2b4jigkxsc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.apply-day__date[b-2b4jigkxsc] {
    font-size: 14px;
    font-weight: 600;
}

.apply-day__hours[b-2b4jigkxsc] {
    font-size: 12px;
    color: #6B645B;
}

.apply-day__room[b-2b4jigkxsc] {
    font-size: 12px;
    font-weight: 600;
    color: #6B645B;
    white-space: nowrap;
}

.apply-day__room.is-full[b-2b4jigkxsc] { color: #7A5A1F; }

/* Stated before the button, not after the fact — days can't be changed once applied. */
.apply-days__warning[b-2b4jigkxsc] {
    font-size: 12px;
    line-height: 1.45;
    color: #6B645B;
    margin: 0 0 12px;
}

/* Matches the cta-gold contract used across the staff pages: gold fill, DARK ink. */
.apply-days[b-2b4jigkxsc]  .cta-gold.rz-button,
.apply-days[b-2b4jigkxsc]  .cta-gold.rz-button:hover {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
    min-height: 44px;
}

.apply-days[b-2b4jigkxsc]  .cta-gold.rz-button:disabled { opacity: .6; }
/* /Components/Staff/MyDaysPanel.razor.rz.scp.css */
/* Per-day outcome for a staffer's own application. */

.my-days[b-d3kj5jv17x] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.my-days__banner[b-d3kj5jv17x] {
    border: 1px solid #E8E5E0;
    border-left-width: 4px;
    border-radius: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    margin-bottom: 12px;
}

.my-days__banner--good[b-d3kj5jv17x]    { border-left-color: #1F5F32; }
.my-days__banner--waiting[b-d3kj5jv17x] { border-left-color: #CEB185; }
.my-days__banner--bad[b-d3kj5jv17x]     { border-left-color: #C0392B; }
.my-days__banner--neutral[b-d3kj5jv17x] { border-left-color: #8A857D; }
/* A missed or unclosed shift. Amber, not the rejection red: one is an outcome to explain, the
   other is a decision that went against them. */
.my-days__banner--warn[b-d3kj5jv17x]    { border-left-color: #B8860B; }

.my-days__heading[b-d3kj5jv17x] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.my-days__detail[b-d3kj5jv17x] {
    font-size: 13px;
    line-height: 1.5;
    color: #6B645B;
    margin: 6px 0 0;
}

.my-days__list[b-d3kj5jv17x] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-day[b-d3kj5jv17x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #E8E5E0;
    border-left-width: 3px;
    border-radius: 10px;
    background: #FFFFFF;
}

.my-day--good[b-d3kj5jv17x]    { border-left-color: #1F5F32; }
.my-day--waiting[b-d3kj5jv17x] { border-left-color: #CEB185; }
.my-day--bad[b-d3kj5jv17x]     { border-left-color: #C0392B; }
.my-day--neutral[b-d3kj5jv17x] { border-left-color: #DDD7CC; }
.my-day--warn[b-d3kj5jv17x]    { border-left-color: #B8860B; }
.my-day--due[b-d3kj5jv17x]     { border-left-color: #CEB185; }

.my-day__text[b-d3kj5jv17x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.my-day__date[b-d3kj5jv17x] { font-size: 14px; font-weight: 600; }
.my-day__hours[b-d3kj5jv17x] { font-size: 12px; color: #6B645B; }

.my-day__status[b-d3kj5jv17x] {
    font-size: 12px;
    font-weight: 600;
    color: #6B645B;
    white-space: nowrap;
}

.my-day--bad .my-day__status[b-d3kj5jv17x] { color: #C0392B; }
.my-day--good .my-day__status[b-d3kj5jv17x] { color: #1F5F32; }
.my-day--warn .my-day__status[b-d3kj5jv17x] { color: #B8860B; }
.my-day--due .my-day__status[b-d3kj5jv17x]  { color: #201F1D; }
/* /Components/Staff/Receipts/DeclarationEditor.razor.rz.scp.css */
/* The line-item form. Moved here wholesale from ReceiptUpload.razor.css when the editor became
   a component shared with the receipt detail page — scoped CSS follows the markup, so leaving it
   behind would have silently unstyled every field. */

.error-text[b-6hfjdcs6nh] {
    color: #C0392B;
    font-size: 14px;
    line-height: 1.4;
    margin: 8px 0;
}

.empty-heading[b-6hfjdcs6nh] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #201F1D;
    margin-bottom: 8px;
}

.empty-body[b-6hfjdcs6nh] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.5;
    margin: 0;
}

/* ── Self-declaration (Phase 04.9) — line-item rows + read-only claimed total. ──
   White/cream fields, 1px #E8E5E0 border, 8px radius, focus border #CEB185 (NEVER a gold
   fill). 8px/16px rhythm. Gold stays reserved for the .upload-cta below. */
.decl-section[b-6hfjdcs6nh] {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.decl-empty[b-6hfjdcs6nh] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.decl-rows[b-6hfjdcs6nh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.decl-row[b-6hfjdcs6nh] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 16px;
}

.decl-field[b-6hfjdcs6nh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.decl-brand[b-6hfjdcs6nh] { flex: 1 1 160px; min-width: 140px; }
.decl-qty[b-6hfjdcs6nh]   { flex: 0 1 88px; }
.decl-total[b-6hfjdcs6nh] { flex: 0 1 120px; }

.decl-label[b-6hfjdcs6nh] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.4;
}

.decl-input[b-6hfjdcs6nh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

.decl-input:focus[b-6hfjdcs6nh] {
    outline: none;
    border-color: #CEB185;
}

/* Radzen autocomplete — match the .form-input field styling; focus border #CEB185 (no gold fill). */
[b-6hfjdcs6nh] .brand-ac.rz-autocomplete {
    width: 100%;
    min-height: 44px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    box-sizing: border-box;
}

[b-6hfjdcs6nh] .brand-ac.rz-autocomplete .rz-inputtext {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    background: transparent;
    border: none;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
}

[b-6hfjdcs6nh] .brand-ac.rz-autocomplete:focus-within {
    border-color: #CEB185;
}

/* Icon-only remove control — ≥44px touch target, never gold. */
.decl-remove[b-6hfjdcs6nh] {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    border-radius: 8px;
    color: #C0392B;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.decl-remove:hover[b-6hfjdcs6nh] {
    border-color: #C0392B;
}

/* Add line item — neutral outline button (NOT gold). */
.decl-add[b-6hfjdcs6nh] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 8px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.decl-add:hover[b-6hfjdcs6nh] {
    background: #F4ECDF;
}

/* Read-only claimed total — text, never an input. */
.decl-total-row[b-6hfjdcs6nh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #E8E5E0;
    padding-top: 16px;
}

.decl-total-label[b-6hfjdcs6nh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.decl-total-title[b-6hfjdcs6nh] {
    font-size: 16px;
    color: #201F1D;
    line-height: 1.5;
}

.decl-total-caption[b-6hfjdcs6nh] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.4;
}

.decl-total-figure[b-6hfjdcs6nh] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
}

.decl-error[b-6hfjdcs6nh] {
    margin: 0;
}

/* /Components/Staff/Receipts/ReceiptStatusBadge.razor.rz.scp.css */
/* ── Semantic status badges (NOT the gold accent) ── */
.rpt-badge[b-6xbcw0b1jt] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    /* Never shrink inside a flex row — the tile meta column is flex, and "Awaiting review" on a
       390px phone is exactly the label that would clip. */
    flex: 0 0 auto;
}

.rpt-badge--neutral[b-6xbcw0b1jt] {
    background: #ECEAE6;
    color: #4A4843;
}

.rpt-badge--attention[b-6xbcw0b1jt] {
    background: #FBEFD6;
    color: #8A6D1E;
}

.rpt-badge--ok[b-6xbcw0b1jt] {
    background: #E3F1E6;
    color: #2E6B3A;
}

.rpt-badge--rejected[b-6xbcw0b1jt] {
    background: #F7E2E0;
    color: #C0392B;
}

/* /Components/Staff/Schedule/EventDetailPanel.razor.rz.scp.css */
/* Panel chrome only. Where the panel SITS — sticky column vs slide-over sheet — is owned by the
   hosting page (MySchedule.razor.css .ms-panel), because that is a layout decision about the page,
   not about this component. */

.pnl[b-tedz00qdfr] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    background: #FFFFFF;
}

/* ── Hero ───────────────────────────────────────────────────────────────────────── */

.pnl__hero[b-tedz00qdfr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: #CEB185;
    color: #201F1D;
}

.pnl__hero-body[b-tedz00qdfr] {
    flex: 1 1 auto;
    min-width: 0;
}

.pnl__store[b-tedz00qdfr] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.pnl__line[b-tedz00qdfr] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    margin: 0 0 4px;
    color: #3B3730;
}

.pnl__line:last-child[b-tedz00qdfr] { margin-bottom: 0; }
.pnl__line i[b-tedz00qdfr] { width: 15px; flex: 0 0 auto; text-align: center; }

.pnl__days[b-tedz00qdfr] {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pnl__back[b-tedz00qdfr],
.pnl__close[b-tedz00qdfr] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    color: #201F1D;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pnl__back:hover[b-tedz00qdfr],
.pnl__close:hover[b-tedz00qdfr] { background: rgba(255, 255, 255, .8); }

.pnl__back:focus-visible[b-tedz00qdfr],
.pnl__close:focus-visible[b-tedz00qdfr] {
    outline: 2px solid #201F1D;
    outline-offset: 2px;
}

/* Back arrow is the sheet's affordance; the × is the column's. Exactly one shows at a time — a
   sticky column has nothing to go "back" to, and a full-screen sheet reads as a page, not a dialog.
   Defaults are the mobile arrangement; the 768px block below swaps them. */
.pnl__close[b-tedz00qdfr] { display: none; }

@media (min-width: 768px) {
    .pnl__back[b-tedz00qdfr] { display: none; }
    .pnl__close[b-tedz00qdfr] { display: inline-flex; }
}

/* ── Banner ─────────────────────────────────────────────────────────────────────── */

.pnl__banner[b-tedz00qdfr] {
    margin: 0;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.45;
}

.pnl__banner--bad[b-tedz00qdfr] { background: #F7E1E1; color: #7A1F1F; }

/* ── Sub-tabs ───────────────────────────────────────────────────────────────────── */

.pnl__tabs[b-tedz00qdfr] {
    display: flex;
    border-bottom: 1px solid #E8E5E0;
    background: #FFFFFF;
}

.pnl__tab[b-tedz00qdfr] {
    flex: 1 1 0;
    min-height: 46px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #8A8378;
    cursor: pointer;
}

.pnl__tab--active[b-tedz00qdfr] {
    color: #201F1D;
    border-bottom-color: #CEB185;
}

.pnl__tab:focus-visible[b-tedz00qdfr] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
}

/* ── Body ───────────────────────────────────────────────────────────────────────── */

.pnl__body[b-tedz00qdfr] {
    flex: 1 1 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pnl__card[b-tedz00qdfr] {
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 14px;
    background: #FFFFFF;
}

.pnl__card-title[b-tedz00qdfr] {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 10px;
}

.pnl__facts[b-tedz00qdfr] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pnl__facts > div[b-tedz00qdfr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pnl__facts dt[b-tedz00qdfr] {
    flex: 0 0 78px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6B645B;
    margin: 0;
}

.pnl__facts dt i[b-tedz00qdfr] { color: #B89970; width: 14px; text-align: center; }

.pnl__facts dd[b-tedz00qdfr] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pnl__desc[b-tedz00qdfr] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4F4A43;
    /* Preserve the line breaks the admin actually typed. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pnl__link[b-tedz00qdfr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #201F1D;
    text-decoration: none;
}

.pnl__link:hover[b-tedz00qdfr] { border-color: #CEB185; }

.pnl__none[b-tedz00qdfr] {
    margin: 0;
    font-size: 13px;
    color: #8A8378;
}

.pnl__withdraw[b-tedz00qdfr] {
    width: 100%;
    min-height: 44px;
    border: 1px solid #E3DCD0;
    border-radius: 10px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #C0392B;
    cursor: pointer;
}

.pnl__withdraw:hover:not(:disabled)[b-tedz00qdfr] { background: #FDF6F5; border-color: #C0392B; }
.pnl__withdraw:disabled[b-tedz00qdfr] { opacity: .6; cursor: default; }

/* ── Footer CTA ─────────────────────────────────────────────────────────────────── */

.pnl__foot[b-tedz00qdfr] {
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    background: #FFFFFF;
    border-top: 1px solid #E8E5E0;
}

/* Gold fill, DARK ink. */
.pnl__cta[b-tedz00qdfr] {
    width: 100%;
    min-height: 48px;
    border: 1px solid #CEB185;
    border-radius: 10px;
    background: #CEB185;
    color: #201F1D;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pnl__cta:hover[b-tedz00qdfr] { background: #B89970; border-color: #B89970; }

/* MyDaysPanel sits inside a .pnl__card that already has a border and padding, so its own outer
   margin would double the gap. */
.pnl__card[b-tedz00qdfr]  .my-days__banner { margin-top: 0; }
/* /Components/Staff/Schedule/MonthCalendar.razor.rz.scp.css */
/* Month grid — the geometry follows Pages/Availability.razor.css (7-column CSS grid, gold
   selection, dot markers under the numeral), re-stated here because that stylesheet is scoped to
   its own page and cannot be shared. */

.cal[b-lk7sg6m3lm] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.cal__head[b-lk7sg6m3lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cal__title[b-lk7sg6m3lm] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.cal__nav[b-lk7sg6m3lm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal__step[b-lk7sg6m3lm] {
    min-width: 36px;
    min-height: 36px;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #201F1D;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cal__step:hover:not(:disabled)[b-lk7sg6m3lm] { border-color: #CEB185; }
.cal__step:disabled[b-lk7sg6m3lm] { opacity: .35; cursor: default; }

.cal__today[b-lk7sg6m3lm] {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    cursor: pointer;
}

.cal__today:hover:not(:disabled)[b-lk7sg6m3lm] { border-color: #CEB185; }
.cal__today:disabled[b-lk7sg6m3lm] { opacity: .35; cursor: default; }

.cal__weekdays[b-lk7sg6m3lm],
.cal__grid[b-lk7sg6m3lm] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal__weekday[b-lk7sg6m3lm] {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #8A8378;
    padding-bottom: 6px;
}

.cal__grid[b-lk7sg6m3lm] { row-gap: 2px; }

.cal__cell[b-lk7sg6m3lm] {
    /* 44px min tap target, per the app's phone convention. */
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: #201F1D;
}

.cal__cell--blank[b-lk7sg6m3lm] { visibility: hidden; }

.cal__num[b-lk7sg6m3lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

/* A date with nothing on it is a <span>, so only the interactive ones get affordances. */
.cal__cell--has[b-lk7sg6m3lm] {
    cursor: pointer;
}

.cal__cell--has .cal__num[b-lk7sg6m3lm] { font-weight: 600; }
.cal__cell--has:hover .cal__num[b-lk7sg6m3lm] { background: #F7F3EC; }

/* Today is an outline; selection is a fill. Both can apply at once and must stay distinguishable. */
.cal__cell--today .cal__num[b-lk7sg6m3lm] { box-shadow: inset 0 0 0 1px #CEB185; }

.cal__cell--selected .cal__num[b-lk7sg6m3lm],
.cal__cell--selected:hover .cal__num[b-lk7sg6m3lm] {
    background: #CEB185;
    color: #201F1D;
}

.cal__cell--has:focus-visible[b-lk7sg6m3lm] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
    border-radius: 8px;
}

.cal__dots[b-lk7sg6m3lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 6px;
}

.cal__dot[b-lk7sg6m3lm] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Status colours come from the app's semantic palette, NOT from gold — gold is reserved for the
   primary CTA and selection, so using it for "you're booked" would make two different things look
   like the same thing. */
.cal__dot--confirmed[b-lk7sg6m3lm] { background: #1F5F32; }
.cal__dot--pending[b-lk7sg6m3lm]   { background: #B08A2E; }
.cal__dot--available[b-lk7sg6m3lm] { background: #C9BCA3; }
.cal__dot--cancelled[b-lk7sg6m3lm] { background: #C0392B; }

.cal__key[b-lk7sg6m3lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: 11.5px;
    color: #6B645B;
}

.cal__key li[b-lk7sg6m3lm] {
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 360px) {
    .cal__num[b-lk7sg6m3lm] { width: 28px; height: 28px; font-size: 14px; }
    .cal__title[b-lk7sg6m3lm] { font-size: 16px; }
}
/* /Components/Staff/Schedule/MyShiftsList.razor.rz.scp.css */
.shifts[b-7q1nkgfb9o] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.shifts__section + .shifts__section[b-7q1nkgfb9o] { margin-top: 22px; }

.shifts__heading[b-7q1nkgfb9o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}

.shifts__heading--flush[b-7q1nkgfb9o] { margin: 0; }

.shifts__count[b-7q1nkgfb9o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #F0EDE8;
    color: #6B645B;
    font-size: 11.5px;
    font-weight: 600;
}

.shifts__list[b-7q1nkgfb9o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shifts__toggle[b-7q1nkgfb9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    margin-bottom: 10px;
}

.shifts__toggle:focus-visible[b-7q1nkgfb9o] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
    border-radius: 8px;
}

.shifts__chevron[b-7q1nkgfb9o] {
    font-size: 20px;
    line-height: 1;
    color: #8A8378;
    transform: rotate(90deg);
    transition: transform .18s ease;
}

.shifts__chevron.is-open[b-7q1nkgfb9o] { transform: rotate(-90deg); }

.shifts__loading[b-7q1nkgfb9o] {
    font-size: 13px;
    color: #8A8378;
    margin: 0;
    padding: 8px 0;
}

.shifts__empty[b-7q1nkgfb9o] {
    text-align: center;
    padding: 48px 16px;
}

.shifts__empty-icon i[b-7q1nkgfb9o] {
    font-size: 38px;
    color: #C9BCA3;
}

.shifts__empty-title[b-7q1nkgfb9o] {
    font-size: 17px;
    font-weight: 600;
    margin: 14px 0 6px;
}

.shifts__empty-sub[b-7q1nkgfb9o] {
    font-size: 13px;
    line-height: 1.5;
    color: #8A8378;
    margin: 0 0 18px;
}

/* Gold fill, DARK ink — the app's primary CTA contract. */
.shifts__empty-btn[b-7q1nkgfb9o] {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid #CEB185;
    border-radius: 10px;
    background: #CEB185;
    color: #201F1D;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.shifts__empty-btn:hover[b-7q1nkgfb9o] {
    background: #B89970;
    border-color: #B89970;
}
/* /Components/Staff/Schedule/ScheduleRow.razor.rz.scp.css */
/* Row card. Tone drives the left spine and the badge together — see ScheduleRow.Tone. */

.srow[b-n4rojuxaeh] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.srow:hover[b-n4rojuxaeh] { border-color: #CEB185; }

.srow--selected[b-n4rojuxaeh] {
    border-color: #CEB185;
    box-shadow: 0 0 0 1px #CEB185;
}

.srow:focus-visible[b-n4rojuxaeh] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.srow__spine[b-n4rojuxaeh] {
    flex: 0 0 4px;
    align-self: stretch;
}

.srow__body[b-n4rojuxaeh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.srow__top[b-n4rojuxaeh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.srow__store[b-n4rojuxaeh] {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.srow__line[b-n4rojuxaeh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4F4A43;
    min-width: 0;
}

.srow__line i[b-n4rojuxaeh] {
    width: 15px;
    flex: 0 0 auto;
    text-align: center;
    color: #B89970;
}

.srow__badge[b-n4rojuxaeh] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Semantic palette, matching the .pill-* vocabulary used across the admin surfaces. Gold is
   deliberately absent — it means "primary action" everywhere else in the app. */
.srow--confirmed .srow__spine[b-n4rojuxaeh] { background: #1F5F32; }
.srow__badge--confirmed[b-n4rojuxaeh] { background: #E6F4EA; color: #1F5F32; }

.srow--pending .srow__spine[b-n4rojuxaeh] { background: #B08A2E; }
.srow__badge--pending[b-n4rojuxaeh] { background: #F7F1DC; color: #7A6020; }

.srow--open .srow__spine[b-n4rojuxaeh] { background: #CEB185; }
.srow__badge--open[b-n4rojuxaeh] { background: #F4ECDF; color: #7A5A1F; }

.srow--cancelled .srow__spine[b-n4rojuxaeh] { background: #C0392B; }
.srow__badge--cancelled[b-n4rojuxaeh] { background: #F7E1E1; color: #7A1F1F; }

.srow--neutral .srow__spine[b-n4rojuxaeh] { background: #C9C3B9; }
.srow__badge--neutral[b-n4rojuxaeh] { background: #EAE5DC; color: #4A4640; }

/* A missed shift, or one nobody checked out of. Amber rather than the cancelled red: one is an
   outcome the staffer may need to explain, the other is the event being called off. */
.srow--warn .srow__spine[b-n4rojuxaeh] { background: #B8860B; }
.srow__badge--warn[b-n4rojuxaeh] { background: #FAF0D8; color: #6B4E07; }
/* /Components/Staff/Schedule/ScheduleScopeFilter.razor.rz.scp.css */
/* Pill + sheet for the Upcoming-events lens.

   The sheet geometry follows Components/Admin/Staff/StaffRosterFilters.razor.css — centred card
   from 520px up, full-bleed below. That stylesheet is scoped to its own component, so the pattern
   is re-stated here rather than shared; keep the two in step if either moves.

   The segmented control and the chips deliberately use the same vocabulary as
   Pages/Staff/Account.razor, because this sheet is the same choice the member made there. */

/* ── Pill ── */

.scope-pill[b-is2txvaww9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #E3DCD0;
    border-radius: 999px;
    background: #FCFAF6;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #201F1D;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.scope-pill:hover[b-is2txvaww9] {
    background: #F5F0E7;
}

/* Only when the member has moved off their own default, so an overridden view is visibly
   distinct from the one they'd get on a fresh visit. */
.scope-pill--on[b-is2txvaww9] {
    background: #CEB185;
    border-color: #CEB185;
}

.scope-pill--on:hover[b-is2txvaww9] {
    background: #B89970;
    border-color: #B89970;
}

.scope-pill i[b-is2txvaww9] {
    font-size: 13px;
    color: #9E815C;
}

.scope-pill--on i[b-is2txvaww9] {
    color: #201F1D;
}

.scope-pill__caret[b-is2txvaww9] {
    font-size: 10px !important;
}

.scope-pill__label[b-is2txvaww9] {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scope-pill:focus-visible[b-is2txvaww9] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

/* ── Sheet ── */

.scope-backdrop[b-is2txvaww9] {
    position: fixed;
    inset: 0;
    /* Above the schedule's own slide-over panel (1100), which is itself above StaffTopHeader and
       the bottom nav (both 1000). */
    z-index: 1300;
    background: rgba(32, 31, 29, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.scope-sheet[b-is2txvaww9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 12px 40px rgba(32, 31, 29, 0.25);
}

.scope-sheet__head[b-is2txvaww9] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #E8E5E0;
}

.scope-sheet__title[b-is2txvaww9] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.scope-sheet__close[b-is2txvaww9] {
    position: absolute;
    left: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.scope-sheet__close img[b-is2txvaww9] {
    width: 28px;
    object-fit: contain;
}

.scope-sheet__reset[b-is2txvaww9] {
    position: absolute;
    right: 12px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #CEB185;
    cursor: pointer;
}

.scope-sheet__reset:hover:not(:disabled)[b-is2txvaww9] {
    color: #B89970;
}

/* Disabled rather than hidden: a control that appears only once you've changed something is a
   control nobody finds when they need it. */
.scope-sheet__reset:disabled[b-is2txvaww9] {
    color: #C7C1B8;
    cursor: default;
}

.scope-sheet__close:focus-visible[b-is2txvaww9],
.scope-sheet__reset:focus-visible[b-is2txvaww9],
.scope-sheet__apply:focus-visible[b-is2txvaww9] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.scope-sheet__body[b-is2txvaww9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px;
}

.scope-sheet__divider[b-is2txvaww9] {
    height: 1px;
    background: #E8E5E0;
    margin: 18px 0;
}

.scope-field[b-is2txvaww9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 16px;
}

.scope-label[b-is2txvaww9] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scope-hint[b-is2txvaww9] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8A8378;
}

/* ── Controls (mirrors Pages/Staff/Account.razor) ── */

.scope-segmented[b-is2txvaww9] {
    display: flex;
    gap: 0;
    border: 1px solid #E3DCD0;
    border-radius: 10px;
    overflow: hidden;
}

.scope-segmented .seg[b-is2txvaww9] {
    flex: 1;
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    background: #FCFAF6;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6B645B;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.scope-segmented .seg + .seg[b-is2txvaww9] {
    border-left: 1px solid #E3DCD0;
}

.scope-segmented .seg--active[b-is2txvaww9] {
    background: #CEB185;
    color: #201F1D;
}

.scope-segmented .seg:focus-visible[b-is2txvaww9] {
    outline: 2px solid #9E815C;
    outline-offset: -2px;
}

.scope-chips[b-is2txvaww9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scope-chips .chip[b-is2txvaww9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #E3DCD0;
    border-radius: 999px;
    background: #FCFAF6;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #201F1D;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.scope-chips .chip--active[b-is2txvaww9] {
    background: #CEB185;
    border-color: #CEB185;
    font-weight: 600;
}

.scope-chips .chip:focus-visible[b-is2txvaww9] {
    outline: 2px solid #9E815C;
    outline-offset: 2px;
}

.chip__n[b-is2txvaww9] {
    font-size: 11.5px;
    font-weight: 600;
    color: #8A8378;
}

.chip--active .chip__n[b-is2txvaww9] {
    color: #6B5637;
}

/* ── Foot ── */

.scope-sheet__foot[b-is2txvaww9] {
    flex-shrink: 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E8E5E0;
    background: #FFFFFF;
}

.scope-sheet__apply[b-is2txvaww9] {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: #201F1D;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.scope-sheet__apply:hover[b-is2txvaww9] {
    background: #3A3835;
}

/* Below 520 the sheet goes full-bleed — a centred card with 24px of backdrop either side wastes
   the width a phone hasn't got. */
@media (max-width: 519px) {
    .scope-backdrop[b-is2txvaww9] {
        padding: 0;
        align-items: stretch;
    }

    .scope-sheet[b-is2txvaww9] {
        max-width: none;
        border-radius: 0;
    }

    .scope-sheet__head[b-is2txvaww9] {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
}
/* /Components/Staff/Schedule/ScheduleTabs.razor.rz.scp.css */
.stabs[b-wm8n2h2ocs] {
    display: flex;
    gap: 0;
    border: 1px solid #E3DCD0;
    border-radius: 10px;
    overflow: hidden;
    background: #FCFAF6;
}

.stabs__seg[b-wm8n2h2ocs] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6B645B;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.stabs__seg + .stabs__seg[b-wm8n2h2ocs] { border-left: 1px solid #E3DCD0; }

.stabs__seg:hover:not(.stabs__seg--active)[b-wm8n2h2ocs] { background: #F7F3EC; }

.stabs__seg:focus-visible[b-wm8n2h2ocs] {
    outline: 2px solid #CEB185;
    outline-offset: -2px;
}

/* Gold fill, DARK ink — the app's primary contract. White-on-gold fails contrast at this weight. */
.stabs__seg--active[b-wm8n2h2ocs] {
    background: #CEB185;
    color: #201F1D;
}

.stabs__badge[b-wm8n2h2ocs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #6B645B;
    font-size: 11px;
    font-weight: 600;
}

.stabs__seg--active .stabs__badge[b-wm8n2h2ocs] {
    background: #201F1D;
    color: #FFFFFF;
}
/* /Components/Staff/Schedule/UpcomingEventsList.razor.rz.scp.css */
.ups[b-8u05k6u8xc] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.ups__head[b-8u05k6u8xc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}

/* Grouped so the pill and the day-filter escape hatch stay together on the right and wrap as a
   unit — on a 360px screen a long town name would otherwise push "Show all" onto its own line. */
.ups__actions[b-8u05k6u8xc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

.ups__title[b-8u05k6u8xc] {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.ups__clear[b-8u05k6u8xc] {
    border: 0;
    background: none;
    padding: 4px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #9E815C;
    cursor: pointer;
}

.ups__clear:hover[b-8u05k6u8xc] { text-decoration: underline; }

.ups__list[b-8u05k6u8xc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ups__empty[b-8u05k6u8xc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
}

.ups__empty-text[b-8u05k6u8xc] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8A8378;
}

/* The way out of an empty list, one tap. Gold-filled with dark ink — this is the primary action
   on a screen that otherwise has none. */
.ups__empty-cta[b-8u05k6u8xc] {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #CEB185;
    border-radius: 999px;
    background: #CEB185;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #201F1D;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.ups__empty-cta:hover[b-8u05k6u8xc] {
    background: #B89970;
    border-color: #B89970;
}

.ups__empty-cta:focus-visible[b-8u05k6u8xc] {
    outline: 2px solid #9E815C;
    outline-offset: 2px;
}

.ups__hint[b-8u05k6u8xc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #FBF8F3;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6B645B;
}

.ups__hint i[b-8u05k6u8xc] { color: #B89970; }

/* The hint tells someone to select an event to open the side panel. On a phone there is no side
   panel and the sheet is the obvious next tap, so it is noise. */
@media (max-width: 767px) {
    .ups__hint[b-8u05k6u8xc] { display: none; }
}
/* /Components/Staff/Shift/ShiftPanel.razor.rz.scp.css */
/*
   One cream surface against the app's white cards. The cream already IS the on-shift signal in
   production (it is the attendance card's colour on the event page), and one distinct surface is
   exactly what "you're on shift" needs — so the panel keeps it and the rest of the screen is left
   alone. Do not repaint anything around this.

   Type and spacing follow the staff dashboard: Montserrat, 12px radius, #E8E5E0 hairlines,
   #201F1D ink, #6B645B secondary. Every touch target is at least 44px.
*/

.shift-panel[b-cpsbkx1p6g] {
    font-family: 'Montserrat', sans-serif;
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 20px;
    color: #201F1D;
}

/* ── Heading ───────────────────────────────────────────────────────────────── */

.shift-panel__eyebrow[b-cpsbkx1p6g] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.shift-panel__sub[b-cpsbkx1p6g] {
    font-size: 13px;
    font-weight: 400;
    color: #6B645B;
    margin-top: 2px;
}

/* One sentence, and only in its own condition. */
.shift-panel__note[b-cpsbkx1p6g] {
    font-size: 13px;
    line-height: 1.5;
    color: #6B645B;
    margin: 12px 0 0;
}

.shift-panel__error[b-cpsbkx1p6g] {
    font-size: 13px;
    line-height: 1.5;
    color: #C0392B;
    margin: 12px 0 0;
}

/* ── Figures ───────────────────────────────────────────────────────────────── */

/* Three small figures on one line, label above value. No tiles, no borders, no colour —
   this is status, not something to act on. */
.shift-panel__figures[b-cpsbkx1p6g] {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(32, 31, 29, 0.10);
}

.shift-figure[b-cpsbkx1p6g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shift-figure__label[b-cpsbkx1p6g] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B645B;
}

.shift-figure__value[b-cpsbkx1p6g] {
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;  /* a live counter must not jitter the row */
    color: #201F1D;
}

/* ── List rows ─────────────────────────────────────────────────────────────── */

/* Rows read as a short list, not as buttons competing with the CTA. */
.shift-panel__rows[b-cpsbkx1p6g] {
    margin-top: 16px;
    padding-top: 4px;
    border-top: 1px solid rgba(32, 31, 29, 0.10);
}

.shift-row[b-cpsbkx1p6g] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(32, 31, 29, 0.06);
    font-family: inherit;
    font-size: 14px;
    color: #201F1D;
    text-align: left;
    cursor: pointer;
}

.shift-row:last-child[b-cpsbkx1p6g] { border-bottom: 0; }

.shift-row__label[b-cpsbkx1p6g] { flex: 1 1 auto; font-weight: 500; }

.shift-row__value[b-cpsbkx1p6g] {
    font-size: 13px;
    font-weight: 600;
    color: #6B645B;
    font-variant-numeric: tabular-nums;
}

.shift-row__chevron[b-cpsbkx1p6g] {
    font-size: 18px;
    line-height: 1;
    color: #B0A89C;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */

/* The one gold thing on the screen. Dark ink on light gold — never white. */
.shift-cta[b-cpsbkx1p6g] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 20px;
    padding: 12px 16px;
    background: #CEB185;
    border: 1px solid #CEB185;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
    cursor: pointer;
}

.shift-cta:hover:not(:disabled)[b-cpsbkx1p6g] { background: #B89970; border-color: #B89970; }
.shift-cta:disabled[b-cpsbkx1p6g] { opacity: 0.55; cursor: default; }

/* One line under the CTA, saying what the tap will do. Quiet enough not to read as a warning. */
.shift-panel__cta-note[b-cpsbkx1p6g] {
    font-size: 12px;
    line-height: 1.4;
    color: #6B645B;
    margin: 8px 0 0;
    text-align: center;
}

/* Visually unequal to the CTA on purpose — there is no decision to make about which is
   "the" button. */
.shift-secondary[b-cpsbkx1p6g] {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(32, 31, 29, 0.18);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    cursor: pointer;
}

.shift-secondary:hover:not(:disabled)[b-cpsbkx1p6g] { border-color: #201F1D; }
.shift-secondary:disabled[b-cpsbkx1p6g] { opacity: 0.55; cursor: default; }

/* Permanent, but visually last, and never a button. */
.shift-panel__report[b-cpsbkx1p6g] {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 0 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #6B645B;
    text-decoration: underline;
    cursor: pointer;
}

.shift-panel__report:hover[b-cpsbkx1p6g] { color: #201F1D; }

/* A loose end, not a thing happening now — so it is quieter than a live shift. */
.shift-panel--unfinished[b-cpsbkx1p6g] {
    background: #FFFFFF;
    border-left: 4px solid #CEB185;
}
/* /Components/Staff/StaffBottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-kkey4snjat] {
    flex-shrink: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-kkey4snjat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.nav-item[b-kkey4snjat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-kkey4snjat] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-kkey4snjat] {
    color: #CEB185;
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-kkey4snjat]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

.nav-icon[b-kkey4snjat] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-kkey4snjat] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
    object-fit: contain;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Specific fix for Profile icon to match other icons */
.nav-item:first-child .nav-icon img[b-kkey4snjat] {
    width: 48px;
    height: 48px;
}

/* Fix for Events icon to make it wider */
.nav-item:nth-child(4) .nav-icon img[b-kkey4snjat] {
    width: 32px;
    height: 24px;
}

.nav-item.active .nav-icon img[b-kkey4snjat] {
    filter: brightness(0) saturate(100%) invert(65%) sepia(85%) saturate(350%) hue-rotate(4deg) brightness(95%) contrast(90%) !important;
}

.nav-label[b-kkey4snjat] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-kkey4snjat] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .bottom-nav-container[b-kkey4snjat],
    .bottom-nav-bar[b-kkey4snjat] {
        max-width: 100%;
    }
}
/* /Components/Staff/StaffEventUnavailable.razor.rz.scp.css */
.staff-event-unavailable[b-hpmainjh2y] {
    font-family: 'Montserrat', sans-serif;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(32, 31, 29, 0.04);
    padding: 28px 20px;
    margin-top: 16px;
    text-align: center;
}

.seu-mark[b-hpmainjh2y] {
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #F6F1E9;
    color: #B89970;
    font-size: 20px;
    font-weight: 600;
}

.seu-heading[b-hpmainjh2y] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #201F1D;
    margin: 0 0 8px;
}

.seu-body[b-hpmainjh2y] {
    font-size: 13px;
    line-height: 1.5;
    color: #6B645B;
    margin: 0 auto 20px;
    max-width: 34ch;
}

.seu-cta[b-hpmainjh2y] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid #CEB185;
    border-radius: 8px;
    background: #CEB185;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.seu-cta:hover[b-hpmainjh2y] {
    background: #B89970;
    border-color: #B89970;
    color: #201F1D;
}

.seu-secondary[b-hpmainjh2y] {
    display: inline-block;
    margin-top: 12px;
    color: #6B645B;
    font-size: 13px;
    text-decoration: underline;
}
/* /Components/StaffTopHeader.razor.rz.scp.css */
/* Staff Top Header */
.staff-top-header[b-aeq8r2xqwy] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    max-width: 480px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0) 20px 0 20px;
    z-index: 1000;
}

/* Pairs with MainLayout's .app-layout--wide. Same 768px gate and same 1180px bound, so the
   header and the content it sits above always agree on the measure. Below 768 the header keeps
   its 480px cap — the wide shell is inert there too. */
@media (min-width: 768px) {
    .staff-top-header--wide[b-aeq8r2xqwy] {
        max-width: 1180px;
    }
}

.header-logo[b-aeq8r2xqwy] {
    position: absolute;
    left: 20px;
    top: calc(env(safe-area-inset-top, 0) + 15px);
    height: 29px;
    width: 175px;
}

.header-logo img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-aeq8r2xqwy] {
    position: absolute;
    right: 20px;
    top: calc(env(safe-area-inset-top, 0) + 10px);
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-notifications[b-aeq8r2xqwy] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-aeq8r2xqwy] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-notifications:active[b-aeq8r2xqwy] {
    transform: scale(0.95);
}

.notification-icon[b-aeq8r2xqwy] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-aeq8r2xqwy] {
        width: 150px;
    }

    .header-actions[b-aeq8r2xqwy] {
        gap: 10px;
    }

    .header-notifications[b-aeq8r2xqwy] {
        width: 36px;
        height: 36px;
    }

    .notification-icon[b-aeq8r2xqwy] {
        width: 36px;
        height: 36px;
    }

    .header-avatar[b-aeq8r2xqwy] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-aeq8r2xqwy] {
        width: 130px;
    }

    .header-actions[b-aeq8r2xqwy] {
        gap: 8px;
    }

    .header-notifications[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
    }

    .notification-icon[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
    }

    .header-avatar[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .header-avatar__menu[b-aeq8r2xqwy] {
        top: 42px;
    }
}

/* Phase 2.6 additions: bell badge + message icon */
.notification-icon[b-aeq8r2xqwy] {
    position: relative;
}
.notification-badge[b-aeq8r2xqwy] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #CEB185;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}
.notification-badge span[b-aeq8r2xqwy] {
    line-height: 1;
}
/* Profile avatar trigger + dropdown menu (Messages, Settings, Logout) */
.header-avatar-wrapper[b-aeq8r2xqwy] {
    position: relative;
    display: flex;
    align-items: center;
}

.header-avatar[b-aeq8r2xqwy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: visible;
    border: 0;
    padding: 0;
    background: #CEB185;
    color: #FFFFFF;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

/* Photos sit on white so transparent PNGs don't show the gold initials backdrop. */
.header-avatar.has-photo[b-aeq8r2xqwy] {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #E8E5E0;
}

.header-avatar img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.header-avatar:hover[b-aeq8r2xqwy] {
    transform: scale(1.08);
}

.header-avatar:active[b-aeq8r2xqwy] {
    transform: scale(0.95);
}

.header-avatar__initials[b-aeq8r2xqwy] {
    pointer-events: none;
}

.header-avatar__dot[b-aeq8r2xqwy] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #CEB185;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-sizing: border-box;
}

.header-avatar__backdrop[b-aeq8r2xqwy] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1001;
}

.header-avatar__menu[b-aeq8r2xqwy] {
    position: absolute;
    top: 46px;
    right: 0;
    min-width: 220px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 6px 0;
    z-index: 1002;
    font-family: 'Montserrat', sans-serif;
}

.header-avatar__item[b-aeq8r2xqwy] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #201F1D;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

.header-avatar__item:hover[b-aeq8r2xqwy] {
    background-color: #F5F5F5;
}

.header-avatar__item:active[b-aeq8r2xqwy] {
    transform: scale(0.98);
}

.header-avatar__item-icon[b-aeq8r2xqwy] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.header-avatar__item-label[b-aeq8r2xqwy] {
    flex: 1;
}

.header-avatar__item-badge[b-aeq8r2xqwy] {
    background: #CEB185;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-avatar__item--danger[b-aeq8r2xqwy] {
    color: #B33A3A;
}

.header-avatar__divider[b-aeq8r2xqwy] {
    height: 1px;
    background: #E5E5E5;
    margin: 4px 0;
}
/* /Components/VideoOverlay.razor.rz.scp.css */
/* Video Overlay Styles */
.video-overlay[b-w762dki2hx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-overlay-back-button[b-w762dki2hx] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.video-overlay-back-button:hover[b-w762dki2hx] {
    transform: scale(1.1);
}

.video-overlay-back-button img[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    filter: invert(1); /* Make the arrow white */
}

.video-overlay-container[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.video-overlay-container .mux-video-player[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.video-overlay-container .video-element[b-w762dki2hx] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.video-placeholder[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #666;
    border-radius: 12px;
    min-height: 200px;
}

.placeholder-icon[b-w762dki2hx] {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.placeholder-text[b-w762dki2hx] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

/* Desktop-specific sizing for video overlay */
@media (min-width: 768px) {
    .video-overlay-container[b-w762dki2hx] {
        padding: 60px 40px 80px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .video-overlay-container .mux-video-player[b-w762dki2hx] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }

    .video-overlay-container .video-element[b-w762dki2hx] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .video-overlay-container[b-w762dki2hx] {
        padding: 80px 60px 100px 60px;
        max-width: 1400px;
    }

    .video-overlay-container .mux-video-player[b-w762dki2hx] {
        max-width: 70vw;
        max-height: 75vh;
    }

    .video-overlay-container .video-element[b-w762dki2hx] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

/* Responsive adjustments for video overlay */
@media (max-width: 480px) {
    .video-overlay-back-button[b-w762dki2hx] {
        top: 40px;
        left: 15px;
        width: 35px;
        height: 35px;
    }

    .video-overlay-container[b-w762dki2hx] {
        padding: 80px 15px 100px 15px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-layout[b-1qol017b9s] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    max-width: 430px;
    margin: 0 auto;
    width: 100%;
}

/* Opt-in wide measure for the handful of routes that genuinely need two columns (see
   MainLayout._wideRoutes). Deliberately gated at 768px and bounded at 1180px:
   - below 768 it must be INERT, or every phone rule written against the 430px measure breaks;
   - unbounded would stretch a two-column layout across a 27" monitor, which reads worse than
     the ribbon it replaced. 768 is the app's canonical phone/tablet boundary (see app.css). */
@media (min-width: 768px) {
    .app-layout--wide[b-1qol017b9s] {
        max-width: 1180px;
    }
}

.app-content[b-1qol017b9s] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Hide the scroll bar (desktop Safari/Chrome show a persistent one) —
       every other scroll container in the app already does this. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.app-content[b-1qol017b9s]::-webkit-scrollbar {
    display: none; /* Safari / Chrome */
}
/* /Layout/SignupLayout.razor.rz.scp.css */
/* Branded onboarding-wizard shell. Scoped to SignupLayout; ::deep rules theme
   the wizard step markup rendered via @Body (overriding Bootstrap defaults). */

.signup-shell[b-euxq79zusv] {
    /* Own scroll container: the app root (#app/body) is overflow:hidden, and this
       layout replaces MainLayout, so the shell itself must scroll — otherwise a
       card taller than the viewport (e.g. the consent step) clips its button.
       `safe center` keeps short steps centred but falls back to top-aligned (so
       the top stays reachable) when content overflows. */
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: 18px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: radial-gradient(1100px 560px at 50% -8%, #FFFFFF 0%, #F7F2EA 52%, #EFE7DA 100%);
    font-family: 'Montserrat', sans-serif;
}

.signup-card[b-euxq79zusv] {
    width: 100%;
    max-width: 468px;
    background: #FFFFFF;
    border: 1px solid #ECE7DE;
    border-radius: 18px;
    box-shadow: 0 22px 60px -22px rgba(32, 31, 29, 0.28), 0 2px 6px rgba(32, 31, 29, 0.04);
    padding: 40px 36px 36px;
    box-sizing: border-box;
}

.signup-logo[b-euxq79zusv] {
    display: block;
    height: 34px;
    width: auto;
    max-width: 200px;
    margin: 0 auto 28px;
}

.signup-footnote[b-euxq79zusv] {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A89F92;
}

/* Sign-out escape hatch. Outside .signup-body, so the ::deep anchor rules below
   don't reach it — it needs its own styling. */
.signup-footnote a[b-euxq79zusv] {
    color: #A89F92;
    text-decoration: none;
    cursor: pointer;
}
.signup-footnote a:hover[b-euxq79zusv] {
    color: #B89970;
    text-decoration: underline;
}

/* ----------------------------------------------------------------------- */
/* Theme the wizard content rendered through @Body                         */
/* ----------------------------------------------------------------------- */

.signup-body[b-euxq79zusv]  .wizard-step {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.signup-body[b-euxq79zusv]  h1 {
    font-size: 26px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #201F1D;
    margin: 0 0 10px;
}

.signup-body[b-euxq79zusv]  h2 {
    font-size: 17px;
    font-weight: 600;
    color: #201F1D;
    margin: 22px 0 8px;
}

.signup-body[b-euxq79zusv]  p {
    font-size: 14.5px;
    line-height: 1.55;
    color: #5A554E;
    margin: 0 0 18px;
}

.signup-body[b-euxq79zusv]  .form-group {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
}

.signup-body[b-euxq79zusv]  label,
.signup-body[b-euxq79zusv]  .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #201F1D;
    margin-bottom: 6px;
}

.signup-body[b-euxq79zusv]  .form-input,
.signup-body[b-euxq79zusv]  input[type="text"],
.signup-body[b-euxq79zusv]  input[type="email"],
.signup-body[b-euxq79zusv]  input[type="password"],
.signup-body[b-euxq79zusv]  input[type="tel"],
.signup-body[b-euxq79zusv]  input[type="number"],
.signup-body[b-euxq79zusv]  input[type="date"],
.signup-body[b-euxq79zusv]  textarea,
.signup-body[b-euxq79zusv]  select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #E3DCD0;
    border-radius: 10px;
    background: #FCFAF6;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #201F1D;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.signup-body[b-euxq79zusv]  textarea {
    height: auto;
    min-height: 104px;
    padding: 12px 14px;
    line-height: 1.5;
}

.signup-body[b-euxq79zusv]  .form-input:focus,
.signup-body[b-euxq79zusv]  input:focus,
.signup-body[b-euxq79zusv]  textarea:focus,
.signup-body[b-euxq79zusv]  select:focus {
    border-color: #CEB185;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(206, 177, 133, 0.18);
}

.signup-body[b-euxq79zusv]  input::placeholder,
.signup-body[b-euxq79zusv]  textarea::placeholder {
    color: #A89F92;
}

/* Read-only / locked field (e.g. the invite-bound email on the account step) */
.signup-body[b-euxq79zusv]  input[readonly] {
    background: #F1ECE3;
    color: #6B645B;
    border-color: #E3DCD0;
    cursor: not-allowed;
}
.signup-body[b-euxq79zusv]  input[readonly]:focus {
    box-shadow: none;
    border-color: #E3DCD0;
}

.signup-body[b-euxq79zusv]  .field-hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: #8A8378;
}

/* Primary action — brand gold pill (matches the app's --rz-primary #CEB185
   with dark --rz-on-primary text), replacing the stock Bootstrap blue. */
.signup-body[b-euxq79zusv]  .btn-primary {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    background: #CEB185;
    border: 1px solid #CEB185;
    border-radius: 10px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .04s ease;
}

.signup-body[b-euxq79zusv]  .btn-primary:hover {
    background: #B89970;
    border-color: #B89970;
    color: #201F1D;
}

.signup-body[b-euxq79zusv]  .btn-primary:active {
    transform: translateY(1px);
}

.signup-body[b-euxq79zusv]  .btn-primary:disabled {
    background: #EBE3D4;
    border-color: #EBE3D4;
    color: #B6AC9A;
    cursor: not-allowed;
    opacity: 1;
}

/* Secondary / ghost buttons */
.signup-body[b-euxq79zusv]  .btn-secondary,
.signup-body[b-euxq79zusv]  .btn-outline-primary,
.signup-body[b-euxq79zusv]  .btn-link {
    background: transparent;
    border: 1px solid #E3DCD0;
    border-radius: 10px;
    color: #201F1D;
    font-weight: 500;
}

.signup-body[b-euxq79zusv]  a {
    color: #B89970;
    text-decoration: none;
}
.signup-body[b-euxq79zusv]  a:hover { text-decoration: underline; }

/* Invite-code pill on the landing step */
.signup-body[b-euxq79zusv]  code {
    background: #F4ECDF;
    color: #9E815C;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
}

.signup-body[b-euxq79zusv]  .error-text,
.signup-body[b-euxq79zusv]  .error-message,
.signup-body[b-euxq79zusv]  [role="alert"] {
    color: #C0392B;
    font-size: 13px;
    margin-top: 2px;
}

/* Invalid field — red border + matching focus ring, overriding the gold theme. */
.signup-body[b-euxq79zusv]  .input-invalid,
.signup-body[b-euxq79zusv]  .input-invalid:focus {
    border-color: #C0392B;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.signup-body[b-euxq79zusv]  .field-optional {
    font-weight: 400;
    color: #A89F92;
    font-size: 12px;
}

/* Repeating language + proficiency pair on the profile step. The selects
   themselves are already themed by the ::deep select rules above. */
.signup-body[b-euxq79zusv]  .language-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.signup-body[b-euxq79zusv]  .language-remove {
    background: none;
    border: none;
    color: #C0392B;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

/* A real <button> (not a role="button" span) so Enter/Space activate it. */
.signup-body[b-euxq79zusv]  .add-language {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 0;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #B89970;
    cursor: pointer;
}
.signup-body[b-euxq79zusv]  .add-language:hover { text-decoration: underline; }

/* Profile step — a field the member can't change (e.g. employment status when the org offers
   only one type). Reads as a stated fact, deliberately NOT as a disabled input, which would
   imply it might become editable. */
.signup-body[b-euxq79zusv]  .fixed-value {
    margin: 0;
    padding: 12px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
}

/* Profile step — the self-employed tax declaration a Contractor must confirm. Boxed and
   cream-tinted so it reads as terms being agreed to, not as another form field. */
.signup-body[b-euxq79zusv]  .declaration-panel {
    margin: 0 0 20px;
    padding: 16px;
    background: #FBF7F0;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
}

.signup-body[b-euxq79zusv]  .declaration-panel--invalid {
    border-color: #C0392B;
}

.signup-body[b-euxq79zusv]  .declaration-title {
    margin: 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #201F1D;
}

.signup-body[b-euxq79zusv]  .declaration-body {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #4A453D;
}

/* Same affordance as the consent gate's checkbox row — one recognisable "agree" control. */
.signup-body[b-euxq79zusv]  .declaration-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    color: #201F1D;
    cursor: pointer;
}

.signup-body[b-euxq79zusv]  .declaration-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: #CEB185;
    cursor: pointer;
}

.signup-body[b-euxq79zusv]  .error-list {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #C0392B;
    font-size: 13px;
}

/* "Still to complete: …" nudge under a disabled submit — guidance, not an error. */
.signup-body[b-euxq79zusv]  .missing-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #8A7A57;
    text-align: center;
}

/* Consent step — rendered privacy notice. Bounded box that scrolls internally
   (so the card never exceeds the viewport) with readable, on-brand typography. */
.signup-body[b-euxq79zusv]  .privacy-policy {
    margin: 0;
    max-width: 100%;
    max-height: 44vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #4F4A43;
    background: #FBF8F3;
    border: 1px solid #ECE6DB;
    border-radius: 12px;
    padding: 16px 18px;
    box-sizing: border-box;
    text-align: left;
}
.signup-body[b-euxq79zusv]  .privacy-policy h1 { font-size: 17px; font-weight: 600; color: #201F1D; margin: 0 0 8px; }
.signup-body[b-euxq79zusv]  .privacy-policy h2 { font-size: 14px; font-weight: 600; color: #201F1D; margin: 18px 0 6px; }
.signup-body[b-euxq79zusv]  .privacy-policy h3 { font-size: 13px; font-weight: 600; color: #201F1D; margin: 14px 0 6px; }
.signup-body[b-euxq79zusv]  .privacy-policy p { font-size: 13px; color: #4F4A43; margin: 0 0 10px; }
.signup-body[b-euxq79zusv]  .privacy-policy ul,
.signup-body[b-euxq79zusv]  .privacy-policy ol { margin: 0 0 12px; padding-left: 20px; }
.signup-body[b-euxq79zusv]  .privacy-policy li { margin-bottom: 5px; }
.signup-body[b-euxq79zusv]  .privacy-policy strong { color: #201F1D; font-weight: 600; }
.signup-body[b-euxq79zusv]  .privacy-policy a { color: #B89970; }
.signup-body[b-euxq79zusv]  .privacy-policy table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11.5px;
    margin: 0 0 12px;
}
.signup-body[b-euxq79zusv]  .privacy-policy th,
.signup-body[b-euxq79zusv]  .privacy-policy td {
    border: 1px solid #E3DCD0;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.signup-body[b-euxq79zusv]  .privacy-policy th { background: #F2ECE1; color: #201F1D; font-weight: 600; }

.signup-body[b-euxq79zusv]  .consent-panel {
    display: block;
    margin-bottom: 16px;
}

.signup-body[b-euxq79zusv]  .consent-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #201F1D;
    font-weight: 400;
    cursor: pointer;
}

.signup-body[b-euxq79zusv]  .consent-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: #CEB185;
    cursor: pointer;
}

/* Cloudflare Turnstile widget — give it room and centre it in the flow */
.signup-body[b-euxq79zusv]  #cf-turnstile-public,
.signup-body[b-euxq79zusv]  #cf-turnstile-staff,
.signup-body[b-euxq79zusv]  #cf-turnstile,
.signup-body[b-euxq79zusv]  #cf-turnstile-complete {
    display: flex;
    justify-content: center;
    margin: 4px 0 20px;
    min-height: 65px;
}

@media (max-width: 520px) {
    .signup-card[b-euxq79zusv] {
        padding: 32px 22px 28px;
        border-radius: 16px;
    }
    .signup-body[b-euxq79zusv]  h1 { font-size: 23px; }

    /* Two selects side by side get too cramped on a phone — stack the proficiency
       under the language and keep the remove button on the first line. */
    .signup-body[b-euxq79zusv]  .language-row {
        grid-template-columns: 1fr auto;
        margin-bottom: 12px;
    }
    .signup-body[b-euxq79zusv]  .language-row select:nth-of-type(1) { grid-area: 1 / 1; }
    .signup-body[b-euxq79zusv]  .language-row .language-remove   { grid-area: 1 / 2; }
    .signup-body[b-euxq79zusv]  .language-row select:nth-of-type(2) { grid-area: 2 / 1 / 3 / -1; }
}
/* /Pages/Admin/ActivityLog.razor.rz.scp.css */
/* Plan 04.12-02 / 04.12-UI-SPEC — the global activity log. Montserrat; four sizes (14/16/20/24)
   and two weights (400/600) and nothing else in this file. Gold #CEB185 is reserved for the
   primary CTA fill (with #201F1D text), the active-filter count badge and focus/hover borders —
   NEVER for a badge, a role, a row background or a row hover. The Failed outcome uses the shared
   SEMANTIC pill palette, redefined here because .rpt-badge is scoped CSS, not global.
   ::deep themes the Radzen DataGrid children. */

.activity-log-page[b-8kpk7xtucx] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    /* min-height only, and deliberately NO fixed height and NO vertical-overflow declaration:
       .admin-layout__content is the app's single scroller. A page-level scroller here resolves
       its height against the padded content box and clips the last card roughly 160px above the
       viewport on iPhone — the bug fixed in 765eab7, easy to reintroduce by "making the list
       scroll". */
    min-height: 100%;
}

/* Title block on the left, the Refresh pill right-aligned on the same row (D-11). */
.activity-log-page__head[b-8kpk7xtucx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.activity-log-page__title[b-8kpk7xtucx] {
    min-width: 0;
}

.activity-log-page__head h1[b-8kpk7xtucx] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4px;
}

.activity-log-page__head p[b-8kpk7xtucx] {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #6B6660;
    margin: 0;
}

/* ── Refresh (D-11) ──
   A SECONDARY control: it borrows the receipts-queue tab geometry (999px radius, 1px border in
   the border token, white fill, ink text, gold hover border, 44px min-height) and is never gold.
   Gold is reserved for the one primary CTA on screen, which is Load more — or, in the empty
   state, Clear filters. */
.activity-refresh[b-8kpk7xtucx] {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.activity-refresh:hover:not(:disabled)[b-8kpk7xtucx] {
    border-color: #CEB185;
}

.activity-refresh:focus-visible[b-8kpk7xtucx] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

.activity-refresh:disabled[b-8kpk7xtucx] {
    color: #8A857D;
    cursor: not-allowed;
}

/* ── Empty and error states ──
   Same cream well as the receipts queue's empty state, so the two admin surfaces do not diverge
   over a panel that means the same thing on both. */
.activity-empty[b-8kpk7xtucx],
.activity-error--panel[b-8kpk7xtucx] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    margin-top: 16px;
}

.activity-empty__heading[b-8kpk7xtucx] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 8px;
}

.activity-empty p[b-8kpk7xtucx],
.activity-error--panel p[b-8kpk7xtucx] {
    color: #6B6660;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* The empty state's one-tap reset: every filter AND the range back to the last 30 days. Gold with
   DARK text, never white-on-gold. It renders only when the feed is empty, so it is never
   co-present with Load more and the page never shows two gold buttons. */
.activity-clear[b-8kpk7xtucx] {
    margin-top: 24px;
    min-height: 44px;
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    background: #CEB185;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-clear:hover[b-8kpk7xtucx] {
    background: #B89970;
}

.activity-clear:focus-visible[b-8kpk7xtucx] {
    outline: 2px solid #9E815C;
    outline-offset: 2px;
}

/* Retry is a secondary control, not the page's CTA — it borrows the Refresh pill's geometry so
   the error panel introduces no new button vocabulary. */
.activity-retry[b-8kpk7xtucx] {
    margin-top: 24px;
    min-height: 44px;
    padding: 8px 24px;
    border: 1px solid #201F1D;
    border-radius: 999px;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.activity-retry:hover[b-8kpk7xtucx] {
    border-color: #CEB185;
}

.activity-retry:focus-visible[b-8kpk7xtucx] {
    outline: 2px solid #CEB185;
    outline-offset: 2px;
}

/* Inline failure copy. Destructive colour, base type scale, no panel chrome — it sits beside
   content that is still valid rather than replacing it. */
.activity-error--inline[b-8kpk7xtucx] {
    margin: 0 0 16px;
    color: #C0392B;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Footer: Load more, or the end marker (D-10 / D-13) ──
   One control at a time, centred below the list. The bottom padding is the page's own breathing
   room below the end of the data — the admin layout is the scroller, so this is where the run
   of rows visibly stops. */
.activity-foot[b-8kpk7xtucx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    padding-bottom: 64px;
    text-align: center;
}

/* The page's single primary CTA: gold fill with DARK text. Never white-on-gold, and never a
   stock Bootstrap primary. It is never on screen at the same time as the empty state's gold
   reset, because that one renders only when there are no rows at all. */
.activity-loadmore[b-8kpk7xtucx] {
    min-height: 48px;
    padding: 8px 32px;
    border: none;
    border-radius: 8px;
    background: #CEB185;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-loadmore:hover:not(:disabled)[b-8kpk7xtucx] {
    background: #B89970;
}

.activity-loadmore:focus-visible[b-8kpk7xtucx] {
    outline: 2px solid #9E815C;
    outline-offset: 2px;
}

.activity-loadmore:disabled[b-8kpk7xtucx] {
    background: #E0D2B8;
    cursor: not-allowed;
}

/* The end marker. Muted, centred, and it WRAPS — a custom range renders its real dates and must
   never be truncated or abbreviated away. It replaces the button rather than leaving a gap, so
   the end of the data is distinguishable from a control that stopped working. */
.activity-end[b-8kpk7xtucx] {
    margin: 0;
    max-width: 100%;
    color: #6B6660;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── Grid ── */
.activity-log-page[b-8kpk7xtucx]  .activity-grid {
    border-radius: 8px;
}

/* Let cells WRAP instead of truncating. Radzen's default .rz-cell-data is nowrap + hidden +
   ellipsis, which slices the Failed pill's background flat so it stops reading as a badge at all,
   and turns a long unmapped action code into an unidentifiable stub. Same override List.razor and
   Attendance.razor.css already carry (993e136). */
.activity-log-page[b-8kpk7xtucx]  .activity-grid .rz-cell-data {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* overflow-wrap, NOT `word-break: break-word`. The two look interchangeable and are not:
       `word-break: break-word` behaves like `overflow-wrap: anywhere`, which also collapses the
       box's intrinsic min-content width, so a column sized just under a word's width splits that
       word mid-way rather than claiming the space. That is how "Unknown" rendered as "Unknow / n"
       in the Role column on every pre-phase row. `overflow-wrap: break-word` breaks only as a true
       last resort and leaves min-content intact. Opaque ids still break anywhere — that is the
       separate, deliberate `word-break: break-all` on .activity-entity-id below. */
    overflow-wrap: break-word;
}

/* Headers ellipsise by the same default — a column title an admin can no longer identify. */
.activity-log-page[b-8kpk7xtucx]  .activity-grid .rz-column-title,
.activity-log-page[b-8kpk7xtucx]  .activity-grid .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
}

/* ── Cell treatments ── */

/* The entity id sits under its label, differentiated by COLOUR rather than size (the feed is a
   scan surface; one uniform cell size is what makes 50 rows readable). break-all because an id is
   an opaque token with no word boundaries to break on. */
.activity-entity-id[b-8kpk7xtucx] {
    color: #6B6660;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-all;
}

/* An actor whose record is gone (D-05 / ACT-09). Muted, never blank, and never a raw or truncated
   Firebase uid — the uid is on the wire for the person filter only and is never rendered. */
.activity-actor--unknown[b-8kpk7xtucx] {
    color: #8A857D;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* A completed row is plain muted text, NOT a badge (D-04). The outcome is binary here and one
   value is overwhelmingly dominant: a green pill on 49 of 50 rows makes the one red pill no
   easier to find than plain text does, and burns the strongest signal on the non-event. The
   badge is the exception marker. */
.activity-outcome--ok[b-8kpk7xtucx] {
    color: #6B6660;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Semantic status badge (shared palette; NOT gold) ──
   Redefined verbatim from ReceiptsQueue.razor.css because .rpt-badge is scoped CSS, not global —
   only the scoping mechanism forces the duplication, not a design choice. The identical pill also
   renders on the receipts queue an admin moves between in the same session. */
.rpt-badge[b-8kpk7xtucx] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    /* Never shrink — the phone card head is a flex row, and a pill that is allowed to shrink keeps
       its nowrap text while its BACKGROUND narrows, so the label spills out of a cut-off pill.
       Deliberately no `max-width: 100%` for the same reason. */
    flex: 0 0 auto;
}

.rpt-badge--suspect[b-8kpk7xtucx] {
    background: #F7E2E0;
    color: #C0392B;
}
/* /Pages/Admin/Events/Staff/Attendance.razor.rz.scp.css */
/* Plan 04-05 — scoped attendance-roster theming. Montserrat + brand tokens
   (UI-SPEC 60/30/10). Status / spoof colours follow the UI-SPEC semantics:
   present = muted green, no-show = destructive #C0392B, spoof = amber
   bg-warning-subtle row highlight. NEVER gold for status (gold is a primary
   action only). Does NOT redefine the global brand primary token. */

.attendance-page[b-vfvk368vd8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Montserrat', sans-serif;
}

.attendance-page h1[b-vfvk368vd8] {
    font-weight: 600;
    color: #201F1D;
}

/* No-show badge — the destructive token on a faint red surface, NOT the
   Bootstrap default red. */
.attendance-page .status-noshow[b-vfvk368vd8] {
    color: #C0392B;
    background: #f8d7da33;
    border: 1px solid #f1c2c2;
}

/* Amber spoof "needs review" highlight (matches bg-warning-subtle). Applied to
   the desktop grid row via RowRender and to the mobile card directly. */
.attendance-page .row-flagged[b-vfvk368vd8] {
    background: #fff3cd55;
}

.attendance-page .flag-note[b-vfvk368vd8] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.attendance-page .flag-note i[b-vfvk368vd8] {
    color: #B8860B;
}

/* Caption notes — lateness / early-leave, amber-muted, never a blocking colour. */
.attendance-page .duration-note[b-vfvk368vd8] {
    font-size: 13px;
    color: #8A6D1B;
}

/* Missing-readiness chips. */
.attendance-page .readiness-chip[b-vfvk368vd8] {
    display: inline-block;
    background: #F4ECDF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    margin: 2px 2px 0 0;
}
.attendance-page .readiness-wrap[b-vfvk368vd8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
}

/* Mobile = cards, desktop = grid (the grid truncates on narrow screens); the
   swap itself is AdminResponsiveList's job now. */
.attendance-page .attendance-card[b-vfvk368vd8] {
    background: #fff;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 14px;
}
.attendance-page .attendance-card__head[b-vfvk368vd8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.attendance-page .attendance-card__name[b-vfvk368vd8] {
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
    margin: 0;
    word-break: break-word;
}
.attendance-page .attendance-card__row[b-vfvk368vd8] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 3px 0;
    align-items: center;
}
.attendance-page .attendance-card__row span[b-vfvk368vd8] { color: #8A8378; }
.attendance-page .attendance-card__row strong[b-vfvk368vd8] { font-weight: 600; text-align: right; word-break: break-word; }
.attendance-page .attendance-card__actions[b-vfvk368vd8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Let the desktop grid WRAP cell content instead of truncating with an ellipsis —
   admins need the full staffer id, early-leave reason and readiness note visible.
   Radzen's default .rz-cell-data is nowrap+ellipsis; override via ::deep. */
.attendance-page[b-vfvk368vd8]  .rz-data-grid .rz-cell-data,
.attendance-page[b-vfvk368vd8]  .rz-grid-table .rz-cell-data {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
/* Allow the chip to wrap its own long note text within the column. */
.attendance-page .readiness-chip[b-vfvk368vd8] { white-space: normal; }

/* ---- Plan 04.5-04: read-only per-event survey-answers viewer (D-12) ----
   Stage sections (Pre/During/Post) each with staff-as-rows × question-as-columns.
   On brand: Montserrat, #E8E5E0 borders, #F4ECDF header tint, ink #201F1D.
   NO gold fill (gold is a primary-action accent only — this is a review surface). */
.survey-answers[b-vfvk368vd8] { font-family: 'Montserrat', sans-serif; }
.survey-answers__title[b-vfvk368vd8] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px;
}

.survey-empty[b-vfvk368vd8] { border: 1px dashed #E8E5E0; border-radius: 10px; background: #FBFAF8; }
.survey-empty__heading[b-vfvk368vd8] { font-size: 16px; font-weight: 600; color: #201F1D; margin: 0 0 4px; }

.survey-stage[b-vfvk368vd8] { margin-top: 24px; }
.survey-stage__heading[b-vfvk368vd8] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px;
}

/* Horizontal scroll on narrow screens rather than truncating answer columns. */
.survey-table-wrap[b-vfvk368vd8] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
}
.survey-table[b-vfvk368vd8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #201F1D;
}
.survey-table thead th[b-vfvk368vd8] {
    background: #F4ECDF;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #E8E5E0;
    white-space: nowrap;
}
.survey-table tbody th[b-vfvk368vd8],
.survey-table tbody td[b-vfvk368vd8] {
    padding: 8px 12px;
    border-bottom: 1px solid #E8E5E0;
    vertical-align: top;
    word-break: break-word;
}
.survey-table tbody tr:last-child th[b-vfvk368vd8],
.survey-table tbody tr:last-child td[b-vfvk368vd8] { border-bottom: none; }
.survey-table__staff[b-vfvk368vd8] { font-weight: 600; white-space: nowrap; }
.survey-table tbody tr:nth-child(even)[b-vfvk368vd8] { background: #FBFAF8; }

/* ── Day pills (Wave 8) ─────────────────────────────────────────────────────
   Same pill vocabulary as the queue's status segments — 999px radius, 44px
   min-height, ink #201F1D as the active fill, gold #CEB185 on hover only — so
   the two admin surfaces read as one system. The second line carries the day's
   turn-out, which is the number an admin scanning pills is looking for. */
.day-pills[b-vfvk368vd8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px 0 4px;
}
.day-pill[b-vfvk368vd8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 6px 16px;
    border: 1px solid #E8E5E0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.day-pill:hover[b-vfvk368vd8] { border-color: #CEB185; }
.day-pill:focus-visible[b-vfvk368vd8] { outline: 2px solid #CEB185; outline-offset: 2px; }
.day-pill--active[b-vfvk368vd8] { background: #201F1D; border-color: #201F1D; color: #FFFFFF; }
.day-pill__date[b-vfvk368vd8] { font-size: 14px; font-weight: 500; }
.day-pill__meta[b-vfvk368vd8] { font-size: 11px; opacity: .7; }

/* A cancelled day stays selectable — its records are history an admin may still
   need to read — but must never look like a day anyone is working. */
.day-pill--cancelled .day-pill__date[b-vfvk368vd8] { text-decoration: line-through; }
.day-pill--cancelled[b-vfvk368vd8] { color: #8A857D; }
.day-pill--cancelled.day-pill--active[b-vfvk368vd8] { color: #FFFFFF; }
/* /Pages/Admin/Events/Staff/DeleteEventModal.razor.rz.scp.css */
/* Delete-event confirmation modal. Brand tokens per CLAUDE.md: Montserrat, ink #201F1D,
   border #E8E5E0, error #C0392B. Scoped rather than a global <style> block so it cannot
   regress the sibling cancel modals. */

.delete-event-modal[b-u0pbj00h2k] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    display: flex;
    flex-direction: column;
}

.delete-event-modal .del-identity[b-u0pbj00h2k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E8E5E0;
}

.delete-event-modal .del-name[b-u0pbj00h2k] {
    font-size: 15px;
    font-weight: 600;
}

.delete-event-modal .del-where[b-u0pbj00h2k],
.delete-event-modal .del-days[b-u0pbj00h2k] {
    font-size: 12px;
    color: #6B645B;
}

.delete-event-modal .del-callout[b-u0pbj00h2k] {
    background: #F7E1E1;
    color: #7A1F1F;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 12px;
}

.delete-event-modal .del-consequences[b-u0pbj00h2k] {
    margin: 14px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
}

.delete-event-modal .del-consequences .del-warn[b-u0pbj00h2k] {
    color: #8A5A12;
    font-weight: 600;
}

.delete-event-modal .del-label[b-u0pbj00h2k] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 16px;
}

.delete-event-modal .del-confirm-label[b-u0pbj00h2k] {
    margin-top: 16px;
}

.delete-event-modal .chips[b-u0pbj00h2k] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.delete-event-modal .del-hint[b-u0pbj00h2k] {
    color: #6B645B;
    font-size: 12px;
}

.delete-event-modal .del-actions[b-u0pbj00h2k] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}
/* /Pages/Admin/Events/Staff/Detail.razor.rz.scp.css */
/* Scoped styles for the admin event detail page. Brand tokens per CLAUDE.md:
   Montserrat, ink #201F1D, border #E8E5E0, error #C0392B, gold #CEB185. */

/* Empty state for a deleted / unknown event. */
.event-gone[b-kqb4y1jy42] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 32px 24px;
    margin-top: 24px;
    text-align: center;
}

.event-gone h4[b-kqb4y1jy42] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.event-gone p[b-kqb4y1jy42] {
    font-size: 14px;
    color: #6B645B;
    margin-bottom: 20px;
}

/* Delete is deliberately quiet: it lives at the far left of the footer, away from Save, and
   reads as a link rather than a call to action. The confirmation modal is where the weight is. */
.delete-event-link[b-kqb4y1jy42] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #C0392B !important;
    text-decoration: underline;
    min-height: 44px;
    padding-left: 0;
}

.delete-event-link:hover[b-kqb4y1jy42] {
    color: #7A1F1F !important;
    background: transparent !important;
}
/* /Pages/Admin/Recruitment/ComposeOutreach.razor.rz.scp.css */
/* Plan 02.5-14 ComposeOutreach — matches the Triage.razor.css conventions:
   Montserrat, UI-SPEC type sizes (12/14/15/20) + weights (400/600),
   4/8/12/16/24px spacing (no 10px), #201F1D / #6B6660 / #E5E0D7 / #FAF7F1
   palette, >=44px touch targets (D-13). */

.outreach-page[b-3xfmwck3ur] { display: flex; flex-direction: column; gap: 16px; max-width: 760px; font-family: 'Montserrat', sans-serif; }

.outreach-header[b-3xfmwck3ur] { display: flex; flex-direction: column; gap: 4px; }
.outreach-header h1[b-3xfmwck3ur] { font-size: 20px; font-weight: 600; color: #201F1D; margin: 0; line-height: 1.2; }
.outreach-sub[b-3xfmwck3ur] { font-size: 14px; font-weight: 400; color: #6B6660; margin: 0; line-height: 1.5; }

.outreach-card[b-3xfmwck3ur] { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border: 1px solid #E5E0D7; border-radius: 8px; }
.outreach-section-title[b-3xfmwck3ur] { font-size: 15px; font-weight: 600; color: #201F1D; margin: 0; line-height: 1.3; }

.ai-disclosure[b-3xfmwck3ur] { font-size: 12px; font-weight: 400; color: #6B6660; line-height: 1.5; margin: 0; padding: 12px; background: #FAF7F1; border: 1px solid #E5E0D7; border-radius: 8px; }

.field[b-3xfmwck3ur] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field__label[b-3xfmwck3ur] { font-size: 12px; font-weight: 600; color: #6B6660; }
.field__control[b-3xfmwck3ur] { width: 100%; font-size: 14px; font-weight: 400; }
.field__control--body[b-3xfmwck3ur] { min-height: 200px; }

.action-row[b-3xfmwck3ur] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-row__status[b-3xfmwck3ur] { font-size: 14px; font-weight: 400; color: #6B6660; }

.btn-tall[b-3xfmwck3ur] { min-height: 44px; }

@media (min-width: 768px) {
    .outreach-page[b-3xfmwck3ur] { gap: 24px; }
}
/* /Pages/Admin/Recruitment/CostPerHireDashboard.razor.rz.scp.css */
/*
 * Plan 02.5-11 / RECRUIT-AI-09 — cost-per-hire dashboard styles.
 * UI-SPEC contract honoured exactly: Montserrat; type sizes ONLY 12/14/15/20;
 * weights ONLY 400/600; spacing scale (multiples of 4 with the documented twelve-px
 * half-step; out-of-scale steps are forbidden); gold accent (#CEB185) RESERVED to the SINGLE headline
 * metric (cost-per-hire — UI-SPEC line 159); everything else neutral.
 * Degrades to a usable single-column layout < 768px (D-13).
 */

.dashboard-page[b-3suqrofm4y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.dashboard-header[b-3suqrofm4y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-header h1[b-3suqrofm4y] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0;
    line-height: 1.2;
}

.dashboard-subtitle[b-3suqrofm4y] {
    font-size: 14px;
    font-weight: 400;
    color: #6B6660;
    margin: 0;
    line-height: 1.5;
}

/* Filters — column on mobile, row at >=640px (UI-SPEC line 157) */
.filters[b-3suqrofm4y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E5E0D7;
}

.filters__field[b-3suqrofm4y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.filters__field > *:not(.filters__label)[b-3suqrofm4y] {
    width: 100%;
}

.filters__label[b-3suqrofm4y] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
    font-family: 'Montserrat', sans-serif;
}

.empty[b-3suqrofm4y] {
    text-align: center;
    padding: 48px;
    color: #6B6660;
}

.empty h2[b-3suqrofm4y] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.2;
}

.empty p[b-3suqrofm4y] {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* =================================================================
 * HEADLINE METRIC — THE SINGLE ELEMENT WITH THE GOLD ACCENT.
 * UI-SPEC line 159: the gold accent #CEB185 is reserved to the
 * cost-per-hire vs target metric. NOWHERE ELSE in this stylesheet.
 * ================================================================= */
.headline[b-3suqrofm4y] {
    background: #fff;
    border: 1px solid #E5E0D7;
    border-left: 4px solid #CEB185;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.headline__label[b-3suqrofm4y] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.headline__value[b-3suqrofm4y] {
    font-size: 20px;
    font-weight: 600;
    color: #CEB185;
    line-height: 1.2;
}

.headline__meta[b-3suqrofm4y] {
    font-size: 14px;
    font-weight: 400;
    color: #6B6660;
    line-height: 1.5;
}

/* Metric tiles (Lead/Qualified/Phone screen/Hire) — neutral. */
.cards-grid[b-3suqrofm4y] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.metric-card[b-3suqrofm4y] {
    background: #fff;
    border: 1px solid #E5E0D7;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
}

.metric-card__label[b-3suqrofm4y] {
    font-size: 12px;
    font-weight: 600;
    color: #6B6660;
}

.metric-card__value[b-3suqrofm4y] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.2;
}

/* Chart cards — neutral surfaces. */
.chart-card[b-3suqrofm4y] {
    background: #fff;
    border: 1px solid #E5E0D7;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-card__title[b-3suqrofm4y] {
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
    margin: 0;
    line-height: 1.3;
}

.chart-card__empty[b-3suqrofm4y] {
    font-size: 14px;
    font-weight: 400;
    color: #6B6660;
    margin: 0;
}

@media (min-width: 640px) {
    .filters[b-3suqrofm4y] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filters__field[b-3suqrofm4y] {
        flex: 0 0 auto;
        min-width: 160px;
    }
}

@media (min-width: 768px) {
    .cards-grid[b-3suqrofm4y] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Pages/Admin/Recruitment/Triage.razor.rz.scp.css */
.queue-page[b-8dshxxoh6x] { display: flex; flex-direction: column; gap: 16px; outline: none; font-family: 'Montserrat', sans-serif; }
.queue-header[b-8dshxxoh6x] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.queue-header h1[b-8dshxxoh6x] { font-size: 20px; font-weight: 600; color: #201F1D; margin: 0; line-height: 1.2; }

.shortcut-hint[b-8dshxxoh6x] { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 400; color: #6B6660; margin: 0; }
.shortcut-hint kbd[b-8dshxxoh6x] { font-size: 12px; font-weight: 600; padding: 2px 4px; border: 1px solid #E5E0D7; border-radius: 4px; background: #FAF7F1; color: #201F1D; }

.filters[b-8dshxxoh6x] { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #fff; border-radius: 8px; border: 1px solid #E5E0D7; }
.filters__field[b-8dshxxoh6x] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filters__field > *:not(.filters__label)[b-8dshxxoh6x] { width: 100%; }
.filters__label[b-8dshxxoh6x] { font-size: 12px; font-weight: 600; color: #6B6660; font-family: 'Montserrat', sans-serif; }
.filters__toggle[b-8dshxxoh6x] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #201F1D; cursor: pointer; font-family: 'Montserrat', sans-serif; min-height: 44px; }

.empty[b-8dshxxoh6x] { text-align: center; padding: 48px; color: #6B6660; }
.empty h2[b-8dshxxoh6x] { font-size: 20px; font-weight: 600; color: #201F1D; line-height: 1.2; }
.empty p[b-8dshxxoh6x] { font-size: 14px; font-weight: 400; line-height: 1.5; }

.pill[b-8dshxxoh6x] { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-block; }
.pill-applicant[b-8dshxxoh6x] { background: #F4ECDF; color: #7A5A1F; }
.pill-interview[b-8dshxxoh6x] { background: #E3EEF7; color: #1F4A7A; }
.pill-available[b-8dshxxoh6x] { background: #E6F4EA; color: #1F5F32; }
.pill-onleave[b-8dshxxoh6x]   { background: #F7F1DC; color: #7A6020; }
.pill-fired[b-8dshxxoh6x]     { background: #F7E1E1; color: #7A1F1F; }
.pill-rejected[b-8dshxxoh6x]  { background: #EAE5DC; color: #4A4640; }

.low-conf-pill[b-8dshxxoh6x] { margin-left: 8px; }
.low-conf-label[b-8dshxxoh6x] { font-size: 12px; font-weight: 600; color: #7A6020; margin: 0; }

.confidence-badge[b-8dshxxoh6x] { font-size: 12px; font-weight: 600; color: #201F1D; padding: 4px 8px; border: 1px solid #E5E0D7; border-radius: 999px; background: #FAF7F1; }
.channel-tag[b-8dshxxoh6x] { font-size: 12px; font-weight: 400; color: #6B6660; }
.window-countdown[b-8dshxxoh6x] { font-size: 12px; font-weight: 600; color: #7A6020; }
.needs-review[b-8dshxxoh6x] { font-size: 14px; font-weight: 600; color: #4A4640; margin: 0; }

.desktop-only[b-8dshxxoh6x] { display: none; }
.mobile-only[b-8dshxxoh6x] { display: block; }

.applicant-cards[b-8dshxxoh6x] { display: flex; flex-direction: column; gap: 12px; }
.applicant-card[b-8dshxxoh6x] { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E5E0D7; border-radius: 8px; padding: 12px; cursor: pointer; transition: box-shadow 0.15s ease; min-height: 44px; font-family: 'Montserrat', sans-serif; }
.applicant-card:hover[b-8dshxxoh6x], .applicant-card:focus-within[b-8dshxxoh6x] { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.applicant-card--low-conf[b-8dshxxoh6x] { border-left: 4px solid #7A6020; }
.applicant-card__body[b-8dshxxoh6x] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.applicant-card__head[b-8dshxxoh6x] { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.applicant-card__name[b-8dshxxoh6x] { font-size: 15px; font-weight: 600; color: #201F1D; margin: 0; line-height: 1.3; word-break: break-word; }
.applicant-card__meta[b-8dshxxoh6x] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.applicant-card__summary[b-8dshxxoh6x] { font-size: 14px; font-weight: 400; line-height: 1.5; color: #555; margin: 0; }
.applicant-card__chevron[b-8dshxxoh6x] { color: #B5AFA4; flex: 0 0 auto; }

@media (min-width: 640px) {
    .filters[b-8dshxxoh6x] { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
    .filters__field[b-8dshxxoh6x] { flex: 0 0 auto; min-width: 140px; }
    .filters__toggle[b-8dshxxoh6x] { margin-left: auto; }
}

@media (min-width: 768px) {
    .desktop-only[b-8dshxxoh6x] { display: block; }
    .mobile-only[b-8dshxxoh6x] { display: none; }
}
/* /Pages/Admin/Sales/ReceiptDrawer.razor.rz.scp.css */
/* Plan 04.6-06 / UI-SPEC §"Drawer detail" — receipt review drawer. Image is the focal point;
   fields/actions are secondary. Gold #CEB185 reserved for the Approve CTA only; Correct is a
   neutral outline; Reject is destructive #C0392B. Badges use the semantic palette (never gold).
   Montserrat, 8px radius, 1px #E8E5E0 borders. ::deep themes the Radzen buttons. */

.receipt-drawer[b-l5663gwyp0] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 16px;
}

.drawer-empty[b-l5663gwyp0] {
    padding: 24px;
    text-align: center;
}

.drawer-head[b-l5663gwyp0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.drawer-title[b-l5663gwyp0] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 6px;
}

.drawer-close[b-l5663gwyp0] {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #6B6760;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

/* ── Image focal point ── */
.drawer-image[b-l5663gwyp0] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}

.image-zoom-btn[b-l5663gwyp0] {
    border: none;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
    width: 100%;
}

.image-zoom-btn img[b-l5663gwyp0] {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    display: block;
}

.image-missing[b-l5663gwyp0] {
    color: #6B6760;
    font-size: 14px;
    padding: 24px;
}

/* ── Flag badges row ── */
.drawer-flags[b-l5663gwyp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.confidence-label[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
}

.flag-reason[b-l5663gwyp0] {
    font-size: 14px;
    color: #C0392B;
    margin: 0 0 12px;
    line-height: 1.4;
}

.ai-off-hint[b-l5663gwyp0] {
    font-size: 14px;
    color: #8A6D1E;
    background: #FBEFD6;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 12px;
    line-height: 1.4;
}

/* ── Editable fields ── */
.drawer-fields[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.field[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
}

.field-input[b-l5663gwyp0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
}

.field-input:focus[b-l5663gwyp0] {
    outline: none;
    border-color: #CEB185;
}

.vape-input[b-l5663gwyp0] {
    font-weight: 600;
}

/* ── Line items ── */
.drawer-lineitems[b-l5663gwyp0] {
    border-top: 1px solid #E8E5E0;
    padding-top: 12px;
    margin-bottom: 16px;
}

.lineitems-title[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 600;
    color: #6B6760;
    margin-bottom: 8px;
}

.lineitem-row[b-l5663gwyp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
}

.li-desc[b-l5663gwyp0] { flex: 1 1 auto; }
.li-qty[b-l5663gwyp0]  { flex: 0 0 auto; color: #6B6760; }
.li-price[b-l5663gwyp0] { flex: 0 0 auto; font-weight: 600; }

/* ── Correction audit ── */
.drawer-audit[b-l5663gwyp0] {
    border-top: 1px solid #E8E5E0;
    padding-top: 12px;
    margin-bottom: 16px;
}

.audit-title[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 600;
    color: #6B6760;
    margin-bottom: 8px;
}

.audit-row[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px dashed #E8E5E0;
}

.audit-field[b-l5663gwyp0] { font-weight: 600; }
.audit-change[b-l5663gwyp0] { color: #201F1D; }
.audit-meta[b-l5663gwyp0] { color: #9E815C; font-size: 14px; }

/* ── Actions ── */
.drawer-actions[b-l5663gwyp0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.receipt-drawer[b-l5663gwyp0]  .action-btn.rz-button {
    flex: 1 1 auto;
    min-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
}

.receipt-drawer[b-l5663gwyp0]  .cta-gold.rz-button,
.receipt-drawer[b-l5663gwyp0]  .cta-gold.rz-button:hover,
.receipt-drawer[b-l5663gwyp0]  .cta-gold.rz-button:focus {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.receipt-drawer[b-l5663gwyp0]  .cta-gold.rz-button:hover {
    background-color: #B89970;
    border-color: #B89970;
}

.receipt-drawer[b-l5663gwyp0]  .correct-btn.rz-button {
    background-color: #FFFFFF;
    border: 1px solid #201F1D;
    color: #201F1D;
}

.receipt-drawer[b-l5663gwyp0]  .reject-btn.rz-button {
    background-color: #FFFFFF;
    border: 1px solid #C0392B;
    color: #C0392B;
}

.correct-hint[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
    margin: 0;
    line-height: 1.4;
}

.terminal-note[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
    background: #F4ECDF;
    border-radius: 8px;
    padding: 12px;
    margin: 0;
    line-height: 1.4;
}

/* ── Badges (semantic palette, never gold) ── */
.rpt-badge[b-l5663gwyp0] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    /* Never shrink inside a flex row (.drawer-flags, .recon-col-match) — a nowrap pill that is
       allowed to shrink clips its own label, which is the only thing the pill is for. */
    flex: 0 0 auto;
}

.rpt-badge--neutral[b-l5663gwyp0] { background: #ECEAE6; color: #4A4843; }
.rpt-badge--attention[b-l5663gwyp0] { background: #FBEFD6; color: #8A6D1E; }
.rpt-badge--suspect[b-l5663gwyp0] { background: #F7E2E0; color: #C0392B; }
.rpt-badge--ok[b-l5663gwyp0] { background: #E3F1E6; color: #2E6B3A; }
.rpt-badge--rejected[b-l5663gwyp0] { background: #F7E2E0; color: #C0392B; }

/* ── Store-mismatch soft note (RCPT-13). Informational amber banner — uses the --attention
   palette (NOT --suspect/red, NOT gold). Reads as a "note", never an error. ── */
.store-note[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.store-note-title[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 600;
}

.store-note-body[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 400;
}

/* ── AI-OFF editable declaration (pre-filled from the staff Declaration, RCPT-12). ── */
.decl-edit[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.decl-edit-title[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 600;
    color: #6B6760;
}

.decl-edit-row[b-l5663gwyp0] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.decl-edit-field[b-l5663gwyp0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.decl-edit-brand[b-l5663gwyp0] { flex: 1 1 160px; min-width: 140px; }
.decl-edit-qty[b-l5663gwyp0]   { flex: 0 1 88px; }
.decl-edit-total[b-l5663gwyp0] { flex: 0 1 120px; }

.decl-edit-label[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
    line-height: 1.4;
}

.decl-edit-total-row[b-l5663gwyp0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #E8E5E0;
    padding-top: 16px;
}

.decl-edit-total-label[b-l5663gwyp0] {
    font-size: 16px;
    color: #201F1D;
}

.decl-edit-total-figure[b-l5663gwyp0] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
}

/* ── AI-ON declared-vs-extracted side-by-side table (D-05). 8px/16px rhythm; the match badge
   is the emphasis (label-tier text in the cells). Badges use the rpt-badge palette, never gold. ── */
.recon-table[b-l5663gwyp0] {
    border-top: 1px solid #E8E5E0;
    padding-top: 16px;
    margin-bottom: 16px;
}

.recon-title[b-l5663gwyp0] {
    font-size: 14px;
    font-weight: 600;
    color: #6B6760;
    margin-bottom: 8px;
}

.recon-head[b-l5663gwyp0],
.recon-row[b-l5663gwyp0] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.recon-head[b-l5663gwyp0] {
    padding-bottom: 8px;
    border-bottom: 1px solid #E8E5E0;
}

.recon-row[b-l5663gwyp0] {
    padding: 8px 0;
    border-bottom: 1px solid #E8E5E0;
}

.recon-col[b-l5663gwyp0] {
    font-size: 14px;
    line-height: 1.4;
}

.recon-head .recon-col[b-l5663gwyp0] {
    font-weight: 600;
    color: #6B6760;
}

.recon-col-match[b-l5663gwyp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    text-align: right;
}

.recon-cell[b-l5663gwyp0] {
    color: #201F1D;
}

.recon-delta[b-l5663gwyp0] {
    font-size: 14px;
    color: #6B6760;
}

/* ── Reopen ─────────────────────────────────────────────────────────────────────────────────
   Corrective, not a forward decision: outline rather than the gold fill (which the app reserves
   for the primary forward action), and not Danger either — nothing is destroyed, the record and
   the blob are kept, and red belongs to Reject. */
[b-l5663gwyp0] .reopen-btn {
    background: #FFFFFF;
    border: 1px solid #CEB185;
    color: #201F1D;
    font-weight: 600;
}

[b-l5663gwyp0] .reopen-btn:hover:not(:disabled) {
    background: #FBF8F3;
    border-color: #B89970;
}

.rpt-badge--reopened[b-l5663gwyp0] {
    background: #FBF8F3;
    border: 1px solid #CEB185;
    color: #201F1D;
}

/* A reopen row is the one history entry that reverses money — let it read as an event. */
.audit-row--reopen[b-l5663gwyp0] {
    border-left: 2px solid #CEB185;
    padding-left: .5rem;
}
/* /Pages/Admin/Sales/ReceiptReopenDialog.razor.rz.scp.css */
.reopen-dialog[b-j5tz0ljx79] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.reopen-lede[b-j5tz0ljx79] {
    font-size: .875rem;
    color: #6B6862;
    margin-bottom: 1rem;
}

.reopen-dialog[b-j5tz0ljx79]  .rz-textarea {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: .5rem .75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .9375rem;
    color: #201F1D;
}

.reopen-dialog[b-j5tz0ljx79]  .rz-textarea:focus {
    border-color: #CEB185;
    outline: none;
    box-shadow: none;
}

.reopen-meta[b-j5tz0ljx79] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .375rem;
}

.reopen-count[b-j5tz0ljx79] {
    color: #6B6862;
    white-space: nowrap;
}

/* Corrective, not the primary forward action — outline rather than the gold fill. */
.reopen-dialog[b-j5tz0ljx79]  .reopen-confirm-btn {
    background: #FFFFFF;
    border: 1px solid #CEB185;
    color: #201F1D;
    font-weight: 600;
}

.reopen-dialog[b-j5tz0ljx79]  .reopen-confirm-btn:hover:not(:disabled) {
    background: #FBF8F3;
    border-color: #B89970;
}

.reopen-dialog[b-j5tz0ljx79]  .reopen-confirm-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
/* /Pages/Admin/Sales/ReceiptsQueue.razor.rz.scp.css */
/* Plan 04.6-06 / UI-SPEC §"Admin receipt review queue" — brand-styled admin grid + drawer split.
   Montserrat; gold #CEB185 reserved for the primary CTA only; status/flag badges use the SEMANTIC
   palette (amber needs-attention, grey duplicate/neutral, destructive-tinted suspect, success
   approved) — NEVER the gold accent. ::deep themes the Radzen DataGrid children. */

.receipts-queue-page[b-80bg3z7xy8] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.queue-main[b-80bg3z7xy8] {
    flex: 1 1 auto;
    min-width: 0;
}

.queue-head h1[b-80bg3z7xy8] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4px;
}

.queue-sub[b-80bg3z7xy8] {
    font-size: 16px;
    color: #6B6760;
    margin: 0 0 16px;
}

/* ── Tabs ──
   Match the canonical admin-portal filter-pill vocabulary (AdminModelsView .filter-btn,
   AdminEventsView, Staff/List .nav-pills): fully-rounded white/outlined pills, ink #201F1D
   active fill with white text, gold #CEB185 hover border. Pill geometry (999px radius,
   weight 500) is what makes these feel native — NOT a square button. Gold stays reserved
   for the hover border + the primary CTA, never the active fill. */
.queue-tabs[b-80bg3z7xy8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.queue-tab[b-80bg3z7xy8] {
    min-height: 44px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.queue-tab:hover[b-80bg3z7xy8] {
    border-color: #CEB185;
}

/* Active tab = ink fill (the documented admin filter convention) — NOT the gold CTA colour. */
.queue-tab--active[b-80bg3z7xy8] {
    background: #201F1D;
    border-color: #201F1D;
    color: #FFFFFF;
}

/* ── Empty states ── */
.queue-empty[b-80bg3z7xy8] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    margin-top: 16px;
}

.queue-empty__heading[b-80bg3z7xy8] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.queue-empty p[b-80bg3z7xy8] {
    color: #6B6760;
    font-size: 16px;
}

/* ── Grid ── */
.receipts-queue-page[b-80bg3z7xy8]  .queue-grid {
    border-radius: 8px;
}

.receipts-queue-page[b-80bg3z7xy8]  .row-flagged td {
    background: #FBF4E4;
}

.receipts-queue-page[b-80bg3z7xy8]  .rz-button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 8px;
}

/* Phone card fallback — the flagged tint the grid applies via .row-flagged. */
.receipt-card--flagged[b-80bg3z7xy8] {
    background: #FBF4E4;
}

/* ── Drawer panel ── */
.queue-drawer-panel[b-80bg3z7xy8] {
    flex: 0 0 420px;
    max-width: 420px;
    position: sticky;
    top: 16px;
}

@media (max-width: 1100px) {
    .receipts-queue-page[b-80bg3z7xy8] {
        flex-direction: column;
    }
    .queue-drawer-panel[b-80bg3z7xy8] {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        position: static;
    }
}

/* Let cells WRAP instead of truncating. Radzen's default .rz-cell-data is nowrap+hidden+ellipsis,
   which sliced the Status pill to "Approve" — cutting the pill's own background flat, so it didn't
   even read as a badge. A status label is the whole point of the column; there is nothing useful
   left when it is half-rendered. Same override List.razor / Attendance.razor.css already carry
   (993e136), which did not cover this queue. The column Widths above reserve the room; this stops
   the cell truncating regardless. */
.receipts-queue-page[b-80bg3z7xy8]  .queue-grid .rz-cell-data {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* Headers ellipsise by the same default — "Verified sa…" is a column an admin can no longer
   identify, on the grid's only money-adjacent column. */
.receipts-queue-page[b-80bg3z7xy8]  .queue-grid .rz-column-title,
.receipts-queue-page[b-80bg3z7xy8]  .queue-grid .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* ── Semantic status badges (shared palette; NOT gold) ── */
.rpt-badge[b-80bg3z7xy8] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    /* Never shrink — the phone card head is a flex row, and a pill that is allowed to shrink keeps
       its nowrap text while its BACKGROUND narrows, so the label spills out of a cut-off pill.
       Deliberately no `max-width: 100%` for the same reason: capping the box while the text cannot
       wrap reproduces the clipped-pill bug rather than fixing it. */
    flex: 0 0 auto;
}

.rpt-badge--neutral[b-80bg3z7xy8] {
    background: #ECEAE6;
    color: #4A4843;
}

.rpt-badge--attention[b-80bg3z7xy8] {
    background: #FBEFD6;
    color: #8A6D1E;
}

.rpt-badge--suspect[b-80bg3z7xy8] {
    background: #F7E2E0;
    color: #C0392B;
}

.rpt-badge--ok[b-80bg3z7xy8] {
    background: #E3F1E6;
    color: #2E6B3A;
}

.rpt-badge--rejected[b-80bg3z7xy8] {
    background: #F7E2E0;
    color: #C0392B;
}

/* A reopened receipt is abnormal — it should be identifiable in the queue at a glance, not just
   once the drawer is open. */
.rpt-badge--reopened[b-80bg3z7xy8] {
    background: #FBF8F3;
    border: 1px solid #CEB185;
    color: #201F1D;
}
/* /Pages/Admin/Settings/AdminSettings.razor.rz.scp.css */
/* The admin Settings shell — page chrome and the tab strip only. Everything inside a tab is
   styled by that tab's own scoped CSS. */

.settings-page[b-7op2f9vkmr] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    max-width: 720px;
    margin: 0 auto;
}

.settings-head h1[b-7op2f9vkmr] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Tab strip: never crop tabs — scroll horizontally on narrow screens and keep each label on
   one line. Same fix as the sales campaign builder's builder-tabs. */
.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav li {
    flex: 0 0 auto;
}

.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav li .rz-tabview-title {
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Gold selected-tab indicator, matching the brand accent used for the Save CTAs inside.
   Radzen marks the selected tab rz-tabview-selected — NOT rz-state-active, which is what its
   other components use; this originally targeted the wrong class, so the highlight never
   applied. Pinned by StaffDetailTabsTests. */
.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title {
    color: #201F1D;
}

.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-nav li.rz-tabview-selected {
    border-bottom-color: #CEB185;
}

/* Let the tab body sit flush with the card inside it. */
.settings-page[b-7op2f9vkmr]  .settings-tabs .rz-tabview-panels {
    padding: 24px 0 0;
    background: transparent;
    border: none;
}
/* /Pages/Admin/Staff/Detail.razor.rz.scp.css */
/* Admin staff-detail page — page chrome and the tab strip only. Everything inside a tab is
   styled by that tab component's own scoped CSS. */

.staff-detail-page[b-e7fphplxiw] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    max-width: 1040px;
    margin: 0 auto;
}

/* Same back-link treatment as the event detail pages. */
.back-link[b-e7fphplxiw] {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #6B6660;
    text-decoration: none;
}

.back-link:hover[b-e7fphplxiw] {
    color: #9E815C;
}

/* ── Identity + actions header ── */
.detail-header[b-e7fphplxiw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.detail-id[b-e7fphplxiw] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.detail-avatar[b-e7fphplxiw] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #EDE8E0;
    border: 1px solid #E8E5E0;
}

.detail-id__text[b-e7fphplxiw] {
    min-width: 0;
}

.detail-header h1[b-e7fphplxiw] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
}

.detail-header .email[b-e7fphplxiw] {
    color: #6B6660;
    font-size: 14px;
    margin: 4px 0 6px;
    word-break: break-all;
}

.detail-actions[b-e7fphplxiw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.staff-detail-page[b-e7fphplxiw]  .detail-btn {
    min-height: 44px;
}

/* On a phone the buttons get the full width rather than wrapping into a ragged stack. */
@media (max-width: 599px) {
    .detail-actions[b-e7fphplxiw] {
        width: 100%;
    }

    .staff-detail-page[b-e7fphplxiw]  .detail-btn {
        flex: 1 1 auto;
    }
}

/* ── Tab strip ── */
/* Never crop tabs — five of them do not fit on a phone. Scroll horizontally and keep each
   label on one line. Same fix as AdminSettings.razor.css / builder-tabs. */
.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav li {
    flex: 0 0 auto;
}

.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav li .rz-tabview-title {
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Radzen marks the selected tab rz-tabview-selected — NOT rz-state-active, which is what its
   other components use. Pinned by StaffDetailTabsTests so this can't silently drift back. */
.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav li.rz-tabview-selected {
    border-bottom-color: #CEB185;
}

.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title {
    color: #201F1D;
}

/* The not-yet-built tabs must READ as unavailable, not merely be unclickable. */
.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-nav li.rz-state-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.staff-detail-page[b-e7fphplxiw]  .detail-tabs .rz-tabview-panels {
    padding: 24px 0 0;
    background: transparent;
    border: none;
}

/* ── Erased + not-found notices ── */
.erased-notice[b-e7fphplxiw] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    font-size: 14px;
}

.erased-notice p[b-e7fphplxiw] {
    margin: 0;
}

.erased-notice .erased-sub[b-e7fphplxiw] {
    color: #6B6660;
    font-size: 13px;
    margin-top: 8px;
}

.not-found[b-e7fphplxiw] {
    max-width: 560px;
    margin: 48px auto;
    text-align: center;
    color: #6B6660;
}

.not-found h1[b-e7fphplxiw] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px;
}

/* ── Status pill (shared palette with the roster + profile tab) ── */
.pill[b-e7fphplxiw] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.pill-applicant[b-e7fphplxiw] { background: #F4ECDF; color: #7A5A1F; }
.pill-interview[b-e7fphplxiw] { background: #E3EEF7; color: #1F4A7A; }
.pill-available[b-e7fphplxiw] { background: #E6F4EA; color: #1F5F32; }
.pill-onleave[b-e7fphplxiw]   { background: #F7F1DC; color: #7A6020; }
.pill-fired[b-e7fphplxiw]     { background: #F7E1E1; color: #7A1F1F; }
.pill-rejected[b-e7fphplxiw]  { background: #EAE5DC; color: #4A4640; }
.pill-suspended[b-e7fphplxiw] { background: #F4ECDF; color: #6B4E16; border: 1px dashed #B08A3E; }
.pill-deleted[b-e7fphplxiw]   { background: #EAE5DC; color: #6B6660; }
/* /Pages/AdminClientsView.razor.rz.scp.css */
/* AdminClientsView.razor.css */

.admin-clients-container[b-py28mxabxt] {
    background-color: #FFFFFF;
    /* No height/overflow here on purpose. .admin-layout__content is the app's
       only scroller (100vh + overflow-y:auto, with a large bottom padding on
       mobile to clear Safari's toolbar). A nested `height:100%; overflow-y:auto`
       resolved against that padded content box, so this list stopped ~160px
       short of the viewport and left a dead cream band under it. min-height
       keeps the white surface filling the screen when the roster is short. */
    min-height: 100%;
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Page title — left-aligned, present on both mobile and desktop. Top margin
   includes env(safe-area-inset-top) so the title clears the iOS notch when
   the WASM bundle runs inside the iOS WebView. */
.admin-page-title[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 25px;
    margin-top: calc(16px + env(safe-area-inset-top, 0px));
    line-height: 1.2;
}


/* Header Styles */
.search-header[b-py28mxabxt] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-py28mxabxt] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-py28mxabxt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-py28mxabxt] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-py28mxabxt] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-py28mxabxt] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    padding-top: 8px;
}

.search-input-container[b-py28mxabxt] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-py28mxabxt] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-py28mxabxt]::placeholder {
    color: #E8E5E0;
}

/* Filter Buttons */
.filter-buttons[b-py28mxabxt] {
    display: flex;
    gap: 5px;
    padding: 10px 25px; /* Add vertical padding */
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    min-height: 50px; /* Ensure minimum height */
    align-items: center; /* Center buttons vertically */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.filter-buttons[b-py28mxabxt]::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.filter-btn[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    min-width: 80px; /* Set minimum width */
    white-space: nowrap; /* "On hold (12)" must not break across lines */
    visibility: visible; /* Ensure buttons are visible */
    opacity: 1; /* Ensure buttons are not transparent */
}

.filter-btn.active[b-py28mxabxt] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.filter-btn:not(.active)[b-py28mxabxt] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

/* NOTE: the pills used to carry hard per-position widths (120px / 120px / 96px), and the
   4th (Prospects) fell through to min-width, so it was visibly narrower than its siblings.
   Segment labels now include a live count — "On hold (12)" — whose length changes with the
   roster, so all four size to their content instead. */

/* Loading and Error States */
.loading-container[b-py28mxabxt], .error-container[b-py28mxabxt], .no-clients[b-py28mxabxt] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
}

.loading-container p[b-py28mxabxt], .error-container p[b-py28mxabxt], .no-clients p[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-py28mxabxt] {
    color: #d32f2f;
}

/* Client Cards */
.client-cards-container[b-py28mxabxt] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.client-card[b-py28mxabxt] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    /* min-height, not height: the row now carries a 44px action button and a fixed 56px
       would clip it. */
    min-height: 56px;
    height: auto;
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

.client-card:hover[b-py28mxabxt] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.client-profile-image[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-img[b-py28mxabxt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.client-info[b-py28mxabxt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.client-name[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.client-company[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

.client-status[b-py28mxabxt] {
    flex-shrink: 0;
    text-align: right;
}

.status-text[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.status-text.pending[b-py28mxabxt] {
    color: #CEB185;
}

.status-text.approved[b-py28mxabxt] {
    color: #CEB185;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-clients-container[b-py28mxabxt] {
        max-width: 100%;
    }

    .search-bar-container[b-py28mxabxt] {
        padding: 10px 20px;
        padding-top: 8px;
    }

    .filter-buttons[b-py28mxabxt] {
        padding: 10px 20px; /* Add vertical padding */
        gap: 3px; /* Reduce gap slightly for mobile */
        min-height: 50px; /* Ensure minimum height */
    }

    .client-cards-container[b-py28mxabxt] {
        padding: 20px;
    }

    .client-card[b-py28mxabxt] {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 360px) {
    .search-header[b-py28mxabxt] {
        padding: 0 15px;
    }

    .header-logo[b-py28mxabxt] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-py28mxabxt] {
        right: 15px;
    }

    .search-bar-container[b-py28mxabxt] {
        padding: 10px 15px;
        padding-top: 8px;
    }

    .filter-buttons[b-py28mxabxt] {
        padding: 10px 15px; /* Add vertical padding */
        gap: 2px; /* Even smaller gap for very small screens */
        min-height: 50px; /* Ensure minimum height */
    }

    .filter-btn[b-py28mxabxt] {
        font-size: 14px; /* Slightly smaller font for very small screens */
        padding: 6px 12px; /* Reduce padding */
        min-width: 70px; /* Smaller minimum width */
    }

    .client-cards-container[b-py28mxabxt] {
        padding: 15px;
    }
}

/* Desktop layout (≥ 768px) — admin sidebar provides 240px chrome on the left.
   Cards stretch into a responsive grid; title + toolbar stay left-aligned. */
@media (min-width: 768px) {
    .admin-page-title[b-py28mxabxt] {
        font-size: 24px;
        margin: 24px 32px 8px;
    }

    .search-bar-container[b-py28mxabxt] {
        padding: 8px 32px;
        max-width: 720px;
    }

    .search-input-container[b-py28mxabxt] {
        width: auto;
    }

    .filter-buttons[b-py28mxabxt] {
        padding: 8px 32px 16px;
        max-width: 720px;
    }

    .client-cards-container[b-py28mxabxt] {
        padding: 0 32px 32px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        align-items: start;
        /* Pin rows to the top — the container has flex: 1 from the base
           rule so it stretches to viewport height; without this, grid's
           default align-content: normal/stretch distributes the empty
           vertical space across rows and creates a visible gap between
           row 1 and row 2 when content doesn't fill the viewport. */
        align-content: start;
    }

    .client-card[b-py28mxabxt] {
        max-width: none;
    }
}

/* ---- Account lifecycle: status pill, secondary badge, and row actions ---------------- */

.client-status[b-py28mxabxt] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.client-status .status-text[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

/* Lifecycle states are visually distinct. */
.status-text.status-active[b-py28mxabxt] {
    color: #CEB185;
}

.status-text.status-onhold[b-py28mxabxt] {
    color: #B26A00;
}

.status-text.status-archived[b-py28mxabxt] {
    color: #6B6660;
}

/* Secondary badge: Active but can't sign in yet. Deliberately quieter than the status pill
   — it is extra context, not a lifecycle state. */
.status-note[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #6B6660;
    margin: 2px 0 0;
    white-space: nowrap;
}

/* Row actions. Only the reversible action appears here; archive lives on the detail page. */
.client-actions[b-py28mxabxt] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}

.row-action[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.row-action:hover:not(:disabled)[b-py28mxabxt] {
    border-color: #CEB185;
}

.row-action:disabled[b-py28mxabxt] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/AdminCreateEvent.razor.rz.scp.css */
/* Admin Create Event Container */
.create-event-container[b-zw4upkgagb] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-event-header[b-zw4upkgagb] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-zw4upkgagb] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-zw4upkgagb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-event-content[b-zw4upkgagb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-zw4upkgagb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-container[b-zw4upkgagb] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-zw4upkgagb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-zw4upkgagb] {
    margin-top: 10px;
}

.add-photo-text[b-zw4upkgagb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-zw4upkgagb] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-zw4upkgagb] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-zw4upkgagb] {
    color: #CEB185;
}

.form-input-container[b-zw4upkgagb] {
    position: relative;
    width: 100%;
}

.form-input[b-zw4upkgagb] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-zw4upkgagb] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-zw4upkgagb]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-zw4upkgagb] {
    line-height: 44px;
}

.form-input[type="date"][b-zw4upkgagb]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-zw4upkgagb] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dropdown-icon[b-zw4upkgagb] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Submit Section */
.submit-section[b-zw4upkgagb] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-zw4upkgagb] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-zw4upkgagb] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-zw4upkgagb] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-zw4upkgagb] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-zw4upkgagb] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-zw4upkgagb] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-zw4upkgagb] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-zw4upkgagb] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-event-content[b-zw4upkgagb] {
        padding: 15px 20px 220px 20px;
    }

    .form-group[b-zw4upkgagb] {
        margin-bottom: 20px;
    }

    .photo-container[b-zw4upkgagb] {
        width: 100px;
        height: 100px;
    }

    .photo-overlay[b-zw4upkgagb] {
        width: 50px;
        height: 50px;
    }

    .submit-section[b-zw4upkgagb] {
        padding: 0 15px;
        max-width: 100%;
    }

    .submit-button[b-zw4upkgagb] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .create-event-content[b-zw4upkgagb] {
        padding: 10px 15px 220px 15px;
    }

    .header-title[b-zw4upkgagb] {
        font-size: 20px;
    }

    .form-label[b-zw4upkgagb] {
        font-size: 14px;
    }

    .form-input[b-zw4upkgagb] {
        font-size: 14px;
    }

    .add-photo-text[b-zw4upkgagb] {
        font-size: 14px;
    }

    .submit-button[b-zw4upkgagb] {
        font-size: 14px;
    }

    .submit-section[b-zw4upkgagb] {
        padding: 0 10px;
    }
}

@media (max-height: 700px) {
    .create-event-content[b-zw4upkgagb] {
        padding-bottom: 200px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-zw4upkgagb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-zw4upkgagb] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-zw4upkgagb 0.3s ease-out;
}

@keyframes modalSlideIn-b-zw4upkgagb {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-zw4upkgagb] {
        padding: 10px;
    }

    .cropper-modal-container[b-zw4upkgagb] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-zw4upkgagb] {
        padding: 5px;
    }

    .cropper-modal-container[b-zw4upkgagb] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/AdminDashboard.razor.rz.scp.css */
/*
    Dashboard shell only — the tab strip and page head. Each tab's own .razor.css owns its content.

    This file used to carry ~450 lines, including a fully styled `.quick-actions-*` block that
    nothing rendered any more and the `.activity-*` block for the fabricated activity list. Both
    are gone rather than left to rot; the `.stat-card` rules moved to DashboardStatTile.razor.css,
    and the hand-rolled `.loading-spinner` gave way to the app-standard
    RadzenProgressBarCircular.
*/

.dash[b-jgockqfwaz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    font-family: 'Montserrat', sans-serif;
}

.dash__head[b-jgockqfwaz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash__title[b-jgockqfwaz] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #201F1D;
}

.dash__subtitle[b-jgockqfwaz] {
    margin: 0;
    font-size: 14px;
    color: #6B6660;
}

.dash__loading[b-jgockqfwaz] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

/* Radzen owns the tab strip's DOM, so theming it needs ::deep. Kept to the brand's
   ink-and-border vocabulary: the gold accent is spent on the Overview headline figure,
   not on chrome. */
[b-jgockqfwaz] .dash__tabs .rz-tabview-nav {
    background: transparent;
    border-bottom: 1px solid var(--color-border, #E8E5E0);
    gap: 4px;
}

[b-jgockqfwaz] .dash__tabs .rz-tabview-nav li a {
    /* 44px touch target — the admin portal's primary device is an iPad. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #6B6660;
    background: transparent;
    border: none;
}

[b-jgockqfwaz] .dash__tabs .rz-tabview-nav li.rz-state-active a {
    color: #201F1D;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 #201F1D;
}

[b-jgockqfwaz] .dash__tabs .rz-tabview-panels {
    padding: 16px 0 0;
    background: transparent;
    border: none;
}

@media (max-width: 767px) {
    .dash[b-jgockqfwaz] { padding: 12px; }
    .dash__title[b-jgockqfwaz] { font-size: 20px; }
}
/* /Pages/AdminEditEvent.razor.rz.scp.css */
/* Admin Edit Event Container */
.edit-event-container[b-tqrymew60s] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.edit-event-header[b-tqrymew60s] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-tqrymew60s] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.edit-event-content[b-tqrymew60s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-tqrymew60s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-container[b-tqrymew60s] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-tqrymew60s] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-tqrymew60s] {
    margin-top: 10px;
}

.add-photo-text[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-tqrymew60s] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-tqrymew60s] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-tqrymew60s] {
    color: #CEB185;
}

.form-input-container[b-tqrymew60s] {
    position: relative;
    width: 100%;
}

.form-input[b-tqrymew60s] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-tqrymew60s] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-tqrymew60s]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-tqrymew60s] {
    line-height: 44px;
}

.form-input[type="date"][b-tqrymew60s]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-tqrymew60s] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dropdown-icon[b-tqrymew60s] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Submit Section */
.submit-section[b-tqrymew60s] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-tqrymew60s] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-tqrymew60s] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-tqrymew60s] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-tqrymew60s] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-tqrymew60s] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-tqrymew60s] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-tqrymew60s] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-tqrymew60s] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Loading State */
.loading-state[b-tqrymew60s] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    flex: 1;
}

.loading-state p[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

/* Error State */
.error-state[b-tqrymew60s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
    flex: 1;
}

.error-state p[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

.back-to-events[b-tqrymew60s] {
    background-color: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-tqrymew60s] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .edit-event-content[b-tqrymew60s] {
        padding: 15px 20px 220px 20px;
    }

    .form-group[b-tqrymew60s] {
        margin-bottom: 20px;
    }

    .photo-container[b-tqrymew60s] {
        width: 100px;
        height: 100px;
    }

    .photo-overlay[b-tqrymew60s] {
        width: 50px;
        height: 50px;
    }

    .submit-section[b-tqrymew60s] {
        padding: 0 15px;
        max-width: 100%;
    }

    .submit-button[b-tqrymew60s] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .edit-event-content[b-tqrymew60s] {
        padding: 10px 15px 220px 15px;
    }

    .header-title[b-tqrymew60s] {
        font-size: 20px;
    }

    .form-label[b-tqrymew60s] {
        font-size: 14px;
    }

    .form-input[b-tqrymew60s] {
        font-size: 14px;
    }

    .add-photo-text[b-tqrymew60s] {
        font-size: 14px;
    }

    .submit-button[b-tqrymew60s] {
        font-size: 14px;
    }

    .submit-section[b-tqrymew60s] {
        padding: 0 10px;
    }
}

@media (max-height: 700px) {
    .edit-event-content[b-tqrymew60s] {
        padding-bottom: 200px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-tqrymew60s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-tqrymew60s] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-tqrymew60s 0.3s ease-out;
}

@keyframes modalSlideIn-b-tqrymew60s {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-tqrymew60s] {
        padding: 10px;
    }

    .cropper-modal-container[b-tqrymew60s] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-tqrymew60s] {
        padding: 5px;
    }

    .cropper-modal-container[b-tqrymew60s] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/AdminEventDetails.razor.rz.scp.css */
/* Admin Event Details Container */
.admin-event-details-container[b-4a5m445gen] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-event-details-container[b-4a5m445gen]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-4a5m445gen] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-4a5m445gen] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

.event-title[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-4a5m445gen] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-4a5m445gen] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-4a5m445gen] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-4a5m445gen] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-4a5m445gen] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-4a5m445gen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.event-name[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
    flex: 1;
}

.event-action-buttons[b-4a5m445gen] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 0;
}

.edit-event-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.edit-event-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.edit-event-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

.favorite-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.favorite-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.favorite-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-4a5m445gen] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.detail-content[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-content p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Vacancies Section */
.vacancies-section[b-4a5m445gen] {
    margin: 0 25px 40px 25px;
}

/* Jobs Accordion */
.jobs-accordion[b-4a5m445gen] {
    margin-top: 8px;
}

.accordion-item[b-4a5m445gen] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-header[b-4a5m445gen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover[b-4a5m445gen] {
    background-color: #f8f7f5;
}

.accordion-title[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.accordion-title h4[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-count[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #ceb185;
}

.accordion-icon[b-4a5m445gen] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.accordion-icon img[b-4a5m445gen] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.accordion-icon.expanded img[b-4a5m445gen] {
    transform: rotate(180deg);
}

.accordion-content[b-4a5m445gen] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.expanded[b-4a5m445gen] {
    max-height: 1000px; /* Large enough to accommodate content */
}

/* Job Cards */
.job-card[b-4a5m445gen] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}

.job-card:last-child[b-4a5m445gen] {
    border-bottom: none;
}

.job-info[b-4a5m445gen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-type[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-description[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

.job-details[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-detail[b-4a5m445gen] {
    display: flex;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.job-detail .detail-label[b-4a5m445gen] {
    color: #666;
    min-width: 80px;
}

.job-detail span:not(.detail-label)[b-4a5m445gen] {
    color: #201f1d;
}

.view-job-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-job-button:hover[b-4a5m445gen] {
    color: #b8a06a;
    background-color: rgba(206, 177, 133, 0.1);
}

/* No Jobs State */
.no-jobs[b-4a5m445gen] {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f7f5;
    border-radius: 8px;
    margin-top: 8px;
}

.no-jobs p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Loading State */
.loading-state[b-4a5m445gen] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-4a5m445gen] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-4a5m445gen] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-4a5m445gen] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-4a5m445gen] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-4a5m445gen] {
        width: 100%;
        height: 120px;
    }

    .vacancies-section[b-4a5m445gen] {
        margin: 0 25px 40px 25px;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-4a5m445gen] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .vacancies-section[b-4a5m445gen] {
        margin: 0 20px 40px 20px;
    }
}

/* /Pages/AdminEventsView.razor.rz.scp.css */
/* AdminEventsView.razor.css */

.admin-events-container[b-rz8bnivn48] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Page title — left-aligned, present on both mobile and desktop. Top margin
   includes env(safe-area-inset-top) so the title clears the iOS notch when
   the WASM bundle runs inside the iOS WebView. */
.admin-page-title[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 25px;
    margin-top: calc(16px + env(safe-area-inset-top, 0px));
    line-height: 1.2;
}

/* Search Bar Styles */
.search-bar-container[b-rz8bnivn48] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    padding-top: 8px;
}

.search-input-container[b-rz8bnivn48] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 100%;
}

.search-icon[b-rz8bnivn48] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-rz8bnivn48] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-rz8bnivn48] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-rz8bnivn48]::placeholder {
    color: #E8E5E0;
}

/* Content Area */
.content-area[b-rz8bnivn48] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-rz8bnivn48] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-rz8bnivn48] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-rz8bnivn48] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-image[b-rz8bnivn48] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-rz8bnivn48] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-rz8bnivn48] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}


/* Loading State */
.loading-state[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.loading-state p[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Error State */
.error-container[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.error-container p[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #FF6B6B;
    margin: 0;
}

/* Empty State */
.empty-state[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Create Event Button */
.create-event-section[b-rz8bnivn48] {
    padding: 0 56px 20px 56px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
}

.create-event-btn[b-rz8bnivn48] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.create-event-btn:hover[b-rz8bnivn48] {
    background-color: #3a3a3a;
}

.create-event-btn:active[b-rz8bnivn48] {
    background-color: #1a1a1a;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-events-container[b-rz8bnivn48] {
        max-width: 100%;
    }

    .search-bar-container[b-rz8bnivn48] {
        padding: 10px 20px;
        padding-top: 8px;
    }

    .content-area[b-rz8bnivn48] {
        padding: 20px 20px;
    }
}

@media (max-width: 360px) {
    .search-bar-container[b-rz8bnivn48] {
        padding: 10px 15px;
        padding-top: 8px;
    }

    .content-area[b-rz8bnivn48] {
        padding: 20px 15px;
    }
}

/* Desktop layout (≥ 768px) — admin sidebar provides 240px chrome on the left.
   Event cards stretch into a responsive grid; title + toolbar stay left-aligned. */
@media (min-width: 768px) {
    .admin-page-title[b-rz8bnivn48] {
        font-size: 24px;
        margin: 24px 32px 8px;
    }

    .search-bar-container[b-rz8bnivn48] {
        padding: 8px 32px;
        max-width: 720px;
    }

    .content-area[b-rz8bnivn48] {
        padding: 16px 32px 32px;
    }

    .events-list[b-rz8bnivn48] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        align-items: start;
        align-content: start;
    }
}
/* /Pages/AdminFeedback.razor.rz.scp.css */
/* AdminFeedback.razor.css */

.admin-feedback-container[b-vhqck0b4ak] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-feedback-container[b-vhqck0b4ak]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-vhqck0b4ak] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-vhqck0b4ak] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-vhqck0b4ak] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-vhqck0b4ak] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Star Rating Section */
.star-rating-section[b-vhqck0b4ak] {
    padding: 20px 25px 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.stars-container[b-vhqck0b4ak] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.star-wrapper[b-vhqck0b4ak] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    transition: transform 0.1s ease;
}

.star-wrapper:hover[b-vhqck0b4ak] {
    transform: scale(1.1);
}

.star-wrapper:active[b-vhqck0b4ak] {
    transform: scale(0.95);
}

.star-icon[b-vhqck0b4ak] {
    width: 100%;
    height: 100%;
    aspect-ratio: 19/18;
    object-fit: contain;
    display: block;
}

/* Feedback Text Section */
.feedback-text-section[b-vhqck0b4ak] {
    padding: 0 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-textarea[b-vhqck0b4ak] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 206px;
    width: 100%;
    max-width: 350px;
    padding: 14px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    resize: none;
    outline: none;
}

.feedback-textarea[b-vhqck0b4ak]::placeholder {
    color: rgba(232, 229, 224, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.feedback-textarea:focus[b-vhqck0b4ak] {
    border-color: #CEB185;
}

/* Submit Button Section */
.submit-button-section[b-vhqck0b4ak] {
    padding: 0 25px;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.submit-button[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.submit-button:hover:not(:disabled)[b-vhqck0b4ak] {
    background-color: #3a3835;
}

.submit-button:active:not(:disabled)[b-vhqck0b4ak] {
    transform: translateY(1px);
}

.submit-button.disabled[b-vhqck0b4ak],
.submit-button:disabled[b-vhqck0b4ak] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-feedback-container[b-vhqck0b4ak] {
        max-width: 100%;
    }

    .header-back-button[b-vhqck0b4ak] {
        left: 15px;
    }

    .star-rating-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .feedback-text-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .submit-button-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .feedback-textarea[b-vhqck0b4ak] {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-vhqck0b4ak] {
        left: 12px;
    }

    .star-rating-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }

    .feedback-text-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }

    .submit-button-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }
}

/* /Pages/AdminFeedbackSubmitted.razor.rz.scp.css */
/* AdminFeedbackSubmitted.razor.css */

.admin-feedback-submitted-container[b-45mf1nb0b0] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-feedback-submitted-container[b-45mf1nb0b0]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-45mf1nb0b0] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-title[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-45mf1nb0b0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
}

/* Thank You Message */
.thank-you-message[b-45mf1nb0b0] {
    margin-top: 204px; /* Position at 310px from top (106px header + 204px = 310px) */
    padding: 0 25px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-message p[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    width: 272px;
}

/* Done Button Section */
.done-button-section[b-45mf1nb0b0] {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 56px;
}

.done-button[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: center;
}

.done-button:hover[b-45mf1nb0b0] {
    background-color: #3a3835;
}

.done-button:active[b-45mf1nb0b0] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-feedback-submitted-container[b-45mf1nb0b0] {
        max-width: 100%;
    }

    .thank-you-message[b-45mf1nb0b0] {
        padding: 0 20px;
    }

    .thank-you-message p[b-45mf1nb0b0] {
        width: 100%;
        max-width: 272px;
    }

    .done-button-section[b-45mf1nb0b0] {
        padding: 0 20px;
    }

    .done-button[b-45mf1nb0b0] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .thank-you-message[b-45mf1nb0b0] {
        padding: 0 15px;
        margin-top: 180px;
    }

    .done-button-section[b-45mf1nb0b0] {
        padding: 0 15px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .thank-you-message[b-45mf1nb0b0] {
        margin-top: 150px;
    }
}
/* /Pages/AdminJobDetails.razor.rz.scp.css */
/* Admin Job Details Page Styles */
.admin-job-details-container[b-egkxy5xoh1] {
    background-color: #FFFFFF;
    position: relative;
    overflow-y: auto; /* Enable scrolling */
    height: 100%; /* Set height to enable scrolling */
    min-height: 100%; /* Ensure minimum height */
}

/* Header Styles */
.job-header[b-egkxy5xoh1] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-egkxy5xoh1] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-egkxy5xoh1] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-egkxy5xoh1] {
    width: 100%;
    height: 100%;
}

.job-title[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Job Content Styles */
.job-content[b-egkxy5xoh1] {
    padding: 20px 25px 100px 25px; /* Extra bottom padding to ensure content is scrollable and not hidden */
}

.job-section[b-egkxy5xoh1] {
    margin-bottom: 25px;
}

.section-label[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.section-content[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    word-wrap: break-word;
}

/* Age and Height Row */
.age-height-row[b-egkxy5xoh1] {
    display: flex;
    gap: 20px;
}

.age-section[b-egkxy5xoh1],
.height-section[b-egkxy5xoh1] {
    flex: 1;
}

/* Loading and Error States */
.loading-state[b-egkxy5xoh1],
.error-state[b-egkxy5xoh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-egkxy5xoh1],
.error-state p[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 20px 0;
}

.back-to-events[b-egkxy5xoh1] {
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #201F1D;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 24px;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-egkxy5xoh1] {
    background-color: #B8A070;
}

/* Responsive Design */
@media (max-width: 480px) {
    .admin-job-details-container[b-egkxy5xoh1] {
        padding-bottom: 200px; /* Extra space for small screens */
    }

    .job-content[b-egkxy5xoh1] {
        padding: 15px 20px 120px 20px; /* Extra bottom padding for small screens */
    }

    .age-height-row[b-egkxy5xoh1] {
        flex-direction: column;
        gap: 15px;
    }
}

/* Large screens - center content */
@media (min-width: 768px) {
    .job-content[b-egkxy5xoh1] {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 25px 100px 25px; /* Maintain bottom padding on large screens */
    }
}
/* /Pages/AdminModelsView.razor.rz.scp.css */
/* AdminModelsView.razor.css */

.admin-models-container[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    /* No height/overflow here on purpose. .admin-layout__content is the app's
       only scroller (100vh + overflow-y:auto, with a large bottom padding on
       mobile to clear Safari's toolbar). A nested `height:100%; overflow-y:auto`
       resolved against that padded content box, so this list stopped ~160px
       short of the viewport and left a dead cream band under it. min-height
       keeps the white surface filling the screen when the roster is short. */
    min-height: 100%;
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Page title — left-aligned, present on both mobile and desktop. The top
   margin includes env(safe-area-inset-top) so the title clears the iOS
   notch when the WASM bundle runs inside the iOS WebView. */
.admin-page-title[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 25px;
    margin-top: calc(16px + env(safe-area-inset-top, 0px));
    line-height: 1.2;
}


/* Header Styles */
.search-header[b-t7cwzqdc7j] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-t7cwzqdc7j] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-t7cwzqdc7j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-t7cwzqdc7j] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-t7cwzqdc7j] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-t7cwzqdc7j] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    padding-top: 8px;
}


.search-input-container[b-t7cwzqdc7j] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-t7cwzqdc7j] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-t7cwzqdc7j]::placeholder {
    color: #E8E5E0;
}


/* Filter Buttons */
.filter-buttons[b-t7cwzqdc7j] {
    display: flex;
    gap: 5px;
    padding: 10px 25px; /* Add vertical padding */
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    min-height: 50px; /* Ensure minimum height */
    align-items: center; /* Center buttons vertically */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.filter-buttons[b-t7cwzqdc7j]::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.filter-btn[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    min-width: 80px; /* Set minimum width */
    white-space: nowrap; /* "On hold (12)" must not break across lines */
    visibility: visible; /* Ensure buttons are visible */
    opacity: 1; /* Ensure buttons are not transparent */
}

.filter-btn.active[b-t7cwzqdc7j] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.filter-btn:not(.active)[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

/* NOTE: the pills used to carry hard per-position widths (100px / 120px / 96px). Segment
   labels now include a live count — "On hold (12)" — which does not fit a fixed width, and
   the count length changes as the roster does. They size to their content instead. */

/* Loading and Error States */
.loading-container[b-t7cwzqdc7j], .error-container[b-t7cwzqdc7j], .no-models[b-t7cwzqdc7j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
    min-height: 50vh;
    width: 100%;
}

.loading-container p[b-t7cwzqdc7j], .error-container p[b-t7cwzqdc7j], .no-models p[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-t7cwzqdc7j] {
    color: #d32f2f;
}

/* Model Cards */
.model-cards-container[b-t7cwzqdc7j] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.model-card[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    /* min-height, not height: the row now carries a 44px action button and a fixed 80px
       would clip it. */
    min-height: 80px;
    height: auto;
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

.model-card:hover[b-t7cwzqdc7j] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.model-profile-image[b-t7cwzqdc7j] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-img[b-t7cwzqdc7j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.model-info[b-t7cwzqdc7j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.model-primary-info[b-t7cwzqdc7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-name[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #201F1D;
    margin: 0;
}

.model-location[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #666666;
    margin: 0;
}

.model-experience[b-t7cwzqdc7j] {
    margin-top: 2px;
}

.experience-text[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    margin: 0;
    font-style: italic;
}


.model-status[b-t7cwzqdc7j] {
    flex-shrink: 0;
    text-align: right;
}

.status-text[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

/* Lifecycle states are visually distinct — the old pending/approved pair were BOTH #CEB185,
   so the pill carried no information at all. */
.status-text.status-active[b-t7cwzqdc7j] {
    color: #CEB185;
}

.status-text.status-onhold[b-t7cwzqdc7j] {
    color: #B26A00;
}

.status-text.status-archived[b-t7cwzqdc7j] {
    color: #6B6660;
}

/* Secondary badge: Active but not yet searchable by clients. Deliberately quieter than the
   status pill — it is extra context, not a lifecycle state. */
.status-note[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #6B6660;
    margin: 2px 0 0;
    white-space: nowrap;
}

/* Row actions. Only the reversible action appears here; archive lives on the detail page. */
.model-actions[b-t7cwzqdc7j] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.row-action[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.row-action:hover:not(:disabled)[b-t7cwzqdc7j] {
    border-color: #CEB185;
}

.row-action:disabled[b-t7cwzqdc7j] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-models-container[b-t7cwzqdc7j] {
        max-width: 100%;
    }

    .search-bar-container[b-t7cwzqdc7j] {
        padding: 10px 20px;
        padding-top: 8px;
    }

    .filter-buttons[b-t7cwzqdc7j] {
        padding: 10px 20px; /* Add vertical padding */
        gap: 3px; /* Reduce gap slightly for mobile */
        min-height: 50px; /* Ensure minimum height */
    }

    .model-cards-container[b-t7cwzqdc7j] {
        padding: 20px;
    }

    .model-card[b-t7cwzqdc7j] {
        width: 100%;
        max-width: 350px;
    }

    .loading-container[b-t7cwzqdc7j], .error-container[b-t7cwzqdc7j], .no-models[b-t7cwzqdc7j] {
        padding: 20px 15px;
        min-height: 40vh;
    }
}

@media (max-width: 360px) {
    .search-header[b-t7cwzqdc7j] {
        padding: 0 15px;
    }

    .header-logo[b-t7cwzqdc7j] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-t7cwzqdc7j] {
        right: 15px;
    }

    .search-bar-container[b-t7cwzqdc7j] {
        padding: 10px 15px;
        padding-top: 8px;
    }

    .filter-buttons[b-t7cwzqdc7j] {
        padding: 10px 15px; /* Add vertical padding */
        gap: 2px; /* Even smaller gap for very small screens */
        min-height: 50px; /* Ensure minimum height */
    }

    .filter-btn[b-t7cwzqdc7j] {
        font-size: 14px; /* Slightly smaller font for very small screens */
        padding: 6px 12px; /* Reduce padding */
        min-width: 70px; /* Smaller minimum width */
    }

    .model-cards-container[b-t7cwzqdc7j] {
        padding: 15px;
    }
}

/* Desktop layout (≥ 768px) — admin sidebar provides 240px chrome on the left.
   Cards stretch into a responsive grid; title + toolbar stay left-aligned. */
@media (min-width: 768px) {
    .admin-page-title[b-t7cwzqdc7j] {
        font-size: 24px;
        margin: 24px 32px 8px;
    }

    .search-bar-container[b-t7cwzqdc7j] {
        padding: 8px 32px;
        max-width: 720px;
    }

    .search-input-container[b-t7cwzqdc7j] {
        width: auto;
    }

    .filter-buttons[b-t7cwzqdc7j] {
        padding: 8px 32px 16px;
        max-width: 720px;
    }

    .model-cards-container[b-t7cwzqdc7j] {
        padding: 0 32px 32px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        align-items: start;
        align-content: start;
    }

    .model-card[b-t7cwzqdc7j] {
        max-width: none;
    }
}
/* /Pages/AdminProspectiveClient.razor.rz.scp.css */
/* AdminProspectiveClient Screen Styles (mirrors AdminViewClientProfile) */
.admin-prospective-client-screen[b-zluuuxmdwm] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content Area */
.admin-prospective-client-screen .main-content[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Header Section */
.admin-prospective-client-screen .header-section[b-zluuuxmdwm] {
    background-color: var(--color-white);
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-prospective-client-screen .back-button[b-zluuuxmdwm] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.admin-prospective-client-screen .back-button:hover[b-zluuuxmdwm] {
    opacity: 0.7;
}

.admin-prospective-client-screen .back-button img[b-zluuuxmdwm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-prospective-client-screen .page-title[b-zluuuxmdwm] {
    font-family: var(--font-montserrat-semibold);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    /* Was a hardcoded width: 163px, which "Prospective Client" overflows — it wrapped to a
       second line that spilled out of the fixed 70px header. Size to the content instead and
       keep it on one line; the max-width leaves room for the absolutely-positioned back button
       (21px left + 40px wide) on both sides, so a longer title ellipsizes rather than colliding
       with it. */
    white-space: nowrap;
    max-width: calc(100% - 124px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading Container */
.admin-prospective-client-screen .loading-container[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-prospective-client-screen .loading-spinner[b-zluuuxmdwm] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: prospect-spin-b-zluuuxmdwm 1s linear infinite;
}

@keyframes prospect-spin-b-zluuuxmdwm {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.admin-prospective-client-screen .loading-text[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Error Container */
.admin-prospective-client-screen .error-container[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-prospective-client-screen .error-message[b-zluuuxmdwm] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    max-width: 400px;
    font-family: 'Montserrat', sans-serif;
}

.admin-prospective-client-screen .retry-button[b-zluuuxmdwm] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-prospective-client-screen .retry-button:hover[b-zluuuxmdwm] {
    background-color: #B89A6B;
}

/* Client Profile Content */
.admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 120px;
}

/* Profile Photo Section */
.admin-prospective-client-screen .profile-photo-section[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.admin-prospective-client-screen .photo-container[b-zluuuxmdwm] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.admin-prospective-client-screen .profile-image[b-zluuuxmdwm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Client Details Section */
.admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-prospective-client-screen .detail-group[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 12px 16px;
    background-color: #F8F7F5;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.admin-prospective-client-screen .no-data[b-zluuuxmdwm] {
    color: #999999;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
        padding: 0 20px;
        padding-top: 20px;
        padding-bottom: 100px;
    }

    .admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
        gap: 20px;
    }

    .admin-prospective-client-screen .detail-group[b-zluuuxmdwm] {
        gap: 6px;
    }

    .admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
        font-size: 15px;
    }

    .admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
        font-size: 15px;
        padding: 10px 14px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
        padding: 0 16px;
        padding-top: 16px;
        padding-bottom: 100px;
    }

    .admin-prospective-client-screen .photo-container[b-zluuuxmdwm] {
        width: 100px;
        height: 100px;
    }

    .admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
        gap: 18px;
    }

    .admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
        font-size: 14px;
    }

    .admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
        font-size: 14px;
        padding: 8px 12px;
        min-height: 36px;
    }
}
/* /Pages/AdminUnderReview.razor.rz.scp.css */
/* AdminUnderReview Screen Styles */
.admin-under-review-screen[b-xb0mnnc48k] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content */
.admin-under-review-screen .content-container[b-xb0mnnc48k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
}

.admin-under-review-screen .message-container[b-xb0mnnc48k] {
    text-align: center;
    max-width: 300px;
}

.admin-under-review-screen .review-message[b-xb0mnnc48k] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Close Button Section */
.admin-under-review-screen .close-section[b-xb0mnnc48k] {
    padding: 24px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    flex-shrink: 0;
}

.admin-under-review-screen .close-button[b-xb0mnnc48k] {
    width: 100%;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-under-review-screen .close-button:hover[b-xb0mnnc48k] {
    background-color: #B89A6B;
}

.admin-under-review-screen .close-button:active[b-xb0mnnc48k] {
    transform: translateY(1px);
}

.admin-under-review-screen .button-text[b-xb0mnnc48k] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .admin-under-review-screen .content-container[b-xb0mnnc48k] {
        padding: 30px 20px;
    }

    .admin-under-review-screen .review-message[b-xb0mnnc48k] {
        font-size: 16px;
    }

    .admin-under-review-screen .close-section[b-xb0mnnc48k] {
        padding: 20px;
    }
}
/* /Pages/AdminViewClientProfile.razor.rz.scp.css */
/* AdminViewClientProfile Screen Styles */
.admin-view-client-profile-screen[b-wmp4jrdc1x] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content Area */
.admin-view-client-profile-screen .main-content[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Header Section */
.admin-view-client-profile-screen .header-section[b-wmp4jrdc1x] {
    background-color: var(--color-white);
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-view-client-profile-screen .back-button[b-wmp4jrdc1x] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.admin-view-client-profile-screen .back-button:hover[b-wmp4jrdc1x] {
    opacity: 0.7;
}

.admin-view-client-profile-screen .back-button img[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-view-client-profile-screen .page-title[b-wmp4jrdc1x] {
    font-family: var(--font-montserrat-semibold);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    /* Same hardening as AdminProspectiveClient: the hardcoded 163px is narrower than
       "Client Profile" renders at 22px SemiBold, and a wrapped second line escapes the fixed
       70px header. Sizing to content with nowrap cannot regress a title that already fitted. */
    white-space: nowrap;
    max-width: calc(100% - 124px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading Container */
.admin-view-client-profile-screen .loading-container[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-view-client-profile-screen .loading-spinner[b-wmp4jrdc1x] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-wmp4jrdc1x 1s linear infinite;
}

@keyframes spin-b-wmp4jrdc1x {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.admin-view-client-profile-screen .loading-text[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Error Container */
.admin-view-client-profile-screen .error-container[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-view-client-profile-screen .error-message[b-wmp4jrdc1x] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    max-width: 400px;
    font-family: 'Montserrat', sans-serif;
}

.admin-view-client-profile-screen .retry-button[b-wmp4jrdc1x] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-view-client-profile-screen .retry-button:hover[b-wmp4jrdc1x] {
    background-color: #B89A6B;
}

/* Client Profile Content */
.admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 30px;
}

/* Profile Photo Section */
.admin-view-client-profile-screen .profile-photo-section[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.admin-view-client-profile-screen .photo-container[b-wmp4jrdc1x] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.admin-view-client-profile-screen .profile-image[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.admin-view-client-profile-screen .photo-background[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-view-client-profile-screen .person-icon[b-wmp4jrdc1x] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Client Details Section */
.admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-view-client-profile-screen .detail-group[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 12px 16px;
    background-color: #F8F7F5;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.admin-view-client-profile-screen .no-data[b-wmp4jrdc1x] {
    color: #999999;
    font-style: italic;
}

.admin-view-client-profile-screen .website-link[b-wmp4jrdc1x] {
    color: #CEB185;
    text-decoration: underline;
    word-break: break-all;
}

.admin-view-client-profile-screen .website-link:hover[b-wmp4jrdc1x] {
    color: #B89A6B;
    text-decoration: none;
}

/* Approve Button Container */
.admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
    position: fixed;
    bottom: 80px; /* Position above the bottom navigation bar (80px height) */
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 26px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    z-index: 999; /* Below navigation bar but above content */
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.1);
}

/* Approve Button */
.admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.admin-view-client-profile-screen .approve-button:hover:not(:disabled)[b-wmp4jrdc1x] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.admin-view-client-profile-screen .approve-button:active:not(:disabled)[b-wmp4jrdc1x] {
    transform: translateY(0);
}

.admin-view-client-profile-screen .approve-button:disabled[b-wmp4jrdc1x] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
        padding: 0 20px;
        padding-top: 20px;
        padding-bottom: 120px;
    }

    .admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
        gap: 20px;
    }

    .admin-view-client-profile-screen .detail-group[b-wmp4jrdc1x] {
        gap: 6px;
    }

    .admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
        font-size: 15px;
    }

    .admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
        font-size: 15px;
        padding: 10px 14px;
        min-height: 40px;
    }

    .admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
        padding: 16px 20px;
        bottom: 80px; /* Maintain position above navigation bar */
    }

    .admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
        font-size: 15px;
        height: 42px;
    }

}

@media (max-width: 480px) {
    .admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
        padding: 0 16px;
        padding-top: 16px;
        padding-bottom: 140px;
    }

    .admin-view-client-profile-screen .photo-container[b-wmp4jrdc1x] {
        width: 100px;
        height: 100px;
    }

    .admin-view-client-profile-screen .person-icon[b-wmp4jrdc1x] {
        width: 35px;
        height: 35px;
    }

    .admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
        gap: 18px;
    }

    .admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
        font-size: 14px;
    }

    .admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
        font-size: 14px;
        padding: 8px 12px;
        min-height: 36px;
    }

    .admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
        padding: 14px 16px;
        bottom: 80px; /* Maintain position above navigation bar */
    }

    .admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
        font-size: 14px;
        height: 40px;
    }

}

/* ---- Account status panel -------------------------------------------------------------
   Replaces the old single Approve button. .approve-button is reused for the positive action
   (lift / restore); .hold-button is the quieter outline treatment for hold and archive, which
   should not read as the primary thing to do on the page. */

.admin-view-client-profile-screen .account-status-panel[b-wmp4jrdc1x] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 20px 24px;
    font-family: 'Montserrat', sans-serif;
}

.admin-view-client-profile-screen .account-status-title[b-wmp4jrdc1x] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 12px;
}

.admin-view-client-profile-screen .status-line[b-wmp4jrdc1x] {
    margin: 0 0 10px;
}

.admin-view-client-profile-screen .status-chip[b-wmp4jrdc1x] {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    background: #F5F0E8;
    color: #6B5A3C;
}

.admin-view-client-profile-screen .status-chip.status-onhold[b-wmp4jrdc1x] {
    background: #FBEEDC;
    color: #8A4B00;
}

.admin-view-client-profile-screen .status-chip.status-archived[b-wmp4jrdc1x] {
    background: #EFEAE0;
    color: #55504A;
}

.admin-view-client-profile-screen .account-status-note[b-wmp4jrdc1x] {
    font-size: 13px;
    color: #6B6660;
    margin: 0 0 8px;
}

.admin-view-client-profile-screen .account-status-actions[b-wmp4jrdc1x] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.admin-view-client-profile-screen .hold-button[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 10px 18px;
    min-height: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-view-client-profile-screen .hold-button:hover:not(:disabled)[b-wmp4jrdc1x] {
    border-color: #CEB185;
}

.admin-view-client-profile-screen .hold-button:disabled[b-wmp4jrdc1x] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Inline text action inside a status line — deliberately quiet, it is a correction for an
   uncommon state (legacy or just-restored records), not a primary page action. */
.admin-view-client-profile-screen .link-button[b-wmp4jrdc1x] {
    background: none;
    border: none;
    padding: 0 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #9E815C;
    text-decoration: underline;
    cursor: pointer;
}

.admin-view-client-profile-screen .link-button:disabled[b-wmp4jrdc1x] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/Availability.razor.rz.scp.css */
/* Availability Container */
.availability-container[b-yiscfrivby] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .availability-container[b-yiscfrivby] {
        max-width: 100%;
    }
}

/* Header - Now using shared StaffTopHeader component */

/* Sticky Year Display */
.sticky-year[b-yiscfrivby] {
    position: sticky;
    top: calc(60px + env(safe-area-inset-top, 0));
    left: 25px;
    z-index: 5;
    pointer-events: none;
    background-color: #FFFFFF;
    padding: 19px 0;
    height: auto;
    width: fit-content;
}

/* On desktop, position sticky year relative to centered 402px container */
@media (min-width: 402px) {
    .sticky-year[b-yiscfrivby] {
        left: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.sticky-year h1[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    pointer-events: auto;
}

/* Calendar Content */
.calendar-content[b-yiscfrivby] {
    flex: 1;
    overflow-y: auto;
    padding: calc(60px + env(safe-area-inset-top, 0) + 40px) 15px 100px 15px; /* Top padding for fixed header + spacing */
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* Global Day Headers */
.global-day-headers[b-yiscfrivby] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 0 0 20px 0;
    padding: 8px 0;
}

.day-header[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Month Section */
.month-section[b-yiscfrivby] {
    position: relative;
    margin-bottom: 40px;
}

/* Month Names */
.month-name[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 5;
    padding: 5px 0 8px 0;
    display: inline-block;
}

.month-name.month-left[b-yiscfrivby] {
    text-align: left;
}

.month-name.month-right[b-yiscfrivby] {
    text-align: right;
}

.month-name[b-yiscfrivby]::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #CEB185;
    margin-top: 5px;
    width: 100%;
}

/* Calendar Grid */
.calendar-grid[b-yiscfrivby] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
}

.calendar-day[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 8px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.calendar-day:hover[b-yiscfrivby] {
    background-color: rgba(206, 177, 133, 0.1);
}

.calendar-day.empty[b-yiscfrivby] {
    cursor: default;
}

.calendar-day.empty:hover[b-yiscfrivby] {
    background-color: transparent;
}

/* Selected day styling */
.calendar-day.selected[b-yiscfrivby] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day.selected:hover[b-yiscfrivby] {
    background-color: #B8A073;
}

/* Booking underline indicator */
.calendar-day.booking-indicator[b-yiscfrivby]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 2px;
    background-color: #E8E5E0;
    border-radius: 23px;
    z-index: 1;
}



/* Edit Button */
.edit-button[b-yiscfrivby] {
    position: fixed;
    right: 25px;
    top: calc(121px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding-top: 40px;
}

/* On desktop, position edit button relative to centered 402px container */
@media (min-width: 402px) {
    .edit-button[b-yiscfrivby] {
        right: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.edit-button img[b-yiscfrivby] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Tooltip */
.tooltip[b-yiscfrivby] {
    position: absolute;
    left: -280px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
    pointer-events: none;
}

/* On desktop, adjust tooltip positioning to stay within 402px container */
@media (min-width: 402px) {
    .tooltip[b-yiscfrivby] {
        left: auto;
        right: 50px; /* Position to the left of edit button, within container */
        transform: translateY(-50%);
    }
}

.tooltip-visible[b-yiscfrivby] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tooltip-content[b-yiscfrivby] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 260px;
    min-width: 200px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 50px;
}

.tooltip-content span[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    display: block;
    flex: 1;
}

.tooltip-close[b-yiscfrivby] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.tooltip-close:hover[b-yiscfrivby] {
    opacity: 0.7;
}

.tooltip-close img[b-yiscfrivby] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Tooltip arrow pointing to the edit button */
.tooltip-content[b-yiscfrivby]::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #FFFFFF;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.tooltip-content[b-yiscfrivby]::before {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid #E8E5E0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

/* On desktop, tooltip arrow should point right (towards edit button) */
@media (min-width: 402px) {
    .tooltip-content[b-yiscfrivby]::after {
        right: auto;
        left: -8px;
        border-left: none;
        border-right: 8px solid #FFFFFF;
    }

    .tooltip-content[b-yiscfrivby]::before {
        right: auto;
        left: -9px;
        border-left: none;
        border-right: 9px solid #E8E5E0;
    }
}

/* Close Button */
.close-button[b-yiscfrivby] {
    position: fixed;
    right: 25px;
    top: calc(121px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    z-index: 10;
}

/* On desktop, position close button relative to centered 402px container */
@media (min-width: 402px) {
    .close-button[b-yiscfrivby] {
        right: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.close-icon[b-yiscfrivby] {
    font-size: 40px;
    color: #201F1D;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Save Button */
.save-button-container[b-yiscfrivby] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    box-shadow: none;
}

.save-button[b-yiscfrivby] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    min-width: 290px;
    transition: background-color 0.2s ease;
}

.save-button:hover[b-yiscfrivby] {
    background-color: #3A3936;
}

.save-button:active[b-yiscfrivby] {
    background-color: #1A1917;
}

/* Responsive Design */
@media (max-width: 480px) {

    .calendar-content[b-yiscfrivby] {
        padding: calc(100px + env(safe-area-inset-top, 0px)) 15px 100px 15px;
    }

    .sticky-year[b-yiscfrivby] {
        left: 15px;
    }

    .edit-button[b-yiscfrivby] {
        right: 15px;
        padding-top: 15px;
    }

    .tooltip[b-yiscfrivby] {
        left: -250px;
        max-width: 220px;
        min-width: 180px;
    }

    .tooltip-content[b-yiscfrivby] {
        padding: 10px 14px;
        max-width: 220px;
        min-width: 180px;
        margin-top: 30px;
    }

    .tooltip-content span[b-yiscfrivby] {
        font-size: 14px;
    }

    .tooltip-close[b-yiscfrivby] {
        width: 18px;
        height: 18px;
    }

    .tooltip-close img[b-yiscfrivby] {
        width: 14px;
        height: 14px;
    }

    .close-button[b-yiscfrivby] {
        right: 15px;
    }

    .save-button[b-yiscfrivby] {
        min-width: 250px;
    }

    .calendar-day[b-yiscfrivby] {
        font-size: 20px;
        padding: 8px 0;
        min-height: 36px;
    }

    .day-header[b-yiscfrivby] {
        font-size: 16px;
    }

    .month-name[b-yiscfrivby] {
        font-size: 20px;
    }

    .sticky-year h1[b-yiscfrivby] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {

    .calendar-content[b-yiscfrivby] {
        padding: calc(100px + env(safe-area-inset-top, 0px)) 10px 100px 10px;
    }

    .sticky-year[b-yiscfrivby] {
        left: 10px;
    }

    .edit-button[b-yiscfrivby] {
        right: 10px;
        padding-top: 15px;
    }

    .tooltip[b-yiscfrivby] {
        left: -200px;
        max-width: 180px;
        min-width: 160px;
    }

    .tooltip-content[b-yiscfrivby] {
        padding: 8px 12px;
        max-width: 180px;
        min-width: 160px;
    }

    .tooltip-content span[b-yiscfrivby] {
        font-size: 13px;
    }

    .tooltip-close[b-yiscfrivby] {
        width: 16px;
        height: 16px;
    }

    .tooltip-close img[b-yiscfrivby] {
        width: 12px;
        height: 12px;
    }

    .close-button[b-yiscfrivby] {
        right: 10px;
    }

    .save-button[b-yiscfrivby] {
        min-width: 200px;
    }

    .calendar-day[b-yiscfrivby] {
        font-size: 18px;
        padding: 6px 0;
        min-height: 32px;
    }

    .day-header[b-yiscfrivby] {
        font-size: 14px;
    }

    .month-name[b-yiscfrivby] {
        font-size: 18px;
    }

    .sticky-year h1[b-yiscfrivby] {
        font-size: 18px;
    }
}


/* Loading Overlay */
.loading-overlay[b-yiscfrivby] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-yiscfrivby] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-yiscfrivby] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-yiscfrivby] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-yiscfrivby] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-yiscfrivby] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-yiscfrivby] {
    background-color: rgba(211, 47, 47, 0.1);
}

/* Disabled Save Button */
.save-button:disabled[b-yiscfrivby] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
}

.save-button:disabled:hover[b-yiscfrivby] {
    background-color: #ccc;
    transform: none;
}
/* /Pages/AvailabilityDayView.razor.rz.scp.css */
/* Availability Day View Container */
.availability-day-container[b-p5396pmaa8] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.availability-header[b-p5396pmaa8] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-p5396pmaa8] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-p5396pmaa8] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-p5396pmaa8] {
    width: 100%;
    height: 100%;
}

.availability-title[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Page Title */
.page-title[b-p5396pmaa8] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E8E5E0;
}

.page-title h1[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.page-title p[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* Scheduler Container */
.availability-day-container .rz-scheduler[b-p5396pmaa8] {
    flex: 1;
    margin: 0 25px 100px 25px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    overflow: hidden;
}

/* Custom Scheduler Styling */
.availability-day-container .rz-scheduler .rz-scheduler-header[b-p5396pmaa8] {
    background-color: #F8F7F5;
    border-bottom: 1px solid #E8E5E0;
}

.availability-day-container .rz-scheduler .rz-scheduler-header .rz-scheduler-header-cell[b-p5396pmaa8] {
    background-color: #F8F7F5;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border-right: 1px solid #E8E5E0;
}

.availability-day-container .rz-scheduler .rz-scheduler-time-slots[b-p5396pmaa8] {
    background-color: #FFFFFF;
}

.availability-day-container .rz-scheduler .rz-scheduler-time-slot[b-p5396pmaa8] {
    border-right: 1px solid #E8E5E0;
    border-bottom: 1px solid #E8E5E0;
    color: #666666;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.availability-day-container .rz-scheduler .rz-scheduler-appointment[b-p5396pmaa8] {
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Working Hours Highlight */
.availability-day-container .rz-scheduler .rz-scheduler-time-slot.working-hours[b-p5396pmaa8] {
    background-color: rgba(206, 177, 133, 0.1);
}

/* Appointment Colors */
.availability-day-container .rz-scheduler .rz-scheduler-appointment.available[b-p5396pmaa8] {
    background-color: #4CAF50;
    color: white;
}

.availability-day-container .rz-scheduler .rz-scheduler-appointment.booking[b-p5396pmaa8] {
    background-color: #FF9800;
    color: white;
}

/* Switch Styling */
.availability-day-container .rz-switch[b-p5396pmaa8] {
    margin-left: 8px;
}

.availability-day-container .rz-switch .rz-switch-slider[b-p5396pmaa8] {
    background-color: #E8E5E0;
}

.availability-day-container .rz-switch.rz-switch-checked .rz-switch-slider[b-p5396pmaa8] {
    background-color: #CEB185;
}

/* Loading Overlay */
.loading-overlay[b-p5396pmaa8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-p5396pmaa8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-p5396pmaa8] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-p5396pmaa8] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-p5396pmaa8] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-p5396pmaa8] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-p5396pmaa8] {
    background-color: rgba(211, 47, 47, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .availability-header[b-p5396pmaa8] {
        padding: 0 15px;
    }

    .header-logo[b-p5396pmaa8] {
        left: 15px;
        width: 150px;
    }

    .header-actions[b-p5396pmaa8] {
        right: 50px;
    }

    .page-title[b-p5396pmaa8] {
        padding: 15px;
    }

    .page-title h1[b-p5396pmaa8] {
        font-size: 20px;
    }

    .page-title p[b-p5396pmaa8] {
        font-size: 14px;
    }

    .availability-day-container .rz-scheduler[b-p5396pmaa8] {
        margin: 0 15px 100px 15px;
    }
}

@media (max-width: 480px) {
    .availability-header[b-p5396pmaa8] {
        padding: 0 10px;
    }

    .header-logo[b-p5396pmaa8] {
        left: 10px;
        width: 130px;
    }

    .header-actions[b-p5396pmaa8] {
        right: 50px;
    }

    .page-title[b-p5396pmaa8] {
        padding: 10px;
    }

    .page-title h1[b-p5396pmaa8] {
        font-size: 18px;
    }

    .page-title p[b-p5396pmaa8] {
        font-size: 12px;
    }

    .availability-day-container .rz-scheduler[b-p5396pmaa8] {
        margin: 0 10px 100px 10px;
    }
}

/* /Pages/AvailabilityOverview.razor.rz.scp.css */
/* Availability Overview Container */
.availability-overview-container[b-2rtjleh16t] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
}

/* Header */
.availability-header[b-2rtjleh16t] {
    position: absolute;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    top: 0;
    left: 0;
}

.header-logo[b-2rtjleh16t] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-2rtjleh16t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-2rtjleh16t] {
    position: absolute;
    right: 50px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    display: flex;
    gap: 5px;
}

.header-notifications[b-2rtjleh16t],
.header-settings[b-2rtjleh16t] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications img[b-2rtjleh16t],
.header-settings img[b-2rtjleh16t] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Year Display */
.year-display[b-2rtjleh16t] {
    position: absolute;
    left: 25px;
    top: calc(125px + env(safe-area-inset-top, 0px));
    z-index: 5;
}

.year-navigation[b-2rtjleh16t] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.year-display h1[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    min-width: 80px;
    text-align: center;
}

.chevron-left[b-2rtjleh16t],
.chevron-right[b-2rtjleh16t] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #CEB185;
    background-color: transparent;
    border: 2px solid transparent;
}

.chevron-left:hover[b-2rtjleh16t],
.chevron-right:hover[b-2rtjleh16t] {
    background-color: rgba(206, 177, 133, 0.1);
    border-color: rgba(206, 177, 133, 0.3);
    transform: scale(1.1);
}

.chevron-left:active[b-2rtjleh16t],
.chevron-right:active[b-2rtjleh16t] {
    transform: scale(0.95);
    background-color: rgba(206, 177, 133, 0.2);
}

.chevron-left svg[b-2rtjleh16t],
.chevron-right svg[b-2rtjleh16t] {
    width: 20px;
    height: 20px;
}

/* Calendar Overview Content */
.calendar-overview-content[b-2rtjleh16t] {
    position: absolute;
    top: calc(173px + env(safe-area-inset-top, 0px));
    left: 25px;
    right: 25px;
    bottom: 120px; /* Increased from 100px to account for bottom nav */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
    align-content: start;
    padding-bottom: 40px; /* Add padding to ensure content is fully accessible */
}

.calendar-overview-content[b-2rtjleh16t]::-webkit-scrollbar {
    display: none;
}

/* Month Overview Section */
.month-overview-section[b-2rtjleh16t] {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.month-overview-section:hover[b-2rtjleh16t] {
    background-color: rgba(206, 177, 133, 0.05);
    border-color: rgba(206, 177, 133, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.1);
}

.month-overview-section:active[b-2rtjleh16t] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.1);
}

.month-overview-header[b-2rtjleh16t] {
    margin-bottom: 8px;
}

.month-overview-header h2[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    margin: 0;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.month-overview-section:hover .month-overview-header h2[b-2rtjleh16t] {
    color: #CEB185;
}

/* Calendar Overview Grid */
.calendar-overview-grid[b-2rtjleh16t] {
    width: 100%;
}

/* Calendar Overview Days */
.calendar-overview-days[b-2rtjleh16t] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    width: 100%;
}

.calendar-overview-day[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 1px 0;
    min-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar-overview-day:empty[b-2rtjleh16t] {
    background-color: transparent;
}

/* Available day styling - gold circles */
.calendar-overview-day.available[b-2rtjleh16t] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 8px;
    line-height: 1;
}

/* Booking underline indicator */
.calendar-overview-day.booking-indicator[b-2rtjleh16t]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background-color: #E8E5E0;
    border-radius: 10px;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 480px) {
    .availability-header[b-2rtjleh16t] {
        padding: 0 15px;
    }

    .header-logo[b-2rtjleh16t] {
        left: 15px;
        width: 150px;
    }

    .header-actions[b-2rtjleh16t] {
        right: 50px;
    }

    .calendar-overview-content[b-2rtjleh16t] {
        left: 15px;
        right: 15px;
        gap: 15px 20px;
        bottom: 110px; /* Adjusted for mobile */
        padding-bottom: 50px; /* Extra padding for mobile */
    }

    .year-display[b-2rtjleh16t] {
        left: 15px;
    }

    .month-overview-header h2[b-2rtjleh16t] {
        font-size: 20px;
    }

    .year-display h1[b-2rtjleh16t] {
        font-size: 20px;
    }

    .chevron-left[b-2rtjleh16t],
    .chevron-right[b-2rtjleh16t] {
        width: 28px;
        height: 28px;
    }

    .chevron-left svg[b-2rtjleh16t],
    .chevron-right svg[b-2rtjleh16t] {
        width: 18px;
        height: 18px;
    }

    .calendar-overview-day[b-2rtjleh16t] {
        font-size: 8px;
    }
}

@media (max-width: 360px) {
    .availability-header[b-2rtjleh16t] {
        padding: 0 10px;
    }

    .header-logo[b-2rtjleh16t] {
        left: 10px;
        width: 130px;
    }

    .header-actions[b-2rtjleh16t] {
        right: 50px;
    }

    .calendar-overview-content[b-2rtjleh16t] {
        left: 10px;
        right: 10px;
        gap: 10px 15px;
        bottom: 100px; /* Adjusted for smaller screens */
        padding-bottom: 60px; /* Extra padding for smaller screens */
    }

    .year-display[b-2rtjleh16t] {
        left: 10px;
    }

    .month-overview-header h2[b-2rtjleh16t] {
        font-size: 18px;
    }

    .year-display h1[b-2rtjleh16t] {
        font-size: 18px;
    }

    .chevron-left[b-2rtjleh16t],
    .chevron-right[b-2rtjleh16t] {
        width: 24px;
        height: 24px;
    }

    .chevron-left svg[b-2rtjleh16t],
    .chevron-right svg[b-2rtjleh16t] {
        width: 16px;
        height: 16px;
    }

    .calendar-overview-day[b-2rtjleh16t] {
        font-size: 7px;
    }
}

/* Touch and swipe optimizations */
.availability-overview-container[b-2rtjleh16t] {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.calendar-overview-content[b-2rtjleh16t] {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Smooth transitions for year changes */
.year-display h1[b-2rtjleh16t] {
    transition: color 0.3s ease;
}

.month-overview-section[b-2rtjleh16t] {
    transition: opacity 0.3s ease;
}

/* Enhanced touch responsiveness */
.availability-overview-container[b-2rtjleh16t] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
}

.calendar-overview-content[b-2rtjleh16t] {
    overscroll-behavior: auto;
    scroll-behavior: smooth;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent default touch behaviors that might interfere with swipes */
.availability-overview-container *[b-2rtjleh16t] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Mobile browser specific fixes */
@media screen and (max-width: 768px) {
    .calendar-overview-content[b-2rtjleh16t] {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        position: absolute !important;
        top: 273px !important;
        left: 25px !important;
        right: 25px !important;
        bottom: 120px !important;
        height: auto !important;
        max-height: calc(100vh - 293px) !important;
    }
}

/* Loading Overlay */
.loading-overlay[b-2rtjleh16t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-2rtjleh16t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-2rtjleh16t] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-2rtjleh16t] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-2rtjleh16t] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-2rtjleh16t] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-2rtjleh16t] {
    background-color: rgba(211, 47, 47, 0.1);
}
/* /Pages/BookingsClientView.razor.rz.scp.css */
/* BookingsClientView.razor.css */

.bookings-client-container[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.search-header[b-z3xo8dtxr9] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-z3xo8dtxr9] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-z3xo8dtxr9] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-z3xo8dtxr9] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-z3xo8dtxr9] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-z3xo8dtxr9] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-z3xo8dtxr9] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-z3xo8dtxr9] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-z3xo8dtxr9]::placeholder {
    color: #E8E5E0;
}


/* Filter Buttons */
.filter-buttons[b-z3xo8dtxr9] {
    display: flex;
    gap: 5px;
    padding: 0 25px;
    margin-top: 0;
    justify-content: flex-start;
}

.filter-btn[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn.active[b-z3xo8dtxr9] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(2)[b-z3xo8dtxr9] {
    width: 150px;
}

.filter-btn:nth-child(3)[b-z3xo8dtxr9] {
    width: 96px;
}

/* Loading and Error States */
.loading-container[b-z3xo8dtxr9], .error-container[b-z3xo8dtxr9], .no-bookings[b-z3xo8dtxr9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
}

.loading-container p[b-z3xo8dtxr9], .error-container p[b-z3xo8dtxr9], .no-bookings p[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-z3xo8dtxr9] {
    color: #d32f2f;
}

/* Booking Cards */
.booking-cards-container[b-z3xo8dtxr9] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.booking-card[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 56px;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-card:hover[b-z3xo8dtxr9] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.booking-info[b-z3xo8dtxr9] {
    flex: 1;
}

.talent-name[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.event-name[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    margin-top: 2px;
}

.booking-status[b-z3xo8dtxr9] {
    flex: 1;
    text-align: right;
}

.status-text[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.status-text.pending[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.upcoming[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.complete[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.cancelled[b-z3xo8dtxr9] {
    color: #CEB185;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bookings-client-container[b-z3xo8dtxr9] {
        max-width: 100%;
    }

    .search-bar-container[b-z3xo8dtxr9] {
        padding: 10px 20px;
    }

    .filter-buttons[b-z3xo8dtxr9] {
        flex-wrap: wrap;
    }

    .booking-cards-container[b-z3xo8dtxr9] {
        padding: 20px;
    }

    .booking-card[b-z3xo8dtxr9] {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 360px) {
    .search-header[b-z3xo8dtxr9] {
        padding: 0 15px;
    }

    .header-logo[b-z3xo8dtxr9] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-z3xo8dtxr9] {
        right: 15px;
    }

    .search-bar-container[b-z3xo8dtxr9] {
        padding: 10px 15px;
    }

    .booking-cards-container[b-z3xo8dtxr9] {
        padding: 15px;
    }
}

/* /Pages/ClientBookingForm.razor.rz.scp.css */
/* ClientBookingForm.razor.css */

.client-booking-form-container[b-34dnqhaueb] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-booking-form-container[b-34dnqhaueb]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.booking-form-header[b-34dnqhaueb] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-34dnqhaueb] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-34dnqhaueb] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.booking-form-content[b-34dnqhaueb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding: 126px 26px 20px 26px;
    gap: 32px;
}

/* Form Field Styles */
.form-field[b-34dnqhaueb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-label[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.required-asterisk[b-34dnqhaueb] {
    color: #CEB185;
}

/* Dropdown Styles */
.dropdown-container[b-34dnqhaueb] {
    position: relative;
}

.dropdown-field[b-34dnqhaueb] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    position: relative;
}

.dropdown-placeholder[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
}

.dropdown-arrow[b-34dnqhaueb] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated[b-34dnqhaueb] {
    transform: translateY(-50%) rotate(180deg);
}

.dropdown-text[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    flex: 1;
}

.dropdown-options[b-34dnqhaueb] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-option[b-34dnqhaueb] {
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease;
}

.dropdown-option:last-child[b-34dnqhaueb] {
    border-bottom: none;
}

.dropdown-option:hover[b-34dnqhaueb] {
    background-color: #F8F8F8;
}

.dropdown-option.selected[b-34dnqhaueb] {
    background-color: #E8F4FD;
    color: #1976D2;
    font-weight: 500;
}

/* Submit Button */
.submit-button-container[b-34dnqhaueb] {
    position: absolute;
    bottom: 100px; /* Above navigation bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 25px; /* Add horizontal padding to match content */
}

.submit-button[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.submit-button:hover[b-34dnqhaueb] {
    background-color: #3a3835;
}

.submit-button:active[b-34dnqhaueb] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-booking-form-container[b-34dnqhaueb] {
        max-width: 100%;
    }

    .header-back-button[b-34dnqhaueb] {
        left: 15px;
    }

    .booking-form-content[b-34dnqhaueb] {
        padding: calc(106px + env(safe-area-inset-top, 0px)) 20px 20px 20px;
    }

    .submit-button-container[b-34dnqhaueb] {
        padding: 0 20px; /* Match mobile content padding */
    }
}

@media (max-width: 360px) {
    .header-back-button[b-34dnqhaueb] {
        left: 12px;
    }

    .booking-form-content[b-34dnqhaueb] {
        padding: calc(106px + env(safe-area-inset-top, 0px)) 15px 20px 15px;
    }

    .submit-button-container[b-34dnqhaueb] {
        padding: 0 15px;
    }
}

/* /Pages/ClientBookingView.razor.rz.scp.css */
/* ClientBookingView.razor.css */

.client-booking-container[b-limnuv1hib] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-booking-container[b-limnuv1hib]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.booking-header[b-limnuv1hib] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-limnuv1hib] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-limnuv1hib] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Loading and Error States */
.loading-container[b-limnuv1hib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-limnuv1hib] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-limnuv1hib 1s linear infinite;
}

@keyframes spin-b-limnuv1hib {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-limnuv1hib] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-limnuv1hib] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-limnuv1hib] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-limnuv1hib] {
    background-color: #2980b9;
}

.retry-button:active[b-limnuv1hib] {
    transform: translateY(1px);
}

/* Booking Content */
.booking-content[b-limnuv1hib] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Model Image Container */
.model-image-container[b-limnuv1hib] {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}

.model-image[b-limnuv1hib] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.image-overlay[b-limnuv1hib] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 31, 29, 0.6);
}

.approval-overlay[b-limnuv1hib] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.approval-text[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    width: 261px;
}

/* Model Info */
.model-info[b-limnuv1hib] {
    padding: 20px 25px 0 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-name-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.model-name[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.model-role-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}

.model-role[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Action Links */
.view-profile-link[b-limnuv1hib], .view-event-link[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}

.event-status[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: none;
}

/* Event Details */
.event-details[b-limnuv1hib] {
    padding: 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-label-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-label[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.event-name[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    text-decoration: none;
}

.event-name:hover[b-limnuv1hib] {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Booked By Section */
.booked-by-section[b-limnuv1hib] {
    padding: 0 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.booked-by-label[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    margin: 0;
    width: 158px;
    padding-top: 20px;
}

.booked-by-value[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    margin-top: 4px;
    text-align: right;
    padding-top: 15px;
}

/* Action Buttons */
.action-buttons[b-limnuv1hib] {
    padding: 0 25px;
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.approve-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reject-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    background-color: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Request More Info Section */
.request-info-section[b-limnuv1hib] {
    padding: 0 25px;
    text-align: center;
    margin-bottom: 20px;
}

.request-info-link[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    width: 291px;
    margin: 0 auto;
    display: block;
}

/* Cancel Booking Section */
.cancel-booking-section[b-limnuv1hib] {
    padding: 0 25px;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.cancel-booking-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-limnuv1hib] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-limnuv1hib] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-limnuv1hib] {
        font-size: 14px;
    }

    .error-container[b-limnuv1hib] {
        min-height: 40vh;
        padding: 1rem;
    }

    .error-message[b-limnuv1hib] {
        font-size: 16px;
    }

    .retry-button[b-limnuv1hib] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 402px) {
    .client-booking-container[b-limnuv1hib] {
        max-width: 100%;
    }

    .header-back-button[b-limnuv1hib] {
        left: 15px;
    }

    .model-info[b-limnuv1hib] {
        padding: 20px 20px 0 20px;
    }

    .event-details[b-limnuv1hib] {
        padding: 0 20px;
    }

    .booked-by-section[b-limnuv1hib] {
        padding: 0 20px;
    }

    .action-buttons[b-limnuv1hib] {
        padding: 0 20px;
    }

    .request-info-section[b-limnuv1hib] {
        padding: 0 20px;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-limnuv1hib] {
        left: 12px;
    }

    .model-info[b-limnuv1hib] {
        padding: 20px 15px 0 15px;
    }

    .event-details[b-limnuv1hib] {
        padding: 0 15px;
    }

    .booked-by-section[b-limnuv1hib] {
        padding: 0 15px;
    }

    .action-buttons[b-limnuv1hib] {
        padding: 0 15px;
    }

    .request-info-section[b-limnuv1hib] {
        padding: 0 15px;
    }
}

/* Modal Styles - Consistent with app design system */
.modal-overlay[b-limnuv1hib] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-content[b-limnuv1hib] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-limnuv1hib 0.3s ease-out;
}

@keyframes modalSlideIn-b-limnuv1hib {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-limnuv1hib] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-limnuv1hib] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-close-button[b-limnuv1hib] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    width: 32px;
    height: 32px;
}

.modal-close-button:hover[b-limnuv1hib] {
    background-color: #F5F5F5;
}

.modal-close-button img[b-limnuv1hib] {
    width: 16px;
    height: 16px;
}

.modal-body[b-limnuv1hib] {
    padding: 24px;
}

.modal-message[b-limnuv1hib] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-limnuv1hib] {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: center;
}

.modal-ok-button[b-limnuv1hib] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    background: #201F1D;
    color: #FFFFFF;
}

.modal-ok-button:hover[b-limnuv1hib] {
    background: #3a3835;
    transform: translateY(-1px);
}

.modal-ok-button:active[b-limnuv1hib] {
    transform: translateY(0);
}
/* /Pages/ClientCancelBookingConfirmation.razor.rz.scp.css */
/* ClientCancelBookingConfirmation.razor.css */

.cancel-booking-container[b-jvwtuxmvkv] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.cancel-booking-header[b-jvwtuxmvkv] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-back-button[b-jvwtuxmvkv] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-back-button img[b-jvwtuxmvkv] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-jvwtuxmvkv] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    position: absolute;
    left: 50%;
    top: calc(57px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.cancel-booking-content[b-jvwtuxmvkv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
}

.confirmation-message[b-jvwtuxmvkv] {
    text-align: center;
    max-width: 272px;
}

.confirmation-message p[b-jvwtuxmvkv] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Cancel Button */
.cancel-button-container[b-jvwtuxmvkv] {
    padding: 0 56px 20px 56px;
    display: flex;
    justify-content: center;
}

.cancel-button[b-jvwtuxmvkv] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-button:hover[b-jvwtuxmvkv] {
    background-color: #3A3937;
}

.cancel-button:active[b-jvwtuxmvkv] {
    background-color: #1A1917;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .cancel-booking-container[b-jvwtuxmvkv] {
        max-width: 100%;
    }

    .cancel-booking-content[b-jvwtuxmvkv] {
        padding: 30px 20px;
    }

    .cancel-button-container[b-jvwtuxmvkv] {
        padding: 0 20px 20px 20px;
    }

    .cancel-button[b-jvwtuxmvkv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .cancel-booking-header[b-jvwtuxmvkv] {
        padding: 0 15px;
    }

    .header-back-button[b-jvwtuxmvkv] {
        left: 15px;
    }

    .header-title[b-jvwtuxmvkv] {
        font-size: 20px;
        width: 200px;
    }

    .cancel-booking-content[b-jvwtuxmvkv] {
        padding: 20px 15px;
    }

    .confirmation-message p[b-jvwtuxmvkv] {
        font-size: 16px;
    }

    .cancel-button-container[b-jvwtuxmvkv] {
        padding: 0 15px 20px 15px;
    }
}

/* /Pages/ClientEventDetails.razor.rz.scp.css */
/* Event Details Container */
.event-details-container[b-zvhslqww7x] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.event-details-container[b-zvhslqww7x]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-zvhslqww7x] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-zvhslqww7x] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-zvhslqww7x] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-zvhslqww7x] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-zvhslqww7x] {
    width: 24px;
    height: 24px;
}

.event-title[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-zvhslqww7x] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-zvhslqww7x] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-zvhslqww7x] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-zvhslqww7x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-zvhslqww7x] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-zvhslqww7x] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-zvhslqww7x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.event-name[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
}

.event-venue[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

/* Event Details Grid */
.event-details-grid[b-zvhslqww7x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-zvhslqww7x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.detail-content[b-zvhslqww7x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-content p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Join Button */
.join-button-container[b-zvhslqww7x] {
    display: flex;
    justify-content: center;
    margin: 0 56px;
    position: fixed;
    bottom: 120px; /* Position just above the bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    width: 290px;
    z-index: 5;
}

.join-button[b-zvhslqww7x] {
    background-color: #201f1d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
}

.join-button:hover[b-zvhslqww7x] {
    background-color: #3a3835;
}

.join-button:active[b-zvhslqww7x] {
    background-color: #1a1917;
}

/* Cancelled Banner */
.event-cancelled-banner[b-zvhslqww7x] {
    margin: 0 25px 40px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Loading State */
.loading-state[b-zvhslqww7x] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-zvhslqww7x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-zvhslqww7x] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-zvhslqww7x] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-zvhslqww7x] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-zvhslqww7x] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-zvhslqww7x] {
        width: 100%;
        height: 120px;
    }

    .join-button-container[b-zvhslqww7x] {
        margin: 0 20px;
        width: calc(100% - 40px);
        max-width: 290px;
    }

    .join-button[b-zvhslqww7x] {
        width: 100%;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-zvhslqww7x] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .join-button-container[b-zvhslqww7x] {
        margin: 0 15px;
        width: calc(100% - 30px);
        max-width: 290px;
    }
}

/* /Pages/ClientEventEdit.razor.rz.scp.css */
/* Event Edit Container */
.event-edit-container[b-5bsyf3quxc] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.event-edit-container[b-5bsyf3quxc]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-5bsyf3quxc] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-5bsyf3quxc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-5bsyf3quxc] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

.event-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-5bsyf3quxc] {
    flex: 1;
    padding: 0;
    position: relative;
}

.event-cancelled-banner[b-5bsyf3quxc] {
    margin: 0 25px 20px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.date-error[b-5bsyf3quxc] {
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    margin: 4px 0 0 0;
}

.cancelled-actions[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    margin: 0 25px 20px 25px;
}

.delete-event-btn[b-5bsyf3quxc] {
    background-color: #842029;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
    max-width: 290px;
}

.delete-event-btn:hover:not(:disabled)[b-5bsyf3quxc] {
    background-color: #6d1a22;
}

.delete-event-btn:disabled[b-5bsyf3quxc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Event Main Info */
.event-main-info[b-5bsyf3quxc] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
    position: relative;
}

.event-image[b-5bsyf3quxc] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-5bsyf3quxc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.event-name[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.edit-button[b-5bsyf3quxc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.edit-button:hover[b-5bsyf3quxc] {
    background-color: rgba(0, 0, 0, 0.05);
}

.edit-button img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-5bsyf3quxc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 30px 25px;
}

.detail-section[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.detail-content[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-content p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Jobs Section */
.jobs-section[b-5bsyf3quxc] {
    margin: 0 25px 40px 25px;
}

.jobs-section .detail-label[b-5bsyf3quxc] {
    margin-bottom: 8px;
}

.jobs-list[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-item[b-5bsyf3quxc] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    padding: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-content[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    flex: 1;
}

.job-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-actions[b-5bsyf3quxc] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.edit-job-btn[b-5bsyf3quxc], .remove-job-btn[b-5bsyf3quxc] {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.edit-job-btn:hover[b-5bsyf3quxc], .remove-job-btn:hover[b-5bsyf3quxc] {
    background-color: rgba(206, 177, 133, 0.1);
}

.no-jobs[b-5bsyf3quxc] {
    text-align: center;
    padding: 20px;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

/* Job Accordion Styles */
.job-accordion-item[b-5bsyf3quxc] {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.job-accordion-header[b-5bsyf3quxc] {
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.job-accordion-header:hover[b-5bsyf3quxc] {
    background-color: #f0f0f0;
}

.job-header-content[b-5bsyf3quxc] {
    flex: 1;
}

.job-header-content .job-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 4px 0;
}

.job-subtitle[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d;
    margin: 0;
}

.accordion-arrow[b-5bsyf3quxc] {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-arrow.expanded[b-5bsyf3quxc] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-5bsyf3quxc] {
    width: 20px;
    height: 20px;
}

.job-accordion-content[b-5bsyf3quxc] {
    padding: 16px;
    background-color: #ffffff;
}

/* Form Styles for Accordion Content */
.job-accordion-content .form-group[b-5bsyf3quxc] {
    margin-bottom: 20px;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-label[b-5bsyf3quxc] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    margin-bottom: 8px;
}

.job-accordion-content .required[b-5bsyf3quxc] {
    color: #ceb185;
}

.job-accordion-content .form-input-container[b-5bsyf3quxc] {
    position: relative;
    width: 100%;
}

.job-accordion-content .form-input[b-5bsyf3quxc] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-input.readonly[b-5bsyf3quxc] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.job-accordion-content .form-textarea[b-5bsyf3quxc] {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    resize: none;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-textarea.readonly[b-5bsyf3quxc] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

/* Language Tags */
.job-accordion-content .selected-languages[b-5bsyf3quxc] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-accordion-content .language-tag[b-5bsyf3quxc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #ceb185;
    color: #ffffff;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.job-accordion-content .language-tag.readonly[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #ffffff;
}

/* Action Buttons */
.action-buttons[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    margin: 0 56px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    width: auto;
}

.cancel-event-btn[b-5bsyf3quxc], .update-event-btn[b-5bsyf3quxc] {
    background-color: #201f1d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
}

.cancel-event-btn:hover[b-5bsyf3quxc], .update-event-btn:hover[b-5bsyf3quxc] {
    background-color: #3a3835;
}

.cancel-event-btn:active[b-5bsyf3quxc], .update-event-btn:active[b-5bsyf3quxc] {
    background-color: #1a1917;
}

.update-event-btn:disabled[b-5bsyf3quxc] {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.update-event-btn:disabled:hover[b-5bsyf3quxc] {
    background-color: #9ca3af;
}

/* Loading State */
.loading-state[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-5bsyf3quxc] {
    background-color: #b8a06a;
}

/* Add Job Form Accordion */
.add-job-accordion[b-5bsyf3quxc] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin-top: 16px;
    overflow: hidden;
}

.add-job-accordion .accordion-header[b-5bsyf3quxc] {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.add-job-accordion .header-text h3[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201f1d;
    margin: 0 0 4px 0;
}

.add-job-accordion .header-text p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.add-job-accordion .arrow[b-5bsyf3quxc] {
    transition: transform 0.3s ease;
}

.add-job-accordion .arrow.expanded[b-5bsyf3quxc] {
    transform: rotate(180deg);
}

.add-job-accordion .arrow img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

.add-job-accordion .accordion-content[b-5bsyf3quxc] {
    padding: 20px;
}

.add-job-accordion .form-group[b-5bsyf3quxc] {
    margin-bottom: 25px;
    display: block;
    visibility: visible;
}

.add-job-accordion .form-label[b-5bsyf3quxc] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    margin-bottom: 8px;
}

.add-job-accordion .required[b-5bsyf3quxc] {
    color: #ceb185;
}

.add-job-accordion .form-input-container[b-5bsyf3quxc] {
    position: relative;
    width: 100%;
}

.add-job-accordion .form-input[b-5bsyf3quxc] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    display: block;
    visibility: visible;
    appearance: none;
}

.add-job-accordion .form-input:focus[b-5bsyf3quxc] {
    outline: none;
    border-color: #ceb185;
}

.add-job-accordion .form-input[b-5bsyf3quxc]::placeholder {
    color: #e8e5e0;
}

select.form-input[b-5bsyf3quxc] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.add-job-accordion .form-textarea[b-5bsyf3quxc] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    resize: vertical;
    display: block;
    visibility: visible;
}

.add-job-accordion .form-textarea:focus[b-5bsyf3quxc] {
    outline: none;
    border-color: #ceb185;
}

.add-job-accordion .form-textarea[b-5bsyf3quxc]::placeholder {
    color: #e8e5e0;
}

.add-job-accordion .dropdown-icon[b-5bsyf3quxc] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.add-job-accordion .dropdown-icon img[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-job-accordion .word-limit[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ceb185;
    margin-top: 8px;
}

.add-job-accordion .selected-languages[b-5bsyf3quxc] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-job-accordion .language-tag[b-5bsyf3quxc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #ceb185;
    color: #ffffff;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.add-job-accordion .language-tag-remove[b-5bsyf3quxc] {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.add-job-accordion .language-tag-remove:hover[b-5bsyf3quxc] {
    background-color: rgba(255, 255, 255, 0.2);
}

.add-job-accordion .add-job-section[b-5bsyf3quxc] {
    margin-top: 24px;
    text-align: center;
}

.add-job-accordion .add-job-button[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-job-accordion .add-job-button:hover:not(.disabled)[b-5bsyf3quxc] {
    background-color: #b8a06a;
}

.add-job-accordion .add-job-button.disabled[b-5bsyf3quxc] {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-5bsyf3quxc] {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 0 25px 30px 25px;
    }

    .event-main-info[b-5bsyf3quxc] {
        flex-direction: column;
        gap: 15px;
        margin: 25px 25px 35px 25px;
    }

    .event-image[b-5bsyf3quxc] {
        width: 100%;
        height: 120px;
    }

    .edit-button[b-5bsyf3quxc] {
        position: static;
        align-self: flex-end;
    }

    .action-buttons[b-5bsyf3quxc] {
        margin: 0 20px;
    }

    .cancel-event-btn[b-5bsyf3quxc], .update-event-btn[b-5bsyf3quxc] {
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .event-main-info[b-5bsyf3quxc] {
        gap: 20px;
        margin: 30px 25px 40px 25px;
    }

    .action-buttons[b-5bsyf3quxc] {
        margin: 0 15px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-5bsyf3quxc] {
    flex: 1;
}

.working-hours-row input[type="time"][b-5bsyf3quxc] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-5bsyf3quxc] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/ClientFeedback.razor.rz.scp.css */
/* ClientFeedback.razor.css */

.client-feedback-container[b-srlhj6rtev] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-feedback-container[b-srlhj6rtev]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-srlhj6rtev] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-srlhj6rtev] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-srlhj6rtev] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-srlhj6rtev] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Star Rating Section */
.star-rating-section[b-srlhj6rtev] {
    padding: 20px 25px 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.stars-container[b-srlhj6rtev] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.star-wrapper[b-srlhj6rtev] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    transition: transform 0.1s ease;
}

.star-wrapper:hover[b-srlhj6rtev] {
    transform: scale(1.1);
}

.star-wrapper:active[b-srlhj6rtev] {
    transform: scale(0.95);
}

.star-icon[b-srlhj6rtev] {
    width: 100%;
    height: 100%;
    aspect-ratio: 19/18;
    object-fit: contain;
    display: block;
}

/* Feedback Text Section */
.feedback-text-section[b-srlhj6rtev] {
    padding: 0 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-textarea[b-srlhj6rtev] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 206px;
    width: 100%;
    max-width: 350px;
    padding: 14px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    resize: none;
    outline: none;
}

.feedback-textarea[b-srlhj6rtev]::placeholder {
    color: rgba(232, 229, 224, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.feedback-textarea:focus[b-srlhj6rtev] {
    border-color: #CEB185;
}

/* Submit Button Section */
.submit-button-section[b-srlhj6rtev] {
    padding: 0 25px;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.submit-button[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.submit-button:hover:not(:disabled)[b-srlhj6rtev] {
    background-color: #3a3835;
}

.submit-button:active:not(:disabled)[b-srlhj6rtev] {
    transform: translateY(1px);
}

.submit-button.disabled[b-srlhj6rtev],
.submit-button:disabled[b-srlhj6rtev] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-feedback-container[b-srlhj6rtev] {
        max-width: 100%;
    }

    .header-back-button[b-srlhj6rtev] {
        left: 15px;
    }

    .star-rating-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .feedback-text-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .submit-button-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .feedback-textarea[b-srlhj6rtev] {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-srlhj6rtev] {
        left: 12px;
    }

    .star-rating-section[b-srlhj6rtev] {
        padding: 0 15px;
    }

    .feedback-text-section[b-srlhj6rtev] {
        padding: 0 15px;
    }

    .submit-button-section[b-srlhj6rtev] {
        padding: 0 15px;
    }
}

/* /Pages/ClientFeedbackSubmitted.razor.rz.scp.css */
/* ClientFeedbackSubmitted.razor.css */

.feedback-submitted-container[b-q9nqq27vow] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.feedback-submitted-container[b-q9nqq27vow]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-q9nqq27vow] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-title[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-q9nqq27vow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
}

/* Thank You Message */
.thank-you-message[b-q9nqq27vow] {
    margin-top: 204px; /* Position at 310px from top (106px header + 204px = 310px) */
    padding: 0 25px;
    text-align: center;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-message p[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    width: 272px;
}

/* Done Button Section */
.done-button-section[b-q9nqq27vow] {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    padding: 0 56px;
}

.done-button[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: center;
}

.done-button:hover[b-q9nqq27vow] {
    background-color: #3a3835;
}

.done-button:active[b-q9nqq27vow] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .feedback-submitted-container[b-q9nqq27vow] {
        max-width: 100%;
    }

    .thank-you-message[b-q9nqq27vow] {
        padding: 0 20px;
    }

    .thank-you-message p[b-q9nqq27vow] {
        width: 100%;
        max-width: 272px;
    }

    .done-button-section[b-q9nqq27vow] {
        padding: 0 20px;
    }

    .done-button[b-q9nqq27vow] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .thank-you-message[b-q9nqq27vow] {
        padding: 0 15px;
        margin-top: 180px;
    }

    .done-button-section[b-q9nqq27vow] {
        padding: 0 15px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .thank-you-message[b-q9nqq27vow] {
        margin-top: 150px;
    }
}
/* /Pages/ClientProfile.razor.rz.scp.css */
/* ClientProfile Screen Styles */
.client-profile-container[b-3oxgwrb3mv] {
    background-color: var(--color-white);
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-profile-container[b-3oxgwrb3mv]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* User Profile Section */
.user-profile-section[b-3oxgwrb3mv] {
    padding: calc(60px + env(safe-area-inset-top, 0) + 20px) 0 33px 0;
    text-align: center;
    background-color: var(--color-white);
}

.user-name[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 16px 0;
}

.user-role[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

/* Content Styles */
.profile-content[b-3oxgwrb3mv] {
    padding: 0 25px;
    padding-bottom: 30px;
}

.settings-section[b-3oxgwrb3mv] {
    margin-bottom: 40px;
}

.section-title[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 18px 0;
}

.settings-card[b-3oxgwrb3mv] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.setting-item[b-3oxgwrb3mv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: 80px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.setting-item:hover[b-3oxgwrb3mv] {
    background-color: rgba(206, 177, 133, 0.1);
}

.setting-item:not(:last-child)[b-3oxgwrb3mv] {
    border-bottom: 1px solid var(--color-border);
}

.setting-info[b-3oxgwrb3mv] {
    flex: 1;
}

.setting-label[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin-bottom: 8px;
}

.setting-description[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
}

.setting-arrow[b-3oxgwrb3mv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.setting-arrow img[b-3oxgwrb3mv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Team Count Badge */
.team-count-badge[b-3oxgwrb3mv] {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-count[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    text-align: center;
}

/* Logout Section */
.logout-section[b-3oxgwrb3mv] {
    margin: 46px 0 17px 0;
    display: flex;
    justify-content: center;
}

.logout-button[b-3oxgwrb3mv] {
    width: 290px;
    height: 44px;
    background-color: var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.logout-button:hover[b-3oxgwrb3mv] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logout-text[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-button);
    line-height: var(--line-height);
    color: var(--color-white);
    text-align: center;
}

/* Delete Account Section */
.delete-account-section[b-3oxgwrb3mv] {
    text-align: center;
    margin-bottom: 30px;
}

.delete-account-link[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.delete-account-link:hover[b-3oxgwrb3mv] {
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-profile-container[b-3oxgwrb3mv] {
        max-width: 100%;
    }

    .profile-content[b-3oxgwrb3mv] {
        padding: 0 20px;
    }

    .logout-button[b-3oxgwrb3mv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .user-name[b-3oxgwrb3mv] {
        font-size: 20px;
    }

    .section-title[b-3oxgwrb3mv] {
        font-size: 16px;
    }

    .setting-label[b-3oxgwrb3mv] {
        font-size: 16px;
    }
}

/* Shown when a client's account isn't active yet. ClientApprovalGuard redirects them here
   from search/bookings/events, and a silent bounce reads as a broken app. */
.account-pending-notice[b-3oxgwrb3mv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 20px 0;
    padding: 12px 14px;
    border: 1px solid #E8D9BE;
    border-radius: 8px;
    background: #FBF6EC;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6B5A3C;
}
/* /Pages/CompleteModelReg.razor.rz.scp.css */
/* Header styles */
.header[b-wk916k3idj] {
    background-color: #FFFFFF;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-title[b-wk916k3idj] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* Form container styles */
.form-container[b-wk916k3idj] {
    padding: 24px 24px 80px 24px; /* Increased bottom padding to create more space from submit section */
    background-color: #FFFFFF;
}

/* Form styles */
.form-group[b-wk916k3idj] {
    margin-bottom: 24px;
}

.form-label[b-wk916k3idj] {
    display: block;
    margin-bottom: 8px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.required[b-wk916k3idj] {
    color: #CEB185;
    margin-left: 4px;
}

.form-input[b-wk916k3idj] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input[b-wk916k3idj]::placeholder {
    color: #999;
}

.form-input:focus[b-wk916k3idj] {
    outline: none;
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.2);
}

/* Submit section styles */
.submit-section[b-wk916k3idj] {
    padding: 24px;
    background-color: #FFFFFF;
    border-top: 1px solid #e9ecef;
}

/* Loading styles */
.loading-container[b-wk916k3idj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f8f9fa;
}

.loading-spinner[b-wk916k3idj] {
    width: 40px;
    height: 40px;
    border: 4px solid #e9ecef;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-wk916k3idj 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-wk916k3idj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-wk916k3idj] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Photo upload styles */
.photo-grid[b-wk916k3idj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px; /* Increased bottom margin for better spacing */
    max-width: 360px;
}

/* Large Image Display */
.large-image-container[b-wk916k3idj] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-wk916k3idj] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.large-image[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-loading[b-wk916k3idj] {
    font-size: 14px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-large-image[b-wk916k3idj] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay on Large Image */
.crop-overlay-large[b-wk916k3idj] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button-large[b-wk916k3idj] {
    background: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button-large:hover[b-wk916k3idj] {
    background: #B89970;
}

.crop-button-large:focus-visible[b-wk916k3idj] {
    outline: 2px solid #201F1D;
    outline-offset: 2px;
}

/* Image Ribbon */
.image-ribbon-container[b-wk916k3idj] {
    margin-bottom: 34px;
}

.ribbon-header[b-wk916k3idj] {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ribbon-title[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.add-photos-button[b-wk916k3idj] {
    background: #CEB185;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.add-photos-button:hover[b-wk916k3idj] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.add-photos-button:active[b-wk916k3idj] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}

.image-ribbon[b-wk916k3idj] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-wk916k3idj] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-wk916k3idj] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-wk916k3idj] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.thumbnail-image[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-wk916k3idj] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-wk916k3idj] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    text-align: center;
    padding: 0 16px;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-wk916k3idj] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-wk916k3idj] {
    transform: scale(0.95);
}

.add-image-button[b-wk916k3idj] {
    width: 171px;
    height: 171px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.add-image-button:hover[b-wk916k3idj] {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.add-image-content[b-wk916k3idj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-icon[b-wk916k3idj] {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.add-icon[b-wk916k3idj] {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

.uploaded-image[b-wk916k3idj] {
    width: 171px;
    height: 171px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 2px solid #007bff;
}

.uploaded-image img[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
}

.placeholder-icon[b-wk916k3idj] {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

/* Image Delete Overlay */
.image-delete-overlay[b-wk916k3idj] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-image-btn[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-image-btn:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-wk916k3idj] {
    transform: scale(0.95);
}

/* Crop Overlay */
.crop-overlay[b-wk916k3idj] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 10;
}

.crop-button[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.crop-button:active[b-wk916k3idj] {
    transform: scale(0.95);
}

/* Image Modal Styles */
.image-modal-overlay[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.image-modal-content[b-wk916k3idj] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
}

.modal-header[b-wk916k3idj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3[b-wk916k3idj] {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.modal-close-btn[b-wk916k3idj] {
    background: none;
    border: none;
    color: #666;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-wk916k3idj] {
    background-color: #f8f9fa;
}

.modal-body[b-wk916k3idj] {
    padding: 24px;
}

.file-upload-area[b-wk916k3idj] {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.file-upload-area:hover[b-wk916k3idj] {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.hidden-file-input[b-wk916k3idj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-area-content[b-wk916k3idj] {
    pointer-events: none;
}

.modal-upload-icon[b-wk916k3idj] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.upload-area-content p[b-wk916k3idj] {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

.upload-area-content small[b-wk916k3idj] {
    color: #666;
    font-size: 14px;
}

/* Upload progress styles */
.upload-progress[b-wk916k3idj] {
    margin: 16px 0;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.progress-bar[b-wk916k3idj] {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-wk916k3idj] {
    height: 100%;
    background-color: #007bff;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.upload-progress p[b-wk916k3idj] {
    margin: 0;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* Validation message styles */
.validation-message[b-wk916k3idj] {
    margin: 12px 0 40px 0; /* Increased bottom margin to create more space from submit section */
    padding: 12px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
}

.validation-message p[b-wk916k3idj] {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

/* Dropdown styles */
.select-container[b-wk916k3idj] {
    position: relative;
}

.dropdown-options[b-wk916k3idj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hide scrollbar for dropdown options */
.dropdown-options[b-wk916k3idj]::-webkit-scrollbar {
    display: none;
}

.dropdown-options[b-wk916k3idj] {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.dropdown-option[b-wk916k3idj] {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.dropdown-option:hover[b-wk916k3idj] {
    background-color: #f8f9fa;
}

.dropdown-option:last-child[b-wk916k3idj] {
    border-bottom: none;
}

/* Language section styles */
.language-item[b-wk916k3idj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 0;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.remove-language-btn[b-wk916k3idj] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.remove-language-btn:hover[b-wk916k3idj] {
    color: #c82333;
}

/* Language selection modal styles */
.language-selection-modal[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    overflow: visible;
}

.modal-content[b-wk916k3idj] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: visible;
}

.modal-content h3[b-wk916k3idj] {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.modal-actions[b-wk916k3idj] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

.cancel-btn[b-wk916k3idj] {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.cancel-btn:hover[b-wk916k3idj] {
    background: #f8f9fa;
    border-color: #ccc;
}

.confirm-btn[b-wk916k3idj] {
    padding: 10px 20px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.confirm-btn:hover[b-wk916k3idj] {
    background: #0056b3;
}

.confirm-btn:disabled[b-wk916k3idj] {
    background: #ccc;
    cursor: not-allowed;
}

/* Form input focus styles */
.form-input:focus[b-wk916k3idj] {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Select input styles */
.select-input[b-wk916k3idj] {
    cursor: pointer;
}

.select-input:hover[b-wk916k3idj] {
    border-color: #007bff;
}

/* Date input styles */
input[type="date"][b-wk916k3idj] {
    font-family: inherit;
}

/* Submit button styles */
.submit-button[b-wk916k3idj] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover[b-wk916k3idj] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-wk916k3idj] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-wk916k3idj] {
    background-color: #d4d4d4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-wk916k3idj] {
    background-color: #d4d4d4;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-wk916k3idj] {
    color: #666666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .photo-grid[b-wk916k3idj] {
        gap: 12px;
        max-width: 360px;
    }

    .add-image-button[b-wk916k3idj],
    .uploaded-image[b-wk916k3idj] {
        width: 150px;
        height: 150px;
    }

    .large-image-wrapper[b-wk916k3idj] {
        max-width: 350px;
        height: 350px;
    }

    .ribbon-thumbnail[b-wk916k3idj] {
        width: 110px;
        height: 110px;
    }

    .delete-thumbnail-btn[b-wk916k3idj] {
        width: 30px;
        height: 30px;
    }

    .dropdown-options[b-wk916k3idj] {
        max-height: 150px;
    }

    .dropdown-option[b-wk916k3idj] {
        padding: 10px 12px;
    }

    .modal-content[b-wk916k3idj] {
        padding: 20px;
        margin: 20px;
    }

    .modal-actions[b-wk916k3idj] {
        flex-direction: column;
    }

    .cancel-btn[b-wk916k3idj],
    .confirm-btn[b-wk916k3idj] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .large-image-wrapper[b-wk916k3idj] {
        max-width: 300px;
        height: 300px;
    }

    .ribbon-thumbnail[b-wk916k3idj] {
        width: 100px;
        height: 100px;
    }

    .delete-thumbnail-btn[b-wk916k3idj] {
        width: 28px;
        height: 28px;
    }

    .image-ribbon[b-wk916k3idj] {
        gap: 8px;
    }
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-wk916k3idj] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 600px;
    max-height: 90vh;
    width: 100%;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-wk916k3idj 0.3s ease-out;
}

.cropper-modal-container[b-wk916k3idj]  .cropper-btn-crop {
    background-color: #CEB185;
    color: #201F1D;
}

.cropper-modal-container[b-wk916k3idj]  .cropper-btn-crop:hover:not(:disabled) {
    background-color: #B89970;
}

.photo-error[b-wk916k3idj] {
    color: #C0392B;
    margin: 12px;
}

.photo-upload-status[b-wk916k3idj] {
    padding: 24px;
    text-align: center;
}

@keyframes modalSlideIn-b-wk916k3idj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-wk916k3idj] {
        padding: 10px;
    }

    .cropper-modal-container[b-wk916k3idj] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-wk916k3idj] {
        padding: 5px;
    }

    .cropper-modal-container[b-wk916k3idj] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/CreateEvent.razor.rz.scp.css */
/* Create Event Container */
.create-event-container[b-24mt03fdjg] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-event-header[b-24mt03fdjg] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-24mt03fdjg] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-event-content[b-24mt03fdjg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px; /* Increased bottom padding for fixed submit button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-24mt03fdjg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-placeholder[b-24mt03fdjg] {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
}

.photo-placeholder img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-container[b-24mt03fdjg] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-24mt03fdjg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-24mt03fdjg] {
    margin-top: 10px;
}

.add-photo-text[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-24mt03fdjg] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-24mt03fdjg] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-24mt03fdjg] {
    color: #CEB185;
}

.form-input-container[b-24mt03fdjg] {
    position: relative;
    width: 100%;
}

.form-input[b-24mt03fdjg] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-24mt03fdjg]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-24mt03fdjg] {
    line-height: 44px;
}

.form-input[type="date"][b-24mt03fdjg]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-24mt03fdjg] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-textarea[b-24mt03fdjg] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
    display: block !important;
    visibility: visible !important;
}

.form-textarea:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-24mt03fdjg]::placeholder {
    color: #E8E5E0;
}

.dropdown-icon[b-24mt03fdjg] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Links */
.manual-address-link[b-24mt03fdjg],
.add-language-link[b-24mt03fdjg] {
    margin-top: 8px;
}

.manual-address-text[b-24mt03fdjg],
.add-language-text[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Word Limit */
.word-limit[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Selected Languages */
.selected-languages[b-24mt03fdjg] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-24mt03fdjg] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag-remove[b-24mt03fdjg] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-24mt03fdjg] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Add Job Section */
.add-job-section[b-24mt03fdjg] {
    margin: 30px 0;
    text-align: center;
}

.add-job-button[b-24mt03fdjg] {
    width: 290px;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-job-button:hover[b-24mt03fdjg] {
    background-color: #B8A06B;
}

.add-job-button:active[b-24mt03fdjg] {
    background-color: #A68F5A;
}

.add-job-button.disabled[b-24mt03fdjg],
.add-job-button:disabled[b-24mt03fdjg] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
    opacity: 0.6;
}

.add-job-button.disabled:hover[b-24mt03fdjg],
.add-job-button:disabled:hover[b-24mt03fdjg] {
    background-color: #E1E1E1;
}

/* Create Job Section */
.create-job-section[b-24mt03fdjg] {
    margin: 20px 0;
    text-align: center;
}

.create-job-button[b-24mt03fdjg] {
    width: 290px;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.create-job-button:hover[b-24mt03fdjg] {
    background-color: #B8A06B;
}

.create-job-button:active[b-24mt03fdjg] {
    background-color: #A68F5A;
}

/* Submit Section */
.submit-section[b-24mt03fdjg] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-24mt03fdjg] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-24mt03fdjg] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-24mt03fdjg] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-24mt03fdjg] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-24mt03fdjg] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-24mt03fdjg] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-24mt03fdjg] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-24mt03fdjg] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-event-content[b-24mt03fdjg] {
        padding: 15px 20px 220px 20px; /* Increased bottom padding for fixed submit button */
    }
    
    .form-group[b-24mt03fdjg] {
        margin-bottom: 20px;
    }
    
    .photo-placeholder[b-24mt03fdjg] {
        width: 100px;
        height: 100px;
    }
    
    .photo-container[b-24mt03fdjg] {
        width: 100px;
        height: 100px;
    }
    
    .photo-overlay[b-24mt03fdjg] {
        width: 50px;
        height: 50px;
    }
    
    .add-job-button[b-24mt03fdjg] {
        width: 100%;
        max-width: 290px;
    }
    
    .submit-section[b-24mt03fdjg] {
        padding: 0 15px;
        max-width: 100%;
    }
    
    .submit-button[b-24mt03fdjg] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .create-event-content[b-24mt03fdjg] {
        padding: 10px 15px 220px 15px; /* Increased bottom padding for fixed submit button */
    }
    
    .header-title[b-24mt03fdjg] {
        font-size: 20px;
    }
    
    .form-label[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .form-input[b-24mt03fdjg],
    .form-textarea[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .add-photo-text[b-24mt03fdjg],
    .manual-address-text[b-24mt03fdjg],
    .add-language-text[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .add-job-button[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .submit-button[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .submit-section[b-24mt03fdjg] {
        padding: 0 10px;
    }
}

/* Simple Job Form Accordion Styles */
.simple-job-accordion[b-24mt03fdjg] {
    margin: 30px 0;
    background-color: #FFFFFF;
    border: 2px solid #CEB185;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.simple-accordion-header[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    cursor: pointer;
    background-color: #F8F8F8;
    border-bottom: 1px solid #E8E5E0;
    min-height: 60px;
}

.simple-accordion-header:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.simple-header-text h3[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.simple-header-text p[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

.simple-arrow[b-24mt03fdjg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: #CEB185;
    border-radius: 50%;
}

.simple-arrow.expanded[b-24mt03fdjg] {
    transform: rotate(180deg);
}

.simple-arrow img[b-24mt03fdjg] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.simple-accordion-content[b-24mt03fdjg] {
    padding: 20px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    display: block !important;
    visibility: visible !important;
    opacity: 1;
    min-height: 200px;
}

/* Jobs Accordion Styles */
.jobs-accordion-section[b-24mt03fdjg] {
    margin: 30px 0;
}

.jobs-section-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 15px;
}

.job-accordion-item[b-24mt03fdjg] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.job-accordion-item:hover[b-24mt03fdjg] {
    border-color: #CEB185;
    box-shadow: 0 2px 4px rgba(206, 177, 133, 0.1);
}

.job-accordion-header[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #F8F8F8;
    transition: background-color 0.3s ease;
}

.job-accordion-header:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.job-header-content[b-24mt03fdjg] {
    flex: 1;
}

.job-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 4px;
}

.job-subtitle[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.job-accordion-actions[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remove-job-button[b-24mt03fdjg] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #666666;
    line-height: 1;
}

.remove-job-button:hover[b-24mt03fdjg] {
    background-color: #FFE6E6;
    color: #FF4444;
}

.accordion-arrow[b-24mt03fdjg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: #CEB185;
    border-radius: 50%;
}

.accordion-arrow.expanded[b-24mt03fdjg] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-24mt03fdjg] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.job-accordion-content[b-24mt03fdjg] {
    padding: 20px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    animation: slideDown-b-24mt03fdjg 0.3s ease;
}

@keyframes slideDown-b-24mt03fdjg {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.job-detail-row[b-24mt03fdjg] {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    gap: 4px;
}

.job-detail-row:last-child[b-24mt03fdjg] {
    margin-bottom: 0;
}

.job-detail-label[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #201F1D;
}

/* Read-only form elements */
.form-input.readonly[b-24mt03fdjg],
.form-textarea.readonly[b-24mt03fdjg] {
    background-color: #F8F8F8;
    color: #666666;
    cursor: default;
    border-color: #E8E5E0;
}

.form-input.readonly:focus[b-24mt03fdjg],
.form-textarea.readonly:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #E8E5E0;
    box-shadow: none;
}

.language-tag.readonly[b-24mt03fdjg] {
    background-color: #F0F0F0;
    color: #666666;
    cursor: default;
}

.language-tag.readonly:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.job-detail-value[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Responsive Design for Accordion */
@media (max-width: 480px) {
    .job-form-accordion-header[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-form-accordion-content[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-form-title[b-24mt03fdjg] {
        font-size: 16px;
    }
    
    .job-form-subtitle[b-24mt03fdjg] {
        font-size: 13px;
    }
    
    .job-accordion-header[b-24mt03fdjg] {
        padding: 12px 15px;
    }
    
    .job-accordion-content[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-title[b-24mt03fdjg] {
        font-size: 15px;
    }
    
    .job-subtitle[b-24mt03fdjg] {
        font-size: 13px;
    }
    
    .job-detail-label[b-24mt03fdjg],
    .job-detail-value[b-24mt03fdjg] {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .job-form-accordion-header[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-form-accordion-content[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-form-title[b-24mt03fdjg] {
        font-size: 15px;
    }
    
    .job-form-subtitle[b-24mt03fdjg] {
        font-size: 12px;
    }
    
    .job-accordion-header[b-24mt03fdjg] {
        padding: 10px 12px;
    }
    
    .job-accordion-content[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-title[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .job-subtitle[b-24mt03fdjg] {
        font-size: 12px;
    }
    
    .job-detail-label[b-24mt03fdjg],
    .job-detail-value[b-24mt03fdjg] {
        font-size: 12px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .create-event-content[b-24mt03fdjg] {
        padding-bottom: 200px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-24mt03fdjg] {
    flex: 1;
}

.working-hours-row input[type="time"][b-24mt03fdjg] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-24mt03fdjg] {
    color: #6B6B6B;
    font-size: 14px;
}
/* /Pages/CreateFolder.razor.rz.scp.css */
/* Create Folder Container */
.create-folder-container[b-bvg1e56f7t] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-bvg1e56f7t] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
}

.loading-spinner[b-bvg1e56f7t] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-bvg1e56f7t 1s linear infinite;
    margin-right: 1rem;
}

.loading-spinner[b-bvg1e56f7t]::after {
    content: "Loading...";
    position: absolute;
    margin-top: 50px;
    margin-left: -30px;
    font-size: 14px;
    color: #666;
}

@keyframes spin-b-bvg1e56f7t {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.create-folder-header[b-bvg1e56f7t] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-bvg1e56f7t] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-bvg1e56f7t] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-bvg1e56f7t] {
    opacity: 0.7;
}

.back-button img[b-bvg1e56f7t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-bvg1e56f7t] {
    text-align: center;
}

.header-title h1[b-bvg1e56f7t] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

/* Form Content */
.create-folder-content[b-bvg1e56f7t] {
    flex: 1;
    padding: 20px 25px 20px 25px; /* Reduced bottom padding since button is now separate */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.create-folder-content[b-bvg1e56f7t]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Form Groups */
.form-group[b-bvg1e56f7t] {
    margin-bottom: 29px;
}

.form-label[b-bvg1e56f7t] {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

/* Form Inputs */
.form-input[b-bvg1e56f7t] {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-bvg1e56f7t] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-bvg1e56f7t]::placeholder {
    color: #E8E5E0;
}

/* Form Textarea */
.form-textarea[b-bvg1e56f7t] {
    width: 100%;
    min-height: 206px;
    padding: 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    resize: vertical;
}

.form-textarea:focus[b-bvg1e56f7t] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-bvg1e56f7t]::placeholder {
    color: #E8E5E0;
}

/* Validation Messages */
.validation-message[b-bvg1e56f7t] {
    display: block;
    color: #dc3545;
    font-size: 14px;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

/* Save Button Container - Fixed at bottom */
.save-button-container[b-bvg1e56f7t] {
    position: fixed;
    bottom: 100px; /* Increased margin above bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px; /* Match the design width */
    padding: 0 25px;
    z-index: 100;
    background-color: #FFFFFF;
    box-shadow: none !important; /* Remove any box shadow from global styles */
}

.save-button[b-bvg1e56f7t] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #E1E1E1;
    border: none;
    border-radius: 8px;
    color: #AFAFAF;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    outline: none;
    box-shadow: none;
}

.save-button:not(.saving):not(:disabled)[b-bvg1e56f7t] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.save-button:not(.saving):not(:disabled):hover[b-bvg1e56f7t] {
    background-color: #2a2a2a;
    transform: translateY(-1px);
}

.save-button:not(.saving):not(:disabled):active[b-bvg1e56f7t] {
    transform: translateY(0);
}

.save-button:disabled[b-bvg1e56f7t] {
    cursor: not-allowed;
    opacity: 0.6;
}

.save-button.saving[b-bvg1e56f7t] {
    background-color: #201F1D;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Remove all borders and outlines on all states */
.save-button:focus[b-bvg1e56f7t],
.save-button:focus-visible[b-bvg1e56f7t],
.save-button:active[b-bvg1e56f7t],
.save-button:hover[b-bvg1e56f7t] {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Save Spinner */
.save-spinner[b-bvg1e56f7t] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #FFFFFF;
    border-radius: 50%;
    animation: spin-b-bvg1e56f7t 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-folder-content[b-bvg1e56f7t] {
        padding: 15px 20px 20px 20px;
    }

    .form-group[b-bvg1e56f7t] {
        margin-bottom: 24px;
    }

    .form-label[b-bvg1e56f7t] {
        font-size: 14px;
    }

    .form-input[b-bvg1e56f7t],
    .form-textarea[b-bvg1e56f7t] {
        font-size: 14px;
    }

    .save-button-container[b-bvg1e56f7t] {
        padding: 0 20px;
    }

    .save-button[b-bvg1e56f7t] {
        width: 100%;
        max-width: 290px;
    }

    .header-title h1[b-bvg1e56f7t] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .create-folder-content[b-bvg1e56f7t] {
        padding: 12px 15px 20px 15px;
    }

    .form-group[b-bvg1e56f7t] {
        margin-bottom: 20px;
    }

    .form-label[b-bvg1e56f7t] {
        font-size: 13px;
    }

    .form-input[b-bvg1e56f7t],
    .form-textarea[b-bvg1e56f7t] {
        font-size: 13px;
    }

    .save-button-container[b-bvg1e56f7t] {
        padding: 0 15px;
    }

    .header-title h1[b-bvg1e56f7t] {
        font-size: 18px;
    }
}

/* /Pages/CreateJob.razor.rz.scp.css */
/* Create Job Container */
.create-job-container[b-g1eypta49n] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-job-header[b-g1eypta49n] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-g1eypta49n] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-g1eypta49n] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-job-content[b-g1eypta49n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 25px 120px 25px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Event Info Section */
.event-info-section[b-g1eypta49n] {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}

.event-image[b-g1eypta49n] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-g1eypta49n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-details[b-g1eypta49n] {
    flex: 1;
}

.event-name[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 5px;
}

.event-venue[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
}

/* Job Form Section */
.job-form-section[b-g1eypta49n] {
    flex: 1;
}

.form-title[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    margin-bottom: 25px;
}

/* Form Groups */
.form-group[b-g1eypta49n] {
    margin-bottom: 25px;
}

.form-label[b-g1eypta49n] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-g1eypta49n] {
    color: #CEB185;
}

.form-input-container[b-g1eypta49n] {
    position: relative;
    width: 100%;
}

.form-input[b-g1eypta49n] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.form-input:focus[b-g1eypta49n] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-g1eypta49n]::placeholder {
    color: #E8E5E0;
}

select.form-input[b-g1eypta49n] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-textarea[b-g1eypta49n] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
}

.form-textarea:focus[b-g1eypta49n] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-g1eypta49n]::placeholder {
    color: #E8E5E0;
}

.dropdown-icon[b-g1eypta49n] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-g1eypta49n] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Links */
.add-language-link[b-g1eypta49n] {
    margin-top: 8px;
}

.add-language-text[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Word Limit */
.word-limit[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Update Section */
.update-section[b-g1eypta49n] {
    margin-top: 30px;
    text-align: center;
}

.update-button[b-g1eypta49n] {
    width: 290px;
    height: 44px;
    background-color: #E1E1E1;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #AFAFAF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.update-button:hover[b-g1eypta49n] {
    background-color: #D0D0D0;
}

.update-button:active[b-g1eypta49n] {
    background-color: #C0C0C0;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-job-content[b-g1eypta49n] {
        padding: 15px 20px 120px 20px;
    }
    
    .form-group[b-g1eypta49n] {
        margin-bottom: 20px;
    }
    
    .event-image[b-g1eypta49n] {
        width: 50px;
        height: 45px;
    }
    
    .event-name[b-g1eypta49n] {
        font-size: 20px;
    }
    
    .event-venue[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .update-button[b-g1eypta49n] {
        width: 100%;
        max-width: 290px;
    }
    
    .form-title[b-g1eypta49n] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .create-job-content[b-g1eypta49n] {
        padding: 10px 15px 120px 15px;
    }
    
    .header-title[b-g1eypta49n] {
        font-size: 20px;
    }
    
    .form-label[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .form-input[b-g1eypta49n],
    .form-textarea[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .add-language-text[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .update-button[b-g1eypta49n] {
        font-size: 14px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-g1eypta49n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-g1eypta49n] {
    flex: 1;
}

.working-hours-row input[type="time"][b-g1eypta49n] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-g1eypta49n] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/EditEventJob.razor.rz.scp.css */
/* EditEventJob.razor.css */

.edit-job-container[b-ozgfnw6b1t] {
    background-color: #ffffff;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.edit-job-header[b-ozgfnw6b1t] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    flex-shrink: 0;
}

.header-content[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 106px;
    padding: 0 18px;
    position: relative;
}

.back-button[b-ozgfnw6b1t] {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.back-button img[b-ozgfnw6b1t] {
    width: 100%;
    height: 100%;
}

.page-title[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* Content */
.edit-job-content[b-ozgfnw6b1t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 0 220px 0; /* Bottom padding for fixed button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.edit-job-content[b-ozgfnw6b1t]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Event Info */
.event-info[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    gap: 15px;
}

.event-image[b-ozgfnw6b1t] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-ozgfnw6b1t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-ozgfnw6b1t] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-image img[b-ozgfnw6b1t] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-details[b-ozgfnw6b1t] {
    flex: 1;
}

.event-name[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
}

.event-location[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

/* Job Form Section */
.job-form-section[b-ozgfnw6b1t] {
    padding: 0 25px;
}

.section-title[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
    margin: 0 0 20px 0;
}

.form-container[b-ozgfnw6b1t] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-ozgfnw6b1t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.required[b-ozgfnw6b1t] {
    color: #ceb185;
}

/* Form Controls */
.select-container[b-ozgfnw6b1t] {
    position: relative;
    width: 100%;
}

.form-select[b-ozgfnw6b1t] {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201f1d;
    appearance: none;
    cursor: pointer;
}

.form-select:focus[b-ozgfnw6b1t] {
    outline: none;
    border-color: #ceb185;
}

.dropdown-icon[b-ozgfnw6b1t] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.textarea-container[b-ozgfnw6b1t] {
    position: relative;
    width: 100%;
}

.form-textarea[b-ozgfnw6b1t] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201f1d;
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
}

.form-textarea:focus[b-ozgfnw6b1t] {
    outline: none;
    border-color: #ceb185;
}

.form-textarea[b-ozgfnw6b1t]::placeholder {
    color: #afafaf;
}

.word-limit[b-ozgfnw6b1t] {
    position: absolute;
    bottom: 8px;
    left: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

.add-language-btn[b-ozgfnw6b1t] {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    cursor: pointer;
    text-align: left;
    padding: 0;
    margin-top: 8px;
}

.add-language-btn:hover[b-ozgfnw6b1t] {
    text-decoration: underline;
}

/* Selected Languages */
.selected-languages[b-ozgfnw6b1t] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-ozgfnw6b1t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag-remove[b-ozgfnw6b1t] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-ozgfnw6b1t] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Action Buttons */
.action-buttons[b-ozgfnw6b1t] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    z-index: 100;
}

.update-btn[b-ozgfnw6b1t] {
    background-color: #e1e1e1;
    border: none;
    border-radius: 8px;
    width: 290px;
    height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #afafaf;
    cursor: pointer;
    transition: all 0.3s ease;
}

.update-btn:hover:not(:disabled)[b-ozgfnw6b1t] {
    background-color: #ceb185;
    color: #ffffff;
}

.update-btn:disabled[b-ozgfnw6b1t] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .edit-job-content[b-ozgfnw6b1t] {
        padding: 0 0 220px 0; /* Bottom padding for fixed button */
    }

    .header-content[b-ozgfnw6b1t] {
        padding: 0 15px;
    }

    .back-button[b-ozgfnw6b1t] {
        left: 15px;
    }

    .page-title[b-ozgfnw6b1t] {
        width: auto;
        max-width: 200px;
    }

    .event-info[b-ozgfnw6b1t] {
        padding: 20px 15px;
    }

    .job-form-section[b-ozgfnw6b1t] {
        padding: 0 15px;
    }

    .action-buttons[b-ozgfnw6b1t] {
        padding: 0 15px;
        max-width: 100%;
    }

    .update-btn[b-ozgfnw6b1t] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .edit-job-content[b-ozgfnw6b1t] {
        padding: 0 0 220px 0; /* Bottom padding for fixed button */
    }

    .header-content[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .back-button[b-ozgfnw6b1t] {
        left: 10px;
    }

    .page-title[b-ozgfnw6b1t] {
        font-size: 20px;
    }

    .event-info[b-ozgfnw6b1t] {
        padding: 20px 10px;
    }

    .job-form-section[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .action-buttons[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .form-label[b-ozgfnw6b1t] {
        font-size: 14px;
    }

    .form-select[b-ozgfnw6b1t],
    .form-textarea[b-ozgfnw6b1t] {
        font-size: 14px;
    }
}

/* Focus states for accessibility */
.form-select:focus[b-ozgfnw6b1t],
.form-textarea:focus[b-ozgfnw6b1t] {
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.2);
}

/* Loading state */
.update-btn:disabled[b-ozgfnw6b1t] {
    background-color: #e1e1e1;
    color: #afafaf;
}

/* Error states (for future use) */
.form-select.error[b-ozgfnw6b1t],
.form-textarea.error[b-ozgfnw6b1t] {
    border-color: #ff6b6b;
}

.error-message[b-ozgfnw6b1t] {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 4px;
}

/* Working hours start/end time inputs */
.working-hours-row[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .select-container[b-ozgfnw6b1t] {
    flex: 1;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-ozgfnw6b1t] {
    color: #6B6B6B;
    font-size: 14px;
}
/* /Pages/EditNewMediaUploadAdmin.razor.rz.scp.css */
/* New Media Upload Container */
.new-upload-container[b-hoeoxctu63] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-hoeoxctu63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}

.loading-container p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-hoeoxctu63 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.new-upload-header[b-hoeoxctu63] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-hoeoxctu63] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-hoeoxctu63] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-hoeoxctu63] {
    opacity: 0.7;
}

.back-button img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-hoeoxctu63] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-hoeoxctu63] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-camera[b-hoeoxctu63] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-camera img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.new-upload-content[b-hoeoxctu63] {
    flex: 1;
    padding: 20px 26px 180px 26px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    height: calc(100vh - 186px); /* Fixed height for proper scrolling */
}

.new-upload-content[b-hoeoxctu63]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Album Name Input */
.album-name-input-container[b-hoeoxctu63] {
    margin-bottom: 32px;
}

.album-name-label[b-hoeoxctu63] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.album-name-input[b-hoeoxctu63] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.album-name-input:focus[b-hoeoxctu63] {
    outline: none;
    border-color: #CEB185;
}

.album-name-input[b-hoeoxctu63]::placeholder {
    color: #B8A78C;
}

.album-name-error[b-hoeoxctu63] {
    margin: 8px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #F44336;
}

/* Album Info */
.album-info[b-hoeoxctu63] {
    margin-bottom: 32px;
}

.album-text[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.album-name[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Large Image Display */
.large-image-container[b-hoeoxctu63] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-hoeoxctu63] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.large-image[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-large-image[b-hoeoxctu63] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay */
.crop-overlay[b-hoeoxctu63] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.crop-button:active[b-hoeoxctu63] {
    transform: scale(0.95);
}

/* Image Ribbon */
.image-ribbon-container[b-hoeoxctu63] {
    margin-bottom: 34px;
}

.ribbon-header[b-hoeoxctu63] {
    margin-bottom: 12px;
}

.ribbon-title[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.image-ribbon[b-hoeoxctu63] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-hoeoxctu63] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-hoeoxctu63] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-hoeoxctu63] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.ribbon-thumbnail.thumbnail-selected[b-hoeoxctu63] {
    border-color: #CEB185;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.5);
}

.thumbnail-image[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-hoeoxctu63] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-hoeoxctu63] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-hoeoxctu63] {
    transform: scale(0.95);
}

/* Thumbnail Checkmark */
.thumbnail-checkmark[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.thumbnail-checkmark svg[b-hoeoxctu63] {
    width: 20px;
    height: 20px;
}

/* Set Thumbnail Button Container */
.set-thumbnail-button-container[b-hoeoxctu63] {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-thumbnail-main-btn[b-hoeoxctu63] {
    padding: 12px 24px;
    background: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.set-thumbnail-main-btn:hover[b-hoeoxctu63] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.set-thumbnail-main-btn:active[b-hoeoxctu63] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}


/* Feature Sections */
.feature-section[b-hoeoxctu63] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
}

.feature-section:hover[b-hoeoxctu63] {
    background-color: #f8f8f8;
}

.feature-icon[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.feature-icon img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-content[b-hoeoxctu63] {
    flex: 1;
}

.feature-text[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.feature-subtext[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #B8A78C;
    margin: 4px 0 0 0;
}

.feature-arrow[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-arrow img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Upload Button Container */
.upload-button-container[b-hoeoxctu63] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002; /* Ensure buttons stay on top of all content including modals */
}

.upload-button[b-hoeoxctu63] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.upload-button:hover:not(:disabled)[b-hoeoxctu63] {
    background-color: #3A3937;
}

.upload-button:active:not(:disabled)[b-hoeoxctu63] {
    background-color: #1A1917;
}

.upload-button:disabled[b-hoeoxctu63] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.upload-spinner[b-hoeoxctu63] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}


/* Responsive Design */
@media (max-width: 768px) and (min-width: 481px) {
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 350px;
        height: 350px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 110px;
        height: 110px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .new-upload-content[b-hoeoxctu63] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
        height: calc(100vh - 186px);
    }
    
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 300px;
        height: 300px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 100px;
        height: 100px;
    }
    
    .set-thumbnail-button-container[b-hoeoxctu63] {
        max-width: 300px;
    }
    
    .set-thumbnail-main-btn[b-hoeoxctu63] {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 140px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 28px;
        height: 28px;
    }
    
    .image-ribbon[b-hoeoxctu63] {
        gap: 8px;
    }
    
    .page-title[b-hoeoxctu63] {
        font-size: 18px;
    }
    
    .album-text[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .album-name-label[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .album-name-input[b-hoeoxctu63] {
        font-size: 15px;
        padding: 10px 14px;
    }
    
    .album-name-error[b-hoeoxctu63] {
        font-size: 13px;
    }
    
    .feature-text[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .feature-subtext[b-hoeoxctu63] {
        font-size: 13px;
    }
    
    .upload-button-container[b-hoeoxctu63] {
        padding: 0 20px;
    }
    
    .upload-button[b-hoeoxctu63] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    .thumbnail-checkmark[b-hoeoxctu63] {
        width: 24px;
        height: 24px;
    }
    
    .thumbnail-checkmark svg[b-hoeoxctu63] {
        width: 16px;
        height: 16px;
    }
    
}

@media (max-width: 360px) {
    .new-upload-content[b-hoeoxctu63] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
        height: calc(100vh - 186px);
    }
    
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 280px;
        height: 280px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 90px;
        height: 90px;
    }
    
    .set-thumbnail-button-container[b-hoeoxctu63] {
        max-width: 280px;
    }
    
    .set-thumbnail-main-btn[b-hoeoxctu63] {
        font-size: 13px;
        padding: 9px 18px;
        min-width: 120px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 26px;
        height: 26px;
    }
    
    .image-ribbon[b-hoeoxctu63] {
        gap: 6px;
    }
    
    .page-title[b-hoeoxctu63] {
        font-size: 16px;
    }
    
    .album-text[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .album-name-label[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .album-name-input[b-hoeoxctu63] {
        font-size: 14px;
        padding: 9px 12px;
    }
    
    .album-name-error[b-hoeoxctu63] {
        font-size: 12px;
    }
    
    .feature-text[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .feature-subtext[b-hoeoxctu63] {
        font-size: 12px;
    }
    
    .thumbnail-checkmark[b-hoeoxctu63] {
        width: 22px;
        height: 22px;
    }
    
    .thumbnail-checkmark svg[b-hoeoxctu63] {
        width: 14px;
        height: 14px;
    }
    
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .large-image[b-hoeoxctu63],
    .thumbnail-image[b-hoeoxctu63] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Upload Status Indicators */
.upload-status-indicator[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.upload-status-indicator.uploading[b-hoeoxctu63] {
    background: rgba(255, 255, 255, 0.95);
}

.upload-status-indicator.uploaded[b-hoeoxctu63] {
    background: rgba(76, 175, 80, 0.1);
}

.upload-status-indicator.failed[b-hoeoxctu63] {
    background: rgba(244, 67, 54, 0.1);
}

.upload-spinner-small[b-hoeoxctu63] {
    width: 16px;
    height: 16px;
    border: 2px solid #CEB185;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}

@keyframes spin-b-hoeoxctu63 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-hoeoxctu63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-hoeoxctu63] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-hoeoxctu63 0.3s ease-out;
}

@keyframes modalSlideIn-b-hoeoxctu63 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-hoeoxctu63] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-hoeoxctu63] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-hoeoxctu63] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-hoeoxctu63] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* Modal Styles - consistent with PortfolioFolder */
.modal-overlay[b-hoeoxctu63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-hoeoxctu63] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-hoeoxctu63 0.3s ease-out;
}

@keyframes modalSlideIn-b-hoeoxctu63 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-hoeoxctu63] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-hoeoxctu63] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-body[b-hoeoxctu63] {
    padding: 24px;
}

.modal-message[b-hoeoxctu63] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.modal-footer[b-hoeoxctu63] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-hoeoxctu63] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-hoeoxctu63] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-hoeoxctu63] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-hoeoxctu63] {
    transform: translateY(0);
}

/* Responsive modal styles */
@media (max-width: 480px) {
    .modal-container[b-hoeoxctu63] {
        max-width: 350px;
        margin: 0 10px;
    }
    
    .modal-header[b-hoeoxctu63] {
        padding: 20px 20px 0 20px;
    }
    
    .modal-title[b-hoeoxctu63] {
        font-size: 18px;
    }
    
    .modal-body[b-hoeoxctu63] {
        padding: 20px;
    }
    
    .modal-message[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .modal-footer[b-hoeoxctu63] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-btn[b-hoeoxctu63] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

/* Save Metadata Button */
.save-metadata-container[b-hoeoxctu63] {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.save-metadata-btn[b-hoeoxctu63] {
    background-color: #201F1D;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Montserrat', sans-serif;
}

.save-metadata-btn:hover:not(:disabled)[b-hoeoxctu63] {
    background-color: #3A3937;
}

.save-metadata-btn:disabled[b-hoeoxctu63] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 480px) {
    .save-metadata-btn[b-hoeoxctu63] {
        font-size: 15px;
        padding: 10px 28px;
    }
}

/* /Pages/EditPortfolioAdmin.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
}

/* Loading and Error States */
.loading-container[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2s0qnitpdz 1s linear infinite;
}

.loading-container p[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-2s0qnitpdz {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.portfolio-header[b-2s0qnitpdz] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

/* On screens smaller than 402px, ensure header fills full width */
@media (max-width: 401px) {
    .portfolio-header[b-2s0qnitpdz] {
        max-width: 100%;
    }
}

.header-back[b-2s0qnitpdz] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-2s0qnitpdz] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-2s0qnitpdz] {
    opacity: 0.7;
}

.back-button img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-2s0qnitpdz] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-2s0qnitpdz] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Portfolio Content */
.portfolio-content[b-2s0qnitpdz] {
    flex: 1;
    padding: 150px 25px 120px 25px; /* Top padding for fixed header, bottom padding for navigation bar and Safari URL bar */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.portfolio-content[b-2s0qnitpdz]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Create Album Container - Full Width */
.create-album-container[b-2s0qnitpdz] {
    position: relative;
    width: 100%;
    max-width: 352px;
    margin: 0 auto 20px auto;
    height: auto;
}

/* Create Album Panel */
.create-album-panel[b-2s0qnitpdz] {
    width: 100%;
    height: 151px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.create-album-panel:hover[b-2s0qnitpdz] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.create-album-panel:active[b-2s0qnitpdz] {
    transform: scale(0.98);
}

.album-icon[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.album-icon img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
}

.album-plus[b-2s0qnitpdz] {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 48px;
    left: calc(50% + 22px);
    transform: translateX(-50%);
    z-index: 2;
}

.album-plus img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
}

.album-title[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    z-index: 1;
}

/* Portfolio Grid - For Folder Thumbnails */
.portfolio-grid[b-2s0qnitpdz] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-2s0qnitpdz] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-2s0qnitpdz] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #FFFFFF;
}

.folder-thumbnail:hover[b-2s0qnitpdz] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-2s0qnitpdz] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.folder-placeholder[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-2s0qnitpdz] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-2s0qnitpdz] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Desktop spacing - add more space between header and portfolio grid */
@media (min-width: 769px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding-top: 150px; /* Increased from 100px for desktop */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .loading-container[b-2s0qnitpdz] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }
    
    .loading-spinner[b-2s0qnitpdz] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    
    .loading-container p[b-2s0qnitpdz] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding: 80px 15px 100px 15px;
    }
    
    .create-album-container[b-2s0qnitpdz] {
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .portfolio-grid[b-2s0qnitpdz] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }
    
    .folder-container[b-2s0qnitpdz] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    
    .folder-thumbnail[b-2s0qnitpdz] {
        width: 100%;
        height: 100%;
    }
    
    .create-album-panel[b-2s0qnitpdz] {
        height: 130px;
    }
    
    .album-title[b-2s0qnitpdz] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding: 150px 10px 100px 10px;
    }
    
    .portfolio-grid[b-2s0qnitpdz] {
        gap: 6px 6px;
        row-gap: 6px;
    }
    
    .album-icon[b-2s0qnitpdz] {
        width: 32px;
        height: 32px;
    }
    
    .album-plus[b-2s0qnitpdz] {
        width: 28px;
        height: 28px;
    }
    
    .album-title[b-2s0qnitpdz] {
        font-size: 14px;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .album-plus[b-2s0qnitpdz] {
        right: 20px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-2s0qnitpdz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-spinner[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2s0qnitpdz 1s linear infinite;
}

.upload-message[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
}

.upload-progress-bar-container[b-2s0qnitpdz] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-2s0qnitpdz] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-2s0qnitpdz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-2s0qnitpdz] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-2s0qnitpdz] {
    background-color: #4CAF50;
}

.message-icon.error[b-2s0qnitpdz] {
    background-color: #F44336;
}

.message-text[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-2s0qnitpdz] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-2s0qnitpdz] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-2s0qnitpdz] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-2s0qnitpdz],
    .message-modal[b-2s0qnitpdz] {
        padding: 20px;
        max-width: 280px;
    }
    
    .upload-message[b-2s0qnitpdz],
    .message-text[b-2s0qnitpdz] {
        font-size: 14px;
    }
    
    .message-icon[b-2s0qnitpdz] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Add Introduction Video Button */
.intro-video-button-container[b-2s0qnitpdz] {
    position: fixed;
    bottom: 110px; /* Increased margin above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding: 0 25px;
    z-index: 5;
}

.intro-video-button[b-2s0qnitpdz] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-video-button:hover[b-2s0qnitpdz] {
    background-color: #2a2825;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(32, 31, 29, 0.3);
}

.intro-video-button:active[b-2s0qnitpdz] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for the button */
@media (max-width: 480px) {
    .intro-video-button-container[b-2s0qnitpdz] {
        padding: 0 15px;
        bottom: 110px; /* Increased margin for mobile */
    }
    
    .intro-video-button[b-2s0qnitpdz] {
        font-size: 14px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .intro-video-button-container[b-2s0qnitpdz] {
        padding: 0 10px;
        bottom: 85px; /* Increased margin for small screens */
    }
    
    .intro-video-button[b-2s0qnitpdz] {
        font-size: 13px;
        height: 38px;
    }
}

/* /Pages/EditPortfolioFolderAdmin.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
}

/* Loading and Error States */
.loading-container[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-b0kq6a5ilj] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-b0kq6a5ilj 1s linear infinite;
}

.loading-container p[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-b0kq6a5ilj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.portfolio-header[b-b0kq6a5ilj] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

/* On screens smaller than 402px, ensure header fills full width */
@media (max-width: 401px) {
    .portfolio-header[b-b0kq6a5ilj] {
        max-width: 100%;
    }
}

.header-actions[b-b0kq6a5ilj] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.add-media-button[b-b0kq6a5ilj] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.add-media-button:hover[b-b0kq6a5ilj] {
    opacity: 0.7;
}

.add-media-button img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-back[b-b0kq6a5ilj] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-b0kq6a5ilj] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-b0kq6a5ilj] {
    opacity: 0.7;
}

.back-button img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-logo[b-b0kq6a5ilj] {
    position: absolute;
    left: 50%;
    top: calc(58px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    height: 29px;
    width: 175px;
}

.header-logo img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-b0kq6a5ilj] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-notifications img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-b0kq6a5ilj] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-b0kq6a5ilj] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
}

/* Selection Mode Buttons - removed old header button styles */

/* Selection Button Container - matches JobApplied button styling */
.selection-button-container[b-b0kq6a5ilj] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999; /* Behind portfolio overlay but above regular content */
}

.selection-action-button[b-b0kq6a5ilj] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.selection-action-button:hover[b-b0kq6a5ilj] {
    background-color: #3A3937;
}

.selection-action-button:active[b-b0kq6a5ilj] {
    background-color: #1A1917;
}

.delete-folder-button[b-b0kq6a5ilj] {
    background-color: #DC3545;
}

.delete-folder-button:hover[b-b0kq6a5ilj] {
    background-color: #C82333;
}

.delete-folder-button:active[b-b0kq6a5ilj] {
    background-color: #BD2130;
}

/* Selection buttons group - for when multiple buttons are shown */
.selection-buttons-group[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.selection-buttons-group .selection-action-button[b-b0kq6a5ilj] {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.set-thumbnail-button[b-b0kq6a5ilj] {
    background-color: #A6895A;
}

.set-thumbnail-button:hover[b-b0kq6a5ilj] {
    background-color: #CEB185;
}

.set-thumbnail-button:active[b-b0kq6a5ilj] {
    background-color: #B89A6F;
}

.cancel-button[b-b0kq6a5ilj] {
    background-color: #484F54;
}

.cancel-button:hover[b-b0kq6a5ilj] {
    background-color: #6C757D;
}

.cancel-button:active[b-b0kq6a5ilj] {
    background-color: #5A6268;
}

/* Note: Delete folder button is conditionally hidden for protected folders 
   ('Portfolio' and 'Profile') via Razor logic in the component */

/* Portfolio Content */
.portfolio-content[b-b0kq6a5ilj] {
    flex: 1;
    padding: 27px 25px 180px 25px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

/* Extra padding when selection buttons are visible */
.portfolio-content.has-selection-buttons[b-b0kq6a5ilj] {
    padding-bottom: 240px; /* Extra padding for button group (2 buttons + gap) */
}

.portfolio-content[b-b0kq6a5ilj]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Portfolio Grid */
.portfolio-grid[b-b0kq6a5ilj] {
    display: grid;
    grid-template-columns: 196px 196px;
    gap: 10px 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Add Image Container */
.add-image-container[b-b0kq6a5ilj] {
    position: relative;
    width: 196px;
    height: auto;
    margin-bottom: 0;
}

/* Add Image Panel */
.add-image-panel[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
}

.add-image-panel:hover[b-b0kq6a5ilj] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.add-image-panel:active[b-b0kq6a5ilj] {
    transform: scale(0.98);
}

.add-image-icon[b-b0kq6a5ilj] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.add-image-icon img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
}

.add-image-plus[b-b0kq6a5ilj] {
    width: 36px;
    height: 36px;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

.add-image-plus img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
}

.add-image-title[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: left;
    line-height: 1.5;
    margin: 0;
    width: 163px;
    position: absolute;
    bottom: -35px;
    left: 0;
    padding-top: 10px;
    z-index: 1;
}

/* Portfolio Image Container */
.portfolio-image-container[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0; /* Light background to see the container */
}

.portfolio-image-container.selected[b-b0kq6a5ilj] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.portfolio-image-container:hover[b-b0kq6a5ilj] {
    transform: scale(1.02);
}

.portfolio-image-container.selected:hover[b-b0kq6a5ilj] {
    transform: scale(1.0);
}

/* Portfolio Images */
.portfolio-image[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    display: block;
    z-index: 1;
    position: relative;
    background-color: #FFFFFF;
}

/* When image is loaded, remove background */
.portfolio-image-container:has(.portfolio-image)[b-b0kq6a5ilj] {
    background-color: transparent;
}

/* Image Placeholder */
.image-placeholder[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.image-loading[b-b0kq6a5ilj] {
    font-size: 13px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Image Overlay */
.image-overlay[b-b0kq6a5ilj] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    pointer-events: auto;
    z-index: 10;
}

.delete-image-btn[b-b0kq6a5ilj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 20;
    position: relative;
}

.delete-image-btn:hover[b-b0kq6a5ilj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-b0kq6a5ilj] {
    transform: scale(0.95);
}

.delete-image-btn svg[b-b0kq6a5ilj] {
    width: 14px;
    height: 14px;
}

/* Selection Indicators */
.selection-indicator[b-b0kq6a5ilj] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-b0kq6a5ilj] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-b0kq6a5ilj] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Upload Overlay */
.upload-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Delete Confirmation Modal */
.modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-b0kq6a5ilj] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-b0kq6a5ilj 0.3s ease-out;
}

@keyframes modalSlideIn-b-b0kq6a5ilj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-b0kq6a5ilj] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-b0kq6a5ilj] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-body[b-b0kq6a5ilj] {
    padding: 24px;
}

.modal-message[b-b0kq6a5ilj] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-b0kq6a5ilj] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-b0kq6a5ilj] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-b0kq6a5ilj] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-b0kq6a5ilj] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-b0kq6a5ilj] {
    transform: translateY(0);
}

.modal-btn-delete[b-b0kq6a5ilj] {
    background: #DC3545;
    color: #FFFFFF;
}

.modal-btn-delete:hover[b-b0kq6a5ilj] {
    background: #C82333;
    transform: translateY(-1px);
}

.modal-btn-delete:active[b-b0kq6a5ilj] {
    transform: translateY(0);
}

.upload-progress[b-b0kq6a5ilj] {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.upload-spinner[b-b0kq6a5ilj] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-b0kq6a5ilj 1s linear infinite;
    margin-bottom: 15px;
}

.upload-progress p[b-b0kq6a5ilj] {
    margin: 0;
    font-size: 16px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 480px) {
    .portfolio-content[b-b0kq6a5ilj] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
    }
    
    .portfolio-content.has-selection-buttons[b-b0kq6a5ilj] {
        padding-bottom: 220px; /* Extra padding for button group on mobile */
    }
    
    .portfolio-grid[b-b0kq6a5ilj] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
    }
    
    .add-image-container[b-b0kq6a5ilj],
    .portfolio-image-container[b-b0kq6a5ilj] {
        width: 100%;
    }
    
    .add-image-panel[b-b0kq6a5ilj] {
        width: 100%;
        height: 181px;
    }
    
    .portfolio-image-container[b-b0kq6a5ilj] {
        height: 181px;
    }
    
    .add-image-title[b-b0kq6a5ilj],
    .folder-title[b-b0kq6a5ilj] {
        font-size: 16px;
    }
    
    /* Make delete button more touch-friendly on mobile */
    .delete-image-btn[b-b0kq6a5ilj] {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
    }
    
    .delete-image-btn svg[b-b0kq6a5ilj] {
        width: 16px;
        height: 16px;
    }
    
    /* Modal responsive styles */
    .modal-container[b-b0kq6a5ilj] {
        max-width: 350px;
        margin: 0 10px;
    }
    
    .modal-header[b-b0kq6a5ilj] {
        padding: 20px 20px 0 20px;
    }
    
    .modal-title[b-b0kq6a5ilj] {
        font-size: 18px;
    }
    
    .modal-body[b-b0kq6a5ilj] {
        padding: 20px;
    }
    
    .modal-message[b-b0kq6a5ilj] {
        font-size: 15px;
    }
    
    .modal-footer[b-b0kq6a5ilj] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-btn[b-b0kq6a5ilj] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    /* Selection mode mobile styles - header actions removed */
    
    .selection-circle[b-b0kq6a5ilj],
    .selection-check[b-b0kq6a5ilj] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    
    .selection-indicator[b-b0kq6a5ilj] {
        top: 6px;
        left: 6px;
    }
    
    /* Selection button container mobile styles */
    .selection-button-container[b-b0kq6a5ilj] {
        padding: 0 20px;
    }
    
    .selection-action-button[b-b0kq6a5ilj] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-b0kq6a5ilj] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
    }
    
    .portfolio-grid[b-b0kq6a5ilj] {
        gap: 6px 6px;
        row-gap: 50px;
    }
    
    .add-image-icon[b-b0kq6a5ilj] {
        width: 32px;
        height: 32px;
    }

    .add-image-plus[b-b0kq6a5ilj] {
        width: 28px;
        height: 28px;
    }

    .add-image-title[b-b0kq6a5ilj],
    .folder-title[b-b0kq6a5ilj] {
        font-size: 14px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .portfolio-image[b-b0kq6a5ilj] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .add-image-plus[b-b0kq6a5ilj] {
        right: 55px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-progress-bar-container[b-b0kq6a5ilj] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-b0kq6a5ilj] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-b0kq6a5ilj] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-b0kq6a5ilj] {
    background-color: #4CAF50;
}

.message-icon.error[b-b0kq6a5ilj] {
    background-color: #F44336;
}

.message-text[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-b0kq6a5ilj] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-b0kq6a5ilj] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-b0kq6a5ilj] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-b0kq6a5ilj],
    .message-modal[b-b0kq6a5ilj] {
        padding: 20px;
        max-width: 280px;
    }
    
    .upload-message[b-b0kq6a5ilj],
    .message-text[b-b0kq6a5ilj] {
        font-size: 14px;
    }
    
    .message-icon[b-b0kq6a5ilj] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-b0kq6a5ilj] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-b0kq6a5ilj 0.3s ease-out;
}

@keyframes modalSlideIn-b-b0kq6a5ilj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-b0kq6a5ilj] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-b0kq6a5ilj] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-b0kq6a5ilj] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-b0kq6a5ilj] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* /Pages/EditProfile.razor.rz.scp.css */
/* EditProfile Component Styles */

/* Reset and base styles for this component */
.edit-profile-container[b-59l8m0yvqv] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.edit-profile-container[b-59l8m0yvqv]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

.edit-profile-header[b-59l8m0yvqv] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.back-button[b-59l8m0yvqv] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.back-button img[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
}

.profile-image-edit-section[b-59l8m0yvqv] {
    position: relative;
    padding: 20px 0;
    text-align: center;
}

.profile-image-edit-container[b-59l8m0yvqv] {
    position: relative;
    width: 164px;
    height: 164px;
    margin: 0 auto;
}

.profile-image-edit-mask[b-59l8m0yvqv] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%; /* Make the container circular */
}

.profile-image-edit[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%; /* Make the image circular */
}

.edit-photo-text[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin-top: 10px;
    padding-left: 20px;
}

.edit-form[b-59l8m0yvqv] {
    padding: 0 26px;
    padding-bottom: 156px;
}

.form-field[b-59l8m0yvqv] {
    margin-bottom: 14px;
}

.field-label[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-59l8m0yvqv] {
    color: #CEB185;
}

.input-container[b-59l8m0yvqv] {
    position: relative;
    width: 350px;
    height: 44px;
}

.form-input[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    /* Hide the native dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input:focus[b-59l8m0yvqv] {
    border-color: #CEB185;
}

.dropdown-arrow[b-59l8m0yvqv] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.dropdown-arrow img[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.textarea-container[b-59l8m0yvqv] {
    width: 350px;
    height: 206px;
}

.form-textarea[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    resize: none;
}

.form-textarea:focus[b-59l8m0yvqv] {
    border-color: #CEB185;
}

.add-language-link[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin-bottom: 32px;
    cursor: pointer;
}

.edit-profile-word-limit[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin-top: 8px;
    margin-bottom: 20px;
}

.edit-profile-save-button-container[b-59l8m0yvqv] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    padding: 20px;
    z-index: 20;
    border: none;
    border-top: none;
}

.edit-profile-save-button[b-59l8m0yvqv] {
    width: 290px;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

.edit-profile-save-button:hover:not(:disabled)[b-59l8m0yvqv] {
    background-color: #333;
}

.edit-profile-save-button:disabled[b-59l8m0yvqv] {
    background-color: #CCCCCC;
    color: #666666;
    cursor: not-allowed;
}

/* Loading and Error States */
.loading-container[b-59l8m0yvqv] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
}

.loading-spinner[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #201F1D;
    text-align: center;
}

.error-container[b-59l8m0yvqv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
    padding: 20px;
}

.error-message[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #201F1D;
    text-align: center;
    margin-bottom: 20px;
}

.retry-button[b-59l8m0yvqv] {
    width: 120px;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
}

.retry-button:hover[b-59l8m0yvqv] {
    background-color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .edit-profile-container[b-59l8m0yvqv] {
        max-width: 100%;
    }

    .input-container[b-59l8m0yvqv] {
        width: 100%;
        max-width: 350px;
    }

    .textarea-container[b-59l8m0yvqv] {
        width: 100%;
        max-width: 350px;
    }

    .edit-profile-save-button[b-59l8m0yvqv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 480px) {
    .edit-form[b-59l8m0yvqv] {
        padding: 0 20px;
        padding-bottom: 80px;
    }

    .input-container[b-59l8m0yvqv] {
        width: 100%;
    }

    .textarea-container[b-59l8m0yvqv] {
        width: 100%;
    }

    .edit-profile-word-limit[b-59l8m0yvqv] {
        margin-bottom: 30px;
    }

    .edit-profile-save-button-container[b-59l8m0yvqv] {
        padding: 16px;
    }

    .edit-profile-save-button[b-59l8m0yvqv] {
        width: 100%;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-59l8m0yvqv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-59l8m0yvqv] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-59l8m0yvqv 0.3s ease-out;
}

@keyframes modalSlideIn-b-59l8m0yvqv {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-59l8m0yvqv] {
        padding: 10px;
    }

    .cropper-modal-container[b-59l8m0yvqv] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-59l8m0yvqv] {
        padding: 5px;
    }

    .cropper-modal-container[b-59l8m0yvqv] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/EditUserDetails.razor.rz.scp.css */
.edit-user-details-screen[b-d1gnxbx4x5] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

/* Header Styles */
.header-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.header-content[b-d1gnxbx4x5] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button[b-d1gnxbx4x5] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-d1gnxbx4x5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-title[b-d1gnxbx4x5] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* Loading Styles */
.loading-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loading-spinner[b-d1gnxbx4x5] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #201f1d;
    border-radius: 50%;
    animation: spin-b-d1gnxbx4x5 1s linear infinite;
    margin: 0 auto 16px auto;
}

@keyframes spin-b-d1gnxbx4x5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form Styles */
.form-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 106px;
    left: 0;
    right: 0;
    padding: 21px 26px 0 26px;
}

.form-group[b-d1gnxbx4x5] {
    margin-bottom: 32px;
}

.form-label[b-d1gnxbx4x5] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    margin-bottom: 12px;
}

.form-input[b-d1gnxbx4x5] {
    width: 100%;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    padding: 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-d1gnxbx4x5] {
    border-color: #201f1d;
}

.form-input.error[b-d1gnxbx4x5] {
    border-color: #dc3545;
}

.form-input[b-d1gnxbx4x5]::placeholder {
    color: #999999;
}

/* Error and Success Messages */
.error-message[b-d1gnxbx4x5],
.success-message[b-d1gnxbx4x5] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.error-message[b-d1gnxbx4x5] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success-message[b-d1gnxbx4x5] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-text[b-d1gnxbx4x5] {
    display: block;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #dc3545;
}

/* Save Button Styles */
.save-button-container[b-d1gnxbx4x5] {
    position: absolute;
    bottom: 56px;
    left: 56px;
    right: 56px;
}

.save-button[b-d1gnxbx4x5] {
    width: 100%;
    height: 44px;
    background-color: #201f1d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.save-button.disabled[b-d1gnxbx4x5] {
    cursor: not-allowed;
    opacity: 0.7;
}

.button-text[b-d1gnxbx4x5] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .form-container[b-d1gnxbx4x5] {
        padding: 21px 16px 0 16px;
    }

    .save-button-container[b-d1gnxbx4x5] {
        left: 16px;
        right: 16px;
        bottom: 32px;
    }

    .page-title[b-d1gnxbx4x5] {
        font-size: 20px;
    }
}

/* Focus and Hover States */
.save-button:hover:not(.disabled)[b-d1gnxbx4x5] {
    background-color: #2d2b29;
}

.back-button:hover[b-d1gnxbx4x5] {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.back-button:active[b-d1gnxbx4x5] {
    background-color: rgba(0, 0, 0, 0.1);
}
/* /Pages/Events.razor.rz.scp.css */
/* Coming Soon Container */
.coming-soon-container[b-im1a28pww5] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.coming-soon-header[b-im1a28pww5] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-logo[b-im1a28pww5] {
    position: absolute;
    left: 20px;
    top: 58px;
    height: 29px;
    width: 175px;
}

.header-logo img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-im1a28pww5] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-notifications img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.coming-soon-content[b-im1a28pww5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 120px 20px; /* Bottom padding for navigation bar and Safari URL bar */
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.coming-soon-icon[b-im1a28pww5] {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-radius: 50%;
    padding: 20px;
}

.coming-soon-icon img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.coming-soon-title[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.coming-soon-description[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 40px 0;
    line-height: 1.5;
    max-width: 300px;
}

.coming-soon-features[b-im1a28pww5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    max-width: 320px;
    width: 100%;
}

.feature-item[b-im1a28pww5] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 12px;
    text-align: left;
}

.feature-icon[b-im1a28pww5] {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 8px;
    flex-shrink: 0;
}

.feature-text[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    line-height: 1.4;
}

.coming-soon-cta[b-im1a28pww5] {
    background-color: #CEB185;
    padding: 20px;
    border-radius: 12px;
    max-width: 320px;
    width: 100%;
}

.coming-soon-cta p[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}


/* Responsive Design */
@media (max-width: 480px) {
    .coming-soon-content[b-im1a28pww5] {
        padding: 30px 15px 120px 15px;
    }

    .coming-soon-title[b-im1a28pww5] {
        font-size: 24px;
    }

    .coming-soon-description[b-im1a28pww5] {
        font-size: 14px;
        max-width: 280px;
    }

    .coming-soon-features[b-im1a28pww5] {
        max-width: 280px;
        gap: 15px;
    }

    .feature-item[b-im1a28pww5] {
        padding: 12px;
    }

    .feature-icon[b-im1a28pww5] {
        font-size: 20px;
        width: 36px;
        height: 36px;
    }

    .feature-text[b-im1a28pww5] {
        font-size: 13px;
    }

    .coming-soon-cta[b-im1a28pww5] {
        max-width: 280px;
        padding: 16px;
    }

    .coming-soon-cta p[b-im1a28pww5] {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .coming-soon-content[b-im1a28pww5] {
        padding: 25px 10px 120px 10px;
    }

    .coming-soon-icon[b-im1a28pww5] {
        width: 70px;
        height: 70px;
        margin-bottom: 25px;
        padding: 15px;
    }

    .coming-soon-title[b-im1a28pww5] {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .coming-soon-description[b-im1a28pww5] {
        font-size: 13px;
        max-width: 260px;
        margin-bottom: 30px;
    }

    .coming-soon-features[b-im1a28pww5] {
        max-width: 260px;
        gap: 12px;
        margin-bottom: 30px;
    }

    .feature-item[b-im1a28pww5] {
        padding: 10px;
    }

    .feature-icon[b-im1a28pww5] {
        font-size: 18px;
        width: 32px;
        height: 32px;
    }

    .feature-text[b-im1a28pww5] {
        font-size: 12px;
    }

    .coming-soon-cta[b-im1a28pww5] {
        max-width: 260px;
        padding: 14px;
    }

    .coming-soon-cta p[b-im1a28pww5] {
        font-size: 12px;
    }
}
/* /Pages/EventsClientView.razor.rz.scp.css */
/* EventsClientView.razor.css */

.events-client-container[b-l2gsd9754y] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.search-header[b-l2gsd9754y] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-logo[b-l2gsd9754y] {
    position: absolute;
    left: 20px;
    top: 63px;
    height: 23px;
    width: 145px;
}

.header-logo img[b-l2gsd9754y] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-l2gsd9754y] {
    position: absolute;
    right: 20px;
    top: 56px;
    width: 40px;
    height: 40px;
}

.notification-icon[b-l2gsd9754y] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-l2gsd9754y] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.notification-badge[b-l2gsd9754y] {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: #CEB185;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge span[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1;
}

/* Search Bar Styles */
.search-bar-container[b-l2gsd9754y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-l2gsd9754y] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-l2gsd9754y] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-l2gsd9754y] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-l2gsd9754y] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-l2gsd9754y]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-l2gsd9754y] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-l2gsd9754y] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-l2gsd9754y] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-l2gsd9754y] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Navigation Tabs */
.nav-tabs[b-l2gsd9754y] {
    display: flex;
    position: relative;
    margin: 20px 0 0 0;
    padding: 0 25px;
    justify-content: center;
}

.tab[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    padding: 0 20px;
    position: relative;
}

.explore-tab[b-l2gsd9754y] {
    color: #201F1D;
}

.explore-tab.active[b-l2gsd9754y] {
    color: #CEB185;
}

.my-events-tab[b-l2gsd9754y] {
    color: #201F1D;
    margin-left: 20px;
}

.my-events-tab.active[b-l2gsd9754y] {
    color: #CEB185;
}

.tab-indicator[b-l2gsd9754y] {
    position: absolute;
    bottom: -2px;
    width: 176px;
    height: 2px;
    background-color: #CEB185;
    transition: left 0.3s ease;
}

.tab-indicator.explore-active[b-l2gsd9754y] {
    left: 25px;
}

.tab-indicator.my-events-active[b-l2gsd9754y] {
    left: 201px;
}

/* Filter Buttons */
.filter-buttons[b-l2gsd9754y] {
    display: flex;
    gap: 7px;
    padding: 7px 25px 0 25px;
    margin-top: 7px;
    justify-content: center;
}

.filter-btn[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn.active[b-l2gsd9754y] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-l2gsd9754y] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(2)[b-l2gsd9754y] {
    width: 96px;
}

.filter-btn:nth-child(3)[b-l2gsd9754y] {
    width: 142px;
}

/* Content Area */
.content-area[b-l2gsd9754y] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-l2gsd9754y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-l2gsd9754y] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-l2gsd9754y] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-card.cancelled[b-l2gsd9754y] {
    opacity: 0.7;
    background-color: #FAF8F5;
}

.event-name-row[b-l2gsd9754y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-status-pill[b-l2gsd9754y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.event-status-pill.cancelled[b-l2gsd9754y] {
    background-color: #fdecea;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.event-image[b-l2gsd9754y] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-l2gsd9754y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-l2gsd9754y] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}

/* Loading State */
.loading-state[b-l2gsd9754y] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.loading-state p[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.empty-state[b-l2gsd9754y] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Create Event Button */
.create-event-section[b-l2gsd9754y] {
    padding: 0 56px 20px 56px;
    margin-bottom: 80px; /* Space for bottom navigation */
    display: flex;
    justify-content: center;
}

.create-event-btn[b-l2gsd9754y] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.create-event-btn:hover[b-l2gsd9754y] {
    background-color: #3a3a3a;
}

.create-event-btn:active[b-l2gsd9754y] {
    background-color: #1a1a1a;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .events-client-container[b-l2gsd9754y] {
        max-width: 100%;
    }

    .search-bar-container[b-l2gsd9754y] {
        padding: 10px 20px;
    }

    .filter-buttons[b-l2gsd9754y] {
        flex-wrap: wrap;
    }

    .create-event-section[b-l2gsd9754y] {
        padding: 0 20px 20px 20px;
    }

    .create-event-btn[b-l2gsd9754y] {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .search-header[b-l2gsd9754y] {
        padding: 0 15px;
    }

    .header-logo[b-l2gsd9754y] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-l2gsd9754y] {
        right: 15px;
    }

    .search-bar-container[b-l2gsd9754y] {
        padding: 10px 15px;
    }
}

/* /Pages/EventsStaffView.razor.rz.scp.css */
/* EventsStaffView.razor.css */

.events-staff-container[b-hzpcuxogwc] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    padding-top: calc(60px + env(safe-area-inset-top, 0)); /* Space for fixed header (60px + safe area) */
}


/* Search Bar Styles */
.search-bar-container[b-hzpcuxogwc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: 0;
}

.search-input-container[b-hzpcuxogwc] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-hzpcuxogwc] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-hzpcuxogwc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-hzpcuxogwc] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-hzpcuxogwc]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-hzpcuxogwc] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-hzpcuxogwc] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-hzpcuxogwc] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-hzpcuxogwc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Content Area */
.content-area[b-hzpcuxogwc] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-hzpcuxogwc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-hzpcuxogwc] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-hzpcuxogwc] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-image[b-hzpcuxogwc] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-hzpcuxogwc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-hzpcuxogwc] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}

/* Loading State */
.loading-container[b-hzpcuxogwc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-hzpcuxogwc] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-hzpcuxogwc 1s linear infinite;
}

@keyframes spin-b-hzpcuxogwc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.empty-state[b-hzpcuxogwc] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-hzpcuxogwc] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-hzpcuxogwc] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-hzpcuxogwc] {
        font-size: 14px;
    }
}

@media (max-width: 402px) {
    .events-staff-container[b-hzpcuxogwc] {
        max-width: 100%;
    }

    .search-bar-container[b-hzpcuxogwc] {
        padding: 10px 20px;
    }

    .content-area[b-hzpcuxogwc] {
        padding: 20px;
    }
}

@media (max-width: 360px) {
    .search-bar-container[b-hzpcuxogwc] {
        padding: 10px 15px;
    }
}

/* /Pages/Home.razor.rz.scp.css */
.welcome-screen[b-u960suc0wm] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/mgmt-management-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.background-mask[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-image[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/background-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1px);
    opacity: 0.7;
}

.background-overlay[b-u960suc0wm] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.mgmt-management-image[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/mgmt-management-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1px);
    pointer-events: none;
    z-index: 3;
}

.logo-container[b-u960suc0wm] {
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 220px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.logo-container img[b-u960suc0wm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.buttons-container[b-u960suc0wm] {
    position: absolute;
    left: 50%;
    top: 650px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

.client-button[b-u960suc0wm] {
    width: 290px;
    height: 44px;
    background: #201f1d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.client-button:hover[b-u960suc0wm] {
    background: #2a2825;
    transform: translateY(-1px);
}

.client-button-text[b-u960suc0wm] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    text-align: center;
}

.staff-button[b-u960suc0wm] {
    width: 290px;
    height: 44px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.staff-button:hover[b-u960suc0wm] {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.staff-button-text[b-u960suc0wm] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buttons-container[b-u960suc0wm] {
        left: 50%;
        top: 60%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 290px;
    }
    
    .client-button[b-u960suc0wm],
    .staff-button[b-u960suc0wm] {
        width: 100%;
    }
    
    .logo-container[b-u960suc0wm] {
        top: 200px;
        width: 180px;
        height: 170px;
    }
}

@media (max-width: 480px) {
    .logo-container[b-u960suc0wm] {
        width: 150px;
        height: 140px;
    }
    
    .buttons-container[b-u960suc0wm] {
        gap: 12px;
    }
    
    .client-button[b-u960suc0wm],
    .staff-button[b-u960suc0wm] {
        height: 40px;
    }
    
    .client-button-text[b-u960suc0wm],
    .staff-button-text[b-u960suc0wm] {
        font-size: 14px;
    }
}

/* /Pages/JobApplied.razor.rz.scp.css */
.job-applied-container[b-j1fm63rgbk] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}


.job-applied-content[b-j1fm63rgbk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 186px); /* Account for header and bottom nav */
    padding: 20px;
}

.message-container[b-j1fm63rgbk] {
    text-align: center;
    max-width: 272px;
}

.application-message[b-j1fm63rgbk] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.done-button-container[b-j1fm63rgbk] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
}

.done-button[b-j1fm63rgbk] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: block;
    transition: background-color 0.2s ease;
}

.done-button:hover[b-j1fm63rgbk] {
    background-color: #3A3937;
}

.done-button:active[b-j1fm63rgbk] {
    background-color: #1A1917;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .job-applied-container[b-j1fm63rgbk] {
        max-width: 100%;
    }

    .done-button-container[b-j1fm63rgbk] {
        padding: 0 20px;
    }

}

/* /Pages/JoinEvent.razor.rz.scp.css */
/* Join Event Container */
.join-event-container[b-xiypt1gxdp] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.join-event-container[b-xiypt1gxdp]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.join-event-header[b-xiypt1gxdp] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.header-back-button[b-xiypt1gxdp] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.header-back-button:hover[b-xiypt1gxdp] {
    background-color: rgba(0, 0, 0, 0.05);
}

.header-back-button img[b-xiypt1gxdp] {
    width: 24px;
    height: 24px;
}

.header-title[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Content */
.join-event-content[b-xiypt1gxdp] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Info Section */
.event-info-section[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 25px 30px 25px;
    border: 1px solid #E9ECEF;
}

.event-name[b-xiypt1gxdp] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.event-venue[b-xiypt1gxdp] {
    font-size: 16px;
    color: #6C757D;
    margin: 0 0 4px 0;
}

.event-date[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

/* Job Accordion */
.job-accordion[b-xiypt1gxdp] {
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E9ECEF;
    margin: 0 25px 24px 25px;
    overflow: hidden;
}

.accordion-header[b-xiypt1gxdp] {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.header-text h3[b-xiypt1gxdp] {
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.header-text p[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

.arrow[b-xiypt1gxdp] {
    transition: transform 0.3s ease;
}

.arrow.expanded[b-xiypt1gxdp] {
    transform: rotate(180deg);
}

.arrow img[b-xiypt1gxdp] {
    width: 24px;
    height: 24px;
}

.accordion-content[b-xiypt1gxdp] {
    padding: 20px;
}

/* Form Styles */
.form-group[b-xiypt1gxdp] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-xiypt1gxdp] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-xiypt1gxdp] {
    color: #CEB185;
}

.form-input-container[b-xiypt1gxdp] {
    position: relative;
    width: 100%;
}

.form-input[b-xiypt1gxdp] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-xiypt1gxdp] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-xiypt1gxdp]::placeholder {
    color: #E8E5E0;
}

select.form-input[b-xiypt1gxdp] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input.readonly[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    color: #6C757D;
    cursor: not-allowed;
}

.form-textarea[b-xiypt1gxdp] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
    display: block !important;
    visibility: visible !important;
}

.form-textarea:focus[b-xiypt1gxdp] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-xiypt1gxdp]::placeholder {
    color: #E8E5E0;
}

.form-textarea.readonly[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    color: #6C757D;
    cursor: not-allowed;
}

.dropdown-icon[b-xiypt1gxdp] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-xiypt1gxdp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.word-limit[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Language Tags */
.selected-languages[b-xiypt1gxdp] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-xiypt1gxdp] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag.readonly[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
}

.language-tag-remove[b-xiypt1gxdp] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-xiypt1gxdp] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Add Job Section */
.add-job-section[b-xiypt1gxdp] {
    margin-top: 24px;
    text-align: center;
}

.add-job-button[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-job-button:hover:not(.disabled)[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

.add-job-button.disabled[b-xiypt1gxdp] {
    background-color: #6C757D;
    cursor: not-allowed;
}

/* Added Jobs Section */
.added-jobs-section[b-xiypt1gxdp] {
    margin: 0 25px 24px 25px;
}

.jobs-section-title[b-xiypt1gxdp] {
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 16px;
}

.job-accordion-item[b-xiypt1gxdp] {
    background-color: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.job-accordion-header[b-xiypt1gxdp] {
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.job-header-content[b-xiypt1gxdp] {
    flex: 1;
}

.job-title[b-xiypt1gxdp] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.job-subtitle[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

.job-accordion-actions[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.remove-job-button[b-xiypt1gxdp] {
    background: none;
    border: none;
    color: #DC3545;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.remove-job-button:hover[b-xiypt1gxdp] {
    background-color: #F8D7DA;
}

.accordion-arrow[b-xiypt1gxdp] {
    transition: transform 0.3s ease;
}

.accordion-arrow.expanded[b-xiypt1gxdp] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-xiypt1gxdp] {
    width: 20px;
    height: 20px;
}

.job-accordion-content[b-xiypt1gxdp] {
    padding: 16px;
}

/* Submit Section */
.submit-section[b-xiypt1gxdp] {
    margin: 0 25px 24px 25px;
    text-align: center;
}

.submit-button[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
    position: fixed;
    bottom: 120px; /* Position just above the bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.submit-button:hover:not(.disabled)[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

.submit-button:active[b-xiypt1gxdp] {
    background-color: #A68B5B;
}

.submit-button.disabled[b-xiypt1gxdp] {
    background-color: #6C757D;
    cursor: not-allowed;
}

.button-text[b-xiypt1gxdp] {
    display: block;
}

/* Messages */
.error-message[b-xiypt1gxdp] {
    color: #DC3545;
    font-size: 14px;
    text-align: center;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 4px;
    max-width: 280px;
}

.success-message[b-xiypt1gxdp] {
    color: #28A745;
    font-size: 14px;
    text-align: center;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 4px;
    max-width: 280px;
}

/* Loading and Error States */
.loading-state[b-xiypt1gxdp] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.error-state[b-xiypt1gxdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

/* Responsive Design */
@media (max-width: 480px) {
    .join-event-content[b-xiypt1gxdp] {
        padding: 0 0 200px 0; /* Extra padding for small screens */
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .join-event-content[b-xiypt1gxdp] {
        padding: 0 0 220px 0; /* Even more padding for very small screens */
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-xiypt1gxdp] {
    flex: 1;
}

.working-hours-row input[type="time"][b-xiypt1gxdp] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-xiypt1gxdp] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/LoadingScreen.razor.rz.scp.css */
.loading-screen[b-zxkk1zzflq] {
    background-color: var(--color-white);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container[b-zxkk1zzflq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo[b-zxkk1zzflq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: none;
}
/* /Pages/Login.razor.rz.scp.css */
/* Login Page Styles - Matching Figma Design */

.login-screen[b-xzjqvs3b93] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    font-family: 'Montserrat', sans-serif;
}

/* Header Section */
.header[b-xzjqvs3b93] {
    background-color: #FFFFFF;
    height: 70px;
    width: 100%;
    padding: 0 21px;
    position: relative;
    border-bottom: none !important;
    flex-shrink: 0;
}

.back-button[b-xzjqvs3b93] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
}

.back-button:hover[b-xzjqvs3b93] {
    opacity: 0.7;
}

.back-button img[b-xzjqvs3b93] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-title[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 163px;
}

/* Form Container */
.form-container[b-xzjqvs3b93] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0px;
}

/* Form Groups */
.form-group[b-xzjqvs3b93] {
    margin-bottom: 24px;
}

.form-label[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    display: block;
    margin-bottom: 0px;
}

/* Form Inputs */
.form-input[b-xzjqvs3b93] {
    width: 100%;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-xzjqvs3b93] {
    border-color: #CEB185;
}

.form-input[b-xzjqvs3b93]::placeholder {
    color: #999999;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

/* Password Input Container */
.password-input-container[b-xzjqvs3b93] {
    position: relative;
    width: 100%;
}

.visibility-toggle[b-xzjqvs3b93] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visibility-toggle img[b-xzjqvs3b93] {
    width: 20px;
    height: 15px;
    object-fit: contain;
}

/* Forgot Password Link */
.forgot-password-link[b-xzjqvs3b93] {
    margin-top: 4px;
    width: 100%;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

.forgot-password-link .link[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.forgot-password-link .link:hover[b-xzjqvs3b93] {
    text-decoration: underline;
}

/* Create Account Section */
.create-account-section[b-xzjqvs3b93] {
    margin-top: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.create-account-message[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #201F1D;
}

.create-account-section .create-account-button[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #CEB185;
    cursor: pointer;
}

.create-account-section .create-account-button:hover[b-xzjqvs3b93] {
    text-decoration: underline;
}

/* Login Button */
.login-button[b-xzjqvs3b93] {
    background-color: #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.login-button:hover[b-xzjqvs3b93] {
    opacity: 0.9;
}

.login-button:active[b-xzjqvs3b93] {
    opacity: 0.8;
}

.button-text[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
}

/* Error Messages */
.error-message[b-xzjqvs3b93] {
    background-color: #FFEBEE;
    border: 1px solid #F44336;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #D32F2F;
    text-align: center;
}

/* Neutral confirmation, brand gold rather than red. Password reset deliberately answers the
   same way for registered and unregistered addresses (so it cannot be used to discover who
   has an account), which means this text shows on the happy path — it must not look like a
   failure the way .error-message does. */
.notice-message[b-xzjqvs3b93] {
    background-color: #FAF7F2;
    border: 1px solid #CEB185;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #201F1D;
    text-align: center;
}

.error-text[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #D32F2F;
    display: block;
    margin-top: 4px;
}

/* Loading State */
.login-button[style*="opacity: 0.7"][b-xzjqvs3b93] {
    opacity: 0.7 !important;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .form-container[b-xzjqvs3b93] {
        padding: 0 20px;
    }

    .login-button[b-xzjqvs3b93] {
        width: 100%;
        max-width: 290px;
    }
}

.signup-cta[b-xzjqvs3b93] {
    margin: 22px auto 0;
    width: 100%;
    max-width: 290px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    color: #6B6660;
}

.signup-cta a[b-xzjqvs3b93] {
    color: #CEB185;
    text-decoration: none;
    font-weight: 500;
}

.signup-cta a:hover[b-xzjqvs3b93] {
    text-decoration: underline;
}
/* /Pages/ModelAvailabilityClientView.razor.rz.scp.css */
/* Client Availability Container */
.client-availability-container[b-w0iiyz2zet] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.client-availability-header[b-w0iiyz2zet] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-w0iiyz2zet] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
}

.header-back-button img[b-w0iiyz2zet] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.header-title[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
}

/* Sticky Year Display */
.sticky-year[b-w0iiyz2zet] {
    position: sticky;
    top: 106px;
    left: 25px;
    z-index: 5;
    pointer-events: none;
    background-color: #FFFFFF;
    padding: 19px 0;
    height: auto;
    width: fit-content;
}

.sticky-year h1[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    pointer-events: auto;
}

/* Calendar Content */
.calendar-content[b-w0iiyz2zet] {
    flex: 1;
    overflow-y: auto;
    padding: 0 25px 100px 25px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Global Day Headers */
.global-day-headers[b-w0iiyz2zet] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 20px 0 30px 0;
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 4;
    padding: 8px 0;
}

.day-header[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Month Section */
.month-section[b-w0iiyz2zet] {
    position: relative;
    margin-bottom: 40px;
}

/* Month Names */
.month-name[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    margin-bottom: 20px;
    position: sticky;
    top: 48px;
    background-color: #FFFFFF;
    z-index: 3;
    padding: 5px 0;
    display: inline-block;
}

.month-name.month-left[b-w0iiyz2zet] {
    text-align: left;
}

.month-name.month-right[b-w0iiyz2zet] {
    text-align: right;
}

.month-name[b-w0iiyz2zet]::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #CEB185;
    margin-top: 5px;
    width: 100%;
}

/* Calendar Grid */
.calendar-grid[b-w0iiyz2zet] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
}

.calendar-day[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 8px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar-day.empty[b-w0iiyz2zet] {
    cursor: default;
}

/* Available day styling */
.calendar-day.available[b-w0iiyz2zet] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .client-availability-header[b-w0iiyz2zet] {
        padding: 0 15px;
    }

    .header-back-button[b-w0iiyz2zet] {
        left: 15px;
    }

    .calendar-content[b-w0iiyz2zet] {
        padding: 0 15px 100px 15px;
    }

    .sticky-year[b-w0iiyz2zet] {
        left: 15px;
    }

    .calendar-day[b-w0iiyz2zet] {
        font-size: 20px;
        padding: 8px 0;
        min-height: 36px;
    }

    .day-header[b-w0iiyz2zet] {
        font-size: 16px;
    }

    .month-name[b-w0iiyz2zet] {
        font-size: 20px;
    }

    .sticky-year h1[b-w0iiyz2zet] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .client-availability-header[b-w0iiyz2zet] {
        padding: 0 10px;
    }

    .header-back-button[b-w0iiyz2zet] {
        left: 10px;
    }

    .calendar-content[b-w0iiyz2zet] {
        padding: 0 10px 100px 10px;
    }

    .sticky-year[b-w0iiyz2zet] {
        left: 10px;
    }

    .calendar-day[b-w0iiyz2zet] {
        font-size: 18px;
        padding: 6px 0;
        min-height: 32px;
    }

    .day-header[b-w0iiyz2zet] {
        font-size: 14px;
    }

    .month-name[b-w0iiyz2zet] {
        font-size: 18px;
    }

    .sticky-year h1[b-w0iiyz2zet] {
        font-size: 18px;
    }
}


/* Loading Overlay */
.loading-overlay[b-w0iiyz2zet] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-w0iiyz2zet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-w0iiyz2zet] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-w0iiyz2zet] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-w0iiyz2zet] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-w0iiyz2zet] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-w0iiyz2zet] {
    background-color: rgba(211, 47, 47, 0.1);
}
/* /Pages/ModelFolderAdminView.razor.rz.scp.css */
/* Folder Admin Container */
.folder-admin-container[b-1s4vqf16ul] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-1s4vqf16ul] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-1s4vqf16ul 1s linear infinite;
}

.loading-container p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-1s4vqf16ul {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-1s4vqf16ul] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-1s4vqf16ul] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-1s4vqf16ul] {
    background-color: #2980b9;
}

.retry-button:active[b-1s4vqf16ul] {
    transform: translateY(1px);
}

/* Header */
.folder-admin-header[b-1s4vqf16ul] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-1s4vqf16ul] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-1s4vqf16ul] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-1s4vqf16ul] {
    width: 100%;
    height: 100%;
}

.header-title[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.folder-admin-content[b-1s4vqf16ul] {
    flex: 1;
    padding: 0 0 180px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folder-admin-content[b-1s4vqf16ul]::-webkit-scrollbar {
    display: none;
}

/* Folder Row */
.folder-row[b-1s4vqf16ul] {
    width: 100%;
    margin-bottom: 30px;
    overflow: visible;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.horizontal-scroll-container[b-1s4vqf16ul]::-webkit-scrollbar {
    display: none;
}

/* Horizontal Media Item */
.horizontal-media-item[b-1s4vqf16ul] {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: #FFFFFF;
}

.media-display[b-1s4vqf16ul] {
    width: 100%;
    aspect-ratio: 402 / 508;
    position: relative;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-display:has(> .media-image)[b-1s4vqf16ul] {
    background-color: #FFFFFF;
}

.media-image[b-1s4vqf16ul] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-1s4vqf16ul] {
    width: 100%;
    position: relative;
    aspect-ratio: 402 / 508;
    overflow: hidden;
}

.video-thumbnail-container .media-image[b-1s4vqf16ul] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    min-height: unset;
    max-height: unset;
}

.video-play-overlay[b-1s4vqf16ul] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
    z-index: 2;
}

.media-display:hover .video-play-overlay[b-1s4vqf16ul] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-1s4vqf16ul] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.media-display:hover .play-icon[b-1s4vqf16ul] {
    transform: scale(1.1);
}

.video-duration-overlay[b-1s4vqf16ul] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
}

/* Pagination Indicator */
.pagination-indicator[b-1s4vqf16ul] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #201F1D;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10;
    margin: 8px;
    min-width: 38px;
    text-align: center;
}

/* Media Placeholder */
.media-placeholder[b-1s4vqf16ul] {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
}

.media-loading[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Metadata */
.media-metadata[b-1s4vqf16ul] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 25px;
    background-color: #FFFFFF;
    min-height: 20px;
    width: 100%;
    box-sizing: border-box;
}

.metadata-label-left[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    flex: 0 0 auto;
    max-width: 163px;
}

.metadata-label-right[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: right;
    flex: 0 0 auto;
    max-width: 213px;
    margin-left: auto;
}

/* Loading More Indicator */
.loading-more-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-1s4vqf16ul] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-1s4vqf16ul 1s linear infinite;
}

.loading-more-container p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-1s4vqf16ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Video Container */
.video-container[b-1s4vqf16ul] {
    width: 100%;
    position: relative;
    background-color: #000;
}

.video-container video[b-1s4vqf16ul] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .folder-admin-content[b-1s4vqf16ul] {
        padding: 0 0 180px 0;
    }
    
    .media-metadata[b-1s4vqf16ul] {
        padding: 15px 20px;
    }
    
    .horizontal-media-item[b-1s4vqf16ul] {
        width: 100%;
    }
}

/* /Pages/ModelFolderClientView.razor.rz.scp.css */
/* Folder Client Container */
.folder-client-container[b-qm6t52gxsa] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-qm6t52gxsa] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-qm6t52gxsa 1s linear infinite;
}

.loading-container p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-qm6t52gxsa {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-qm6t52gxsa] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-qm6t52gxsa] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-qm6t52gxsa] {
    background-color: #2980b9;
}

.retry-button:active[b-qm6t52gxsa] {
    transform: translateY(1px);
}

/* Header */
.folder-client-header[b-qm6t52gxsa] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-qm6t52gxsa] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-qm6t52gxsa] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-qm6t52gxsa] {
    width: 100%;
    height: 100%;
}

.header-title[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.folder-client-content[b-qm6t52gxsa] {
    flex: 1;
    padding: 0 0 180px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folder-client-content[b-qm6t52gxsa]::-webkit-scrollbar {
    display: none;
}

/* Folder Row */
.folder-row[b-qm6t52gxsa] {
    width: 100%;
    margin-bottom: 30px;
    overflow: visible;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.horizontal-scroll-container[b-qm6t52gxsa]::-webkit-scrollbar {
    display: none;
}

/* Horizontal Media Item */
.horizontal-media-item[b-qm6t52gxsa] {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: #FFFFFF;
}

.media-display[b-qm6t52gxsa] {
    width: 100%;
    aspect-ratio: 402 / 508;
    position: relative;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-display:has(> .media-image)[b-qm6t52gxsa] {
    background-color: #FFFFFF;
}

.media-image[b-qm6t52gxsa] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-qm6t52gxsa] {
    width: 100%;
    position: relative;
    aspect-ratio: 402 / 508;
    overflow: hidden;
}

.video-thumbnail-container .media-image[b-qm6t52gxsa] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    min-height: unset;
    max-height: unset;
}

.video-play-overlay[b-qm6t52gxsa] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
    z-index: 2;
}

.media-display:hover .video-play-overlay[b-qm6t52gxsa] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-qm6t52gxsa] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.media-display:hover .play-icon[b-qm6t52gxsa] {
    transform: scale(1.1);
}

.video-duration-overlay[b-qm6t52gxsa] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
}

/* Pagination Indicator */
.pagination-indicator[b-qm6t52gxsa] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #201F1D;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10;
    margin: 8px;
    min-width: 38px;
    text-align: center;
}

/* Media Placeholder */
.media-placeholder[b-qm6t52gxsa] {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
}

.media-loading[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Metadata */
.media-metadata[b-qm6t52gxsa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 25px;
    background-color: #FFFFFF;
    min-height: 20px;
    width: 100%;
    box-sizing: border-box;
}

.metadata-label-left[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    flex: 0 0 auto;
    max-width: 163px;
}

.metadata-label-right[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: right;
    flex: 0 0 auto;
    max-width: 213px;
    margin-left: auto;
}

/* Loading More Indicator */
.loading-more-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-qm6t52gxsa] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-qm6t52gxsa 1s linear infinite;
}

.loading-more-container p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-qm6t52gxsa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Video Container */
.video-container[b-qm6t52gxsa] {
    width: 100%;
    position: relative;
    background-color: #000;
}

.video-container video[b-qm6t52gxsa] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .folder-client-content[b-qm6t52gxsa] {
        padding: 0 0 180px 0;
    }

    .media-metadata[b-qm6t52gxsa] {
        padding: 15px 20px;
    }

    .horizontal-media-item[b-qm6t52gxsa] {
        width: 100%;
    }
}
/* /Pages/ModelPortfolioAdminView.razor.rz.scp.css */
/* Portfolio Admin Container */
.portfolio-admin-container[b-2gwlj2ss96] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-2gwlj2ss96] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2gwlj2ss96 1s linear infinite;
}

.loading-container p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-2gwlj2ss96 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-2gwlj2ss96] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-2gwlj2ss96] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-2gwlj2ss96] {
    background-color: #2980b9;
}

.retry-button:active[b-2gwlj2ss96] {
    transform: translateY(1px);
}

/* Header */
.portfolio-admin-header[b-2gwlj2ss96] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-2gwlj2ss96] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-2gwlj2ss96] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
}

.header-title[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.portfolio-admin-content[b-2gwlj2ss96] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-admin-content[b-2gwlj2ss96]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid - 2 columns matching Portfolio.razor */
.portfolio-admin-grid[b-2gwlj2ss96] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-2gwlj2ss96] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-2gwlj2ss96] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #FFFFFF;
}

.folder-thumbnail:hover[b-2gwlj2ss96] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-2gwlj2ss96] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.folder-placeholder[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-2gwlj2ss96] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-2gwlj2ss96] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Portfolio Media Item (for videos) */
.portfolio-media-item[b-2gwlj2ss96] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #F5F5F5;
}

.portfolio-media-item:hover[b-2gwlj2ss96] {
    transform: scale(1.02);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-media-item:active[b-2gwlj2ss96] {
    transform: scale(0.98);
}

.portfolio-media-image[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Media Placeholder */
.media-placeholder[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
    border-radius: 8px;
}

.media-loading[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-duration-overlay[b-2gwlj2ss96] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.video-play-overlay[b-2gwlj2ss96] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
}

.portfolio-media-item:hover .video-play-overlay[b-2gwlj2ss96] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-2gwlj2ss96] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.portfolio-media-item:hover .play-icon[b-2gwlj2ss96] {
    transform: scale(1.1);
}

/* Loading More Indicator */
.loading-more-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-2gwlj2ss96] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2gwlj2ss96 1s linear infinite;
}

.loading-more-container p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-2gwlj2ss96] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 400px) {
    .portfolio-admin-grid[b-2gwlj2ss96] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }
    
    .folder-container[b-2gwlj2ss96] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    
    .folder-thumbnail[b-2gwlj2ss96] {
        width: 100%;
        height: 100%;
    }
    
    .portfolio-media-item[b-2gwlj2ss96] {
        width: 100%;
        aspect-ratio: 1;
    }
    
    .portfolio-admin-content[b-2gwlj2ss96] {
        padding: 20px 15px 180px 15px;
    }
}

/* /Pages/ModelPortfolioClientView.razor.rz.scp.css */
/* Portfolio Client Container */
.portfolio-client-container[b-44nrdb6feh] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-44nrdb6feh] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-44nrdb6feh 1s linear infinite;
}

.loading-container p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-44nrdb6feh {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-44nrdb6feh] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-44nrdb6feh] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-44nrdb6feh] {
    background-color: #2980b9;
}

.retry-button:active[b-44nrdb6feh] {
    transform: translateY(1px);
}

/* Header */
.portfolio-client-header[b-44nrdb6feh] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-44nrdb6feh] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-44nrdb6feh] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
}

.header-title[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.portfolio-client-content[b-44nrdb6feh] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-client-content[b-44nrdb6feh]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid - 2 columns matching Portfolio.razor */
.portfolio-client-grid[b-44nrdb6feh] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-44nrdb6feh] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-44nrdb6feh] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #FFFFFF;
}

.folder-thumbnail:hover[b-44nrdb6feh] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-44nrdb6feh] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.folder-placeholder[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-44nrdb6feh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-44nrdb6feh] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Portfolio Media Item (for videos) */
.portfolio-media-item[b-44nrdb6feh] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #F5F5F5;
}

.portfolio-media-item:hover[b-44nrdb6feh] {
    transform: scale(1.02);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-media-item:active[b-44nrdb6feh] {
    transform: scale(0.98);
}

.portfolio-media-image[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Media Placeholder */
.media-placeholder[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
    border-radius: 8px;
}

.media-loading[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-duration-overlay[b-44nrdb6feh] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.video-play-overlay[b-44nrdb6feh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
}

.portfolio-media-item:hover .video-play-overlay[b-44nrdb6feh] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-44nrdb6feh] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.portfolio-media-item:hover .play-icon[b-44nrdb6feh] {
    transform: scale(1.1);
}

/* Loading More Indicator */
.loading-more-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-44nrdb6feh] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-44nrdb6feh 1s linear infinite;
}

.loading-more-container p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-44nrdb6feh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 400px) {
    .portfolio-client-grid[b-44nrdb6feh] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }

    .folder-container[b-44nrdb6feh] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .folder-thumbnail[b-44nrdb6feh] {
        width: 100%;
        height: 100%;
    }

    .portfolio-media-item[b-44nrdb6feh] {
        width: 100%;
        aspect-ratio: 1;
    }

    .portfolio-client-content[b-44nrdb6feh] {
        padding: 20px 15px 180px 15px;
    }
}
/* /Pages/ModelProfile.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-sd9p5vv22i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-sd9p5vv22i] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-sd9p5vv22i 1s linear infinite;
}

@keyframes spin-b-sd9p5vv22i {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-sd9p5vv22i] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-sd9p5vv22i] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-sd9p5vv22i] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-sd9p5vv22i] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-sd9p5vv22i] {
    background-color: #2980b9;
}

.retry-button:active[b-sd9p5vv22i] {
    transform: translateY(1px);
}

/* Hide scrollbar for model-profile-container */
.model-profile-container[b-sd9p5vv22i] {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .model-profile-container[b-sd9p5vv22i] {
        max-width: 100%;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        max-width: 100%;
    }
}

.model-profile-container[b-sd9p5vv22i]::-webkit-scrollbar {
    display: none;
}

/* Profile Image */
.profile-image-container[b-sd9p5vv22i] {
    position: relative;
    width: 402px;
    height: 402px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-image-container:hover[b-sd9p5vv22i] {
    transform: scale(1.02);
}

.profile-image-mask[b-sd9p5vv22i] {
    width: 100%;
    height: 100%;
    position: relative;
}

.profile-image[b-sd9p5vv22i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-sd9p5vv22i] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 12px 0;
    background-color: white;
    border-radius: 8px;
}

.unit-label[b-sd9p5vv22i] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: color 0.3s ease;
}

.unit-label.active[b-sd9p5vv22i] {
    color: #333;
    font-weight: 600;
}

.toggle-switch[b-sd9p5vv22i] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-sd9p5vv22i] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-sd9p5vv22i] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-sd9p5vv22i] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-sd9p5vv22i] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-sd9p5vv22i] {
    transform: rotate(180deg) scale(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-sd9p5vv22i] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-sd9p5vv22i] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-sd9p5vv22i] {
        font-size: 14px;
    }

    .error-container[b-sd9p5vv22i] {
        min-height: 40vh;
        padding: 1rem;
    }

    .error-message[b-sd9p5vv22i] {
        font-size: 16px;
    }

    .retry-button[b-sd9p5vv22i] {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Make profile image responsive on mobile */
    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        padding: 0;
    }

    .profile-image-mask[b-sd9p5vv22i] {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .profile-image[b-sd9p5vv22i] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center top;
    }
}

/* Portfolio Section Styles */
.portfolio-section[b-sd9p5vv22i] {
    margin-top: 30px;
}

.portfolio-title[b-sd9p5vv22i] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* Mobile-specific padding adjustments */
@media (max-width: 401px) {
    .portfolio-section[b-sd9p5vv22i] {
        padding-left: 0;
        margin-left: -25px;
    }

    .portfolio-title[b-sd9p5vv22i] {
        padding-left: 25px;
    }
}

.portfolio-images[b-sd9p5vv22i] {
    display: flex;
    flex-wrap: wrap;
}

.portfolio-image[b-sd9p5vv22i] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:first-child[b-sd9p5vv22i] {
    margin-right: 2px;
}

.portfolio-image:last-child[b-sd9p5vv22i] {
    margin-left: 2px;
}

.portfolio-image img[b-sd9p5vv22i] {
    border-radius: 0;
    object-fit: contain;
}

.portfolio-image:hover[b-sd9p5vv22i] {
    transform: scale(1.02);
}

/* Profile name styles to ensure it stays on one line */
.profile-header-info[b-sd9p5vv22i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.profile-location[b-sd9p5vv22i] {
    margin-top: 0;
    margin-bottom: 0;
}

.profile-name[b-sd9p5vv22i] {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.edit-icon[b-sd9p5vv22i] {
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.edit-icon:hover[b-sd9p5vv22i] {
    transform: scale(1.1);
}

.edit-icon img[b-sd9p5vv22i] {
    width: 40px;
    height: 40px;
}

/* Responsive adjustments for profile name */
@media (max-width: 480px) {
    .profile-name[b-sd9p5vv22i] {
        font-size: 20px;
    }

    .edit-icon img[b-sd9p5vv22i] {
        width: 32px;
        height: 32px;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 360px) {
    .profile-name[b-sd9p5vv22i] {
        font-size: 18px;
    }

    .edit-icon img[b-sd9p5vv22i] {
        width: 28px;
        height: 28px;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        margin-top: 0;
    }
}



/* Same notice as the client profile's pending banner. */
.account-pending-notice[b-sd9p5vv22i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 20px 0;
    padding: 12px 14px;
    border: 1px solid #E8D9BE;
    border-radius: 8px;
    background: #FBF6EC;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6B5A3C;
}
/* /Pages/ModelProfileAdminView.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-wwj4s7xl2s] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-wwj4s7xl2s 1s linear infinite;
}

@keyframes spin-b-wwj4s7xl2s {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-wwj4s7xl2s] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-wwj4s7xl2s] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-wwj4s7xl2s] {
    background-color: #2980b9;
}

.retry-button:active[b-wwj4s7xl2s] {
    transform: translateY(1px);
}

/* Main Container */
.admin-model-profile-container[b-wwj4s7xl2s] {
    background-color: white;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Header */
.admin-profile-header[b-wwj4s7xl2s] {
    position: relative;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-shrink: 0;
}

.header-back-button[b-wwj4s7xl2s] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-wwj4s7xl2s] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
}

.header-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    text-align: center;
}

/* Scrollable Content Area */
.admin-profile-content[b-wwj4s7xl2s] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.admin-profile-content[b-wwj4s7xl2s]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Profile Image */
.admin-profile-image-section[b-wwj4s7xl2s] {
    position: relative;
    padding: 20px 0;
    text-align: center;
}

.admin-profile-image-container[b-wwj4s7xl2s] {
    position: relative;
    width: 100%;
    max-width: 402px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
}

.admin-profile-image-mask[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    position: relative;
}

.admin-profile-image[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}

.edit-photo-text[b-wwj4s7xl2s] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin-top: 10px;
    padding-left: 20px;
}

/* Profile Details */
.admin-profile-details[b-wwj4s7xl2s] {
    padding: 25px 25px 25px 25px; /* Removed bottom padding since no book button */
    background-color: white;
}

.profile-header-info[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.admin-profile-name[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.view-availability-link[b-wwj4s7xl2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ceb185;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s ease;
}

.view-availability-link:hover[b-wwj4s7xl2s] {
    opacity: 0.8;
}

.view-availability-link img[b-wwj4s7xl2s] {
    width: 16px;
    height: 16px;
}

.admin-profile-location[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin-bottom: 20px;
}

.admin-profile-email[b-wwj4s7xl2s] {
    margin-top: 8px;
    overflow-wrap: anywhere;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-wwj4s7xl2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.unit-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #201f1d;
    transition: color 0.3s ease;
}

.unit-label.active[b-wwj4s7xl2s] {
    color: #201f1d;
    font-weight: 500;
}

.toggle-switch[b-wwj4s7xl2s] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-wwj4s7xl2s] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-wwj4s7xl2s] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-wwj4s7xl2s] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-wwj4s7xl2s] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-wwj4s7xl2s] {
    transform: rotate(180deg) scale(0.95);
}

/* Measurements Grid */
.measurements-grid[b-wwj4s7xl2s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    margin: 30px 0;
}

.measurement-item[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
}

.measurement-value[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

/* Additional Information */
.additional-info[b-wwj4s7xl2s] {
    margin: 30px 0;
}

.info-section[b-wwj4s7xl2s] {
    margin-bottom: 25px;
}

.info-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
    margin-bottom: 8px;
}

.info-value[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
}

/* Portfolio Section */
.portfolio-section[b-wwj4s7xl2s] {
    margin: 30px 0;
}

.portfolio-header-info[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.portfolio-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.portfolio-images[b-wwj4s7xl2s] {
    display: flex;
    gap: 2px;
}

.portfolio-image[b-wwj4s7xl2s] {
    flex: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:hover[b-wwj4s7xl2s] {
    transform: scale(1.02);
}

.portfolio-image img[b-wwj4s7xl2s] {
    width: 100%;
    height: 207px;
    object-fit: contain;
    border-radius: 8px;
}

/* Feedback Section */
.feedback-section[b-wwj4s7xl2s] {
    margin: 30px 0;
    padding-bottom: 100px; /* Add padding to prevent content from being cropped by bottom nav bar */
}

.feedback-header[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.feedback-rating[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #201f1d;
}

.feedback-item[b-wwj4s7xl2s] {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-item:last-child[b-wwj4s7xl2s] {
    border-bottom: none;
    margin-bottom: 0;
}

.feedback-content[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
    margin-bottom: 10px;
}

.feedback-author[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #201f1d;
    text-align: right;
}

.no-feedback[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Leave Feedback Section */
.leave-feedback-section[b-wwj4s7xl2s] {
    margin-top: 30px;
    padding: 0 25px;
    display: flex;
    justify-content: center;
}

.leave-feedback-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.leave-feedback-button:hover[b-wwj4s7xl2s] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.leave-feedback-button:active[b-wwj4s7xl2s] {
    transform: translateY(0);
}

/* Portfolio Navigation Bar */
.portfolio-nav-container[b-wwj4s7xl2s] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
    z-index: 1002;
}

.portfolio-nav-item[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.portfolio-nav-item img[b-wwj4s7xl2s] {
    width: 26px;
    height: 26px;
    margin-bottom: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.portfolio-nav-item span[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201f1d;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.portfolio-nav-item.active img[b-wwj4s7xl2s] {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(69%) sepia(13%) saturate(1234%) hue-rotate(10deg) brightness(94%) contrast(88%);
}

.portfolio-nav-item.active span[b-wwj4s7xl2s] {
    opacity: 1;
    color: #ceb185;
    font-weight: 500;
}

.portfolio-nav-item:hover img[b-wwj4s7xl2s] {
    opacity: 0.8;
}

.portfolio-nav-item:hover span[b-wwj4s7xl2s] {
    opacity: 0.8;
}

/* Portfolio Overlay Styles */
.portfolio-overlay[b-wwj4s7xl2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
}

.portfolio-back-button[b-wwj4s7xl2s] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.portfolio-back-button:hover[b-wwj4s7xl2s] {
    transform: scale(1.1);
}

.portfolio-back-button img[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    filter: invert(1); /* Make the arrow white */
}

.portfolio-main-image-container[b-wwj4s7xl2s] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.portfolio-main-image[b-wwj4s7xl2s] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.portfolio-dots-container[b-wwj4s7xl2s] {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1001;
}

.portfolio-dot[b-wwj4s7xl2s] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.portfolio-dot.active[b-wwj4s7xl2s] {
    background: #ceb185;
    transform: scale(1.2);
}

.portfolio-dot:hover[b-wwj4s7xl2s] {
    background: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-wwj4s7xl2s] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }
    
    .loading-spinner[b-wwj4s7xl2s] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    
    .loading-container p[b-wwj4s7xl2s] {
        font-size: 14px;
    }
    
    .error-container[b-wwj4s7xl2s] {
        min-height: 40vh;
        padding: 1rem;
    }
    
    .error-message[b-wwj4s7xl2s] {
        font-size: 16px;
    }
    
    .retry-button[b-wwj4s7xl2s] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .admin-profile-details[b-wwj4s7xl2s] {
        padding: 20px 20px 20px 20px; /* Removed bottom padding for mobile */
    }

    .measurements-grid[b-wwj4s7xl2s] {
        gap: 15px 0;
    }
}

/* Model Approval Section Styles */
.model-approval-section[b-wwj4s7xl2s] {
    margin: 30px 0;
    padding: 25px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e8e5e0;
}

.approval-section-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #201f1d;
    margin: 0 0 10px 0;
}

.approval-section-description[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

/* Action Buttons - Same styling as ClientBookingView */
.action-buttons[b-wwj4s7xl2s] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.approve-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.approve-button:hover:not(:disabled)[b-wwj4s7xl2s] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.approve-button:active:not(:disabled)[b-wwj4s7xl2s] {
    transform: translateY(0);
}

.approve-button:disabled[b-wwj4s7xl2s] {
    opacity: 0.6;
    cursor: not-allowed;
}

.reject-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    background-color: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.reject-button:hover:not(:disabled)[b-wwj4s7xl2s] {
    background-color: #f5f5f5;
    transform: translateY(-1px);
}

.reject-button:active:not(:disabled)[b-wwj4s7xl2s] {
    transform: translateY(0);
}

.reject-button:disabled[b-wwj4s7xl2s] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Request More Info Section - Same styling as ClientBookingView */
.request-info-section[b-wwj4s7xl2s] {
    text-align: center;
    margin-bottom: 20px;
}

.request-info-link[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    width: 291px;
    margin: 0 auto;
    display: block;
    transition: opacity 0.2s ease;
}

.request-info-link:hover[b-wwj4s7xl2s] {
    opacity: 0.8;
}

/* Responsive adjustments for approval section */
@media (max-width: 402px) {
    .model-approval-section[b-wwj4s7xl2s] {
        padding: 20px;
        margin-bottom: 100px; /* Add extra bottom margin to prevent buttons from being hidden behind bottom nav bar */
    }
    
    .action-buttons[b-wwj4s7xl2s] {
        flex-direction: column;
        gap: 8px;
    }
    
    .approve-button[b-wwj4s7xl2s],
    .reject-button[b-wwj4s7xl2s] {
        width: 100%;
    }
    
    .request-info-link[b-wwj4s7xl2s] {
        width: 100%;
    }
}

/* Additional mobile spacing for approval section on all mobile devices */
@media (max-width: 768px) {
    .model-approval-section[b-wwj4s7xl2s] {
        margin-bottom: 100px; /* Add extra bottom margin to prevent buttons from being hidden behind bottom nav bar */
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-wwj4s7xl2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-wwj4s7xl2s] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-wwj4s7xl2s 0.3s ease-out;
}

@keyframes modalSlideIn-b-wwj4s7xl2s {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-wwj4s7xl2s] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-wwj4s7xl2s] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-wwj4s7xl2s] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-wwj4s7xl2s] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* ---- Account status panel -------------------------------------------------------------
   Replaces the old approve/decline block. The panel container and the two button classes
   (.approve-button / .reject-button) are reused as-is so the panel keeps the page's existing
   look; only the chip and the status lines are new. */

.status-line[b-wwj4s7xl2s] {
    margin: 0 0 10px;
}

.status-chip[b-wwj4s7xl2s] {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    background: #F5F0E8;
    color: #6B5A3C;
}

.status-chip.status-onhold[b-wwj4s7xl2s] {
    background: #FBEEDC;
    color: #8A4B00;
}

.status-chip.status-archived[b-wwj4s7xl2s] {
    background: #EFEAE0;
    color: #55504A;
}

/* Inline text action inside a status line — deliberately quiet, it is a correction for an
   uncommon state (legacy or just-restored records), not a primary page action. */
.link-button[b-wwj4s7xl2s] {
    background: none;
    border: none;
    padding: 0 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #9E815C;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:disabled[b-wwj4s7xl2s] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/ModelProfileClientView.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-7c8aabv3in] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-7c8aabv3in 1s linear infinite;
}

@keyframes spin-b-7c8aabv3in {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-7c8aabv3in] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-7c8aabv3in] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-7c8aabv3in] {
    background-color: #2980b9;
}

.retry-button:active[b-7c8aabv3in] {
    transform: translateY(1px);
}

/* Main Container */
.client-model-profile-container[b-7c8aabv3in] {
    background-color: white;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-width: 402px;
    margin: 0 auto;
}

/* Header */
.client-profile-header[b-7c8aabv3in] {
    position: relative;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-shrink: 0;
}

.header-back-button[b-7c8aabv3in] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-7c8aabv3in] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
}

.header-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    text-align: center;
}

/* Scrollable Content Area */
.client-profile-content[b-7c8aabv3in] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.client-profile-content[b-7c8aabv3in]::-webkit-scrollbar {
    display: none;
}

/* Profile Image */
.client-profile-image-container[b-7c8aabv3in] {
    position: relative;
    width: 402px;
    height: 402px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.client-profile-image-container:hover[b-7c8aabv3in] {
    transform: scale(1.02);
}

.client-profile-image-mask[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
    position: relative;
}

.client-profile-image[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
}

/* Profile Details */
.client-profile-details[b-7c8aabv3in] {
    padding: 25px 25px 180px 25px;
    background-color: white;
}

.profile-header-info[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.client-profile-name[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.view-availability-link[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ceb185;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s ease;
}

.view-availability-link:hover[b-7c8aabv3in] {
    opacity: 0.8;
}

.view-availability-link img[b-7c8aabv3in] {
    width: 16px;
    height: 16px;
}

.client-profile-location[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin-bottom: 20px;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.unit-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #201f1d;
    transition: color 0.3s ease;
}

.unit-label.active[b-7c8aabv3in] {
    color: #201f1d;
    font-weight: 500;
}

.toggle-switch[b-7c8aabv3in] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-7c8aabv3in] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-7c8aabv3in] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-7c8aabv3in] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-7c8aabv3in] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-7c8aabv3in] {
    transform: rotate(180deg) scale(0.95);
}

/* Measurements Grid */
.measurements-grid[b-7c8aabv3in] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    margin: 30px 0;
}

.measurement-item[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
}

.measurement-value[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

/* Additional Information */
.additional-info[b-7c8aabv3in] {
    margin: 30px 0;
}

.info-section[b-7c8aabv3in] {
    margin-bottom: 25px;
}

.info-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
    margin-bottom: 8px;
}

.info-value[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
}

/* Portfolio Section */
.portfolio-section[b-7c8aabv3in] {
    margin: 30px 0;
}

.portfolio-header-info[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.portfolio-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.portfolio-images[b-7c8aabv3in] {
    display: flex;
    gap: 2px;
}

.portfolio-image[b-7c8aabv3in] {
    flex: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:hover[b-7c8aabv3in] {
    transform: scale(1.02);
}

.portfolio-image img[b-7c8aabv3in] {
    width: 100%;
    height: 207px;
    object-fit: contain;
    border-radius: 8px;
}

/* Feedback Section */
.feedback-section[b-7c8aabv3in] {
    margin: 30px 0;
}

.feedback-header[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.feedback-rating[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #201f1d;
}

.feedback-item[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-item:last-child[b-7c8aabv3in] {
    border-bottom: none;
    margin-bottom: 0;
}

.feedback-content[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
    flex: 1;
    margin: 0;
}

.feedback-author[b-7c8aabv3in] {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.feedback-author img[b-7c8aabv3in] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.no-feedback[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Book Button */
.book-button-container[b-7c8aabv3in] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 25px;
}

.book-button[b-7c8aabv3in] {
    background-color: #201f1d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 290px;
}

.book-button:hover[b-7c8aabv3in] {
    background-color: #333;
}

.book-button:active[b-7c8aabv3in] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-7c8aabv3in],
    .error-container[b-7c8aabv3in] {
        min-height: 40vh;
        padding: 1rem;
    }

    .loading-spinner[b-7c8aabv3in] {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

    .error-message[b-7c8aabv3in] {
        font-size: 16px;
    }

    .retry-button[b-7c8aabv3in] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .client-profile-details[b-7c8aabv3in] {
        padding: 20px 20px 200px 20px;
    }

    .measurements-grid[b-7c8aabv3in] {
        gap: 15px 0;
    }

    .book-button[b-7c8aabv3in] {
        min-width: 250px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .book-button-container[b-7c8aabv3in] {
        padding: 0 20px;
    }
}


/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .client-profile-details[b-7c8aabv3in] {
        padding-bottom: 240px;
    }

    .book-button-container[b-7c8aabv3in] {
        bottom: 160px;
    }
}
/* /Pages/NewMediaUpload.razor.rz.scp.css */
/* New Media Upload Container */
.new-upload-container[b-xilahkke6v] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-xilahkke6v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-xilahkke6v 1s linear infinite;
}

.loading-container p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-xilahkke6v {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.new-upload-header[b-xilahkke6v] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-xilahkke6v] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-xilahkke6v] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-xilahkke6v] {
    opacity: 0.7;
}

.back-button img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-xilahkke6v] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-xilahkke6v] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-camera[b-xilahkke6v] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-camera img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.new-upload-content[b-xilahkke6v] {
    flex: 1;
    padding: 20px 26px 180px 26px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    height: calc(100vh - 186px); /* Fixed height for proper scrolling */
}

.new-upload-content[b-xilahkke6v]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Album Name Input */
.album-name-input-container[b-xilahkke6v] {
    margin-bottom: 32px;
}

.album-name-label[b-xilahkke6v] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.album-name-input[b-xilahkke6v] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.album-name-input:focus[b-xilahkke6v] {
    outline: none;
    border-color: #CEB185;
}

.album-name-input[b-xilahkke6v]::placeholder {
    color: #B8A78C;
}

.album-name-error[b-xilahkke6v] {
    margin: 8px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #F44336;
}

/* Album Info */
.album-info[b-xilahkke6v] {
    margin-bottom: 32px;
}

.album-text[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.album-name[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Large Image Display */
.large-image-container[b-xilahkke6v] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-xilahkke6v] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Crop Icon Button */
.crop-icon-btn[b-xilahkke6v] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E8E5E0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    padding: 0;
}

.crop-icon-btn:hover[b-xilahkke6v] {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.crop-icon-btn:active[b-xilahkke6v] {
    transform: scale(0.95);
}

.crop-icon-btn svg[b-xilahkke6v] {
    width: 24px;
    height: 24px;
    color: #201F1D;
}

.large-image[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-large-image[b-xilahkke6v] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay */
.crop-overlay[b-xilahkke6v] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.crop-button:active[b-xilahkke6v] {
    transform: scale(0.95);
}

/* Image Ribbon */
.image-ribbon-container[b-xilahkke6v] {
    margin-bottom: 34px;
}

.ribbon-header[b-xilahkke6v] {
    margin-bottom: 12px;
}

.ribbon-title[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.image-ribbon[b-xilahkke6v] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-xilahkke6v] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-xilahkke6v] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-xilahkke6v] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.ribbon-thumbnail.thumbnail-selected[b-xilahkke6v] {
    border-color: #CEB185;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.5);
}

.thumbnail-image[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-xilahkke6v] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-xilahkke6v] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-xilahkke6v] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-xilahkke6v] {
    transform: scale(0.95);
}

/* Thumbnail Checkmark */
.thumbnail-checkmark[b-xilahkke6v] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.thumbnail-checkmark svg[b-xilahkke6v] {
    width: 20px;
    height: 20px;
}

/* Set Thumbnail Button Container */
.set-thumbnail-button-container[b-xilahkke6v] {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-thumbnail-main-btn[b-xilahkke6v] {
    padding: 12px 24px;
    background: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.set-thumbnail-main-btn:hover[b-xilahkke6v] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.set-thumbnail-main-btn:active[b-xilahkke6v] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}


/* Feature Sections */
.feature-section[b-xilahkke6v] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
}

.feature-section:hover[b-xilahkke6v] {
    background-color: #f8f8f8;
}

.feature-icon[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.feature-icon img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-content[b-xilahkke6v] {
    flex: 1;
}

.feature-text[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.feature-subtext[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #B8A78C;
    margin: 4px 0 0 0;
}

.feature-arrow[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-arrow img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Upload Button Container */
.upload-button-container[b-xilahkke6v] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002; /* Ensure buttons stay on top of all content including modals */
}

.upload-button[b-xilahkke6v] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.upload-button:hover:not(:disabled)[b-xilahkke6v] {
    background-color: #3A3937;
}

.upload-button:active:not(:disabled)[b-xilahkke6v] {
    background-color: #1A1917;
}

.upload-button:disabled[b-xilahkke6v] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.upload-spinner[b-xilahkke6v] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-xilahkke6v 1s linear infinite;
}


/* Responsive Design */
@media (max-width: 768px) and (min-width: 481px) {
    .large-image-wrapper[b-xilahkke6v] {
        max-width: 350px;
        height: 350px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 110px;
        height: 110px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .new-upload-content[b-xilahkke6v] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
        height: calc(100vh - 186px);
    }

    .large-image-wrapper[b-xilahkke6v] {
        max-width: 300px;
        height: 300px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 100px;
        height: 100px;
    }

    .set-thumbnail-button-container[b-xilahkke6v] {
        max-width: 300px;
    }

    .set-thumbnail-main-btn[b-xilahkke6v] {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 140px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 28px;
        height: 28px;
    }

    .image-ribbon[b-xilahkke6v] {
        gap: 8px;
    }

    .page-title[b-xilahkke6v] {
        font-size: 18px;
    }

    .album-text[b-xilahkke6v] {
        font-size: 15px;
    }

    .album-name-label[b-xilahkke6v] {
        font-size: 15px;
    }

    .album-name-input[b-xilahkke6v] {
        font-size: 15px;
        padding: 10px 14px;
    }

    .album-name-error[b-xilahkke6v] {
        font-size: 13px;
    }

    .feature-text[b-xilahkke6v] {
        font-size: 15px;
    }

    .feature-subtext[b-xilahkke6v] {
        font-size: 13px;
    }

    .upload-button-container[b-xilahkke6v] {
        padding: 0 20px;
    }

    .upload-button[b-xilahkke6v] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }

    .thumbnail-checkmark[b-xilahkke6v] {
        width: 24px;
        height: 24px;
    }

    .thumbnail-checkmark svg[b-xilahkke6v] {
        width: 16px;
        height: 16px;
    }

}

@media (max-width: 360px) {
    .new-upload-content[b-xilahkke6v] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
        height: calc(100vh - 186px);
    }

    .large-image-wrapper[b-xilahkke6v] {
        max-width: 280px;
        height: 280px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 90px;
        height: 90px;
    }

    .set-thumbnail-button-container[b-xilahkke6v] {
        max-width: 280px;
    }

    .set-thumbnail-main-btn[b-xilahkke6v] {
        font-size: 13px;
        padding: 9px 18px;
        min-width: 120px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 26px;
        height: 26px;
    }

    .image-ribbon[b-xilahkke6v] {
        gap: 6px;
    }

    .page-title[b-xilahkke6v] {
        font-size: 16px;
    }

    .album-text[b-xilahkke6v] {
        font-size: 14px;
    }

    .album-name-label[b-xilahkke6v] {
        font-size: 14px;
    }

    .album-name-input[b-xilahkke6v] {
        font-size: 14px;
        padding: 9px 12px;
    }

    .album-name-error[b-xilahkke6v] {
        font-size: 12px;
    }

    .feature-text[b-xilahkke6v] {
        font-size: 14px;
    }

    .feature-subtext[b-xilahkke6v] {
        font-size: 12px;
    }

    .thumbnail-checkmark[b-xilahkke6v] {
        width: 22px;
        height: 22px;
    }

    .thumbnail-checkmark svg[b-xilahkke6v] {
        width: 14px;
        height: 14px;
    }

}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .large-image[b-xilahkke6v],
    .thumbnail-image[b-xilahkke6v] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Cropper Modal Styles */
.cropper-modal-overlay[b-xilahkke6v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-xilahkke6v] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-xilahkke6v 0.3s ease-out;
}

@keyframes modalSlideIn-b-xilahkke6v {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-xilahkke6v] {
        padding: 10px;
    }

    .cropper-modal-container[b-xilahkke6v] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-xilahkke6v] {
        padding: 5px;
    }

    .cropper-modal-container[b-xilahkke6v] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* Modal Styles - consistent with PortfolioFolder */
.modal-overlay[b-xilahkke6v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-xilahkke6v] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-xilahkke6v 0.3s ease-out;
}

.modal-header[b-xilahkke6v] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-xilahkke6v] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-body[b-xilahkke6v] {
    padding: 24px;
}

.modal-message[b-xilahkke6v] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.modal-footer[b-xilahkke6v] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-xilahkke6v] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-xilahkke6v] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-xilahkke6v] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-xilahkke6v] {
    transform: translateY(0);
}

/* Responsive modal styles */
@media (max-width: 480px) {
    .modal-container[b-xilahkke6v] {
        max-width: 350px;
        margin: 0 10px;
    }

    .modal-header[b-xilahkke6v] {
        padding: 20px 20px 0 20px;
    }

    .modal-title[b-xilahkke6v] {
        font-size: 18px;
    }

    .modal-body[b-xilahkke6v] {
        padding: 20px;
    }

    .modal-message[b-xilahkke6v] {
        font-size: 15px;
    }

    .modal-footer[b-xilahkke6v] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-btn[b-xilahkke6v] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

/* Save Metadata Button */
.save-metadata-container[b-xilahkke6v] {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.save-metadata-btn[b-xilahkke6v] {
    background-color: #201F1D;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Montserrat', sans-serif;
}

.save-metadata-btn:hover:not(:disabled)[b-xilahkke6v] {
    background-color: #3A3937;
}

.save-metadata-btn:disabled[b-xilahkke6v] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 480px) {
    .save-metadata-btn[b-xilahkke6v] {
        font-size: 15px;
        padding: 10px 28px;
    }
}
/* /Pages/Notification.razor.rz.scp.css */
.notification-container[b-m3wm35l5ix] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.notification-container[b-m3wm35l5ix]::-webkit-scrollbar {
    display: none;
}

.notification-header[b-m3wm35l5ix] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.back-button[b-m3wm35l5ix] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.back-button:hover[b-m3wm35l5ix] {
    opacity: 0.7;
}

.back-button img[b-m3wm35l5ix] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-title[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin: 0;
}

.notification-content[b-m3wm35l5ix] {
    background-color: #FFFFFF;
    min-height: 330px;
    padding: 0;
    position: relative;
}

.notification-item[b-m3wm35l5ix] {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    position: relative;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover[b-m3wm35l5ix] {
    background-color: #F8F6F3;
}

.notification-item.read[b-m3wm35l5ix] {
    opacity: 0.7;
}

.notification-item.unread[b-m3wm35l5ix] {
    opacity: 1;
}

.notification-indicator[b-m3wm35l5ix] {
    position: absolute;
    left: 9px;
    top: 55px;
    transform: translateY(-6px);
    width: 12px;
    height: 12px;
    background-color: #CEB185;
    border-radius: 50%;
    z-index: 2;
}

.notification-indicator.read[b-m3wm35l5ix] {
    background-color: #E8E5E0;
}

.notification-indicator.unread[b-m3wm35l5ix] {
    background-color: #CEB185;
}

.notification-avatar[b-m3wm35l5ix] {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-avatar img[b-m3wm35l5ix] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

/* Brand-logo fallback (no per-notification image): show the whole infinity
   wordmark inside the circle rather than cropping it like a photo. */
.notification-avatar img.notification-avatar__brand[b-m3wm35l5ix] {
    object-fit: contain;
    padding: 12px;
    background: #F4ECDF;
}

.notification-details[b-m3wm35l5ix] {
    flex: 1;
    min-width: 0;
}

.notification-subtitle[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.notification-message[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.notification-time[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.notification-divider[b-m3wm35l5ix] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Loading, Error, and Empty States */
.loading-container[b-m3wm35l5ix],
.error-container[b-m3wm35l5ix],
.empty-container[b-m3wm35l5ix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
    min-height: 200px;
}

.loading-container p[b-m3wm35l5ix],
.error-container p[b-m3wm35l5ix],
.empty-container p[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

.retry-button[b-m3wm35l5ix] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin-top: 16px;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-m3wm35l5ix] {
    background-color: #B89A6B;
}

/* Load More Button */
.load-more-container[b-m3wm35l5ix] {
    display: flex;
    justify-content: center;
    padding: 20px 25px;
}

.load-more-button[b-m3wm35l5ix] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.load-more-button:hover[b-m3wm35l5ix] {
    background-color: #B89A6B;
}
/* /Pages/Portfolio.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-zhzbek6yek] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-zhzbek6yek 1s linear infinite;
}

@keyframes spin-b-zhzbek6yek {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Header */
.portfolio-header[b-zhzbek6yek] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-zhzbek6yek] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-zhzbek6yek] {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-zhzbek6yek] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-notifications:active[b-zhzbek6yek] {
    transform: translateY(-50%) scale(0.95);
}

.header-notifications img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-settings[b-zhzbek6yek] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-settings:hover[b-zhzbek6yek] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-settings:active[b-zhzbek6yek] {
    transform: translateY(-50%) scale(0.95);
}

.header-settings img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Portfolio Content */
.portfolio-content[b-zhzbek6yek] {
    flex: 1;
    padding: calc(150px + env(safe-area-inset-top, 0px)) 25px 120px 25px; /* Top padding for fixed header, bottom padding for navigation bar and Safari URL bar */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.portfolio-content[b-zhzbek6yek]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Create Album Container - Full Width */
.create-album-container[b-zhzbek6yek] {
    position: relative;
    width: 100%;
    max-width: 352px;
    margin: 0 auto 20px auto;
    height: auto;
}

/* Create Album Panel */
.create-album-panel[b-zhzbek6yek] {
    width: 100%;
    height: 151px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Portfolio Grid - For Folder Thumbnails */
.portfolio-grid[b-zhzbek6yek] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

.create-album-panel:hover[b-zhzbek6yek] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.create-album-panel:active[b-zhzbek6yek] {
    transform: scale(0.98);
}

.album-icon[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.album-icon img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
}

.album-plus[b-zhzbek6yek] {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 48px;
    left: calc(50% + 22px);
    transform: translateX(-50%);
    z-index: 2;
}

.album-plus img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
}

.album-title[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    z-index: 1;
}

/* Folder Container */
.folder-container[b-zhzbek6yek] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-zhzbek6yek] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #FFFFFF;
}

.folder-thumbnail:hover[b-zhzbek6yek] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-zhzbek6yek] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.folder-placeholder[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-zhzbek6yek] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-zhzbek6yek] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Desktop spacing - add more space between header and portfolio grid */
@media (min-width: 769px) {
    .portfolio-content[b-zhzbek6yek] {
        padding-top: calc(150px + env(safe-area-inset-top, 0px)); /* Increased from 100px for desktop */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .loading-container[b-zhzbek6yek] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-zhzbek6yek] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-zhzbek6yek] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .portfolio-content[b-zhzbek6yek] {
        padding: calc(80px + env(safe-area-inset-top, 0px)) 15px 100px 15px;
    }

    .create-album-container[b-zhzbek6yek] {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .portfolio-grid[b-zhzbek6yek] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }

    .folder-container[b-zhzbek6yek] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .folder-thumbnail[b-zhzbek6yek] {
        width: 100%;
        height: 100%;
    }

    .create-album-panel[b-zhzbek6yek] {
        height: 130px;
    }

    .album-title[b-zhzbek6yek] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-zhzbek6yek] {
        padding: calc(150px + env(safe-area-inset-top, 0px)) 10px 100px 10px;
    }

    .portfolio-grid[b-zhzbek6yek] {
        gap: 6px 6px;
        row-gap: 6px;
    }

    .album-icon[b-zhzbek6yek] {
        width: 32px;
        height: 32px;
    }

    .album-plus[b-zhzbek6yek] {
        width: 28px;
        height: 28px;
    }

    .album-title[b-zhzbek6yek] {
        font-size: 14px;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .album-plus[b-zhzbek6yek] {
        right: 20px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-zhzbek6yek] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-zhzbek6yek] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-spinner[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-zhzbek6yek 1s linear infinite;
}

.upload-message[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
}

/* Message Modal Styles */
.message-modal-overlay[b-zhzbek6yek] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-zhzbek6yek] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-zhzbek6yek] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-zhzbek6yek] {
    background-color: #4CAF50;
}

.message-icon.error[b-zhzbek6yek] {
    background-color: #F44336;
}

.message-text[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-zhzbek6yek] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-zhzbek6yek] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-zhzbek6yek] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-zhzbek6yek],
    .message-modal[b-zhzbek6yek] {
        padding: 20px;
        max-width: 280px;
    }

    .upload-message[b-zhzbek6yek],
    .message-text[b-zhzbek6yek] {
        font-size: 14px;
    }

    .message-icon[b-zhzbek6yek] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Add Introduction Video Button */
.intro-video-button-container[b-zhzbek6yek] {
    position: fixed;
    bottom: 110px; /* Increased margin above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 25px;
    z-index: 5;
}

.intro-video-button[b-zhzbek6yek] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-video-button:hover[b-zhzbek6yek] {
    background-color: #2a2825;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(32, 31, 29, 0.3);
}

.intro-video-button:active[b-zhzbek6yek] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for the button */
@media (max-width: 480px) {
    .intro-video-button-container[b-zhzbek6yek] {
        padding: 0 15px;
        bottom: 110px; /* Increased margin for mobile */
    }

    .intro-video-button[b-zhzbek6yek] {
        font-size: 14px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .intro-video-button-container[b-zhzbek6yek] {
        padding: 0 10px;
        bottom: 85px; /* Increased margin for small screens */
    }

    .intro-video-button[b-zhzbek6yek] {
        font-size: 13px;
        height: 38px;
    }
}
/* /Pages/PortfolioFolder.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-e780w4gzen] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .portfolio-container[b-e780w4gzen] {
        max-width: 100%;
    }
}

/* Loading and Error States */
.loading-container[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-e780w4gzen] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-e780w4gzen 1s linear infinite;
}

.loading-container p[b-e780w4gzen] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

@keyframes spin-b-e780w4gzen {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
.portfolio-header[b-e780w4gzen] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

@media (max-width: 401px) {
    .portfolio-header[b-e780w4gzen] {
        max-width: 100%;
    }
}

.header-actions[b-e780w4gzen] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.add-media-button[b-e780w4gzen] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.add-media-button:hover[b-e780w4gzen] {
    opacity: 0.7;
}

.add-media-button img[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-back[b-e780w4gzen] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-e780w4gzen] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-e780w4gzen] {
    opacity: 0.7;
}

.back-button img[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-e780w4gzen] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-e780w4gzen] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
}

/* Selection Button Container */
.selection-button-container[b-e780w4gzen] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999;
}

.selection-action-button[b-e780w4gzen] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.selection-action-button:hover[b-e780w4gzen] {
    background-color: #3A3937;
}

.selection-action-button:active[b-e780w4gzen] {
    background-color: #1A1917;
}

.delete-folder-button[b-e780w4gzen] {
    background-color: #DC3545;
}

.delete-folder-button:hover[b-e780w4gzen] {
    background-color: #C82333;
}

.delete-folder-button:active[b-e780w4gzen] {
    background-color: #BD2130;
}

.selection-buttons-group[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.selection-buttons-group .selection-action-button[b-e780w4gzen] {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.set-thumbnail-button[b-e780w4gzen] {
    background-color: #A6895A;
}

.set-thumbnail-button:hover[b-e780w4gzen] {
    background-color: #CEB185;
}

.set-thumbnail-button:active[b-e780w4gzen] {
    background-color: #B89A6F;
}

.cancel-button[b-e780w4gzen] {
    background-color: #484F54;
}

.cancel-button:hover[b-e780w4gzen] {
    background-color: #6C757D;
}

.cancel-button:active[b-e780w4gzen] {
    background-color: #5A6268;
}

/* Portfolio Content */
.portfolio-content[b-e780w4gzen] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-content.has-selection-buttons[b-e780w4gzen] {
    padding-bottom: 240px;
}

.portfolio-content[b-e780w4gzen]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid */
.portfolio-grid[b-e780w4gzen] {
    display: grid;
    grid-template-columns: 196px 196px;
    gap: 10px 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Portfolio Image Container */
.portfolio-image-container[b-e780w4gzen] {
    width: 196px;
    height: 196px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0;
}

.portfolio-image-container.selected[b-e780w4gzen] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.portfolio-image-container:hover[b-e780w4gzen] {
    transform: scale(1.02);
}

.portfolio-image-container.selected:hover[b-e780w4gzen] {
    transform: scale(1.0);
}

/* Portfolio Images */
.portfolio-image[b-e780w4gzen] {
    width: 196px;
    height: 196px;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    display: block;
    z-index: 1;
    position: relative;
    background-color: #FFFFFF;
}

.portfolio-image-container:has(.portfolio-image)[b-e780w4gzen] {
    background-color: transparent;
}

/* Image Placeholder */
.image-placeholder[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.image-loading[b-e780w4gzen] {
    font-size: 13px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Image Overlay */
.image-overlay[b-e780w4gzen] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    pointer-events: auto;
    z-index: 10;
}

.delete-image-btn[b-e780w4gzen] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 20;
    position: relative;
}

.delete-image-btn:hover[b-e780w4gzen] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-e780w4gzen] {
    transform: scale(0.95);
}

.delete-image-btn svg[b-e780w4gzen] {
    width: 14px;
    height: 14px;
}

/* Selection Indicators */
.selection-indicator[b-e780w4gzen] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-e780w4gzen] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-e780w4gzen] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Upload Overlay */
.upload-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Delete Confirmation Modal */
.modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-e780w4gzen] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-e780w4gzen 0.3s ease-out;
}

@keyframes modalSlideIn-b-e780w4gzen {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-e780w4gzen] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-e780w4gzen] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-body[b-e780w4gzen] {
    padding: 24px;
}

.modal-message[b-e780w4gzen] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-e780w4gzen] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-e780w4gzen] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-e780w4gzen] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-e780w4gzen] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-e780w4gzen] {
    transform: translateY(0);
}

.modal-btn-delete[b-e780w4gzen] {
    background: #DC3545;
    color: #FFFFFF;
}

.modal-btn-delete:hover[b-e780w4gzen] {
    background: #C82333;
    transform: translateY(-1px);
}

.modal-btn-delete:active[b-e780w4gzen] {
    transform: translateY(0);
}

.upload-progress[b-e780w4gzen] {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.upload-spinner[b-e780w4gzen] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-e780w4gzen 1s linear infinite;
    margin-bottom: 15px;
}

.upload-progress p[b-e780w4gzen] {
    margin: 0;
    font-size: 16px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 480px) {
    .portfolio-content[b-e780w4gzen] {
        padding: 20px 15px 160px 15px;
    }

    .portfolio-content.has-selection-buttons[b-e780w4gzen] {
        padding-bottom: 220px;
    }

    .portfolio-grid[b-e780w4gzen] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
    }

    .portfolio-image-container[b-e780w4gzen] {
        width: 100%;
        height: 181px;
    }

    .folder-title[b-e780w4gzen] {
        font-size: 16px;
    }

    .delete-image-btn[b-e780w4gzen] {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
    }

    .delete-image-btn svg[b-e780w4gzen] {
        width: 16px;
        height: 16px;
    }

    .modal-container[b-e780w4gzen] {
        max-width: 350px;
        margin: 0 10px;
    }

    .modal-header[b-e780w4gzen] {
        padding: 20px 20px 0 20px;
    }

    .modal-title[b-e780w4gzen] {
        font-size: 18px;
    }

    .modal-body[b-e780w4gzen] {
        padding: 20px;
    }

    .modal-message[b-e780w4gzen] {
        font-size: 15px;
    }

    .modal-footer[b-e780w4gzen] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-btn[b-e780w4gzen] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }

    .selection-circle[b-e780w4gzen],
    .selection-check[b-e780w4gzen] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .selection-indicator[b-e780w4gzen] {
        top: 6px;
        left: 6px;
    }

    .selection-button-container[b-e780w4gzen] {
        padding: 0 20px;
    }

    .selection-action-button[b-e780w4gzen] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-e780w4gzen] {
        padding: 15px 10px 160px 10px;
    }

    .portfolio-grid[b-e780w4gzen] {
        gap: 6px 6px;
        row-gap: 50px;
    }

    .folder-title[b-e780w4gzen] {
        font-size: 14px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .portfolio-image[b-e780w4gzen] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Upload Modal Styles */
.upload-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-e780w4gzen] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-progress-bar-container[b-e780w4gzen] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-e780w4gzen] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-e780w4gzen] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-e780w4gzen] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-e780w4gzen] {
    background-color: #4CAF50;
}

.message-icon.error[b-e780w4gzen] {
    background-color: #F44336;
}

.message-text[b-e780w4gzen] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-e780w4gzen] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-e780w4gzen] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-e780w4gzen] {
    transform: translateY(0);
    background-color: #1a1917;
}

@media (max-width: 480px) {
    .upload-modal[b-e780w4gzen],
    .message-modal[b-e780w4gzen] {
        padding: 20px;
        max-width: 280px;
    }

    .upload-message[b-e780w4gzen],
    .message-text[b-e780w4gzen] {
        font-size: 14px;
    }

    .message-icon[b-e780w4gzen] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-e780w4gzen] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-e780w4gzen 0.3s ease-out;
}

@media (max-width: 768px) {
    .cropper-modal-overlay[b-e780w4gzen] {
        padding: 10px;
    }

    .cropper-modal-container[b-e780w4gzen] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-e780w4gzen] {
        padding: 5px;
    }

    .cropper-modal-container[b-e780w4gzen] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/Promotion/PromotionLanding.razor.rz.scp.css */
/* Discount banner unique to the client signup landing page. Everything else
   (card shell, logo, headings, form) comes from SignupLayout. Keyframes are
   prefixed (promo-*) because @keyframes are global even in scoped CSS. */

.discount-banner[b-z3mf6itimo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #CEB185 0%, #E0D2B8 100%);
    box-shadow: 0 8px 22px -12px rgba(206, 177, 133, 0.75);
    animation: promo-pulse-b-z3mf6itimo 2.6s ease-in-out infinite;
}

.discount-icon[b-z3mf6itimo] {
    font-size: 22px;
    line-height: 1;
    animation: promo-bounce-b-z3mf6itimo 1.8s ease-in-out infinite;
}

.discount-title[b-z3mf6itimo] {
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #201F1D;
    text-align: center;
}

/* Names the promoter whose link the client followed, so they can see the form is the right
   one before handing over their details. */
.registering-with[b-z3mf6itimo] {
    margin: -4px 0 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FBF8F3;
    border-left: 3px solid #CEB185;
    font-size: 14px;
    color: #201F1D;
}

.access-blocked[b-z3mf6itimo] {
    color: #201F1D;
}

.access-blocked-hint[b-z3mf6itimo] {
    font-size: 14px;
    color: #6B6660;
}

@keyframes promo-pulse-b-z3mf6itimo {
    0%, 100% { box-shadow: 0 8px 22px -12px rgba(206, 177, 133, 0.75); }
    50%      { box-shadow: 0 10px 30px -10px rgba(206, 177, 133, 0.95); }
}

@keyframes promo-bounce-b-z3mf6itimo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (max-width: 520px) {
    .discount-title[b-z3mf6itimo] {
        font-size: 14px;
    }
}
/* /Pages/Promotion/PromotionReferral.razor.rz.scp.css */
/* QR-code output box on the model referral tool. Card shell, headings and the
   name input are themed by SignupLayout; only the QR container is bespoke. */

.required[b-77yf1v63ns] {
    color: #CEB185;
}

/* Who the promoter is capturing as. Read-only by design — the name comes from the access
   link, so there is nothing here to edit. */
.promoter-badge[b-77yf1v63ns] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 14px 0 4px;
    padding: 14px 16px;
    border: 1px solid #E8E5E0;
    border-left: 3px solid #CEB185;
    border-radius: 10px;
    background: #FBF8F3;
}

.promoter-badge__label[b-77yf1v63ns] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B6660;
}

.promoter-badge__name[b-77yf1v63ns] {
    font-size: 18px;
    font-weight: 700;
    color: #201F1D;
}

.promoter-badge__expiry[b-77yf1v63ns] {
    margin-top: 4px;
    font-size: 13px;
    color: #6B6660;
}

.access-checking[b-77yf1v63ns] {
    color: #6B6660;
}

.access-blocked[b-77yf1v63ns] {
    color: #201F1D;
}

.access-blocked-hint[b-77yf1v63ns] {
    font-size: 14px;
    color: #6B6660;
}

.qr-code-container[b-77yf1v63ns] {
    margin: 18px 0 4px;
    padding: 20px 18px;
    border: 1px solid #ECE6DB;
    border-radius: 14px;
    background: #FBF8F3;
    text-align: center;
}

.qr-code-label[b-77yf1v63ns] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #201F1D;
    margin: 0 0 16px;
}

.qr-code-image[b-77yf1v63ns] {
    display: flex;
    justify-content: center;
}

.qr-code-image[b-77yf1v63ns]  canvas,
.qr-code-image[b-77yf1v63ns]  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
/* /Pages/Promotion/RegistrationForm.razor.rz.scp.css */
/* Scoped styling for the shared promotion registration form. Field inputs,
   labels and .btn-primary are already themed by SignupLayout (::deep); this
   only covers the bits SignupLayout doesn't: required/optional accents, the
   two-column phone rows, validation-message colour, and the result banner. */

.reg-form[b-kimy1sj45d] {
    display: block;
    text-align: left;
}

.required[b-kimy1sj45d] {
    color: #CEB185;
}

.optional[b-kimy1sj45d] {
    font-weight: 400;
    color: #A89F92;
    font-size: 12px;
}

.phone-row[b-kimy1sj45d] {
    display: flex;
    gap: 10px;
}

.phone-col-code[b-kimy1sj45d] {
    flex: 0 0 96px;
}

.phone-col-num[b-kimy1sj45d] {
    flex: 1;
}

/* Smaller sub-labels inside the split phone rows (overrides SignupLayout's
   ::deep .form-label sizing, which wins on specificity without !important). */
.sub-label[b-kimy1sj45d] {
    font-size: 12px !important;
    margin-bottom: 4px !important;
    color: #6B645B !important;
}

/* Validation output is rendered by child <ValidationMessage> components, so it
   carries their scope — reach it with ::deep from the .reg-form wrapper. */
.reg-form[b-kimy1sj45d]  .validation-message {
    color: #C0392B;
    font-size: 13px;
    margin-top: 4px;
}

.reg-form[b-kimy1sj45d]  .invalid {
    border-color: #C0392B;
}

.submit-message[b-kimy1sj45d] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.submit-message.success[b-kimy1sj45d] {
    background: #EAF5EC;
    color: #256B37;
    border: 1px solid #BFE3C6;
}

.submit-message.error[b-kimy1sj45d] {
    background: #FBEAE8;
    color: #C0392B;
    border: 1px solid #F0C4BE;
}
/* /Pages/Search.razor.rz.scp.css */
/* Search Page Styles */
.search-container[b-f8j7q7hnrd] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.search-container[b-f8j7q7hnrd]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.search-header[b-f8j7q7hnrd] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-f8j7q7hnrd] {
    position: absolute;
    left: 20px;
    top: 63px;
    height: 23px;
    width: 145px;
}

.header-logo img[b-f8j7q7hnrd] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-f8j7q7hnrd] {
    position: absolute;
    right: 20px;
    top: 56px;
    width: 40px;
    height: 40px;
}

.notification-icon[b-f8j7q7hnrd] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-f8j7q7hnrd] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.notification-badge[b-f8j7q7hnrd] {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: #CEB185;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge span[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1;
}

/* Search Bar Styles */
.search-bar-container[b-f8j7q7hnrd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-f8j7q7hnrd] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-f8j7q7hnrd] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-f8j7q7hnrd] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-f8j7q7hnrd] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-f8j7q7hnrd]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-f8j7q7hnrd] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-f8j7q7hnrd] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-f8j7q7hnrd] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-f8j7q7hnrd] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Search Results Styles */
.search-results[b-f8j7q7hnrd] {
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    min-height: 400px;
}

.model-card[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.model-card:hover[b-f8j7q7hnrd] {
    transform: translateY(-2px);
}

.model-image-container[b-f8j7q7hnrd] {
    position: relative;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.model-image[b-f8j7q7hnrd] {
    border-radius: 8px;
}

.model-info-grid[b-f8j7q7hnrd] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    width: 100%;
    align-items: center;
    padding: 0 25px;
    overflow: hidden;
    min-width: 0;
}

.model-name[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 4vw, 20px);
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.rating-stars[b-f8j7q7hnrd] {
    display: flex;
    gap: 2px;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.model-location[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.model-experience[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
}

.rating-stars img[b-f8j7q7hnrd] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Loading, Error, and No Models States */
.loading-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-f8j7q7hnrd] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-f8j7q7hnrd 1s linear infinite;
}

@keyframes spin-b-f8j7q7hnrd {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.error-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
    text-align: center;
}

.retry-button[b-f8j7q7hnrd] {
    background-color: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 24px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-f8j7q7hnrd] {
    background-color: #E0D2B8;
}

.no-models-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.no-models-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
    text-align: center;
}


/* Desktop responsive adjustments */
@media (min-width: 769px) {
    .search-container[b-f8j7q7hnrd] {
        max-width: 402px;
        margin: 0 auto;
    }

    .search-results[b-f8j7q7hnrd] {
        padding: 20px 25px 0 25px;
    }

    .model-info-grid[b-f8j7q7hnrd] {
        padding: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .search-container[b-f8j7q7hnrd] {
        max-width: 100%;
    }

    .search-bar-container[b-f8j7q7hnrd] {
        padding: 10px 20px;
    }
}

@media (max-width: 360px) {
    .search-header[b-f8j7q7hnrd] {
        padding: 0 15px;
    }

    .header-logo[b-f8j7q7hnrd] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-f8j7q7hnrd] {
        right: 15px;
    }

    .search-bar-container[b-f8j7q7hnrd] {
        padding: 10px 15px;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Settings Screen Styles */
.settings-screen[b-kql6c03vx8] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 402px;
    margin: 0 auto;
}

.settings-header[b-kql6c03vx8] {
    position: relative;
    background-color: var(--color-white);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.settings-header .back-button[b-kql6c03vx8] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.settings-header .back-button:hover[b-kql6c03vx8] {
    opacity: 0.7;
}

.settings-header .back-button img[b-kql6c03vx8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-title[b-kql6c03vx8] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    margin: 0;
}

.user-profile-section[b-kql6c03vx8] {
    padding: 44px 0 33px 0;
    text-align: center;
    background-color: var(--color-white);
}

.user-name[b-kql6c03vx8] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 16px 0;
}

.user-role[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

.settings-content[b-kql6c03vx8] {
    flex: 1;
    padding: 0 25px;
    padding-bottom: 30px;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.settings-content[b-kql6c03vx8]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

.settings-section[b-kql6c03vx8] {
    margin-bottom: 40px;
}

.section-title[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 18px 0;
}

.settings-card[b-kql6c03vx8] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.setting-item[b-kql6c03vx8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: 80px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.setting-item:hover[b-kql6c03vx8] {
    background-color: #f8f8f8;
}

.setting-item:not(:last-child)[b-kql6c03vx8] {
    border-bottom: 1px solid var(--color-border);
}

.setting-info[b-kql6c03vx8] {
    flex: 1;
}

.setting-label[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin-bottom: 8px;
}

.setting-description[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
}

.setting-arrow[b-kql6c03vx8] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.setting-arrow img[b-kql6c03vx8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logout-section[b-kql6c03vx8] {
    margin: 46px 0 17px 0;
    display: flex;
    justify-content: center;
}

.logout-button[b-kql6c03vx8] {
    width: 290px;
    height: 44px;
    background-color: var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-button:hover[b-kql6c03vx8] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logout-text[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-button);
    line-height: var(--line-height);
    color: var(--color-white);
    text-align: center;
}

.delete-account-section[b-kql6c03vx8] {
    text-align: center;
    margin-bottom: 30px;
}

.delete-account-link[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.delete-account-link:hover[b-kql6c03vx8] {
    opacity: 0.7;
}
/* /Pages/Staff/Dashboard.razor.rz.scp.css */
/* Staff dashboard. Lifted out of the page's inline <style> block so shift mode could be added
   without the file becoming markup-and-stylesheet in one scroll.

   The cards stay white; the shift panel brings its own cream (#F4ECDF) surface, which is what
   makes "you're on shift" legible at a glance without repainting anything else. */

.staff-dashboard[b-4o2wqcbepj] {
    padding: 16px;
    padding-top: calc(76px + env(safe-area-inset-top, 0));
    padding-bottom: 96px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    background: #FFFFFF;
    min-height: 100%;
}

.staff-dashboard__card[b-4o2wqcbepj] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(32, 31, 29, 0.04);
}

.staff-dashboard__card-title[b-4o2wqcbepj] { font-size: 14px; font-weight: 600; color: #201F1D; margin: 0 0 8px 0; }
.staff-dashboard__welcome[b-4o2wqcbepj] { margin: 4px 0 18px; }
.staff-dashboard__welcome-title[b-4o2wqcbepj] { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: #201F1D; margin: 0; }
.staff-dashboard__welcome-sub[b-4o2wqcbepj] { font-size: 14px; color: #6B645B; margin: 6px 0 0; }
.staff-dashboard__event-store[b-4o2wqcbepj] { font-size: 16px; font-weight: 600; margin: 0; color: #201F1D; }
.staff-dashboard__event-date[b-4o2wqcbepj] { font-size: 13px; color: #555; margin: 4px 0; }
.staff-dashboard__event-address[b-4o2wqcbepj] { font-size: 12px; color: #888; margin: 4px 0; }
.staff-dashboard__event-rate[b-4o2wqcbepj] { font-size: 14px; font-weight: 600; color: #CEB185; margin: 4px 0; }
.staff-dashboard__event-photo[b-4o2wqcbepj] { font-size: 11px; color: #c80; margin: 4px 0; }
.staff-dashboard__cta[b-4o2wqcbepj] { display: inline-block; margin-top: 8px; color: #CEB185; text-decoration: underline; font-size: 13px; }
.staff-dashboard__empty[b-4o2wqcbepj] { color: #888; font-size: 13px; margin: 0; }
.staff-dashboard__app-list[b-4o2wqcbepj] { list-style: none; padding: 0; margin: 0; max-height: 180px; overflow-y: auto; }
.staff-dashboard__app-item[b-4o2wqcbepj] { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E5E5E5; font-size: 12px; }
.staff-dashboard__reliability[b-4o2wqcbepj] { display: flex; gap: 24px; }
.staff-dashboard__metric[b-4o2wqcbepj] { display: flex; flex-direction: column; }
.staff-dashboard__metric-value[b-4o2wqcbepj] { font-size: 24px; font-weight: 600; color: #201F1D; }
.staff-dashboard__metric-label[b-4o2wqcbepj] { font-size: 11px; color: #888; }
.staff-dashboard__loading[b-4o2wqcbepj] { text-align: center; padding: 40px; color: #888; }
.staff-dashboard__event-more[b-4o2wqcbepj] { font-size: 12px; color: #8A8378; margin: 4px 0 0; }

/* ── Shift mode ──────────────────────────────────────────────────────────────────────
   The panel is the whole message, so what surrounds it stays deliberately plain: a row per
   other shift, and one quiet line when the data has stopped refreshing. */

.staff-dashboard__shift[b-4o2wqcbepj] { margin-bottom: 12px; }

.staff-dashboard__others[b-4o2wqcbepj] {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.staff-dashboard__other[b-4o2wqcbepj] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #201F1D;
    text-align: left;
    cursor: pointer;
}

.staff-dashboard__other-store[b-4o2wqcbepj] { font-weight: 600; flex: 1 1 auto; }
.staff-dashboard__other-when[b-4o2wqcbepj] { font-size: 13px; color: #6B645B; }
.staff-dashboard__other-state[b-4o2wqcbepj] { font-size: 12px; color: #6B645B; }

/* An unfinished shift is a loose end, not an alarm — a hairline of gold, no red, no badge. */
.staff-dashboard__other--unfinished[b-4o2wqcbepj] { border-left: 3px solid #CEB185; }

.staff-dashboard__stale[b-4o2wqcbepj] {
    font-size: 12px;
    color: #8A8378;
    margin: 0 0 12px;
}
/* /Pages/Staff/Events/CheckIn.razor.rz.scp.css */
/* Plan 04-04 — scoped theming for the staff check-in stepper. Gold #CEB185 fill
   with DARK #201F1D text (never white-on-gold), Montserrat, destructive #C0392B,
   #F4ECDF card surfaces with 1px #E8E5E0 borders, 44px touch targets. Uses ::deep
   to theme the Radzen buttons without touching global app.css. */

.checkin-page[b-w40tdb2393] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    max-width: 480px;
    margin: 0 auto;
    /* Clear the fixed StaffTopHeader (~76px) + bottom-nav safe area (~96px). */
    padding-top: calc(76px + env(safe-area-inset-top, 0));
    padding-bottom: 96px;
}

.back-link[b-w40tdb2393] {
    color: #9E815C;
    font-weight: 500;
}

/* Page-specific class — NOT the global `.page-title` (app.css absolutely-centres
   that one with translate(-50%,-50%), which would float the title over the
   stepper). Keep this in normal flow. */
.checkin-title[b-w40tdb2393] {
    position: static;
    transform: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 12px 0 20px;
}

/* ── Vertical stage list ── */
.stepper[b-w40tdb2393] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stage[b-w40tdb2393] {
    display: flex;
    gap: 12px;
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 16px;
}

.stage-upcoming[b-w40tdb2393] {
    opacity: 0.55;
}

.stage-marker[b-w40tdb2393] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    color: #201F1D;
}

.stage-active .stage-marker[b-w40tdb2393] {
    background: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.stage-done .stage-marker[b-w40tdb2393] {
    background: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.stage-body[b-w40tdb2393] {
    flex: 1 1 auto;
    min-width: 0;
}

.stage-heading[b-w40tdb2393] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.stage-text[b-w40tdb2393] {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 8px 0;
}

.error-text[b-w40tdb2393] {
    color: #C0392B;
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0;
}

.photo-note[b-w40tdb2393] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #9E815C;
    margin: 0 0 4px;
}

.override-confirm[b-w40tdb2393] {
    color: #201F1D;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 8px;
}

/* ── Readiness checklist ── */
.readiness-list[b-w40tdb2393] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.readiness-item[b-w40tdb2393] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.readiness-row[b-w40tdb2393] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 8px 12px;
}

.readiness-note[b-w40tdb2393] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #201F1D;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 10px 12px;
}

.readiness-note[b-w40tdb2393]::placeholder {
    color: #9E815C;
}

.readiness-note:focus[b-w40tdb2393] {
    outline: none;
    border-color: #CEB185;
}

/* Required-and-empty: nudge the staffer to add the note (gold, not alarming red). */
.readiness-note.is-required[b-w40tdb2393] {
    border-color: #CEB185;
    background: #FBF7F0;
}

.readiness-prompt[b-w40tdb2393] {
    font-size: 16px;
    flex: 1 1 auto;
}

.readiness-toggle[b-w40tdb2393] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.toggle-btn[b-w40tdb2393] {
    min-height: 44px;
    min-width: 64px;
    border-radius: 8px;
    border: 1px solid #E8E5E0;
    background: #FFFFFF;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
}

.toggle-btn.active[b-w40tdb2393] {
    background: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.toggle-btn.danger.active[b-w40tdb2393] {
    background: #C0392B;
    border-color: #C0392B;
    color: #FFFFFF;
}

/* ── Photo ── */
/* Styled file picker: hide the native input, present the label as a gold app button. */
.photo-picker[b-w40tdb2393] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin-top: 8px;
    padding: 0 18px;
    border-radius: 8px;
    background: #CEB185;
    border: 1px solid #CEB185;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.photo-picker:hover[b-w40tdb2393] {
    background: #B89970;
    border-color: #B89970;
}

.checkin-page[b-w40tdb2393]  .photo-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.photo-preview[b-w40tdb2393] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid #E8E5E0;
}

/* ── Buttons (theme the Radzen children) ── */
.checkin-page[b-w40tdb2393]  .rz-button {
    min-height: 42px;
    padding: 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 8px;
}

.checkin-page[b-w40tdb2393]  .cta-gold.rz-button,
.checkin-page[b-w40tdb2393]  .cta-gold.rz-button:hover,
.checkin-page[b-w40tdb2393]  .cta-gold.rz-button:focus {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.checkin-page[b-w40tdb2393]  .cta-gold.rz-button:hover {
    background-color: #B89970;
    border-color: #B89970;
}

.checkin-page[b-w40tdb2393]  .cta-gold.rz-button:disabled {
    opacity: 0.6;
}

.checkin-page[b-w40tdb2393]  .override-btn.rz-button {
    background-color: #FFFFFF;
    border: 1px solid #C0392B;
    color: #C0392B;
}
/* /Pages/Staff/Events/Detail.razor.rz.scp.css */
/* Scoped theming for what is LEFT of the attendance area on the staff event page:
   the "check-in isn't open yet" card, the last-shift summary, and the receipts link.
   The live shift itself is ShiftPanel, which brings its own isolated styles — the
   lateness banner and break timer that used to live here moved with it.

   #F4ECDF cards, 1px #E8E5E0 borders, Montserrat, 44px touch targets. Apply/withdraw
   styling stays in the page's inline <style> block. */

.attendance-area[b-zpp7bgwhzu] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.attendance-card[b-zpp7bgwhzu] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    padding: 16px;
}

.shift-row[b-zpp7bgwhzu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
}

.shift-label[b-zpp7bgwhzu] {
    font-size: 16px;
    font-weight: 400;
}

.shift-value[b-zpp7bgwhzu] {
    font-size: 16px;
    font-weight: 600;
}

.empty-state .empty-heading[b-zpp7bgwhzu],
.missed-card .missed-heading[b-zpp7bgwhzu],
.summary-card .summary-heading[b-zpp7bgwhzu] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-body[b-zpp7bgwhzu] {
    font-size: 16px;
    line-height: 1.5;
}

/* A missed shift. Amber down the edge rather than red: it is an outcome to explain, not a
   refusal — and the gold CTA stays reserved for the shift panel's one primary action, so this
   asks in plain text rather than competing with it. */
.missed-card[b-zpp7bgwhzu] {
    border-left: 4px solid #B8860B;
}

.missed-cta[b-zpp7bgwhzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 18px;
    background: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #201F1D;
}

.missed-cta:disabled[b-zpp7bgwhzu] { opacity: 0.6; }

.makeup-note[b-zpp7bgwhzu] {
    font-size: 13px;
    color: #6B5A2E;
    margin-top: 8px;
    font-weight: 500;
}

.error-text[b-zpp7bgwhzu] {
    color: #C0392B;
    font-size: 16px;
    line-height: 1.5;
}

/* Theme the Radzen CTAs gold/dark without touching global app.css. */
.attendance-area[b-zpp7bgwhzu]  .rz-button {
    min-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
}

.attendance-area[b-zpp7bgwhzu]  .cta-gold.rz-button,
.attendance-area[b-zpp7bgwhzu]  .cta-gold.rz-button:hover,
.attendance-area[b-zpp7bgwhzu]  .cta-gold.rz-button:focus {
    background-color: #CEB185;
    border-color: #CEB185;
    color: #201F1D;
}

.attendance-area[b-zpp7bgwhzu]  .cta-gold.rz-button:hover {
    background-color: #B89970;
    border-color: #B89970;
}

.attendance-area[b-zpp7bgwhzu]  .cta-gold.rz-button:disabled {
    opacity: 0.6;
}
/* /Pages/Staff/Events/MySchedule.razor.rz.scp.css */
/* Staff My Schedule.
   Everything here is scoped, which is the point: the page this replaces styled itself from an
   unscoped inline <style> block, so .evt-card / .evt-btn / .evt-tag leaked into every other page
   in the app. */

.ms[b-06mlm9ijve] {
    width: 100%;
    box-sizing: border-box;
    /* Clears the fixed StaffTopHeader (60px + notch) and the 80px bottom nav. */
    padding: calc(76px + env(safe-area-inset-top, 0)) 16px 96px;
    font-family: 'Montserrat', sans-serif;
    background: #FFFFFF;
    min-height: 100vh;
}

.ms__header[b-06mlm9ijve] { margin-bottom: 16px; }

.ms__title[b-06mlm9ijve] {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #201F1D;
    margin: 0 0 4px;
}

.ms__sub[b-06mlm9ijve] {
    font-size: 13px;
    color: #6B645B;
    margin: 0;
}

.ms__sub a[b-06mlm9ijve] {
    color: #B89970;
    font-weight: 600;
    text-decoration: none;
}

.ms__sub a:hover[b-06mlm9ijve] { text-decoration: underline; }

/* Styled as the link it replaces — same slot, same weight — because it does the same job:
   gets you back to the feed your Account settings describe. A button rather than an anchor
   since it changes the view in place instead of navigating. */
.ms__sub-reset[b-06mlm9ijve] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: #B89970;
    font-weight: 600;
    cursor: pointer;
}

.ms__sub-reset:hover[b-06mlm9ijve] { text-decoration: underline; }

.ms__loading[b-06mlm9ijve] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.ms__panelbody[b-06mlm9ijve] { margin-top: 18px; }

.ms__block + .ms__block[b-06mlm9ijve] { margin-top: 24px; }

/* ── Two-column shell ───────────────────────────────────────────────────────────────
   Geometry follows Pages/Admin/Sales/ReceiptsQueue.razor.css: flex row, fixed-basis panel,
   sticky within the scroll container. */

.ms-layout[b-06mlm9ijve] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ms-main[b-06mlm9ijve] {
    flex: 1 1 auto;
    /* Without this a long store name in a flex child refuses to shrink and the whole page
       scrolls sideways. */
    min-width: 0;
}

/* ── The panel ──────────────────────────────────────────────────────────────────────
   ONE element, two presentations. Below 768px it is position:fixed, so where it sits in the
   flex row is irrelevant — it leaves flow entirely. That is why there is no display toggling,
   no @if on a breakpoint, and no need for the global .adm-desktop-only / .adm-mobile-only
   helpers (whose hide-only semantics would collide with these scoped selectors anyway). */

.ms-panel[b-06mlm9ijve] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Not bottom: 0 — on iOS Safari the large viewport puts the foot of the sheet underneath the
       browser chrome, so the CTA ends up unreachable. */
    height: 100dvh;
    /* Above both StaffTopHeader and the bottom nav, which are z-index 1000. */
    z-index: 1100;
    background: #FFFFFF;
    transform: translateX(100%);
    /* Keeps the closed sheet out of the tab order and away from screen readers; the delayed
       transition lets the slide-out finish before it disappears. */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s .22s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Stops a scroll gesture inside the sheet chaining into the page behind it. */
    overscroll-behavior: contain;
}

.ms-panel.is-open[b-06mlm9ijve] {
    transform: none;
    visibility: visible;
    transition: transform .22s ease;
}

.ms-panel__inner[b-06mlm9ijve] {
    /* The shell is 430px but a fixed sheet is viewport-wide, so between 430 and 767 the content
       would stretch well past the measure everything else on the page is set to. */
    max-width: 480px;
    margin: 0 auto;
    min-height: 100%;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ms-panel__placeholder[b-06mlm9ijve] { display: none; }

@media (min-width: 768px) {
    .ms[b-06mlm9ijve] {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ms-panel[b-06mlm9ijve] {
        position: sticky;
        /* Clears the fixed header, which the sticky column scrolls under rather than over. */
        top: calc(88px + env(safe-area-inset-top, 0));
        left: auto;
        right: auto;
        height: auto;
        max-height: calc(100dvh - 120px);
        z-index: auto;
        flex: 0 0 400px;
        max-width: 400px;
        transform: none;
        visibility: visible;
        transition: none;
        border: 1px solid #E8E5E0;
        border-radius: 14px;
        overflow: hidden auto;
    }

    .ms-panel__inner[b-06mlm9ijve] {
        max-width: none;
        padding: 0;
    }

    /* An empty right-hand column reads as a rendering failure; say what it is for instead. */
    .ms-panel__placeholder[b-06mlm9ijve] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 48px 24px;
        text-align: center;
        color: #8A8378;
    }

    .ms-panel__placeholder i[b-06mlm9ijve] {
        font-size: 32px;
        color: #C9BCA3;
    }

    .ms-panel__placeholder p[b-06mlm9ijve] {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (min-width: 1024px) {
    .ms-layout[b-06mlm9ijve] { gap: 32px; }
    .ms-panel[b-06mlm9ijve] { flex-basis: 420px; max-width: 420px; }
}
/* /Pages/Staff/Events/ReceiptDetail.razor.rz.scp.css */
/* One receipt. Same conventions as the receipts table: Montserrat, 480px column, #E8E5E0 borders,
   44px touch targets. Gold (#CEB185) is reserved for the one primary action, which on this page is
   Save changes — and only while editing. */

/* Clears the FIXED StaffTopHeader (60px) plus the iOS notch. The same expression Dashboard,
   MySchedule, CheckIn and the staff event page all use — a guessed smaller number leaves the
   back link underneath the header, where it cannot be seen or tapped. */
.receipt-detail-page[b-7py94yhc5x] {
    max-width: 480px;
    padding: calc(76px + env(safe-area-inset-top, 0)) 16px 48px;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.back-link[b-7py94yhc5x] {
    display: inline-block;
    color: #6B645B;
    font-size: 14px;
    margin-bottom: 16px;
}

.detail-head[b-7py94yhc5x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.detail-title[b-7py94yhc5x] {
    font-weight: 600;
    font-size: 20px;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-sub[b-7py94yhc5x] {
    color: #6B645B;
    font-size: 14px;
    margin: 4px 0 16px;
}

/* ── The photo ── */
.detail-photo[b-7py94yhc5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 12px;
    min-height: 120px;
    margin-bottom: 16px;
}

.detail-photo img[b-7py94yhc5x] {
    max-width: 100%;
    max-height: 420px;
    border-radius: 8px;
    display: block;
}

.detail-photo__missing[b-7py94yhc5x] {
    margin: 0;
    font-size: 14px;
    color: #6B645B;
}

/* ── What was claimed ── */
.detail-lines[b-7py94yhc5x] {
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 12px 14px;
}

.detail-line[b-7py94yhc5x] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F1EEE9;
}

.detail-line__brand[b-7py94yhc5x] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-line__qty[b-7py94yhc5x] {
    flex: 0 0 auto;
    font-size: 14px;
    color: #6B645B;
    /* "3 units" must never wrap between the number and its unit — the brand truncates first. */
    white-space: nowrap;
}

.detail-line__total[b-7py94yhc5x] {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
}

.detail-lines__none[b-7py94yhc5x] {
    margin: 0 0 8px;
    font-size: 14px;
    color: #6B645B;
}

.detail-total[b-7py94yhc5x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
}

.detail-total__label[b-7py94yhc5x] {
    font-size: 15px;
    color: #201F1D;
}

.detail-total__figure[b-7py94yhc5x] {
    font-size: 16px;
    font-weight: 600;
}

/* ── Actions ── */
.detail-actions[b-7py94yhc5x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.detail-cta[b-7py94yhc5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    background: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.detail-cta:hover[b-7py94yhc5x] { background: #B89970; }
.detail-cta:disabled[b-7py94yhc5x] { opacity: 0.6; cursor: default; }

.detail-secondary[b-7py94yhc5x] {
    width: 100%;
    min-height: 44px;
    background: #FFFFFF;
    color: #201F1D;
    border: 1px solid #201F1D;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.detail-secondary:hover[b-7py94yhc5x] { background: #F4ECDF; }
.detail-secondary:disabled[b-7py94yhc5x] { opacity: 0.6; cursor: default; }

.detail-delete[b-7py94yhc5x] {
    width: 100%;
    min-height: 44px;
    background: #FFFFFF;
    color: #C0392B;
    border: 1px solid #C0392B;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.detail-delete:disabled[b-7py94yhc5x] { opacity: 0.6; cursor: default; }

.detail-locked[b-7py94yhc5x] {
    margin: 16px 0 0;
    font-size: 14px;
    color: #6B645B;
    line-height: 1.5;
}

/* ── Edit banner — calm and neutral. Amending your own not-yet-reviewed receipt is an ordinary
      thing to do, so amber and red stay reserved for states that need attention. ── */
.detail-editing[b-7py94yhc5x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.detail-editing .bi[b-7py94yhc5x] {
    color: #6B645B;
    line-height: 1.5;
}

.detail-editing__title[b-7py94yhc5x] {
    font-weight: 600;
    font-size: 15px;
}

.detail-editing__body[b-7py94yhc5x] {
    margin: 4px 0 0;
    font-size: 14px;
    color: #6B645B;
    line-height: 1.5;
}

/* ── Missing / deleted ── */
.detail-missing[b-7py94yhc5x] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.detail-missing__link[b-7py94yhc5x] {
    display: inline-block;
    margin-top: 12px;
    color: #201F1D;
    font-weight: 600;
    font-size: 14px;
}

.empty-heading[b-7py94yhc5x] {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.empty-body[b-7py94yhc5x] {
    font-size: 14px;
    color: #6B645B;
    line-height: 1.5;
    margin: 0;
}

.error-text[b-7py94yhc5x] {
    color: #C0392B;
    font-size: 14px;
    line-height: 1.4;
    margin: 12px 0 0;
}
/* /Pages/Staff/Events/ReceiptsList.razor.rz.scp.css */
/* The receipts table. Montserrat, 12px radius, #E8E5E0 borders, 480px column, 44px touch targets —
   the staff dashboard's conventions, so this reads as part of the app. Gold (#CEB185) is reserved
   for the single Add-receipts button. */

/* Clears the FIXED StaffTopHeader (60px) plus the iOS notch. The same expression Dashboard,
   MySchedule, CheckIn and the staff event page all use — a guessed smaller number leaves the
   back link underneath the header, where it cannot be seen or tapped. */
.receipts-page[b-dg9k59mrvp] {
    max-width: 480px;
    padding: calc(76px + env(safe-area-inset-top, 0)) 16px 48px;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.back-link[b-dg9k59mrvp] {
    display: inline-block;
    color: #6B645B;
    font-size: 14px;
    margin-bottom: 16px;
}

.receipts-title[b-dg9k59mrvp] {
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}

.receipts-sub[b-dg9k59mrvp] {
    color: #6B645B;
    font-size: 14px;
    margin: 4px 0 16px;
}

/* ── The one primary action — gold fill, dark text. ── */
.receipts-cta[b-dg9k59mrvp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 16px;
}

.receipts-cta:hover[b-dg9k59mrvp] {
    background: #B89970;
}

.receipts-empty[b-dg9k59mrvp] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.empty-heading[b-dg9k59mrvp] {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.empty-body[b-dg9k59mrvp] {
    font-size: 14px;
    color: #6B645B;
    line-height: 1.5;
    margin: 0;
}

/* ── One row per receipt ── */
.receipts-list[b-dg9k59mrvp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receipt-row[b-dg9k59mrvp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

.receipt-row:hover[b-dg9k59mrvp] {
    border-color: #CEB185;
}

.receipt-row__main[b-dg9k59mrvp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.receipt-row__brands[b-dg9k59mrvp] {
    font-weight: 600;
    font-size: 15px;
    color: #201F1D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-row__figures[b-dg9k59mrvp] {
    font-size: 13px;
    color: #6B645B;
}

.receipt-row__side[b-dg9k59mrvp] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.receipt-row__day[b-dg9k59mrvp] {
    font-size: 12px;
    color: #8A8378;
    white-space: nowrap;
}

.receipt-row__chevron[b-dg9k59mrvp] {
    flex: 0 0 auto;
    color: #8A8378;
    font-size: 20px;
    line-height: 1;
}
/* /Pages/Staff/Events/ReceiptUpload.razor.rz.scp.css */
/* Plan 04.6-06 / UI-SPEC §"Staff receipt upload" — mobile-primary, brand-styled.
   Gold #CEB185 CTA with DARK #201F1D text (never white-on-gold, never Bootstrap blue),
   Montserrat, 8px radius, 1px #E8E5E0 borders, 44px touch targets. Status badges use the
   semantic palette (amber/grey/destructive/success) — never the gold accent. ::deep is
   used only to theme the Radzen child elements. */

/* Clears the FIXED StaffTopHeader (60px) plus the iOS notch. The same expression Dashboard,
   MySchedule, CheckIn and the staff event page all use — a guessed smaller number leaves the
   back link underneath the header, where it cannot be seen or tapped. */
.receipt-upload-page[b-ue6fly72nl] {
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
    padding-top: calc(76px + env(safe-area-inset-top, 0));
    padding-bottom: 64px;
}

.back-link[b-ue6fly72nl] {
    font-size: 14px;
    color: #9E815C;
}

.upload-title[b-ue6fly72nl] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 16px 0 4px;
}

.upload-sub[b-ue6fly72nl] {
    font-size: 16px;
    color: #6B6760;
    margin: 0 0 16px;
}

/* ── Primary CTA — gold fill, dark text (the styled file label). ── */
.upload-cta[b-ue6fly72nl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 8px;
    background: #CEB185;
    border: 1px solid #CEB185;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.upload-cta:hover[b-ue6fly72nl] {
    background: #B89970;
    border-color: #B89970;
}

.upload-cta.is-busy[b-ue6fly72nl] {
    opacity: 0.7;
}

/* ── Photos held, waiting on the line items. ──
   Not an error state and must not read as one: the staffer has done their half. Cream card, brand
   border, and the send button in full gold once the items are in. */
.pending-upload[b-ue6fly72nl] {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--color-border, #E8E5E0);
    border-radius: 10px;
    background: #FBF9F6;
}

.pending-upload__count[b-ue6fly72nl] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #201F1D;
}

.pending-upload__hint[b-ue6fly72nl] {
    margin: 4px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #6B6660;
}

.pending-upload__go[b-ue6fly72nl] {
    margin-top: 12px;
}

.pending-upload__go:disabled[b-ue6fly72nl] {
    background: #EFE9E0;
    border-color: var(--color-border, #E8E5E0);
    color: #8A857D;
    cursor: not-allowed;
}

/* A held tile — neutral, deliberately not the failed red. */
.receipt-status.awaiting[b-ue6fly72nl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B6660;
    font-size: 13px;
}

/* Visually hide the native file input but keep it in the DOM (the JS helper reads its FileList). */
.receipt-upload-page[b-ue6fly72nl]  .upload-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.error-text[b-ue6fly72nl] {
    color: #C0392B;
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0;
}

/* ── Empty state ── */
.upload-empty[b-ue6fly72nl] {
    margin-top: 16px;
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.empty-heading[b-ue6fly72nl] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
}

.empty-body[b-ue6fly72nl] {
    font-size: 16px;
    line-height: 1.5;
    color: #6B6760;
    margin: 0;
}

/* ── Uploaded receipt tiles ── */
.receipt-list[b-ue6fly72nl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receipt-tile[b-ue6fly72nl] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 12px;
    min-height: 44px;
}

.receipt-tile.is-failed[b-ue6fly72nl] {
    border-color: #C0392B;
}

.receipt-thumb[b-ue6fly72nl] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4ECDF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-thumb img[b-ue6fly72nl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-placeholder[b-ue6fly72nl] {
    font-size: 24px;
    color: #9E815C;
}

.receipt-meta[b-ue6fly72nl] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.receipt-status[b-ue6fly72nl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.receipt-status.processing[b-ue6fly72nl] {
    color: #6B6760;
}

.receipt-status.failed[b-ue6fly72nl] {
    color: #C0392B;
    line-height: 1.4;
}

.receipt-upload-page[b-ue6fly72nl]  .retry-btn.rz-button {
    align-self: flex-start;
    min-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
}

/* Which day a batch of receipts belongs to (Wave 8). Sales are attributed per day, so on a
   multi-day event this is the staffer's call — filing against the wrong day credits the
   wrong shift and nothing downstream would catch it. */
.receipt-day[b-ue6fly72nl] { margin: 0 0 16px; }
.receipt-day__label[b-ue6fly72nl] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    display: block;
    margin-bottom: 6px;
}
.receipt-day[b-ue6fly72nl]  .form-select { min-height: 44px; border: 1px solid #E8E5E0; border-radius: 10px; }
.receipt-day[b-ue6fly72nl]  .form-select:focus { border-color: #CEB185; box-shadow: none; }
/* /Pages/Staff/Help.razor.rz.scp.css */
/* The Help Centre index. Montserrat, 12px radius, #E8E5E0 borders, 480px column, 44px touch
   targets — the staff dashboard's conventions, so this reads as part of the app. Gold (#CEB185)
   is NOT used here: nothing on this page is a primary action, it is all navigation. */

/* Clears the FIXED StaffTopHeader (60px) plus the iOS notch. The same expression Dashboard,
   MySchedule, CheckIn and the staff event page all use. */
.help-page[b-nigaxptkco] {
    max-width: 480px;
    padding: calc(76px + env(safe-area-inset-top, 0)) 16px 48px;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.help-title[b-nigaxptkco] { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.help-sub[b-nigaxptkco] { font-size: 14px; line-height: 1.5; color: #6B645B; margin: 0 0 16px; }

.help-search[b-nigaxptkco] { margin-bottom: 20px; }

.help-search__input[b-nigaxptkco] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #201F1D;
}

.help-search__input:focus[b-nigaxptkco] { border-color: #CEB185; outline: none; box-shadow: none; }

.help-area[b-nigaxptkco] { margin-bottom: 28px; }

.help-area__head[b-nigaxptkco] { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }

.help-area__icon[b-nigaxptkco] {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #F4ECDF;
    color: #201F1D;
    font-size: 18px;
}

.help-area__title[b-nigaxptkco] { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.help-area__blurb[b-nigaxptkco] { font-size: 13px; line-height: 1.5; color: #6B645B; margin: 0; }

.help-list[b-nigaxptkco] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.help-item[b-nigaxptkco] {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 44px; padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.help-item__text[b-nigaxptkco] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-item__title[b-nigaxptkco] { font-size: 15px; font-weight: 600; }
.help-item__summary[b-nigaxptkco] { font-size: 13px; line-height: 1.45; color: #6B645B; }

.help-item__length[b-nigaxptkco] {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 600; color: #6B645B;
    white-space: nowrap;
}

.help-item__chevron[b-nigaxptkco] { flex: 0 0 auto; color: #9E9689; font-size: 20px; line-height: 1; }

.help-full[b-nigaxptkco] {
    width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 14px;
    background: #FFFFFF;
    border: 1px dashed #CEB185;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
    color: #201F1D;
}

.help-empty[b-nigaxptkco] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
}

.help-empty__title[b-nigaxptkco] { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.help-empty__body[b-nigaxptkco] { font-size: 14px; line-height: 1.5; color: #6B645B; margin: 0; }
/* /Pages/Staff/HelpWatch.razor.rz.scp.css */
/* One guide, playing. Same conventions as the Help index — but wider than the usual 480px column,
   because a 16:9 video squeezed into a phone-width column on a laptop is unwatchable. */

/* Clears the FIXED StaffTopHeader (60px) plus the iOS notch. */
.help-watch-page[b-zvyyzrjegr] {
    max-width: 720px;
    padding: calc(76px + env(safe-area-inset-top, 0)) 16px 48px;
    font-family: 'Montserrat', sans-serif;
    color: #201F1D;
}

.back-link[b-zvyyzrjegr] { display: inline-block; color: #6B645B; font-size: 14px; margin-bottom: 16px; }

.watch-title[b-zvyyzrjegr] { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.watch-summary[b-zvyyzrjegr] { font-size: 14px; line-height: 1.55; color: #6B645B; margin: 0 0 16px; }

.watch-stage[b-zvyyzrjegr] {
    background: #201F1D;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;   /* kills the descender gap under an inline video */
}

.watch-video[b-zvyyzrjegr] { width: 100%; height: auto; display: block; background: #201F1D; }

.watch-chapters[b-zvyyzrjegr] { margin-top: 20px; }
.watch-chapters__title[b-zvyyzrjegr] { font-size: 15px; font-weight: 600; margin: 0 0 8px; }

.watch-chapters__list[b-zvyyzrjegr] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.watch-chapter[b-zvyyzrjegr] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 44px; padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif; font-size: 14px;
    color: #201F1D; text-align: left;
}

.watch-chapter__label[b-zvyyzrjegr] { flex: 1 1 auto; min-width: 0; }

.watch-chapter__at[b-zvyyzrjegr] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;   /* timestamps line up down the column */
    font-size: 13px; font-weight: 600; color: #6B645B;
}

.watch-missing[b-zvyyzrjegr] {
    background: #F4ECDF;
    border: 1px solid #E8E5E0;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
}

.watch-missing .empty-heading[b-zvyyzrjegr] { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.watch-missing .empty-body[b-zvyyzrjegr] { font-size: 14px; line-height: 1.5; color: #6B645B; margin: 0 0 12px; }

.watch-missing__link[b-zvyyzrjegr] {
    display: inline-block; min-height: 44px; padding: 11px 18px;
    background: #FFFFFF; border: 1px solid #201F1D; border-radius: 10px;
    font-size: 15px; font-weight: 600; color: #201F1D; text-decoration: none;
}
/* /Pages/StaffEventDetails.razor.rz.scp.css */
/* Staff Event Details Container */
.staff-event-details-container[b-i2y5hltakg] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.staff-event-details-container[b-i2y5hltakg]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-i2y5hltakg] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-i2y5hltakg] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-i2y5hltakg] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
}

.event-title[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-i2y5hltakg] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-i2y5hltakg] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-i2y5hltakg] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-i2y5hltakg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-i2y5hltakg] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-i2y5hltakg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.event-name[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
    flex: 1;
}

.favorite-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.favorite-button:hover[b-i2y5hltakg] {
    background-color: rgba(0, 0, 0, 0.05);
}

.favorite-button img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-i2y5hltakg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.detail-content[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-content p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Vacancies Section */
.vacancies-section[b-i2y5hltakg] {
    margin: 0 25px 40px 25px;
}

/* Jobs Accordion */
.jobs-accordion[b-i2y5hltakg] {
    margin-top: 8px;
}

.accordion-item[b-i2y5hltakg] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-header[b-i2y5hltakg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover[b-i2y5hltakg] {
    background-color: #f8f7f5;
}

.accordion-title[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.accordion-title h4[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-count[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #ceb185;
}

.accordion-icon[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.accordion-icon img[b-i2y5hltakg] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.accordion-icon.expanded img[b-i2y5hltakg] {
    transform: rotate(180deg);
}

.accordion-content[b-i2y5hltakg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.expanded[b-i2y5hltakg] {
    max-height: 1000px; /* Large enough to accommodate content */
}

/* Job Cards */
.job-card[b-i2y5hltakg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}

.job-card:last-child[b-i2y5hltakg] {
    border-bottom: none;
}

.job-info[b-i2y5hltakg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-type[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-description[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

.job-details[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-detail[b-i2y5hltakg] {
    display: flex;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.job-detail .detail-label[b-i2y5hltakg] {
    color: #666;
    min-width: 80px;
}

.job-detail span:not(.detail-label)[b-i2y5hltakg] {
    color: #201f1d;
}

.view-job-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-job-button:hover[b-i2y5hltakg] {
    color: #b8a06a;
    background-color: rgba(206, 177, 133, 0.1);
}

/* No Jobs State */
.no-jobs[b-i2y5hltakg] {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f7f5;
    border-radius: 8px;
    margin-top: 8px;
}

.no-jobs p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Cancelled Banner */
.event-cancelled-banner[b-i2y5hltakg] {
    margin: 0 25px 20px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Loading State */
.loading-state[b-i2y5hltakg] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-i2y5hltakg] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-i2y5hltakg] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-i2y5hltakg] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-i2y5hltakg] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-i2y5hltakg] {
        width: 100%;
        height: 120px;
    }

    .vacancies-section[b-i2y5hltakg] {
        margin: 0 25px 40px 25px;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-i2y5hltakg] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .vacancies-section[b-i2y5hltakg] {
        margin: 0 20px 40px 20px;
    }
}

/* /Pages/StaffViewEventJob.razor.rz.scp.css */
/* Staff View Event Job Page Styles */
.staff-view-event-job-container[b-7lhaahn14j] {
    background-color: #FFFFFF;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Header Styles */
.job-header[b-7lhaahn14j] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-7lhaahn14j] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-7lhaahn14j] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-7lhaahn14j] {
    width: 100%;
    height: 100%;
}

.job-title[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Job Content Styles */
.job-content[b-7lhaahn14j] {
    padding: 20px 25px;
    min-height: calc(100vh - 106px); /* Full height minus header */
}

.job-section[b-7lhaahn14j] {
    margin-bottom: 25px;
}

.section-label[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.section-content[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    word-wrap: break-word;
}

/* Age and Height Row */
.age-height-row[b-7lhaahn14j] {
    display: flex;
    gap: 20px;
}

.age-section[b-7lhaahn14j],
.height-section[b-7lhaahn14j] {
    flex: 1;
}

/* Apply Button Styles */
.apply-button-container[b-7lhaahn14j] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation (80px nav + 20px gap) */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999;
    pointer-events: none;
}

.apply-button-container button[b-7lhaahn14j] {
    pointer-events: auto;
}

.apply-button[b-7lhaahn14j] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: block;
    transition: background-color 0.2s ease;
}

.apply-button:hover[b-7lhaahn14j] {
    background-color: #3A3937;
}

.apply-button:active[b-7lhaahn14j] {
    background-color: #1A1917;
}

/* Loading and Error States */
.loading-state[b-7lhaahn14j],
.error-state[b-7lhaahn14j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-7lhaahn14j],
.error-state p[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 20px 0;
}

.back-to-events[b-7lhaahn14j] {
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #201F1D;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 24px;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-7lhaahn14j] {
    background-color: #B8A070;
}

/* Responsive Design */
@media (max-width: 480px) {
    .job-content[b-7lhaahn14j] {
        padding: 15px 20px;
        padding-bottom: 300px; /* Even more space on mobile for better scrolling experience */
    }

    .apply-button-container[b-7lhaahn14j] {
        padding: 0 20px;
        bottom: 100px; /* Keep button above bottom nav */
    }

    .age-height-row[b-7lhaahn14j] {
        flex-direction: column;
        gap: 15px;
    }
}

/* Large screens - center content */
@media (min-width: 768px) {
    .job-content[b-7lhaahn14j] {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 25px;
        padding-bottom: 220px; /* Extra bottom padding for fixed button on larger screens */
    }

    .apply-button-container[b-7lhaahn14j] {
        max-width: 600px;
        margin: 0 auto;
        padding: 0 25px;
    }
}
/* /Pages/TagABrand.razor.rz.scp.css */
/* Tag Brand Container */
.tag-brand-container[b-uebec6mczh] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.tag-brand-header[b-uebec6mczh] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-uebec6mczh] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-uebec6mczh] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-uebec6mczh] {
    opacity: 0.7;
}

.back-button img[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-uebec6mczh] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-uebec6mczh] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Search Section */
.search-section[b-uebec6mczh] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-container[b-uebec6mczh] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    height: 44px;
    width: 284px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search-icon[b-uebec6mczh] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-input[b-uebec6mczh] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 0;
}

.search-input[b-uebec6mczh]::placeholder {
    color: #E8E5E0;
}

/* Brand List */
.brand-list[b-uebec6mczh] {
    flex: 1;
    padding: 0 25px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* Space for done button */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-list[b-uebec6mczh]::-webkit-scrollbar {
    display: none;
}

.brand-item[b-uebec6mczh] {
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.brand-item:hover[b-uebec6mczh] {
    background-color: #f8f8f8;
}

.brand-item.selected[b-uebec6mczh] {
    background-color: #F5F1E8;
    border: 1px solid #CEB185;
    padding: 15px 15px 15px 15px; /* Slightly reduced to account for border */
    width: 100%;
    box-sizing: border-box;
}

.brand-avatar[b-uebec6mczh] {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    flex-shrink: 0;
}

.brand-avatar-image[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    object-fit: cover;
    object-position: 50% 50%;
}

.brand-avatar-placeholder[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-initial[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.brand-info[b-uebec6mczh] {
    flex: 1;
}

.brand-name[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.no-results[b-uebec6mczh],
.no-brands[b-uebec6mczh],
.loading-state[b-uebec6mczh],
.error-state[b-uebec6mczh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex-direction: column;
}

.no-results p[b-uebec6mczh],
.no-brands p[b-uebec6mczh],
.loading-state p[b-uebec6mczh],
.error-state p[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 16px 0;
}

.retry-button[b-uebec6mczh] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    height: 36px;
    padding: 0 16px;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-uebec6mczh] {
    background-color: #3A3937;
}

.retry-button:active[b-uebec6mczh] {
    background-color: #1A1917;
}

/* Done Button Container */
.done-button-container[b-uebec6mczh] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002;
}

.done-button[b-uebec6mczh] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.done-button:hover:not(:disabled)[b-uebec6mczh] {
    background-color: #3A3937;
}

.done-button:active:not(:disabled)[b-uebec6mczh] {
    background-color: #1A1917;
}

.done-button:disabled[b-uebec6mczh] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Desktop Design - Center brand items */
@media (min-width: 769px) {
    .brand-list[b-uebec6mczh] {
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .brand-item[b-uebec6mczh] {
        max-width: 400px;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .search-section[b-uebec6mczh] {
        padding: 20px 15px;
        justify-content: center;
    }

    .search-container[b-uebec6mczh] {
        width: 100%;
        max-width: 284px;
    }

    .brand-list[b-uebec6mczh] {
        padding: 0 15px;
    }

    .page-title[b-uebec6mczh] {
        font-size: 18px;
    }

    .done-button-container[b-uebec6mczh] {
        padding: 0 20px;
    }

    .done-button[b-uebec6mczh] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .search-section[b-uebec6mczh] {
        padding: 15px 10px;
        justify-content: center;
    }

    .brand-list[b-uebec6mczh] {
        padding: 0 10px;
    }

    .page-title[b-uebec6mczh] {
        font-size: 16px;
    }
}

/* /Pages/TagAEvent.razor.rz.scp.css */
/* Tag Event Container */
.tag-event-container[b-ws2c29zatr] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.tag-event-header[b-ws2c29zatr] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-ws2c29zatr] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-ws2c29zatr] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-ws2c29zatr] {
    opacity: 0.7;
}

.back-button img[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-ws2c29zatr] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-ws2c29zatr] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Search Section */
.search-section[b-ws2c29zatr] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-container[b-ws2c29zatr] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    height: 44px;
    width: 284px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search-icon[b-ws2c29zatr] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-input[b-ws2c29zatr] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 0;
}

.search-input[b-ws2c29zatr]::placeholder {
    color: #E8E5E0;
}

/* Event List */
.event-list[b-ws2c29zatr] {
    flex: 1;
    padding: 0 25px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* Space for done button */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.event-list[b-ws2c29zatr]::-webkit-scrollbar {
    display: none;
}

.event-item[b-ws2c29zatr] {
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.event-item:hover[b-ws2c29zatr] {
    background-color: #f8f8f8;
}

.event-item.selected[b-ws2c29zatr] {
    background-color: #F5F1E8;
    border: 1px solid #CEB185;
    padding: 15px 15px 15px 15px; /* Slightly reduced to account for border */
    width: 100%;
    box-sizing: border-box;
}

.event-avatar[b-ws2c29zatr] {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    flex-shrink: 0;
}

.event-avatar-image[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    object-fit: cover;
    object-position: 50% 50%;
}

.event-avatar-placeholder[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-initial[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.event-info[b-ws2c29zatr] {
    flex: 1;
}

.event-name[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.no-results[b-ws2c29zatr],
.no-events[b-ws2c29zatr],
.loading-state[b-ws2c29zatr],
.error-state[b-ws2c29zatr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex-direction: column;
}

.no-results p[b-ws2c29zatr],
.no-events p[b-ws2c29zatr],
.loading-state p[b-ws2c29zatr],
.error-state p[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 16px 0;
}

.retry-button[b-ws2c29zatr] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    height: 36px;
    padding: 0 16px;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-ws2c29zatr] {
    background-color: #3A3937;
}

.retry-button:active[b-ws2c29zatr] {
    background-color: #1A1917;
}

/* Done Button Container */
.done-button-container[b-ws2c29zatr] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002;
}

.done-button[b-ws2c29zatr] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.done-button:hover:not(:disabled)[b-ws2c29zatr] {
    background-color: #3A3937;
}

.done-button:active:not(:disabled)[b-ws2c29zatr] {
    background-color: #1A1917;
}

.done-button:disabled[b-ws2c29zatr] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Desktop Design - Center event items */
@media (min-width: 769px) {
    .event-list[b-ws2c29zatr] {
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .event-item[b-ws2c29zatr] {
        max-width: 400px;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .search-section[b-ws2c29zatr] {
        padding: 20px 15px;
        justify-content: center;
    }

    .search-container[b-ws2c29zatr] {
        width: 100%;
        max-width: 284px;
    }

    .event-list[b-ws2c29zatr] {
        padding: 0 15px;
    }

    .page-title[b-ws2c29zatr] {
        font-size: 18px;
    }

    .done-button-container[b-ws2c29zatr] {
        padding: 0 20px;
    }

    .done-button[b-ws2c29zatr] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .search-section[b-ws2c29zatr] {
        padding: 15px 10px;
        justify-content: center;
    }

    .event-list[b-ws2c29zatr] {
        padding: 0 10px;
    }

    .page-title[b-ws2c29zatr] {
        font-size: 16px;
    }
}