/* ==================================================================
   OLIHome — content components layered over the Minfo template.
   The page shell (sidebar, nav rail, mobile menu, preloader, bg
   lines) is pure template markup styled by /minfo/css/style.min.css.
   This file only styles the reusable oli-* content components used
   inside pages, keyed to design tokens (rebranded to Ovialand green).

   Single fixed theme (no light/dark toggle) — see the "New shell"
   section further below (.oh-*) for the forest-green sidebar/header
   introduced with the left-sidebar redesign.
================================================================== */

/* ------------------------------------------------------------------
   1. Palette — template tokens, brand green
------------------------------------------------------------------ */
:root {
    --oli-surface: #ffffff;             /* card surface */
    --oli-soft: #F0F2F5;                /* flashWhite inner panels */
    --oli-surface-border: #E8E8E8;      /* platinum */
    --oli-theme: #32893b;               /* brand green */
    --oli-theme-hover: #1f5e29;         /* brand dark green */
    --oli-theme-shadow: rgba(50, 137, 59, .3);
    --oli-heading: #12261a;              /* matches the login page's --auth-heading */
    --oli-text: #55635a;                 /* matches the login page's --auth-text */

    /* New shell tokens (left-sidebar redesign) - aligned to the login page's palette
       (auth.css --auth-gold / promo-panel gradient / --auth-page-bg / --auth-heading) */
    --oh-forest: #0d3a1c;                /* sidebar base */
    --oh-forest-light: #1b5a2b;          /* sidebar hover/active, gradients */
    --oh-gold: #b8892f;                   /* "HOME" wordmark / accent words */
    --oh-cream: #eef2ee;                 /* page background */
    --oh-text-dark: #12261a;             /* headings, primary text */
    --oh-nav-active-bg: rgba(255, 255, 255, .14);

    /* Status palette (badges, alerts) */
    --oh-status-green: #2F9E44;
    --oh-status-green-bg: #E7F5EC;
    --oh-status-amber: #B7791F;
    --oh-status-amber-bg: #FDF2DD;
    --oh-status-red: #C0392B;
    --oh-status-red-bg: #FBE6E6;
    --oh-status-blue: #2F6FE4;
    --oh-status-blue-bg: #E8EFFD;
    --oh-status-neutral: #9CA3AF;
    --oh-status-neutral-bg: #F1F2F4;

    /* Pastel icon-chip accents (stat cards, quick actions, activity) */
    --oh-pastel-mint: #E6F4EA;
    --oh-pastel-mint-fg: #2F9E44;
    --oh-pastel-lilac: #EDE9FE;
    --oh-pastel-lilac-fg: #7C5FE0;
    --oh-pastel-peach: #FDECD8;
    --oh-pastel-peach-fg: #C77B2E;
    --oh-pastel-pink: #FCE7EC;
    --oh-pastel-pink-fg: #D6537E;
    --oh-pastel-blue: #E8EFFD;
    --oh-pastel-blue-fg: #2F6FE4;
}

/* ------------------------------------------------------------------
   2. Section card (template: px-5 py-8 bg-white dark:bg-nightBlack
      rounded-2xl section block)
------------------------------------------------------------------ */
.oli-section {
    background: var(--oli-surface);
    border-radius: 1rem;
    padding: 2rem 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .oli-section {
        padding: 2.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .oli-section {
        padding: 2.5rem;
    }
}

@media (min-width: 1500px) {
    .oli-section {
        padding: 3.125rem;              /* template 2xl:p-13 */
    }
}

/* --- Section-name chip --- */
.oli-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oli-heading);
    border: 1px solid var(--oli-surface-border);
    border-radius: 2.5rem;
    white-space: nowrap;
}

.oli-chip i {
    color: var(--oli-theme);
    line-height: 1;
}

/* --- Section title: extralight with a semibold theme word --- */
.oli-section-title {
    margin: 1.5rem 0 0;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.27;
    color: var(--oli-heading);
}

@media (min-width: 992px) {
    .oli-section-title {
        font-size: 2.5rem;
    }
}

.oli-section-title span {
    font-weight: 600;
    color: var(--oli-theme);
}

.oli-section-sub {
    max-width: 37rem;                   /* template max-w-sectionTitle */
    margin: 1rem 0 0;
    font-size: .94rem;
    line-height: 1.875;
    color: var(--oli-text);
}

/* --- Checkmark list (template hero style) --- */
.oli-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .94rem;
    color: var(--oli-text);
}

.oli-check-list i {
    margin-right: .5rem;
    color: var(--oli-theme);
}

/* --- Pill buttons (template btn-theme / outline) --- */
.oli-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.05rem 2.25rem;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff !important;
    text-decoration: none;
    background: var(--oli-theme);
    border: 1px solid var(--oli-theme);
    border-radius: 2.5rem;
    cursor: pointer;
    transition: all .3s;
}

.oli-btn:hover {
    background: var(--oli-theme-hover);
    border-color: var(--oli-theme-hover);
    box-shadow: 0 5px 10px 0 var(--oli-theme-shadow);
}

.oli-btn-block {
    display: flex;
    width: 100%;
}

.oli-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.05rem 2.25rem;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--oli-theme) !important;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--oli-theme);
    border-radius: 2.5rem;
    cursor: pointer;
    transition: all .3s;
}

.oli-btn-outline:hover {
    color: #fff !important;
    background: var(--oli-theme-hover);
    border-color: var(--oli-theme-hover);
}

.oli-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* --- Numbered service cards (template services grid) --- */
.oli-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 576px) {
    .oli-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

.oli-quick-card {
    position: relative;
    display: block;
    padding: 1.75rem 1.25rem;
    text-decoration: none;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1rem;
    transition: border-color .3s;
}

@media (min-width: 768px) {
    .oli-quick-card {
        padding: 1.75rem;
    }
}

.oli-quick-card:hover {
    border-color: var(--oli-theme);
}

/* Outlined ghost number, like the template's 01/02/03 */
.oli-quick-card .oli-card-num {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
    opacity: .3;
    transition: opacity .3s;
}

.oli-quick-card:hover .oli-card-num {
    opacity: 1;
}

.oli-quick-card .oli-card-icon {
    position: absolute;
    top: 1.75rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--oli-theme);
    transition: transform .3s;
}

.oli-quick-card:hover .oli-card-icon {
    transform: rotate(-45deg);
}

.oli-quick-card h4 {
    margin: 1.25rem 0 .75rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--oli-heading);
}

.oli-quick-card p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--oli-text);
}

/* --- Meta row (template post-meta) --- */
.oli-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin: 2rem 0;
}

.oli-meta h6 {
    margin: 0 0 .2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--oli-heading);
}

.oli-meta p {
    margin: 0;
    font-size: .875rem;
    color: var(--oli-text);
}

/* --- Prose (template article body) --- */
.oli-prose h3 {
    margin: 2rem 0 .75rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--oli-heading);
}

.oli-prose p {
    margin: 0 0 1rem;
    font-size: .94rem;
    line-height: 2;
    color: var(--oli-text);
}

.oli-prose ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    font-size: .94rem;
    line-height: 2;
    list-style: disc;
    color: var(--oli-text);
}

.oli-prose a {
    color: var(--oli-theme);
    text-decoration: none;
}

.oli-prose a:hover {
    color: var(--oli-theme-hover);
}

/* --- Dashed tag chips (template about-section tags) --- */
.oli-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
}

.oli-tags span,
.oli-tags a {
    display: inline-block;
    padding: .5rem .9rem;
    font-size: .8rem;
    color: var(--oli-text);
    text-decoration: none;
    border: 1px dashed var(--oli-surface-border);
    border-radius: 1.5rem;
    transition: color .3s, border-color .3s;
}

.oli-tags a:hover {
    color: var(--oli-theme);
    border-color: var(--oli-theme);
}

/* --- Contact info rows (template contact section) --- */
.oli-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.oli-contact-list li {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.oli-contact-icon {
    display: grid;
    place-content: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    font-size: 1.25rem;
    color: var(--oli-theme);
    border: 1px solid var(--oli-surface-border);
    border-radius: 50%;
}

.oli-contact-list h6 {
    margin: 0 0 .15rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--oli-heading);
}

.oli-contact-list p {
    margin: 0;
    font-size: .875rem;
    color: var(--oli-text);
}

.oli-contact-list a {
    color: var(--oli-theme);
    text-decoration: none;
}

/* ------------------------------------------------------------------
   3. Alerts (TempData messages — replaces the Bootstrap alerts)
------------------------------------------------------------------ */
.oli-alert {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.15rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    border: 1px solid transparent;
    border-radius: .75rem;
}

.oli-alert i { font-size: 1rem; }

.oli-alert .oli-alert-close {
    margin-left: auto;
    padding: 0 .25rem;
    font-size: .9rem;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .6;
}

.oli-alert .oli-alert-close:hover { opacity: 1; }

.oli-alert-success {
    color: #2b6e33;
    background: rgba(50, 137, 59, .12);
    border-color: rgba(50, 137, 59, .35);
}

.oli-alert-danger {
    color: #b02a37;
    background: rgba(220, 53, 69, .12);
    border-color: rgba(220, 53, 69, .35);
}

.oli-alert-warning {
    color: #997404;
    background: rgba(255, 193, 7, .15);
    border-color: rgba(255, 193, 7, .4);
}

.oli-alert-info {
    color: #087990;
    background: rgba(13, 202, 240, .12);
    border-color: rgba(13, 202, 240, .35);
}

/* ============================================================
   Sidebar profile card
   The template floats this card at mid-viewport height. An earlier
   version of this fix stretched it to span the full dashboard-column
   band, but the card's actual content (avatar, name, three meta rows)
   is short and fixed-height, so on tall viewports that just moved the
   dead space around - a gap above the meta rows and another below,
   instead of one gap underneath. Simpler fix: let the card size to its
   content and pin it near the top of the rail, same as it already
   behaves below the xl breakpoint.
   ============================================================ */
/* The template clips .minfo__sidebar cards with a notched/flag-shape
   top-left corner (see #my-clip-path in _MainLayout.cshtml). The profile
   card keeps that shape - it's the card the notch/clip-path SVG was
   actually built for. The FAQ card underneath it is a plain rounded
   rectangle like every other card in the app, so it opts back out. */
.minfo__sidebar.oli-sidebar-plain {
    clip-path: none;
}

@media (min-width: 1280px) {
    .minfo__sidebar__wrapper {
        top: 3.5rem;          /* lines up with the dashboard section's top edge */
        transform: none;      /* cancel the template's vertical centering */
    }
}

/* On very wide screens there is room to let the card breathe */
@media (min-width: 1536px) {
    .minfo__sidebar__wrapper {
        max-width: 24rem;
    }
}

/* --- Sidebar FAQ card ---
   Plain <details>/<summary> accordion - no JS needed, and it's the
   native way to get keyboard/screen-reader support for free. */
.oli-faq-item {
    padding: .85rem .25rem;
    border-top: 1px solid var(--oli-border, #ececec);
}

.oli-faq-item:first-child {
    border-top: none;
    padding-top: .25rem;
}

.oli-faq-item summary {
    position: relative;
    padding-left: 1.1rem;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    color: var(--oli-heading);
    list-style: none;
}

.oli-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Absolutely positioned (instead of inline-block) so the marker doesn't
   consume inline-flow width - summary's padding-left is what creates the
   hanging indent, keeping wrapped lines aligned under the question text
   instead of snapping back to the far-left edge under the marker. */
.oli-faq-item summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--oli-theme);
    font-weight: 700;
}

.oli-faq-item[open] summary::before {
    content: '\2212';
}

.oli-faq-item p {
    margin: .5rem 0 0 1rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--oli-text);
}

/* ============================================================
   Content column
   The template centers the content container on the page while
   the sidebar stays pinned left, so the gap between them grows
   with the viewport. Anchor the column to the sidebar instead:
   margin-left = sidebar offset + sidebar width + gutter.
   Applies to the footer too (it shares these classes).
   ============================================================ */
@media (min-width: 1280px) {
    .minfo__contentBox {
        margin-left: calc(1rem + 20rem + 2.5rem);
        margin-right: 8.5rem;      /* clear the fixed nav rail */
        max-width: 74rem;
    }

    .minfo__contentBox .max-w-content {
        max-width: 100%;           /* fill the anchored container */
    }
}

/* Every page other than the Dashboard skips the sidebar entirely (see
   isDashboard in _MainLayout.cshtml), so it doesn't need the left gutter
   reserved for it. Center the column in the space left of the fixed nav
   rail instead, and let it fill up to a generous cap rather than sitting
   in the narrow width reserved for anchoring beside the sidebar. */
@media (min-width: 1280px) {
    body.oli-no-sidebar .minfo__contentBox {
        margin-left: auto;
        margin-right: auto;
        max-width: min(88rem, calc(100% - 17rem));
    }
}

@media (min-width: 1536px) {
    .minfo__contentBox {
        margin-left: calc(3.5rem + 24rem + 3rem);
        margin-right: 11rem;
    }

    body.oli-no-sidebar .minfo__contentBox {
        margin-left: auto;
        margin-right: auto;
        max-width: min(96rem, calc(100% - 22rem));
    }
}

/* Nav rail hover tooltips (the ::before bubbles showing each page name):
   keep them on a single line instead of wrapping */
.minfo__nav__wrapper .menu a::before {
    white-space: nowrap;
}

/* ==================================================================
   4. Form components — Book Tripping registration form
   Keyed to the existing OLI palette tokens so dark mode works
   automatically.
================================================================== */

/* --- Page header with red accent underline (matches reference design) --- */
.oli-form-page-title {
    font-size: 2rem;
    font-weight: 200;
    color: var(--oli-heading);
    text-align: center;
    margin-bottom: .5rem;
}

.oli-form-page-title span {
    font-weight: 700;
    color: var(--oli-theme);
}

/* --- Section heading row inside the form --- */
.oli-form-section-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--oli-heading);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.oli-form-section-label .oli-req {
    color: #e03131;
    font-size: 1rem;
    line-height: 1;
}

/* --- Privacy / hint text --- */
.oli-form-hint {
    font-size: .78rem;
    color: var(--oli-text);
    margin: .35rem 0 1.25rem;
    line-height: 1.6;
}

.oli-form-hint a {
    color: var(--oli-theme);
    text-decoration: none;
}

.oli-form-hint a:hover {
    color: var(--oli-theme-hover);
    text-decoration: underline;
}

/* --- Thin horizontal rule between form sections --- */
.oli-form-divider {
    border: 0;
    border-top: 1px solid var(--oli-surface-border);
    margin: 1.75rem 0;
}

/* --- Multi-column field rows --- */
.oli-form-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
    margin-bottom: .75rem;
}

.oli-form-row.cols-2 {
    grid-template-columns: 1fr;
}

.oli-form-row.cols-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .oli-form-row.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .oli-form-row.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Individual field group --- */
.oli-form-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.oli-form-group > label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--oli-text);
}

/* --- Text inputs and selects --- */
.oli-form-control {
    width: 100%;
    padding: .65rem .9rem;
    font-size: .875rem;
    font-family: inherit;
    color: var(--oli-heading);
    background: transparent;
    border: 1px solid var(--oli-surface-border);
    border-radius: .5rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
}

.oli-form-control::placeholder {
    color: #aaaaaa;
}

