/* ===== House management ("Quản lý nhà") ===== */
.house-mng {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4, 1rem);
}

.house-mng__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.house-mng__back {
    color: var(--foreground, #111827);
    font-size: 1.125rem;
    padding: var(--space-2, 0.5rem);
    margin-left: calc(-1 * var(--space-2, 0.5rem));
}

.house-mng__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.house-mng__search {
    position: relative;
    margin-bottom: var(--space-3, 0.75rem);
}

.house-mng__search-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    color: var(--muted-foreground, #6b7280);
    pointer-events: none;
}

.house-mng__search .form-control {
    padding-left: 2.5rem;
    border-radius: 999px;
}

.house-mng__state {
    padding: 2rem 0;
    text-align: center;
    color: var(--muted-foreground, #6b7280);
}

.house-mng__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

/* House list page on desktop: wider container, two cards per row */
@media (min-width: 992px) {
    .house-mng--houses {
        max-width: 1200px;
    }

    .house-mng--houses .house-mng__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 992px) {
    .house-mng--wide {
        max-width: 1200px;
    }
}

/*
 * Checkout ("Trả phòng"), its confirmation ("Duyệt trả phòng") and "Duyệt cọc chỗ" on desktop: room and customer cards side by side,
 * then full-width cards. `--split` cards show two fields per row (electricity left, water right, ...); `is-wide` rows
 * (payment method, notes, sender) take the full width. "Trả phòng" puts its electricity and water columns side by
 * side in "Chi tiết phòng" (.house-mng-meters). Phones and tablets keep one column and one field per row.
 */
@media (min-width: 992px) {
    .house-mng--wide #confirm-fields,
    .house-mng--wide #checkout-fields,
    .house-mng--wide #approval-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: stretch;
    }

    .house-mng--wide #confirm-fields > section,
    .house-mng--wide #checkout-fields > section,
    .house-mng--wide #approval-fields > section {
        grid-column: 1 / -1;
        margin: 0;
    }

    .house-mng--wide #confirm-fields > .house-mng-detail__section--half,
    .house-mng--wide #checkout-fields > .house-mng-detail__section--half,
    .house-mng--wide #approval-fields > .house-mng-detail__section--half {
        display: flex;
        flex-direction: column;
        grid-column: auto;
    }

    /* Both cards of the row end level */
    .house-mng-detail__section--half .house-mng-detail__card {
        flex: 1;
    }

    .house-mng-detail__section--split .house-mng-detail__card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    .house-mng-detail__section--split .house-mng-detail__row.is-wide {
        grid-column: 1 / -1;
    }

    /* The upload box under the summary spans both columns */
    .house-mng-detail__section--split .house-mng-detail__card > :not(.house-mng-detail__row) {
        grid-column: 1 / -1;
    }

    .house-mng-meters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    /* Every row of the grid gets the divider except the first pair */
    .house-mng-detail__section--split .house-mng-detail__row:nth-child(2) {
        border-top: 0;
    }
}

/*
 * Payment ("Thanh toán tiền phòng") on desktop, checkout-style like Amazon: the charge details and "Tổng thu" stack
 * on the left, the payment fields sit on the right. Phones keep the single column.
 */
@media (min-width: 992px) {
    .house-mng--wide #payment-form:not(.d-none) {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    /* The wrappers dissolve so the three sections become grid items */
    .house-mng--wide #payment-summary,
    .house-mng--wide #payment-fields {
        display: contents;
    }

    .house-mng--wide #payment-form > * > section {
        grid-column: 1;
        margin: 0;
    }

    .house-mng--wide #payment-fields > section {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .house-mng--wide #payment-form .house-mng-form__error {
        grid-column: 1 / -1;
    }
}

/* ===== Tabs ===== */
.house-mng-tabs {
    display: flex;
    border-bottom: 1px solid var(--border, #e5e7eb);
    margin-bottom: var(--space-4, 1rem);
}

.house-mng-tabs__tab {
    flex: 1;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
}

.house-mng-tabs__tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ===== Card ===== */
.house-mng-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.house-mng-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

.house-mng-card__heading {
    flex: 1;
    min-width: 0;
}

.house-mng-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.house-mng-card__address {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.house-mng-card__stats {
    display: flex;
    flex-shrink: 0;
    gap: 0.375rem;
}

.house-mng-card__stat {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 0.85rem;
    white-space: nowrap;
}

.house-mng-card__stat-value {
    color: var(--primary);
}

/* ===== Cells (2-column grid) ===== */
.house-mng-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
}

.house-mng-cell {
    --cell-bg: #f3f4f6;
    --cell-accent: #4b5563;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: var(--cell-bg);
    font-size: 0.9rem;
}

.house-mng-cell__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    color: #374151;
}