.oli-form-control:focus {
    border-color: var(--oli-theme);
    box-shadow: 0 0 0 3px var(--oli-theme-shadow);
}

/* Select arrow */
.oli-form-select-wrapper {
    position: relative;
}

.oli-form-select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: .75rem;
    color: var(--oli-text);
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.oli-form-select-wrapper .oli-form-control {
    padding-right: 2.25rem;
    cursor: pointer;
}

.d-none {
    display: none !important;
}

/* --- Floating labels ---
   Markup: <div class="oli-float"> <input|select .oli-form-control>
           <label class="oli-float-label"> </div>
   Inputs keep their placeholder text (made transparent below) so
   :placeholder-shown can drive the float; selects float via :has() on a
   non-empty checked option. */
.oli-float {
    position: relative;
}

.oli-float .oli-form-control::placeholder {
    color: transparent;
}

.oli-float-label {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875rem;
    line-height: 1.2;
    color: #aaaaaa;
    background: transparent;
    padding: 0 .3rem;
    margin-left: -.3rem;
    border-radius: .25rem;
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: top .18s ease, font-size .18s ease, color .18s ease;
}

/* Floated (shrunk) state: control focused or holding a value */
.oli-float .oli-form-control:focus ~ .oli-float-label,
.oli-float input.oli-form-control:not(:placeholder-shown) ~ .oli-float-label,
.oli-float select.oli-form-control:where(:has(option:checked:not([value=""]))) ~ .oli-float-label {
    top: 0;
    font-size: .7rem;
    color: var(--oli-text);
    background: var(--oli-surface);
}

/* Kept separate: an unsupported :-webkit-autofill would invalidate a
   shared selector list */
.oli-float input.oli-form-control:-webkit-autofill ~ .oli-float-label {
    top: 0;
    font-size: .7rem;
    color: var(--oli-text);
    background: var(--oli-surface);
}


.oli-float .oli-form-control:focus ~ label.oli-float-label {
    color: var(--oli-theme);
}

.oli-float .oli-form-control.input-validation-error ~ label.oli-float-label {
    color: #e03131;
}

/* --- Checkbox group (tripping type) --- */
.oli-form-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin-bottom: .75rem;
    justify-content: center;
}

.oli-form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    font-size: .875rem;
    color: var(--oli-heading);
    border: 1px solid var(--oli-surface-border);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    user-select: none;
}

.oli-form-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--oli-theme);
    cursor: pointer;
    flex-shrink: 0;
}

.oli-form-check:hover {
    border-color: var(--oli-theme);
}

/* --- Attestation / full-width checkbox row --- */
.oli-form-attest {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .78rem;
    color: var(--oli-text);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.oli-form-attest input[type="checkbox"] {
    margin-top: .2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--oli-theme);
    flex-shrink: 0;
    cursor: pointer;
}

.oli-form-attest a {
    color: var(--oli-theme);
    text-decoration: none;
}

.oli-form-attest a:hover {
    color: var(--oli-theme-hover);
    text-decoration: underline;
}

/* --- Centered submit button row --- */
.oli-form-submit-row {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* --- Form validation (booking form) --- */
.oli-field-error {
    display: block;
    font-size: .75rem;
    color: #e03131;
}

.oli-field-error:empty {
    display: none;
}

.oli-form-control.input-validation-error {
    border-color: #e03131;
}

/* --- Seller Code live-lookup suggestion (Book a Tripping form) --- */
.oli-seller-suggestion {
    font-size: .78rem;
    color: var(--oli-text);
    line-height: 1.5;
}

.oli-seller-suggestion strong {
    color: #2563eb;
    font-weight: 600;
}

.oli-seller-suggestion.is-not-found {
    color: #e03131;
}

/* --- Seller Code live-lookup: broker code -> pick one of their sellers ---
   Pill buttons shown immediately (not a collapsed <select> requiring a click
   to open), styled after this page's existing dashed-pill .oli-tags look. */
.oli-seller-picker {
    margin-top: .6rem;
}

.oli-seller-picker-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.oli-seller-picker-option {
    padding: .4rem .9rem;
    font-size: .78rem;
    font-family: inherit;
    color: var(--oli-text);
    background: transparent;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.5rem;
    cursor: pointer;
}

.oli-form-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    font-size: .8rem;
    line-height: 1.6;
    color: #e03131;
    background: rgba(224, 49, 49, 0.08);
    border: 1px solid rgba(224, 49, 49, 0.25);
    border-radius: .5rem;
}

.oli-form-alert i {
    margin-top: .2rem;
}

/* ==================================================================
   5. Nav rail theme switcher — the template's floating style
      switcher relocated into the desktop nav rail (below Legal).
      script.js still toggles .active on .style-switcher, and
      theme-mode.js still binds the .switcher-input buttons.
================================================================== */
.minfo__nav__wrapper .style-switcher {
    position: relative;
}

.minfo__nav__wrapper .style-switcher .theme-select {
    position: absolute;
    top: 50%;
    right: calc(100% + 1rem);
    transform: translateY(-50%);
    width: 15rem;
    text-align: left;
    border-radius: .75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.minfo__nav__wrapper .style-switcher.active .theme-select {
    opacity: 1;
    visibility: visible;
}

/* The rail's hover tooltip would sit on top of the open panel */
.minfo__nav__wrapper .style-switcher.active .toggle-btn::before,
.minfo__nav__wrapper .style-switcher.active .toggle-btn::after {
    opacity: 0 !important;
}

/* Rail hover tooltips shrink-wrap to the narrow rail item, which
   wraps multi-word titles — keep them on one line */
.minfo__nav__wrapper .menu a[data-title]::before,
.minfo__nav__wrapper .style-switcher .toggle-btn::before {
    white-space: nowrap;
}

/* Stronger active-page indicator. The template only swaps the rail item's
   background from bg-snowWhite to bg-white (#F2F5F8 -> #FFFFFF) — a ~3%
   lightness difference that's effectively invisible, so the current page
   had no visible marker in the rail. Fill it solid brand-green instead. */
.minfo__nav__wrapper .menu li.active > a {
    background: var(--oli-theme) !important;
    box-shadow: 0 4px 10px 0 var(--oli-theme-shadow);
}

.minfo__nav__wrapper .menu li.active > a i,
.minfo__nav__wrapper .menu li.active > a span {
    color: #fff !important;
}

/* Keyboard focus — the rail icons and pill buttons had no visible
   focus state, making the rail unusable via keyboard navigation */
.minfo__nav__wrapper .menu a:focus-visible,
.minfo__nav__wrapper .toggle-btn:focus-visible,
.oli-btn:focus-visible,
.oli-btn-outline:focus-visible {
    outline: 2px solid var(--oli-theme);
    outline-offset: 2px;
}

/* ==================================================================
   6. Profile page — avatar header, status chips, icon info cards
================================================================== */

/* --- Sidebar avatar empty state ---
   Falls back to a themed icon circle (matches .oli-profile-avatar below)
   when the avatar image 404s, instead of a broken-image glyph. Styled
   only via :not(.hidden) so it never fights Tailwind's .hidden utility
   for the display property. */
.oli-avatar-fallback:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: var(--oli-theme);
    background: var(--oli-theme-shadow);
}

/* --- Sidebar account meta rows (Email/Status/Unit under "Homeowner") --- */
/* Tailwind's *:items-start/*:gap-3 child-variants aren't in the compiled
   minfo/style.min.css, so the row gap/alignment has to live here instead. */
.oli-meta-list > li {
    align-items: flex-start;
    gap: .85rem;
}

.oli-meta-icon {
    display: grid;
    place-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    font-size: .8rem;
    color: var(--oli-theme);
    background: var(--oli-theme-shadow);
    border-radius: 50%;
}

.oli-meta-value {
    padding-top: .3rem;
    overflow-wrap: anywhere;
    color: var(--oli-text);
}

.oli-profile-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1.75rem 0 0;
    flex-wrap: wrap;
}

.oli-profile-avatar {
    display: grid;
    place-content: center;
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 4.5rem;
    font-size: 1.75rem;
    color: var(--oli-theme);
    background: var(--oli-theme-shadow);
    border-radius: 50%;
}

.oli-profile-name {
    margin: 0 0 .2rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--oli-heading);
}

.oli-profile-sub {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--oli-text);
}

.oli-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.oli-chip-row .oli-chip {
    padding: .4rem .95rem;
    font-size: .7rem;
    animation: oli-fade-up .45s ease both;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.oli-chip-row .oli-chip:nth-child(1) { animation-delay: .05s; }
.oli-chip-row .oli-chip:nth-child(2) { animation-delay: .15s; }
.oli-chip-row .oli-chip:nth-child(3) { animation-delay: .25s; }

.oli-chip-row .oli-chip:hover {
    transform: translateY(-2px);
    border-color: var(--oli-theme);
    box-shadow: 0 4px 10px 0 var(--oli-theme-shadow);
}

.oli-chip-active {
    color: var(--oli-theme);
    background: var(--oli-theme-shadow);
    border-color: transparent;
}

.oli-chip-active:hover {
    border-color: transparent;
}

/* --- Icon-led info cards (profile detail fields) --- */
.oli-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0 0;
}

@media (min-width: 640px) {
    .oli-info-grid.cols-2,
    .oli-info-grid.cols-3,
    .oli-info-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .oli-info-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .oli-info-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.oli-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--oli-soft);
    border-radius: .85rem;
}

.oli-info-icon {
    display: grid;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    font-size: 1.1rem;
    color: var(--oli-theme);
    background: var(--oli-surface);
    border-radius: 50%;
}

.oli-info-card h6 {
    margin: 0 0 .15rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--oli-text);
}

.oli-info-card p {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--oli-heading);
}

/* ==================================================================
   7. Milestone timeline (My Ovialand Home — ownership journey)
================================================================== */
.oli-milestones {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.oli-milestone {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2rem;
}

.oli-milestone:last-child {
    padding-bottom: 0;
}

.oli-milestone:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.35rem;
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    background: var(--oli-surface-border);
}

.oli-milestone.is-complete:not(:last-child)::before {
    background: var(--oli-theme);
}

.oli-milestone-dot {
    position: relative;
    display: grid;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    font-size: 1rem;
    color: var(--oli-text);
    background: var(--oli-soft);
    border: 2px solid var(--oli-surface-border);
    border-radius: 50%;
    z-index: 1;
}

.oli-milestone.is-complete .oli-milestone-dot {
    color: #fff;
    background: var(--oli-theme);
    border-color: var(--oli-theme);
}

.oli-milestone.is-current .oli-milestone-dot {
    color: var(--oli-theme);
    background: var(--oli-surface);
    border-color: var(--oli-theme);
    box-shadow: 0 0 0 4px var(--oli-theme-shadow);
}

.oli-milestone-body {
    padding-top: .4rem;
}

.oli-milestone-status {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--oli-text);
}

.oli-milestone.is-complete .oli-milestone-status {
    color: var(--oli-theme);
}

.oli-milestone.is-current .oli-milestone-status {
    padding: .15rem .6rem;
    color: var(--oh-status-green);
    background: var(--oh-status-green-bg);
    border-radius: 2.5rem;
}

.oli-milestone-body h6 {
    margin: .3rem 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oli-heading);
}

.oli-milestone-body p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--oli-text);
}

.oli-milestone-progress {
    margin-top: .6rem;
    width: 100%;
    max-width: 16rem;
    height: .4rem;
    border-radius: 1rem;
    background: var(--oli-surface-border);
    overflow: hidden;
}

.oli-milestone-progress-fill {
    height: 100%;
    background: var(--oli-theme);
    border-radius: 1rem;
}

/* ==================================================================
   8. Data table & status pills (Billing & Payments history)
================================================================== */
.oli-table-wrap {
    margin-top: 2rem;
    overflow-x: auto;
}

.oli-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    white-space: nowrap;
}

.oli-table th {
    padding: .75rem 1.1rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--oli-text);
    border-bottom: 1px solid var(--oli-surface-border);
}

.oli-table td {
    padding: .95rem 1.1rem;
    color: var(--oli-heading);
    border-bottom: 1px solid var(--oli-surface-border);
}

.oli-table tbody tr:last-child td {
    border-bottom: 0;
}

.oli-table tbody tr:hover {
    background: var(--oli-soft);
}

.oli-table td i {
    margin-right: .6rem;
    color: var(--oli-theme);
}

.oli-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--oli-text);
    background: var(--oli-soft);
    border-radius: 2.5rem;
    white-space: nowrap;
}

.oli-status-pill.is-paid,
.oli-status-pill.is-available,
.oli-status-pill.is-approved,
.oli-status-pill.is-confirmed {
    color: var(--oh-status-green);
    background: var(--oh-status-green-bg);
}

.oli-status-pill.is-pending,
.oli-status-pill.is-maintenance,
.oli-status-pill.is-partial,
.oli-status-pill.is-under-review {
    color: var(--oh-status-amber);
    background: var(--oh-status-amber-bg);
}

.oli-status-pill.is-rejected,
.oli-status-pill.is-cancelled,
.oli-status-pill.is-unpaid {
    color: var(--oh-status-red);
    background: var(--oh-status-red-bg);
}

.oli-status-pill.is-submission,
.oli-status-pill.is-for-submission {
    color: var(--oh-status-blue);
    background: var(--oh-status-blue-bg);
}

/* ==================================================================
   9. Motion — page-load entrance transitions
   Sections get .oli-reveal + a --oli-reveal-delay custom property from
   the _MainLayout.cshtml IntersectionObserver script, purely additive:
   with no JS (or reduced motion), sections stay fully visible.
================================================================== */
.oli-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: var(--oli-reveal-delay, 0ms);
}

.oli-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes oli-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .oli-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .oli-chip-row .oli-chip {
        animation: none;
    }
}

/* ==================================================================
   10. Amenity reservation cards (Amenities > Index)
================================================================== */
.oli-amenity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .oli-amenity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .oli-amenity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oli-amenity-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--oli-soft);
    border-radius: 1rem;
}

/* Card photo, when the amenity has one on file - sits above the icon/head row rather than
   replacing it, so the icon still shows lower down as a small brand accent. */
.oli-amenity-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    margin: -1.5rem -1.5rem 1.1rem;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
}

.oli-amenity-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oli-amenity-photo .oli-status-pill {
    position: absolute;
    top: .85rem;
    right: .85rem;
    background: rgba(255, 255, 255, .92);
}

.oli-amenity-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.oli-amenity-icon {
    display: grid;
    place-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    font-size: 1.25rem;
    color: var(--oli-theme);
    background: var(--oli-surface);
    border-radius: 50%;
}

.oli-amenity-card h6 {
    margin: 1.1rem 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oli-heading);
}

.oli-amenity-desc {
    flex: 1;
    margin: 0 0 1.1rem;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--oli-text);
}

.oli-amenity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.35rem;
}

.oli-amenity-meta .oli-status-pill i {
    margin-right: .3rem;
}

.oli-amenity-footer {
    margin-top: auto;
}

.oli-amenity-footer summary {
    list-style: none;
    cursor: pointer;
}

.oli-amenity-footer summary::-webkit-details-marker {
    display: none;
}

.oli-amenity-footer[open] summary {
    margin-bottom: 1.5rem;
}

.oli-amenity-footer form {
    padding-top: 1.5rem;
    border-top: 1px solid var(--oli-surface-border);
}

.oli-amenity-hint {
    margin: 0;
    font-size: .8rem;
    color: var(--oli-text);
}

/* ==================================================================
   10. New shell — left sidebar + top header (left-sidebar redesign)
   Fixed forest-green sidebar replacing the old floating right nav
   rail; a page header (greeting/breadcrumb/bell/avatar) replacing the
   old Dashboard-only floating profile card. Single fixed theme — no
   light/dark variants here by design (see section 1's header note).
================================================================== */

.oh-body {
    background: var(--oh-cream);
}

/* --- Sidebar --- */
.oh-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.75rem 1.25rem;
    background-color: #0d3a1c;
    background-image:
        radial-gradient(circle at 85% 12%, rgba(212, 169, 74, 0.22), transparent 42%),
        radial-gradient(circle at 12% 92%, rgba(132, 187, 78, 0.20), transparent 45%),
        linear-gradient(150deg, #0d3a1c 0%, #1b5a2b 55%, #0f4020 100%);
    background-attachment: fixed;
    transition: width .25s ease;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(13, 58, 28, 0.15);
}

.oh-sidebar::-webkit-scrollbar {
    width: 5px;
}

.oh-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.oh-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.oh-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.oh-sidebar.is-collapsed {
    width: 5.25rem;
    padding-left: .75rem;
    padding-right: .75rem;
}

.oh-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 .5rem;
}

.oh-sidebar-logo a {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.oh-sidebar-logo-img {
    max-width: 138px;
    height: auto;
    transition: opacity .2s ease, width .2s ease;
}

.oh-sidebar.is-collapsed .oh-sidebar-logo-img {
    width: 0;
    opacity: 0;
}

.oh-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .7rem;
    cursor: pointer;
    transition: background .2s, transform .25s;
}

.oh-sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, .18);
}

.oh-sidebar.is-collapsed .oh-sidebar-collapse-btn {
    transform: rotate(180deg);
}

.oh-nav {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.oh-nav-item a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .9rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    overflow: hidden;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    border: 1px solid transparent;
}

.oh-nav-item i {
    flex: none;
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
    transition: color .2s ease;
}

.oh-nav-item a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.oh-nav-item.active a {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: #fff;
    border-color: rgba(212, 169, 74, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.oh-nav-item.active a i {
    color: #d4a94a;
}

.oh-sidebar.is-collapsed {
    width: 5.25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    overflow: visible !important;
}

.oh-sidebar.is-collapsed .oh-nav {
    overflow: visible !important;
}

.oh-sidebar.is-collapsed .oh-nav-item {
    position: relative;
    overflow: visible !important;
}

.oh-sidebar.is-collapsed .oh-nav-item span {
    display: none;
}

.oh-sidebar.is-collapsed .oh-nav-item a {
    justify-content: center;
    padding: .75rem;
    position: relative;
    overflow: visible !important;
}

/* Floating tooltip when sidebar is collapsed */
.oh-sidebar.is-collapsed .oh-nav-item a::after,
.oh-sidebar.is-collapsed .oh-sidebar-logout-btn::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%) scale(0.92);
    background: #0d3a1c;
    color: #ffffff;
    padding: .5rem .9rem;
    border-radius: .6rem;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(212, 169, 74, 0.4);
    z-index: 99999;
}

.oh-sidebar.is-collapsed .oh-nav-item a::before,
.oh-sidebar.is-collapsed .oh-sidebar-logout-btn::before {
    content: '';
    position: absolute;
    left: calc(100% + .55rem);
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 6px 5px 0;
    border-style: solid;
    border-color: transparent #0d3a1c transparent transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s;
    z-index: 99999;
}

.oh-sidebar.is-collapsed .oh-nav-item a:hover::after,
.oh-sidebar.is-collapsed .oh-nav-item a:hover::before,
.oh-sidebar.is-collapsed .oh-sidebar-logout-btn:hover::after,
.oh-sidebar.is-collapsed .oh-sidebar-logout-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* --- Promo card (rotating tagline + illustration) --- */
.oh-promo-card {
    margin-top: 1.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    color: #fff;
}

.oh-sidebar.is-collapsed .oh-promo-card,
.oh-sidebar.is-collapsed .oh-support-btn span {
    display: none;
}

.oh-promo-tagline {
    margin: 0 0 .35rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    line-height: 1.35;
}

.oh-promo-tagline em {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-size: 1.65rem;
    color: var(--oh-gold);
    line-height: 1.2;
}

.oh-promo-copy {
    margin: 0 0 1rem;
    font-size: .8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .65);
}

.oh-promo-illustration {
    display: block;
    width: 100%;
    max-width: 9rem;
    margin: 0 auto;
    opacity: .9;
}

.oh-sidebar-footer {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.oh-sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
    text-align: left;
}

.oh-sidebar-logout-btn i {
    color: var(--oh-gold);
    font-size: .95rem;
    transition: transform .2s ease;
}

.oh-sidebar-logout-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(212, 169, 74, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.oh-sidebar-logout-btn:hover i {
    transform: translateX(2px);
}

.oh-sidebar.is-collapsed .oh-sidebar-logout-btn span {
    display: none;
}

.oh-sidebar.is-collapsed .oh-sidebar-logout-btn {
    justify-content: center;
    padding: .75rem;
}

/* --- Content offset for fixed sidebar (desktop only — mobile keeps
   the existing off-canvas menu, sidebar is hidden below xl) --- */
/* Sticky footer: .oh-header/.oh-page-content/footer stack as flex items so
   .oh-page-content (flex: 1 0 auto below) absorbs the leftover space on a
   short page and the footer lands exactly at the viewport bottom instead of
   floating right under the content; on a tall page it's simply pushed down
   after the content as normal, never fixed in place while scrolling. */
.oh-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1280px) {
    .oh-content {
        margin-left: 17rem;
        transition: margin-left .25s ease;
    }

    .oh-content.is-collapsed {
        margin-left: 5.25rem;
    }

    .oh-sidebar {
        display: flex;
    }
}

@media (max-width: 1279.98px) {
    .oh-sidebar {
        display: none;
    }

    /* Clears the fixed mobile hamburger bar (xl:hidden) that sits on top of
       .oh-content below the sidebar breakpoint */
    .oh-content {
        padding-top: 4.5rem;
    }
}

/* --- Page header (greeting / breadcrumb / bell / avatar) --- */
.oh-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 0;
}

/* Page body wrapper (everything below the header, above the footer). This
   used to be a bare Tailwind utility div (px-[clamp(...)] pb-10) but those
   classes were never part of the compiled minfo bundle, so it was rendering
   with zero padding - every page's content sat flush against the sidebar
   and the right edge of the viewport. Real, hand-authored class instead. */
/* --- Page Transition & Smooth Loading System --- */
@view-transition {
    navigation: auto;
}

#ohPageProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #32893b 0%, #84bb4e 50%, #d4a94a 100%);
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(50, 137, 59, 0.7);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    opacity: 0;
}

#ohPageProgressBar.is-active {
    opacity: 1;
}

#ohPageProgressBar.is-done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s 0.15s ease;
}

.oh-page-content {
    flex: 1 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) 3rem;
    animation: ohPageFadeIn 0.22s ease-out;
}

@keyframes ohPageFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Nav Item Micro-Interactions */
.oh-nav-item a {
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.oh-nav-item a:hover {
    transform: translateX(4px);
}

/* Card and Container Transitions */
.oh-card,
.ops-section-card,
.oh-myhome-card,
.oh-dashboard-combined-card,
.ops-panel-card,
.oh-profile-modal-container,
.oli-card {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.oh-footer-inner {
    text-align: center;
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
}

.oh-header-greeting {
    margin: 0;
    font-size: .85rem;
    color: var(--oli-text);
}

.oh-header-name {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    line-height: 1.25;
}

.oh-header-tagline {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--oli-text);
}

.oh-wave-emoji {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: oh-wave 2.4s ease-in-out infinite;
}

@keyframes oh-wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

.oh-breadcrumb {
    margin: .5rem 0 0;
    font-size: .78rem;
    color: var(--oli-text);
}

.oh-breadcrumb .oh-breadcrumb-current {
    color: var(--oh-forest);
    font-weight: 600;
}

.oh-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.oh-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    color: var(--oh-forest);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.oh-bell:hover {
    transform: translateY(-2px);
    border-color: rgba(50, 137, 59, 0.3);
    box-shadow: 0 4px 12px rgba(13, 58, 28, 0.08);
}

.oh-bell-badge {
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    background: #dc3545;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}

/* --- Notification Dropdown Menu --- */
.oh-notification-dropdown {
    display: none;
    position: absolute;
    right: -2rem;
    top: calc(100% + .75rem);
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(27, 90, 43, 0.12);
    box-shadow: 0 14px 40px rgba(13, 58, 28, 0.14), 0 2px 10px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    overflow: hidden;
    flex-direction: column;
}

.oh-notification-dropdown.is-open {
    display: flex !important;
}

@media (max-width: 480px) {
    .oh-notification-dropdown {
        right: -4rem;
        width: 320px;
    }
}

.oh-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fbfdfb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.oh-notif-header-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oh-notif-header-title h6 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-notif-count-pill {
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 1rem;
    background: rgba(50, 137, 59, 0.12);
    color: var(--oh-status-green);
    text-transform: uppercase;
}

.oh-notif-mark-read {
    font-size: .72rem;
    font-weight: 600;
    color: var(--oli-theme);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease;
}

.oh-notif-mark-read:hover {
    color: var(--oli-theme-hover);
    text-decoration: underline;
}

.oh-notif-list {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.oh-notif-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1.15rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background .2s ease;
    position: relative;
}

.oh-notif-item:hover {
    background: #f8fafc;
}

.oh-notif-item.is-unread {
    background: rgba(50, 137, 59, 0.04);
}

.oh-notif-item.is-unread::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oh-status-green);
}

.oh-notif-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: .9rem;
    margin-top: .15rem;
}

.oh-notif-icon.mint { background: var(--oh-pastel-mint); color: var(--oh-pastel-mint-fg); }
.oh-notif-icon.lilac { background: var(--oh-pastel-lilac); color: var(--oh-pastel-lilac-fg); }
.oh-notif-icon.peach { background: var(--oh-pastel-peach); color: var(--oh-pastel-peach-fg); }
.oh-notif-icon.blue { background: var(--oh-pastel-blue); color: var(--oh-pastel-blue-fg); }

.oh-notif-content {
    flex: 1;
    min-width: 0;
}

.oh-notif-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}

.oh-notif-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.25;
}

.oh-notif-time {
    font-size: .68rem;
    color: #94a3b8;
    white-space: nowrap;
}

.oh-notif-msg {
    margin: 0;
    font-size: .75rem;
    color: var(--oli-text);
    line-height: 1.4;
    word-break: break-word;
}

.oh-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #94a3b8;
}

.oh-notif-empty i {
    font-size: 2rem;
    margin-bottom: .75rem;
    color: #cbd5e1;
}

.oh-notif-empty p {
    margin: 0 0 .25rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-notif-empty span {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--oli-text);
}

.oh-notif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    font-size: .8rem;
    color: var(--oli-text);
}

.oh-notif-footer {
    padding: .75rem 1.25rem;
    background: #fbfdfb;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.oh-notif-footer-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--oli-theme);
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.oh-notif-footer-link:hover {
    color: var(--oli-theme-hover);
    gap: .6rem;
}

.oh-avatar-menu {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--oh-text-dark);
}

.oh-avatar-menu img,
.oh-avatar-menu .oh-avatar-fallback {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--oli-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oli-theme);
}

.oh-avatar-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    max-width: 9rem;
}

.oh-avatar-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.oh-avatar-role {
    font-size: .7rem;
    font-weight: 500;
    color: var(--oli-theme);
}

@media (max-width: 576px) {
    .oh-avatar-info {
        max-width: 5.5rem;
    }
}

.oh-user-menu {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.oh-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    color: var(--oh-forest);
    cursor: pointer;
    transition: all .2s ease;
}

.oh-logout-btn i {
    font-size: .95rem;
}

.oh-user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 11rem;
    padding: .4rem;
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(27, 90, 43, 0.12);
    box-shadow: 0 10px 30px rgba(13, 58, 28, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
}

.oh-user-dropdown.is-open {
    display: block !important;
}

.oh-user-dropdown-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .65rem .85rem;
    border-radius: .75rem;
    font-size: .85rem;
    font-weight: 500;
    color: #2c3e50;
    background: transparent;
    text-decoration: none;
    transition: all .2s ease;
}

.oh-user-dropdown-link i {
    color: #1b5a2b;
    font-size: .95rem;
    width: 1rem;
    text-align: center;
    transition: transform .2s ease;
}

.oh-user-dropdown-link:hover {
    background: #f4faf6;
    color: #144821;
}

.oh-user-dropdown-link:hover i {
    transform: translateX(2px);
    color: #144821;
}

.oh-logout-btn:hover {
    background: #f4faf6;
    border-color: rgba(50, 137, 59, 0.3);
    color: #144821;
    box-shadow: 0 4px 12px rgba(13, 58, 28, 0.08);
}

/* --- Dashboard hero banner & Welcome Hero --- */
.oh-welcome-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 2.25rem clamp(1.5rem, 3.5vw, 2.75rem);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #dcf0e2 0%, #d1ecd8 60%, #c4e6cd 100%);
    border: 1px solid rgba(47, 158, 68, 0.25);
    box-shadow: 0 10px 30px rgba(13, 58, 28, 0.04);
}

.oh-welcome-copy {
    flex: 1 1 24rem;
    min-width: 0;
    z-index: 1;
}

.oh-welcome-title {
    margin: 0 0 .75rem;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.15rem);
    font-weight: 700;
    color: #165626;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.oh-welcome-text {
    font-size: .88rem;
    line-height: 1.68;
    color: #275631;
    margin: 0 0 1.5rem;
    max-width: 44rem;
}

.oh-welcome-text strong {
    color: #123e1c;
    font-weight: 700;
}

.oh-welcome-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.oh-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    border-radius: 2rem;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    color: #1b5a2b;
    border: 1.5px solid rgba(47, 158, 68, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all .2s ease;
    cursor: pointer;
}

.oh-welcome-btn:hover {
    background: #f4faf6;
    border-color: #2f9e44;
    color: #144821;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 90, 43, 0.12);
}

.oh-welcome-btn.active {
    background: #1b5a2b;
    color: #ffffff;
    border-color: #1b5a2b;
    box-shadow: 0 4px 14px rgba(27, 90, 43, 0.25);
}

.oh-welcome-btn.active:hover {
    background: #144821;
    color: #ffffff;
    border-color: #144821;
}

.oh-welcome-lottie-wrap {
    flex: 0 0 460px;
    max-width: 520px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.oh-welcome-hero-img {
    width: 100%;
    max-width: 500px;
    max-height: 380px;
    object-fit: contain;
    filter: drop-shadow(0 12px 26px rgba(27, 90, 43, 0.2));
    transition: transform .3s ease;
}

.oh-welcome-hero-img:hover {
    transform: scale(1.04);
}

.oh-welcome-lottie-wrap img,
.oh-welcome-lottie-wrap svg,
.oh-welcome-lottie-wrap lottie-player,
.oh-welcome-lottie-wrap .lottie-container {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .oh-welcome-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .oh-welcome-lottie-wrap {
        align-self: center;
        width: 100%;
        max-width: 240px;
    }
}

.oh-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f6f9f5 50%, #edf5eb 100%);
    border: 1px solid rgba(18, 38, 26, 0.08);
    box-shadow: 0 10px 32px rgba(13, 58, 28, 0.04);
}