.house-mng-cell__icon {
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
    color: var(--cell-accent);
}

.house-mng-cell__value {
    flex-shrink: 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cell-accent);
}

.house-mng-cell--orange { --cell-bg: #fff4ec; --cell-accent: #f97316; }
.house-mng-cell--purple { --cell-bg: #f7f0fd; --cell-accent: #9333ea; }
.house-mng-cell--yellow { --cell-bg: #fffbeb; --cell-accent: #d97706; }
.house-mng-cell--red { --cell-bg: #fdeeee; --cell-accent: #dc2626; }
.house-mng-cell--cyan { --cell-bg: #ecfbff; --cell-accent: #0891b2; }
.house-mng-cell--blue { --cell-bg: #eff6ff; --cell-accent: #2563eb; }
.house-mng-cell--green { --cell-bg: #effaf1; --cell-accent: #16a34a; }
.house-mng-cell--indigo { --cell-bg: #eef2ff; --cell-accent: #2563eb; }

/* ===== Commission footer ===== */
.house-mng-card__commission {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0.75rem;
    padding: 0.75rem 0.25rem;
    border-top: 1px solid var(--border, #e5e7eb);
    color: inherit;
    text-decoration: none;
}

.house-mng-card__commission-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
}

.house-mng-card__commission-label .fas {
    color: var(--primary);
}

.house-mng-card__rates {
    display: flex;
}

.house-mng-card__rate {
    color: #4b5563;
    font-size: 0.9rem;
}

.house-mng-card__rate + .house-mng-card__rate {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border, #e5e7eb);
}

.house-mng-card__rate-value {
    font-size: 1.05rem;
    color: #dc2626;
}

/* Cells that link to the room page */
a.house-mng-cell {
    color: inherit;
    text-decoration: none;
    transition: filter var(--transition-base, 0.15s);
}

a.house-mng-cell:hover,
a.house-mng-cell:focus-visible {
    filter: brightness(0.96);
}

.house-mng-cell__value {
    margin-left: auto;
}

.house-mng-cell__chevron {
    flex-shrink: 0;
    margin-left: -0.25rem;
    font-size: 0.7rem;
    color: var(--cell-accent);
    opacity: 0.6;
}

/* ===== Room page: header, toolbar, view switcher ===== */
.house-mng__title--grow {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.house-mng__icon-btn {
    padding: var(--space-2, 0.5rem);
    background: none;
    border: 0;
    font-size: 1.125rem;
    color: var(--foreground, #111827);
}

.house-mng-rooms__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.house-mng-rooms__total {
    color: #4b5563;
}

.house-mng-views {
    display: flex;
    padding: 0.25rem;
    border-radius: 10px;
    background: #f1f2f4;
}

.house-mng-views__btn {
    padding: 0.375rem 0.875rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #6b7280;
}

.house-mng-views__btn.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ===== Status filters (chips row + sheet) ===== */
.house-mng-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-4, 1rem);
}

.house-mng-filters__toggle {
    position: relative;
    flex-shrink: 0;
    padding: 0.375rem 0.75rem 0.375rem 0.25rem;
    background: none;
    border: 0;
    border-right: 1px solid var(--border, #e5e7eb);
    font-size: 1.25rem;
    color: var(--primary);
}

.house-mng-filters__badge {
    position: absolute;
    top: -0.25rem;
    right: 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
}

.house-mng-filters__chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.house-mng-filters__chips::-webkit-scrollbar {
    display: none;
}

.house-mng-chip {
    --chip-accent: #4b5563;
    --chip-bg: #f3f4f6;
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 0.9rem;
    white-space: nowrap;
}

.house-mng-chip__count {
    color: var(--chip-accent);
}

.house-mng-chip.is-active {
    border-color: var(--chip-accent);
    background: var(--chip-bg);
    color: var(--chip-accent);
}

.house-mng-chip--orange { --chip-accent: #f97316; --chip-bg: #fff4ec; }
.house-mng-chip--purple { --chip-accent: #9333ea; --chip-bg: #f7f0fd; }
.house-mng-chip--yellow { --chip-accent: #d97706; --chip-bg: #fffbeb; }
.house-mng-chip--red { --chip-accent: #dc2626; --chip-bg: #fdeeee; }
.house-mng-chip--cyan { --chip-accent: #0891b2; --chip-bg: #ecfbff; }
.house-mng-chip--blue { --chip-accent: #2563eb; --chip-bg: #eff6ff; }
.house-mng-chip--green { --chip-accent: #16a34a; --chip-bg: #effaf1; }

.house-mng-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop, 1040);
}

.house-mng-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.house-mng-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal, 1050);
    max-width: 720px;
    max-height: 80vh;
    margin: 0 auto;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    background: #fff;
}

.house-mng-sheet__handle {
    display: block;
    width: 3rem;
    height: 0.25rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: #d1d5db;
}

.house-mng-sheet__title {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.house-mng-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== Room card (list view) ===== */
.house-mng-room {
    --room-color: var(--primary);
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.house-mng-room__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--room-color);
    color: #fff;
}

.house-mng-room__heading {
    flex: 1 1 10rem;
    min-width: 0;
}

.house-mng-room__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.house-mng-room__tenant {
    margin: 0.125rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

.house-mng-room__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.house-mng-room__pill {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 0.85rem;
    white-space: nowrap;
}

.house-mng-room__pill--status {
    font-weight: 600;
}

.house-mng-room__pill-value {
    color: color-mix(in srgb, var(--room-color) 55%, #000);
}

.house-mng-room__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 0.75rem;
    margin: 0;
    padding: 1rem;
}

.house-mng-room__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.9rem;
}

.house-mng-room__label {
    flex-shrink: 0;
    font-weight: 400;
    white-space: nowrap;
    color: #6b7280;
}

.house-mng-room__value {
    margin: 0;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

/* ===== Grid view tiles ===== */
.house-mng-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}

.house-mng-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    aspect-ratio: 1;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ===== Floor-plan placeholder ===== */
.house-mng-plan {
    padding: 3rem 1rem;
    border-radius: 16px;
    background: #f1f4f9;
    text-align: center;
}

.house-mng-plan__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 2rem;
}

.house-mng-plan__title {
    font-size: 1.15rem;
    font-weight: 700;
}

.house-mng-plan__text {
    color: #64748b;
}

@media (min-width: 576px) {
    .house-mng-tiles {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ===== Room detail + action forms ===== */
.house-mng__heading-text {
    flex: 1;
    min-width: 0;
}

.house-mng__subtitle {
    margin: 0.125rem 0 0;
    color: #6b7280;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.house-mng-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.house-mng-detail__summary {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
}

.house-mng-detail__summary-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.house-mng-detail__summary-amount {
    margin: 0.25rem 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.house-mng-detail__summary-amount small {
    font-size: 0.9rem;
    font-weight: 600;
}

.house-mng-detail__summary-rows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.house-mng-detail__summary-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
    font-weight: 600;
}

.house-mng-detail__summary-note {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.8rem;
}

.house-mng-detail__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.house-mng-detail__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
}

.house-mng-detail__card {
    margin: 0;
    padding: 0.25rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.house-mng-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 0;
}

.house-mng-detail__row + .house-mng-detail__row {
    border-top: 1px solid #eef0f3;
}

.house-mng-detail__label {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    font-weight: 400;
    color: #4b5563;
}

.house-mng-detail__row-icon {
    width: 1.1em;
    text-align: center;
    color: #94a3b8;
}

.house-mng-detail__value {
    margin: 0;
    min-width: 0;
    font-weight: 600;
    color: #111827;
    text-align: right;
    overflow-wrap: anywhere;
}

.house-mng-detail__row.is-total .house-mng-detail__label,
.house-mng-detail__row.is-total .house-mng-detail__value {
    font-weight: 700;
    color: #dc2626;
}

.house-mng-detail__row.is-total {
    padding: 1.25rem 0;
}

.house-mng-detail__row.is-total .house-mng-detail__value {
    font-size: 1.15rem;
}

.house-mng-detail__person .house-mng-detail__section-title {
    font-size: 0.95rem;
    text-transform: none;
    color: #111827;
}

.house-mng-detail__section .house-mng-detail__person {
    margin-top: 0.75rem;
}

.house-mng-detail__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.house-mng-detail__pill.is-pending {
    background: #fdeeee;
    color: #dc2626;
}

.house-mng-detail__pill.is-done {
    background: #effaf1;
    color: #16a34a;
}

.house-mng-detail__computed {
    color: var(--primary);
}

/* Room action tiles (Thao tác phòng sheet) */
.house-mng-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.5rem 0 1rem;
}

.house-mng-actions__item {
    --action-accent: #2563eb;
    --action-bg: #eff6ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 7rem;
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
}

.house-mng-actions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--action-bg);
    color: var(--action-accent);
    font-size: 1.4rem;
}

.house-mng-actions__item--green { --action-accent: #16a34a; --action-bg: #e7f8ee; }
.house-mng-actions__item--purple { --action-accent: #7c3aed; --action-bg: #f1ebfe; }

/* Form fields inside detail cards */
.house-mng-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
}

.house-mng-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.house-mng-form__label {
    color: #4b5563;
    font-size: 0.9rem;
}

.house-mng-form__inline-input {
    width: 8rem;
    text-align: right;
}

.house-mng-form__error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

.house-mng-segment {
    display: flex;
    margin: 0.75rem 0 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: #f1f2f4;
}

.house-mng-segment__item {
    flex: 1;
    padding: 0.5rem;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 600;
    text-align: center;
}

.house-mng-segment__item.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* "Chi tiết phòng" on "Trả phòng": electricity and water columns, stacked on phones and side by side from 992px */
.house-mng-meters {
    display: grid;
}

.house-mng-meter {
    min-width: 0;
}

@media (max-width: 991px) {
    .house-mng-meter + .house-mng-meter {
        margin-top: 0.5rem;
        border-top: 1px solid #eef0f3;
    }
}

/* Loader in the shared submit button (the global .hidden/.spinner helpers are not loaded on these pages) */
.house-mng-form-actions .hidden {
    display: none;
}

.house-mng-form-actions .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: house-mng-spin 0.8s linear infinite;
}

/* ===== Editable form rows (icon + label + typeable value + pencil) ===== */
.house-mng-detail__required {
    color: #dc2626;
}

.house-mng-row .house-mng-detail__value {
    flex: 1;
    min-width: 0;
}

.house-mng-row__control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.house-mng-row__input {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: #111827;
    font: inherit;
    font-weight: 600;
    text-align: right;
}

.house-mng-row__input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.house-mng-row__input:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.house-mng-row__input[type="date"] {
    min-width: 8.5rem;
}

/* Editing state: the whole control is tinted, so a click on the pencil visibly turns the field on */
.house-mng-row__control {
    border-radius: 6px;
    transition: background-color 0.15s;
}

.house-mng-row__control:focus-within {
    background: #f5f8ff;
    box-shadow: inset 0 -2px 0 var(--primary);
}

/* The spinner arrows crowd the value next to the pencil */
.house-mng-row__input[type="number"] {
    appearance: textfield;
}

.house-mng-row__input[type="number"]::-webkit-inner-spin-button,
.house-mng-row__input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

/* The row's own calendar button opens the picker; hide the browser's duplicate icon */
.house-mng-row__input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.house-mng-row__select {
    appearance: none;
    cursor: pointer;
    text-align-last: right;
}

.house-mng-row__edit {
    flex-shrink: 0;
    padding: 0.375rem;
    background: none;
    border: 0;
    border-radius: 6px;
    color: #6b7280;
}

.house-mng-row__edit:hover,
.house-mng-row__edit:focus-visible {
    background: #f1f2f4;
    color: var(--primary);
}

.house-mng-row__chevron {
    flex-shrink: 0;
    padding: 0 0.375rem;
    color: #6b7280;
    pointer-events: none;
}

/* Phones: give the value column room so "Chuyển khoản công ty" is not cut off, and space it from the chevron / pencil */
@media (max-width: 575px) {
    .house-mng-row {
        gap: 0.5rem;
    }

    /* Same scale for every row of a form page, editable or not, so labels do not change size between rows */
    #room-form-page .house-mng-detail__label {
        gap: 0.5rem;
        font-size: 0.9rem;
    }

    .house-mng-row .house-mng-detail__label {
        flex: 0 1 auto;
    }

    /* The label wraps (up to 3 lines) before the value column gets narrower than the longest method name */
    .house-mng-row .house-mng-detail__value {
        flex: 1 0 11.5rem;
    }

    .house-mng-row__control {
        gap: 0.75rem;
    }

    .house-mng-row__input {
        font-size: 0.9rem;
    }

    .house-mng-row__select {
        padding-right: 0.25rem;
        font-size: 0.85rem;
        text-overflow: ellipsis;
    }

    #room-form-page .house-mng-detail__value {
        font-size: 0.9rem;
    }
}

/* On/off switch */
.house-mng-switch {
    position: relative;
    display: inline-block;
    width: 3.25rem;
    height: 1.9rem;
}

.house-mng-switch__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.house-mng-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d1d5db;
    transition: background 0.15s;
}

.house-mng-switch__track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s;
}

.house-mng-switch__input:checked + .house-mng-switch__track {
    background: #22c55e;
}

.house-mng-switch__input:checked + .house-mng-switch__track::after {
    transform: translateX(1.35rem);
}

.house-mng-switch__input:focus-visible + .house-mng-switch__track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== Image upload ("Tập tin đính kèm") ===== */
.house-mng-upload {
    padding: 0.75rem 0 1rem;
    border-top: 1px solid #eef0f3;
}

.house-mng-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 1.5rem 1rem;
    border: 2px dotted var(--primary);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
}

.house-mng-upload__zone:hover,
.house-mng-upload__zone:focus-visible,
.house-mng-upload__zone.is-dragover {
    background: #eff6ff;
    outline: none;
}

.house-mng-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.25rem;
}

.house-mng-upload__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.house-mng-upload__hint {
    margin: 0.25rem 0 0;
    color: #6b7280;
}

.house-mng-upload__hint strong {
    color: #111827;
}

.house-mng-upload__preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.house-mng-upload__thumb {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f2f4;
}

.house-mng-upload__info {
    flex: 1;
    min-width: 0;
}

.house-mng-upload__name {
    margin: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.house-mng-upload__status {
    margin: 0.125rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.house-mng-upload__status.is-done {
    color: #16a34a;
}

.house-mng-upload__remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: #f1f2f4;
    border: 0;
    border-radius: 50%;
    color: #4b5563;
}

.house-mng-upload .house-mng-form__error {
    margin-top: 0.5rem;
}

/* ===== Room card footer (action buttons: Cọc chỗ, Thanh toán) ===== */
.house-mng-room__main {
    display: block;
    color: inherit;
    text-decoration: none;
}

.house-mng-room__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 1rem;
    padding: 0.75rem 0 1rem;
    border-top: 1px solid #eef0f3;
}

.house-mng-room__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    background: var(--room-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.house-mng-room__action:hover,
.house-mng-room__action:focus-visible {
    color: #fff;
    filter: brightness(0.95);
}

/* White text on a fixed background per action (Cọc chỗ keeps the room color) */
.house-mng-room__action--payment { background: #16a34a; }
.house-mng-room__action--checkout { background: #ea580c; }

/* Transaction image on the approval page */
.house-mng-proof {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #f1f2f4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.house-mng-proof__image {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
}

/* ===== Confirmation dialog (confirmDialog in house-management-api.js) ===== */
.house-mng-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1050);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
}

.house-mng-dialog__box {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem 1.5rem 1rem;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.house-mng-dialog__title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.house-mng-dialog__message {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: #374151;
}

.house-mng-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.house-mng-dialog__btn {
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
}

.house-mng-dialog__btn:hover,
.house-mng-dialog__btn:focus-visible {
    background: #f1f2f4;
    outline: none;
}

.house-mng-dialog__btn--cancel,
.house-mng-dialog__btn--primary {
    color: var(--primary, #0966ff);
}

.house-mng-dialog__btn--danger {
    color: #dc2626;
}

/* Desktop: the bar is not fixed, so keep it in the same column as the page content (same width and gutters
   as .house-mng), which makes the button as wide as the boxes above it */
@media (min-width: 992px) {
    .house-mng-form-actions {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 var(--space-4, 1rem);
    }
}

@keyframes house-mng-spin {
    to { transform: rotate(360deg); }
}

/* Narrow phones: stack header pills under the address */
@media (max-width: 420px) {
    .house-mng-card__head {
        flex-wrap: wrap;
    }

    .house-mng-cell {
        font-size: 0.82rem;
        padding: 0.5rem 0.625rem;
    }

    .house-mng-room__body {
        column-gap: 0.75rem;
        padding: 0.875rem 0.75rem;
    }

    .house-mng-room__row {
        font-size: 0.8rem;
    }
}