.oh-hero-copy {
    flex: 1 1 20rem;
    min-width: 0;
    z-index: 1;
}

.oh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    margin-bottom: 1rem;
    border-radius: 2rem;
    background: rgba(50, 137, 59, 0.08);
    border: 1px solid rgba(50, 137, 59, 0.2);
    color: var(--oli-theme);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.oh-hero-title {
    max-width: 34rem;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.28;
    color: var(--oh-text-dark);
}

.oh-hero-title em {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    color: var(--oli-theme);
}

.oh-hero-doodle {
    display: inline-block;
    margin-left: .35rem;
    color: var(--oh-gold);
    font-size: .8em;
    transform: rotate(-8deg);
}

.oh-hero-sub {
    max-width: 28rem;
    margin: .75rem 0 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--oli-text);
}

.oh-hero-photo-wrap {
    position: relative;
    flex: 0 0 380px;
    max-width: 420px;
    height: 200px;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 14px 34px -10px rgba(13, 40, 24, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.oh-hero-photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
}

.oh-hero-photo-wrap:hover .oh-hero-photo {
    transform: scale(1.04);
}

.oh-hero-dots {
    display: flex;
    justify-content: flex-start;
    gap: .45rem;
    margin-top: 1.25rem;
}

.oh-hero-dots button {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 38, 26, 0.15);
    cursor: pointer;
    transition: all .25s ease;
}

.oh-hero-dots button.is-active {
    width: 1.5rem;
    border-radius: 1rem;
    background: var(--oli-theme);
}

@media (max-width: 900px) {
    .oh-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .oh-hero-photo-wrap {
        flex: 0 0 180px;
        max-width: 100%;
    }
}

/* --- Stat card row --- */
.oh-stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-top: 1rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .oh-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .oh-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.oh-stat-grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    height: 100%;
}

@media (min-width: 500px) {
    .oh-stat-grid.oh-stat-grid-2col {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr);
    }
}

.oh-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.05rem 1.15rem .85rem;
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.15rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    min-height: 132px;
    box-sizing: border-box;
}

.oh-stat-card.oh-stat-card-lg {
    padding: 1.25rem 1.35rem 1rem;
}

.oh-stat-card.oh-stat-card-lg .oh-stat-top {
    height: 2.35rem;
    margin-bottom: .65rem;
}

.oh-stat-card.oh-stat-card-lg .oh-stat-icon {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1rem;
}

.oh-stat-card.oh-stat-card-lg .oh-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.oh-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13, 58, 28, 0.08);
    border-color: rgba(50, 137, 59, 0.25);
}

.oh-stat-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .5rem;
    height: 2.15rem;
}

.oh-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--oli-soft);
    color: var(--oli-theme);
    font-size: .92rem;
    transition: transform .25s ease;
}

.oh-stat-card:hover .oh-stat-icon {
    transform: scale(1.06);
}

.oh-stat-icon.mint { background: var(--oh-pastel-mint); color: var(--oh-pastel-mint-fg); }
.oh-stat-icon.lilac { background: var(--oh-pastel-lilac); color: var(--oh-pastel-lilac-fg); }
.oh-stat-icon.peach { background: var(--oh-pastel-peach); color: var(--oh-pastel-peach-fg); }
.oh-stat-icon.pink { background: var(--oh-pastel-pink); color: var(--oh-pastel-pink-fg); }
.oh-stat-icon.blue { background: var(--oh-pastel-blue); color: var(--oh-pastel-blue-fg); }

.oh-stat-card h6 {
    margin: 0;
    font-size: .74rem;
    font-weight: 600;
    color: #5f7166;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.25;
}

.oh-stat-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .2rem;
    flex: 1 1 auto;
    margin-bottom: .45rem;
}

.oh-stat-value {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    line-height: 1.3;
    word-break: break-word;
}

.oh-stat-card a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--oli-theme);
    text-decoration: none;
    border-top: none;
    transition: color .2s ease, gap .2s ease;
}

.oh-stat-card a i {
    font-size: .72rem;
    transition: transform .2s ease;
}

.oh-stat-card a:hover {
    color: var(--oli-theme-hover);
    gap: .55rem;
}

.oh-stat-card a:hover i {
    transform: translateX(2px);
}

.oh-stat-empty {
    margin: 0;
    font-size: .82rem;
    color: #8a9990;
}

/* --- Quick action cards (Dashboard) --- */
.oh-quick-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0;
}

@media (min-width: 640px) {
    .oh-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .oh-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.oh-quick-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oh-quick-head i {
    color: var(--oh-gold);
    font-size: .95rem;
}

.oh-quick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    text-decoration: none;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    overflow: hidden;
    min-height: 160px;
    box-sizing: border-box;
}

.oh-quick-card:hover {
    border-color: rgba(50, 137, 59, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13, 58, 28, 0.08);
}

.oh-quick-card img {
    width: 2.65rem;
    height: 2.65rem;
    margin-bottom: 1.15rem;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}

.oh-quick-card:hover img {
    transform: scale(1.08);
}

.oh-quick-card-arrow {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(50, 137, 59, 0.08);
    color: var(--oli-theme);
    font-size: .78rem;
    transition: all .25s ease;
}

.oh-quick-card-arrow i {
    transform: rotate(-45deg);
    display: inline-block;
    transition: transform .25s ease;
}

.oh-quick-card:hover .oh-quick-card-arrow {
    background: var(--oli-theme);
    color: #fff;
    transform: translate(2px, -2px);
}

.oh-quick-card:hover .oh-quick-card-arrow i {
    transform: rotate(-45deg) scale(1.1);
}

.oh-quick-card h4 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.3;
}

.oh-quick-card p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--oli-text);
}

/* --- Dashboard Unified Actions & Activity Card --- */
.oh-dashboard-combined-card {
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-top: 1rem;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .oh-dashboard-combined-card {
        grid-template-columns: 1.15fr 1fr;
    }
}

/* Unit Acceptance banner — full-width row inside the combined card, above the two columns */
.oh-combined-acceptance-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.35rem;
    background: rgba(231, 245, 236, 0.55);
    border-bottom: 1px solid rgba(18, 38, 26, .07);
}

/* Unit identity header — full-width green gradient row at the top of the combined card */
.oh-combined-hero-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 1.75rem 1.5rem;
    background: linear-gradient(135deg, #3a6b47 0%, #4e8c5f 40%, #6aaa7a 100%);
    border-radius: calc(1.25rem - 1px) calc(1.25rem - 1px) 0 0;
    min-height: 9rem;
}

.oh-combined-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 2rem;
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: .6rem;
}

.oh-combined-hero-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.01em;
}

.oh-combined-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.15rem;
    border-radius: 2rem;
    background: #ffffff;
    color: var(--oli-theme);
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    flex: none;
    align-self: flex-start;
    margin-top: auto;
}

.oh-combined-left {
    display: flex;
    flex-direction: column;
}

.oh-combined-right {
    display: flex;
    flex-direction: column;
    border-top: none;
}

@media (min-width: 1024px) {
    .oh-combined-right {
        border-top: none;
        border-left: none;
    }
}

.oh-combined-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem 0.5rem;
    border-bottom: none;
    background: transparent;
}

.oh-combined-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oh-combined-title i {
    color: var(--oh-gold);
    font-size: .95rem;
}

.oh-view-all-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--oli-theme);
    text-decoration: none;
    transition: color .2s ease;
}

.oh-view-all-link:hover {
    color: var(--oli-theme-hover);
}

/* Compact single-column list - same look whether the Reserve Amenity row is present or not */
.oh-quick-tile-grid {
    display: flex;
    flex-direction: column;
    align-content: start;
}

.oh-quick-tile-grid .oh-quick-tile {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.15rem;
    background: transparent;
    text-decoration: none;
    transition: background .2s ease;
    box-sizing: border-box;
}

.oh-quick-tile-grid .oh-quick-tile:hover {
    background: rgba(50, 137, 59, 0.035);
}

.oh-quick-tile-grid .oh-quick-tile + .oh-quick-tile {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.oh-quick-tile img {
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0;
    flex: none;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}

.oh-quick-tile:hover img {
    transform: scale(1.08);
}

.oh-quick-tile-text {
    flex: 1;
}

.oh-quick-tile h4 {
    margin: 0 0 .1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.3;
}

.oh-quick-tile p {
    margin: 0;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--oli-text);
}

.oh-quick-tile-grid .oh-quick-card-arrow {
    top: 50%;
    right: 1rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -.8rem;
}

.oh-quick-tile-grid .oh-quick-tile-text {
    padding-right: 2rem;
}

/* --- Activity List Inner --- */
.oh-activity-list-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-around;
}

.oh-activity-list-inner .oh-activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.35rem;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.oh-activity-list-inner .oh-activity-item:hover {
    background: rgba(50, 137, 59, 0.03);
}

.oh-activity-list-inner .oh-activity-item + .oh-activity-item {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.oh-activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--oli-soft);
    color: var(--oli-theme);
    font-size: .95rem;
}

.oh-activity-icon.mint { background: var(--oh-pastel-mint); color: var(--oh-pastel-mint-fg); }
.oh-activity-icon.lilac { background: var(--oh-pastel-lilac); color: var(--oh-pastel-lilac-fg); }
.oh-activity-icon.blue { background: var(--oh-pastel-blue); color: var(--oh-pastel-blue-fg); }
.oh-activity-icon.peach { background: var(--oh-pastel-peach); color: var(--oh-pastel-peach-fg); }

.oh-activity-item h6 {
    margin: 0 0 .15rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--oh-text-dark);
}

.oh-activity-item p {
    margin: 0;
    font-size: .76rem;
    color: var(--oli-text);
}

.oh-activity-item i.oh-activity-chevron {
    margin-left: auto;
    color: var(--oli-text);
    font-size: .8rem;
    transition: transform .2s ease, color .2s ease;
}

.oh-activity-item:hover i.oh-activity-chevron {
    color: var(--oli-theme);
    transform: translateX(3px);
}

/* --- Contact Support banner (reused across other pages) --- */
.oh-support-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.35rem 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.oh-support-row-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    width: 100%;
}

.oh-support-banner-right {
    margin-top: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .oh-support-banner-right {
        max-width: 50%;
    }
}

.oh-support-banner-copy {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex: 1 1 20rem;
}

.oh-support-banner img {
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    object-fit: contain;
}

.oh-support-banner h6 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-support-banner p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--oli-text);
}

.oh-support-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.5rem;
    border-radius: .75rem;
    background: var(--oli-theme);
    color: #ffffff !important;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid var(--oli-theme);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
}

.oh-support-panel-action:hover {
    background: var(--oli-theme-hover);
    border-color: var(--oli-theme-hover);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(50, 137, 59, 0.25);
}

.oh-support-panel-action i {
    font-size: .9rem;
}

/* ==================================================================
   10b. Support — "Ask & Relax" homeowner ticket page
================================================================== */

.oh-support-sub {
    margin: .25rem 0 0;
    font-size: .9rem;
    color: var(--oli-text);
}

.oh-support-new-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    padding: .8rem 1.5rem;
    border-radius: .8rem;
    border: none;
    background: var(--oli-theme);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(50, 137, 59, .28);
    transition: background .2s ease, transform .2s ease;
}

.oh-support-new-btn:hover {
    background: var(--oli-theme-hover);
    transform: translateY(-1px);
}

.oh-support-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 2rem 0 1rem;
}

.oh-support-section-title span {
    display: grid;
    place-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: var(--oh-pastel-mint);
    color: var(--oh-pastel-mint-fg);
    font-size: 1rem;
}

.oh-support-section-title h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-request-empty,
.oh-request-loading {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #ffffff;
    border: 1px dashed var(--oli-surface-border);
    border-radius: 1rem;
    color: var(--oli-text);
    font-size: .88rem;
}

/* Status pills reuse .oli-status-pill's own tokens - see section 8 above - just with the plain
   text labels this page uses instead of that component's is-* state classes. */
.oh-request-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .28rem .7rem;
    border-radius: 1rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.oh-request-pill.is-new { color: var(--oh-status-blue); background: var(--oh-status-blue-bg); }
.oh-request-pill.is-pending,
.oh-request-pill.is-ongoing { color: var(--oh-status-amber); background: var(--oh-status-amber-bg); }
.oh-request-pill.is-resolved { color: var(--oh-status-green); background: var(--oh-status-green-bg); }
.oh-request-pill.is-closed { color: var(--oh-status-neutral); background: var(--oh-status-neutral-bg); }

/* --- Support page redesign: New Request / Track a Ticket / Your Requests thread now render
   inline on the page itself instead of in .oh-modal-backdrop/.oh-drawer-backdrop overlays (those
   generic classes stay in place - Welcome/Celebration/Survey/Doc-viewer still use them). --- */
.oh-support-panel {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, .08);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
}

.oh-support-panel-desc {
    margin: 0 0 1.25rem;
    font-size: .85rem;
    color: var(--oli-text);
    line-height: 1.55;
}

.oh-ticket-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .25rem;
}

/* My Tickets: clicking a table row swaps the table for its own standalone conversation card
   (see .oh-ticket-table tbody tr.is-active in Support.cshtml's own <style> for the row's own
   highlighted state) rather than expanding beneath the row itself. */
.oh-request-thread-panel {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--oli-theme);
    border-left: 3px solid var(--oli-theme);
    border-radius: 1rem;
    padding: 1.4rem;
    box-shadow: 0 6px 20px rgba(50, 137, 59, .08);
}

.oh-request-thread-panel.is-open {
    display: flex;
}

.oh-request-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--oli-surface-border);
}

.oh-request-thread-header-text h4 {
    margin: .4rem 0 .2rem;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.3;
}

.oh-request-thread-header-text p {
    margin: 0;
    font-size: .75rem;
    color: var(--oli-text);
}

.oh-request-thread-close {
    display: grid;
    place-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: none;
    background: var(--oli-soft);
    color: var(--oli-text);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.oh-request-thread-close:hover {
    background: var(--oh-status-red-bg);
    color: var(--oh-status-red);
}

.oh-request-thread-attachments {
    font-size: .78rem;
    color: #93a098;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .75rem;
}

.oh-request-thread-messages {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: .1rem;
}

.oh-request-thread-reply {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--oli-surface-border);
}

@media (max-width: 480px) {
    .oh-support-panel { padding: 1.35rem; }
    .oh-request-thread-panel { padding: 1.1rem; }
    .oh-request-thread-messages { max-height: 18rem; }
}

/* ====================================================================
   Ticket detail / conversation panel (My Tickets tab)
   Back button, ticket-header row, detail-card rows, message bubbles,
   date-group separators, attachment chips, reply composer, closed note.
   Global base rules; Support.cshtml's scoped .oh-support-page block
   provides per-page colour/radius overrides for the bubbles.
==================================================================== */

/* "← Back to My Tickets" button */
.oh-ticket-thread-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--oli-theme);
    cursor: pointer;
    border-radius: .5rem;
    transition: background .15s ease;
    margin-bottom: .5rem;
}
.oh-ticket-thread-back:hover { background: var(--oli-soft); }

/* Ticket code / status pill / filed-date header row */
.oh-ticket-thread-hdr {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--oli-surface-border);
}
.oh-ticket-thread-hdr-icon {
    flex: none;
    display: grid;
    place-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    background: var(--oli-soft);
    color: var(--oli-theme);
    font-size: 1.05rem;
}
.oh-ticket-thread-hdr-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.oh-ticket-thread-code {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    font-family: 'Poppins', sans-serif;
}
.oh-ticket-thread-dates {
    margin-top: .25rem;
    font-size: .76rem;
    color: var(--oli-text);
}

/* Detail card: one bordered block per ticket field (Inquiry Type / Topic / Subject / Details / Attachment/s) */
.oh-ticket-detail-card {
    border: 1px solid rgba(18, 38, 26, .08);
    border-radius: .9rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #ffffff;
}
.oh-ticket-detail-field {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid rgba(18, 38, 26, .06);
}
.oh-ticket-detail-field:last-child { border-bottom: none; }
.oh-ticket-detail-field-icon {
    flex: none;
    width: 1.5rem;
    text-align: center;
    color: var(--oli-text);
    font-size: .88rem;
    padding-top: .1rem;
}
.oh-ticket-detail-field-label {
    flex: none;
    width: 7rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--oli-text);
    line-height: 1.45;
    padding-top: .1rem;
}
.oh-ticket-detail-field-value {
    flex: 1;
    font-size: .875rem;
    color: var(--oh-text-dark);
    line-height: 1.55;
    word-break: break-word;
}

/* "Conversation" label + Sort-by select */
.oh-conv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.oh-conv-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--oh-text-dark);
}

/* Scrollable message list */
.oh-ticket-messages {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: .25rem .1rem;
}

/* Date-group separator */
.oh-ticket-msg-date {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .72rem;
    color: var(--oli-text);
    margin: .2rem 0;
}
.oh-ticket-msg-date::before,
.oh-ticket-msg-date::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--oli-surface-border);
}

/* Bubble wrapper - sets left/right alignment */
.oh-ticket-msg-wrap {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-width: 72%;
}
.oh-ticket-msg-wrap.is-client { align-self: flex-end; align-items: flex-end; }
.oh-ticket-msg-wrap.is-oli   { align-self: flex-start; align-items: flex-start; }

/* Sender name + timestamp */
.oh-ticket-msg-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--oli-text);
}
.oh-ticket-msg-author {
    font-weight: 600;
    color: var(--oh-text-dark);
    font-size: .72rem;
}

/* Bubble base - colour/radius fine-tuned by Support.cshtml's scoped block */
.oh-ticket-msg {
    padding: .75rem 1.05rem;
    font-size: .85rem;
    border-radius: 1.1rem;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}
.oh-ticket-msg-oli {
    background: var(--oli-soft);
    color: var(--oh-text-dark);
    border-radius: 1.1rem 1.1rem 1.1rem .3rem;
}
.oh-ticket-msg-client {
    background: #E7F5EC;
    color: var(--oh-text-dark);
    border-radius: 1.1rem 1.1rem .3rem 1.1rem;
}

/* Attachment chip row - used inside bubbles and inside the Attachment/s detail field */
.oh-ticket-msg-attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}
.oh-ticket-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    background: #ffffff;
    border: 1px solid var(--oli-surface-border);
    border-radius: .65rem;
    font-size: .78rem;
    color: var(--oh-text-dark);
    max-width: 20rem;
}
.oh-ticket-attach-chip .chip-icon { color: #E53935; font-size: .88rem; flex: none; }
.oh-ticket-attach-chip .chip-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}
.oh-ticket-attach-chip .chip-size { color: var(--oli-text); font-size: .72rem; flex: none; }
.oh-ticket-attach-chip .chip-dl   { color: var(--oli-theme); flex: none; margin-left: .15rem; }

/* Reply composer row */
.oh-ticket-reply {
    display: none;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    background: #f8faf8;
    border-top: 1px solid rgba(18, 38, 26, .08);
    border-radius: 0 0 .75rem .75rem;
}
.oh-ticket-reply.is-visible { display: flex; }

/* Closed-ticket note - shown instead of the reply composer */
.oh-ticket-closed-note {
    display: none;
    text-align: center;
    font-size: .8rem;
    color: var(--oli-text);
    font-style: italic;
    padding: .75rem 1rem;
    border-top: 1px solid rgba(18, 38, 26, .08);
    margin: 0;
}
.oh-ticket-closed-note.is-visible { display: block; }

/* "Our team typically responds within office hours." footer */
.oh-ticket-office-note {
    text-align: center;
    font-size: .75rem;
    color: var(--oli-text);
    padding: .4rem 0 .1rem;
    margin: 0;
}

@media (max-width: 480px) {
    .oh-ticket-messages { max-height: 18rem; }
    .oh-ticket-msg-wrap { max-width: 90%; }
    .oh-ticket-detail-field { flex-wrap: wrap; }
    .oh-ticket-detail-field-label { width: auto; }
}

/* ====================================================================
   Off-canvas delivery for the ticket detail + conversation panel.
   The #ohRequestThreadSlot div is the off-canvas container; the inner
   .oh-request-thread-panel is always rendered as flex once cloned in.
==================================================================== */

/* Backdrop */
.oh-ticket-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.oh-ticket-offcanvas-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Sliding drawer */
.oh-ticket-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 620px;
    max-width: 100vw;
    z-index: 1050;
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -6px 0 32px rgba(0, 0, 0, .12);
}
.oh-ticket-offcanvas.is-open {
    transform: translateX(0);
}

/* The panel fills the full drawer height, scrolling is handled by .oh-offcanvas-body */
.oh-ticket-offcanvas .oh-request-thread-panel,
.oh-ticket-offcanvas .oh-request-thread-panel.is-open {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
}

/* Top bar: just the circular × close button */
.oh-offcanvas-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--oli-surface-border);
    flex: none;
    background: #ffffff;
}
.oh-offcanvas-close-btn {
    display: grid;
    place-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: var(--oli-soft);
    color: var(--oli-text);
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
}
.oh-offcanvas-close-btn:hover {
    background: #FDECEA;
    color: #C62828;
}

/* Scrollable body: ticket header + detail card + conversation */
.oh-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Sticky footer: reply composer / closed note / office hours */
.oh-offcanvas-footer {
    flex: none;
    border-top: 1px solid var(--oli-surface-border);
    background: #ffffff;
}

/* Inside the drawer the message list is not height-capped - the body scrolls instead */
.oh-ticket-offcanvas .oh-ticket-messages {
    max-height: none;
    overflow-y: visible;
}

/* Detail card loses its own bottom margin - gap on .oh-offcanvas-body handles spacing */
.oh-ticket-offcanvas .oh-ticket-detail-card { margin-bottom: 0; }

/* Reply row border / radius handled by the footer container */
.oh-ticket-offcanvas .oh-ticket-reply {
    border-top: none;
    border-radius: 0;
    padding: .75rem 1rem;
}
.oh-ticket-offcanvas .oh-ticket-closed-note {
    border-top: none;
    padding: .5rem 1rem .55rem;
}
.oh-ticket-offcanvas .oh-ticket-office-note {
    padding: .35rem 1rem .65rem;
}

@media (max-width: 640px) {
    .oh-ticket-offcanvas { width: 100%; }
}

/* --- New Request modal --- */
.oh-newreq-modal {
    background: #ffffff;
    border-radius: 1.4rem;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    transform: scale(.94) translateY(12px);
    transition: transform .25s ease;
}

.oh-modal-backdrop.is-open .oh-newreq-modal {
    transform: scale(1) translateY(0);
}

.oh-newreq-body {
    padding: 1.5rem 1.6rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.oh-newreq-label {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--oli-text);
    text-transform: uppercase;
}

.oh-newreq-chip-row {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.oh-newreq-chip {
    padding: .5rem 1rem;
    border-radius: 1.3rem;
    font-size: .82rem;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid var(--oli-surface-border);
    color: var(--oli-text);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.oh-newreq-chip.is-selected {
    background: var(--oli-theme);
    border-color: var(--oli-theme);
    color: #ffffff;
    font-weight: 600;
}

.oh-newreq-input,
.oh-newreq-textarea {
    width: 100%;
    padding: .8rem 1rem;
    background: var(--oli-soft);
    border: 1px solid transparent;
    border-radius: .85rem;
    font-family: inherit;
    font-size: .88rem;
    color: var(--oh-text-dark);
    resize: none;
}

.oh-newreq-input:focus,
.oh-newreq-textarea:focus {
    outline: none;
    border-color: var(--oli-theme);
    background: #ffffff;
}

.oh-newreq-attach {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1.5px dashed var(--oli-surface-border);
    border-radius: .85rem;
    color: var(--oli-text);
    cursor: pointer;
    font-size: .85rem;
}

.oh-newreq-attach input[type="file"] { display: none; }

.oh-newreq-attach-icon {
    display: grid;
    place-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background: var(--oli-soft);
    color: var(--oli-theme);
}

.oh-newreq-send {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border-radius: .8rem;
    border: none;
    background: var(--oli-theme);
    color: #ffffff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(50, 137, 59, .28);
}

.oh-newreq-send:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* --- Ticket detail drawer --- */
.oh-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 16, .45);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.oh-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.oh-ticket-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, 100vw);
    background: var(--oh-cream);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s ease;
}

.oh-drawer-backdrop.is-open .oh-ticket-drawer {
    transform: translateX(0);
}

.oh-drawer-header {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.5rem 1.5rem 1.15rem;
    border-bottom: 1px solid var(--oli-surface-border);
    background: #ffffff;
}

.oh-drawer-back {
    display: grid;
    place-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--oli-soft);
    color: var(--oli-text);
    cursor: pointer;
    border: none;
}

.oh-drawer-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 .3rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-drawer-code {
    margin: 0;
    font-size: .78rem;
    color: var(--oli-text);
}

.oh-drawer-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.oh-bubble-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 85%;
}

.oh-bubble-row.is-mine {
    align-self: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

.oh-bubble-row.is-theirs {
    align-self: flex-start;
}

.oh-bubble-avatar {
    display: grid;
    place-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--oli-theme);
    color: #ffffff;
    font-size: .65rem;
    font-weight: 700;
    margin-top: 1.05rem;
}

.oh-bubble-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--oli-text);
    margin: 0 0 .3rem;
}

.oh-bubble-text {
    padding: .8rem 1.05rem;
    font-size: .88rem;
    color: var(--oh-text-dark);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.oh-bubble-row.is-mine .oh-bubble-text {
    background: #E7F5EC;
    border-radius: 1.1rem 1.1rem .3rem 1.1rem;
}

.oh-bubble-row.is-theirs .oh-bubble-text {
    background: #ffffff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.1rem 1.1rem 1.1rem .3rem;
}

.oh-bubble-time {
    font-size: .72rem;
    color: #93a098;
    margin-top: .3rem;
}

.oh-drawer-reply {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--oli-surface-border);
    background: #ffffff;
}

.oh-drawer-reply-input {
    flex: 1;
    padding: .8rem 1.1rem;
    background: var(--oli-soft);
    border: 1px solid transparent;
    border-radius: 1.4rem;
    font-family: inherit;
    font-size: .85rem;
    color: var(--oh-text-dark);
}

.oh-drawer-reply-input:focus {
    outline: none;
    border-color: var(--oli-theme);
    background: #ffffff;
}

.oh-drawer-icon-btn {
    display: grid;
    place-content: center;
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    color: var(--oli-text);
    cursor: pointer;
    background: none;
    border: none;
}

.oh-drawer-send-btn {
    display: grid;
    place-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--oli-theme);
    color: #ffffff;
    cursor: pointer;
    border: none;
}

.oh-drawer-send-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .oh-page-header { flex-wrap: wrap; }
    .oh-support-new-btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
    .oh-newreq-modal { max-width: 100%; border-radius: 1.1rem; }
}

@media (max-width: 480px) {
    .oh-newreq-body { padding: 1.25rem 1.1rem 1.5rem; }
    .oh-drawer-thread { padding: 1.1rem; }
    .oh-drawer-header { padding: 1.1rem 1.1rem .9rem; }
    .oh-drawer-reply { padding: .85rem 1.1rem; }
    .oh-bubble-row { max-width: 92%; }
}

/* ==================================================================
   11. Amenities — Upcoming Bookings / Reservation Requests cards
================================================================== */
.oh-booking-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .oh-booking-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

.oh-col-title {
    margin: 0 0 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-col-title span {
    color: var(--oli-theme);
}

.oh-col-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
    margin-left: .4rem;
    border-radius: 50%;
    background: var(--oli-soft);
    color: var(--oli-text) !important;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
}

.oh-booking-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oh-booking-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.1rem;
}

.oh-booking-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.oh-booking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--oli-soft);
    color: var(--oli-theme);
    font-size: 1.05rem;
}

.oh-booking-card h4 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-booking-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .3rem;
    font-size: .82rem;
    color: var(--oli-text);
}

.oh-booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--oli-surface-border);
}

/* ==================================================================
   12. My Home — unit details / journey milestone two-column layout
================================================================== */
.oh-myhome-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1050px) {
    .oh-myhome-cols {
        grid-template-columns: 1.1fr 1fr;
    }
}

.oh-card {
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 12px 30px -18px rgba(21, 59, 44, .18);
}

.oh-card-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-card-title i {
    display: grid;
    place-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    font-size: 1rem;
    color: var(--oh-pastel-mint-fg);
    background: var(--oh-pastel-mint);
    border-radius: 50%;
}

.oh-def-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 1rem;
}

@media (min-width: 480px) {
    .oh-def-list { grid-template-columns: repeat(2, 1fr); }
}

.oh-def-list dt {
    margin: 0 0 .15rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--oli-text);
}

.oh-def-list dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-hint-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--oh-cream);
    border-radius: .9rem;
    text-decoration: none;
    color: inherit;
}

.oh-hint-row i:first-child {
    color: var(--oli-theme);
}

.oh-hint-row p {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-hint-row span {
    display: block;
    font-size: .74rem;
    font-weight: 400;
    color: var(--oli-text);
}

.oh-hint-row i:last-child {
    margin-left: auto;
    color: var(--oli-text);
}

/* --- Buyer/Co-Borrower tabs (Documents) --- */
.oh-tabs {
    display: flex;
    gap: 1.75rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--oli-surface-border);
}

.oh-tab-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0 .85rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: .88rem;
    font-weight: 500;
    color: var(--oli-text);
    cursor: pointer;
}

.oh-tab-btn.is-active {
    color: var(--oli-theme);
    border-bottom-color: var(--oli-theme);
}

.oh-tab-panel { display: none; }
.oh-tab-panel.is-active { display: block; }

/* ------------------------------------------------------------------
   New Components for Premium Layout
------------------------------------------------------------------ */

/* ==================================================================
   My Home Page — Premium Layout & Milestone Stepper
================================================================== */
.oh-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.oh-page-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 600;
    color: var(--oh-text-dark);
    margin: 0 0 .25rem;
}

/* Wide Hero (My Home) */
.oh-page-hero {
    position: relative;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: 0 12px 32px rgba(13, 58, 28, 0.08);
    border: 1px solid rgba(18, 38, 26, 0.08);
}

.oh-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 58, 28, 0.1) 0%, rgba(13, 58, 28, 0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 1.75rem 2rem;
    color: #fff;
}

.oh-page-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 1rem;
    flex-wrap: wrap;
}

.oh-page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}

.oh-page-hero-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.oh-page-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.15rem;
    border-radius: 2rem;
    background: #ffffff;
    color: var(--oli-theme);
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

/* Unit Acceptance footer strip — sits inside .oh-page-hero as a unified bottom band */
.oh-hero-acceptance-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(18, 38, 26, .08);
    border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
}

.oh-hero-acceptance-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    flex: none;
}

.oh-hero-acceptance-label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1rem;
    background: rgba(18, 38, 26, .15);
    margin-left: .5rem;
}

.oh-hero-acceptance-status {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    flex: 1;
    min-width: 0;
}

.oh-hero-acceptance-status.is-accepted {
    color: var(--oh-status-green);
    font-weight: 500;
}

.oh-hero-acceptance-status.is-pending {
    color: var(--oli-text);
}

.oh-hero-acceptance-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: var(--sp-radius-md);
    background: var(--oli-theme);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}

.oh-hero-acceptance-btn:hover { opacity: .88; }

/* Two-column Layout (My Home) */
.oh-myhome-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .oh-myhome-cols {
        grid-template-columns: 1fr 1.35fr;
        align-items: start;
    }
}

/* Info Cards */
.oh-info-card {
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.oh-card-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    margin: 0 0 1.25rem;
}

.oh-card-title i {
    color: var(--oli-theme);
    font-size: 1.1rem;
}

/* Definition List */
.oh-def-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.5rem;
}

.oh-def-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(18, 38, 26, 0.06);
    font-size: .88rem;
}

.oh-def-list > div:last-child {
    border-bottom: none;
}

.oh-def-list dt {
    color: var(--oli-text);
    font-weight: 500;
}

.oh-def-list dd {
    margin: 0;
    color: var(--oh-text-dark);
    font-weight: 600;
    text-align: right;
}

/* Hint row */
.oh-hint-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: rgba(50, 137, 59, 0.05);
    border: 1px solid rgba(50, 137, 59, 0.15);
    text-decoration: none;
    color: inherit;
    transition: all .25s ease;
}

.oh-hint-row:hover {
    background: rgba(50, 137, 59, 0.1);
    border-color: rgba(50, 137, 59, 0.3);
    transform: translateY(-2px);
}

/* Compact Unit Details Styles */
.oh-def-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .oh-def-grid {
        grid-template-columns: 1fr;
    }
}

.oh-def-item {
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
    border-bottom: none;
}

.oh-def-item dt {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--oli-text);
    margin: 0 0 .15rem;
}

.oh-def-item dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

/* ═══════════════════════════════════════════════════════════════
   oh-myhome-card — single premium container for My Home page
   ═══════════════════════════════════════════════════════════════ */

.oh-myhome-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, .07);
    border-radius: 1.35rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
    overflow: hidden;
    margin-top: 1.5rem;
}

/* ① Hero header */
.oh-myhome-card-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2rem 1.75rem;
    background: linear-gradient(135deg, #2d5a3a 0%, #3e7a52 45%, #5a9e6f 100%);
    min-height: 9.5rem;
    flex-wrap: wrap;
}

.oh-myhome-card-hero-left {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.oh-myhome-card-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

.oh-myhome-project-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 2rem;
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.92);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    width: fit-content;
}

.oh-myhome-unit-code {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.oh-myhome-unit-type {
    margin: 0;
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    font-weight: 400;
}

.oh-myhome-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: 2rem;
    background: #ffffff;
    color: var(--oli-theme);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    white-space: nowrap;
}

.oh-myhome-acceptance-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.oh-myhome-acceptance-badge.is-accepted {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
}

.oh-myhome-acceptance-badge.is-pending {
    background: rgba(255,200,50,.25);
    color: rgba(255,255,255,.9);
}

/* ② Spec strip */
.oh-myhome-spec-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: .9rem 2rem;
    background: rgba(231, 245, 236, 0.5);
    border-bottom: 1px solid rgba(18, 38, 26, .07);
}

.oh-myhome-spec-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .25rem 1.5rem .25rem 0;
}

.oh-myhome-spec-item:first-child {
    padding-left: 0;
}

.oh-myhome-spec-item dt {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--oli-text);
    margin: 0;
}

.oh-myhome-spec-item dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-myhome-spec-item dd.is-green { color: var(--oh-status-green); }

.oh-myhome-spec-divider {
    width: 1px;
    height: 2rem;
    background: rgba(18, 38, 26, .12);
    margin: 0 1.5rem 0 0;
    flex: none;
}

/* ③ Body */
.oh-myhome-card-body {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .oh-myhome-card-body {
        grid-template-columns: 1fr 1.1fr;
    }
}

.oh-myhome-card-details {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-right: 1px solid rgba(18, 38, 26, .06);
}

/* Detail list */
.oh-myhome-dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0;
}

.oh-myhome-dl-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(18, 38, 26, .05);
}

.oh-myhome-dl-row:nth-child(odd) {
    padding-right: 1.5rem;
}

.oh-myhome-dl-row dt {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--oli-text);
    margin: 0;
}

.oh-myhome-dl-row dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-myhome-dl-row dd.is-green { color: var(--oh-status-green); }

/* Acceptance block (inside left panel, only when not yet accepted) */
.oh-myhome-acceptance-block {
    padding: 1rem 1.1rem;
    border-radius: .85rem;
    background: rgba(231,245,236,.6);
    border: 1px solid rgba(50,137,59,.15);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.oh-myhome-acceptance-title {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    display: flex;
    align-items: center;
    gap: .4rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.oh-myhome-acceptance-desc {
    margin: 0;
    font-size: .82rem;
    color: var(--oli-text);
}

.oh-myhome-acceptance-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--oli-text);
}

.oh-myhome-acceptance-checklist li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.oh-myhome-acceptance-checklist li.is-done {
    color: var(--oh-status-green);
    font-weight: 500;
}

/* Right: glance panel */
.oh-myhome-card-glance {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oh-myhome-glance-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    display: flex;
    align-items: center;
    gap: .45rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.oh-myhome-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
    flex: 1;
}

.oh-myhome-glance-tile {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.1rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(18, 38, 26, .08);
    background: #fff;
    text-decoration: none;
    transition: box-shadow .18s, transform .18s;
    cursor: pointer;
}

.oh-myhome-glance-tile:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    transform: translateY(-2px);
}

.oh-myhome-glance-tile dt {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--oli-text);
    margin: 0;
}

.oh-myhome-glance-tile dd {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--oh-text-dark);
    line-height: 1.2;
}

.oh-myhome-tile-link {
    margin-top: auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--oli-theme);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.oh-hint-row-compact {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    border-radius: .75rem;
    background: rgba(50, 137, 59, 0.05);
    border: 1px solid rgba(50, 137, 59, 0.15);
    text-decoration: none;
    color: inherit;
    font-size: .78rem;
    margin-top: auto;
    transition: all .2s ease;
}

.oh-hint-row-compact:hover {
    background: rgba(50, 137, 59, 0.1);
    border-color: rgba(50, 137, 59, 0.3);
    transform: translateY(-1px);
}

.oh-hint-row > i:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: #fff;
    color: var(--oli-theme);
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(50, 137, 59, 0.12);
}

.oh-hint-row div {
    flex: 1;
}

.oh-hint-row p {
    margin: 0 0 .15rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-hint-row span {
    font-size: .76rem;
    color: var(--oli-text);
    display: block;
}

.oh-hint-row > i:last-child {
    color: var(--oli-theme);
    font-size: .8rem;
    transition: transform .2s ease;
}

.oh-hint-row:hover > i:last-child {
    transform: translateX(3px);
}

/* Milestone Stepper (My Home) - Horizontal & Vertical Support */
.oh-milestones-horizontal-wrap {
    width: 100%;
    overflow-x: auto;
    padding: .5rem 0 .25rem;
    -webkit-overflow-scrolling: touch;
}

.oli-milestones-h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 640px;
    width: 100%;
    position: relative;
}

.oli-milestone-h {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 .35rem;
}

.oli-milestone-h-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: .6rem;
}

/* Connecting horizontal line between steps */
.oli-milestone-h-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50%;
    width: 100%;
    height: 2.5px;
    background: #e2e8f0;
    z-index: 1;
    transform: translateY(-50%);
}

.oli-milestone-h:first-child .oli-milestone-h-track::before {
    display: none;
}

.oli-milestone-h.is-complete .oli-milestone-h-track::before {
    background: #32893b;
}

.oli-milestone-h.is-current .oli-milestone-h-track::before {
    background: linear-gradient(90deg, #32893b 0%, #cbd5e1 100%);
}

.oli-milestone-h-dot {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    transition: all .25s ease;
    flex-shrink: 0;
}

.oli-milestone-h.is-complete .oli-milestone-h-dot {
    background: linear-gradient(135deg, #1b5a2b 0%, #32893b 100%);
    border-color: #32893b;
    color: #fff;
    box-shadow: 0 3px 10px rgba(50, 137, 59, 0.25);
}

.oli-milestone-h.is-current .oli-milestone-h-dot {
    background: #0d3a1c;
    border-color: #d4a94a;
    color: #d4a94a;
    box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.2), 0 3px 10px rgba(13, 58, 28, 0.25);
}

.oli-milestone-h-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.oli-milestone-h-status {
    display: inline-block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-bottom: .2rem;
    color: #94a3b8;
}

.oli-milestone-h.is-complete .oli-milestone-h-status {
    color: var(--oh-status-green);
}

.oli-milestone-h.is-current .oli-milestone-h-status {
    padding: .12rem .5rem;
    background: rgba(212, 169, 74, 0.15);
    border: 1px solid rgba(212, 169, 74, 0.35);
    border-radius: .75rem;
    color: #b8892f;
}

.oli-milestone-h-body h6 {
    margin: 0 0 .15rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.25;
    white-space: normal;
}

.oli-milestone-h-body p {
    margin: 0;
    font-size: .75rem;
    color: var(--oli-text);
    line-height: 1.35;
}

.oli-milestone-h-progress {
    width: 80%;
    height: 5px;
    background: #edf2f7;
    border-radius: 3px;
    margin-top: .35rem;
    overflow: hidden;
}

.oli-milestone-h-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #32893b 0%, #d4a94a 100%);
    border-radius: 3px;
}

/* Vertical Milestone Stepper (Legacy / Narrow) */
.oli-milestones {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    position: relative;
}

.oli-milestones::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 22px;
    left: 17px;
    width: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.oli-milestone {
    display: flex;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
    margin-bottom: 1.75rem;
}

.oli-milestone:last-child {
    margin-bottom: 0;
}

.oli-milestone-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    color: #94a3b8;
    z-index: 2;
    flex-shrink: 0;
    transition: all .25s ease;
}

.oli-milestone.is-complete .oli-milestone-dot {
    background: linear-gradient(135deg, #1b5a2b 0%, #32893b 100%);
    border-color: #32893b;
    color: #fff;
    box-shadow: 0 4px 12px rgba(50, 137, 59, 0.25);
}

.oli-milestone.is-current .oli-milestone-dot {
    background: #0d3a1c;
    border-color: #d4a94a;
    color: #d4a94a;
    box-shadow: 0 0 0 4px rgba(212, 169, 74, 0.2), 0 4px 14px rgba(13, 58, 28, 0.3);
}

.oli-milestone-body {
    flex: 1;
}

.oli-milestone-body h6 {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oli-milestone-body p {
    margin: 0;
    font-size: .84rem;
    color: var(--oli-text);
    line-height: 1.5;
}

.oli-milestone-status {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: .3rem;
    color: #94a3b8;
}

.oli-milestone.is-complete .oli-milestone-status {
    color: var(--oh-status-green);
}

.oli-milestone.is-current .oli-milestone-status {
    padding: .2rem .65rem;
    background: rgba(212, 169, 74, 0.15);
    border: 1px solid rgba(212, 169, 74, 0.35);
    border-radius: 1rem;
    color: #b8892f;
}

.oli-milestone-progress {
    height: 8px;
    background: #edf2f7;
    border-radius: 4px;
    margin-top: .6rem;
    overflow: hidden;
}

.oli-milestone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #32893b 0%, #d4a94a 100%);
    border-radius: 4px;
}

/* Document Table */
.oh-doc-table {
    width: 100%;
    border-collapse: collapse;
}
.oh-doc-table th {
    text-align: left;
    padding: 1rem .75rem;
    font-size: .75rem;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid var(--oli-surface-border);
    background: #f8fafc;
}
.oh-doc-table td {
    padding: 1rem .75rem;
    border-bottom: 1px solid var(--oli-surface-border);
    font-size: .85rem;
    color: var(--oh-text-dark);
    vertical-align: middle;
}
.oh-doc-table tr:last-child td {
    border-bottom: none;
}
.oh-doc-icon {
    margin-right: .5rem;
    color: var(--oli-theme);
}
.oh-badge {
    padding: .35rem .75rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.oh-badge-green { background: var(--oh-status-green-bg); color: var(--oh-status-green); }
.oh-badge-amber { background: var(--oh-status-amber-bg); color: var(--oh-status-amber); }
.oh-badge-blue { background: var(--oh-status-blue-bg); color: var(--oh-status-blue); }
.oh-badge-gray { background: var(--oh-status-neutral-bg); color: var(--oh-status-neutral); }

/* Documents Summary right panel */
.oh-doc-summary {
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.25rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.oh-donut-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 1rem auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--oh-status-green) 0% 40%,
        var(--oh-status-amber) 40% 50%,
        var(--oh-status-blue) 50% 75%,
        #e2e8f0 75% 100%
    );
}
.oh-donut-inner {
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.oh-donut-inner strong {
    font-size: 1.5rem;
    line-height: 1;
}
.oh-donut-inner span {
    font-size: .65rem;
    color: var(--oli-text);
}
.oh-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8rem;
}
.oh-legend li {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
    align-items: center;
}
.oh-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: .5rem;
}

/* ==================================================================
   Amenity Reservation — Cards, Catalogs, Bookings & Status Pills
================================================================== */
.oh-booking-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .oh-booking-cols {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.oh-booking-cols > div {
    min-width: 0;
}

.oh-booking-card {
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    margin-bottom: 1.25rem;
}

.oh-booking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 58, 28, 0.06);
    border-color: rgba(50, 137, 59, 0.25);
}

.oh-booking-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .85rem;
}

.oh-booking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--oh-pastel-mint);
    color: var(--oh-pastel-mint-fg);
    font-size: 1.05rem;
}

.oh-booking-card h4 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-booking-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-size: .84rem;
    color: var(--oli-text);
}

.oh-booking-meta i {
    color: var(--oli-theme);
    font-size: .85rem;
}

.oh-booking-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(18, 38, 26, 0.06);
}

/* Status Pills */
.oli-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #f1f5f9;
    color: #64748b;
}

.oli-status-pill.is-approved,
.oli-status-pill.is-paid,
.oli-status-pill.is-available {
    background: var(--oh-status-green-bg);
    color: var(--oh-status-green);
    border: 1px solid rgba(47, 158, 68, 0.2);
}

.oli-status-pill.is-pending,
.oli-status-pill.is-partial {
    background: var(--oh-status-amber-bg);
    color: var(--oh-status-amber);
    border: 1px solid rgba(183, 121, 31, 0.2);
}

.oli-status-pill.is-rejected,
.oli-status-pill.is-cancelled,
.oli-status-pill.is-maintenance {
    background: var(--oh-status-red-bg);
    color: var(--oh-status-red);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

/* Amenities Catalog Grid */
.oli-amenity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .oli-amenity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .oli-amenity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oli-amenity-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.35rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.oli-amenity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(13, 58, 28, 0.08);
    border-color: rgba(50, 137, 59, 0.25);
}

.oli-amenity-photo {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #f1f5f9;
}

.oli-amenity-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.oli-amenity-card:hover .oli-amenity-photo img {
    transform: scale(1.05);
}

.oli-amenity-photo .oli-status-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.oli-amenity-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem .5rem;
}

.oli-amenity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .85rem;
    background: rgba(50, 137, 59, 0.08);
    color: var(--oli-theme);
    font-size: 1.15rem;
}

.oli-amenity-card h6 {
    margin: .5rem 1.5rem .25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oli-amenity-desc {
    margin: 0 1.5rem 1rem;
    font-size: .84rem;
    color: var(--oli-text);
    line-height: 1.55;
    flex-grow: 1;
}

.oli-amenity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 1.5rem 1.25rem;
}

.oli-amenity-footer {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(18, 38, 26, 0.06);
    background: #fafcfa;
}

.oli-amenity-footer summary {
    list-style: none;
    cursor: pointer;
    text-align: center;
}

.oli-amenity-footer summary::-webkit-details-marker {
    display: none;
}

/* Button variants */
.oli-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: .75rem;
    border: 1px solid rgba(50, 137, 59, 0.35);
    background: #fff;
    color: var(--oli-theme);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.oli-btn-outline:hover {
    background: var(--oli-theme);
    color: #fff;
    border-color: var(--oli-theme);
    box-shadow: 0 4px 14px rgba(50, 137, 59, 0.2);
}

.oli-btn-block {
    width: 100%;
}

.oli-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: .75rem;
    border: 0;
    background: var(--oli-theme);
    color: #fff !important;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.oli-btn:hover {
    background: var(--oli-theme-hover);
    box-shadow: 0 4px 16px rgba(50, 137, 59, 0.25);
    transform: translateY(-1px);
}

/* Form inputs */
.oli-form-control {
    width: 100%;
    padding: .6rem .85rem;
    font-size: .85rem;
    border-radius: .65rem;
    border: 1px solid rgba(18, 38, 26, 0.15);
    background: #fff;
    color: var(--oh-text-dark);
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.oli-form-control:focus {
    outline: none;
    border-color: var(--oli-theme);
    box-shadow: 0 0 0 3px rgba(50, 137, 59, 0.15);
}

.oli-form-row {
    display: grid;
    gap: .75rem;
    margin-bottom: .75rem;
}

.oli-form-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.oli-form-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.oli-form-group label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--oli-text);
}

.oli-form-submit-row {
    margin-top: 1rem;
}

.oli-form-submit-row .oli-btn {
    width: 100%;
}

/* Table */
.oli-table-wrap {
    overflow-x: auto;
    border-radius: 1rem;
    border: 1px solid rgba(18, 38, 26, 0.08);
}

.oli-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .86rem;
}

.oli-table th {
    padding: .9rem 1.15rem;
    background: #f8fafc;
    color: var(--oli-text);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(18, 38, 26, 0.08);
    text-align: left;
}

.oli-table td {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(18, 38, 26, 0.05);
    color: var(--oh-text-dark);
    vertical-align: middle;
}

.oli-table tr:last-child td {
    border-bottom: none;
}

.oli-table tr:hover td {
    background: rgba(50, 137, 59, 0.02);
}

/* Amenity Grid */
.oh-amenity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* ==================================================================
   Bills & Payment Layout & Statement Hero
================================================================== */
.oh-bills-card {
    background: #fff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 2.25rem;
    box-shadow: 0 10px 30px rgba(13, 58, 28, 0.05);
}

@media (min-width: 900px) {
    .oh-bills-card {
        flex-direction: row;
    }
}

.oh-bills-left {
    padding: 2.25rem 2rem;
    background-color: #0d3a1c;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(212, 169, 74, 0.22), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(132, 187, 78, 0.20), transparent 45%),
        linear-gradient(150deg, #0d3a1c 0%, #1b5a2b 60%, #0f4020 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

@media (min-width: 900px) {
    .oh-bills-left {
        width: 38%;
        flex-shrink: 0;
    }
}

.oh-bills-left p {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}

.oh-bills-left h3 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.2vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.02em;
}

.oh-bills-due-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .95rem;
    border-radius: 2rem;
    background: rgba(212, 169, 74, 0.22);
    border: 1px solid rgba(212, 169, 74, 0.45);
    color: #f5d78e;
    font-size: .78rem;
    font-weight: 600;
    align-self: flex-start;
}

.oh-bills-right {
    padding: 2.25rem 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
}

.oh-bills-right h6 {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-bills-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(18, 38, 26, 0.06);
    font-size: .88rem;
    color: var(--oh-text-dark);
}

.oh-bills-breakdown-row:last-child {
    border-bottom: none;
    font-weight: 600;
    margin-top: .5rem;
}

.oh-bills-breakdown-total {
    border-top: 1px solid rgba(18, 38, 26, 0.12);
    border-bottom: none;
    margin-top: .75rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.oh-bills-breakdown-total span:last-child {
    color: var(--oli-theme);
}

/* Upload proof drawer */
.oh-upload-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 2.25rem;
}

.oh-upload-summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--oli-theme);
    display: flex;
    align-items: center;
    gap: .6rem;
    list-style: none;
    font-size: 1.05rem;
}

.oh-upload-summary::-webkit-details-marker {
    display: none;
}

.oh-upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(18, 38, 26, 0.08);
}

@media (min-width: 768px) {
    .oh-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .oh-upload-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oh-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: rgba(18, 38, 26, 0.05);
    color: var(--oh-text-dark);
    text-decoration: none;
    transition: all .2s ease;
    margin-right: .4rem;
}

.oh-action-icon-btn:hover {
    background: var(--oli-theme);
    color: #fff;
    transform: translateY(-1px);
}

/* ==================================================================
   Profile Settings — Hero Banner, Info Cards & Preference Toggles
================================================================== */
.oh-profile-hero {
    background-color: #0d3a1c;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(212, 169, 74, 0.22), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(132, 187, 78, 0.20), transparent 45%),
        linear-gradient(150deg, #0d3a1c 0%, #1b5a2b 60%, #0f4020 100%);
    border-radius: 1.5rem;
    padding: 2.25rem;
    color: #fff;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(13, 58, 28, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .oh-profile-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.oh-profile-user {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.oh-profile-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(212, 169, 74, 0.6);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
    background: #123d1f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oh-profile-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.oh-profile-avatar-wrap i {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.oh-profile-name {
    margin: 0 0 .3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.01em;
}

.oh-profile-account {
    margin: 0 0 .65rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.75);
}

.oh-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.oh-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.oh-profile-chip.gold {
    background: rgba(212, 169, 74, 0.22);
    border-color: rgba(212, 169, 74, 0.45);
    color: #f5d78e;
}

.oh-avatar-form {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    padding: .6rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.oh-avatar-form input[type="file"] {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 180px;
}

.oh-avatar-form input[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: .3rem .65rem;
    border-radius: .5rem;
    font-size: .75rem;
    cursor: pointer;
    margin-right: .5rem;
}

.oh-profile-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 900px) {
    .oh-profile-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.oh-profile-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.35rem;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}

.oh-profile-card-title {
    margin: 0 0 1.25rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.oh-profile-card-title i {
    color: var(--oli-theme);
}

/* Custom Checkbox Toggle */
.oh-toggle-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fafcfa;
    border: 1px solid rgba(18, 38, 26, 0.06);
    border-radius: 1rem;
    margin-bottom: .85rem;
    cursor: pointer;
    transition: all .2s ease;
}

.oh-toggle-label:hover {
    background: #f1f8f3;
    border-color: rgba(50, 137, 59, 0.2);
}

.oh-toggle-label input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--oli-theme);
    cursor: pointer;
}

.oh-toggle-label div {
    flex: 1;
}

.oh-toggle-label h6 {
    margin: 0 0 .15rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-toggle-label span {
    font-size: .8rem;
    color: var(--oli-text);
    display: block;
}

/* ==================================================================
   Support & Concierge Page Styles
================================================================== */
.oh-support-hero {
    background-color: #0d3a1c;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(212, 169, 74, 0.25), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(132, 187, 78, 0.20), transparent 45%),
        linear-gradient(150deg, #0d3a1c 0%, #1b5a2b 60%, #0f4020 100%);
    border-radius: 1.5rem;
    padding: 2.5rem 2.25rem;
    color: #fff;
    margin-bottom: 2.25rem;
    box-shadow: 0 10px 30px rgba(13, 58, 28, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .oh-support-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.oh-support-hero-left {
    max-width: 600px;
}

.oh-support-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 2rem;
    background: rgba(212, 169, 74, 0.22);
    border: 1px solid rgba(212, 169, 74, 0.45);
    color: #f5d78e;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .85rem;
}

.oh-support-hero-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.02em;
}

.oh-support-hero-sub {
    margin: 0;
    font-size: .92rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.oh-channel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .oh-channel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oh-channel-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.35rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.oh-channel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(13, 58, 28, 0.08);
    border-color: rgba(50, 137, 59, 0.25);
}

.oh-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(50, 137, 59, 0.08);
    color: var(--oli-theme);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.oh-channel-card h4 {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-channel-card p {
    margin: 0 0 1.25rem;
    font-size: .85rem;
    color: var(--oli-text);
    line-height: 1.55;
    flex-grow: 1;
}

.oh-channel-chip {
    font-size: .82rem;
    font-weight: 600;
    color: var(--oli-theme);
    background: #fafcfa;
    padding: .4rem .75rem;
    border-radius: .5rem;
    border: 1px solid rgba(50, 137, 59, 0.15);
    margin-bottom: 1rem;
    display: inline-block;
}

.oh-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .oh-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oh-process-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.35rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.oh-process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1b5a2b, #d4a94a);
}

.oh-process-num {
    font-size: 2.25rem;
    font-weight: 800;
    color: rgba(50, 137, 59, 0.12);
    line-height: 1;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
}

.oh-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    background: var(--oh-status-green-bg);
    color: var(--oh-status-green);
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

.oh-process-card h4 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-process-card p {
    margin: 0;
    font-size: .85rem;
    color: var(--oli-text);
    line-height: 1.55;
}

.oh-faq-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.oh-faq-card summary {
    font-weight: 600;
    font-size: .95rem;
    color: var(--oh-text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.oh-faq-card summary::-webkit-details-marker {
    display: none;
}

.oh-faq-card summary i {
    color: var(--oli-theme);
    font-size: .85rem;
    transition: transform .2s ease;
}

.oh-faq-card[open] summary i {
    transform: rotate(180deg);
}

.oh-faq-card p {
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(18, 38, 26, 0.06);
    font-size: .85rem;
    color: var(--oli-text);
    line-height: 1.6;
}

/* ==================================================================
   Legal & Policies (Terms & Conditions, Privacy Policy)
================================================================== */
.oh-legal-meta-bar {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.25rem;
    padding: 1.25rem 1.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

@media (min-width: 640px) {
    .oh-legal-meta-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

.oh-legal-meta-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.oh-legal-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: rgba(50, 137, 59, 0.08);
    color: var(--oli-theme);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.oh-legal-meta-item h6 {
    margin: 0 0 .15rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--oli-text);
    font-weight: 600;
}

.oh-legal-meta-item p {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-legal-card {
    background: #ffffff;
    border: 1px solid rgba(18, 38, 26, 0.08);
    border-radius: 1.5rem;
    padding: 2.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 2.25rem;
}

.oh-legal-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(18, 38, 26, 0.06);
}

.oh-legal-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.oh-legal-section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.oh-legal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    background: rgba(50, 137, 59, 0.1);
    color: var(--oli-theme);
    font-size: .85rem;
    font-weight: 700;
}

.oh-legal-section h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-legal-section p {
    margin: 0 0 1rem;
    font-size: .92rem;
    color: var(--oli-text);
    line-height: 1.7;
}

.oh-legal-section p:last-child {
    margin-bottom: 0;
}

.oh-legal-list {
    margin: .75rem 0 1rem 1.25rem;
    padding: 0;
    list-style: none;
}

.oh-legal-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
    font-size: .9rem;
    color: var(--oli-text);
    line-height: 1.6;
}

.oh-legal-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--oli-theme);
    font-size: 1.25rem;
    line-height: 1.2;
}

.oh-legal-highlight {
    background: #fafcfa;
    border-left: 4px solid var(--oli-theme);
    border-radius: 0 .85rem .85rem 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-size: .88rem;
    color: var(--oh-text-dark);
}

.oh-legal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(18, 38, 26, 0.08);
}

.oh-legal-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}

/* --- Welcome Message Modal --- */
.oh-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 30, 16, 0.65);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.oh-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.oh-welcome-modal {
    background: #ffffff;
    border-radius: 1.25rem;
    max-width: 780px;
    width: 100%;
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.96);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Generic fallback to ensure unstyled modals never display inline in document flow */
.modal {
    display: none;
}

.oh-doc-viewer-modal {
    background: #ffffff;
    border-radius: 1.25rem;
    max-width: 920px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.96);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.oh-modal-backdrop.is-open .oh-doc-viewer-modal {
    transform: scale(1);
}

.oh-modal-backdrop.is-open .oh-welcome-modal {
    transform: scale(1);
}

.oh-modal-header {
    flex-shrink: 0;
    background: linear-gradient(135deg, #1b5a2b 0%, #2f9e44 100%);
    color: #ffffff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .95rem;
    font-weight: 600;
}

.oh-modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s ease, transform .2s ease;
}

.oh-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.08);
}

.oh-modal-body {
    padding: 1.75rem 2rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    background: #f4f8f5;
}

.oh-modal-body::-webkit-scrollbar {
    width: 7px;
}

.oh-modal-body::-webkit-scrollbar-track {
    background: #e6eee8;
    border-radius: 4px;
}

.oh-modal-body::-webkit-scrollbar-thumb {
    background: #a9bfae;
    border-radius: 4px;
}

.oh-modal-body::-webkit-scrollbar-thumb:hover {
    background: #87a48d;
}

.oh-letter-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2.25rem 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf2f7;
}

.oh-letter-title {
    color: #1b5a2b;
    font-family: 'Poppins', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.75rem;
}

.oh-letter-salutation {
    font-size: .95rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.25rem;
}

.oh-letter-prose p {
    font-size: .9rem;
    line-height: 1.75;
    color: #4a5568;
    margin: 0 0 1.25rem;
}

.oh-letter-highlight-callout {
    text-align: center;
    font-weight: 700;
    color: #1b5a2b;
    font-size: .98rem;
    margin: 1.75rem 0;
}

.oh-letter-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.oh-letter-signature {
    font-size: .88rem;
    color: #4a5568;
    line-height: 1.45;
}

.oh-letter-signature strong {
    font-size: .95rem;
    color: #1a202c;
}

.oh-letter-logo {
    max-height: 55px;
    width: auto;
    object-fit: contain;
}

.oh-modal-footer-bar {
    flex-shrink: 0;
    padding: 1rem 1.75rem;
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    display: flex;
    justify-content: flex-end;
}

.oh-modal-thank-btn {
    background: #1b5a2b;
    color: #ffffff;
    border: none;
    padding: .6rem 1.5rem;
    border-radius: 2rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(27, 90, 43, 0.25);
    transition: background .2s ease, transform .2s ease;
}

.oh-modal-thank-btn:hover {
    background: #144821;
    transform: translateY(-1px);
}

/* --- Unit Turnover Celebration Modal --- */
.oh-celebration-modal {
    background: #ffffff;
    border-radius: 1.5rem;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: scale(.92) translateY(16px);
    transition: transform .3s ease;
}

.oh-modal-backdrop.is-open .oh-celebration-modal {
    transform: scale(1) translateY(0);
}

.oh-celebration-body {
    padding: 2.75rem 2.25rem 2.25rem;
    text-align: center;
    background: linear-gradient(180deg, #f4f8f5 0%, #ffffff 55%);
}

.oh-celebration-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a94a 0%, #b9860f 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 26px rgba(212, 169, 74, 0.45);
}

.oh-celebration-body h2 {
    margin: 0 0 .5rem;
    color: #1b5a2b;
    font-size: 1.6rem;
    font-weight: 800;
}

.oh-celebration-lead {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--oli-text);
}

.oh-celebration-sub {
    margin: 0 0 1.75rem;
    font-size: .88rem;
    color: var(--oli-text);
    line-height: 1.6;
}

/* --- Homeowner Welcome Survey Modal --- */
.oh-survey-modal {
    background: #ffffff;
    border-radius: 1.25rem;
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: scale(0.94) translateY(12px);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.oh-modal-backdrop.is-open .oh-survey-modal {
    transform: scale(1) translateY(0);
}

.oh-survey-header {
    background: linear-gradient(135deg, #0d3a1c 0%, #1b5a2b 60%, #154e24 100%);
    color: #ffffff;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(212, 169, 74, 0.2);
}

.oh-survey-header-info h5 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oh-survey-header-info p {
    margin: .25rem 0 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.82);
}

.oh-survey-body {
    padding: 1.75rem 2rem;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.oh-survey-q-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color .2s ease;
}

.oh-survey-q-card:focus-within {
    border-color: var(--oli-theme);
}

.oh-survey-q-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    margin: 0 0 .85rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.oh-survey-q-title .q-num {
    background: rgba(27, 90, 43, 0.1);
    color: var(--oli-theme);
    padding: .15rem .55rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.oh-survey-q-title .q-req {
    color: #ef4444;
    margin-left: 2px;
}

/* Stacked layout: question on top, its answer control straight underneath. */
.oh-survey-q-card-2col {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.oh-survey-q-title-col {
    margin: 0;
}

.oh-survey-q-answer-col {
    min-width: 0;
}

.oh-survey-section-header {
    background: #eaf4ed;
    border-left: 4px solid var(--oli-theme);
    padding: .75rem 1.15rem;
    border-radius: 0 .75rem .75rem 0;
    font-size: .9rem;
    font-weight: 700;
    color: #144821;
    letter-spacing: .02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 .25rem;
}

.oh-survey-client-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e2e8f0;
}

.oh-survey-client-field label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

.oh-survey-client-field input {
    width: 100%;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: .85rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    box-sizing: border-box;
}

/* Rating 1 to 10 Scale */
.oh-survey-rating-10-container {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    /* Shrink to the button row's own width (not the full card) so the Lowest/Highest labels
       below - stretched to match via the default align-items:stretch - land under the first
       and last button instead of the card's edges. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.oh-survey-rating-10-group {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.oh-survey-rating-10-btn {
    width: 38px;
    height: 38px;
    border-radius: .55rem;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    color: #334155;
    font-size: .88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.oh-survey-rating-10-btn:hover {
    background: #e2e8f0;
    color: var(--oli-theme);
    border-color: rgba(27, 90, 43, 0.35);
}

.oh-survey-rating-10-btn.active {
    background: var(--oli-theme);
    color: #ffffff;
    border-color: var(--oli-theme);
    box-shadow: 0 3px 10px rgba(27, 90, 43, 0.3);
    transform: scale(1.08);
}

.oh-survey-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #64748b;
    font-weight: 600;
    margin-top: .15rem;
}

/* Yes / No Choices */
.oh-survey-yesno-group {
    display: flex;
    gap: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.oh-survey-pill-btn {
    flex: 1;
    max-width: 140px;
    padding: .65rem 1.25rem;
    border-radius: 2rem;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    color: #475569;
    font-size: .88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    cursor: pointer;
    transition: all .2s ease;
}

.oh-survey-pill-btn:hover {
    background: #e2e8f0;
    color: var(--oli-theme);
}

.oh-survey-pill-btn.active {
    background: var(--oli-theme);
    color: #ffffff;
    border-color: var(--oli-theme);
    box-shadow: 0 4px 12px rgba(27, 90, 43, 0.25);
}

/* Multiple Choice Options */
.oh-survey-options-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.oh-survey-option-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 500;
    color: var(--oh-text-dark);
    transition: all .2s ease;
}

.oh-survey-option-item:hover {
    background: #f1f5f9;
    border-color: rgba(27, 90, 43, 0.35);
}

.oh-survey-option-item.active {
    background: rgba(27, 90, 43, 0.06);
    border-color: var(--oli-theme);
    color: var(--oli-theme);
    font-weight: 600;
}

.oh-survey-radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s ease;
}

.oh-survey-option-item.active .oh-survey-radio-circle {
    border-color: var(--oli-theme);
    background: var(--oli-theme);
}

.oh-survey-option-item.active .oh-survey-radio-circle::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

/* Form Inputs */
.oh-survey-input,
.oh-survey-textarea {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    font-size: .88rem;
    color: var(--oh-text-dark);
    font-family: inherit;
    box-sizing: border-box;
    transition: all .2s ease;
}

.oh-survey-input:focus,
.oh-survey-textarea:focus {
    outline: none;
    border-color: var(--oli-theme);
    box-shadow: 0 0 0 3px rgba(27, 90, 43, 0.12);
}

/* Survey Success State */
.oh-survey-success-state {
    text-align: center;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.oh-survey-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    animation: popSuccess .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@@keyframes popSuccess {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.oh-survey-success-state h4 {
    margin: 0 0 .5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #165626;
}

.oh-survey-success-state p {
    margin: 0 0 1.75rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--oli-text);
    max-width: 420px;
}

/* --- Support page: New Ticket / Track a Ticket modals (Areas/Common/Views/Home/Support.cshtml).
   Reuses the shared .oh-modal-* chrome and .oli-form-* field styles already established for the
   rest of this app, rather than porting the login page's own auth.css-scoped design system. --- */
.oh-ticket-modal {
    background: #ffffff;
    border-radius: 1.25rem;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.94) translateY(12px);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.oh-modal-backdrop.is-open .oh-ticket-modal {
    transform: scale(1) translateY(0);
}

.oh-ticket-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oh-ticket-form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .oh-ticket-form-split {
        grid-template-columns: 1fr;
    }
}

.oh-ticket-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.oh-ticket-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    font-size: .82rem;
    color: var(--oli-heading);
    background: #ffffff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.oh-ticket-pill input {
    accent-color: var(--oli-theme);
}

.oh-ticket-pill:has(input:checked) {
    color: var(--oli-theme);
    border-color: var(--oli-theme);
    background: rgba(50, 137, 59, 0.08);
    font-weight: 600;
}

.oh-ticket-error {
    display: none;
    font-size: .8rem;
    color: #d9534f;
}

.oh-ticket-error.is-visible {
    display: block;
}

.oh-ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.oh-ticket-attachments:empty {
    display: none;
}

.oh-ticket-file-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .35rem .45rem .35rem .8rem;
    font-size: .78rem;
    color: var(--oli-heading);
    background: #f4f8f5;
    border: 1px solid var(--oli-surface-border);
    border-radius: 999px;
}

.oh-ticket-file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

.oh-ticket-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    color: var(--oli-text);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: .75rem;
}

.oh-ticket-file-remove:hover {
    color: #d9534f;
    background: var(--oli-surface-border);
}

.oh-ticket-attach-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 500;
    color: var(--oli-heading);
    background: #ffffff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.oh-ticket-attach-btn:hover {
    background: #f4f8f5;
    border-color: var(--oli-theme);
}

.oh-ticket-dpa-text {
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.65;
    color: var(--oli-text);
}

.oh-ticket-dpa-text:last-child {
    margin-bottom: 0;
}

/* --- Track a Ticket: search row, status/conversation, reply --- */
.oh-ticket-search-row {
    display: flex;
    gap: .6rem;
}

.oh-ticket-search-row .oli-form-control {
    flex: 1;
}

.oh-ticket-result {
    display: none;
    flex-direction: column;
    gap: .85rem;
    margin-top: 1.25rem;
}

.oh-ticket-result.is-visible {
    display: flex;
}

.oh-ticket-result-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.oh-ticket-status-badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .7rem;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 999px;
}

.oh-ticket-subject {
    font-size: .92rem;
    font-weight: 600;
    color: var(--oli-heading);
}

.oh-ticket-desc {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--oli-text);
}

.oh-ticket-messages {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-height: 260px;
    overflow-y: auto;
    padding: .25rem;
}

.oh-ticket-msg {
    max-width: 88%;
    padding: .55rem .85rem;
    font-size: .84rem;
    line-height: 1.5;
    border-radius: .9rem;
}

.oh-ticket-msg-oli {
    align-self: flex-start;
    color: var(--oli-heading);
    background: #f4f8f5;
    border: 1px solid var(--oli-surface-border);
    border-bottom-left-radius: .3rem;
}

.oh-ticket-msg-client {
    align-self: flex-end;
    color: #fff;
    background: linear-gradient(120deg, var(--oli-theme) 0%, var(--oli-theme-hover) 100%);
    border-bottom-right-radius: .3rem;
}

.oh-ticket-reply {
    display: none;
    gap: .6rem;
}

.oh-ticket-reply.is-visible {
    display: flex;
}

.oh-ticket-reply .oli-form-control {
    flex: 1;
}

.oh-ticket-closed-note {
    display: none;
    margin: 0;
    font-size: .8rem;
    color: var(--oli-text);
    text-align: center;
}

.oh-ticket-closed-note.is-visible {
    display: block;
}

/* --- CTA row on the Support page itself --- */
.oh-ticket-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* ==================================================================
   Community Announcements page (OLIHome)
   ================================================================== */
.oh-announce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.oh-announce-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--oli-surface-border);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(21, 59, 44, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.oh-announce-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -16px rgba(21, 59, 44, .24);
}

.oh-announce-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--oh-cream);
}

.oh-announce-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oh-announce-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 70% 60% at 20% 20%, var(--oh-pastel-mint), transparent 65%),
        radial-gradient(ellipse 70% 60% at 90% 90%, var(--oh-pastel-peach), transparent 65%),
        var(--oh-cream);
}

.oh-announce-media-placeholder i {
    font-size: 2.25rem;
    color: var(--oh-pastel-mint-fg);
    opacity: .7;
}

.oh-announce-new-badge {
    position: absolute;
    top: .85rem;
    right: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25);
}

.oh-announce-body {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.5rem 1.5rem;
    flex: 1;
}

.oh-announce-project-badge {
    align-self: flex-start;
    margin-bottom: .75rem;
    font-weight: 500;
}

.oh-announce-title {
    margin: 0 0 .5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oh-text-dark);
    line-height: 1.35;
}

.oh-announce-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--oli-text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Body is rich-text HTML from OLIOne's editor. */
.oh-announce-text p { margin: 0 0 .5rem; }
.oh-announce-text p:last-child { margin-bottom: 0; }
.oh-announce-text ul,
.oh-announce-text ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.oh-announce-text img { max-width: 100%; height: auto; }

.oh-announce-card.is-expanded .oh-announce-text {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.oh-announce-readmore {
    align-self: flex-start;
    margin-top: .6rem;
    padding: 0;
    border: none;
    background: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--oli-theme);
    cursor: pointer;
}

.oh-announce-readmore i {
    margin-left: .25rem;
    font-size: .7rem;
}

.oh-announce-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--oli-surface-border);
    font-size: .78rem;
    color: var(--oli-text);
}

.oh-announce-meta i {
    margin-right: .35rem;
    color: var(--oli-theme);
}

.oh-announce-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    margin-top: 2rem;
    padding: 3.5rem 2rem;
    background: #fff;
    border: 1px dashed var(--oli-surface-border);
    border-radius: 1.25rem;
    color: var(--oli-text);
}

.oh-announce-empty i {
    font-size: 2.25rem;
    color: var(--oh-pastel-mint-fg);
    margin-bottom: .5rem;
}

.oh-announce-empty p {
    margin: 0;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-announce-empty span {
    font-size: .85rem;
}

/* ============================================================
   Shared toast notifications (js/shared/toast.js's showAppToast)
   ------------------------------------------------------------
   Bootstrap's JS Toast component is loaded (for .show/.showing class
   toggling, autohide, data-bs-dismiss) but its CSS is not - Bootstrap's
   global reset/utilities would collide with this app's Tailwind/Minfo
   theme. These rules reproduce just what bootstrap.Toast needs
   visually, styled with this app's own tokens instead of Bootstrap's
   default look.
   ============================================================ */
.oh-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 340px;
    max-width: calc(100% - 2rem);
    pointer-events: none;
}

.oh-toast-container .toast {
    pointer-events: auto;
    width: 100%;
    font-size: .875rem;
    color: var(--oh-text-dark);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(18, 38, 26, .1);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(18, 38, 26, .15);
    overflow: hidden;
}

.oh-toast-container .toast.fade {
    transition: opacity .15s linear;
}

.oh-toast-container .toast.fade:not(.show) {
    opacity: 0;
}

.oh-toast-container .toast:not(.show) {
    display: none;
}

.oh-toast-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    background-color: var(--oh-cream);
    border-bottom: 1px solid rgba(18, 38, 26, .08);
}

.oh-toast-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--oh-text-dark);
}

.oh-toast-header .oh-toast-icon-success { color: var(--oh-status-green); }
.oh-toast-header .oh-toast-icon-danger { color: var(--oh-status-red); }
.oh-toast-header .oh-toast-icon-info { color: var(--oh-status-blue); }

.oh-toast-container .toast-body {
    padding: .75rem;
    word-wrap: break-word;
    color: var(--oh-text-dark);
}

.oh-toast-container .btn-close {
    box-sizing: content-box;
    width: .75em;
    height: .75em;
    padding: .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/.75em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;
    cursor: pointer;
}

.oh-toast-container .btn-close:hover {
    opacity: .85;
}

@media (max-width: 480px) {
    .oh-toast-container {
        top: .5rem;
        right: .5rem;
        left: .5rem;
        width: auto;
    }
}